Hover effect to show article snippet??

[onenak]

Hi guys,

I'm trying to figure out how I can create a mouse over/ hover effect the vertical stacked google rss feed control; basically, I want to be able to hover my mouse over a article title, and a caption comes up showing a little snippet of the actual article. I disabled the transition snippet because I didn't like it at all, and I want to implement this hover effect instead. I am new to js, but am not opposed to learning the basics and writing my own script to override if I have to. Any tips or advice on what I can do? Thanks in advance.

[Jeremy Geerdes]

From what you've written, I'm assuming that you're using the Dynamic Feed Control. In that case, to do what you're wanting, you're going to need to download and host your own custom copy of the control code. You will then need to alter the code and point your page to the custom version rather than Google's. Specifically, you will want to change lines 402-413 (of the original code). Given what you're trying to do, there are a couple of options.

OPTION 1: link title

Add the following line before line 408:

link.title = entries[i].contentSnippet;

OPTION 2: toggling HTML element

Step 1: Go ahead and remove (or comment out) lines 402-412, and REPLACE line 413 with this:

var listEntry = entries[i].listEntry = entries[i].html.cloneNode(1);

Step 2: Somewhere in your CSS (which is loaded AFTER the feed control CSS), add this:

.gfg-listentry .gf-snippet{ display: none; }

.gfg-listentry:hover .gf-snippet{ display: block; }

To be honest, I would probably go with the second option rather than the first.

jg

On Sat, Aug 3, 2013 at 5:30 PM, onenak <mazi.m...@gmail.com> wrote:

Hi guys,

I'm trying to figure out how I can create a mouse over/ hover effect the vertical stacked google rss feed control; basically, I want to be able to hover my mouse over a article title, and a caption comes up showing a little snippet of the actual article. I disabled the transition snippet because I didn't like it at all, and I want to implement this hover effect instead. I am new to js, but am not opposed to learning the basics and writing my own script to override if I have to. Any tips or advice on what I can do? Thanks in advance.

--
--
You received this message because you are subscribed to the Google
Groups "Google AJAX APIs" group.
To post to this group, send email to
google-ajax...@googlegroups.com
To unsubscribe from this group, send email to
google-ajax-searc...@googlegroups.com
To view this message on the web, visit
https://groups.google.com/d/msgid/google-ajax-search-api/46df881a-d8e5-4f69-9950-89a39b0eab21%40googlegroups.com
For more options, visit this group at
http://groups.google.com/group/google-ajax-search-api?hl=en?hl=en
 
---
You received this message because you are subscribed to the Google Groups "Google AJAX APIs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-ajax-searc...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Jeremy R. Geerdes

Generally Cool Guy

Des Moines, IA

If you're in the Des Moines, IA, area, check out Debra Heights Wesleyan Church!

http://www.debraheightswesleyan.org

[onenak]

Thanks jgeerdes,

I tried both options and settled with option 1; when using option 2, for some reason it would only work when I hovered over the first headline, but the other headlines had snippets displaying underneath them - hovering on those headlines didn't do anything. I had previously played with the CSS and a little bit of the inline javascript to hide the article snippet and make the cursor stay indefinitely on headlines until the mouse hovers over them - maybe my own tweaks made this not function properly. Anyhoo, option 1 works well enough - when I hover my mouse, a popup caption comes up which is exactly what I wanted. Takes a second or so, but it comes up nonetheless. Anyways, thank you very much!

On Monday, 5 August 2013 09:29:03 UTC-4, jgeerdes [AJAX APIs "Guru"] wrote:

From what you've written, I'm assuming that you're using the Dynamic Feed Control. In that case, to do what you're wanting, you're going to need to download and host your own custom copy of the control code. You will then need to alter the code and point your page to the custom version rather than Google's. Specifically, you will want to change lines 402-413 (of the original code). Given what you're trying to do, there are a couple of options.

OPTION 1: link title

Add the following line before line 408:

link.title = entries[i].contentSnippet;

OPTION 2: toggling HTML element

Step 1: Go ahead and remove (or comment out) lines 402-412, and REPLACE line 413 with this:

var listEntry = entries[i].listEntry = entries[i].html.cloneNode(1);

Step 2: Somewhere in your CSS (which is loaded AFTER the feed control CSS), add this:

.gfg-listentry .gf-snippet{ display: none; }

.gfg-listentry:hover .gf-snippet{ display: block; }

To be honest, I would probably go with the second option rather than the first.

jg

On Sat, Aug 3, 2013 at 5:30 PM, onenak <mazi.m...@gmail.com> wrote:

Hi guys,

I'm trying to figure out how I can create a mouse over/ hover effect the vertical stacked google rss feed control; basically, I want to be able to hover my mouse over a article title, and a caption comes up showing a little snippet of the actual article. I disabled the transition snippet because I didn't like it at all, and I want to implement this hover effect instead. I am new to js, but am not opposed to learning the basics and writing my own script to override if I have to. Any tips or advice on what I can do? Thanks in advance.

--
--
You received this message because you are subscribed to the Google
Groups "Google AJAX APIs" group.
To post to this group, send email to
google-ajax...@googlegroups.com
To unsubscribe from this group, send email to

google-ajax-search-api+unsub...@googlegroups.com

To view this message on the web, visit
https://groups.google.com/d/msgid/google-ajax-search-api/46df881a-d8e5-4f69-9950-89a39b0eab21%40googlegroups.com
For more options, visit this group at
http://groups.google.com/group/google-ajax-search-api?hl=en?hl=en
 
---
You received this message because you are subscribed to the Google Groups "Google AJAX APIs" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-ajax-search-api+unsub...@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.