DIG Digital Corner
Alles wat je altijd al over computers, hardware, software, internet en elektronische gadgets had willen weten, maar niet op Tweakers.net durft te vragen.
Mijn magische bol is kapot helaas.quote:Op maandag 12 maart 2012 22:07 schreef -tape- het volgende:
Top bedankt!
Nu heb ik via w3schools een jQuery effect wat ik wel zou willen hebben: http://www.w3schools.com/(...)tryjquery_slide_down
Maar als ik deze letterlijk op mijn website plaats (in een al-bestaande-div), doet hij niks? Ik heb een aparte .css, maar als ik hem letterlijk zou kopiëren zou die het toch moeten doen? Wat ik zou willen is, dit effect maar dan een plaatje ipv tekst. Maar om de basis te begrijpen probeer ik het zo eerst maar even, maar zelfs dat wil dus al niet lukken.
Herschrijven moet je sowiesoquote:Op maandag 12 maart 2012 22:24 schreef Surveillance-Fiets het volgende:
Ik heb een aantal checkboxjes die onderdeel zijn van een stukje javascript. Deze code laat een aantal thumbnails wel / niet zien. Alleeeen in de code worden er standaard maar 2 checkboxjes getoond van de 8. De andere 6 zitten onder een 'show all' knopje...Als het er 30 zijn is dat inderdaad wel handig. Maar nu dus totaal niet nodig.
De code aanpassen heb ik geprobeerd maar dan werkt het helemaal niet meer. De checkboxjes zijn dan wel standaard zichtbaar. Maar doen vervolgens niets meer... Ik hooop dat ik ergens overheen kijk..
[ code verwijderd ]
[ code verwijderd ]
Kijk ik er nou gewoon overheen of is het niet zo snel mogelijk en moet ik dan een deel van de code herschrijven?
wat een bagger.
quote:
[..]
Herschrijven moet je sowieso
Ja, heuj, het lijkt te werken. deels... uitkleden en herschrijven doe ik wel als alles werkt.Maar zie je iets? of is het geen poging waard door el bagger?
Ik denk meer dat je als nieuwsposter een geile egocentrische narcist moet zijn, die een flinke stijve krijgt van alle berichten die ie van zijn eigen hand ziet op de FP, zo! İyvonne
Beste nieuwsbericht ooit op de FOK!frontpage!
Beste nieuwsbericht ooit op de FOK!frontpage!
heuj, het lijkt te lukken.. hoe ik het doe weet ik niet. Maar het liekt te werken. 
Ik denk meer dat je als nieuwsposter een geile egocentrische narcist moet zijn, die een flinke stijve krijgt van alle berichten die ie van zijn eigen hand ziet op de FP, zo! İyvonne
Beste nieuwsbericht ooit op de FOK!frontpage!
Beste nieuwsbericht ooit op de FOK!frontpage!
Ik heb geen idee, een testpagina waarop het script werkend te zien is zou al mooi zijn.quote:
heuj, het lijkt te lukken.. hoe ik het doe weet ik niet. Maar het liekt te werken.
ff kijken, hold onquote:
[..]
Ik heb geen idee, een testpagina waarop het script werkend te zien is zou al mooi zijn.
Ik denk meer dat je als nieuwsposter een geile egocentrische narcist moet zijn, die een flinke stijve krijgt van alle berichten die ie van zijn eigen hand ziet op de FP, zo! İyvonne
Beste nieuwsbericht ooit op de FOK!frontpage!
Beste nieuwsbericht ooit op de FOK!frontpage!
het is me gelukt. 
ik ga nog ff verder en als het toonbaar is post ik wel een linkje of zo 
ik ga nog ff verder en als het toonbaar is post ik wel een linkje of zo
Ik denk meer dat je als nieuwsposter een geile egocentrische narcist moet zijn, die een flinke stijve krijgt van alle berichten die ie van zijn eigen hand ziet op de FP, zo! İyvonne
Beste nieuwsbericht ooit op de FOK!frontpage!
Beste nieuwsbericht ooit op de FOK!frontpage!
Ik heb dus de volgende code die ik in mijn code wil;
Maar als ik het stukje /script in mijn [/head] zet, de /style in mijn aparte .css bestand en het stukje /body in mijn div (waar ik het dus in wil); krijg ik wel de balk die moet verschijnen, maar niet het 'slide' effect wat je hier ziet: http://www.w3schools.com/(...)yjquery_slide_toggle Iemand enig idee wat ik verkeerd doe?
PS. Dit is mijn div waar hij in moet:
Waar nu dus een Lorem Ipsum zit.
Alvast bedankt
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideToggle("fast"); }); }); </script> <style type="text/css"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; } </style> </head> <body> <div class="panel"> <p>Because time is valuable, we deliver quick and easy learning.</p> <p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p> </div> <p class="flip">Show/Hide Panel</p> </body> </html> |
Maar als ik het stukje /script in mijn [/head] zet, de /style in mijn aparte .css bestand en het stukje /body in mijn div (waar ik het dus in wil); krijg ik wel de balk die moet verschijnen, maar niet het 'slide' effect wat je hier ziet: http://www.w3schools.com/(...)yjquery_slide_toggle Iemand enig idee wat ik verkeerd doe?
PS. Dit is mijn div waar hij in moet:
| 1 2 3 4 5 6 7 8 9 10 11 | <div id="body"> <h2 class="title">Lorem Ipsum</h2> <div class="story"> <p> Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten. <br /></p> <h4>Lorem Ipsum</h4> Het is al geruime tijd een bekend gegeven dat een lezer, tijdens het bekijken van de layout van een pagina, afgeleid wordt door de tekstuele inhoud. Het belangrijke punt van het gebruik van Lorem Ipsum is dat het uit een min of meer normale verdeling van letters bestaat, in tegenstelling tot "Hier uw tekst, hier uw tekst" wat het tot min of meer leesbaar nederlands maakt. Veel desktop publishing pakketten en web pagina editors gebruiken tegenwoordig Lorem Ipsum als hun standaard model tekst, en een zoekopdracht naar "lorem ipsum" ontsluit veel websites die nog in aanbouw zijn. Verscheidene versies hebben zich ontwikkeld in de loop van de jaren, soms per ongeluk soms expres (ingevoegde humor en dergelijke). <br /> </div> </div> </div> |
Waar nu dus een Lorem Ipsum zit.
Alvast bedankt
Omdat je jQuery een div aanspreekt die panel heet en je de div in je code 'story' noemt?
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
Oh fuck, ik had alleen gekeken naar het eerste code stuk. Maar dat is vast de jQuery demo's HTML
Nee.
Hoe bedoel je? Je kunt toch gewoon de footer absoluut onderaan positioneren, en de body een padding geven aan de onderkant die even hoog is als de footer?
Of snap ik niet helemaal wat je wilt?
Of snap ik niet helemaal wat je wilt?
Nee.
De content is te lang, daarom schiet de rest er uit.quote:
Ik heb dus de volgende code die ik in mijn code wil;
[ code verwijderd ]
Maar als ik het stukje /script in mijn [/head] zet, de /style in mijn aparte .css bestand en het stukje /body in mijn div (waar ik het dus in wil); krijg ik wel de balk die moet verschijnen, maar niet het 'slide' effect wat je hier ziet: http://www.w3schools.com/(...)yjquery_slide_toggle Iemand enig idee wat ik verkeerd doe?
PS. Dit is mijn div waar hij in moet:
[ code verwijderd ]
Waar nu dus een Lorem Ipsum zit.
Alvast bedankt
Klik
Twee mogelijke oplossingen;
1. overflow: auto; of overflow: hidden; gebruiken op .panel, zodat je de hoogte van 120px kunt behouden.
2. De hoogte van .panel aanpassen naar iets van 350px / 400px.
Of gewoon een wrapper er om heen, met overflow:hidden en die animeren in de hoogte. Dan heb je ook niet meer dat gezeik met paddings/margins die voor een verspringend effect zorgen.
Nee.
Op
Behalve als je content langer wordt ja. Voglens mij moet je je body een min-height van 100% geven, met daarin een wrapper met de bovenste header en de content, met aan de onderkant een padding/negatieve margin die even hoog is als de onderste footer. Daarnaast een absoluut gepositioneerde footer.quote:
| 1 2 3 4 5 6 7 8 9 10 | <body> <div id="wrapper"> <div id="header"> </div> <div id="content"> </div> </div> <div id="footer"> </div> </body> |
met als CSS
| 1 2 3 | body, html, #wrapper { min-height:100%; height:100%; } #wrapper { margin-bottom:-100px; } #footer { height: 100px; } |
Zo ongeveer. Anders even zoeken op 'sticky footer' ofzo.
[ Bericht 26% gewijzigd door PimD op 15-03-2012 20:08:31 ]
Nee.
Het ligt er ook maar net aan hoe 'sticky' je die footer wilt hebben. Als je hem altijd in beeld wilt hebben, en niet gewoon onderaan de tekst, zou je de content een overflow mee moeten geven oid.quote:
[..]
Behalve als je content langer wordt ja. Voglens mij moet je je body een min-height van 100% geven, met daarin een wrapper met de bovenste header en de content, met aan de onderkant een padding/negatieve margin die even hoog is als de onderste footer. Daarnaast een absoluut gepositioneerde footer.
[ code verwijderd ]
met als CSS
[ code verwijderd ]
Zo ongeveer. Anders even zoeken op 'sticky footer' ofzo.
Wil je hem gewoon altijd écht onderaan je pagina hebben, werkt het inderdaad prima met een min-height en padding / filler.
Klik
En bij minder content ziet dat er dus zo uit: Klik
Als je 'm altijd onderaan de viewport wilt hebben moet je 'm fixed positioneren, niet absoluut zoals in jouw voorbeeld.
Nee.
Klopt, maar dat is in de meeste gevallen niet gewenst. Net als zo'n grote header die constant bovenaan je pagina blijft zweven.quote:
Als je 'm altijd onderaan de viewport wilt hebben moet je 'm fixed positioneren, niet absoluut zoals in jouw voorbeeld.
Footer en de header moeten beide blijven, content in het midden moet schalen naar de overgebleven beschikbare ruimte. Wat ik eigenlijk wil is wat normaal met marge aan de breedte gebeurd. De pagina krijgt een 'letterbox' dat altijd in beeld blijft met daartussen een gallery. Body mag dan ook nooit hoger zijn dan 100%, dat maakt het lastig, zelfs met een table lukt het niet dus voel me genoodzaakt naar js uit te wijken. Bedankt alvast.
“Specialization is for insects”.—Robert Heinlein
Hoe bedoel je "schalen" naar overgebleven ruimte?quote:Op donderdag 15 maart 2012 21:11 schreef n8n het volgende:
Footer en de header moeten beide blijven, content in het midden moet schalen naar de overgebleven beschikbare ruimte. Wat ik eigenlijk wil is wat normaal met marge aan de breedte gebeurd. De pagina krijgt een 'letterbox' dat altijd in beeld blijft met daartussen een gallery. Body mag dan ook nooit hoger zijn dan 100%, dat maakt het lastig, zelfs met een table lukt het niet dus voel me genoodzaakt naar js uit te wijken. Bedankt alvast.
dat als de viewport minder hoog wordt de afbeeldingen kleiner worden met het venster mee. Net als content zou moeten als je normaliter een venster minder breed maakt.quote:Op donderdag 15 maart 2012 21:15 schreef BBQSausage het volgende:
[..]
Hoe bedoel je "schalen" naar overgebleven ruimte?
“Specialization is for insects”.—Robert Heinlein
