JavaScript Not Working - CSS Elements incorrect?

Question

Again I have tried putting this script in to a website and it is not functioning correctly...

Can someone please help me understand what may be malfunctioning?

UPDATE:

My tested code which works in another instance:

$(function(){
    $(window).scroll(function(){
        if($(this).scrollTop() > 100) {
            $('').fadeOut('slow');
            $('#logo-img img')
                .css({'width':'216px','height':'73px'})
                .attr('src','http://...logo_01_white.png');
        }
        if($(this).scrollTop() < 100) {
            $('').fadeIn('fast');
            $('#logo-img img')
                .css({'width':'216px','height':'73px'})    
                .attr('src','http://...logo_01.png');
        }
    });
});

The website I am trying to implement my code on:

http://www.templatemonster.com/demo/52089.html

Can anyone see where these lines may have been calling the wrong classes?

$('.logo.pull-left').fadeOut('slow');
     $('.logo_h.logo_h__img')

If logo pull-left are classes then you need to write it as .logo .pull-left. All the classes should have dots . before and for ids # before. — anpsmn
– anpsmn, Commented Apr 6, 2015 at 5:52
if logo pull-left and logo_h logo_h__img are classes then write .logo .put-left and .logo_h .logo_h_img. — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Apr 6, 2015 at 5:54
Much appreciated though it still isn't working.... Here is the html too <div class="logo pull-left"> <a href="http://..." class="logo_h logo_h__img"><img src="dev.....logo_01.png" alt="Test" title=""></a> </div> <a href="dev..." class="logo_h logo_h__img"><img src="dev....logo_01.png" alt="Test" title=""></a> — Tim Salabim
– Tim Salabim, Commented Apr 6, 2015 at 7:26

mohamedrias · Accepted Answer · 2015-04-06 08:51:41Z

1

        $('logo pull-left').fadeOut('slow');

Here logo is not an tag element.

You must specify .logo if its CSS class or #logo if its CSS ID.

Similarly for logo_h__img , pull-left as well. You must specify whether it's class.

So your corrected code will be like below:

Update based on your CODE

In your code, both logo and pull-left classes are in same dom element. SO you must use .logo.pull-left

$(function(){
    $(window).scroll(function(){
        if($(this).scrollTop() > 100) {
            $('.logo.pull-left').fadeOut('slow');
            $('.logo_h.logo_h__img')
                .css({'width':'216px','height':'73px'})
                .attr('src','http://....1.png');
        }
        if($(this).scrollTop() < 100) {
            $('.logo.pull-left').fadeIn('fast');
            $('.logo_h.logo_h__img')
                .css({'width':'216px','height':'73px'})    
                .attr('src','http://...2.png');
        }
    });
});

edited Apr 6, 2015 at 8:51

answered Apr 6, 2015 at 5:55

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

mohamedrias Over a year ago

share your HTML here to help you better

Tim Salabim Over a year ago

Added the HTML and another PHP file which related to the scrolling navigation to the original question. Thanks.

Tim Salabim Over a year ago

Ok so I created a test css class and tested my code with that and it works. Though doesn't return to original logo upon a scroll up! Still can't figure this out... Is it more complicated than I think ?

mohamedrias Over a year ago

logo and pull-left are in same level. So you must change your selector. it must be $('.logo.pull-left') and similarly $('.logo_h logo_h__img')

Tim Salabim Over a year ago

I have attempted this & still couldn't get it to work though the test is working... I will provide a demo link of where I am testing my code and my updated code

DrKey · Accepted Answer · 2015-04-07 11:17:04Z

Updating image source will not display the new image, that's a problem that I also had on my website. So you should remove the previous image then place a new one

$(document).ready(function(){
  var img1 = '<img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg">'
  var img2 = '<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg">'
  
    $(window).scroll(function(){
        if($(this).scrollTop() > 100) {
            $('.pull-left').fadeOut('slow');
            $('.logo_h.logo_h__img').children('img').remove();
            $('.logo_h.logo_h__img').append(img1);
        }
        if($(this).scrollTop() < 100) {
            $('.pull-left').fadeIn('fast');
            $('.logo_h.logo_h__img').children('img').remove();
            $('.logo_h.logo_h__img').append(img2);
        }
    });
});

body { height: 2000px; }
img { position: fixed; }
.logo_h__img img { width: 216px; height: 73px; right: 0; left: 0; margin: auto; }
.pull-left img { width: 200px; height: 200px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo_h logo_h__img"><img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg"></div>
<div class="logo pull-left"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Dell_Logo.png/1027px-Dell_Logo.png"></div>

Collectives™ on Stack Overflow

JavaScript Not Working - CSS Elements incorrect?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related