Back to Tutorial
 

Example 19:
Responsive HTML






For a mobile-ready responsive expandable banner. You would follow the same as you do for a regualr HTML banner.

 

Except you are making 3 of them and hiding the other 2 depending on the screen-size.

Here is the CSS you add. (We are adding CSS media queries.)

<style type="text/css">
#exampleHTMLToPage{
width:728px;
height:90px;
background-image:url(images/responsive_728x90.jpg);}

@media (max-width: 700px)
{#exampleHTMLToPage2 {
width:500px;
height:90px;
background-image:url(images/responsive_500x90.jpg);}}


@media (max-width: 500px)
{ #exampleHTMLToPage3 {
width:320px;
height:90px;
background-image:url(images/responsive_320x90.jpg);}}

@media screen and (min-width: 700px) and (max-width: 3000px) {
#exampleHTMLToPage { display: block; } /* show it on small screens */
}

@media screen and (min-width: 0px) and (max-width: 699px) {
#exampleHTMLToPage { display: none; } /* hide it elsewhere */
}

@media screen and (min-width: 500px) and (max-width: 699px) {
#exampleHTMLToPage2 { display: block; } /* show it on small screens */
}

@media screen and (min-width: 700px) and (max-width: 4000px) {
#exampleHTMLToPage2 { display: none; } /* hide it elsewhere */
}

@media screen and (min-width: 0px) and (max-width: 500px) {
#exampleHTMLToPage2 { display: none; } /* hide it elsewhere */
}

@media screen and (min-width: 0px) and (max-width: 499px) {
#exampleHTMLToPage3 { display: block; } /* show it on small screens */
}

@media screen and (min-width: 500px) and (max-width: 4000px) {
#exampleHTMLToPage3 { display: none; } /* hide it elsewhere */
}

</style>

 

Our JavaScript Code:

<script type="text/javascript">

// exampleHTMLToPage
var exampleHTMLToPage = ExpandableBanners.banner("exampleHTMLToPage", "html/rexpanded.html", 728, 500);
exampleHTMLToPage.setCloseImage("images/closebutton.jpg", 'right', 'bottom');
exampleHTMLToPage.animated = true;
exampleHTMLToPage.setDirection('down', 'right');

// exampleHTMLToPage2
var exampleHTMLToPage2 = ExpandableBanners.banner("exampleHTMLToPage2", "html/rexpanded2.html", 500, 400);
exampleHTMLToPage2.setCloseImage("images/closebutton.jpg", 'right', 'bottom');
exampleHTMLToPage2.animated = true;
exampleHTMLToPage2.setDirection('down', 'right');

// exampleHTMLToPage3
var exampleHTMLToPage3 = ExpandableBanners.banner("exampleHTMLToPage3", "html/rexpanded3.html", 320, 320);
exampleHTMLToPage3.setCloseImage("images/closebutton.jpg", 'right', 'bottom');
exampleHTMLToPage3.animated = true;
exampleHTMLToPage3.setDirection('down', 'right');


if (document.addEventListener) {
document.addEventListener("DOMContentLoaded",function(){documentReady=true;});}
else if (!window.onload) window.onload = function(){documentReady=true;}

</script>

 

And our DIV layer code. Make sure to place this inside of the <body> tags

 

<body>
<div id="exampleHTMLToPage">
</div>

<div id="exampleHTMLToPage2">
</div>

<div id="exampleHTMLToPage3">
</div>

</body>

 

 


All Examples

Example 1: Images - animated no close button (All Directions)
Example 2: Images - animated no close button - click to open (All Directions)
Example 3: Images - animated with close button (All Directions)
Example 4: Images - animated with close button click to open (All Directions)
Example 5: Images - instant-open with close (All Directions)
Example 6: Images - instant-open no close (All Directions)
Example 7: Images - Auto-open after 2 seconds
Example 8: Flash - w/backup images
Example 9: HTML - Animated with a close button
Example 10: HTML - Animated with no close button

 

Example 11: HTML - Instant-open with no close button
Example 12: Takeover Images Animated
Example 13: Takeover Flash
Example 14: Takeover HTML
Example 15: Corner Page Peel
Example 16: Corner Page Peel with Close button
Example 17: Text
Example 18: Text click to open - with Close button
Example 19: Responsive HTML