Putting in place jQuery Effect

JavaScript
1

I’m hoping someone can help me as I’m still learning programming language while putting it into practice. The instructions for this jQuery as are listed:

How to use?

Like every jquery plugin, just chain it:


$("#flipbox").flip({
	direction:'tb'
})

How to change content?

Add content params in this way:

$("#flipbox").flip({
	direction:'tb',
	content:'this is my new content'
})

I inserted this into the head of my page:

<script type="text/javascript">
$("#flipbox").flip({
	direction:'tb'
})
</script>

I want to apply this jQuery to a <div> I don’t know how this is done.

2

Okay, so go back to the previous script code that just showed/hid the content


$('#content').children().hide();
$(this.hash).show();

And when you have that working, we’ll move on to getting the silhouette flipping, at which point you should be okay to transition to flipping the content as well.

3

I want to apply this jQuery to a <div> I don’t know how this is done.

OK, firstly, you also need to link to the jquery library. E.g.:

[COLOR="Red"]<script type="text/javascript" src="jquery.js"></script>[/COLOR]

<script type="text/javascript">
$(document).ready(function() {
    $("#flipbox").flip({
        direction:'tb'
    });
});
</script>

So, grab the jquery library code from the jquery site, place it in a file called jquery.js (or whatever you like, as long as it ends with .js) and then link to it in the head of your document.

Then you need to add an ID of flipbox to the div in your html code so that jquery knows which div to target. E.g.

<div id="flipbox">

</div>

Does that make sense?

4

First part makes sense, can I place flipbox within a already created div or must I nest it within a flipbox div ?

5

Just add id=“flipbox” to the already created div. (If the div already has a different id, then just change the id name in the jquery code to match it.)

6

Ohhh I see, haha :slight_smile:

How would you link an anchor to trigger it ?

7

Have a look at the source code on the Flipbox page:

$(function(){
    $("#flippad a:not(.revert)").bind("click",function(){
	var $this = $(this);
	$("#flipbox").flip({
	direction: $this.attr("rel"),
	color: $this.attr("rev"),
	content: $this.attr("title"),//(new Date()).getTime(),
		onBefore: function(){$(".revert").show()}
		})
		return false;
	});
				
	$(".revert").bind("click",function(){
		$("#flipbox").revertFlip();
		return false;
		});		
});

… and this in the HTML (under the #flipbox div):

<div id="flippad">
  <a href="#" class="left" rel="rl" rev="#39AB3E" title="Change content as <em>you</em> like!">left</a>
  <a href="#" class="top" rel="bt" rev="#B0EB17" title="Ohhh yeah!">top</a>
  <a href="#" class="bottom" rel="tb" rev="#82BD2E" title="Hey oh let's go!">bottom</a>
  <a href="#" class="right" rel="lr" rev="#C8D97E" title="Waiting for css3...">right</a>
  <a href="#" class="revert">revert!</a>
</div>
8

What I don’t understand, is the code full extract code ? Where does “rev=”#39AB3E fit in ?

9

That’s supposed to be a reverse reference, but they look more like RGB color values to me.

Oh dear gods, it seems that they are using it as a generic data store to hold the presentational background color value. Despite being valid in the strictest terms, it makes my semantic bones go all wonky.

10

It’s just coloring the div, by the look of it.

You could just cut that out. But really, it’s time for an actual example of what you are trying to do with this script, and it has lots of uses and variations.

11

I’m stuck on how to link the anchors to do the transition

12

OK, as I said, it’s time for specifics. What are you trying to achieve? There’s no indication on that page of what you are attempting. The flipbox code we’ve been discussing doesn’t even appear on that page. :confused:

13

The Content div should be the div affected by jQuery of course linked with the anchors at the top of the page.

14

Affected how, though? What’s supposed to happen when you click the links? Do you want the whole content section to flip?

You haven’t added in all of the jquery code we discussed above, just the library itself.

15

Yes, the whole Content area to flip. Updated !

16

I’m unable to figure out how to link an anchor to cause the <div> to have the transition applied, do I have to add a class ?

17 
$(document).ready(function(){
$("#nav a").click(function(){
      $("#content").revertflip({direction:'tb'});
      return false;
    });
});

What wrong with this script that it won’t work. I have the selector right, I hope !!!

18

Have you checked the casing of revertflip?

Which is it supposed to be?

[list][]revertflip
[]revertFlip
[]Revertflip
[]RevertFlip
[]ReVeRtFlIp
[]REVERTFLIP[/list]

19

It’s .revertflip

I want to get it to work, today !

20

That’s odd, the code examples on the Flip! page shows something else instead.