Jump to content


Photo

Bootstrap dropdown not working in IE8

bootstrap drop down ie8

  • Please log in to reply
9 replies to this topic

#1 predatorx

predatorx

    Forum Newcomer

  • Members
  • Pip
  • 92 posts

Posted 13 April 2013 - 11:30 AM

Hello.

 

I am using the Bootstrap framework to design my site. I have the drop down working in the navigation, but from some unknown reason in IE8 the dropdown does not work. When you click on the About Us link, the drop down does not fully appear. This only happens in IE8.

 

It works fine in other browsers.

 

You can view it here:

 

https://dl.dropboxus...sive/index.html

 

Can anyone help with this problem?

 

Thanks



#2 ELITE

ELITE

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,044 posts
  • Gender:Male
  • Location:stoke on trent
  • Experience:Intermediate
  • Area of Expertise:Coder

Posted 13 April 2013 - 12:45 PM

Hi, may be you need to add ;

$('.dropdown-toggle').dropdown()
$('.dropdown-toggle').dropdown();


#3 predatorx

predatorx

    Forum Newcomer

  • Members
  • Pip
  • 92 posts

Posted 13 April 2013 - 01:06 PM

Thanks for your reply. That line of code is already added to the bottom of my html file.

<script src="javascripts/bootstrap.js"></script>
        <script type="text/javascript">
        $('.dropdown-toggle').dropdown();
        </script>

I have placed it just above the closing body tag. It was in IE7, but not IE8 which seems strange.



#4 webcanvasdesign

webcanvasdesign

    Dedicated Member

  • Members
  • PipPip
  • 190 posts
  • Gender:Male
  • Location:Essex, UK
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 14 April 2013 - 01:09 AM

hey mate,

 

your menu is working, but only 'onClick'. Here is a script that i use on my bootstrap websites so that is shows on hover

 

jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});

 

change .delay(200) to change the delay before it opens.

You may need to change jQuery to $



#5 predatorx

predatorx

    Forum Newcomer

  • Members
  • Pip
  • 92 posts

Posted 14 April 2013 - 08:27 AM

Thanks for your reply.

 

The code that you have supplied now makes the drop down work on hover which is great, but the problem with IE8 still exists.

 

I have attached an image to show the problem:

 

nav-bar.png

As you can see in IE8 the dropdown is hidden, but in the other browers it works fine.

 

The page can be viewed here: https://dl.dropboxus...contact-us.html

 

Thanks



#6 Lyndsey

Lyndsey

    Privileged

  • Moderators
  • PipPipPipPip
  • 811 posts
  • Gender:Female
  • Location:South Wales
  • Experience:Intermediate
  • Area of Expertise:Web Developer

Posted 15 April 2013 - 09:39 AM

You've got a few errors coming through on Chrome (menu also doesn't work):

 

Invalid 'X-Frame-Options' header encountered when loading 'https://maps.google.co.uk/maps?hl=en&q=gmac+birmingham&safe=off&ie=UTF8&hq=…28&ll=52.53147,-1.910419&spn=0.026107,0.16119&z=13&iwloc=near&output=embed': 'ALLOWALL' is not a recognized directive. The header will be ignored. about:blank:1
2
Unsafe JavaScript attempt to access frame with URL https://dl.dropboxusercontent.com/u/52725754/fightback-responsive-site/contact-us.html# from frame with URL https://maps.google.co.uk/maps?hl=en&q=gmac+birmingham&safe=off&ie=UTF8&hq=…28&ll=52.53147,-1.910419&spn=0.026107,0.16119&z=13&iwloc=near&output=embed. Domains, protocols and ports must match.
 %7Bmain,mod_util,mod_act,mod_act_s,mod_actbr,mod_appiw,mod_mg,mod_mssvt,mod_pphover,mod_rst,mod_strr%7D.js:2145
Uncaught TypeError: undefined is not a function bootstrap.js:29
Uncaught ReferenceError: $ is not defined contact-us.html:126

 

You may need to change 'jQuery' to '$' as webcanvasdesign said above. 

 

$('.dropdown-toggle').dropdown();
$(".collapse").collapse()
        
$('ul.nav li.dropdown').hover(function() {
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
   $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});
        


#7 predatorx

predatorx

    Forum Newcomer

  • Members
  • Pip
  • 92 posts

Posted 15 April 2013 - 10:21 PM

Thanks for your reply. I'm not sure what those errors are. I think it might be the embedded google map.

 

The nav is working fine for me on Chrome too. The only browser that is giving me problems is IE8.

 

I have updated the javascript to use $ instead of jquery now, but it still is not working in IE8.

 

Thanks once again.



#8 Lyndsey

Lyndsey

    Privileged

  • Moderators
  • PipPipPipPip
  • 811 posts
  • Gender:Female
  • Location:South Wales
  • Experience:Intermediate
  • Area of Expertise:Web Developer

Posted 16 April 2013 - 07:10 AM

Try wrapping your function in a document ready:

 

<script type="text/javascript">
$(document).ready(function() {
   $('.dropdown-toggle').dropdown();
});
</script>

 

It's not working in Chrome for me (version 26.0.1410.64)

 

I'm getting these errors:

 

Uncaught TypeError: undefined is not a function bootstrap.js:29
Uncaught ReferenceError: $ is not defined 


#9 predatorx

predatorx

    Forum Newcomer

  • Members
  • Pip
  • 92 posts

Posted 16 April 2013 - 12:17 PM

Thanks for your reply.

 

You were right about the nav not working in Chrome. I had it working because I was looking at my local machine. It should work now in Chrome. The jquery was pointing to http:// when it should have been https://dl.dropboxus...contact-us.html

 

I will try your suggestion later.

 

Thanks



#10 brentg

brentg

    Forum Newcomer

  • Members
  • Pip
  • 1 posts

Posted 09 September 2013 - 12:51 PM

Hi
 
Do you still have the same problem? If not, can you share the solution with us? because I'm having the same problem on a site ( http://huis1.homethoge.be )
 
But if you didn't, I've found already a little that can maybe help to find a solution:
  - the dropdown only appears within the box of the navigation, so when you change the height of the navigation to 200 px, you will see that the dropdown will be displayed. But then the navbar is offcourse too big.







1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users