Can't get JS working

[Epiales]

Okay, I created a button on fiddle, and I can't get it working in my page. It works fine on JSFiddle, but won't work when I implement it into my site....

JSFiddle button:

http://jsfiddle.net/4jxph/3492/

I tried two ways to put it into the site. I copies the html into the page I want the button. Then I put the style sheet in my main style sheet and added the content style from JSFiddle.... Then I used the <script> tags with the JS code it gives in the main page, before AND after the html.. It won't work upon hover. It shows the button, but doesn't hover the rest.

Then I made a travel.js file and linked it to the main page as such:

Code: Select all

<script src="http://code.jquery.com/jquery-2.1.0.min.js" type="text/javascript"></script>
<script src="travel.js" type="text/javascript"></script>

And nothing works. What am I doing wrong?

[Epiales]

Here is what I have on my HTML

Code: Select all

<div id="divMenuWrapper1" class="divMenuWrapper1">
    <div id="hoverli">
        <ul class="vertical-list">
        <div class="lbtn">
            <center>Travel         ⇓</center>
        </div>
		</ul>
	</div>
</div>
        <div id="actions_menu" class="file_menu">
            <div><a href="#file">United States</a></div>
            <div><a href="#file">Great Britian</a></div>
            <div><a href="#file">Paris</a></div>        
    	</div>

Here is my JS

Code: Select all

<script>
$("#hoverli").hover(
    function () {
        $('#actions_menu').finish().slideDown('fast');
    },
    function () {
        $('#actions_menu').finish().slideUp('fast');
    }
);
</script>

Here is my CSS:

Code: Select all

<style>
.lbtn {
    outline: 0;
    padding: 5px 12px;
    display: block;
    color: yellow;
    font-weight: bold;
    text-shadow: 1px 1px #1f272b;
    border: 1px solid #1c252b;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background: #232B30; /* old browsers */
    background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */
    box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */
}

.lbtn:active {
    background-position: 0 top;
    position: relative;
    top: 1px;
    color: #fff;
    padding: 6px 12px 4px;
    background: #20282D; /* old browsers */
    background: -moz-linear-gradient(top, #20282D 3%, #252E34 51%, #222A30 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#20282D), color-stop(51%,#252E34), color-stop(100%,#222A30)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20282D', endColorstr='#222A30',GradientType=0 ); /* ie */
    -moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */
    -webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Safari, Chrome */
    box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* CSS3 */
}

.divMenuWrapper1
{
    height: 25px;
    width: 75px;
    margin-top:85px;
    max-width:200px;
}

.file_menu 
{
    display:none;
    width:125px;
    border: 1px solid #1c1c1c;
    background-color: white;
    position:relative;
    z-index:100000;
}

.file_menu div 
{
    background-color: black;
    font-size:10pt;
    max-width:200px;
}

.file_menu div a 
{
    color:white; 
    text-decoration:none; 
    padding:3px; 
    padding-left:15px;
    display:block;
}

.file_menu div a:hover 
{
    color: #fff;
    background: #4C5A64; /* old browsers */
    background: -moz-linear-gradient(top, #4C5A64 3%, #404F5A 4%, #2E3940 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#4C5A64), color-stop(4%,#404F5A), color-stop(100%,#2E3940)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4C5A64', endColorstr='#2E3940',GradientType=0 ); /* ie */
}

.vertical-list {
    list-style: none;
    padding: 10px;
    width: 125px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: #20282D; /* old browsers */
    background: -moz-linear-gradient(top, #20282D 3%, #252E34 51%, #222A30 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#20282D), color-stop(51%,#252E34), color-stop(100%,#222A30)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20282D', endColorstr='#222A30',GradientType=0 ); /* ie */
    -moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */
    -webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Safari, Chrome */
    box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* CSS3 */
}
.vertical-list .lbtn {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: #515B62; /* old browsers */
    background: -moz-linear-gradient(top, #515B62 3%, #444E55 5%, #394147 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#515B62), color-stop(5%,#444E55), color-stop(100%,#394147)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515B62', endColorstr='#394147',GradientType=0 ); /* ie */
}
.vertical-list .lbtn:hover {
    background: #5F6B72; /* old browsers */
    background: -moz-linear-gradient(top, #5F6B72 3%, #56646C 4%, #4D5A62 50%, #434D54 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#5F6B72), color-stop(4%,#56646C), color-stop(50%,#4D5A62), color-stop(100%,#434D54)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5F6B72', endColorstr='#434D54',GradientType=0 ); /* ie */
}
.vertical-list .lbtn:active {
    padding: 5px 12px;
    top: 0;
    background: #515B62; /* old browsers */
    background: -moz-linear-gradient(top, #515B62 3%, #444E55 5%, #394147 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#515B62), color-stop(5%,#444E55), color-stop(100%,#394147)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515B62', endColorstr='#394147',GradientType=0 ); /* ie */        -moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */
    box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
} 
</style>
 

It highlights when hovering, but does not display the div that holds the drop down links to display on the menu

[Epiales]

I redid my JSFiddle below and everything works perfect.... but when I put on page it doesn't grrrrrrrrrrrr


http://jsfiddle.net/4jxph/3510/

[Jackolantern]

It probably isn't working because #hoverli does not exist when your JS is run. It probably works on jsFiddle because the DOM is likely being loaded to completion before the JS is run automatically.

You need to wrap your JS code is a DOM ready event, which jQuery makes very easy:

Code: Select all

<script>
$(function() {
    $("#hoverli").hover(
        function () {
            $('#actions_menu').finish().slideDown('fast');
        },
        function () {
            $('#actions_menu').finish().slideUp('fast');
        }
    );
});
</script>

That is a shortcut for the standard jQuery ready event handler:

Code: Select all

$(document).ready(function() {

});

Try that and see if it fixes it.

EDIT: Anytime your JS just isn't working and you have no errors, always check to make sure you are waiting for the DOM to fully load. Even putting the scripts at the bottom of the page does not guarantee that the DOM is loaded when the JS is executed since everything is loaded into modern browsers in threads.

[Epiales]

It probably isn't working because #hoverli does not exist when your JS is run. It probably works on jsFiddle because the DOM is likely being loaded to completion before the JS is run automatically.

You need to wrap your JS code is a DOM ready event, which jQuery makes very easy:

Code: Select all

<script>
$(function() {
    $("#hoverli").hover(
        function () {
            $('#actions_menu').finish().slideDown('fast');
        },
        function () {
            $('#actions_menu').finish().slideUp('fast');
        }
    );
});
</script>

That is a shortcut for the standard jQuery ready event handler:

Code: Select all

$(document).ready(function() {

});

Try that and see if it fixes it.

EDIT: Anytime your JS just isn't working and you have no errors, always check to make sure you are waiting for the DOM to fully load. Even putting the scripts at the bottom of the page does not guarantee that the DOM is loaded when the JS is executed since everything is loaded into modern browsers in threads.

Okay, so how would I add what you have written?

Code: Select all

<script>

$(document).ready(function() {

$(function() {
    $("#hoverli").hover(
        function () {
            $('#actions_menu').finish().slideDown('fast');
        },
        function () {
            $('#actions_menu').finish().slideUp('fast');
        }
    );
});

});
</script>

Something like that?

[Jackolantern]

No. This:

Code: Select all

$(function() {
});

is a shortcut for this:

Code: Select all

$(document).ready(function() {
});

You use one or the other. I already fixed your code to work with the former shortcut method in my first post:

Code: Select all

<script>
$(function() {
    $("#hoverli").hover(
        function () {
            $('#actions_menu').finish().slideDown('fast');
        },
        function () {
            $('#actions_menu').finish().slideUp('fast');
        }
    );
});
</script>

Just use that. If you want to find out more about this method and its usage, see its page on the jQuery website.

[Epiales]

No. This:

Code: Select all

$(function() {
});

is a shortcut for this:

Code: Select all

$(document).ready(function() {
});

You use one or the other. I already fixed your code to work with the former shortcut method in my first post:

Code: Select all

<script>
$(function() {
    $("#hoverli").hover(
        function () {
            $('#actions_menu').finish().slideDown('fast');
        },
        function () {
            $('#actions_menu').finish().slideUp('fast');
        }
    );
});
</script>

Just use that. If you want to find out more about this method and its usage, see its page on the jQuery website.

Thx Jackolantern... That worked like a charm. This is what it currently looks like.

[Jackolantern]

You're most welcome