javascript - HTML - Body Rotation Affecting Fixed Elements -


i have javascript function used shake screen second.

function shakescreen() {     var degrees = 0;     var goal = 0;     var goals = [5,-5,4,-4,3,-4,2,-2,1,-1,0];     function frame() {         if(goals[goal] < 0) {             degrees -= 1;         } else {             degrees += 1;         }         get('body','tag');         current[0].style.transform = 'rotate(' + degrees + 'deg)';         if(degrees === goals[goal]) {             goal += 1;             if(goal === goals.length) {                 clearinterval(intervalid);             }         }     }     var intervalid = setinterval(frame,16); }

inside html body, first element has fixed position. element pop-up displays messagers users, , has fixed position appears in same position on screen if end user has scrolled down or page. here snippet of html:

<body> <div id='fade' onclick="fade('out')"><div id='alert'></div></div> <!-- more unrelated content -->

here css specified element above:

#fade {     z-index: 2750;     position: fixed; /*important*/     display: none;     width: 100%;     height: 100%;     margin: 0;     padding: 0;     background-color: rgba(0, 0, 0, 0);     text-align: center; } #fade:hover {     cursor: pointer; }

when javascript function shakescreen() executed, fade element gets misaligned , moves top of body rather remaining in center of end user's screen. here jsfiddle: https://jsfiddle.net/turkey3/ug9zx1d2/3/ scroll down halfway , you'll see button. click button shake screen. you'll notice split second fade element starts appearing @ center of screen, moves top after starts shaking. also, see how want be, comment out shakescreen function that's inside setup function , run code.

edit: fade element dark background. alert element white box message shows user.

solution

i found out best method was, rather rotating body element, wrap other code insider div , shake division rather entire body. after that, alert message showed in center of screen. here fixed code: https://jsfiddle.net/turkey3/ug9zx1d2/4/

here html wrapped in div:

<body> <div id='fade' onclick="fade('out')"><div id='alert'></div></div> <div id='shake'>     <!-- more unrelated content --> </div>

and updated js:

function shakescreen() {     var degrees = 0;     var goal = 0;     var goals = [5,-5,4,-4,3,-4,2,-2,1,-1,0];     function frame() {         if(goals[goal] < 0) {             degrees -= 1;         } else {             degrees += 1;         }         get('shake','id');         current.style.transform = 'rotate(' + degrees + 'deg)';         if(degrees === goals[goal]) {             goal += 1;             if(goal === goals.length) {                 clearinterval(intervalid);             }         }     }     var intervalid = setinterval(frame,16); }

Comments

Post a Comment

Popular posts from this blog

searchKeyword not working in AngularJS filter -

i writing app using angularjs on front end. want search through table word/field; 1 search box everything. according article here: http://hello-angularjs.appspot.com/searchtable can use filter: searchkeyword this. this code, , not working expected. <label>search: <input ng-model="searchkeyword"></label> <table ng-repeat="post in posts | orderby: sort | filter: searchkeyword"> <tr> <td> {{index(post)}} </td> <td> {{post.title}} </td> <td> {{post.author}} </td> <td> {{post.content}} </td> <td> {{post.date | date: "d/m/yyyy"}} </td> </tr> </table> what should do? thank you try this: controller $scope.posts = [ {title:'title one', author:'author one', content: 'content one'}, {title:'title two', author:'author two', content: 'cont...
Read more

sequelize.js - Sequelize: sort by enum cases -

i have model ( article ) field (the name type ) of type enum('source', 'translated') , return 1 article ordered type field. source articles should returned before translated articles. like: article.findone(order: [ { type: [ 'source', 'translated' ] } ]); unfortunately there appears no built-in solution sorting enums. instead have sort by case , couldn't find documentation on how sequelize. what conventional approach here? sorting case hard in sequelize, sort field (the second answer in linked post) should possible: order: sequelize.fn('field', sequelize.col('type'), 'source', 'translated') it's supported mysql far know though
Read more

user interface - how to replace an ongoing process of image capture from another process call over the same ImageLabel in python's GUI TKinter -

i trying use following code create interactive gui changes color-space(hsv, rbg, grayscale etc) on event of button click. display opencv video in tkinter using multiprocessing being new python having problems multiprocessing , attempts on making gui change it's color space on button clicks hangs entire system. on it's implementation highly appreciated. thankyou. below code: import cv2 pil import image,imagetk import tkinter tk import numpy np multiprocessing import process , queue def quit_it(root,process): root.destroy() process.terminate() def black_andwhite(root,process): process.terminate p=process(target=capture_image, args=(5,queue, )) p.start() root.after(0, func=lambda: update_all(root, image_label, queue)) def update_image(image_label, queue): frame = queue.get() = image.fromarray(frame) b = imagetk.photoimage(image=a) image_label.configure(image=b) image_label._image_cache = b root.update() def update_all(root...
Read more