The simplest might be:
var showOne = function( elem ) {
$(elem).show();
}
On Mon, Jan 25, 2010 at 11:19 AM, Eugene Hourany <ehourany@gmail.com> wrote:
Here's what my test file looks like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="js/jquery1.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var showOne = "<p>test</p>";
$('#one').data('animateShow',showOne);
$('#two').data('animateShow',showTwo);
$('#three').data('animateShow',showThree);
var activeContent = 'one';alert(animation);
$('a.leftMenu').click(function(ev){
var targetId = $(ev.target).attr('target');
if ( targetId != activeContent ) {
var targetDiv = $('#'+targetId)[0];
if ( targetDiv != null ) {
$('#' + activeContent ).fadeOut('fast');
var animation = $(targetDiv).data('animateShow');});
if ( animation ) animation( targetDiv )
else $(targetDiv).fadeIn('fast');
activeContent = targetId;
}
}
return false;
});
</script>
<style type="text/css">
a.leftMenu {
text-decoration: none;
color: #666;
cursor: pointer;
}
a.leftMenu:hover {
text-decoration: none;
color: #dad;
cursor: pointer;
}
div.content {
border: 1px solid #dad;
}
div.hidden {
visibility: hidden;
}
</style>
</head>
<body></body>
<a class="leftMenu" target="one">One</a>
<a class="leftMenu" target="two">Two</a>
<a class="leftMenu" target="three">Three</a>
<div class="content hidden" id="one">One's content</div>
<div class="content hidden" id="two">Two's content</div>
<div class="content hidden" id="three">Three's content</div>
</html>On Mon, Jan 25, 2010 at 10:34 AM, Eugene Hourany <ehourany@gmail.com> wrote:
Forgive me, but I'm still new to jQuery.
I don't understand the data function. jQuery says that it accepts a key-value pair, but what you have with $('#one').data('animateShow', showOne) is what I'm guessing a call to a function, and an object that holds the contents of One's div. Is that right? In that case, does this code work, or do I need to modify it to work?
Also, where do I put this code? Does it go in its function, or under the $(document).ready function? Sorry for being so confused. I'm new to js programming in general.
Thanks!
EugeneOn Fri, Jan 22, 2010 at 4:45 PM, John Arrowwood <jarrowwx@gmail.com> wrote:You could probably come up with a dozen ways of doing it. You could have different divs all loaded but hidden, then hide and show them as needed, which would be a very different animation than you have now. Or you could use ajax to load the different DIV contents (which might be nice for site organization) and then either load them into the hidden divs or just store them in variables for swapping in and out.
If you need fancy animations, you are going to want to do something like hide (or fade out) the old div, and then have some custom animation that causes the new div to appear in the way you want it to appear.
If you are aiming for search engine optimization, you probably don't want to rely on AJAX to load the content. You probably want to just have three (or more) divs that start hidden. Each has a unique ID. You could even store a reference to a unique 'animateShow' function attached to each div.
<a class="leftMenu" target="one">One</a>
<a class="leftMenu" target="two">Two</a>
<a class="leftMenu" target="three">Three</a>
...
<div class="content hidden" id="one">One's content</div>
<div class="content hidden" id="two">Two's content</div>
<div class="content hidden" id="three">Three's content</div>
Assuming each div needs a custom 'show' animation, you could do this:
$('#one').data('animateShow',showOne);
$('#two').data('animateShow',showTwo);
$('#three').data('animateShow',showThree);
Then to hook it all up:
var activeContent = 'one';
$('a.leftMenu').click(function(ev){
var targetId = $(ev.target).attr('target');
if ( targetId != activeContent ) {
var targetDiv = $('#'+targetId)[0];
if ( targetDiv != null ) {
$('#' + activeContent ).fadeOut('fast');
var animation = $(targetDiv).data('animateShow');
if ( animation ) animation( targetDiv )
else $(targetDiv).fadeIn('fast');
activeContent = targetId;
}
}
return false;
});
Hope that gets you down the road towards where you want to be.On Fri, Jan 22, 2010 at 3:31 PM, Eugene Hourany <ehourany@gmail.com> wrote:
Hi everyone,
I'm using jQuery to power all the nice animation effects and such. But I'm also using it to make my DOM life easier too.
With that, here's what I want to do:
When you click on a link (in this case, an <a>), the <div> to its right is replaced with new content. I tried to do this earlier with an <iframe> but I think it's overkill for what I want.
I'm working on this page to get a "non-flash" version running because of SEO compliance: http://www.theportalgrp.com. So, for example, clicking on "services" will bring up the services div on the right. Would using jQuery objects that contain the <div>s be better, and then do a content replace?
And I don't know if .toggle() is better, or .click() or which function to do what I want.
Any help would be greatly appreciated.
Thanks!
Eugene
--
John Arrowwood
John (at) Irie (dash) Inc (dot) com
John (at) Arrowwood Photography (dot) com
John (at) Hanlons Razor (dot) com
--
http://www.irie-inc.com/
http://arrowwood.blogspot.com/
--
John Arrowwood
John (at) Irie (dash) Inc (dot) com
John (at) Arrowwood Photography (dot) com
John (at) Hanlons Razor (dot) com
--
http://www.irie-inc.com/
http://arrowwood.blogspot.com/
No comments:
Post a Comment