Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#13 2009-01-20 00:26:31
- jshan
- Member
- Registered: 2008-01-09
- Posts: 67
Re: JavaScript or CSS to achieve dynamic hover-over effect?
masa wrote:
Also make sure to include the css and jquery as in the sample page. You should then be able to customise the look to your liking.
Bear with me the following rookie question:
I was trying to replicate the jquery effect — exactly as Timothy demoed — in a testing html page (nothing to do with TXP yet). I used the JQuery code along with the CSS from the demo site, and swapped in my own images. But the effect failed in that the images were statically displayed on top of the sample text.
I guess the problem might be in the <head> where on Timothy’s site it was declared:
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>I downloaded from JQuery site the latest “jquery-1.3.min.js” and put it in the same folder as the testing html page. But the effect is still not successful.
Did I miss something? Thanks for help!
Offline
#14 2009-01-20 00:28:15
- jshan
- Member
- Registered: 2008-01-09
- Posts: 67
Re: JavaScript or CSS to achieve dynamic hover-over effect?
joebaich wrote:
This article and the other hide show/toggle articles in the Learning jQuery series might also get you on the right track in a more general way.
Yeah… I’m thinking to start picking on the trendy JQuery…
Offline
#15 2009-01-20 07:27:13
- els
- Moderator
- From: The Netherlands
- Registered: 2004-06-06
- Posts: 7,458
Re: JavaScript or CSS to achieve dynamic hover-over effect?
jshan wrote:
I downloaded from JQuery site the latest “jquery-1.3.min.js” and put it in the same folder as the testing html page. But the effect is still not successful.
jQuery is already included in Textpattern. So you can use this:
<script type="text/javascript" src="/textpattern/jquery.js"></script>Offline
#16 2009-01-20 17:46:22
- jshan
- Member
- Registered: 2008-01-09
- Posts: 67
Re: JavaScript or CSS to achieve dynamic hover-over effect?
Thanks Els! It works now. I’m still using jquery1.3. (Embarrassing enough to say that I forgot to change my “stringent” browser security setting yesterday… duh… )
Experiment resumes…
Offline
Re: JavaScript or CSS to achieve dynamic hover-over effect?
If the box background is just a single colour, why don’t you just use CSS and give it the same colour. On :hover you change it for something else. (like black, white) As long as there is no image in the box that should work. The additional benefit is that the content is already on the page—just in case someone has javascript switched off.
If you want to use an image as the background of the box, I would still use CSS to properly position the text. Then you can use jquery to hide it( #id_of_text.hide() } and only show it on mouseover ( #id_of_containing_element.mouseover(function() { toggle() }) }
Again this has the advantage that your site is not suddenly empty when somebody doesn’t have javascript switched off. (Dont quote me on the jquery code but you can find nice explanations here )
Offline