Lossen pagina in 'Smooth page scroll to an anchor' tip

musicscore · Post by **musicscore** » Sun Oct 16, 2016 9:14 am

Ik gebruik de tip over 'Multiple pages in one with jQuery tabs' dit in combinatie met 'Smooth page scroll to an anchor' die te vinden zijn op de website van Rolf (cmscanbesimple).
Nu lukt het mij niet om naar een pagina te springen/linken die als aparte pagina wordt getoond (deze staat niet in het menu) en vervolgens weer terug te gaan naar de pagina waarbinnen de andere (Smooth scrolling) pagina's zijn opgenomen. Heeft iemand hier een tip voor.

Hier mijn template

Code: Select all

{strip}
	{process_pagedata}
{/strip}<!doctype html>
<__html lang="{cms_get_language}">

<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
{* Change lang="en" to the language of your site *}
<head>
<title>{sitename} - {title}</title>
{metadata}
{cms_stylesheet}

<!-- {cms_jquery} -->

<__script__ src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></__script>


<__script__ type="text/javascript">
  jQuery(document).ready(function($) {
    $(".scroll").click(function(event) {
    event.preventDefault();
    $('html,body').animate( { scrollTop:$(this.hash).offset().top-0 } , 2000);
    } );
  } );
</__script>

</head>
</__body>

<!-- start layout --------------------------------------------------------------->
<div id="layout">
 
<!-- start menu -->
<div id="menu_breed">
        {menu loadprops=0 start_level="2" number_of_levels="1" template='mbit-horizon'}
</div>
<!-- end menu -->

<!-- start menu -->
<div id="menu_small">
        {menu loadprops=0 start_level="1" number_of_levels="2" template='mbit-horizon'}
</div>
<!-- end menu -->

<!-- start content -->
<div id="content">
  {content}
</div>
<!-- end content -->
<div class="clear_all"> </div>

</div>
<!-- end layout ----------------------------------------------------------------->
<__body>
</__html>

En mij Homepage

Code: Select all

<p><a id="top"></a> {assign var=sectionnumber value=1}</p>
<p>{cgsimple::get_children('',0,'children')} {if count($children)}</p>
<p> </p>
<p>{foreach from=$children item='child'}</p>
<p>{if $child.show_in_menu}</p>
<div id="section-{$sectionnumber}"><a id="{$child.alias}"></a>
<div class="sectionblock">{cgsimple::get_page_content("{$child.alias}",'',foo)}{eval var=$foo} {assign var=sectionnumber value=$sectionnumber+1}
<p><a class="scroll" href="#top">Scroll terug naar begin</a></p>
</div>
{/if}</div>
<p>{/foreach} {/if}</p>

In de menu template heb ik aangegeven dat ik naar een ancor wil :

Code: Select all

href="#{$node->alias}"><span>{$node->menutext}</span></a>

De scroll op de pagina werkt perfect alleen wanneer ik een pagina open via een link, een pagina die dus niet in het menu staat en ook niet op de 'scrol pagina' dan gaat het mis.

Bedankt alvast.

3dwebb · Post by **3dwebb** » Sun Oct 16, 2016 4:44 pm

Probeer onderstaande jQuery maar eens.

Code: Select all

//=================================== SMOOTH SCROLLING EXTERNAL ANCHOR //	
(function($){
  $(document).on("ready", function () {
      var urlHash = window.location.href.split("#")[1];
      $('html,body').animate({
          scrollTop: $('.' + urlHash + ', #' + urlHash +',[name='+urlHash+']').first().offset().top -150
      }, 1000);
  });

})(jQuery);


// =================================== SMOOTH SCROLLING LOCAL ANCHOR //	
(function($) {
 	$('a[href*=#]:not([href=#])').click(function() {
	    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
	      var target = $(this.hash);
	      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
	      if (target.length) {
	        $('html,body').animate({
	          scrollTop: target.offset().top -150
	        }, 1000);
	        return false;
	      }
	    }
  	});
})(jQuery);

musicscore · Post by **musicscore** » Sun Oct 16, 2016 6:26 pm

Ga ik morgen proberen en laat weten of het gelukt is.
Bedankt alvast

Rolf · Post by **Rolf** » Mon Oct 17, 2016 9:31 am

musicscore wrote:En mij Homepage

Code: Select all

<p><a id="top"></a> {assign var=sectionnumber value=1}</p>
<p>{cgsimple::get_children('',0,'children')} {if count($children)}</p>
<p> </p>
<p>{foreach from=$children item='child'}</p>
<p>{if $child.show_in_menu}</p>
<div id="section-{$sectionnumber}"><a id="{$child.alias}"></a>
<div class="sectionblock">{cgsimple::get_page_content("{$child.alias}",'',foo)}{eval var=$foo} {assign var=sectionnumber value=$sectionnumber+1}
<p><a class="scroll" href="#top">Scroll terug naar begin</a></p>
</div>
{/if}</div>
<p>{/foreach} {/if}</p>

Wat doen al die <p></p> tags om deze code? Heb je WYSIWYG aan staan???

musicscore · Post by **musicscore** » Mon Oct 17, 2016 1:14 pm

Rolf, Heb ik niet zo op gelet maar denk niet dat dat de oorzaak van mijn probleem is. Ook als ik de <p> tags weg haal weet ik niet hoe ik naar een lossen pagina kan springen en dan weer terug naar de "scroll pagina". Ga zo de jquery van 3dwebb proberen of heb jij misschiens een makkelijkere oplossing ?

Post by **velden** » Mon Oct 17, 2016 2:45 pm

De scroll op de pagina werkt perfect alleen wanneer ik een pagina open via een link, een pagina die dus niet in het menu staat en ook niet op de 'scrol pagina' dan gaat het mis.

'dan gaat het mis' zegt niet zo heel veel.

Kun je een url van de website geven? Waarschijnlijk makkelijker te zeggen wat er verkeerd gaat.

De links die niet werken, hebben die een class 'scroll'? Zo ja dan is dat het probleem denk ik.
Tevens is het wél van belang dat je html goed in elkaar zit; voor hetzelfde geld heb je per ongeluk de gehele content een class 'scroll' meegegeven.
Het feit dat je - zoals Rolf je al meldde - die html tags in je code hebt staan suggereert dat je het op een wat vreemde manier aan het inrichten bent mogelijk ( bv. in de homepage content en niet in een template).

musicscore · Post by **musicscore** » Mon Oct 17, 2016 2:50 pm

Bedankt voor je reactie velden.
Als echte amateur verwonderd het mij niks als het wat vreemd is ingericht. Ik zal jouw adviesen eens nalopen en misschien e.e.a. anders inrichten. Met de scroll tag zou best wel eens kunnen.

Ik laat het je weten.

Bedankt i.i.g.

Rolf · Post by **Rolf** » Tue Oct 18, 2016 8:16 pm

Mijn modem is kapot dus even zonder vast internet, helpen is even lastig. Maar gezien de opbouw van jouw templates zou ik mijn tutorials nog maar eens goed doorlezen en de stappen controleren.
In de content van de pagina's komt geen Smarty code of wat dan ook, alles zit in de core pagina template

Rolf · Post by **Rolf** » Thu Oct 20, 2016 1:36 pm

Maak eerst een basis Core::Page template werkend in Design Manager

Code: Select all

< body>

...

<div id="main">

{* +++++ homepage content +++++ *}

  <div id="home">
    <h3>{title}</h3>
    {content}
  </div>

{* +++++ tweede pagina +++++ *}

  <div id="page_alias_2">

    {* terug naar boven link *}
    <a href="#home">Top</a>

    {* haal titel van pagina 2 op *}
    <h3>{cgsimple::get_page_title('page_alias_2','','')}</h3> 

    {* haal content van de pagina 2 op *}
    {cgsimple::get_page_content('page_alias_2','','page_content_2')} 
    {eval var=$page_content_2}

  </div>

{* +++++ derde pagina +++++ *}

  <div id="page_alias_3">

    <a href="#home">Top</a>

    <h3>{cgsimple::get_page_title('page_alias_3','','')}</h3>

    {cgsimple::get_page_content('page_alias_3','','page_content_3')}
    {eval var=$page_content_3}

  </div>

{* +++++++++++++++++++ *}

</div>

...

< /body>

Let goed op de je de teksten "page_alias_x" verandert in de waarden die voor jouw pagina's geldt!!! Dus bijv. profiel, portfolio, contact, etc.

Navigator template zul je ook moeten aanpassen omdat je straks ankers wilt aansturen en geen pagina's wilt openen:

Code: Select all

{if isset($nodes)}
  <ul>
    {foreach $nodes as $node}
      <li><a href="#{$node->alias}">{$node->menutext}</a></li>
    {/foreach}
  </ul>
{/if}

musicscore · Post by **musicscore** » Fri Oct 21, 2016 9:16 am

Bedankt allen,

Ik ga e.e.a. dus inderdaad in de template verwerken en de page content smarty vrij houden. Heb nog veel te leren maar aldoende leert men.
Nogmaals bedankt.

CMS Made Simple Forums

Lossen pagina in 'Smooth page scroll to an anchor' tip

Lossen pagina in 'Smooth page scroll to an anchor' tip

Re: Lossen pagina in 'Smooth page scroll to an anchor' tip

Re: Lossen pagina in 'Smooth page scroll to an anchor' tip

Re: Lossen pagina in 'Smooth page scroll to an anchor' tip

Re: Lossen pagina in 'Smooth page scroll to an anchor' tip

Re: Lossen pagina in 'Smooth page scroll to an anchor' tip

Re: Lossen pagina in 'Smooth page scroll to an anchor' tip

Re: Lossen pagina in 'Smooth page scroll to an anchor' tip

Re: Lossen pagina in 'Smooth page scroll to an anchor' tip

Re: Lossen pagina in 'Smooth page scroll to an anchor' tip