JQuery Rounded Corners - Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 12-Aug-2011 00:00

Hey guys,

I'm trying to use JQuery rounded corners (http://jquery.malsup.com/corner/) on a Master page so that i can get rounded corners on a div. However I can't seem to get it to work. Here is my approach to it. I've registered JQuery on the masterpage as well as the JS file that I want to use in the head tag. I placed the JS just before the end of the form tag.
Registered the JS i'm supposed to use.

<script type="text/javascript" language="javascript" src="https://raw.github.com/malsup/corner/master/jquery.corner.js"></script>

JS to do the rounded corners

<script type="text/javascript" language="javascript">

$(document).ready(function ()

$('#articletitle').corner();

);

</script

>

</form>

And for some reason the JQuery is being called on the page but it's not rounding the corners at all. Any ideas why?

Posted by Community Admin on 13-Aug-2011 00:00

Have you tried loading up firebug and calling the command against a bunch of elements?

$('#articletitle').corner();

...to see if it generates any errors?

Posted by Community Admin on 15-Aug-2011 00:00

Hi Jester,

By some reason the JQuery is not registered correctly when using the approach from the link that you are referring to. As an alternative I can suggest you to use the standart jQuery plugin for rounded corners which can be downloaded from here.

Here's a sample code to round the corners of a div located in a Master page:

<script type="text/javascript" src="js/jquery-1.6.2.js"></script>

<script type="text/javascript" src="js/jquery.corner.js"></script>

<script type="text/javascript">

$(function ()

$("#content").corner()

);

</script>

<div id="content" style="background-color:Blue">

Hello this would have rounded corners</div>

<div>

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</div>

However please note that you need to save both the corner plugin file (jquery.corner.js) and the standart jquery.js in a folder called js for example and to register them as shown below:

<script type="text/javascript" src="js/jquery-1.6.2.js"></script>

<script type="text/javascript" src="js/jquery.corner.js"></script>

Now you will have working rounded corners example.

Please find the full code in the attached .zip file and let me know if this was helpful.

Regards,
Veronica Milcheva
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 15-Aug-2011 00:00

Hey Veronica,

Thanks for your response. I have attempted your solution and it has worked. I believe the issue was also some other JS that existed on the masterpage. I have Google Analytics and i believe that was conflicting with it, not sure how but still trying to figure it out.

Steve thanks again for your assistance in that matter I did try what you suggested and it did help me out.

Posted by Community Admin on 11-Jul-2016 00:00

You can find jquery other rounded corners script to help you get it done

http://jqueryplugins.net/

This thread is closed