Develop Reference

First javascript script in head doesn't run, but second does

I'm fairly new to javascript and jQuery and don't understand why only one of the two scripts in my head section is working.
I have the following code in the head of my page:
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="../../js/jquery.slicknav.min.js"></script>
<script type="text/javascript">
$(document).ready(function menu(){
$('#nav_menu') .slicknav({prependTo:"#mobile_menu"});
});
</script>
<link rel="stylesheet" href="../../styles/jquery.bxslider.css">
<script src="./js/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function slideshow(){
$('#slider') .bxSlider({
auto: true,
autoControls: true,
minSlides: 1,
maxSlides: 10,
slideWidth: 650,
});
});
</script>
And in my body I have the following elements:
<nav id="mobile_menu"></nav>
<nav id="nav_menu">
<ul>
<li><a class="current" href="#">Home</a></li>
<li>About Us</li>
<li>Products</li>
<li>Promotions
<ul>
<li>Back-To-School</li>
</ul>
</li>
<li> What's New
<ul>
<li>Latest News</li>
</ul>
</li>
<li>Our Team</li>
<li>Contact Us</li>
</ul>
</nav>
and,
<ul id="slider">
<li><img src="./images/1.png" alt="Parrot Products"></li>
<li><img src="images/2.png" alt="Office Machines"></li>
<li><img src="images/3.png" alt="Labelling"></li>
<li><img src="images/4.png" alt="Paper"></li>
<li><img src="images/5.png" alt="Files & filing"></li>
<li><img src="images/6.png" alt="Office Accessories"></li>
<li><img src="images/7.png" alt="Toners & Cartridges"></li>
<li><img src="images/8.png" alt="Art Supplies"></li>
<li><img src="images/9.png" alt="Colouring In"></li>
<li><img src="images/10.png" alt="Gifts"></li>
<li><img src="images/11.png" alt="Office Furniture"></li>
<li><img src="images/12.png" alt="Bibles"></li>
<li><img src="images/13.png" alt="Bible Repairs & Indexing"></li>
<li><img src="images/14.png" alt="Bible Verse"></li>
</ul>
With only one of the two scripts in my head (either the slicknav or the bxslider) it works perfectly. If I have both though only the lowest one in the head code works.
I have tried moving them around to change the order, placing the scripts in my html below the elements instead of using $(document).ready() and placing both into one $(document).ready() section.
Any advice on how to get these two to work together would be greatly appreciated, or even just an explanation as to what the issue is to try and avoid it in the future.

Try this,
I replaced all the references to your Scripts with scripts stored on CDN's (Content Delivery Networks) this ensures that the scripts are definitely being referenced correctly.
I also swapped some of your code around to make more sense i.e.
$(document).ready(function menu() {
$('#nav_menu').slicknav({
prependTo: "#mobile_menu"
});
});
became:
$(document).ready(function menu() {
$('#mobile_menu').slicknav({
prependTo: "#nav_menu"
});
});
I added the hidden attribute to your <nav id="mobile_menu" hidden="hidden"> tag so that it hides on default.
Finally I just added some links to images on Google images to test your slider.
and it seems to work as expected.
$(document).ready(function menu() {
$('#mobile_menu').slicknav({
prependTo: "#nav_menu"
});
});
$(document).ready(function slideshow() {
$('#slider').bxSlider({
auto: true,
autoControls: true,
minSlides: 1,
maxSlides: 10,
slideWidth: 650,
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SlickNav/1.0.10/jquery.slicknav.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/SlickNav/1.0.10/slicknav.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css" rel="stylesheet" />
<nav id="nav_menu"></nav>
<nav id="mobile_menu" hidden="hidden">
<ul>
<li><a class="current" href="#">Home</a></li>
<li>About Us</li>
<li>Products</li>
<li>Promotions
<ul>
<li>Back-To-School</li>
</ul>
</li>
<li> What's New
<ul>
<li>Latest News</li>
</ul>
</li>
<li>Our Team</li>
<li>Contact Us</li>
</ul>
</nav>
<ul id="slider">
<li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Parrot Products"></li>
<li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Office Machines"></li>
<li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Labelling"></li>
<li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Paper"></li>
<li><img src="images/5.png" alt="Files & filing"></li>
<li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Office Accessories"></li>
<li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Toners & Cartridges"></li>
<li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Art Supplies"></li>
<li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Colouring In"></li>
<li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Gifts"></li>
<li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Office Furniture"></li>
<li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Bibles"></li>
<li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Bible Repairs & Indexing"></li>
<li><img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" alt="Bible Verse"></li>
</ul>

Continuous Slider of images in HTML

I need to create a slider in which the images moves continuous.
I have used flexslider but it moves from first page to next, instead i need it to be continuous.
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide", // set animation to slide
animationLoop: true,
itemWidth: 120,
itemMargin: 20,
minItems: 1,
maxItems: 5,
smoothheight: true,
directionNav: true,
});
});
</script>
<style type="text/css">
.flexslider{
background:none;
border:none;
box-shadow:none;
margin:10px;
}
</style>
<div class="flexslider">
<ul class="slides">
<li><img alt="" src="images/1.jpg" /></li>
<li><img alt="" src="images/2.jpg" /></li>
<li><img alt="" src="images/3.jpg" /></li>
<li><img alt="" src="images/4.jpg" /></li>
<li><img alt="" src="images/5.jpg" /></li>
<li><img alt="" src="images/6jpg" /></li>
<li><img alt="" src="images/7.jpg" /></li>
<li><img alt="" src="images/8.jpg" /></li>
<li><img alt="" src="images/9.jpg" /></li>
</ul>
</div>

If you want a slider that will continuously move your images in a loop, I recommend downloading the jQuery Anything Slider from here: http://css-tricks.com/anythingslider-jquery-plugin/
After you download it, use the following code:
jQuery:
<script src="_js/jquery-1.7.2.min.js"></script>
<script src="_js/jquery.anythingslider.min.js"></script>
<script>
$(document).ready(function() {
$('#slider').anythingSlider({
buildArrows : true,
autoPlay : true, // THIS MUST BE SET TO TRUE FOR YOUR SLIDER TO LOOP
buildStartStop : false,
resizeContents: false
});
}); // end ready
</script>
HTML:
<div id="slider">
<div class="slidePanel"><a href ='#'>
// YOU CAN ADJUST THE WIDTH AND HEIGHT OF YOUR IMAGES
<p>
<img src="INSERT IMAGE SOURCE 1" alt="SomePic1" width="120" height="150" class="imgLeft"> INSERT INFORMATION ABOUT IMAGE HERE
</p>
</a></div>
<div class="slidePanel"><a href ='#'>
<p>
<img src="INSERT IMAGE SOURCE 2" alt="SomePic2" width="120" height="150" class="imgLeft"> INSERT INFORMATION ABOUT IMAGE HERE
</p>
</a></div>
</div>
You can insert the number of images that you need but I usually stick with 4 or 5.
Don't forget to download the CSS File from the link above. You will need 'anythingslider.css'!!!
Hope this helps!

bxSlider is not working properly

For some reason, I can't make my jQuery work. I've followed every step and nothing! Here's what's happening:
All the styles and JavaScript:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"> <\/script>')</script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" type="text/css" />
And my HTML:
<ul id="bxslider">
<li><img src="1.jpg" /></li>
<li><img src="2.jpg" /></li>
<li><img src="3.jpg" /></li>
</ul>
<script type="text/javascript">
$(document).ready(function() {
$('.bxslider').bxSlider({
auto: true,
autoControls: true
});
});
</script>

You are initiating the slider using bxslider as class, but in your case you have to use as id selector like:
$(document).ready(function () {
$('#bxslider').bxSlider({
auto: true,
autoControls: true
});
});
Selectors docs: http://api.jquery.com/category/selectors/
Working fiddle: http://jsfiddle.net/IrvinDominin/UV4r4/1/

Also, you would want to load CSS first and then, the JavaScript files.

how do i select a element within a div using jquery

i have a slideshow that is using the cycle plugin and for some reason i cant select or target the correct elements see the code below:
HTML
<div id="slider">
<div id="slideshow">
<ul>
<li><img src="images/slider-one.png" height="380" width="960" alt="AquaPure Traveller" /></li>
<li><img src="images/slider-one.png" height="380" width="960" alt="AquaPure Traveller" /></li>
<li><img src="images/slider-one.png" height="380" width="960" alt="AquaPure Traveller" /></li>
<li><img src="images/slider-one.png" height="380" width="960" alt="AquaPure Traveller" /></li>
<li><img src="images/slider-one.png" height="380" width="960" alt="AquaPure Traveller" /></li>
</ul>
</div> <!-- End Slideshow -->
<div id="prev">PREVIOUS</div>
<div id="next">NEXT</div>
</div> <!-- End Slider -->
and the javascript
$(document).ready(function() { // Document Ready
$('#slideshow ul li').cycle({
'fx': 'scrollHorz',
'timeout': 8000,
'prev': '#prev',
'next': '#next',
'pause': true
});
}); // End Document Ready
what am i missing is it something simple or is it an issue with the plugin?
Thanks

You are using the jQuery Cycle Plugin right?
As far as I know you have to select the container / parent of the items. Try this:
$(document).ready(function() {
$('#slideshow ul').cycle({
'fx': 'scrollHorz',
'timeout': 8000,
'prev': '#prev',
'next': '#next',
'pause': true
});
});

Change the JavaScript so that the cycle is applied to the ul element not the individual li:-
$('#slideshow ul').cycle();

Navigation Menu Hover Effect only on a Particular Occasion

I need the exact effect of this website's navigation menu http://recruitmentmalta.com/ptowers/ but in neater code. This code was generated with a tool which converts from PSD to HTML/CSS and basically created a bunch of useless code. I know how to make that menu, except for the part where the Shop Now effect should turn off only if the contact is hovered over.
Any ideas of how I can recreate that hovering off effect when I hover over the contact button (when Shop Now gets turned off)?
This is what I have done so far to give you an idea
<ul>
<li id="homeButton"> <img src="images/home.png" onmouseout="this.src='images/home.png'" onmouseover="this.src='images/homeHover.png'" width="115" height="55" alt="home" /></li>
<li id="aboutButton"> <img src="images/about.png" onmouseout="this.src='images/about.png'" onmouseover="this.src='images/aboutHover.png'" width="115" height="55" alt="about" /></li>
<li id="newsButton"> <img src="images/news.png" onmouseout="this.src='images/news.png'" onmouseover="this.src='images/newsHover.png'" width="115" height="55" alt="news" /></li>
<li id="brandsButton"> <img src="images/brands.png" onmouseout="this.src='images/brands.png'" onmouseover="this.src='images/brandsHover.png'" width="115" height="55" alt="brands" /></li>
<li id="storesButton"> <img src="images/stores.png" onmouseout="this.src='images/stores.png'" onmouseover="this.src='images/storesHover.png'" width="115" height="55" alt="stores" /></li>
<li id="careersButton"> <img src="images/careers.png" onmouseout="this.src='images/careers.png'" onmouseover="this.src='images/careersHover.png'" width="115" height="55" alt="careers" /></li>
<li id="contactButtonMenu"> <img src="images/contactButton.png" onmouseout="this.src='images/contactButton.png'" onmouseover="this.src='images/contactButtonHover.png'" width="115" height="55" alt="contact" /></li>
<li id="shopNowButton"> <img src="images/shopNowHover.png" width="114" height="53" alt="Shop Now" /> </li>
</ul>
This is my JS Fiddle Link: http://jsfiddle.net/GHHJM/

That's not so difficult.
Build the menu in a <ul> element as is so common today. Build a style called hover with a border on it to mimic the highlight. Set the last element's default class (style when the page is rendered) to have the border. All else are just normal for starters. Remember, when dealing with styles you can "stack" classes such as:
<element class="firstclass hover otherclass">
Now, build a hover action:
$("li").hover(function () {
$(elementtoputborderon).addClass("hover");
},
function () {
$(this).removeClass("hover");
})
And, for the part where it turns off:
$("#idofcontactbtn").hover(function () {
$('#idoflastelement').removeClass("hover");
},
function () {
$('#idoflastelement').addClass("hover");
})
To get the "fade" effect on the last element, you could try something like this:
$('#lastitem').hover(function() {
$(this).toggleClass('pretty-hover', 500);
});

I've finally solved this in a rather efficient easy way, this is the code part for just the effect of two buttons. I hope this will be of help if any body needs it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Hover</title>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".contactButton").hover(function() {
$(contactButtonMenu).attr("src","images/contactButtonHover.png");
}, function() {
$(contactButtonMenu).attr("src","images/contactButton.png");
});
});
$(document).ready(function(){
$(".contactButton").hover(function() {
$(shopNowButton).attr("src","images/shopNow.png");
}, function() {
$(shopNowButton).attr("src","images/shopNowHover.png");
});
});
</script>
</head>
<body>
<img id="contactButtonMenu" src="images/contactButton.png" alt"Contact Button" class="contactButton" />
<img id="shopNowButton" src="images/shopNowHover.png" alt="Shop Now" class="shopNowButton" />
</body>
</html>
However this is not working in Firefox, any ideas?