making dropdown menu with jQuery

Question

I'm having a problem getting a dropdown image menu to display properly in my browser. The code is as follows

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery test</title>

<style>
#webmenu{
width:340px;
}

</style>
</head>

<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() { // makes sure the whole site is loaded
$("body select").msDropDown();
    })
</script>


<select name="webmenu" id="webmenu">
<option value="calendar" title="http://www.abe.co.nz/edit/image_cache/Hamach_300x60c0.JPG"></option>
<option value="shopping_cart" title="http://www.nationaldirectory.com.au/sites/itchnomore/thumbs/screenshot2013-01-23at12.05.50pm_300_60.png"></option>
<option value="cd" title="http://www.mitenterpriseforum.co.uk/wp-content/uploads/2013/01/MIT_EF_logo_300x60.jpg"></option>

</select>

</body>
</html>

I found the original code on github at http://jsfiddle.net/GHzfD/357/ but have not been able to reproduce it - am I making some kind of fundamental mistake?

The page is live at http://www.datatrouble.com/jquery_test.html

try to intialise msDropDown() inside document.ready() instead of window.load — Kartikeya Khosla
– Kartikeya Khosla, Commented Oct 2, 2014 at 5:48

Community · Accepted Answer · 2018-05-29 14:19:11Z

2

Missing msdropdown plugins

msdropdown and css

Include this code befor you call msdropdown

<link rel="stylesheet" href="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/css/msdropdown/dd.css">
<script src="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/js/msdropdown/jquery.dd.min.js"></script>

in jsFiddle these external links are included too on the left panel here is snapshot .

enter image description here

Also read What is the difference between $(window).load and $(document).ready?

Update after OP's comment

You are placing msdropdown plugin before you have included jQuery file .

msdropdown is a jQuery plugin so jQuery file must be added before the plugin script is called.

So it should look like this:

put your scripts at bottom of the page and css at the top to improve page load speed.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/js/msdropdown/jquery.dd.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("body select").msDropDown();
    });
</script>

edited May 29, 2018 at 14:19

CommunityBot

11 silver badge

answered Oct 2, 2014 at 5:48

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2840467 Over a year ago

I hadn't realised there were missing external links! Thanks for that - I've made those changes to the code and have also gone with putting it in the $(document).ready after reading the article. I've double checked the external link urls and they seem to be fine but it's still not working. Could you offer any more help please?

user2840467 Over a year ago

Thanks ever so much Tushar! That's done it. I'm new at jQuery and it's these basics that I find frustrating. I'll look back at this and realise how much of a newb I was :)

Tushar Gupta - curioustushar Over a year ago

@user2840467 Welcome, everybody is newb at some point of time :)

Collectives™ on Stack Overflow

making dropdown menu with jQuery

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related