Response title
This is preview!
Move this topic
Toggle command for Firefox and Explorer troubleshooting
in Using jQuery
•
6 years ago
I created a web site for an organization and used a toggle command in jQuery. The link to the page is http://www.jp2mri.org/institute.htm. The toggle switch works well with Safari and Google Chrome, but does not work with Firefox or Explorer. Is there a universal solution to toggle for all browsers?
1
Replies(5)
What do you mean by "toggle command"?
This?
Or this? (which no longer exists in recent versions of jQuery)
Or some "toggle switch" widget from jQuery UI, jQuery Mobile, or some third-party widget? I don't see one of those on your page.
Leave a comment on watusiware's reply
This one.
Yes, but this command does not work in Firefox or Explorer. Anyway how to correct?
Leave a comment on stephenmoy's reply
^ Want to share with us where you use it on the page, so that we can try it out?
Leave a comment on watusiware's reply
The "arrows" for the following page do not toggle in Explorer or Fire Fox.
Here is the page:
Here is the source code for this jQuery that controls the arrow:
$("button").click(function() {
$("#model_description2").toggle("slow");
});
$("p button#arrow_return img").click(function() {
$("#link_description p#ncer").toggle("slow");
});
$("p button#arrow_return2 img").click(function() {
$("#institute_description p#section1").toggle("slow");
$("#institute_description ul#section1").toggle("slow");
});
$("p button#arrow_return3 img").click(function() {
$("#institute_description p#section2").toggle("slow");
$("#institute_description ul#section2").toggle("slow");
});
$("p button#arrow_return4 img").click(function() {
$("#institute_description p#section3").toggle("slow");
});
$("p button#arrow_return5 img").click(function() {
$("#institute_description p#section4").toggle("slow");
$("#institute_description ul#section4").toggle("slow");
});
$("p button#arrow_return6 img").click(function() {
$("#institute_description p#section5").toggle("slow");
});
$("p button#arrow_return7 img").click(function() {
$("#campaign_description p#campaign_additional").toggle("slow");
});
Leave a comment on stephenmoy's reply
I'd start by fixing the errors displayed in the console.
But your main problem is likely your duplicate IDs, e.g.:
<p id="section2">In contrast:</p><ul id="section2">
That's invalid HTML. Different browsers will treat duplicate IDs differently. When browsers are given invalid HTML, they make the best of a bad situation. I'm surprised it works at all.
Selectors like this are not very useful:
#institute_description p#section2
It probably does't do what you think. This will typically first find the first element with ID of section2 in the document. Then, if that element is a child of a <p> element which is a child of the first element with ID institute_description, it will return the element. If not, it will return an empty list.
You are using IDs as if they were CSS classes. That doesn't work.
Since IDs must be unique within a document, you can just re-write the above selector as:
#section2
No, it will not return exactly the same result of the rule shown earlier. But I don't see any usefulness for the first incantation. Unless you want a selector that will work in strange ways in some browsers and not at all in others.
You can "fix" this by changing #section2 to e.g. [id=section2]. But that is a horrible "fix". If you do this anywhere where performance matters (say, in a loop over a lot of elements) you should realize this is one of the slowest selectors possible, while the ID selector is THE fastest. It's a useful hack in case you've already written a lot of HTML the wrong way.
But, still, it IS invalid HTML, and results are not guaranteed.
Finally: you'd get much better performance with smoother operation from a CSS3 transition rather than .toggle(). The effect is pretty annoying in my Safari desktop browser.
There are third-party plugins that will retrofit jQuery animations with something faster and more modern. (You still use the same API.) I haven't tried them. I don't use jQuery animations. CSS3 for me. (Some things CSS3 cannot do. If you have to do them, use something better than jQuery animations.)
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to stephenmoy's question