View Full Version : Javascript help?

07-19-2009, 07:40 PM
Hello everyone,
I am new here.
I'm a professional Graphic Designer, and Model.

I've recently started to also design websites.
I've become quite handy at the html part of it.
But I'm stumped on this javascript feature that I have been ordered to do.
It's basically the same thing seen on this site:

(scroll over the offer boxes.)

I really do not know what to do,
I have spent days and days googling and trying to find some kind of help,
and I've found nothing.

If anyone has any idea on how to do this,
please let me know,
it would be greatly appreciated!!!

07-21-2009, 07:12 AM
I think it is working correclty. what's your problem can't understand.

07-22-2009, 03:07 AM
mioot: It's working correctly (though for my taste it could be more responsive) because it's not the OP's site. It's what it should look like in the end.

Tink: Googling for this concrete functionality probably won't make you happy; you will probably end up with some script you will have to adapt to your needs, which will be more of a pain than writing it yourself.

Now, I understand you don't feel all that comfortable with Javascript, but, if you don't already have please try to learn the basics of the language -- otherwise the next few things I tell you won't do you any good.

If you already know your basics, what will get you started on your problem very quickly is jQuery. Please have a look at some tutorials here: http://docs.jquery.com/Tutorials

When you had a read through the basic stuff there, this should get you started:

The HTML setup is the following: You have a wide <div> there containing all the contents right next to each other (I suppose you are feeling comfortable enough with CSS to accomplish that). That div resides within a narrower one, so only the first part of the contents is showing. And you have a few <div>s acting as buttons.

What you want to do now, is add an event listener to the buttons, that checks if the user hovers over them, and if so, move that wide div to another position, so another part of its contents is showing through the "window" created by the outmost container.

Here is a quick working example:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
#window {
position: relative;
width: 100px;
height: 30px;
border: 1px solid;
overflow: hidden;
#container {
position: absolute;
width: 500px;
#container div {
float: left;
width: 100px;
border: 1px solid;

<script type="text/javascript">
$('#buttons div').hover(function(event) {
var buttonNumber = parseInt(event.target.id.match(/\d/)[0]);
left: - (buttonNumber * 100)



<div id="window">
<div id="container">
<div>first content</div>
<div>second content</div>
<div>third content</div>

<div id="buttons">
<div id="button0">button 0</div>
<div id="button1">button 1</div>
<div id="button2">button 2</div>



As you can see, with the magic of jQuery about five lines of code suffice to make it happen.

Please don't just take that example an run though, use it to learn!