Javascriptproblem...belöning utlovas

2007-07-06 17:11

Medlem

Registrerad: Maj 2004

●

Javascriptproblem...belöning utlovas

Nu har jag hållt på en veckas tid för att fixa ett Javascript och desperat googlat och testat olika AJAX och allt vad de heter. Jag har skrivit på säkert fem forum utan något resultat.
Därför vänder jag mig nu slutligen till er innan jag ger upp. Dessutom utlovas en belöning till den som löser mitt problem utan att jag behöver lyfta ett finger. En biocheck som skickas hem till dig!

Okej, vad är problemet då? Jo, jag vill ha så att man har en div som man har en länk ovanför. När man trycker på den öppnas den, sedan stängs den. Om man har flera sådana element på sidan fungerar det så att om man öppnar den första, sedan öppnar den andra stängs den första. Detta problem har jag redan löst! Här är koden för det.

<SCRIPT LANGUAGE="JavaScript">
<!--

visibleDiv = "";
function showHide(elementid){
    if (document.getElementById(elementid).style.display == 'none'){
        document.getElementById(elementid).style.display = '';
        if(visibleDiv != ""){
            document.getElementById(visibleDiv).style.display = 'none';
        }
        visibleDiv = elementid;


    } else {
        document.getElementById(elementid).style.display = 'none';
    }
}
//-->
</SCRIPT>

Problemet är dock att jag vill ha detta script som en animation! Så det du ska fixa för att förtjäna biobiljetten är att fixa scriptet så att diven rullar ner på ett x antal millisekunder (så det ser ut som en animation).

Det är inte nödvändigt, men bonus vore också om första diven på sidan alltid är öppen, detta är dock inget jag kräver. Jag vill inte ha några jobbiga AJAX och JS frameworks på sidan, bara ett enkelt script helst!
Jag åker till landet idag och kommer tillbaka på söndag, hoppas man fått någon hjälp då, jag är riktigt desperat.

Tack för all eventuell hjälp, MVH en desperat!

Rapportera Redigera

Citera flera Citera

2007-07-06 17:27

Permalänk

mogelbrod

Medlem

Plats: Stockholm
Registrerad: Jun 2004

●

Ta en titt på någon av dessa:
http://www.google.com/search?hl=en&q=Javascript+show%2Fhide+a...

Rapportera Redigera

Citera flera Citera

2007-07-06 17:32

Permalänk

Adzam 1

Medlem

Registrerad: Feb 2005

●

Han har redan kollat massa googlelänkar (vi är brorsor). Det ena utesluter det andra säger han. Han vill ha konkreta tips, och det första och bästa tipset som verkligen hjälper hos leder till priset.

Rapportera Redigera

Citera flera Citera

2007-07-06 18:14

Permalänk

You

Medlem

Plats: Göteborg
Registrerad: Jan 2007

●

Kolla mootools, speciellt "Accordion".

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Rapportera Redigera

Citera flera Citera

2007-07-06 19:29

Permalänk

nystan

Medlem

Plats: din root :>
Registrerad: Feb 2004

●

http://simplejs.bleebot.com/
Där finns ett toggle script.

Bara att plocka bort dom funktioner man inte kommer använda.

Rapportera Redigera

Citera flera Citera

2007-07-06 19:38

Permalänk

erc

Medlem

Plats: Stockholm
Registrerad: Nov 2001

●

Jag röstar starkt för att du ska använda dig av prototype tillsammans med scriptaculous, uppfinna hjulet igen, njaaa, så jag kvalificerar mig nog inte för biobiljetterna, eller? nåväl, här är min lösning fint formaterad, och ptja, koden nedanför.

http://pastie.textmate.org/76617

function toggle_content(element_name) {
	show_content($(element_name));
	
	$$('.content').each(function(element) {
		hide_content(element);
	});
}

function show_content(element) {
	if(!element.visible()) {
		new Effect.Appear(element, {duration:0.3})
		new Effect.SlideDown(element, {duration:0.3});	
	}
}

function hide_content(element) {
	if (element.visible()) {
		new Effect.SlideUp(element, {duration:0.3});
		new Effect.Fade(element, {duration:0.3});
	}
}

<div class="container">
	<a href="#" onclick="toggle_content('content_1')">Show/Hide</a>
	<div id="content_1" class="content" style="display:none">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
	</div>
</div>

Hälsningar 'erc' Jocke

Visa signatur

Datateknik på Kungliga Tekniska Högskolan.

Rapportera Redigera

Citera flera Citera

2007-07-09 16:13

Permalänk

TechGuru

Medlem ★

Registrerad: Jul 2001

●

Och jag röstar på jQuery. Se http://lowtech.dyndns.org/temp/bingo.php
Finns det något snyggare än denna rad?

$('div').filter(group).not(id).each(

  <script>
  function showGroupElement(id) {
    id = '#' + id;
    
    // Vilka klasser har elementet? Dela upp i array.
    var classes = $(id).attr('class').split(' ');
    
    // Plocka ut gruppen som elementet finns i
    var group = '';
    for (i = 0; i < classes.length; i++) {
      if (classes[i].indexOf('group_') != -1) {
        group = '.' + classes[i];
        break;
      }
    }

    // Dölj alla element som ingår i gruppen men som inte har det id vi vill visa
    $('div').filter(group).not(id).each(
      function() {
        $(this).hide(500);
      }
    );
    
    // Visa den nya divven med 500 ms animation
    $(id).show(500);
  }
  </script>

Edit: code-taggen funkar dåligt?
Edit2: min kod är inte lika elegant som din erc fast å andra sidan så kan divvarna man vill visa ha flera klasser.

Senast redigerat 2007-07-09 17:38

Rapportera Redigera

Citera flera Citera

2007-07-09 16:27

Permalänk

erc

Medlem