Databases
StackOverflow2013
Postsdbo
POjQuery plugin to scroll page, change background and fade back on anchor click?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery plugin to scroll page, change background and fade back on anchor click?
    text
    copied!<p>My nav looks like this:</p> <pre><code>&lt;a href="index.html" class="nav"&gt;Home&lt;/a&gt; &lt;a href="about.html" class="nav"&gt;About&lt;/a&gt; &lt;a href="#" class="nav"&gt;Services&lt;/a&gt; &lt;a href="contact.html" class="nav"&gt;Contact&lt;/a&gt; </code></pre> <p>On index.html I briefly mention the two services offered and include a "read more" link for each one. It looks like this:</p> <pre><code>&lt;div style="width:468px; height:180px; float:left; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;font-size:13px;line-height:17px;color:#666666;"&gt; &lt;span class="article"&gt;&lt;b style="font-size:14px; color:#000000"&gt;Service #1&lt;/span&gt; &lt;div style="padding-right:24px; padding-top:6px;font-size:12px; line-height:18px; color:#333333"&gt;Description&lt;/div&gt; &lt;!-- end "div" --&gt; &lt;a href="vpn.html" class="readmore"&gt;Read More&lt;/a&gt; &lt;div style="clear:both; font-size:1px; line-height:1px;"&gt;&lt;/div&gt; &lt;!-- end "div" --&gt; &lt;/div&gt; &lt;!-- end "div" --&gt; &lt;div style=" width:228px; height:180px; margin-left:12px; float:left; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;font-size:13px;line-height:17px;color:#666666;"&gt; &lt;span class="article"&gt;&lt;b style="font-size:14px; color:#000000"&gt;Service #2&lt;/b&gt;&lt;/span&gt; &lt;div style="padding-top:6px;font-size:12px; line-height:18px; color:#333333"&gt;Description. &lt;a href="#" class="readmore"&gt;Read More&lt;/a&gt; &lt;/div&gt; &lt;!-- end "div" --&gt; &lt;/div&gt; &lt;!-- end "div" --&gt; </code></pre> <p>Instead of being redundant and creating a services.html page, only to say the same thing I do on index.html and include more "read more" links, I'd like to do something with jQuery (since I'm already using it + Cycle for testimonials.)</p> <p><strong>When the services link is clicked, on whatever page, I would like it to go to index.html, scroll to the two <code>div</code>s describing the services, change the background color (to yellow) for emphasis, and then fade back to normal (white.)</strong></p> <p>Is there a plugin for jQuery that will do this? Or how can I? I was looking at <a href="http://jdeerhake.com/bgFader.php" rel="nofollow">bgFader</a> but since there's no demo I'm not sure this is what I'm looking for (and I don't know JS.)</p> <p><strong>EDIT</strong></p> <p>@Yi Jiang - It didn't work. I added this to my <code>&lt;head&gt;</code>:</p> <pre><code>&lt;!-- include jQuery library --&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt; &lt;!-- include Color plugin --&gt; &lt;script type="text/javascript" src="js/jquery.color.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; if(window.location.hash === '#services') { var service = $('#services'); var originalColor = $('#services').css('background-color'); $('#services').css('background-color', '#FFEE9F').animate({ 'background-color': originalColor }, 1000); } &lt;/script&gt; </code></pre> <p>And added <code>id="services"</code> to one <code>div</code> (for testing) and changed my anchor to <code>index.html#services</code>. It scrolls to the right place (thanks!) but it doesn't change the background or do anything besides scroll. Did I screw something up?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload