Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Location
    Pittsburgh
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript help?

    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:

    www.ringcentral.com
    (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!!!
    Last edited by WA; 07-21-2009 at 07:14 PM.

  • #2
    New Coder
    Join Date
    Jun 2009
    Posts
    35
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I think it is working correclty. what's your problem can't understand.
    Live chat software - chat with your web site visitors in real time.
    Internet web directory - list of top100 sites in diffrent category

  • #3
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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:
    Code:
    <html>
    <head>
    <title>hoverslides</title>
    <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;
    	}
    </style>
    
    <script type="text/javascript">
    	$(document).ready(function(){
    		$('#buttons div').hover(function(event) {
    			var buttonNumber = parseInt(event.target.id.match(/\d/)[0]);
    			$('#container').animate({
    				left: - (buttonNumber * 100)
    			});
    		});
    	});
    </script>
    
    </head>
    
    <body>
    
    <div id="window">
    	<div id="container">
    		<div>first content</div>
    		<div>second content</div>
    		<div>third content</div>
    	</div>
    </div>
    
    <div id="buttons">
    	<div id="button0">button 0</div>
    	<div id="button1">button 1</div>
    	<div id="button2">button 2</div>
    </div>
    
    </body>
    
    </html>
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •