compress a website to display advertisement

Question

compress a website to display advertisement

Here is a JSFiddle link I would like to share with you:

I am currently working on squeezing the webpage to display an ad on the right side.

It works well on desktop browsers, but I am facing issues with iPad Safari/Chrome browsers as the page is not getting squeezed properly.

Below are the functions that I am using to squeeze and unsqueeze the webpage:

 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;
 }

If you have any suggestions or alternative methods to squeeze the webpage effectively, please let me know.

javascript html css

Answer 1

Answer №1

Could this be the solution you're seeking? Check it out here: JSFIDDLE

If your goal is to make the AD slide in from the right when displayed, utilizing a CSS transition similar to my illustration would be more effective.

Initially, establish a container for the content as shown in my example:

<div id="container">
    ...
    <!-- Your Content Here -->
    ...
</div>

This container encapsulates all your <p> content. By applying the following CSS:

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

With position:fixed;, its position remains fixed within the viewport while scrolling. Setting top and bottom to 0 ensures full height coverage. The defined transition facilitates the sliding effect from right to left upon display.

A similar approach applies to the styled div container:

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

This configuration gives the appearance of being compressed by the AD.

Subsequently, utilize this script for dynamically adding or removing classes from #container and #test:

window.onscroll = function () {
    if (pageYOffset > 100) {
        $("#test").addClass("show");
        $("#container").addClass("squeezed");
    } else if (pageYOffset < 100) {
        $("#test").removeClass("show");
        $("#container").removeClass("squeezed");
    }    
}

Answer 2

Could this be the solution you're seeking? Check it out here: JSFIDDLE

If your goal is to make the AD slide in from the right when displayed, utilizing a CSS transition similar to my illustration would be more effective.

Initially, establish a container for the content as shown in my example:

<div id="container">
    ...
    <!-- Your Content Here -->
    ...
</div>

This container encapsulates all your <p> content. By applying the following CSS:

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

With position:fixed;, its position remains fixed within the viewport while scrolling. Setting top and bottom to 0 ensures full height coverage. The defined transition facilitates the sliding effect from right to left upon display.

A similar approach applies to the styled div container:

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

This configuration gives the appearance of being compressed by the AD.

Subsequently, utilize this script for dynamically adding or removing classes from #container and #test:

window.onscroll = function () {
    if (pageYOffset > 100) {
        $("#test").addClass("show");
        $("#container").addClass("squeezed");
    } else if (pageYOffset < 100) {
        $("#test").removeClass("show");
        $("#container").removeClass("squeezed");
    }    
}

compress a website to display advertisement

Answer №1

Similar questions

Updating state within an eventListener in useEffect with an empty array does not trigger a re-render

I'm curious about utilizing jsviews in conjunction with jquery sortable

Troubleshooting Display Issue with Nested Div Selection in jQuery Tooltips

What is the purpose of running "npm install" if the "node_modules" directory already exists?

Chrome is the only browser that displays the correct number of columns, unlike IE and Firefox

Encountering a "Error 404: Page Not Found" message when trying to request a json object from a node server

How do I make an element stay in place between two other elements?

How do I retrieve the enclosure URL in the Alexa Skill FeedHelper.js file?

Obtaining a response in string format using the $.ajax function

Is JavaScript responsible for creating threads for non-blocking AJAX requests?

Learn how to effectively utilize templateURL in an express and angular project

Attempting to route a selector, yet on the second attempt, the entity is successfully transferred

The hide and show buttons seem to be missing when utilizing the datatable API

Developing a Secondary User within Meteor.JS after Establishing the Primary User

Learn how to efficiently pre-load data using the prefetchQuery method in React-Query

angular-bootstrap-mdindex.ts is not included in the compilation result

HTML - Link to enable automatic printing of the page

Find the position of an HTML5 canvas element within a webpage

Including content without triggering the digest cycle (utilizing raw HTML) within a Directive

Dealing with pesky table cell padding issues in Chrome