Databases
StackOverflow2013
Postsdbo
POConsolidating goofy jquery code
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POConsolidating goofy jquery code
    text
    copied!<p>Hello everyone in stackoverflow land,</p> <p>A while back I did a website for a friend of mine and I did this weird jquery code for the front page of his site. The short story is he first started out wanting a fade in and fade out with panels with the top navigation separate to having both top navigation highlighted and the panels to fade in and fade out. I had little time to change the HTML and graphics so I no choice, but to do it in jquery with each individual button. So my question is...... Is there a way I can consolidate this code so If I have 7 or more buttons?</p> <p>Thanks for the help. The code is on the bottom.</p> <pre><code>$(".block1").css({ opacity: 0.5 }); $(".home").css({ backgroundPosition: '0px 0px' }); $(".home").hover(function(){ $(".home").css({backgroundPosition: '0px -33px'}); $(".block1").stop().animate({backgroundPosition: '0px -250px', opacity: 1}, "slow"); }, function() { $(".home").css({backgroundPosition: '0px 0px'}); $(".block1").stop().animate({backgroundPosition: '0px -250px', opacity: 0.5}, "slow"); }); $(".block1").css({ opacity: 0.5 }); $(".home").css({ backgroundPosition: '0px 0px' }); $(".block1").hover(function(){ $(".home").css({backgroundPosition: '0px -33px'}); $(".block1").stop().animate({backgroundPosition: '0px -250px', opacity: 1}, "slow"); }, function() { $(".home").css({backgroundPosition: '0px 0px'}); $(".block1").stop().animate({backgroundPosition: '0px -250px', opacity: 0.5}, "slow"); }); $(".home").click(function(){ $(window).unload( function () { $(".block1").css({backgroundPosition: '0px -250px', opacity: 0.5}); $(".home").css({backgroundPosition: '0px 0px'}); }); }); $(".block1").click(function(){ $(window).unload( function () { $(".home").css({backgroundPosition: '0px 0px'}); $(".block1").css({backgroundPosition: '0px -250px', opacity: 0.5}); }); }); </code></pre> <p>HTML:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Welcome to Artisserie Bakery&lt;/title&gt; &lt;link href="styles/styles.css" rel="stylesheet" type="text/css"&gt; &lt;script src="js/jquery-1.4.3.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="js/jquery.backgroundPosition.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="js/hover-navs.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="js/preloadCssImages.jQuery_v5.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $(".art_content-wrapper").fadeIn("slow"); $(".art_content ul li a").preloadCssImages(); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="art_wrap"&gt; &lt;div class="art_header"&gt; &lt;a href="index.html"&gt;&lt;h1 id="art_logo"&gt;Artisserie Bakery&lt;/h1&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="art_nav-wrapper"&gt; &lt;div class="art_nav"&gt; &lt;ul&gt; &lt;li&gt;&lt;a class="home" href="home.html"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="chefs" href="#"&gt;Chefs&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="products" href="products.html"&gt;Products&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="shopping" href="#"&gt;Shopping&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="events" href="#"&gt;Events&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="contact" href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="friends" href="#"&gt;Friends&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="art_content-wrapper home-page"&gt; &lt;div class="art_content"&gt; &lt;ul&gt; &lt;li&gt;&lt;a class="block1" href="home.html"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="block2" href="#"&gt;Chefs&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="block3" href="products.html"&gt;Products&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="block4" href="#"&gt;Shopping&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="block5" href="#"&gt;Events&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="block6" href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="block7" href="#"&gt;Friends&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;br /&gt; &lt;img src="graphx/sprite-footer.png" alt="" border="0" /&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>CSS:</p> <pre><code>a.home{ width:88px; height:33px; text-align:center; background:url(../graphx/sprite-navs.png) 0px 0px no-repeat;} a:hover.home{ background:url(../graphx/sprite-navs.png) 0px -33px no-repeat;} a.chefs{ width:87px; height:33px; text-align:center; background:url(../graphx/sprite-navs.png) -88px 0px no-repeat;} a:hover.chefs{ background:url(../graphx/sprite-navs.png) -88px -33px no-repeat;} a.products{ width:90px; height:33px; text-align:center; background:url(../graphx/sprite-navs.png) -175px 0px no-repeat;} a:hover.products{ background:url(../graphx/sprite-navs.png) -175px -33px no-repeat;} a.shopping{ width:89px; height:33px; text-align:center; background:url(../graphx/sprite-navs.png) -265px 0px no-repeat;} a:hover.shopping{ background:url(../graphx/sprite-navs.png) -265px -33px no-repeat;} a.events{ width:88px; height:33px; text-align:center; background:url(../graphx/sprite-navs.png) -354px 0px no-repeat;} a:hover.events{ background:url(../graphx/sprite-navs.png) -354px -33px no-repeat;} a.contact{ width:82px; height:33px; text-align:center; background:url(../graphx/sprite-navs.png) -442px 0px no-repeat;} a:hover.contact{ background:url(../graphx/sprite-navs.png) -442px -33px no-repeat;} a.friends{ width:88px; height:33px; text-align:center; background:url(../graphx/sprite-navs.png) -524px 0px no-repeat;} a:hover.friends{ background:url(../graphx/sprite-navs.png) -524px -33px no-repeat;} a.block1{ display:block; text-indent:-9999px; background:url(../graphx/sprite-pages.png) 0px -250px no-repeat; height:250px; width:88px; opacity: 0.5;} a:hover.block1{ background:url(../graphx/sprite-pages.png) 0px -250px no-repeat;} a.block2{ display:block; text-indent:-9999px; background:url(../graphx/sprite-pages.png) -88px -250px no-repeat; height:250px; width:87px; opacity: 0.5;} a:hover.block2{ background:url(../graphx/sprite-pages.png) -88px -250px no-repeat;} a.block3{ display:block; text-indent:-9999px; background:url(../graphx/sprite-pages.png) -175px -250px no-repeat; height:250px; width:90px; opacity: 0.5;} a:hover.block3{ background:url(../graphx/sprite-pages.png) -175px -250px no-repeat;} a.block4{ display:block; text-indent:-9999px; background:url(../graphx/sprite-pages.png) -265px -250px no-repeat; height:250px; width:89px; opacity: 0.5;} a:hover.block4{ background:url(../graphx/sprite-pages.png) -265px -250px no-repeat;} a.block5{ display:block; text-indent:-9999px; background:url(../graphx/sprite-pages.png) -354px -250px no-repeat; height:250px; width:88px; opacity: 0.5;} a:hover.block5{ background:url(../graphx/sprite-pages.png) -354px -250px no-repeat;} a.block6{ display:block; text-indent:-9999px; background:url(../graphx/sprite-pages.png) -442px -250px no-repeat; height:250px; width:82px; opacity: 0.5;} a:hover.block6{ background:url(../graphx/sprite-pages.png) -442px -250px no-repeat;} a.block7{ display:block; text-indent:-9999px; background:url(../graphx/sprite-pages.png) -524px -250px no-repeat; height:250px; width:88px; opacity: 0.5;} a:hover.block7{ background:url(../graphx/sprite-pages.png) -524px -250px no-repeat;} </code></pre>
 

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