9

I have been working with a piece of HTML / JavaScript code I found to produce a nice little hover effect: http://jsfiddle.net/RaEER/1/

  • You'll notice at first there is a white space above the placeholder image.

  • When I mouseover over it, it goes green then I mouseout, it goes light grey.

Is there any way I can get this white area to be light grey when the page loads?

If it helps, it's all to do with this line of code here:

<div class="slides_item post-thumb" style="
background:#ededed!important"
onmouseover="
$(this).find('.hover_the_thumbs').css('background-color','rgba(0, 0, 0, 0.6)'); 
$(this).find('.magnify_this_thumb').css('left', '51%').css('opacity',1); 
$(this).find('.hyperlink_this_thumb').css('left', '43%').css('opacity',1); 
$(this).children('div').css('background','#8ec252');  
$(this).find('.p_title a').css('color', 'white'); 
$(this).find('.p_exerpt p').css('color', 'white'); 
$(this).find('.p_title').css('border-top', '0');" 

onmouseout="
$(this).find('.hover_the_thumbs').css('background-color','rgba(0, 0, 0, 0)'); 
$(this).find('.magnify_this_thumb').css('left', '-15%').css('opacity',0); 
$(this).find('.hyperlink_this_thumb').css('left', '105%').css('opacity',0); 
$(this).children('div').css('background','#fff'); 
$(this).find('.p_exerpt p').css('color', ''); 
$(this).find('.p_title a').css('color', ''); 
$(this).children('div').css('background','#ededed'); 
$(this).find('.p_title').css('border-top', '0');">
Eric Leschinski
  • 146,994
  • 96
  • 417
  • 335
michaelmcgurk
  • 6,367
  • 23
  • 94
  • 190
  • 2
    That's a TERRIBLE way of adding event listeners. Not only messy and inapropriate but also so XX century. – strah Mar 08 '13 at 11:37
  • I actually took this from a ThemeForest theme and currently rebuilding into my own theme. I agree, it's not the prettiest. – michaelmcgurk Mar 08 '13 at 11:44

2 Answers2

20

You can do it addding this in the Javascript or Js file:

$(document).ready(function(){
    $('.slides_item').children('div').css('background','#8ec252')
});

Working demo: http://jsfiddle.net/RaEER/6/

Anyway, you should separate the Javascript (jQuery in this case) from your HTML. You should o it including it in the header of the page, for example:

<script src="path_to_your_js/file.js"></script>
Alvaro
  • 40,778
  • 30
  • 164
  • 336
  • Hi Steve. Many thanks for this. http://jsfiddle.net/RaEER/7/ Out of interest, do you know why it animates from white to light grey on page load? Totally agree - from now on, I'll separate them. It's just the way I work :) – michaelmcgurk Mar 08 '13 at 11:40
  • ^ Totally agree. I always do this post-project but I'm just in the midst of development right now. Won't happen again :) – michaelmcgurk Mar 08 '13 at 11:41
  • 1
    Because you have a transition in the CSS style applied to that `div` : `webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;"` – Alvaro Mar 08 '13 at 11:43
  • D'oh. Sorry, Steve. Just spotted this myself. Perfect answer. Just waiting 2 minutes before accepting. Rest assured, I will change my inline ways. – michaelmcgurk Mar 08 '13 at 11:43
5

Ouch, why are you putting all javascript in the html code ?

You should add some <script> tags with your javacsript.

To color on window load just add this :

<script type="text/javascript">
$(window).load(function() {
    $('.your-item-class').css('background-color','lightGrey'); 
});
</script>
strah
  • 6,702
  • 4
  • 33
  • 45
soyuka
  • 8,839
  • 3
  • 39
  • 54
  • Sorry, I sometimes prefer to do that for initial development, then move once it's ready. Silly, I know :) Great answer - will try this just now. Thank you. – michaelmcgurk Mar 08 '13 at 11:36
  • 3
    @michaelmcgurk You should stop that, that makes no sense. – Nick Fury Mar 08 '13 at 11:37
  • Thanks, Nick. Taken on board :) @soyuka - I have tried here: http://jsfiddle.net/RaEER/5/ but no such success. – michaelmcgurk Mar 08 '13 at 11:39
  • Why are you doing .css({'background-color':'lightGrey'}) instead of css('background-color','lightGrey') ? – Morv Mar 08 '13 at 11:42
  • 1
    Yeah it's because jQuery is loaded on load, see [fiddle](http://jsfiddle.net/soyuka/RaEER/9/) or [fiddle](http://jsfiddle.net/soyuka/RaEER/10/) from steve Code with the added fadeIn. @Morv edited thanks. – soyuka Mar 08 '13 at 11:43
  • 1
    @Morv `css({"key": "value"})` and `css("key", "value")` are similar, but the object syntax is more flexible - allows to change multiple attributes at once. Also it's easy to make the change of the state animated by replacing `css` with `animate`. – strah Mar 08 '13 at 11:49