Source
r/web_design•
Comp_fighter_00

Javascript issue is stumping me (x-post from r/javascript)

http://whitelemondesigns.com/test/about.html

I can't for the life of me figure out where I'm going wrong with the scroll bar... I think I've got all the html and css correct, I have to assume there's a javascript error but I can't find it... could I have a javascript conflict? If you guys have any insight I would appreciate it, this is driving me up a wall.

Posted Aug 10, 2011, 5:52 AM UTC

215
Comp_fighter_00OP•

ttt

1
Amp3r•

It might just be my screens but I am struggling with the contrast of the text. Everything is a bit of a struggle to read.
I would make the links a bit larger while I was at it as well.
No input on the js

1
Comp_fighter_00OP•

i didn't design the site, i'm just trying to get it up and functioning. the person specifically wants this particular scrollbar, which is driving me crazy...

1
Comp_fighter_00OP•

ttt

1
sethportman•

I cant seem to see the jquery file linked anywhere in the document. you can do this by downloading it at jquery.com or by allowing google to do it

1
Comp_fighter_00OP•

ok, can you explain this to me? I thought I put there libraries in the head, here:

<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script> <script src="jquery.easing.1.3.js" type="text/javascript"></script> <script src="jquery.mousewheel.min.js" type="text/javascript"></script>

and the function at the end:

<script> $(window).load(function() { mCustomScrollbars(); }); function mCustomScrollbars(){ /* malihu custom scrollbar function parameters: 1) scroll type (values: "vertical" or "horizontal") 2) scroll easing amount (0 for no easing) 3) scroll easing type 4) extra bottom scrolling space for vertical scroll type only (minimum value: 1) 5) scrollbar height/width adjustment (values: "auto" or "fixed") 6) mouse-wheel support (values: "yes" or "no") 7) scrolling via buttons support (values: "yes" or "no") 8) buttons scrolling speed (values: 1-20, 1 being the slowest) */ $("#mcs4_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","no",0); } </script> <script src="jquery.mCustomScrollbar.js"></script>

is this not right? HELP!

1
sethportman•

Refresh the page and you will see the scroll bar appear for a second and then dissapear. The problem is that you referenced the files at the "<head>" tag, try referencing these files right before the closing "</body>" tag. That way the page will load first and then call the javascript.

Good Luck! let me know if this heloed.

1
sethportman•

i got the scroll bar to work over here, and all i did was move (only!) the references of jQuery to the bottom of the page!

1
Comp_fighter_00OP•

i will try this and let you know, thanks!

1
jude099•

relevant to my interests, waiting on placement results...

1
x-skeww•

I assume that scrollbar stuff is supposed to be added by some jQuery plugin. I don't see that kind of plugin. I also don't see any kind of setup code.

By the way, you shouldn't just use images instead of text. Use a proper font (google got some) or use some image replacement technique.

You also don't need JavaScript for simple hover effects. Use CSS for that.

Oh yea, use progressive enhancement. That is, make that text scrollable by default and if there actually is JavaScript, you can do it the "fancy" way.

0
Comp_fighter_00OP•

the jquery javascripts are in the head... what do you mean you don't see them? they're linked google APIs. What do you mean by "setup text".

the other points are taken.

1
x-skeww•
jquery.min.js
jquery-ui.min.js
jquery.easing.1.3.js
jquery.mousewheel.min.js

mCustomScrollbar.js is missing.

And you need some setup code, which actually runs that plugin.

$(document).ready(function(){$('#foo').thatPlugin();});

4
kinghfb•

You don't at any point create the scrollbar object. You just throw the libraries in the head. You also didn't include the mscrollbar js file. Presumably, once you've added the JS file, you'll need to add $('#some-id').mscrollbar(); or something to the source code.

The problem here is you need to understand more completely what you're trying to do before trying to do it. This will save you oodles of headaches later and make work easier.

Oh and PS: For the love of crap get rid of Dreamweaver's rubbish hover functions. Go find some CSS sprite/menu hover examples and steal those instead. Millions of times nicer.

Edit: Apologies for sounding snarky. Dreamweaver gets my goat.

3
Comp_fighter_00OP•

no argument there, i don't understand what i'm doing with javascript at all... thanks for the advice.

1