jquery problem

wac

Senior Member
I'm making a new site:
http://wacdesign.com/cad/
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:
http://wacdesign.com/cad/test.html
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!
 
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
 
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.
 
didn't think there was any 'relevent' minified js... the minified stuff is to do with smooth scrolling and the moving background image
 
Yes, I guess I shouldn't have specified JS, but either way I'd like to see the code used for this functionality.
 
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
 
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.
 
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.
 
Back
Top