0

I want to find out why on page load some elements do hide on page load IE, and sometimes they don't (tested in IE9). I am trying to recreate a jqueryui accordion behaviour because it did the same thing/had the same issue.

When reloading or clicking a redirect/reload ling using header() in php or even using a standard link, on some occasions the hide() does not work, other times the same link works and elements hide.

IE shows to work in IE9 standards, as I found that quirks is not officially supported in jQ/jQui, to be sure I even have X-UA-Compatible" content="IE=edge" in document head and even send the corresponding header using php.

In W3C validator document passes without errors the validation /xhtml1 transitional/

Related html markup is /simplified/

<h3><a id="tog1" href="/....">...</a></h3>
<div class="smg" id="tog1e"> .... </div>

<h3><a id="tog2" href="/....">...</a></h3>
<div class="smg" id="tog2e"> .... </div>

<h3><a id="tog3" href="/....">...</a></h3>
<div class="smg" id="tog3e"> .... </div>

in external js file I have this

jQuery(function() { 
// selectors are "a" (links)
$("#tog1").click( function(e){ 
 $("div.smg").hide(); $("#tog1e").show();e.preventDefault();});
$("#tog2").click( function(e){ 
 $("div.smg").hide(); $("#tog2e").show();e.preventDefault();});
$("#tog3").click( function(e){ 
 $("div.smg").hide(); $("#tog3e").show();e.preventDefault();});

if(document.location.href.indexOf('...link of tog1...') > -1 ) 
{  $("div.smg").hide(); $("#tog1e").show();}
else if ( document.location.href.indexOf('...link of tog2...') > -1 ) 
{ $("div.smg").hide(); $("#tog2e").show();}
else { $("div.smg").hide(); $("#tog3e").show();}

//.... other unrelated code follows after

I still could not figure out why sometimes does work in IE and sometimes not. Other browsers (current Chrome and Firefox) do always work okay.

Added

I just mentioned it may (or may not) be related to the fact there is other framework too (mootools) used on the page. However as said Firefox and Chrome don't complain and always work, while IE sometimes does not, but only sometimes.

In IE I found sometimes the console tells me that some object does not have some property or function (this may be the point related to using both frameworks) and I already started using jQ's noconflict together with replacing the '$' for the 'jQuery' in the scripts, but it does not look to help so far.

How can I solve this? I do need both MooTools and jQuery.

halfer
  • 19,824
  • 17
  • 99
  • 186
Peminator
  • 783
  • 1
  • 9
  • 24
  • `$("#div.smg").hide();` is a bad selector, at least not what you want I think. – Wilq Oct 28 '12 at 19:50
  • sory that was typo while simplyfing, originally i have a bit more complicated selector ('#wrapperid div.smg'), sorry for that I corrected it in the question, still most importance goes to "why sometimes yes and sometimes not" ? – Peminator Oct 28 '12 at 19:56
  • any errors in console when hide doesn't work? – charlietfl Oct 28 '12 at 20:05
  • 1
    Ran into similar inconsistencies in IE myself, ended up using `.css('display','block')` and `.css('display','none')` myself to solve it. These are the equivalents per http://api.jquery.com/show – Peter Oram Oct 28 '12 at 22:21
  • http://stackoverflow.com/questions/9481563/this-hide-not-working-on-option-elements-in-ie8 may be helpful to you – pkachhia Oct 29 '12 at 07:17
  • thanx for suggestion pkachhia, i see recommendation to use dettach() instead of hide in that article, I wonder does it really help? – Peminator Oct 29 '12 at 11:06
  • about console errors in IE, sometimes I get weird warning HTML1524: invalid doctype... at line 1, character 1 (which is not true) and just moment before, I realized using developers tools in IE9, that IE sometimes prepends another doctype line (4.01 transitional) in front of my xhtml1 doctype... or some of the frameworks does? checked back to FF+Chrome to realize this is too IE only, sometimes only, .... – Peminator Oct 29 '12 at 11:11

0 Answers0