scrollable content [opgelost]

[Dr.CSS]

I used the cycle JS to do this in Products...

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

[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.

[Gregor]

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

[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?

[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

[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

[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

[Rolf]

{.....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

[Gregor]

{.....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

[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?

[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...

[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

[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?

[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.

[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 ?...