Div in wrong position while loading
I have a JavaScript slide-out menu on my page. As the page is loading the menu shows in the wrong place and as opened (it should be closed by default). It then jumps into the correct position and state once the page has loaded.
I would like the menu to either load last or be in the correct position to start with. I have tried making the style for the menu hidden and the display it as a block on page load with JavaScript but the menu just stays hidden.
<link rel="stylesheet" type="text/css" media="all" href="<css/style.css" />
<link rel="stylesheet" type="text/css" media="all" href="</css/reset.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tabSlideOut.v1.3.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle',
pathToTabImage: 'images/closed_menu.png', //class of the element that will become your tab
imageHeight: '230px', //height of tab image //Optionally can be set using css
imageWidth: '62px', //width of tab image //Optionally can be set using css
tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
speed: 600, //speed of animation
action: 'hover', //options: 'click' or 'hover', action to trigger animation
topPos: '270px', //position from the top/ use if tabLocation is left or right
leftPos: '30px', //position from left/ use if tabLocation is bottom or top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
$("div.slide-out-div").mouseover(function(){
$('.handle').css("background-image", "url(images/open_menu.png)");
}).mouseout(function(){
$('.handle').css("background-image", "url(images/closed_menu.png)");
});
$('#sliderimages').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
next: '#next开发者_如何学编程',
prev: '#prev'
});
});
</script>
<body onload="javascript:document.getElementByClass('slide-out-div').style.display = 'block';">
and then the CSS
.slide-out-div {
display: none;
padding-left: 0px;
width: 200px;
z-index: 3;
position: relative;
}
A possible solution might be this. In the <head> of your html add:
<script>document.documentElement.className += ' js'</script>
This will add a "js" class onto the <html> element.
Next, in your css file style your menu as you would normally, but immediately after, hide it by adding the .js class. For example:
.menu { /* your normal styling goes here */ }
.js .menu { display: none; }
This makes sure that your menu is shown in clients that do, for whatever reason, not support JavaScript but hidden in clients that do support JavaScript.
Next up, adapt your JavaScript file to show the slide-out menu when needed.
Looked at this with fresh eyes this morning and just realised I was using trying to use a Class in my Javascript and not an ID.
I changed from this
<body onload="javascript:document.getElementByClass('slide-out-div').style.display = 'block';">
to this
<body onload="javascript:document.getElementById('menu').style.display = 'block';">
加载中,请稍侯......
精彩评论