Jump to content
Sign in to follow this  
predatorx

Bootstrap dropdown not working in IE8

Recommended Posts

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.dropboxusercontent.com/u/52725754/fightback-responsive/index.html

 

Can anyone help with this problem?

 

Thanks

Share this post


Link to post
Share on other sites

Hi, may be you need to add ;

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 $

Share this post


Link to post
Share on other sites

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.dropboxusercontent.com/u/52725754/fightback-responsive-site/contact-us.html

 

Thanks

Share this post


Link to post
Share on other sites

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();
});
        

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 

Share this post


Link to post
Share on other sites

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://.

 

https://dl.dropboxusercontent.com/u/52725754/fightback-responsive-site/contact-us.html

 

I will try your suggestion later.

 

Thanks

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • By RobDoyle
      Just curious on how the members here like to build their websites, or do you use an array of methods?
    • By welsh-rich
      Hi, guys not been on here for a while, been concentrating on my IT degree for the last year, anyway I'm working on something that is like a portfolio page that I'm hoping as my work grows I can showcase it through my own site. currently, I'm stuck on getting my logo i created using adobe illustraitor lto go into the left hand corner of my navbar ill list my code below please excuse any noobie typos as i am still new at this whole coding thing.
       
      <!DOCTYPE html> <html lang="en">
      <head> <title>RPM Designs</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head>
      <body>
      <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"><img src="diy.ai" alt="diy" /></a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <!-- <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Richard <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">About me</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact me</a></li> </ul>--> </li> <li><a href="#">About me</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact me</a></li> </ul> </div> </nav>
      <div class="container text-center"> <h3>Navbar With Dropdown</h3> <p>This example adds a dropdown menu for the "Page 1" button in the navigation bar.</p> </div> </body>
      </html>  
      All help and criticism is welcome as its only constructive in my eyes and ignore the stuff I commented out as that's something I'm toying with
       
      regards
      Richard
    • By infrawebtech
      I am very new to AngularJS and planning to get a web page using Angular Routing in home page contents. I want to get a demo page but can't find any on the internet.
       
      Can somebody suggest some templates having content using with Angular Routing ? That will help me to get startup.
       
      thanks you!
    • By garretblake
      Hi,
       
      I am creating a carousel with bootstrap and want the images to be full width. there are some text that is beeing loadded to the carousel and this one I would like to be in a specific place.
       
      Perhaps its easier to explain with images.
       
      what I want to do:
      the grey box it should be a full width image for the code I have the following: <?php /** * The template for displaying all pages * * This is the template that displays all pages by default. * Please note that this is the WordPress construct of pages * and that other 'pages' on your WordPress site may use a * different template. * * @[member="link"] https://codex.wordpress.org/Template_Hierarchy * * @package bootstrapwp */ get_header(); ?> <div id="primary" class="content-area"> <main id="main" class="site-main" role="main"> <!--BOOTSTRAP CAROUSEL START--> <div id="carousel-wrapper" class="container-fluid"> <!-- Indicators --> <div id="carousel-home" class="carousel slide" data-ride="carousel"> <div class="row"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-home" data-slide-to="0" class="active"></li> <li data-target="#carousel-home" data-slide-to="1"></li> <li data-target="#carousel-home" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <?php $slider = get_posts(array('post_type' => 'slider', 'posts_per_page' => 3)); ?> <?php $count = 0; ?> <?php foreach ($slider as $slide): ?> <div class="carousel-item <?php echo ($count == 0) ? 'active' : ''; ?>"> <img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id($slide->ID)) ?>" class="d-block img-fluid" alt="Responsive image"/> <div id="carousel-comment-box" class="container" ><?php echo $slide->post_content; ?></div> </div> <?php $count++; ?> <?php endforeach; ?> </div> </div> <!--BOOTSTRAP CAROUSEL END--> </div><!--Row END--> </div><!--Container-fluid END--> </main><!-- #main --> </div><!-- #primary --> <?php get_footer(); the CSS
      // BOOTSTRAP CAROUSEL START// // Carousel global START // #carousel-wrapper { padding:0 ! important; position: relative; } #carousel-home { position: relative; height: auto; } .carousel-inner img { padding: 0; height: 300px; } // Carousel global END // // Carousel Comment box START // #carousel-comment-box { position:absolute; // Padding top right bottom left // padding: 30px 0px 30px 0px; // Font// color: $color__dark; list-style-type: none; font-family: $font-family-serif; font-style: italic; font-weight:700; font-size: 1.8em; line-height: 1.4em; @[member="Include"] media-breakpoint-up(sm) { @[member="Include"] make-col(4); @[member="Include"] make-col-offset(; display: inline-block; vertical-align: top; } @[member="Include"] media-breakpoint-down(sm) { @[member="Include"] make-col(12); } } // Carousel Comment box END // the rest of the layout is made with the normal container and I would like the text box to align with the rest. Now it takes as a reference the end of the viewport and not like the container class from bootstrap usually reacts.
       
      is there any good idea on how to do this?
      perhaps its something simple
       
      thank you in advance
       
    • By alexmv
      Hello.

      My name is Alex and I'm a web designer with interest in graphic design and front-end coding. I'm a part of a web development company based in Ruse, Bulgaria named MetaVisia. We create custom web projects (websites and online software) by request from our clients from England, Belgium, Germany, Switzerland, Denmark and other countries.

      I have experience with web basics (HTML5, CSS3, JS), some frameworks and libraries (Bootstrap, jQuery) and some CMS (Wordpress, Contao).

      Now I'm working to become full-stack developer with a help of freecodecamp.com

      I'm here because I like to learn new things and also to share my knowledge. I hope that I will find here new work fellows and partners.

      Thanks

      Alex Atanasov
      MetaVisia
  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      57,691
    • Most Online
      4,970

    Newest Member
    yshcherban
    Joined
  • Forum Statistics

    • Total Topics
      65,773
    • Total Posts
      454,575
×