Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2009-01-19 20:03:23
- jshan
- Member
- Registered: 2008-01-09
- Posts: 67
JavaScript or CSS to achieve dynamic hover-over effect?
Hi,
As I’m not quite JavaScript savvy, I need some expertise to help me acheive the following hover-over effect:
I have a 3×3 grid on my site. Each of 9 tiles is just a plain-colored square. When hover-over, the color tile will be swapped out with the excerpt of the associated article replaced in that square. (Yes the square footage is big enough to let excerpts fit in.)
Since I’m dealing with the dynamic content (the changing excerpt), what is the most efficient way (fast to load and simple code) to achieve this effect on TXP?
Thanks lots!
Jay
Offline
Re: JavaScript or CSS to achieve dynamic hover-over effect?
Here is example of building table with 3 columns. Can it help you?
Providing help in hacking ATM! Come to courses and don’t forget to bring us notebook and hammer! What for notebook? What a kind of hacker you are without notebok?
Offline
#3 2009-01-19 20:55:28
- jshan
- Member
- Registered: 2008-01-09
- Posts: 67
Re: JavaScript or CSS to achieve dynamic hover-over effect?
Thank you. It’s neat, but not quite what I was looking for.. only if the each cell from the example table is shown as a block of color, and when mouse-over, the article title will display. I think my problem here is how to achieve that roll-over effect that loads the dynamic article title, exercept and the like.
Any hint on how that example can lend to achieve this?
Offline
#4 2009-01-19 20:55:34
- masa
- Member
- From: Asturias, Spain
- Registered: 2005-11-25
- Posts: 1,091
Re: JavaScript or CSS to achieve dynamic hover-over effect?
Is this perhaps what you’re looking for?
If so, see the full article
Offline
#5 2009-01-19 21:03:06
- jshan
- Member
- Registered: 2008-01-09
- Posts: 67
Re: JavaScript or CSS to achieve dynamic hover-over effect?
wow the forum rocks you guys are so quick to help! Thanks!
masa: I have 2 questions. 1) I’ve never done anything with JQuery, how to embed the snippet into TXP? 2) The additional info I will be loading is not static. I only want to display the info from the latest article, which is changing all the time. Unless I missed it, your article doesn’t seem to explain how to achieve with loading dynamic content.
Very nice article and the site.
Cheers,
Jay
Offline
#6 2009-01-19 21:47:43
- masa
- Member
- From: Asturias, Spain
- Registered: 2005-11-25
- Posts: 1,091
Re: JavaScript or CSS to achieve dynamic hover-over effect?
In his sample Timothy uses list items followed by the summary text:
<ul class="hover_block">
<li><a href="/"><img src="your_image.gif" alt="alt" /> Text</a></li>
<li><a href="/"><img src="your_image.gif" alt="alt" /> Text.</a></li>
</ul>You need to create a new form in Textpattern to achieve that. Assuming the image is your article image and you supply the text as the excerpt, I think something like this should do the trick:
Form “hoverbox”:
<li><txp:permlink><txp:article_image thumbnail="1" /> <txp:excerpt /></txp:permlink></li>And in the page template call it with:
<ul class="hover_block">
<txp:article_custom form="hoverbox" limit=9 />
</ul>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.
Last edited by masa (2009-01-19 22:18:27)
Offline
Re: JavaScript or CSS to achieve dynamic hover-over effect?
jshan wrote:
Since I’m dealing with the dynamic content (the changing excerpt), what is the most efficient way (fast to load and simple code) to achieve this effect on TXP?
When you say “changing all the time”, how quickly/frequently does it change? I mean, if it’s a regular site and your visitors are navigating around the site by clicking regular links, then each time someone visits the page with this 3×3 grid on it, they will automatically see the “most recent” excerpt that was posted before they viewed the page, courtesy of the <txp:article /> / <txp:excerpt /> tags as masa showed.
But if your user hovered over an image, saw an excerpt and then stayed on that page and didn’t click anything for five minutes, then hovered over the same cell again and somebody in the meantime had posted a new article, would you want the new excerpt to show in that same square? In that case, it’s a whole different ball game and moves into the realms of using jQuery to post and receive AJAX requests in real time.
Last edited by Bloke (2009-01-19 22:08:13)
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
#8 2009-01-19 22:20:45
- masa
- Member
- From: Asturias, Spain
- Registered: 2005-11-25
- Posts: 1,091
Re: JavaScript or CSS to achieve dynamic hover-over effect?
Bloke wrote:
In that case, it’s a whole different ball game and moves into the realms of using jQuery to post and receive AJAX requests in real time.
Stef, you have a knack for complicating things ;-)
In that case, you’d have to count me out :-)
Offline
#9 2009-01-19 22:26:45
- jshan
- Member
- Registered: 2008-01-09
- Posts: 67
Re: JavaScript or CSS to achieve dynamic hover-over effect?
masa: Thanks for the tip! I’ll try it out and come back with the testing result.
Bloke: With respect to the frequency I expect of the grid hover-over rendering the dynamic article meta data (namely title, author, excerpt), I’m not quite concerned about the scenario you described that requires up-to-second currency of information. However, you are making a very good point that I might rethink the design. Although that 5-min long pause rarely happens, it could still potentially cause confussion and “time-lagging” of information.
Will try a few approaches people helped with here first…
Offline
#10 2009-01-19 22:28:38
- jshan
- Member
- Registered: 2008-01-09
- Posts: 67
Re: JavaScript or CSS to achieve dynamic hover-over effect?
Bloke: you read every single bit between lines, don’t ya? :-P
masa: so far, you are still in! :D
Offline
Re: JavaScript or CSS to achieve dynamic hover-over effect?
jshan wrote:
Bloke: you read every single bit between lines, don’t ya? :-P
:-D Better believe it!
But I fully expect masa’s approach to be everything you need, and more.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: JavaScript or CSS to achieve dynamic hover-over effect?
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. From what you say, you may be interested in the fadeIn() and fadeOut() effects using an on mouseover trigger rather than on click.
Offline