• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

jquery problem


wac

Senior Member
#1
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!
 

Levi

Moderator
Staff member
#2
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
 
S

Sean Lee-Amies

Guest
#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.
 

Levi

Moderator
Staff member
#4
didn't think there was any 'relevent' minified js... the minified stuff is to do with smooth scrolling and the moving background image
 
S

Sean Lee-Amies

Guest
#5
Yes, I guess I shouldn't have specified JS, but either way I'd like to see the code used for this functionality.
 

wac

Senior Member
#6
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
 
S

Sean Lee-Amies

Guest
#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.
 

tbwcf

Active Member
#8
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.