Page 2 of 3

Re: scrollable content [opgelost]

Posted: Tue Apr 24, 2012 6:32 pm
by Dr.CSS
I used the cycle JS to do this in Products...

http://www.cantinastrella.com/wijnen/rood.html

Re: scrollable content [opgelost]

Posted: Tue Apr 24, 2012 7:35 pm
by timdebuurman
Zou je kort uit willen leggen hoe je dat gedaan hebt?

Zo'n beperkt aantal producten per keer laten zien en toch op dezelfde pagina blijven is wel erg handig/mooi.

Re: scrollable content [opgelost]

Posted: Fri May 04, 2012 10:05 am
by Gregor
timdebuurman wrote:Zou je kort uit willen leggen hoe je dat gedaan hebt?

Zo'n beperkt aantal producten per keer laten zien en toch op dezelfde pagina blijven is wel erg handig/mooi.
Als je een vraag aan Dr. CSS hebt, dan is Engels wellicht handig ;)

Ik heb het gedaan door het window een size te geven en daarbinnen de css van de content op te nemen. Op het i-net zijn talloze oplossingen te vinden. Ik heb gekozen voor een oplossing die binnen css kan worden gerealiseerd.

Grtz., Gregor

Re: scrollable content [opgelost]

Posted: Sun May 06, 2012 12:54 am
by timdebuurman
Gregor,

Bedoel je dat dan met de buttons een div word weergegeven en de andere div's worden verstopt?

Dus de div's absoluut positioneren om vervolgens met jquery de class aante passen bij klikken op de knoppen?

Re: scrollable content [opgelost]

Posted: Sun May 06, 2012 7:41 am
by Gregor
Een deel van mijn template ziet er als volgt uit:

Code: Select all

<div id="pagewrapper" class="colmask {if $page_alias == "home"}threecol{else}leftmenu{/if}">
       <div class="colmid">
	    <div class="colleft">
	        <div class="col1">
                    {global_content name='UB_col1_c'}
		</div>
		<div class="col2">
		    {* Column 2 start / left side *}
                    {global_content name='UB_col2_l'}
                    {* Column 2 end *}
                    {* content block="Tags" wysiwyg="false" oneline="true" *}
                    {cms_module module="simpletagging" action="related"}
	        </div>
         	{if $page_alias == "home"}
                <div class="col3">
		        {* Column 3 start / right side *}
                {global_content name='UB_col3_r'}
		        {* Column 3 end *}
	            </div>
		{/if}
	    </div>
	</div>
        <span class="util-clearb"> </span>
   </div>
Het CSS ziet er als volgt uit:

Code: Select all

.colmask {
clear:both;
float:left;
overflow:hidden;
position:relative;
width:100%
}

.colright,.colmid,.colleft {
float:left;
position:relative;
width:100%
}

.col1,.col2,.col3 {
float:left;
overflow:hidden;
padding:0 0 1px;
position:relative
}

.threecol {
background:#e5d6cc
}

.threecol .colmid {
background:#fff;
right:25%
}

.threecol .colleft {
background:#e5d6cc;
right:50%
}

.threecol .col1 {
left:102%;
width:46%
}

.threecol .col2 {
left:31%;
width:21%
}

.threecol .col3 {
left:85%;
width:22%
}

.leftmenu {
background:#fff
}

.leftmenu .colleft {
background:#f4f4f4;
right:75%
}

.leftmenu .col1 {
height:750px;
left:102%;
overflow:scroll;
overflow-x:hidden;
overflow-y:scroll;
width:71%
}

.leftmenu .col2 {
left:6%;
width:21%
}

.col2 p {
line-height:115%
}
De 'truuk', zit in dit deel van het css:

Code: Select all

.leftmenu .col1 {
height:750px;
left:102%;
overflow:scroll;
overflow-x:hidden;
overflow-y:scroll;
width:71%
}
Kijk ook meer eens op deze site voor een voorbeeld:
http://www.domedia.org/oveklykken/css-div-scroll.php
Google op "scrollable content css"

Succes,
Gregor

Re: scrollable content [opgelost]

Posted: Sun May 06, 2012 8:29 am
by timdebuurman
Hoi Gregor,

Dat is toch niet wat ik bedoel.
Als je op de website van Dr. Css kijkt, zie je 4 producten met erboven 3 knoppen om te wisselen.

In totaal zijn er dus 12 producten, die je per 4 kunt bekijken.

Of kan je met jou voorbeeld hetzelfde bereiken als op die website van Dr. CSS?

gr. Tim

Re: scrollable content [opgelost]

Posted: Sun May 06, 2012 8:41 am
by Gregor
Ah, bedoel je dat (ik heb niet gekeken). Het klikken op een knop o.i.d. heb ik ook op mijn site, als link:

Code: Select all

<p>{startExpandCollapse id="Reageeropditartikel" title="Reageer op dit artikel (klik), of laat een bericht op FaceBook achter via het onderstaand FaceBook-scherm."}</p>
{CGFeedback key1="CGBlog" key2=$uisge_news_id action="default" lang="nl_NL"}
{stopExpandCollapse}
{.....ExpandCollapse} is een standaard tag van cmsms.

Wellicht dat dit je kan helpen.

Grtz., Gregor

Re: scrollable content [opgelost]

Posted: Sun May 06, 2012 10:04 am
by Rolf
Gregor wrote:{.....ExpandCollapse} is een standaard tag van cmsms
*WAS* een standaard tag van CMSMS ;) Is in 1.10 verwijderd geloof ik. Ik zou eens kijken in een oudere cmsms versie, of in the Forge naar de ContentToggle van Pedrosken.

grt. Rolf

Re: scrollable content [opgelost]

Posted: Sun May 06, 2012 10:31 am
by Gregor
Rolf wrote:
Gregor wrote:{.....ExpandCollapse} is een standaard tag van cmsms
*WAS* een standaard tag van CMSMS ;) Is in 1.10 verwijderd geloof ik. Ik zou eens kijken in een oudere cmsms versie, of in the Forge naar de ContentToggle van Pedrosken.

grt. Rolf
Oh, dan is het dus bij nieuwe installaties niet meer beschikbaar. Ik weet dat de tags bij mij al een tijdje in gebruik zijn, maar weet niet vanaf welke versie.

Gr., Gregor

Re: scrollable content [opgelost]

Posted: Sun May 06, 2012 10:34 am
by timdebuurman
Maarre, dat is dus niet het effect wat ik bedoel.

Hoe zou het zo gemaakt kunnen worden als op
http://www.cantinastrella.com/wijnen/rood.html?

Re: scrollable content [opgelost]

Posted: Sun May 06, 2012 1:52 pm
by Rolf
Je bedoelt dus "tabbed content" zoals ik ook de homepage van http://www.smakelijketenzonderzout.nl/ gebruik (wil gebruiken :) )
Uit de broncode kun je al heel wat halen denk ik...

Re: scrollable content [opgelost]

Posted: Sun May 06, 2012 1:59 pm
by Gregor
[quote="Rolf"]Je bedoelt dus "tabbed content"..../quote]
Voor hoeveel verwarring kan een naam zorgen :) Ik was op het verkeerde been gezet....

Grtz. Gregor

Re: scrollable content [opgelost]

Posted: Sun May 06, 2012 3:21 pm
by timdebuurman
Ja, die bedoel ik, maar dan met producten uit de Products-module.

In de broncode zie ik niet direct hoe je dat gedaan hebt.

Iedere aparte tab-inhoud heb je in een div gezet, ik naam aan absoluut gepositioneerd.
Dan met css of jquery de display van 1 op 'block' en van de andere op 'none' ?

Ik kon zo niet zien welke jquery aanroep je daarvoor gebruikt heb, wil je kort uitleggen hoe je dat gedaan hebt en hoe ik dat met producten zou kunnen doen?

Re: scrollable content [opgelost]

Posted: Sun May 06, 2012 4:24 pm
by timdebuurman
Rolf,

De code heb ik gevonden, volgens mij is dat dezelfde als jij gebruikt heb:

http://jqueryfordesigners.com/jquery-tabs/

Stel nu dat ik dan van al m'n producten er 4 per tab wil laten zien.
Zou het dan makkelijk te doen zijn dat er automatisch tabs bijkomen naarmate er producten bij komen?

Dus bijv. bij 8 producten zijn er 2 tabs, bij meer dan 8 komt er automatisch een tab bij, meer dan 12 weer, enz.

Re: scrollable content [opgelost]

Posted: Sun May 06, 2012 5:57 pm
by Dr.CSS
<div id="navi"></div> this makes the numbered nav/tabs at top
<div id='cycle'>
<div class='cycled'>
{foreach from=$items item=entry name=count}

<div class="ProductDirectoryItem>

all the normal product stuff/code

</div>

{if $smarty.foreach.count.iteration ne $smarty.foreach.count.total and $smarty.foreach.count.iteration % 4 == 0}
</div>
<div class='cycled'>{/if}
{/foreach}
</div>
</div>

Let me know if you need a better explanation or any ?...