Is deze vorm van jQuery mogelijk?

brentnl · Post by **brentnl** » Fri May 11, 2012 3:17 pm

Hallo,

is het mogelijk een scrollable website a la http://www.laidbackluke.com/ te maken met CMSMS?

Het moet kunnen, maar ik kom er qua gedachtengang niet helemaal uit hoe ik dat moet doen qua paginas/menu/navigatie...

ik hoor graag over jullie ideeën/ervaringen!

timdebuurman · Post by **timdebuurman** » Fri May 11, 2012 5:28 pm

Zo te zien is er geen sprake meer van pagina's, alles is op 1 pagina.

Het menu zal dus zo gemaakt moeten worden dat het niet navigeert naar pagina's,maar naar anchors.

Daarna moet jquery de rest doen:

http://www.webmuse.co.uk/blog/jquery-pl ... to-anchor/

brentnl · Post by **brentnl** » Fri May 11, 2012 6:31 pm

klopt, alles op 1 pagina, maar kan je dan wel met de pagina's van het cms werken? Want dan moeten alle pagina's in 1x geladen worden.

Misschien is het dan slimmer om met 1 sjabloon te werken, met gewoon meerdere {content} blokken?

timdebuurman · Post by **timdebuurman** » Fri May 11, 2012 8:00 pm

Ja, lijkt me wel een oplossing.

Dan zou ieder block (automatisch?) een eigen anchor name moeten krijgen.

Die anchor naam zal dan ook weer in een soort van navigatie terecht moeten komen.

timdebuurman · Post by **timdebuurman** » Fri May 11, 2012 8:28 pm

Ik heb een test gemaakt, nu nog een kwestie van hoe in te passen in CMSMS

http://www.timtest.nl/scrolltest/

timdebuurman · Post by **timdebuurman** » Fri May 11, 2012 8:55 pm

Hier ben ik niet heel bedreven in hoor, maar deze sjabloon werkt:

Code: Select all

{process_pagedata}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>{sitename} - {title}</title>
{metadata}
{cms_stylesheet}

<__script__ type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></__script>
<__script__ src="http://www.timtest.nl/scrolltest/jquery.animate.js" type="text/javascript"></__script>
<__script__ src="http://www.timtest.nl/scrolltest/jquery.anchorScroll.js" type="text/javascript"></__script>

{literal}

<__script__ type="text/javascript">
$(document).ready(function() {
	
	$(".link").anchorScroll({fx: "jswing"});
	
});
</__script>

{/literal}

</head>
</__body>
<div id="top"></div>
{content}
{content block="titlebox1" oneline="true" label="Titel van box 1" assign="titlebox1"}
{content block="box1" label="inhoud box 1" assign="box1"}
{content block="titlebox2" oneline="true" label="Titel van box 2" assign="titlebox2"}
{content block="box2" label="inhoud box 2" assign="box2"}
{content block="titlebox3" oneline="true" label="Titel van box 3" assign="titlebox3"}
{content block="box3" label="inhoud box 3" assign="box3"}

<div id="menu">
<ul>
{if $box1}<li><a href="#{$titlebox1}" class="link">{$titlebox1}</a></li>{/if}
{if $box2}<li><a href="#{$titlebox2}" class="link">{$titlebox2}</a></li>{/if}
{if $box3}<li><a href="#{$titlebox3}" class="link">{$titlebox3}</a></li>{/if}
</ul>
</div>

{if $box1}
<div id="{$titlebox1}">
{$box1}
<a class="link" href="#top">terug naar boven</a>
</div>
{/if}

{if $box2}
<div id="{$titlebox2}">
{$box2}
<a class="link" href="#top">terug naar boven</a>
</div>
{/if}

{if $box3}
<div id="{$titlebox3}">
{$box3}
<a class="link" href="#top">terug naar boven</a>
</div>
{/if}

<__body>
</__html>

Uiteraard even de javascript op de eigen website zetten, deze linkt nu nog naar mijn website en verder naar wens aanpassen.

Misschien dat iemand anders een betere code heeft, waarbij het aantal delen flexibeler word.

brentnl · Post by **brentnl** » Sat May 12, 2012 1:46 pm

Net werk timdebuurman!

Zit ik te denken, het is nog mooier als het menu altijd zichtbaar is, maar dan kan met een position:absolute wel opgelost worden.

Bedankt, nu kan ik verder!

Even kijken nog hoe op die site van LL die achtergronden zijn gemaakt, ieder content block heeft weer zn eigen achtergrond, welke deelsoverlappen etc.. maar ziet er wel netjes uit zo!

CMS Made Simple Forums

Is deze vorm van jQuery mogelijk?

Is deze vorm van jQuery mogelijk?

Re: Is deze vorm van jQuery mogelijk?

Re: Is deze vorm van jQuery mogelijk?

Re: Is deze vorm van jQuery mogelijk?

Re: Is deze vorm van jQuery mogelijk?

Re: Is deze vorm van jQuery mogelijk?

Re: Is deze vorm van jQuery mogelijk?