javascript - squeeze a webpage to show ad -

javascript - squeeze a webpage to show ad -

i have next jsfiddle link

where trying squeeze webpage show advertisement towards right

http://jsfiddle.net/5o6ghf9d/1/

works fine on dekstop browsers

but not getting squeezed on ipad safari/chrome browsers

below functions used squeeze/unsqueeze web page

function squeeze_page(){ d.body.style.paddingright='160px'; d.body.style.paddingleft='160px'; d.body.style.marginleft='-160px'; d.body.style.overflowx='hidden !important'; is_page_squeezed=true; } function unsqueeze_page(){ d.body.style.paddingright=''; d.body.style.paddingleft=''; d.body.style.marginleft=''; is_page_squeezed=false; }

let me know if other way there can squeeze webpage

perhaps you're looking for: jsfiddle

if want have advertisement slide right when showing, it's improve utilize css transition in example.

first, need have container content, in example, add

<div id="container"> ... <!-- content here --> ... </div>

to contain <p> content, using css, set this

#test { position:fixed; width:160px; background:blue; right:-160px; top:0px; bottom:0px; -webkit-transition: ease-in-out 1s; -moz-transition: ease-in-out 1s; transition: ease-in-out 1s; } #test.show { right:0; }

position:fixed; create it's position fixed viewport whenever you're scrolling it, top , bottom set 0 create it's height full, , transition create looks slide right left when shows

the same div container that's using style

#container { margin-right:0; -webkit-transition: ease-in-out 1s; -moz-transition: ease-in-out 1s; transition: ease-in-out 1s; } #container.squeezed { margin-right:160px; }

so looks it's beingness squeezed ad

then utilize script add together or remove class #container , #test

window.onscroll = function () { if (pageyoffset > 100) { $("#test").addclass("show"); $("#container").addclass("squeezed"); } else if (pageyoffset < 100) { $("#test").removeclass("show"); $("#container").removeclass("squeezed"); } }

javascript html css