Good day.

Help me figure out how to solve the problem.

Task: to realize the movement of the containerMenu element to the sides of the screen at any resolution.

Now the code also works, but I cannot understand why when the screen size changes, it stops working correctly, i.e. moves to the right or down from the side of the screen. I note that the change in screen resolution is complemented by a page update.

Please help, O Great Gurus!

HTML

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script> <link href="style.css" type="text/css" rel="stylesheet" /> <title>Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Π±Π΅Π· названия</title> </head> <script> // ΠΎΡ‚ΠΌΠ΅Π½Π° скролла document.onmousewheel = document.onwheel = function() { return false; }; document.addEventListener ("MozMousePixelScroll", function() { return false }, false); document.onkeydown = function(e) { if (e.keyCode >= 33 && e.keyCode <= 40) return false; }; //ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ ΠΏΠΎ экрану $(document).ready(function(){ $("#creation").click(function(){ $("#containerMenu").animate({marginLeft:"35%"},500); $("#containerMenu").animate({marginTop:-40},500); var angle = 0; setInterval(function(){ if(angle != 315){ angle+=3; $("#containerMenu").rotate(angle); } },10); }); $("#service").click(function(){ $("#containerMenu").animate({marginLeft:"35%"},500); $("#containerMenu").animate({marginTop:screen.height - 440},500); var angle = 0; setInterval(function(){ if(angle != 45){ angle+=3; $("#containerMenu").rotate(angle); } },10); }); $("#promotion").click(function(){ $("#containerMenu").animate({marginLeft:screen.width - 350},500); $("#containerMenu").animate({marginTop:screen.height - 710},500); var angle = 0; setInterval(function(){ if(angle != 135){ angle+=3; $("#containerMenu").rotate(angle); } },10); }); $("#content").click(function(){ $("#containerMenu").animate({marginLeft:-40},500); $("#containerMenu").animate({marginTop:screen.height - 710},500); var angle = 0; setInterval(function(){ if(angle != 225){ angle+=3; $("#containerMenu").rotate(angle); } },10); }); }); </script> <div id="containerMenu"> <div id="service"><h1>обслуТиваниС</h1></div> <div id="creation"><h1>созданиС</h1></div> <div id="promotion"><h1>ΠΏΡ€ΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅</h1></div> <div id="content"><h1>ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚</h1></div> </div> <body> </body> </html>

CSS

 @charset "utf-8"; /* CSS Document */ * { padding:0px; margin:0px; } body{ overflow: hidden; } h1{ color:#FF0; } #containerMenu{ position: absolute; border:10px solid #0F0; height:350px; width:350px; margin: 0px; margin-top: 15%; margin-left: 40%; z-index: 999; } #service, #creation, #promotion, #content { border-bottom:5px solid red; width: 200px; text-align:center; } #service{ position:relative; top: 70px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); } #creation{ position:relative; top: 28px; left:165px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); } #promotion{ position:relative; top: 150px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); } #content{ position:relative; top: 108px; left:165px; -webkit-transform: rotate(-225deg); -moz-transform: rotate(-225deg); -ms-transform: rotate(-225deg); }

    2 answers 2

    1) Try to place html-code with containers between the tags <body></body>

    2) JQuery sees line breaks as the end of a command:

    document.addEventListener ("MozMousePixelScroll", [Ρ‚ΡƒΡ‚ пСрСнос Π½Π΅ Π½ΡƒΠΆΠ΅Π½] function() { return false }, false);

    Something like this.

    • one
      @densmith, can a link share where it says that " jQuery interprets line breaks as the end of a command "? And then [such doubts] [1] that I will not sleep at night. [1]: jsfiddle.net/rss2my28 - Deonis
     .toleft{ left:0; /* ΠŸΡ€ΠΈΠ²ΡΠ·ΠΊΠ° Π±Π»ΠΎΠΊΠ° ΠΊ Π»Π΅Π²ΠΎΠΉ сторонС страницы */ } .toright{ right:0; /* ΠŸΡ€ΠΈΠ²ΡΠ·ΠΊΠ° Π±Π»ΠΎΠΊΠ° ΠΊ ΠΏΡ€Π°Π²ΠΎΠΉ сторонС страницы */ } .totop{ top:0; /* ΠŸΡ€ΠΈΠ²ΡΠ·ΠΊΠ° Π±Π»ΠΎΠΊΠ° ΠΊ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ сторонС страницы */ } .tobottom{ bottom:0; /* ΠŸΡ€ΠΈΠ²ΡΠ·ΠΊΠ° Π±Π»ΠΎΠΊΠ° ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΉ сторонС страницы */ } .totop,.tobottom,.toleft,.toright{ position:fixed; }