JQuery vs CSS Float

Get Started
1

I’m rebuilding my site and came across this: Suprb, Andreas Pihlström which I think uses Jquery.
I’m not looking for the functionality of the site as a whole but there’s one thing I’d like to emulate.
Specifically: The way the boxes re-arrange themselves depending on the browser window size - I’m not bothered about what happens onClick as I’d take the viewer to a separate html page.
Do I do this using CSS Float or do i need to employ Jquery to do this? (I hav no knowledge of Jquery). The site i’ve sent you to is using Wordpress which I’m not interested in - I want to do this XHTML and CSS only - is it possible?
I’m just starting to move from tables to DIVS so perhaps I’m taking on too much but I’d like to try this.

Thanks - Antony UK

2

Hi Antony72. Welcome to SitePoint. :slight_smile:

Having the boxes rearrange like that is easy with CSS, though in the example you posted, that functionality is enhanced by JavaScript to make it look a bit fancier. (You get the swishing transitions because of JS. With CSS, it would just be an instant drop, no frills.)

Paste the code below into a .html file and open it in your browser, widening and narrowing the viewport.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
	
<style type="text/css" media="all">
div {
	margin: 0 20px 20px 0;
	width: 300px; height: 300px;
	float: left;
}
.a {background: red;}
.b {background: blue;}
.c {background: green;}
.d {background: orange;}
.e {background: purple;}
.f {background: brown;}
</style>
</head>

<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>

</body>
</html>
3

Hi Ralph

Thanks for taking the time to help me here - much appreciated.
I see how this works now that you’ve shown me :slight_smile:
Strictly speaking should I be defining this bit:

div {
margin: 0 20px 20px 0;
width: 300px; height: 300px;
float: left;
}
.a {background: red;}
.b {background: blue;}
.c {background: green;}
.d {background: orange;}
.e {background: purple;}
.f {background: brown;}

into a separate style sheet and linking it to the document?
And I’m guessing that image links for these boxes (block elements?) and onClick commands go in these lines in the HTML:

div class=“a”></div>
<div class=“b”></div>
<div class=“c”></div>
<div class=“d”></div>
<div class=“e”></div>
<div class=“f”></div>

Also if I did want to try and get the javascript transition effect am I looking at a something complicated that may not work cross-browser or is it a well-tested and bulletproof method?

Is my ignorance showing yet?

Antony

4

Is my ignorance showing yet?

Yes. You appear to know about as much jQuery as I do. :smiley:

There are lots of scripts on that page (far too many, really) and I con’t tell which is creating that effect.

However, if you turn off JavaScript in your browser, next to nothing appears on that site, meaning that it’s far too dependent on JS—which should be used to enhance a site only.

So I’d steer clear of it if I were you. It’s bad news.

Strictly speaking should I be defining this bit … into a separate style sheet and linking it to the document?

Yes. The on-page CSS was just to make a demo easier. Whenever you have styles that apply to more than one page, an external style sheet is much more efficient.

And I’m guessing that image links for these boxes (block elements?) and onClick commands go in these lines in the HTML:

Yes, that’s were they go. The boxes (<div> elements, which are block level by default) are where the images and links would go. Although onClick stuff (JS) could lead you astray if you are not careful, as I said. What would you want onClick for?

Also if I did want to try and get the javascript transition effect am I looking at a something complicated that may not work cross-browser or is it a well-tested and bulletproof method?

I don’t know about the method itself, but one of the advantages of jQuery is that it is designed to work nicely in all the main browsers. It has in-built functions to smooth over the annoying differences between browsers. But that’s jQeury itself. I can’t speak for any plugins that others have written, though you’d think they would have tested them.

The code I posted was a demo only, and you would probably want something a bit more sophisticated for your actual site.

5

Thanks Ralph.
“What would you want onClick for?” - the site i’m building is a portfolio site for my work and I’d want users to click a project (from the page we’ve been discussing) and go to a drilldown which’ll have more pics and project description etc. I’m going to take your advice on the JS and keep it simple - I know some of my users will be using IE and wouldn’t want to exclude them.
As a graphic designer going from tables to DIVs is such a leap for me but I’m going to study and learn it.

Thanks for your help and support mate - really appreciated. :slight_smile:

Antony

6

Just be aware that you don’t need JavaScript for that, as plain old HTML can do that too, so I’d advise steering away from JS unless you just want to enhance the user experience. (In other words, make sure the site functionality works without JS.) Whenever you see something like onClick in the actual HTML, you can be pretty sure that something has gone wrong, as JavaScript is best kept in the head of the document.

Good luck with your project and learning. There is a lot of help available around here any time you have a question. No question is too simple. :slight_smile: