Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

jquery problem

Discussion in 'Website Coding & Programming Forum:' started by wac, Oct 25, 2013.

  1. wac

    wac Senior Member

    I'm making a new site:
    On the home page didnt want the logo to appear twice (the big one and the small one in the nav header) so I set it to fade in when the user scrolls down, like so:
    But when the page loads the little logo is already visible. It works as as soon as you scroll but that defeats the point.
    A silver shilling for the solution here!
  2. Levi

    Levi Moderator Staff Member

    Not sure on the code, I'm no js pro either.... but when I did a (working) fading header menu (it's here if you want to look at it js code is under top-menu.js) it needed to start at 0% opacity and go to 100% opacity
    Assuming you're using waypoints like I did...I'd try something like this:
    Start with the small logo with 0% opacity
    as you scroll you hit the waypoint at which point it starts to fade the logo in and then at the top it would be 100% opacity
    ps second link doesn't work
  3. Hi Wac, could you provide us with a non minified version of the js responsible for controlling the actions taken upon scroll down, relevant to the logo. I'm pretty sure I can solve this, but need more info.
  4. Levi

    Levi Moderator Staff Member

    didn't think there was any 'relevent' minified js... the minified stuff is to do with smooth scrolling and the moving background image
  5. Yes, I guess I shouldn't have specified JS, but either way I'd like to see the code used for this functionality.
  6. wac

    wac Senior Member

    Best to look at the second link as there's alot of js not related to the effect in the first.
    This function is simplky
    <script type="text/javascript">$(document).ready(function(){ $(window).scroll(function(){ // get the height of #wrap var h = $('#wrap').height(); var y = $(window).scrollTop(); if( y > (h*.25) && y < (h*.75) ){ // if we are show keyboardTips $("#tips").fadeIn("slow"); } else { $('#tips').fadeOut('slow'); } });})
    plus standard jqury lib
  7. But it seems to be working fine on the second link? I would first check that everything to do with the small logo fading is the same on both pages, and then start removing things until it works properly. I usually start by removing everything, all of the external CSS files, and generally anything not related to the functionality that you want to work properly - just to make sure that it is something in there causing it to not work properly. Then I would just go through removing each thing one by one until you find out what's causing it.
    I say this as it's working perfectly for me on the second link, so I can only assume that it's something else interfering with it, causing it to function incorrectly.
  8. tbwcf

    tbwcf Active Member

    It's showing because the page is being processed before the js kicks in to hide the logo.
    You could add this via JS instead of having it in the markup.
    $('#smalllogo').css('opacity', '0');
    $('<a href="#"><img src="images/logosmall.png" width="282" height="65" alt=""/></a>').appendTo('#smalllogo');

    alternaitvely you could forget the timeout on the hide
    $("#smalllogo").stop().animate({ opacity: 0 }, 500);
    to $("#smalllogo").css('opacity', '0'); so it hides as soon as the JS is read rather than beginning to fadeout as soon as it's read.

Share This Page