Domain Manage

Jquery

Discussion in 'Website Design' started by theonemanyuri, Aug 31, 2010.

Thread Status:
Not open for further replies.
  1. theonemanyuri

    theonemanyuri Active Member

    Joined:
    Jun 2010
    Posts:
    556
    Likes Received:
    2
    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
     
  2. Domain Forum

    Acorn Domains Elite Member

    Joined:
    1999
    Messages:
    Many
    Likes Received:
    Lots
     
  3. Ashton United Kingdom

    Ashton Well-Known Member

    Joined:
    Feb 2010
    Posts:
    1,621
    Likes Received:
    29
    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/
     
  4. theonemanyuri

    theonemanyuri Active Member

    Joined:
    Jun 2010
    Posts:
    556
    Likes Received:
    2
    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
     
  5. Ashton United Kingdom

    Ashton Well-Known Member

    Joined:
    Feb 2010
    Posts:
    1,621
    Likes Received:
    29
    If you link me the site your practicing on or dev box, I can look at where your going wrong ;)
     
  6. JDubya

    JDubya Active Member

    Joined:
    Apr 2010
    Posts:
    94
    Likes Received:
    7
  7. theonemanyuri

    theonemanyuri Active Member

    Joined:
    Jun 2010
    Posts:
    556
    Likes Received:
    2
    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
     
  8. theonemanyuri

    theonemanyuri Active Member

    Joined:
    Jun 2010
    Posts:
    556
    Likes Received:
    2
    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
     
  9. davedevelopment United Kingdom

    davedevelopment Well-Known Member

    Joined:
    May 2009
    Posts:
    1,108
    Likes Received:
    25
    Firebug is essential for me now, can't live without it!
     
  10. theonemanyuri

    theonemanyuri Active Member

    Joined:
    Jun 2010
    Posts:
    556
    Likes Received:
    2
    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
     
  11. theonemanyuri

    theonemanyuri Active Member

    Joined:
    Jun 2010
    Posts:
    556
    Likes Received:
    2
  12. Ashton United Kingdom

    Ashton Well-Known Member

    Joined:
    Feb 2010
    Posts:
    1,621
    Likes Received:
    29
    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)
     
  13. theonemanyuri

    theonemanyuri Active Member

    Joined:
    Jun 2010
    Posts:
    556
    Likes Received:
    2
    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?
     
  14. Ashton United Kingdom

    Ashton Well-Known Member

    Joined:
    Feb 2010
    Posts:
    1,621
    Likes Received:
    29
  15. theonemanyuri

    theonemanyuri Active Member

    Joined:
    Jun 2010
    Posts:
    556
    Likes Received:
    2
    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
     
  16. Ashton United Kingdom

    Ashton Well-Known Member

    Joined:
    Feb 2010
    Posts:
    1,621
    Likes Received:
    29
    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 :D
     
  17. theonemanyuri

    theonemanyuri Active Member

    Joined:
    Jun 2010
    Posts:
    556
    Likes Received:
    2
    Wicked cheers mate, I'll give it a try!
     
Thread Status:
Not open for further replies.

Share This Page