Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Keeping the same look without using iframes

Keeping the same look without using iframes

Problem

I have this Code set which all works properly, however I am wondering if there is a cleaner way of executing the same look purely using css and Javascript without the use of Iframes (but I hacked this to get the look I want at least on latest chrome and ff releases).

Basically the iframe is a long Table row with a bunch of images and I have a button that on mouse over scrolls the iframe over to show more images here's a demo and the important code snippets below

html page:

 
 
 

with this css (on the button)

input.btn_slide {
display: block;
position: absolute;
z-index: 15;
right: 0px;
top: 80px;
background-image: url(http://www.iconsdb.com/icons/preview/gray/arrow-33-xx$
background-color: transparent; /* make the button transparent */
background-repeat: no-repeat;  /* make the background image appear only onc$
background-position: 0px 0px;  /* equivalent to 'top left' */
border: none;
height: 250px;           /* make this the size of your image */
width: 200px;
}

and then this javascript:

 function scroll()
 {
    window.scrollBy(250,0); // horizontal and vertical scroll increments
    scrolldelay = setTimeout('scroll()', 1000); // scrolls every 100 millis$
 }
 function make_scroll()
 {
    document.getElementById('recent').contentWindow.scroll();
 }

Now my concern is I plan on having 10 or so of these iframes on a page which means to serve one visited page I'm querying db tables and generating 11 separate html pages which seems really inefficient (even if most of it can be cached in production still not ideal) So I am wondering if there is a way to kinda keep same look without using iframes using just css and javascript? A yes or no or how I can go about it would be greatly appreciated!

Problem courtesy of: brendosthoughts

Solution

http://codepen.io/anon/pen/qywuz

Please for the love that is all holy, do not use iframes for this, you can use divs,a float left and a margin to do this easily.

I recommend this plugin for sliders

http://caroufredsel.dev7studios.com/

It basically does everything for you.

And please validate your code.

Iframes are used for very specific tasks, and this is not one of them.

Also, tables are used only when you have an actual table or a newsletter.

Solution courtesy of: Stephen

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Keeping the same look without using iframes

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×