SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Location
    Ohio
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rounded corners with jquery

    Hello!

    I was wondering if someone could help me figure out how to round the corners of a div with jquery. The two methods I'm looking at are:

    http://methvin.com/jquery/jq-corner-demo.html

    http://blue-anvil.com/archives/anti-...rs-with-jquery

    I really want to try Mike Jolley's @ blue anvil the most. I just do not understand where I'm supposed to put this:

    Code:
    $('.round_this').corner();
    Thanks for any help.
    Susan
    Auxano Creative (formerly The WebDesign Loft)

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Have you looked at the demo page? It tells you to view the source to see how it was done.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Location
    Ohio
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks for your reply. I've stared at the demo page for a whole day now and I can't make it work. Using Mike Jolley's method, here's what I have:

    1. The site is here.

    2. The blue box with the red outline is supposed to be curved. It's <div class="topbox">

    3. I have the packed jquery file uploaded and linked in the <head>

    4. I have the js that he embedded into the <head> in a separate file and linked in my <head> (here's the file) I replaced one of his classes in that file with my own "topbox" class.

    So, why are my corners not curved?
    Susan
    Auxano Creative (formerly The WebDesign Loft)

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Why can we not see the code that you're using?
    How can we be expected to help otherwise?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Location
    Ohio
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry, I don't understand. I posted the links and even posted the link to the .js file I'm using. I thought you could view the source of the main web page and then view the link I posted for the .js file...

    Edit to add: I switched to the unpacked version of the jquery file that Mike gives...
    Susan
    Auxano Creative (formerly The WebDesign Loft)

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    My apologies, I've been dealing with others that haven't provided that and didn't read your previous post properly.

    The rounded corners script that you're using requires the jquery library. Add the jquery library before the rounded corners script and you should be fine.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Location
    Ohio
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much.

    It still isn't working for me. This time, I've added everything that Mike has in his page. I don't understand why it's not working for me because I had the 'original' curvycorners script on the site and it worked fine in FF. I want to switch to Mike's for IE support.

    I have this in the <head>:

    <script src="jquery-1.2.1.pack.js" type="text/javascript"></script>
    <script src="jquery.curvycorners.packed.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript" src="js/jquery.curvycorners2.js"></script>

    For the first file, I copied what Mike has on his site. The second is what I downloaded from his site. The third is what he placed right on his page. I wanted to keep it in a separate file. This is what it says:

    Code:
    $(document).ready(
       function()
       {
        	$('.topbox').corner({
              tl: { radius: 16 },
              tr: { radius: 16 },
              bl: { radius: 16 },
              br: { radius: 16 },
              antiAlias: true,
              autoPad: true,
              validTags: ["div"] });
    	   });
    While using the FF developer's toolbar, I notice there is an error in the 3rd file.

    Error: $ is not defined
    Source File: http://www.playmaniatampa.com/js/jqu...rvycorners2.js
    Line: 1
    But I copied/pasted Mike's code. Do you see my error?
    Susan
    Auxano Creative (formerly The WebDesign Loft)

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    You are running the code from the head of the document.

    Problem: When JavaScript code runs, it's incapable of seeing anything below itself.

    The $(document) will never be able to work when it's run from the head of the document.

    Solution: Move the scripts to the very bottom of the page. The Web page will then appear to load faster because the scripts are being downloaded after the content, and the scripts will have no troubles working with the page elements.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Location
    Ohio
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I will try it! Is it okay to keep the first two files linked in the head and then just move the third down to the bottom? That's how Mike has it...
    Susan
    Auxano Creative (formerly The WebDesign Loft)

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    It will work if you keep the scripts in the head, just be aware that those head scripts cause a longer delay before your page is visible to any visitors viewing the page.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually pmw57, the $(document).ready will load after the DOM is ready and will have access to the elements. I don't think moving it will have any effect. If that is what you meant in your prior post.

  12. #12
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Location
    Ohio
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I moved it and it still isn't working for me. I feel like I'm soo close!

    play mania tampa.com
    Susan
    Auxano Creative (formerly The WebDesign Loft)

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    The $(document) is returning null.

    Look at the following

    Code Javascript:
    <script src="jquery-1.2.1.pack.js" type="text/javascript"></script>
    <script src="jquery.curvycorners.packed.js" type="text/javascript"></script>

    Where are those files??
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    prepend "js/" to the src..

    src="js/jquery-1.2.1.pack.js"

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    @SoulScratch: Thank you.

    @Susan: Update the path names and the script files will be correctly loaded into the Web page
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Location
    Ohio
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh my gosh!! THANK YOU!!! I did have the correct path in there at one time, but I edited the code so many times that on that last try, I forgot to put the path. Thanks again!!!!
    Susan
    Auxano Creative (formerly The WebDesign Loft)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •