Jump to content

Archived

This topic is now archived and is closed to further replies.

renabe413

Jquery issue

Recommended Posts

renabe413

I can't get any kind of jquery to function on my site. I'm specifically trying to fade in a div when a user scrolls to a certain point. Nothing I have tried is working. I have tried several different functions and nothing works. Any help?

 

Share this post


Link to post
Share on other sites
Rennie

Something as simple as this, pasted into the custom scripts is not working. What am I doing wrong?

 

<script type='text/javascript'>
   $(window).scroll(function(){
 
      var scrolled = $(window).scrollTop();
      $(".masthead-title").stop().animate({opacity: (scrolled>50 ? 0.9 : 0.1) }, 600);
 
   });
 
</script>

Share this post


Link to post
Share on other sites
Rob

@renabe413  I'm not sure what you're doing or how. Could you provide a link, and with apologies, a detailed description of what I'm looking for/at?

 

@Rennie  It looks like that javascript is missing the part that calls it to action.  Where did you get that code?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
renabe413

Ok I have made some progress. This is the new code I have

 

<script type="text/javascript">
jQuery(window).load(function(){
jQuery(window).scroll(function(){
    var y = $(this).scrollTop();
        if (y > 120) {
            jQuery('.test').fadeIn("slow");
        }
        else {jQuery('.test').fadeOut("slow")};    
});
}); 
 
</script>
 
I learned that I had to replace some of the $ signs with jquery. 
 
Now the new issue is that the code does not work unless I include  <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>. But that messes with my editor interface. The site works fine.

Share this post


Link to post
Share on other sites
Rob

Likely, calling that javascript is causing a conflict. It may be slightly older than ours, and thus conflicting.

 

I'm honestly not sure how to resolve this, except that there are plugins that convert javascript to shortcodes. 


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rennie

Solved it by placing  $.noConflict(); 

 

....

 

<script type="text/javascript">
  $.noConflict();
jQuery(window).load(function(){
jQuery(window).scroll(function(){
  
    var y = $(this).scrollTop();
  
if (y > 150)
{jQuery('.intro').stop().animate({"opacity": "1"}, "fast")}
                      
else
{jQuery('.intro').stop().animate({"opacity": "0"}, "fast")};
                    
});
}); 
 
</script>
...
 
Thank you for the help, this issue has been resolved.

Share this post


Link to post
Share on other sites
Danny
Thanks for informing us that the issue has been resolved.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×