Slides using CSS (How does this work?)

HTML & CSS
1

Hi all!

Below is some code that I found online which creates a “Slide Show”.

What is nice about it, is that it works with JavaScript turned off using just CSS as well as adding animation when JavaScript is turned on.

I’ve been studying the CSS, but as usual, seem to be stuck?! :-/

How is it possible to show only one “slide” in the Unordered List at a time??

The author floats the <LI>'s so that the line up side-by-side and flow oout of the viewport, yet when you click on a given tab, that part of the markup miraculously appears in the slide window?!

Things almost behave like the Drop-Down and Drop-Line menus that Rayzur helped me out with in the past, but they clearly aren’t using the fancier techniques that he used with Relative and Absolute Positioning and what not?!

The code is almost too simple for how it works!

slideshow.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Tabbed jQuery slideshow</title>
	<link rel="stylesheet" href="css/slideshow.css" type="text/css" media="screen" />
</head>

<body>
	<div id="slideshow">
		<div class="slides">
			<ul>
				<li id="slide-one">
					<h2>Slide one</h2>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit.
						Donec pretium arcu non velit. Phasellus adipiscing auctor
						lorem. Curabitur in urna ut purus consequat sollicitudin.
						Phasellus ut diam. Cras magna libero, tempor id, venenatis
						sit amet, venenatis et, dui.
					</p>
				</li>
				<li id="slide-two">
					<h2>Slide two</h2>
					<p>
						Nam ac nibh sit amet augue ultricies sagittis. Donec sit
						amet nunc. Vivamus lacinia, nisi ac tincidunt commodo, purus
						nisi condimentum urna, sit amet molestie odio dolor non lectus.
						Cum sociis natoque penatibus et magnis dis parturient montes,
						nascetur ridiculus mus.
					</p>
				</li>
				<li id="slide-three">
					<h2>Slide three</h2>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit.
						Suspendisse adipiscing dui a nibh. Integer tristique lorem
						vitae massa. Etiam dapibus, eros sit amet euismod semper,
						felis erat congue lacus, sed aliquam metus libero sed elit.
					</p>
				</li>
			</ul>
		</div>
		<ul class="slides-nav">
			<li><a href="#slide-one">Slide one</a></li>
			<li><a href="#slide-two">Slide two</a></li>
			<li><a href="#slide-three">Slide three</a></li>
		</ul>
	</div>
</body>

</html>

slideshow.css


*{
/*	outline: 1px dotted #FF0000; /**/
	margin: 0;
	padding: 0;
}


/* ---------------------------------------------------- */
/* GLOBAL
/* ---------------------------------------------------- */
html {
	font-size: 76%;
}

body {
	font-family: arial, helvetica, sans-serif;
	line-height: 1.4em;
	font-size: 1.2em;
	padding: 5%;
}

/* ---------------------------------------------------- */
/* SLIDESHOW
/* ---------------------------------------------------- */
#slideshow {
	width: 960px;
	background-color: #eee;
	border: 1px solid #ddd;
}

#slideshow ul {
	list-style-type: none;
	height: 1%; /* IE fix */
}

#slideshow ul:after {
	content: ".";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
}

/* ---------------------------------------------------- */
/* SLIDESHOW > SLIDES
/* ---------------------------------------------------- */
#slideshow .slides {
	overflow: hidden;		/* Comment out to see slides line up side-by-side!! */
	width: 960px;
}

#slideshow .slides ul {
	width: 2880px;				/* Total Width = 960px/slide X 3 slides */
}

#slideshow .slides li {
	width: 920px;
	float: left;
	padding: 20px;
}

#slideshow .slides h2 {
	margin-top: 0;
}

/* ---------------------------------------------------- */
/* SLIDESHOW > NAVIGATION
/* ---------------------------------------------------- */
#slideshow .slides-nav {
	background-color: #ddd;
	border-top: 2px solid #ccc;
}

#slideshow .slides-nav li {
	float: left;
}

#slideshow .slides-nav li a {
	display: block;
	padding: 15px 20px;
	outline: none;
}

I’d love to understand how this code works, because I think it is what I am lokking for to solve my latest issue.

Thanks,

Debbie

2

lol. It’s quite simple actually, just slight of hand.

You aren’t sliding anything persay, and not with CSS. You are using page anchors ( essentially links to other places in the page, as opposed to other pages.) When you click them the browser automatically goes to that anchor, but because ( and here is where the CSS part comes in) you have used CSS to crop off the other image it gives the illusion of scrolling… no JS.

To see what I mean TURN OFF CSS AND JS in your browser, click on the links and you will see the anchor action in progress.

3

You can animate this with CSS3 using transitions… :smiley:

4

That method isn’t really suitable for most websites because you get an annoying jump when you first click the link if your page has content causing a vertical scrollbar.

To see what I mean try this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Tabbed jQuery slideshow</title>
<link rel="stylesheet" href="css/slideshow.css" type="text/css" media="screen" />
<style type="text/css">
* {
    /*  outline: 1px dotted #FF0000; /**/
    margin: 0;
    padding: 0;
}
/* ---------------------------------------------------- */
/* GLOBAL
/* ---------------------------------------------------- */
html {
    font-size: 76%;
}
body {
    font-family: arial, helvetica, sans-serif;
    line-height: 1.4em;
    font-size: 1.2em;
    padding: 5%;
}
/* ---------------------------------------------------- */
/* SLIDESHOW
/* ---------------------------------------------------- */
#slideshow {
    width: 960px;
    background-color: #eee;
    border: 1px solid #ddd;
}
#slideshow ul {
    list-style-type: none;
    height: 1%; /* IE fix */
}
#slideshow ul:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}
/* ---------------------------------------------------- */
/* SLIDESHOW > SLIDES
/* ---------------------------------------------------- */
#slideshow .slides {
    overflow: hidden;      /* Comment out to see slides line up side-by-side!! */
    width: 960px;
}
#slideshow .slides ul {
    width: 2880px;        /* Total Width = 960px/slide X 3 slides */
}
#slideshow .slides li {
    width: 920px;
    float: left;
    padding: 20px;
}
#slideshow .slides h2 {
    margin-top: 0;
}
/* ---------------------------------------------------- */
/* SLIDESHOW > NAVIGATION
/* ---------------------------------------------------- */
#slideshow .slides-nav {
    background-color: #ddd;
    border-top: 2px solid #ccc;
}
#slideshow .slides-nav li {
    float: left;
}
#slideshow .slides-nav li a {
    display: block;
    padding: 15px 20px;
    outline: none;
}
h1{margin:0 0 2em}
</style>
</head>
<body>
<h1>Testing Header</h1>
<div id="slideshow">
    <div class="slides">
        <ul>
            <li id="slide-one">
                <h2>Slide one</h2>
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Donec pretium arcu non velit. Phasellus adipiscing auctor
                    lorem. Curabitur in urna ut purus consequat sollicitudin.
                    Phasellus ut diam. Cras magna libero, tempor id, venenatis
                    sit amet, venenatis et, dui. </p>
            </li>
            <li id="slide-two">
                <h2>Slide two</h2>
                <p> Nam ac nibh sit amet augue ultricies sagittis. Donec sit
                    amet nunc. Vivamus lacinia, nisi ac tincidunt commodo, purus
                    nisi condimentum urna, sit amet molestie odio dolor non lectus.
                    Cum sociis natoque penatibus et magnis dis parturient montes,
                    nascetur ridiculus mus. </p>
            </li>
            <li id="slide-three">
                <h2>Slide three</h2>
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Suspendisse adipiscing dui a nibh. Integer tristique lorem
                    vitae massa. Etiam dapibus, eros sit amet euismod semper,
                    felis erat congue lacus, sed aliquam metus libero sed elit. </p>
            </li>
        </ul>
    </div>
    <ul class="slides-nav">
        <li><a href="#slide-one">Slide one</a></li>
        <li><a href="#slide-two">Slide two</a></li>
        <li><a href="#slide-three">Slide three</a></li>
    </ul>
</div>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>

</body>
</html>

If you have short pages with no vertical scrollbar then it may be ok but I couldn’t live with that jump on longer pages.

5

Ugh!! Paul, I just had it working! :stuck_out_tongue:

Okay, so what do you propose? :-/

My objective in using a “slide show” is to be able to communicate messages to users and get some ideas in their heads. Seeing flashing slides increases the chance people will read short messages. It also makes the site slightly more interactive.

This is supposed to be on my home page, and it may have enough content to cause a vertical scroll like your example, so I can see your concern.

(BTW, dresden_phoenix, I feel embarrassed that I forgot what a “page anchor” does!) :blush:

If I made it so that each “slide” was different content/sub-page, then would the resolve the issue, Paul?

For what I want to do, I had a crude prototype working last night that looked pretty good.

Oh, and if I forgot, here is the tutorial I was working from… Build an Auto-Scrolling Slideshow That Works With and Without JavaScript | Nettuts+

So what should I do to improve this? :-/

Thanks,

Debbie

6

If you use it in the manner shown in the tutorial you linked to then you should be ok because JS is handling the slide show and the method you have mentioned is only for when JS is turned off (and then the jump is quite acceptable because it won’t affect that many users).

It’s only without javascript that the problem is evident assuming you implement it fully.

7

It’s only without javascript that the problem is evident assuming you implement it fully.[/QUOTE]

Some questions…

1.) What is causing the jump?

2.) Is there a way to eliminate the jump and still get the same end effect?

3.) Why is it that when I add your extra text to my code, I don’t see a jump with JavaScript turned on or off?

4.) Instead of using a page anchor - or whatever it is called - would it be better to insert a new sub-page every time the page rotates or the user clicks on a different tab?

As usual, I’d like to use the best method and coding practices possible in addition to just getting the end effect for which I’m looking!

Debbie

8

Some questions…

1.) What is causing the jump?
[/quote]

It’s the same as any “in page” link and when you jump to a specific part of the page the page has to scroll to that position otherwise you wouldn’t know where the destination was. When you have enough content to cause a vertical scrollbar then the document will try to scroll the element so that it is flush with the top of the browser (this assumes that there is still content below the fold otherwise the scroll will stop when the page has run out of content).

Just try out a few in-page links on a test page and you will see how it works.

In your example you had 5% padding on the body (not usually a good move) and therefore the jump was 5% up to the top of the window.

2.) Is there a way to eliminate the jump and still get the same end effect?

Only if the element is the first thing on the page and the page hasn’t scrolled and there is no padding or margin above it (including on the body).

3.) Why is it that when I add your extra text to my code, I don’t see a jump with JavaScript turned on or off?

Do you have content that is giving the browsers a window a vertical scrollbar? It jumps in all my browsers

4.) Instead of using a page anchor - or whatever it is called - would it be better to insert a new sub-page every time the page rotates or the user clicks on a different tab?

If you are presenting a new page of content then you should be using a new page. You should only swap content for use in image slideshows or small snippets of information (at most a paragraph or two). If it’s a whole page of content then you should really call up a new page.

Otherwise you end up with all your content in one page and that effectively gives you a one page site and forces users to load your whole site in one go.

As I said it’s not really an issue if you have the JS in place because the fragment identifiers are only a fallback and only get executed if the JS routine is not present. The bigger issue may be that you are trying to use this method to display all the content in your site which would be bad.

9

When the JavaScript is hooked up, the page doesn’t shift.

When the JavaScript is disabled, I do see the page shift.

Why the difference?

In your example you had 5% padding on the body (not usually a good move) and therefore the jump was 5% up to the top of the window.

Not my code. From the tutorial! :slight_smile:

Rayzur found a decent free web-host for me, so I will try this out sometimes to make it easier for you guys to see what I see.

Here is my URL…

Debbie’s Test Space

If you are presenting a new page of content then you should be using a new page. You should only swap content for use in image slideshows or small snippets of information (at most a paragraph or two). If it’s a whole page of content then you should really call up a new page.

Otherwise you end up with all your content in one page and that effectively gives you a one page site and forces users to load your whole site in one go.

No, I’m not doing that. I just want to have images and small snippets of text creating a slide-show. Check out my URL and you’ll see what I mean.

So back to one of my earlier questions…

Is there a better way to do this than how the tutorial author set things up?

Even though my slides will likely be all-text, I’ll likely just do screen-shots of the text because it seems easier to work with images.

I really would like to get rid of that “page job”, because if a user has JavaScript off, then the page will jog and my page header will disappear and that is probably bad.

Thanks,

Debbie

10

Okay, I created two samples on my test web page.

One with Text only.

One with Pictures only.

Unfortunately, if the user disables JavaScript, it seems to completely break my page - especially when picture are involved!!

This is really, really disheartening! :frowning: :frowning:

I spent a lot of time this weekend creating what I thought was a really nice solution to my problem, and now it seems like it was all for naught?!

In my mind, this shouldn’t be that hard to do…

Some help is need.

Thanks,

Debbie

11

I explained that in my post above I believe :slight_smile:

When javascript is disabled the browser follows the link (e.g.<a href=“#gohere”…) and you get the jump as the document scrolls to that destination.

When javascript is enabled an event handler is attached to the link and stops it from carrying out its designated action but instead swaps the content with javascript rather than navigating to an actual destination. The link is never actioned when javascript is available.

There is no way to stop the jump with this method but it’s a very small issue as the page will still work and be accessible. Most users will have javascript enabled and for those that don’t then they get a small jump but still have a 100% usable page.

The only other alternative is as your other live example shows and all slides become visible in the page by default. This is the way that most JS hide and shows work.

When you think about it what else can they do. If content is hidden by javascript then the only option is to make it visible when javascript is disabled.

That’s the choice you make when you decide on dynamic actions like this.

There is one other alternative that I forgot to mention and that is that you set up duplicate pages with the tabs already open and when javascript is disabled the link then takes you to another page instead where the tab is already open (just like a normal page in fact). The drawback is that you have to maintain extra pages for all the slides that you have.

There are actually some css only hide and shows but they are not usually persistent on only work on hover or on focus (have a look at cssplay for loads of examples).

As an aside it doesn’t look like you have allocated enough height in your second demo for the slides to show.

As a rule of thumb you don’t want to use images for text as browser text is always best (unless it’s just some graphical caption and not really content).

12

Since I don’t know JavaScript, I was uncertain how things were working.

When javascript is disabled the browser follows the link (e.g.<a href=“#gohere”…) and you get the jump as the document scrolls to that destination.

When javascript is enabled an event handler is attached to the link and stops it from carrying out its designated action but instead swaps the content with javascript rather than navigating to an actual destination. The link is never actioned when javascript is available.

Okay, that is a better explanation.

There is no way to stop the jump with this method but it’s a very small issue as the page will still work and be accessible.

Well, if you don’t feel it is a big issue, then maybe I’ll just chill out and hope any visitors with JS turned off feel the same way!

Most users will have javascript enabled and for those that don’t then they get a small jump but still have a 100% usable page.

Okay.

The only other alternative is as your other live example shows and all slides become visible in the page by default. This is the way that most JS hide and shows work.

When you think about it what else can they do. If content is hidden by javascript then the only option is to make it visible when javascript is disabled.

Well, true, but see my comments below…

That’s the choice you make when you decide on dynamic actions like this.

There is one other alternative that I forgot to mention and that is that you set up duplicate pages with the tabs already open and when javascript is disabled the link then takes you to another page instead where the tab is already open (just like a normal page in fact). The drawback is that you have to maintain extra pages for all the slides that you have.

That is what I was getting at before. (Maybe this is the wrong forum to ask for help with this, but there ought to be a way to dynamically insert the “slide” that applies.)

I would think with PHP, you could just “include” the HTML that you need. And even with HTML, can’t you just have a “sub-page” appear when you click on a certain tab instead of having all of the tabs hard-coded into the one page and having to do all this silly hide/un-hide stuff?

In fact, I thought there might be a way to do this using Floats and Positioned Elements (e.g. Relative and Absolute) similar to how Rayzur helped me create both a Drop-Down and Drop-Line submenu. Same concept, right?!

There are actually some css only hide and shows but they are not usually persistent on only work on hover or on focus (have a look at cssplay for loads of examples).

[B]If you use CSS to show/hide the relevant slide when JavaScript is off, then “hover” or “click” would be okay, right?

And if that CSS solutions could then be incorporated with JavaScript, then when JavaScript was on, you would get the automated “slide=show”, right?

That is what I was originally envisioning…
[/B]

As an aside it doesn’t look like you have allocated enough height in your second demo for the slides to show.

What do you mean?

They look okay in FireFox. Did you have an issue on your computer?

As a rule of thumb you don’t want to use images for text as browser text is always best (unless it’s just some graphical caption and not really content).

True. I just figured it would be easier to shuffle four images than to have to do all the fancy coding to get the dynamic text working properly.

The other benefit of images is that you get something that is “pixel perfect”.

Of course the down-side is that if the images are slow to load or don’t load, then you have issues!!

Thanks,

Debbie

13

Yes you could do it with PHP but you’d have to have some conditional PHP that would load the same page and it would then insert the correct content in place for the link that you clicked. The downside is that you are basically reloading the page so you may just have well gone to a new page.

You can do similar using ajax (javacsript) and load some html dynamically into the page but needs javascript to work . (I believe some of the jquery tabs have options to do this.) The downside of ajax is that you still need to cater for when js is switched off as before.

And even with HTML, can’t you just have a “sub-page” appear when you click on a certain tab instead of having all of the tabs hard-coded into the one page and having to do all this silly hide/un-hide stuff?

Html is not dynamic - it is static - it doesn’t change. To create a change on a page requires scripting of some sort.

The object element was supposed to allow external content to be loaded but proves rather awkward in practice and not many use it for html.

In fact, I thought there might be a way to do this using Floats and Positioned Elements (e.g. Relative and Absolute) similar to how Rayzur helped me create both a Drop-Down and Drop-Line submenu. Same concept, right?!

You can create a hide and show that works on hover just the same as a normal dropdown menu. However, you can’t really make it work properly on clicking (without javascript) which is what you want for reading text as its awkward to hover an element and read a long passage at the same time.

As I said before you can make it stay open for some browsers using :focus but won’t be persistent and will disappear if something else on the page is clicked.

[B]If you use CSS to show/hide the relevant slide when JavaScript is off, then “hover” or “click” would be okay, right?

And if that CSS solutions could then be incorporated with JavaScript, then when JavaScript was on, you would get the automated “slide=show”, right?

That is what I was originally envisioning…
[/B]

Yes you could instigate a hover type menu and then enhance it for clicking with javascript. However, It would probably have to be custom coded as hover menus usually only work by revealing child elements whereas the javascript versions are usually using unrelated adjacent elements instead.

For all the effort that that would involve you are probably better off just using the first version that you have as it works on all levels except for the jump when js is turned off.

If you want custom code then you’d need to try posting in the JS forum but I’m not sure that someone will write the whole thing for you in there but probably point you in the right direction instead.

What do you mean?

They look okay in FireFox. Did you have an issue on your computer?

Yes they were only displaying at the same height that your text versions was. However they seem to be working now which is a little strange.

14

Well, if you think it looks okay and is usable, then I’ll just leave it for now.

(Like most things I work on, I need to set this aside, sleep on it for a few days, and then come back to it and will probably have a different perspective!)

Yes they were only displaying at the same height that your text versions was. However they seem to be working now which is a little strange.

Hmmm…

Well, let me get an example closer to what a final version should look like, and post it online, and maybe you can let me know if it is behavin’ or not!

BTW, for someone like me who is “computer disabled” and only has one plat form (OS X) and browser (FF) to test on, is there a way to test other platforms and browsers (i.e. IE)?

Thanks as always, Paul!!

Debbie

15

There are some free screen capture sites but the best way is to have the browsers on your own computer. All browsers apart from IE can be downloaded easily so there is no reason you can’t download chrome and safari etc for your mac.

To test for IE PC on a mac you’d need to set up some kind of virtual environment. I have parallels on my mac running Windows 7 which works well (but probably cost more than buying a cheap secondhand pc). I believe there are some free options but you’d still need a copy of windows to do it.

Here are a few links that may be of use.

Browser Testing - CSS Discuss
7 Fresh and Simple Ways to Test Cross-Browser Compatibility | FreelanceFolder