2
액체 웹 사이트를 구축 중입니다. 당신이 그것에있는 몇몇 심상을 사용하면 그것은 지옥이다. IE에 문제가 있거나 FF 또는 Chrome이 있습니다.Javascript/jQuery가 너무 빠르게 실행됩니다. 페이지를 다시로드 할 때 작동합니다.
다시 문제가 있습니다. 기본적으로 런타임 자바 스크립트에서 웹 사이트를 구축하고 있습니다. 나는 모든 것의 폭을 우선 설정하고있다. 그 후 주 컨테이너의 높이를 설정합니다. (그렇지 않으면 이미지에 중대한 문제가 있습니다).
내 문제는입니다. 웹 페이지를 로컬로 실행하면 3 개의 모든 브라우저에서 작동합니다. 온라인으로 실행하면 주 컨테이너의 높이가 설정되지 않습니다. (VAR wrapperHeight = objLogo.offsetHeight -> 0을 반환)
나는 웹 페이지를 새로 고침하면 모든 것이 정상적으로 보이는 위의 라인은 내가 간단한 JQuery와 스크립트와 함께이 사용하고 ... 유효한 높이를 반환 div를 뒤집기 위해 (그러나 이것은 간단한 스크립트 뒤에 나온다.)
참고 : 또한 내가 몸에 오히려 큰 배경 이미지를 사용하고 있는데, 이것은 .. CSS에서 설정 2 주 : 그것은 단지 ... 크롬에서 발생
코드 :
<head>
<title></title>
<link rel="stylesheet" href="css/default.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script type="text/javascript" src="scripts/jquery.quickflip.js"></script>
<script type="text/javascript">
$('document').ready(function(){
//getting inner width/height
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
//getting width for the main container
var wrapperWidth = schermBreedte*0.641;
//getting width for left and right div in main container
var totalWrapperWidth = wrapperWidth - 40;
var widthLeft = totalWrapperWidth*0.345;
var widthRight = totalWrapperWidth*0.655;
//getting elements
var objOrange = document.getElementById('orange');
var objGreen = document.getElementById('green');
var objFliptabs = document.getElementById('flip-tabs');
var objLeft = document.getElementById('left');
var objRight = document.getElementById('right');
var objContent = document.getElementById('content');
var objLogo = document.getElementById('main_logo');
var objV_line = document.getElementById('v_line');
//setting main container (objOrange & ObjGreen are 2 main containers used for the flip jquery script, they are actually placed above eachother (see jquery ref above and script beneath)
objOrange.style.width = wrapperWidth + "px";
objGreen.style.width = wrapperWidth + "px";
objFliptabs.style.width = wrapperWidth + "px";
//setting the left & right div
objLeft.style.width = widthLeft + "px";
objRight.style.width = widthRight + "px";
//this logo is placed in the left div. The actual main container height is determined by getting the height of this logo after setting the width
objLogo.style.width = (widthLeft-20)+"px";
//the right div is splitted into two pieces: a top which contains 6 images and a bottom which contains 1 image, the objectContent refers to the bottom as the top height is set dynamically by setting the width of the 6 images in %
objContent.style.width = widthRight + "px";
//getting the height for the main container by getting the height of the image (we've set the width of the image earlier - see above - so that it is scaled proportionally)
var wrapperHeight = objLogo.offsetHeight;
//setting the height of the main containers
objOrange.style.height = wrapperHeight + "px";
objGreen.style.height = wrapperHeight + "px";
//setting the height of a 1px line next to the left div
objV_line.style.height = 100 + "%"
//getting the height of the content div (=2nd and bottom div of the right div)
var contentHeight = wrapperHeight*0.445;
//setting the height
objContent.style.height = contentHeight + "px";
//another line
var length = parseInt(document.getElementsByTagName("div")["right"].offsetWidth) - 20;
var line = document.getElementById('hor_lijn');
line.style.width = lengte + "px";
$('#flip-container').quickFlip();
$('#flip-navigation li a').each(function(){
$(this).click(function(){
$('#flip-navigation li').each(function(){
$(this).removeClass('selected');
});
$(this).parent().addClass('selected');
var flipid=$(this).attr('id').substr(4);
$('#flip-container').quickFlipper({ }, flipid, 1);
return false;
});
});
});
</script>
</head>
"너무 빠르다"같은 것이 없습니다! =) –