The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

jquery hover fade in/out

View previous topic View next topic Go down

jquery hover fade in/out

Post by crysis992 on May 13th 2010, 1:50 pm

Hello,

i asked this question a few weeks ago in the german support forum, but it seems that none there are able to help me.
Now I ask it here too.
My problem is, i tried to attach a jquery script, problem im understand not much about jquery i found this script via google.

Okay, i want a hover effect on my avatars. I know there is a way to do it via CSS, but then there is no fade in and fade out. So i want it to do via jquery.
I attached this script to my templates:
http://www.webarts.bplaced.net/Javascripts/Test.js

And added a div ID to this in the viewtopic_body: "{postrow.displayed.POSTER_AVATAR}" div ID ="test"

Now the effect is working, but only at the first post, all other posts dont have this effect, and i cant find the problem.
Here is a example on my test forum:
http://crysis992.forumieren.de/testforum-f3/attachment-box-test-t6.htm#14

,
crysis992

crysis992
Forumember

Posts : 67
Reputation : 0
Language : German

Back to top Go down

Re: jquery hover fade in/out

Post by crysis992 on May 14th 2010, 7:07 pm

*bump*

crysis992
Forumember

Posts : 67
Reputation : 0
Language : German

Back to top Go down

Re: jquery hover fade in/out

Post by Reave on May 15th 2010, 2:14 am

Here is a simple solution for you.

Add these somewhere in your template

Code:
<script type="text/javascript" src="http://www.hv-designs.co.uk/tutorials/jquery_fade2/js/jquery.js"></script>
<script type="text/javascript" src="http://www.hv-designs.co.uk/tutorials/jquery_fade2/js/custom.js"></script>

Lastly, POSTER_AVATAR should look like this.

Code:
<div class="latest_img">{postrow.displayed.POSTER_AVATAR}</div>

Enjoy!

Oh yah, I recommend hosting the scripts yourself. This way you can edit your scripts and they wont go down.

Reave
Forumember

Male Posts : 46
Reputation : 10
Language : English

http://ectos.darkbb.com/

Back to top Go down

Re: jquery hover fade in/out

Post by crysis992 on May 15th 2010, 4:15 am

okay i added it, but now there is no effect at all :o

crysis992
Forumember

Posts : 67
Reputation : 0
Language : German

Back to top Go down

Re: jquery hover fade in/out

Post by iJerick on May 15th 2010, 4:34 am

Cause you need to add it on the Head Part..

iJerick
Forumember

Male Posts : 98
Reputation : 1
Language : HTML, JAVASCRIPT, CSS and ENGLISH
Location : Philippines

Back to top Go down

Re: jquery hover fade in/out

Post by crysis992 on May 16th 2010, 7:07 pm

eh yes i know it, i added the scripts to overallheader_new
in the <head> <./head> part.
And the div class in the viewtopic template.
But it wont show up.

crysis992
Forumember

Posts : 67
Reputation : 0
Language : German

Back to top Go down

Re: jquery hover fade in/out

Post by SoulART on December 14th 2010, 10:41 pm

this is real good thanks guys was looking for this far so long ^_^

SoulART
Forumember

Posts : 82
Reputation : 7
Language : English

http://www.witalent.net

Back to top Go down

Re: jquery hover fade in/out

Post by Guest on December 15th 2010, 3:03 pm

Why not use only CSS too?

Guest
Guest


Back to top Go down

Re: jquery hover fade in/out

Post by crysis992 on December 15th 2010, 3:41 pm

@Gangstar15 wrote:Why not use only CSS too?

Cause with CSS you have a direct change from opacity to visible.
With the jquery it take 0,5 seconds for the change. It looks better than this direct change.

With CSS only=Ugly
with jquery= awesome

very simple :p

Check this:
http://www.hv-designs.co.uk/tutorials/jquery/all.html

Hover you mouse over A DIV and you see what i mean. It just look better =)

crysis992
Forumember

Posts : 67
Reputation : 0
Language : German

Back to top Go down

Re: jquery hover fade in/out

Post by Guest on December 15th 2010, 3:48 pm

Haah CSS does that too Razz use google chrome or firefox 4..
here is a test..
http://world-dezign.forumotion.com/santa-h48.htm

Guest
Guest


Back to top Go down

Re: jquery hover fade in/out

Post by Japorized on December 16th 2010, 3:25 pm

I have found a solution with CSS3. The effect you'd get would be like jQuery.
Code:
a {
-webkit-transition: color .5s ease-in-out;
-moz-transition: color .5s ease-in-out;
-o-transition: color .5s ease-in-out;
transition: color .5s ease-in-out;
}

Never underestimate CSS. And if you have lot's of jQuery in your forum, it would be really laggy.

Japorized
Forumember

Male Posts : 310
Reputation : 3
Language : English
Location : Malaysia

http://infinityhub.ace.st

Back to top Go down

Re: jquery hover fade in/out

Post by Saxaca on December 16th 2010, 3:34 pm

If you feel like using :hover psuedos, I suggest you use something more in this style:

Code:
#saxaca {
  -moz-transition-duration: 2s;
  -webkit-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
  opacity: 0.5;
  filter: alpha(opacity=50);
  }

#saxaca:hover {
  opacity: 1.0;
  filter: alpha(opacity=100);
  }

There, the transition means that it'll use that duration to "sweep" over to :hover psuedo Razz

Saxaca
Forumember

Male Posts : 539
Reputation : 26
Language : Markup.

Back to top Go down

Re: jquery hover fade in/out

Post by Guest on December 16th 2010, 3:42 pm

Saxy.. that's what i've added in my test site Razz

Guest
Guest


Back to top Go down

Re: jquery hover fade in/out

Post by Japorized on December 16th 2010, 4:45 pm

Whoops, didn't mention about the :hover state... Razz

Japorized
Forumember

Male Posts : 310
Reputation : 3
Language : English
Location : Malaysia

http://infinityhub.ace.st

Back to top Go down

Re: jquery hover fade in/out

Post by crysis992 on December 16th 2010, 6:17 pm

Yes sure, but the most users use Firefox 3.x
or other browsers that dont support this.
So the perfect solution would be jquery to make it visible for the most users.

Why should i do it via CSS if only me and maybe 5% of my members can see it?

crysis992
Forumember

Posts : 67
Reputation : 0
Language : German

Back to top Go down

Re: jquery hover fade in/out

Post by Guest on December 16th 2010, 6:20 pm

You are right.. but in the future everyone gonna use the new browsers Razz
well is this solved now?

Guest
Guest


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum