You are not logged in.

  • Login

Javascript: Bereich verschwinden lassen

Mossi

Trainee

  • "Mossi" started this thread

Posts: 16

  • Send private message

1

Monday, January 26th 2009, 10:07am

Javascript: Bereich verschwinden lassen

Hallo Leute,

Ich habe ein Problem mit Javascript, da ich damit nochnie richtig gearbeitet habe, aber vielleicht ist das was ich suche ja nur ein klein bisschen was für einen erfahrenen JSler kein Problem sein wird.

Ich habe also mein Bannerklicksystem fertig gestellt und möchte nun ein klein bisschen die Optik und die Erscheinung verbessern. Wenn jemand einen Banner geklickt hat dann soll dieser verschwinden, man kann sich das ganze so vorstellen:

Source code

 
1
2
3

Banner 1: Banner, Bannerinformationen 
Banner 2: Banner, Bannerinformationen 
Banner 3: Banner, Bannerinformationen


Wenn jetzt also zum Beispiel Banner 2 geklickt wird, so soll (ohne dass sich die Seite neu laden muss, denn wenn die Seite neu geladen wird, dann wird er sowieso nicht mehr angezeigt) er inklusive der Bannerinformationen verschwinden. Vielleicht lässt sich das ja irgendwie per Div + Javascript lösen.

Ich danke euch für eure Tips und Hilfen

Euer Mossi

eseL

Intermediate

Posts: 108

  • Send private message

2

Monday, January 26th 2009, 10:18am

Hi,

bin nun auch nicht der vollprofi in JS aber ich versuchs mal.

Also du gibts deinem banner, div, waht ever ne eindeutige id. id="banner1". Zusätzlich stattest du ihn mit dem attribut style="display:inline" aus.

Zusätzlich bekommt der Banner von dir noch ein "onklick" verpasst, das dann deine eigentliche JS fuktion aufruft.
Sieht dann z.b so aus:

HTML Code

 
1
2
3

<img src="bild.png" alt="banner1" id="banner1" style="display:inline" onClick="function(1);" />
<img src="bild2.png" alt="banner2" id="banner2" style="display:inline" onClick="function(2);" />
<img src="bild3.png" alt="banner3" id="banner3" style="display:inline" onClick="function(3);" />


So "dein" JS-code wird dann ausgeführt, sobald das Pic angeklickt wird, onClick halt ;).

der macht dann nix anderes als, je nachdem was du ihm im eventhandler (onClick) für eine nummer übergeben hast, das attribut style="display:inline" in style="display:none" zu ändern. Somit wird das bild nimmer angezeigt.

Sieht dann ca so aus (fehler musst du selber ausmerzen :P):

JavaScript Code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<script tyspe="text/javascript">
         <!--
         function function(nr)
         {
//du deklariert die variable element               
var element;
 
//du weist der variable element was zu, und zwar das jeweilige bild
 element=document.getElementById('banner'+nr);
 
//mit der kleinen abfrage werden die bilder ausgeblendet
if(element.style.display=='inline')
                         {
                          element.style.display=='none';
                        }
                         else
                         {
                         }
}
         //-->
         </script>

This post has been edited 1 times, last edit by "eseL" (Jan 26th 2009, 10:23am)

Mossi

Trainee

  • "Mossi" started this thread

Posts: 16

  • Send private message

3

Tuesday, February 3rd 2009, 1:19am

hallo esel,
danke erstmal für deine hilfe. rein von de logik her habe ich deinen ansatz verstanden, allerdings funktioniert der code leider nicht, ich werde mal alles poste, wie ich es jetzt stehen habe und vielleicht findet jemand den fehler den ich übersehe. der javascriptteil sieht so aus ->

JavaScript Code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script type="text/javascript">
<!--
function ausblenden(nr)
     	{           	
var element;
 element=document.getElementById('banner'+nr);
if(element.style.display=='inline')
                     	{
                      	element.style.display=='none';
                    	}
                     	else
                     	{
                     	}
}
     	//-->
     	</script>


und der teil in php der die ganzen divs ausgibt sieht so aus:

PHP Quellcode

 
1
2
3
4

echo "<div id=\"banner$banner[bannerid]\" style=\"display:inline\" onClick=\"ausblenden($banner[bannerid])\";>
			   	<a href=\"module/paidbanner/paidbanner.php?userid=$_SESSION[userid]&bannerid=$banner[bannerid]\" target=\"_blank\">
			   	<img src=\"$banner[banneradresse]\" width=\"468\" height=\"60\" border=\"0\" alt=\"Banner $banner[bannerid]\" /></a><br />
	           	</div>";


$banner[bannerid] ist immer eine nummer, jeweils die der bannerid...

ich danke für jede hilfe
euer mossi

Snowflake

Professional

Posts: 370

  • Send private message

4

Tuesday, February 3rd 2009, 2:18pm

Also der Javascript teil weißt ein paar kleine Fehler auf. ich würde die Abfrage in JS auch ein bisschen umstellen, da der display Type nicht immer inline sein muss. Da ist es einfacher das ganze so zu machen:

JavaScript Code

 
1
2
3
4
5
6
7
8
9
10

<script type="text/javascript">
function ausblenden(nr) {
 
element=document.getElementById('banner'+nr);
 
	if(element.style.display!='none'){
	element.style.display='none';
	}
}
</script>


Funktioniert auch, habe es getestet. Wenn es bei dir nicht funktioniert, solltest du mal diese geparste Zeile im Quelltext anschaun:

PHP Quellcode

 
1

echo "<div id=\"banner$banner[bannerid]\" style=\"display:inline\" onClick=\"ausblenden($banner[bannerid])\";>

Und gucken ob die ID des DIV Element korrekt ist und die onClick funktion auch.

Dann sollte auch alles gehen.

Mossi

Trainee

  • "Mossi" started this thread

Posts: 16

  • Send private message

5

Wednesday, February 4th 2009, 12:07am

hallo snowflake,
funktioniert alles wunderbar, ich bedanke mich vielmals...

grüße
mossi

Similar threads

Tagging

Social bookmarks