CMS Made Simple Forums

Content management as it is meant to be
https://forum.cmsmadesimple.org/

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

https://forum.cmsmadesimple.org/viewtopic.php?t=75570

Page 1 of 1

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

Posted: Sun Oct 16, 2016 9:14 am
by musicscore
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.

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

Posted: Sun Oct 16, 2016 4:44 pm
by 3dwebb
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);

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

Posted: Sun Oct 16, 2016 6:26 pm
by musicscore
Ga ik morgen proberen en laat weten of het gelukt is.
Bedankt alvast

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

Posted: Mon Oct 17, 2016 9:31 am
by Rolf
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???

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

Posted: Mon Oct 17, 2016 1:14 pm
by musicscore
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 ?

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

Posted: Mon Oct 17, 2016 2:45 pm
by velden
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).

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

Posted: Mon Oct 17, 2016 2:50 pm
by musicscore
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.

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

Posted: Tue Oct 18, 2016 8:16 pm
by Rolf
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

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

Posted: Thu Oct 20, 2016 1:36 pm
by Rolf
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}

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

Posted: Fri Oct 21, 2016 9:16 am
by musicscore
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.
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited