Resolved How to slide content left/right?

MrTIMarshall · 08-04-2012, 02:26 AM

Hello.

I've been looking at this website, however, along the way somewhere, I've missed something...

Can someone please help?

What I did: - If your to test, edit the JQuery link

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
$(document).ready(function() {
  $('#slideleft button').click(function() {
    var $lefty = $(this).next();
    $lefty.animate({
      left: parseInt($lefty.css('left'),10) == 0 ?
        -$lefty.outerWidth() :
         0
    });
  });
});
</script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<style>
.slide {
position: relative;
overflow: hidden;
height: 120px;
width: 350px;
margin: 1em 0;
background-color: #FFC;
border: 1px solid #999;
}
.slide .inner {
position: absolute;
left: 0;
bottom: 0;
width: 338px;
height: 36px;
padding: 6px;
background-color: #4C5;
color: #333;
}
</style>
</head>

<body>
<div id="slideleft" class="slide">
  <button>slide it</button>
  <div class="inner" style="left: 0px; ">Animate this element's left style property</div>
</div>
</body>
</html>

I'd like this not to be a button either, instead an image. This is going to be a vertical rectangle at the side, you click the image and it expands left so if your able to make it so this starts off hidden, please implement this.

Best Regards,
Tim

VIPStephan · 08-04-2012, 10:37 AM

I suppose you’re wondering that it’s not working at all? Don’t be afraid to look at the error console (most browsers have one built in) and it might tell you “$ is undefined” or something like that, and this is because you’re trying to execute the jQuery function before the jQuery framework is even loaded, hence, the browser doesn’t even know about jQuery yet. Move the jQuery script reference up, it should be the first script in the document.

MrTIMarshall · 08-04-2012, 07:55 PM

Wow, I didn't even think of this logic!

As for the debugger, I know it will help, but I hardly know anything at this moment in time!

Thank you very much!

MrTIMarshall · 08-04-2012, 08:16 PM

So how can I make this div be hidden at the start?

I tried changing the visibility but that broke it :P

AndrewGSW · 08-04-2012, 09:59 PM

Amend the css to:

Code:

.slide .inner {
position: absolute;
left: -350px;
bottom: 0;
width: 338px;
height: 36px;
padding: 6px;
background-color: #4C5;
color: #333;
}

so that it starts off screen, and remove 'style="left: 0px; "' from the div tag (this over-writes the css rule).

MrTIMarshall · 08-05-2012, 02:36 AM

Quote:

Originally Posted by AndrewGSW

Amend the css to:

Code:

.slide .inner {
position: absolute;
left: -350px;
bottom: 0;
width: 338px;
height: 36px;
padding: 6px;
background-color: #4C5;
color: #333;
}

so that it starts off screen, and remove 'style="left: 0px; "' from the div tag (this over-writes the css rule).

I edited the file, but nothing happened.

I've uploaded it here

Quote:

And how do I change the direction to opens from right to left?

I tried editing the obvious with no luck...

Ignore this bit, I seem to have missed something and have to it working

MrTIMarshall · 08-05-2012, 04:13 AM

Ah! Been tinkering around with it and got it all working!