By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,298 Members | 1,434 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,298 IT Pros & Developers. It's quick & easy.

Show hide functionality for ie7 & ie8 not working using JQuery

P: 1
show hide functionality is not working in IE8 and IE7 Bt its working in all the browser

Here is the HTML code
Expand|Select|Wrap|Line Numbers
  1.  <div class="navigations">
  2. <div class="grid_4 consulting" style="margin-left:50px" ><h1> Consulting</h1></div>
  3. <div class="grid_4 push_1 engineering"  >  <h1> Engineering</h1></div>
  4. <div class="grid_4 push_2 solutions"><h1> Solutions</h1></div>
  5. </div>
  6.  
  7.              <div class=" grid_16 consulting_dis" style="display:none" >
  8.                <ul id="list1">
  9.                  <li> Web Development</li>
  10.                   <li> Web Designing</li>
  11.                  <li>CMS Customization</li>
  12.                  <li> Mobile App Development</li>
  13.                   <img src="img/seperater1.png" />
  14.                  </ul>
  15.  
  16.                  <div class="grid_11 content_discription1">
  17.                  <p>As a developer, you're an extremely creative individual. Getting your websites behave in Internet Explorer is 
  18.                  <br /> proof enough... you are creative. Even so, you may not have the time or know-how needed to get the design of 
  19.                  <br />your site looking as clean as your code. That's OK. I take design as seriously as you take your markup. Have </p>
  20.                  </div>            
  21.            <div class="grid_16 engineering_dis" style="display:none" >
  22.                 <ul id="list1">
  23.                  <li> Web xxxxxxxxxx</li>
  24.                   <li> Web xxxxxxxxxx</li>
  25.                  <li>CMS xxxxxxxxxxxx</li>
  26.                  <li> Mobile App xxxxxxxxxxx</li>
  27.                  <img src="img/seperater1.png" />
  28.                  </ul>
  29.                  <div class="grid_11 content_discription1">
  30.                  <p>xxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxx 
  31.                  <br /> proof enough... you are creative. Even so, you may not have the time or know-how needed to get the design of 
  32.                  <br />your site looking as clean as your code. That's OK. I take design as seriously as you take your markup. Have </p>
  33.                  </div>            
  34.             <div class="grid_16 solutions_dis" style="display:none">
  35.                  <ul id="list1">
  36.                  <li> Web yyyyyyyy</li>
  37.                   <li> Web yyyyyyyyy</li>
  38.                  <li>CMS yyyyyyyyyyy</li>
  39.                  <li> Mobile App yyyyyyyy</li>
  40.                  <img src="img/seperater1.png" />
  41.                  </ul>
  42.  
  43.                 <div class="grid_11 content_discription1">
  44.                  <p>yyyyyyyy yyyyyyyy yyyyyyyy yyyyyyyy yyyyyyyy yyyyyyyy yyyyyyyy yyyyyyyy yyyyyyyy yyyyyyyy yyyyyyyy 
  45.                  <br /> proof enough... you are creative. Even so, you may not have the time or know-how needed to get the design of 
  46.                  <br />your site looking as clean as your code. That's OK. I take design as seriously as you take your markup. Have </p>
  47.                  </div>               
  48.             </div>
And here is the jquery code

Expand|Select|Wrap|Line Numbers
  1. $(document).ready(function(){
  2.     $(".consulting").click(function () {$(".consulting_dis").show('fast');
  3.        $(".engineering_dis,.solutions_dis,.services_dis").hide('fast');});
  4.     $(".engineering").click(function () {$(".engineering_dis").show('fast');
  5.          $(".consulting_dis,.solutions_dis,.services_dis").hide('fast');});
  6.     $(".solutions").click(function () {$(".solutions_dis").show('fast');
  7.          $(".consulting_dis,.engineering_dis,.services_dis").hide('fast');});
  8.     $(".services").click(function () {$(".services_dis").show('fast');
  9.          $(".consulting_dis,.solutions_dis,.engineering_dis").hide('fast');});
  10. });

I used plug in called jquery.js and also tried for jquery-1.3.2.min.js its working in all the browser except those two ..

Could u plz help me out to over come this poblem.. if possible plz send me the code.
Oct 4 '11 #1
Share this Question
Share on Google+
1 Reply


P: 4
Here is the code:

Expand|Select|Wrap|Line Numbers
  1. <div class="navigations">
  2.             <div class="grid_4 consulting" style="margin-left: 50px">
  3.                 <h1>
  4.                     Consulting</h1>
  5.             </div>
  6.             <div class="grid_4 push_1 engineering">
  7.                 <h1>
  8.                     Engineering</h1>
  9.             </div>
  10.             <div class="grid_4 push_2 solutions">
  11.                 <h1>
  12.                     Solutions</h1>
  13.             </div>
  14.         </div>
  15.         <div class=" grid_16 consulting_dis" style="display: none">
  16.             <ul id="list1">
  17.                 <li>Web Development</li>
  18.                 <li>Web Designing</li>
  19.                 <li>CMS Customization</li>
  20.                 <li>Mobile App Development</li>
  21.                 <img src="img/seperater1.png" />
  22.             </ul>
  23.             <div class="grid_11 content_discription1">
  24.                 <p>
  25.                     As a developer, you're an extremely creative individual. Getting your websites behave
  26.                     in Internet Explorer is
  27.                     <br />
  28.                     proof enough... you are creative. Even so, you may not have the time or know-how
  29.                     needed to get the design of
  30.                     <br />
  31.                     your site looking as clean as your code. That's OK. I take design as seriously as
  32.                     you take your markup. Have
  33.                 </p>
  34.             </div>
  35.         </div>
  36.         <div class="grid_16 engineering_dis" style="display: none">
  37.             <ul id="Ul1">
  38.                 <li>Web xxxxxxxxxx</li>
  39.                 <li>Web xxxxxxxxxx</li>
  40.                 <li>CMS xxxxxxxxxxxx</li>
  41.                 <li>Mobile App xxxxxxxxxxx</li>
  42.                 <img src="img/seperater1.png" />
  43.             </ul>
  44.             <div class="grid_11 content_discription1">
  45.                 <p>
  46.                     xxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxx
  47.                     <br />
  48.                     proof enough... you are creative. Even so, you may not have the time or know-how
  49.                     needed to get the design of
  50.                     <br />
  51.                     your site looking as clean as your code. That's OK. I take design as seriously as
  52.                     you take your markup. Have
  53.                 </p>
  54.             </div>
  55.         </div>
  56.         <div class="grid_16 solutions_dis" style="display: none">
  57.             <ul id="list1">
  58.                 <li>Web yyyyyyyy</li>
  59.                 <li>Web yyyyyyyyy</li>
  60.                 <li>CMS yyyyyyyyyyy</li>
  61.                 <li>Mobile App yyyyyyyy</li>
  62.                 <img src="img/seperater1.png" />
  63.             </ul>
  64.             <div class="grid_11 content_discription1">
  65.                 <p>
  66.                     yyyyyyyy yyyyyyyy yyyyyyyy yyyyyyyy yyyyyyyy yyyyyyyy yyyyyyyy yyyyyyyy yyyyyyyy
  67.                     yyyyyyyy yyyyyyyy
  68.                     <br />
  69.                     proof enough... you are creative. Even so, you may not have the time or know-how
  70.                     needed to get the design of
  71.                     <br />
  72.                     your site looking as clean as your code. That's OK. I take design as seriously as
  73.                     you take your markup. Have
  74.                 </p>
  75.             </div>
  76.         </div>
  77.  
As a tip, when I am creating some new awesome html/jQuery code, I always start in a test web page without a master page so I can step through my jQuery code if needed. Also, make use of any available 'Format Selection' options in you html designer and if your designer doesn't have an option like this, get a new designer fast as I believe your issue was simply malformed html. I corrected it assuming what I thought you were doing, but if what I did was incorrect, please reply back to me. Your jQuery shouldn't need to change. Also, given the issue I found, I dont think it was a jQuery version issue but I was using jQuery 1.4.1.

Good luck!
Oct 4 '11 #2

Post your reply

Sign in to post your reply or Sign up for a free account.