Why will this hide/show div js only work in jsfiddle? [duplicate]

StackOverflow https://stackoverflow.com/questions/22432137

Question

I have a hide/show div script that works how I want it to here: http://jsfiddle.net/XwN2L/3537/

However when i'm coding it in anywhere else, whether I link javascript and css or embed it (as below) within the html file, it won't work.

<title></title>
<style type="text/css">
ul.buttons {
    display: inline-block;
    height: 35px;
    position: fixed;
    bottom: 18px;
    left: 43px;
    z-index: 40;
    list-style-type: none;
}
.buttons li {
    list-style-type: none;
    display: inline;


}

ul#divMenu {
height: 40px;
background-color: #ddd;
position: fixed;
padding-left: 76px;
padding-right: 15px;
bottom: 15px;
    left: 17px;
    right: 17px;
z-index: 3;
line-height: 39px;
vertical-align: middle;
}

#divMenu li {
    list-style-type: none;
    display: inline;
    font-family: ProximaNovaLtRegular;
    font-size: 12px;
    margin-right: 2em;
}


#divInfo {
height: 40px;
background-color: #ddd;
position: fixed;
padding-left: 76px;
padding-right: 15px;
bottom: 15px;
    left: 17px;
    right: 17px;
z-index: 3;
line-height: 39px;
vertical-align: middle;
}
</style>



<script type='text/javascript'>
$('.targetDiv').hide();
$('.show').click(function () {
    $('.targetDiv').hide();
    $('#div' + $(this).attr('target')).show();
});

$('.hide').click(function () {
    $('.targetDiv').hide();

});
</script>




</head>

<body><ul class="buttons">
    <li><img src="menu.png" class="show" target="Menu"></a></li>
    <li><img src="info.png" class="show" target="Info"></a></li>
    <li><img src="close.png" class="hide" ></a></li>
</ul>


<ul id="divMenu" class="targetDiv">
                <li><a href="print.html">1</a></li>
                <li><a href="print.html#four">2</a></li>
                <li><a href="identity.html#sixteen">3</a></li>
                <li><a href="print.html#seven">4</a></li>
                <li><a href="identity.html">5</a></li>
</ul>

<div id="divInfo" class="targetDiv">Lorum Ipsum 2</div>

</body>
</html>

Could anybody tell me what I am doing wrong ?

Was it helpful?

Solution

What JSFiddle Is Doing

onLoad

JSFiddle wraps any code in the JavaScript/jQuery box in $(window).load(function(){...});. This is because you have the second drop down in Frameworks & Extensions set to onLoad. With this setting, the script will wait for all media and data to load and the page to be rendered.

onDomReady

If you the onDomReady option, JSFiddle uses $(function(){...}); Which just waits for the DOM to load, not necessarily all the data.

What You Can Do

To make you code behave as the JSFiddle code does, you can use either of the above functions.

Another common way to write similar code is $(document).ready(function(){...});. like the onDomReady code, this only waits for the DOM to load. In my opinion, this is the most commonly used method because it is the most intuitive.

OTHER TIPS

Are you including jQuery?

If you are, make sure the DOM is loaded first.

$(function(){});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top