Grow your CSS skills. Land your dream job.

jQuery rounded corners not working

  • # December 15, 2009 at 4:04 pm

    This is my first time using jQuery.

    Here is my link http://www.allthingsprintuk.co.uk/sidebartest.html

    I am trying to achieve rounded corners on my sidebarcontainer (that houses my sidebarcontent list & my main image (the Boat)) using jQuery.
    Not sure what I have done to my code to not make it work. Any Ideas?

    Thanks in advance.

    # December 15, 2009 at 6:00 pm

    I might be being really stupid but where is your link to jquery library?

    # December 16, 2009 at 7:49 am

    I thought I had linked it in the head, underneath the body BG col? But I have most probably got this wrong (see below code). I tried to follow the jQuery rounded corners screencast here. So maybe I have missed something out?
    My JS files are in the correct folder.

    What do I need to do?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>All Things Print managment and solutions</title>

    </style>
    <link href="sidebartest.css" rel="stylesheet" type="text/css" /><style type="text/css">

    body {
    background-color: #F7A700;
    }
    –>

    <script src="jquery-1.3.2.min.js" type="text/javascript" charset"utf-8"></script>
    <script src="jquery.curvycorners.min.js" type="text/javascript" charset"utf-8"></script>

    <script type="text/javascript">
    $(document).ready(function(){
    $(‘.sidebarcontainer’).css({background: ‘#3f3f3f’}).corner(’round 8px’)
    });
    </script>

    </style>
    </head>

    <body>

    # December 16, 2009 at 10:12 am

    Yeah your code is a little messed up. The script call is inside your style declaration.

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





    # December 16, 2009 at 10:21 am

    Lol, i thought my code was messy, yeah just read what JaredAm wrote and that should fix it.

    # December 16, 2009 at 10:47 am

    Thanks for your reply.

    I have done this and still no luck.
    Here is new html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>All Things Print managment and solutions</title>

    <link href="sidebartest.css" rel="stylesheet" type="text/css" />

    <style type="text/css">

    body {
    background-color: #F7A700;
    }
    –>
    </style>

    <script src="jquery-1.3.2.min.js" type="text/javascript" charset"utf-8"></script>
    <script src="jquery.curvycorners.min.js" type="text/javascript" charset"utf-8"></script>

    <script type="text/javascript">
    $(document).ready(function(){
    $(‘.sidebarcontainer’).css({background: ‘#3f3f3f’}).corner(’round 8px’)
    });
    </script>

    </head>

    # December 16, 2009 at 11:31 am

    It seems to be working now!

    Thank you for your help.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".