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
Comments
Post a Comment