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

Error: Loop Program Encountered Unexpected Token Syntax

Retrieve or update the selected option value in a Select2 multiple dropdown

provide a hyperlink to the icon located in front of the navigation bar

How to Ensure Center Column Maintains Visibility on Mobile Devices with Bootstrap 4

Grab the contents of the header while excluding specific attributes

Having trouble getting my Leaflet map to display even after meticulously following the quick-start guide

Test fails in Jest - component creation test result is undefined

Differences in Spacing: Exploring Bootstrap v5.1.1 Compared to 4.0

Ways to change content within an editable div without altering the current cursor location

Can you provide some guidance on accessing HTTP headers while using Promises to make AJAX requests?

What is the reason for not displaying the various li elements on my webpage?

Javascript's ReferenceError occasionally acts inconsistently when using Firefox's scratchpad

What is the best practice for using templates in a constructor versus connectedCallback?

What is the best way to retrieve the scope of ng-repeat from another directive located on the same element as ng-repeat?

Error in canvas-sketch: "THREE.ParametricGeometry has been relocated to /examples/jsm/geometries/ParametricGeometry.js"

Unable to pass the jQuery value - troubleshooting tips for Laravel

Disable a tab or menu item if the bean's boolean value is 'false'

Oops! An error occurred: Uncaught promise rejection - invalid link found for ProductListComponent

Is it time to shake up the location of your Toastr

Error: SyntaxError - Unexpected token 'if' found. Additionally, ReferenceError - berechnung is not defined