Εμφάνιση απόκρυψη DIV με Javascript

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Skywalker
Δημοσιεύσεις: 31
Εγγραφή: 20 Μάιος 2008 17:33

Εμφάνιση απόκρυψη DIV με Javascript

Δημοσίευση από Skywalker » 27 Απρ 2011 15:50

Έχω φτιάξει αυτό το απλό script με javascript για να εμφανίζω και να κρύβω κάποιο DIV.

Κώδικας: Επιλογή όλων

<script type="text/javascript">
function toggle&#40;&#41; &#123;
var myvar=document.getElementById&#40;'one'&#41;;
myvar.style.display=&#40;myvar.style.display=='none'&#41;?'block'&#58;'none';
&#125;
</script>
Αυτό λειτουργεί μια χαρά.
Θέλω όμως όταν κάνω κλικ εκτός του εμφανιζομένου div να κρύβεται πάλι. (onclick outside δηλαδή).

Έχω φτιάξει το παρακάτω script γι'αυτή τη λειτουργία αλλά δεν παίζει

Κώδικας: Επιλογή όλων

<script type="text/javascript">
 body.onclick=function&#40;&#41;&#123;
var myvar=document.getElementById&#40;'one'&#41;;
myvar.style.display='none';
 &#125;
</script>
ο κώδικας HTML:

Κώδικας: Επιλογή όλων

<div onclick="toggle&#40;&#41;;" style="margin-bottom&#58;20px; width&#58;82px; height&#58;46px; background&#58;#006699; border&#58;1px #333 solid; cursor&#58;pointer; position&#58;fixed;"></div>
<div id="one" style="width&#58;100px; position&#58;fixed; top&#58;100px; display&#58;none;"><img src="http&#58;//www.vicsjavascripts.org.uk/StdImages/One.gif"/></div>
Μπορεί κανείς να βοηθήσει; Θέλω όταν κάνω κλικ εκτός του DIV που έχει εμφανιστεί να κλείνει πάλι. Ευχαριστώ.

localhost-ltd
Δημοσιεύσεις: 105
Εγγραφή: 20 Δεκ 2010 01:19

Εμφάνιση απόκρυψη DIV με Javascript

Δημοσίευση από localhost-ltd » 27 Απρ 2011 16:00

Δεν μπορείς να έχεις στο body το onclick και να περιμένεις μετά να κάνει κάτι άλλο στο click του αντικειμένου γιατί πολύ απλά γίνεται inherit ότι κάνεις στο body επάνω σε όλα τα HTML objects.

Η λύση είναι να κάνεις στο onclick του αντικειμένου σου ότι θές και μετά στο onmouseout να το εμφανίζεις!
The "impossible" is a word that does not exist in my vocabulary!

Skywalker
Δημοσιεύσεις: 31
Εγγραφή: 20 Μάιος 2008 17:33

Εμφάνιση απόκρυψη DIV με Javascript

Δημοσίευση από Skywalker » 27 Απρ 2011 16:19

localhost-ltd έγραψε:Δεν μπορείς να έχεις στο body το onclick και να περιμένεις μετά να κάνει κάτι άλλο στο click του αντικειμένου γιατί πολύ απλά γίνεται inherit ότι κάνεις στο body επάνω σε όλα τα HTML objects.

Η λύση είναι να κάνεις στο onclick του αντικειμένου σου ότι θές και μετά στο onmouseout να το εμφανίζεις!
Θέλω όταν έχει εμφανιστεί το κρυφό DIV να κάνω κλικ εκτός αυτού του DIV και να κρυφτεί και πάλι. onClick outside δηλαδή. όχι onmouseout. Ακριβώς όπως η λίστα με τους online φίλους στο Facebook.


localhost-ltd
Δημοσιεύσεις: 105
Εγγραφή: 20 Δεκ 2010 01:19

Εμφάνιση απόκρυψη DIV με Javascript

Δημοσίευση από localhost-ltd » 27 Απρ 2011 16:26

Πολύ ωραία όμως δε μπορείς να το κάνεις αυτό στο onclick του body, σου είπα το λόγο... η μόνη λύση λιπόν είναι να βάλεις ένα div που να πιάνει όλο το χώρο του παραθύρου σου ώστε όταν κάνεις click να εκτελείς εκεί τα events! ;-)
The "impossible" is a word that does not exist in my vocabulary!

Skywalker
Δημοσιεύσεις: 31
Εγγραφή: 20 Μάιος 2008 17:33

Εμφάνιση απόκρυψη DIV με Javascript

Δημοσίευση από Skywalker » 27 Απρ 2011 16:34

localhost-ltd έγραψε:Πολύ ωραία όμως δε μπορείς να το κάνεις αυτό στο onclick του body, σου είπα το λόγο... η μόνη λύση λιπόν είναι να βάλεις ένα div που να πιάνει όλο το χώρο του παραθύρου σου ώστε όταν κάνεις click να εκτελείς εκεί τα events! ;-)
Το έκανα αυτό. Εβαλα ενα DIV που κάλυπτε όλη τη σελίδα με position:fixed; πλατος και υψος 100% και γινόταν αυτό που ήθελα αλλα δεν μπορουσα μετά να κάνω κλικ στα link του site. Υπάρχει τρόπος να κάνω κλικ στα links μέσα από το DIV? Δε μ'αφήνει να κάνω κλικ αν και ειναι διαφανές.

localhost-ltd
Δημοσιεύσεις: 105
Εγγραφή: 20 Δεκ 2010 01:19

Εμφάνιση απόκρυψη DIV με Javascript

Δημοσίευση από localhost-ltd » 27 Απρ 2011 16:35

Όχι! θα πρέπει να τα βάλεις όλα μέσα στο div!
The "impossible" is a word that does not exist in my vocabulary!

Skywalker
Δημοσιεύσεις: 31
Εγγραφή: 20 Μάιος 2008 17:33

Εμφάνιση απόκρυψη DIV με Javascript

Δημοσίευση από Skywalker » 27 Απρ 2011 17:54

δεν υπαρχει κανα κόλπο με javascript?

localhost-ltd
Δημοσιεύσεις: 105
Εγγραφή: 20 Δεκ 2010 01:19

Εμφάνιση απόκρυψη DIV με Javascript

Δημοσίευση από localhost-ltd » 27 Απρ 2011 17:57

Από όσο ξέρω όχι...τώρα εάν κανένας μάγκας έχει βρεί κανένα work around....
The "impossible" is a word that does not exist in my vocabulary!

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Εμφάνιση απόκρυψη DIV με Javascript

Δημοσίευση από korgr » 27 Απρ 2011 19:35

Γιατί με jquery δεν σου κάνει?

Κώδικας: Επιλογή όλων

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<script src="http&#58;//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$&#40;function&#40;&#41;&#123;
	$&#40;'#myButton'&#41;.click&#40;function&#40;e&#41; &#123; 
		e.stopImmediatePropagation&#40;&#41;; 
		$&#40;'#one'&#41;.toggle&#40;&#41;; 
	&#125;&#41;;
	$&#40;document&#41;.click&#40;function&#40;&#41;&#123;
		$&#40;'#one'&#41;.hide&#40;&#41;;
	&#125;&#41;;
&#125;&#41;;
</script>
</head>
<body>
<div id="myButton" style="margin-bottom&#58;20px; width&#58;82px; height&#58;46px; background&#58;#006699; border&#58;1px #333 solid; cursor&#58;pointer; position&#58;fixed;"></div>
<div id="one" style="width&#58;100px; position&#58;fixed; top&#58;100px; display&#58;none;"><img src="http&#58;//www.vicsjavascripts.org.uk/StdImages/One.gif"/></div>
</body>
</html>

Skywalker
Δημοσιεύσεις: 31
Εγγραφή: 20 Μάιος 2008 17:33

Εμφάνιση απόκρυψη DIV με Javascript

Δημοσίευση από Skywalker » 28 Απρ 2011 13:03

Εννοείται ότι μου κάνει. Άλλωστε χρησιμοποιώ το jQuery σε όλες τις σελίδες μου.

Έκανα μια μικρή αλλαγή ώστε όταν κάνεις κλικ πάνω στο εμφανιζόμενο DIV να μην εξαφανίζεται παρά μόνο αν κάνεις κλικ στην υπόλοιπη σελίδα.

Κώδικας: Επιλογή όλων

<script type="text/javascript">
$&#40;function&#40;&#41;&#123;
   $&#40;'#myButton'&#41;.click&#40;function&#40;e&#41; &#123;
      e.stopImmediatePropagation&#40;&#41;;
      $&#40;'#one'&#41;.toggle&#40;&#41;;
   &#125;&#41;;

   $&#40;'#one'&#41;.click&#40;function&#40;e&#41; &#123;
      e.stopImmediatePropagation&#40;&#41;;
      $&#40;'#one'&#41;.style.display='block';
   &#125;&#41;;

   $&#40;document&#41;.click&#40;function&#40;&#41;&#123;
      $&#40;'#one'&#41;.hide&#40;&#41;;
   &#125;&#41;;
&#125;&#41;;
</script> 
Τώρα παίζει τέλεια. Ευχαριστώ πολύ παιδιά.

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες