Πρόβλημα με accordion menu στον IE

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

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

Απάντηση
Apostolis_38
Δημοσιεύσεις: 1969
Εγγραφή: 14 Φεβ 2008 16:20
Τοποθεσία: ΠΕΙΡΑΙΑΣ

Πρόβλημα με accordion menu στον IE

Δημοσίευση από Apostolis_38 » 18 Οκτ 2013 12:13

Καλησπέρα σε όλους.

Εχω κώδικα ο οποίος είναι ένα accordion menu με την ιδιαιτερότητα οτι όταν πατάς ένα link και πηγαίνεις στην σελίδα που σε ενδιαφέρει, τότε το menu μένει ανοιχτό και κάνει highlight το visited link.
Δουλεύει μια χαρά ΕΚΤΟΣ από τον IE (που αλλού :evil: ) στον οποίο σε πάει μεν στην σελίδα, το link είναι highlighted, αλλά το μενού είναι κλειστό όταν ανοίγει η σελίδα.

Δεν μπορώ να βρώ άκρη τι φταίει, ούτε καμμιά πληροφορία.

Εχει κανείς καμμιά ιδέα;

Παραθέτω τον κώδικα

JS

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

$(document).ready( function() {

// initialize accordion
		$('#Accordion ul').each( function() {
			var currentURI = window.location.href;
			var links = $('a', this);
			var collapse = true;
			for &#40;var i = 0; i < links.size&#40;&#41;; i++&#41; &#123;
				var elem = links.eq&#40;i&#41;;
				var href = elem.attr&#40;'href'&#41;;
				var hrefLength = href.length;
				var compareTo = currentURI.substr&#40;-1*hrefLength&#41;;

				if &#40;href == compareTo&#41; &#123;
					collapse = false;
					break;
				&#125;
			&#125;;
			if &#40;collapse&#41; &#123;
				$&#40;this&#41;.hide&#40;&#41;;
			&#125;
		&#125;&#41;;

		$&#40;"#Accordion"&#41;.delegate&#40;'span', 'click', function&#40;&#41; &#123;
			var ul = $&#40;this&#41;.next&#40;'ul'&#41;;
			if &#40;ul.is&#40;'&#58;visible'&#41;&#41; &#123;
				ul.slideUp&#40;500&#41;;
			&#125; else &#123;
				$&#40;'#Accordion ul'&#41;.not&#40;ul&#41;.slideUp&#40;500&#41;;
				ul.slideDown&#40;500&#41;;
			&#125;
		&#125;&#41;;
	&#125;&#41;;
HTML

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

<ul id="Accordion">

	<li>
		<span><a href="Link1" class="menu_links">PROFILE</a></span>

		<ul>
			<li><a href="Link1_1">View profile</a></li>

			<li><a href="Link1_2">Edit profile</a></li>

		</ul>
	</li>

	<li>
		<span><a href="Link2">CONTACTS</a></span>
	</li>

	<li>
		<span><a href="Link2">FAVORITE CONTACTS</a></span>
	</li>
</ul>

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6237
Εγγραφή: 30 Νοέμ 2004 03:09

Πρόβλημα με accordion menu στον IE

Δημοσίευση από fafos » 18 Οκτ 2013 16:37

Otan kaneis alert to href sou dinei tis sostes times?

me mia mikrh dokimh se kanenan browser den mou doulepse.. ekana split sthn kato paula tou href gia na mou doulepsei:

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

var href = elem.attr&#40;'href'&#41;;
href= href.split&#40;"_"&#41;;
href= href&#91;0&#93;;
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Apostolis_38
Δημοσιεύσεις: 1969
Εγγραφή: 14 Φεβ 2008 16:20
Τοποθεσία: ΠΕΙΡΑΙΑΣ

Πρόβλημα με accordion menu στον IE

Δημοσίευση από Apostolis_38 » 18 Οκτ 2013 17:06

Τα λινκ δεν είναι της μορφής Link1_1 αλλά κανονικά link, σε στύλ home.php, contact.php κ.λ.π. και δουλεύει κανονικότατα σε όλους τους άλλους browsers.

Βέβαια στον κώδικα που έδωσα έχω κάνει ένα λάθος.
Το a href="Link1" κανονικά είναι a href="#".
Το πρώτο πρώτο menu item δηλαδή.

Αλλά δεν νομίζω να φταίει αυτό.

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Πρόβλημα με accordion menu στον IE

Δημοσίευση από alou » 18 Οκτ 2013 17:38

Αποστόλη, σε γενικές γραμμές, είναι καλύτερα να προσθέτεις ένα π.χ. class="active" ή κάτι τέτοιο με php που θα κάνει τέτοιες δουλειές πολύ πιο εύκολες και το styling χωρίς να χρειάζεται js και μπλεξίματα.

Τα delegate / live / click events καλύτερα να ορίζονται έτσι
$(element).on('click', function(){...
καλύπτοντας όλες τις περιπτώσεις (και event binding των element που δημιουργήθηκαν μετά το dom ready).

Στο θέμα σου, δοκίμασε να κάνεις alert το colapse σε 1-2 σημεία να δεις τι σου δίνει και ίσως δοκιμάσεις
if (colapse == true)
και δες alert / console log των compareto και href αν στα είναι ίδια (?)

Apostolis_38
Δημοσιεύσεις: 1969
Εγγραφή: 14 Φεβ 2008 16:20
Τοποθεσία: ΠΕΙΡΑΙΑΣ

Πρόβλημα με accordion menu στον IE

Δημοσίευση από Apostolis_38 » 18 Οκτ 2013 18:12

Τι εννοείς με το class = 'active' σε php;
Δεν σε έπιασα.

Θα δοκιμάσω με το alert αλλά με τη javascript δεν το πολυέχω.
Τον κώδικα τον βρήκα και τον προσάρμοσα, δεν τον έγραψα εγώ :)

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6237
Εγγραφή: 30 Νοέμ 2004 03:09

Πρόβλημα με accordion menu στον IE

Δημοσίευση από fafos » 18 Οκτ 2013 19:36

prospathise allazontas to:

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

var compareTo = currentURI.substr&#40;-1*hrefLength&#41;;
me auto:

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

var compareTo = currentURI.substr&#40;currentURI.lastIndexOf&#40;"/"&#41; + 1&#41;;
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Πρόβλημα με accordion menu στον IE

Δημοσίευση από alou » 18 Οκτ 2013 19:38

Για το active class εννοώ κάτι του τύπου:

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

<li
<?php
&#40;$current_url == $link&#41; ? ' class="active"' &#58; ''&#41;&#41;;
?>
>
όπου current url είναι πχ $_SERVER['REQUEST_URI'] και link ... το link :D

Αυτό το κομμάτι:

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

};
         if (collapse) {
            $(this).hide();
         } 

kanto etsi na deis tis times:

};
         alert("collapse = " + collapse + " href = " + href + " compareTo= " + compareTo);
             if (collapse) {
            $(this).hide();
         }

Apostolis_38
Δημοσιεύσεις: 1969
Εγγραφή: 14 Φεβ 2008 16:20
Τοποθεσία: ΠΕΙΡΑΙΑΣ

Πρόβλημα με accordion menu στον IE

Δημοσίευση από Apostolis_38 » 18 Οκτ 2013 21:21

Παίδες ευχαριστώ, θα τα κοιτάξω τη Δευτέρα και θα ενημερώσω.

@alou
Αν εννοείς το style των links, κάπως έτσι το έχω.
Απλώς δεν χρησιμοποιώ $_SERVER+κάτι αλλά "καρφωτό" path με defined.
Φυσικά δεν το γράφω εδώ μια και δεν παίζει κανέναν ρόλο στο πρόβλημα και θα είναι πιο δυσνόητο το link.
Εκτός κι αν δεν κατάλαβα καλά πάλι κι εννοείς κάτι άλλο.

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Πρόβλημα με accordion menu στον IE

Δημοσίευση από alou » 19 Οκτ 2013 08:06

Όχι Αποστόλη εννοώ να βάζεις ένα class="current" στο μενού που είναι ενεργό, όταν είσαι αρχική
<li class="current><a href="/">....

Εκτός αν εννοείς εσύ (lol) ότι στο current menu υπάρχει κάποιο class / id που να το ξεχωρίζει, οπότε το παραπάνω script μπορεί να λειτουργήσει πολύ πιο εύκολα.

Apostolis_38
Δημοσιεύσεις: 1969
Εγγραφή: 14 Φεβ 2008 16:20
Τοποθεσία: ΠΕΙΡΑΙΑΣ

Πρόβλημα με accordion menu στον IE

Δημοσίευση από Apostolis_38 » 20 Οκτ 2013 12:42

Ναι, υπάρχει αυτό, όταν η σελίδα είναι η current αλλάζει το χρώμα των fonts.

Μάλλον όμως δεν έχω εξηγήσει καλά το πρόβλημα.
Οταν πατάς σε ένα link η εφαρμογή πηγαίνει στη σελίδα που έχεις ζητήσει, το drop down menu είναι colapsed και το link που είναι current εμφανίζεται με την διαφορετικού χρώματος γραμματοσειρά.
Σε όλους τους browsers, εκτός του IE (ο 9 νομίζω αλλά δεν θυμάμαι τώρα ποιός ακριβώς είναι).
Οπου το a href δουλεύει κανονικά, το χρώμμα των fonts στο link έχει αλλάξει αλλά το drop down menu ΔΕΝ είναι colapsed.

Αύριο θα δοκιμάσω τις λύσεις που μου προτείνατε και θα δούμε.

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Πρόβλημα με accordion menu στον IE

Δημοσίευση από alou » 20 Οκτ 2013 17:15

Το js script σου τσεκάρει με js το current url και το link του κάθε μενού, για να δει αν είσαι στη σελίδα αυτού του link. Αν υπάρχει current class, αυτό είναι άχρηστο και μπορεί να γίνει πολύ πιο εύκολα η δουλειά σου. Δώσε μια πραγματική html του μενού να το δούμε.

Apostolis_38
Δημοσιεύσεις: 1969
Εγγραφή: 14 Φεβ 2008 16:20
Τοποθεσία: ΠΕΙΡΑΙΑΣ

Πρόβλημα με accordion menu στον IE

Δημοσίευση από Apostolis_38 » 20 Οκτ 2013 18:45

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

<ul id="Accordion">
	<li>
	<span>
	<a href="#" class="menu_links">
	<img src="<?php echo IMAGES_PATH;?>arrow_blue.jpg" class="arrrow_blue" />Support Messages</a>
	</span>

	<ul>
		<li>
		<a href="loged_in.php?lang=<?php echo $lang;?>&amp;mode=helpDesk" <?php if&#40;$mode == 'helpDesk' &#41;echo 'style="color&#58;#FF0;"';?> class="accordion_menu_links">
		<img src="<?php echo IMAGES_PATH;?>arrow_red_small.png" class="red_arrrow_smal" /><?php echo HELPDESK;?></a>
		</li>

		<li>
		<a href="loged_in.php?lang=<?php echo $lang;?>&amp;mode=support"  <?php if&#40;$mode == 'support' &#41;echo 'style="color&#58;#FF0;"';?> class="accordion_menu_links">
		<img src="<?php echo IMAGES_PATH;?>arrow_red_small.png" class="red_arrrow_smal" />?php echo SUPPORT;?></a>
		</li>
	</ul>

	</li>

</ul>

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Πρόβλημα με accordion menu στον IE

Δημοσίευση από alou » 20 Οκτ 2013 20:48

Θα υποθέσω ότι το mode τσεκάρει αν είναι το συγκεκριμένο μενού active, οπότε θα πρότεινα το εξής:

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

<ul id="Accordion">
   <li>
   <span>
   <a href="#" class="menu_links">
   <img src="<?php echo IMAGES_PATH;?>arrow_blue.jpg" class="arrrow_blue" />Support Messages</a>
   </span>

   <ul>
      <li>
      <a href="loged_in.php?lang=<?php echo $lang;?>&amp;mode=helpDesk"  class="accordion_menu_links<?php if&#40;$mode == 'helpDesk' &#41;echo ' currentitem';?>">
      <img src="<?php echo IMAGES_PATH;?>arrow_red_small.png" class="red_arrrow_smal" /><?php echo HELPDESK;?></a>
      </li>
εκτός του ότι είναι πιο σωστό να αποφύγεις inline styling, έχεις και ένα class που σε βοηθάει στην javascript να βρεις το active menu εύκολα και όχι να ψάχνεις τα πάντα μέσω js.

οπότε στο css ορίζεις το χρώμα που θες

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

.currentitem &#123;color&#58;#FF0&#125;
Tο παραπάνω θα δημιουργούσε μια html κάπως έτσι, όταν ήσουν στο πρώτο μενου item:

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

<ul id="Accordion">
   <li>
   <span>
   <a href="#" class="menu_links">
   <img src="some/path/arrow_blue.jpg" class="arrrow_blue" />Support Messages</a>
   </span>

   <ul>
      <li>
      <a href="loged_in.php?lang=el&amp;mode=helpDesk" class="accordion_menu_links currentitem">
      <img src="some/path/arrow_red_small.png" class="red_arrrow_smal" />HELPDESK</a>
      </li>

      <li>
      <a href="loged_in.php?lang=el&amp;mode=support"  class="accordion_menu_links">
      <img src="some.path/arrow_red_small.png" class="red_arrrow_smal" />SUPPORT</a>
      </li>
   </ul>

   </li>

</ul>

Στην js, κρατάς το click binding ως έχει και το μόνο που έχεις επιπλέον να κάνεις, είναι να βρεις το ul στο οποίο ανήκει το currentitem

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

$&#40;document&#41;.ready&#40; function&#40;&#41; &#123;

// initialize accordion
      $&#40;'#Accordion ul li a.currentitem'&#41;.parent&#40;&#41;.parent&#40;&#41;.slideDown&#40;500&#41;;

      $&#40;"#Accordion"&#41;.delegate&#40;'span', 'click', function&#40;&#41; &#123;
         var ul = $&#40;this&#41;.next&#40;'ul'&#41;;
         if &#40;ul.is&#40;'&#58;visible'&#41;&#41; &#123;
            ul.slideUp&#40;500&#41;;
         &#125; else &#123;
            $&#40;'#Accordion ul'&#41;.not&#40;ul&#41;.slideUp&#40;500&#41;;
            ul.slideDown&#40;500&#41;;
         &#125;
      &#125;&#41;;
   &#125;&#41;;

Apostolis_38
Δημοσιεύσεις: 1969
Εγγραφή: 14 Φεβ 2008 16:20
Τοποθεσία: ΠΕΙΡΑΙΑΣ

Πρόβλημα με accordion menu στον IE

Δημοσίευση από Apostolis_38 » 20 Οκτ 2013 22:11

- Το js θα το τσεκάρω αύριο, τώρα δεν έχω τη δυνατότητα.
Απο κει και πέρα.

- Το mode δεν τσεκάρει ακριβώς το current page αλλά εκτελεί διάφορες εργασίες.
Σαν παρεπόμενο όμως είναι να τσεκάρει και την μοναδικότητα της "σελίδας" (στην ουσία πρόκειται για την ίδια σελίδα, φορτώνει όμως διαφορετικά πράγματα κάθε φορά).

- Το ξέρω για to inline styling και τα downsides που έχει.
Ομως, το menu αποτελεί ένα αρχείο το οποίο γίνεται included σε όλα τα αρχεία του site.
Ετσι θα έπρεπε να γίνει ως εξής:

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

<li>
      <a href="loged_in.php?lang=el&amp;mode=helpDesk" class="accordion_menu_links currentitem">
      <img src="some/path/arrow_red_small.png" class="red_arrrow_smal" />HELPDESK</a>
      </li>

      <li>
      <a href="loged_in.php?lang=el&amp;mode=support" &#91;b&#93; class="accordion_menu_links currentitem"&#91;/b&#93;>
      <img src="some.path/arrow_red_small.png" class="red_arrrow_smal" />SUPPORT</a>
      </li> 
Δηλαδή να μπεί το class="accordion_menu_links currentitem" σε κάθε ένα link και να ψάχνεις να βρείς πάλι, με κάποιον τοπο, σε ποιά σελίδα είσαι.
Πράγμα το οποίο λύνεται κατ' ευθείαν, με μια μικρή παραχώρηση στην τυπικότητα του πράγματος.
Ασε που ποτέ δεν ήμουν θιασώτης της "πανω απ' όλα τα στάνταρντς" άποψης. :D

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Πρόβλημα με accordion menu στον IE

Δημοσίευση από alou » 21 Οκτ 2013 07:34

Apostolis_38 έγραψε:- Το js θα το τσεκάρω αύριο, τώρα δεν έχω τη δυνατότητα.
Απο κει και πέρα.

- Το mode δεν τσεκάρει ακριβώς το current page αλλά εκτελεί διάφορες εργασίες.
Σαν παρεπόμενο όμως είναι να τσεκάρει και την μοναδικότητα της "σελίδας" (στην ουσία πρόκειται για την ίδια σελίδα, φορτώνει όμως διαφορετικά πράγματα κάθε φορά).

- Το ξέρω για to inline styling και τα downsides που έχει.
Ομως, το menu αποτελεί ένα αρχείο το οποίο γίνεται included σε όλα τα αρχεία του site.
Ετσι θα έπρεπε να γίνει ως εξής:

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

<li>
      <a href="loged_in.php?lang=el&amp;mode=helpDesk" class="accordion_menu_links currentitem">
      <img src="some/path/arrow_red_small.png" class="red_arrrow_smal" />HELPDESK</a>
      </li>

      <li>
      <a href="loged_in.php?lang=el&amp;mode=support" &#91;b&#93; class="accordion_menu_links currentitem"&#91;/b&#93;>
      <img src="some.path/arrow_red_small.png" class="red_arrrow_smal" />SUPPORT</a>
      </li> 
Δηλαδή να μπεί το class="accordion_menu_links currentitem" σε κάθε ένα link και να ψάχνεις να βρείς πάλι, με κάποιον τοπο, σε ποιά σελίδα είσαι.
Πράγμα το οποίο λύνεται κατ' ευθείαν, με μια μικρή παραχώρηση στην τυπικότητα του πράγματος.
Ασε που ποτέ δεν ήμουν θιασώτης της "πανω απ' όλα τα στάνταρντς" άποψης. :D
Με μπέρδεψες. Είχες πει:
Ναι, υπάρχει αυτό, όταν η σελίδα είναι η current αλλάζει το χρώμα των fonts.
και υπέθεσα ότι ήταν αυτό. Μας ενδιαφέρει να βάλουμε ένα class μόνο στο μενού στο οποίο είμαστε, γίνεται αυτό με κάποια από τις υπάρχουσες μεταβλητές / μεθόδους που χρησιμοποιείς ήδη?
Αν όχι, το συγκρίνεις με $_SERVER['REQUEST_URI']

Το js κομμάτι δεν έχει νόημα χωρίς αυτό.

Απάντηση

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

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

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