로딩 중 Div 위치가 잘못됨

내 페이지에 JavaScript 슬라이드 아웃 메뉴가 있습니다. 페이지가로드 될 때 메뉴가 잘못된 위치에 표시되고 열릴 때 표시됩니다 (기본값으로 닫아야 함). 그런 다음 페이지가로드되면 올바른 위치와 상태로 점프합니다.로딩 중 Div 위치가 잘못됨

메뉴를 마지막으로로드하거나 올바른 위치에 놓기를 원합니다. 나는 숨겨진 메뉴의 스타일을 만들려고 시도했다. 자바 스크립트로 페이지로드시 블록으로 표시하지만 메뉴는 숨겨져있다.

<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';">

다음 CSS

.slide-out-div { 
display: none; 
padding-left: 0px; 
width: 200px; 
z-index: 3; 
position: relative; 
}

출처

2011-09-18 Andrew Smart

이

<body onload="javascript:document.getElementByClass('slide-out-div').style.display = 'block';">

변경, 또는 내용 후인가? – Eric

_ "숨겨진 메뉴의 스타일을 만들려고했는데 JavaScript로 페이지를로드 할 때 표시되지만 메뉴는 숨겨져 있습니다."_ - 일부 코드를 볼 수 있습니까? – Eric

당신의 목적에 맞는 해결책 (결함에 의해 숨겨 지거나 닫히게하고 JS를 통해 후자를 여는 것)은 나에게 좋을 것 같다. 우리는 마술처럼 오타 또는 다른 실수로 작업하지 못하게했는지 파악할 수 없습니다 :) 문제점을 보여주기 위해 최소한의 기능적 예제를 만들 수 있습니까? – hugomg

가능한 솔루션이 될 수 있습니다. 당신의 HTML의 <head>에서 추가

는

<script>document.documentElement.className += ' js'</script>

이것은 <html> 요소로는 "JS"클래스를 추가합니다.

다음으로 CSS 파일의 메뉴 스타일은 일반적으로 그러 하듯이 바로 다음에 .js 클래스를 추가하여 숨 깁니다. 예를 들어 :

.menu { /* your normal styling goes here */ } 
.js .menu { display: none; }

이 메뉴는 자바 스크립트를 어떤 이유에서 지원하지 위해, 할 클라이언트에 표시하지만, 자바 스크립트를 지원하지 클라이언트에 숨겨져 있는지 확인합니다.

다음은 필요한 경우 슬라이드 아웃 메뉴를 표시하도록 JavaScript 파일을 수정하십시오.

출처

2011-09-18 20:34:55 Matijs

오늘 아침에 신선한 눈으로 보았고, 단지 자바 스크립트에서 ID를 사용하지 않고 클래스를 사용하려고한다는 것을 깨달았습니다.

나는 당신의 자바 스크립트 페이지의 'head`에 포함이

<body onload="javascript:document.getElementById('menu').style.display = 'block';">

출처

2011-09-19 07:15:19

로딩 중 Div 위치가 잘못됨

답변

관련 문제