Trädvy Permalänk
Medlem
Plats
Skövde
Registrerad
Jul 2007

"Dölja" info på webbsida

Jag undrar hur man gör för att kunna "dölja" information, sen har man typ en läs mer "knapp" så åker den dolda texten(/bilden) ut. Det borde väll vara någon typ av java vilket jag knappt kan något om.

Hur gör man det, om ni fattar vad jag menar?

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Feb 2005

Med jquery kan du göra det. Som du säger så är det javascript som gäller för att lösa det hela. Om du vill bli bättre på javascript så är http://www.w3schools.com/ en bra sida.

i7 920 | 12GB DDR3 | GTX 480 | GA-X58A-UD7 | 160GB SSD X25-M G2 | 1TB F3 HD103SJ | W7 64-bit | Mac Mini
Webb: bluekitestudios.com

Trädvy Permalänk
Medlem
Plats
Halmstad
Registrerad
Apr 2003

CSS

.show { display: none; } .hide { display: hide; }

JavaScript

<script type="text/Javascript"> <!-- function display (category) { var whichcategory = document.getElementById(category); if (whichcategory.className=="show") { whichcategory.className="hide"; } else { whichcategory.className="show"; } } --> </script>

HTML (dölj det med class="show"
ID:t används också i länken för att veta vilken som skall öppnas och stängas.

<div class="show" id="wrapper"> </div>

Och sen en länk till kakan:

<a href="javascript:display('wrapper')">Visa</a>

Hur kan syltkakor överleva i det vilda utan ögon?

Trädvy Permalänk
Medlem
Plats
Uppsala
Registrerad
Jul 2008

Eller så gör man det mycket lättare för sig själv och kör med detta;

<script> function toggle(obj) { var el = document.getElementById(obj); if ( el.style.display != 'none' ) { el.style.display = 'none'; } else { el.style.display = ''; } } </script>

<span onclick="toggle('1');" class="toggle">VISA</span>

Om man trycker på VISA så visas div-taggen med ID 1

@x-per, du vet väl att display: hide inte finns?

Trädvy Permalänk
Medlem
Registrerad
Apr 2004

Eller så använda detta;
Animated Collapsible DIV v2.2
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.h...

Trädvy Permalänk
Medlem
Plats
i din garderob
Registrerad
Sep 2007

fungerar det verkligen att sätta display till ingenting? borde vara "block" tycker man..

Bilanaloger är som Volvo — varenda svenne kör med dem

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jun 2004

+1 för jQuery:

$('#minDiv').toggle();

Trädvy Permalänk
Medlem
Plats
Halmstad
Registrerad
Apr 2003

Orka ladda jQuery för div toggle, onödigt om man inte använder mer funktioner

Hur kan syltkakor överleva i det vilda utan ögon?

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jun 2004
Citat:

Ursprungligen inskrivet av x-per
Orka ladda jQuery för div toggle, onödigt om man inte använder mer funktioner

Dels är chansen att du redan har jQuery cachat så stor att det i princip inte ger någon skillnad i bandbredd, dels är det rätt jobbigt att göra detta för en samling element:

$('#endiv, #endiv2, .enklass, .enklass>barn, .enklass:odd, .enklass+nästa').slideToggle();

Jämför den raden med att göra detsamma i JS utan ramverk. Vad kommer skillnaden i svårighetsgrad på de två kodsnuttarna att göra för utvecklingen av TS sajt?

Med jQuery tjänar man så mycket i skalbarhet att det nästan alltid är värt det i slutändan. Men ja, du har rätt i att det är onödigt om man bara ska toggla ett enda element, utan effekt.

Trädvy Permalänk
Medlem
Plats
Skövde
Registrerad
Jul 2007
Citat:

Ursprungligen inskrivet av Woodlauncher
Eller så gör man det mycket lättare för sig själv och kör med detta;

<script> function toggle(obj) { var el = document.getElementById(obj); if ( el.style.display != 'none' ) { el.style.display = 'none'; } else { el.style.display = ''; } } </script>

<span onclick="toggle('1');" class="toggle">VISA</span>

Om man trycker på VISA så visas div-taggen med ID 1

@x-per, du vet väl att display: hide inte finns?

Detta fungerar bra till det jag ska använda det till, men hur blir det dolt från början? Nu måste man ju klicka på det för att det ska döljas men jag vill att det ska vara dolt från börja.

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007
Citat:

Ursprungligen inskrivet av azoapes
Dels är chansen att du redan har jQuery cachat så stor att det i princip inte ger någon skillnad i bandbredd,

Förutsatt att man använder någon slags CDN-version av jQuery, typ den Google har.

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Jun 2005
Citat:

Ursprungligen inskrivet av Teknocide
fungerar det verkligen att sätta display till ingenting? borde vara "block" tycker man..

Kan hoppa in och förklara här. Man sätter det till ingenting för att browsern tar då själv hand om att sätta det till defaultvärdet. Glöm inte att man kanske vill gömma en cell i en tabell, eller en hel tabellrad. Då är det inte block man vill ha, utan kanske table-row eller table-cell.

Trädvy Permalänk
Medlem
Plats
Halmstad
Registrerad
Apr 2003
Citat:

Ursprungligen inskrivet av azoapes

$('#endiv, #endiv2, .enklass, .enklass>barn, .enklass:odd, .enklass+nästa').slideToggle();

Dendär kodbiten verkar smidigt men hur får man den till toggla via en länk och dold från början?

Just nu togglar jag med en kodsnutt från en tutorial som är hyffsad dryg att lägga till andra divar att toggla:

<script language="javascript"> $(document).ready(function() { // hides the slickbox as soon as the DOM is ready // (a little sooner than page load) $('#slickbox').hide(); // shows the slickbox on clicking the noted link $('a#slick-show').click(function() { $('#slickbox').show('slow'); return false; }); // hides the slickbox on clicking the noted link $('a#slick-hide').click(function() { $('#slickbox').hide('fast'); return false; }); // toggles the slickbox on clicking the noted link $('a#slick-toggle').click(function() { $('#slickbox').slideToggle(200); return false; }); }); </script>

Hur kan syltkakor överleva i det vilda utan ögon?

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jun 2004
Citat:

Ursprungligen inskrivet av x-per
Dendär kodbiten verkar smidigt men hur får man den till toggla via en länk och dold från början?

Just nu togglar jag med en kodsnutt från en tutorial som är hyffsad dryg att lägga till andra divar att toggla:

Tjena, det verkar som att du kan stryka de två kodsnuttarna i mitten (shows/hides), då blir det lite kortare. För att få det dynamiskt finns det garanterat någon plugin redan eller någon kodsnutt på nätet.

Men jag kan ju visa lite av de roligare delarna av jQuery istället, så lär du dig antagligen mycket mer. Såhär skulle jag ha gjort, håll till godo!

// Pluginet kan man lägga i en makeToggler.js om man vill // "extendar", alltså utökar, jQuery med en egen liten plugin jQuery.fn.extend({ // vår plugin består av en enda funktion; "makeToggler" // Parametrar: // "suffix" används för att identifiera ett trigger-element // "hiddenInitially" bestämmer om elementen är dolda initialt // "toggleSpeed" bestämmer hastigheten på animationen makeToggler: function(suffix, hiddenInitially, toggleSpeed) { // returnerar this.each för att hantera flera element return this.each(function() { // $(this) är först #slickbox, sedan #slickbox2 etc var toggleObj = $(this); if(hiddenInitially) { // dölj objektet initialt toggleObj.hide(); } // hämta t.ex. $('#slickbox2-toggler') var toggler = $('#'+toggleObj.attr('id')+suffix); toggler.click(function() { // dölj/visa (och returnera false för att // förhindra att länken följs av webbläsaren) toggleObj.slideToggle(toggleSpeed); return false; }); }); } }); // Detta lägger du i din HTML-fil... $(document).ready(function() { // några exempel på hur man kan använda vår lilla plugin $('#slickbox, #slickbox2').makeToggler('-toggler', true, 200); $('#slickbox3, #slickbox4').makeToggler('-togg', false, 0); });

Och använder det på t.ex. denna HTML:

<div id="slickbox">SLICKBOX ONE<hr></div>
<a href="#" id="slickbox-toggler">One</a>

Trädvy Permalänk
Medlem
Plats
Skövde
Registrerad
Jul 2007

Nu hänger i alla fall inte jag med, till att börja med vad är jQuery, hur vet man om det redan används?

Finns det inget lätt sätt att bara ändra i det skriptet jag använder nu för att ha det dolt från början?

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jun 2004
Citat:

Ursprungligen inskrivet av dimebag
Nu hänger i alla fall inte jag med, till att börja med vad är jQuery, hur vet man om det redan används?

Finns det inget lätt sätt att bara ändra i det skriptet jag använder nu för att ha det dolt från början?

jQuery är ett bibliotek/ramverk som förenklar programmering i JavaScript. Istället för att skriva 50 rader kod, använder man jQuery och skriver 5 rader kod. Det kan också handla om 500 rader JS vs 1 rad jQuery.

Jodå, det finns det. På raden före "function toggle (obj) {" lägger du till detta: document.getElementById('1').style.display = 'none';

Du kan även klistra in min lilla plugin-kod ovan i en fil som du döper till makeToggle.js och sedan använda den på det sätt jag beskrivit ovan. Kräver jQuery, alltså att du lägger till detta i din head:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min...."></script>

Trädvy Permalänk
Medlem
Plats
i din garderob
Registrerad
Sep 2007

alternativt så kan du ställa in CSS:en så att elemente[t/n] helt enkelt har display: none från start. Antagligen det enklaste.

Bilanaloger är som Volvo — varenda svenne kör med dem

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007
Citat:

Ursprungligen inskrivet av Teknocide
alternativt så kan du ställa in CSS:en så att elemente[t/n] helt enkelt har display: none från start. Antagligen det enklaste.

Dålig idé, tänk om någon har stängt av Javascript (eller inte ens har stöd för det).
Att dölja det med JS är rätt väg att gå.

Trädvy Permalänk
Medlem
Plats
i din garderob
Registrerad
Sep 2007

Det är inte alls en dålig idé utan handlar snarare om hur han vill att hans sida ska agera ifall användarens klient inte stödjer javascript. Om det rör sig om ett galleri så vill han ju antagligen inte ha 10 st fullsize divvar synligt uppradade efter varandra, utan länkar vidare till dessa via de refererande thumbnailsen. Och om han skulle ladda bilderna dynamiskt via AJAX så skulle han fortfarande inte vilja ha en tom div liggandes.

Bilanaloger är som Volvo — varenda svenne kör med dem

Trädvy Permalänk
Medlem
Plats
Halmstad
Registrerad
Apr 2003

Tack så mycket azoapes för att du tog dig tid att knåpa ihop koden, uppskattar det verkligen.

Är kul att se olika lösningar på samma problem, har hittat ytterligare en kod som verkar göra jobbet galant:

<script language="javascript"> $(document).ready(function() { $('#toggle').hide(); $('a.comment').click(function() { var id = $(this).attr('id'); $('#toggle' + id).toggle(200); // alert(id); return false; }); }); </script>

<a href="#" id="2" class="comment">Toggle 2</a> <div id="toggle2" class="commentbox" style="display:none">comment form</div>

Hyffsat optimerad kod tycker jag, är ju inte inbiten jQuery användare så någon som ser någon nackdel eller något med denna?

Hur kan syltkakor överleva i det vilda utan ögon?

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007
Citat:

Ursprungligen inskrivet av Teknocide
Det är inte alls en dålig idé utan handlar snarare om hur han vill att hans sida ska agera ifall användarens klient inte stödjer javascript. Om det rör sig om ett galleri så vill han ju antagligen inte ha 10 st fullsize divvar synligt uppradade efter varandra, utan länkar vidare till dessa via de refererande thumbnailsen. Och om han skulle ladda bilderna dynamiskt via AJAX så skulle han fortfarande inte vilja ha en tom div liggandes.

Sant, men nu fraserade trådskaparen det som "information", något som jag antar är viktigt.

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jun 2004
Citat:

Ursprungligen inskrivet av x-per
Hyffsat optimerad kod tycker jag, är ju inte inbiten jQuery användare så någon som ser någon nackdel eller något med denna?

Ja nackdelen är ju att du inte kan skapa flera "togglers" i ett svep, som med min plugin. Då måste du repetera den där kodsnutten om och om igen. Den är på ca 7 rader och min plugin är på ca 14 rader, med andra ord blir min effektivare redan när man behöver 3 st "togglers". Men annars är det inga problem, kodsnutten är ju precis vad min plugin gör.

Trädvy Permalänk
Medlem
Plats
Halmstad
Registrerad
Apr 2003
Citat:

Ursprungligen inskrivet av azoapes
Ja nackdelen är ju att du inte kan skapa flera "togglers" i ett svep, som med min plugin. Då måste du repetera den där kodsnutten om och om igen. Den är på ca 7 rader och min plugin är på ca 14 rader, med andra ord blir min effektivare redan när man behöver 3 st "togglers". Men annars är det inga problem, kodsnutten är ju precis vad min plugin gör.

Naej den kodsnutten behöver inte repteras, det är bara att göra ett unikt ID när man skapar länken

Skriver man ID="3" blir det div id="toggle3"

alltså:

<a href="#" id="3" class="comment">Toggle 2</a>
<div id="toggle3" class="commentbox" style="display:none">comment form</div>

eller

<a href="#" id="hejsan" class="comment">Toggle 2</a>
<div id="togglehejsan" class="commentbox" style="display:none">comment form</div>

Så det är ju rätt smidigt

Hur kan syltkakor överleva i det vilda utan ögon?

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jun 2004
Citat:

Ursprungligen inskrivet av x-per
Naej den kodsnutten behöver inte repteras, det är bara att göra ett unikt ID när man skapar länken

Oj, läste inte ens igenom kodsnutten, bara antog att det var som jag trodde. Skyller på att jag är bakis, var på Rockbaren igår.

Ja men då är din kodsnutt kortare och nästan lika bra. Jag skrev en plugin mest för att visa på hur enkelt det är att göra och hur snyggt modulärt det blir.

Trädvy Permalänk
Medlem
Plats
Halmstad
Registrerad
Apr 2003

Hmm funderade på en sak, går det att använda cookies för att komma ihåg vilket "state" användaren senaste hade?

Hur kan syltkakor överleva i det vilda utan ögon?

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jun 2004

Absolut, är busenkelt att använda jQuery Cookie plugin. Är visserligen nästan lika enkelt att använda JavaScripts riktiga cookiehanterare själv, men man kanske vill slippa tänka på hur det fungerar bakom kulisserna. Då är cookie plugin bra.

När du väl har ett värde som säger vilket state användaren sist hade, är det bara att applicera det på sidan vid ready.

Trädvy Permalänk
Medlem
Plats
Halmstad
Registrerad
Apr 2003

Just ja, tänkte inte på att det fanns plugin till jQuery, otroligt smidigt. Tackar

Hur kan syltkakor överleva i det vilda utan ögon?