Jquery

theonemanyuri · Aug 31, 2010

On Ashton's recommendation I've been getting into js and jquery, and it's easy to see that it can improve site building no end.

However, of the tutorials I've gone through only about 2 have worked so far and even they needed alot of modification to the code. Does anyone know of any sites for tutorials or plug ins that work straight from the box so to speak? I'm getting so narked off with things not working I'm going to give up soon (lavalamp nav menu being the main reason).

It's hard trying to learn something when you haven't got a working one to play with in the first place

Ashton · Aug 31, 2010

Hmm, I am guessing your issues are less related to the plugins and more related to you

Make sure your including the jquery library and initiating the plugins properly (after the DOM is ready!)

Try these 2 (a couple of my favourites)

http://shadowbox-js.com/
http://nivo.dev7studios.com/

theonemanyuri · Aug 31, 2010

I could have guessed you would be the first to reply lol, I may aswell have PM'd you.

I suspect they might be, but reading the comments on all the tutorials (we'll concentrate on lavalamp for instance) loads of people seem to have problems with them.. I've tried all the corrections given (changing 'false' to 'true', 'active' to 'current') and yet it stilll doesn't work. I even watched the video piece by piece checking everyline of code matched, all file paths were correct, images etc. The closest I got was having the lavalamp menu, with the little black bubble sat behind current link, but it was static on mouse-over and didn't ease from one link to another?

Cheers for the links I'll have a look now

Ashton · Aug 31, 2010

If you link me the site your practicing on or dev box, I can look at where your going wrong

JDubya · Aug 31, 2010

I'd also recommend developing within firefox - with the built-in error console:
http://www.firefoxmastery.com/firefox/introducing-the-firefox-error-console/

Or the Firebug browser plugin http://getfirebug.com/ you can see exactly what's going on.

Probably a good place to start with Jquery is http://jqueryui.com/demos/

theonemanyuri · Aug 31, 2010

Deleted off the lavalamp now but I'll put it back on. Also just working on it offline at the moment in html kit, I'll put it online so I can link you.. bare with me while I set nameservers etc etc

theonemanyuri · Aug 31, 2010

jdubya - ye you're not wrong bud i always use firefox, barely ever use developer tools or anything though so I'll give those a go cheers

davedevelopment · Aug 31, 2010

theonemanyuri said:
jdubya - ye you're not wrong bud i always use firefox, barely ever use developer tools or anything though so I'll give those a go cheers

Firebug is essential for me now, can't live without it!

theonemanyuri · Aug 31, 2010

meatmedia.co.uk

Should be online now Ashton, i can't remember what i changed to get the bubble (lava.gif) working now, so 1 stage further back. I've also put expanding content lower down the page (which worked really nicely, very impressed) but those have stopped working since I put the code in for the lavalamp menu.

Hopefully it's just me being an idiot and done something really simple

theonemanyuri · Aug 31, 2010

I'll get on firebug now

Ashton · Aug 31, 2010

Firebug is a pile of awesome

ps, jquery should always be inside document ready or on page load (depends on script, but most document ready)

theonemanyuri · Aug 31, 2010

How do you mean mate? I've added (document).ready between the $ and the function is that right? Any idea why the little black bubble doesn't display?

Ashton · Aug 31, 2010

Found your problem, you have broken lavalamp.js....

Copy the entire contents of this one into your one:

http://www.gmarwaha.com/jquery/lavalamp/js/jquery.lavalamp.js

theonemanyuri · Aug 31, 2010

Thank you very much dude. I've now got the bubble displaying, however there is still not transitional effect on mouse over...?

Given what you said last, I'm going to do the same to easing.js and see if that makes a difference

Ashton · Aug 31, 2010

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
<title>Meat Media - Home</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 

<style type="text/css"> 
/* Styles for the entire LavaLamp menu */
.lavaLamp {
    position: relative;
    height: 29px; width: 421px;
    background: url("http://www.meatmedia.co.uk/images/bg.gif") no-repeat top;
    padding: 15px; margin: 10px 0;
    overflow: hidden;
}
    /* Force the list to flow horizontally */
    .lavaLamp li {
        float: left;
        list-style: none;
    }
        /* Represents the background of the highlighted menu-item. */
        .lavaLamp li.back {
            background: url("http://www.meatmedia.co.uk/images/lava.gif") no-repeat right -30px;
            width: 9px; height: 30px;
            z-index: 8;
            position: absolute;
        }
            .lavaLamp li.back .left {
                background: url("http://www.meatmedia.co.uk/images/lava.gif") no-repeat top left;
                height: 30px;
                margin-right: 9px;
            }
        /* Styles for each menu-item. */
        .lavaLamp li a {
            position: relative; overflow: hidden;
            text-decoration: none;
            text-transform: uppercase;
            font: bold 14px arial;
            color: #fff; outline: none;
            text-align: center;
            height: 30px; top: 7px;
            z-index: 10; letter-spacing: 0;
            float: left; display: block;
            margin: auto 10px;
        }
</style> 
 

 
</head><body> <ul class="lavaLamp"> 
            <li><a href="#">Home</a></li> 
            <li><a href="#">Plant a tree</a></li> 
            <li><a href="#">Travel</a></li> 
            <li><a href="#">Ride an elephant</a></li> 
        </ul> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript" src="http://www.gmarwaha.com/jquery/lavalamp/js/jquery.lavalamp.js"></script> 
 
<script type="text/javascript">
    $(function() { $(".lavaLamp").lavaLamp({})});
</script>
 </body> 
</html>

My working one