Documentation

toma - April 8, 2007 - 23:38
Project:Rounded corners
Version:5.x-1.x-dev
Component:Documentation
Category:task
Priority:normal
Assigned:toma
Status:active
Description

I try many example in the help website, it doesn't work for me, suppose that i have a div id is centerpage, and i want to have all the centerpage id rounded

$("#centerpage").corner("round");

It doesn't work for me, please can you provide some example to get it work for drupal powered site, making all content .comment rounded,,,

Thanks

#1

forngren - April 9, 2007 - 09:29

Hm, it seems to work for me. Have checked that jquery.corner.js is correctly downloaded?

If you point me to your website I can take a look at it. Use my contact form if you don't feel like sharing the url with everyone.

#2

toma - April 9, 2007 - 11:14

i set everything correctly, i just need what to type in admin page, can you please give me an example of output

#3

forngren - April 9, 2007 - 13:16

you can try
$("#centerpage").corner("round 40px");
to see if something happens.

Theres also some examples here, http://methvin.com/jquery/jq-corner.html . It's hard to tell whats wrong without page source or url.

#4

toma - April 9, 2007 - 14:52

Thanks for your help, i get it to work now :)

#5

forngren - April 9, 2007 - 15:03
Title:an example» Documentation
Component:Code» Documentation
Category:support request» task

Nice

Keeping this open as a note to self: DOCUMENT THE MODULE!!!

#6

toma - April 9, 2007 - 16:27

Doesn't work with safari, it shows black color between the round

#7

forngren - April 9, 2007 - 19:21

That most likely an error in the javascript. This module is just a wrapper and does not really touch the rounded corners stuff. It just tells where to apply rc.

#8

toma - April 10, 2007 - 00:11

Even the demo page display black color in corner with safari on my imac

#9

catch - May 16, 2007 - 21:06

OK quick attempt at documentation. Just installed the module today, and this issue meant I had it going in a couple of minutes with zero jquery experience, would've taken me a while to work it out myself.

Here goes:

in admin/settings/rounded_corners you need to add jquery statements telling the plugin where to apply corners, and the type and radius of the corner to be applied. More documentation about selectors can be found at jquery.org, and more advanced corner implementation can be found at: http://methvin.com/jquery/jq-corner-demo.html

Declarations should be added one per line, and are roughly in the form of

$("#id").corner("corner-type position pixel radius");

or
$(".class").corner("corner-type position pixel radius");

to apply corners to an ID or class respectively.

These examples assume you want rounded corners on your blocks, and that your theme generates blocks with markup similar to this:

<div class="block">
</div>

To apply round corners with a 10px radius to all corners of all blocks, you would use:

$(".block").corner("round 10px");

To apply round corners to only the top of blocks:

$(".block").corner("round top 10px");

Round corners on top, and bevelled on bottom:
$(".block").corner("round top 10px");
$(".block").corner("bevel bottom 10px");

To apply round corners to only blocks in your right sidebar.

$("#sidebar-right .block").corner("round top 10px");

Not sure whether .block or div.block is better, obviously this could go a lot deeper but documentation will be for people like me who are just starting with jquery or never heard of it, those who know won't need it or can go directly to the main docs for the plugin.

#10

catch - May 16, 2007 - 21:10

OK quick attempt at documentation. Just installed the module today, and this issue meant I had it going in a couple of minutes with zero jquery experience, would've taken me a while to work it out myself.

Here goes:

in admin/settings/rounded_corners you need to add jquery statements telling the plugin where to apply corners, and the type and radius of the corner to be applied. More documentation about selectors can be found at jquery.org, and more advanced corner implementation can be found at: http://methvin.com/jquery/jq-corner-demo.html

Declarations should be added one per line, and are roughly in the form of

$("#id").corner("corner-type position pixel radius");

or
$(".class").corner("corner-type position pixel radius");

to apply corners to an ID or class respectively.

These examples assume you want rounded corners on your blocks, and that your theme generates blocks with markup similar to this:

<div class="block">
</div>

To apply round corners with a 10px radius to all corners of all blocks, you would use:

$(".block").corner("round 10px");

To apply round corners to only the top of blocks:

$(".block").corner("round top 10px");

Round corners on top, and bevelled on bottom:
$(".block").corner("round top 10px");
$(".block").corner("bevel bottom 10px");

To apply round corners to only blocks in your right sidebar.

$("#sidebar-right .block").corner("round top 10px");

Not sure whether .block or div.block is better, obviously this could go a lot deeper but documentation will be for people like me who are just starting with jquery or never heard of it, those who know won't need it or can go directly to the main docs for the plugin.

#11

forngren - May 20, 2007 - 19:54

Thanks Catch.

I'm sorry for the delay, but school is really killing me atm. I hope to review this and release a stable module in about 1-2 weeks.

#12

zirafa - July 27, 2007 - 01:10

To make it work in Safari you need to explicitly set the background of the corners.

$(".rounded-box").corner("cc:#fff");

that should do the trick.

#13

forngren - August 5, 2007 - 16:41

I have added a wiki page at http://groups.drupal.org/node/5455, feel free to contribute. I didn't want to add your excellent notes and steal the honor ;)

#14

catch - August 5, 2007 - 22:33

OK I've added my original notes into the docs - should put zirafa's safari fix in as well.

 
 

Drupal is a registered trademark of Dries Buytaert.