+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / JQuery Rounded Corners

JQuery Rounded Corners

5 posts, 1 answered
  1. Jester
    Jester avatar
    9 posts
    Registered:
    28 Jul 2011
    12 Aug 2011
    Link to this post
    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?
  2. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    13 Aug 2011
    Link to this post
    Have you tried loading up firebug and calling the command against a bunch of elements?

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

    ...to see if it generates any errors?
  3. Veronica
    Veronica avatar
    125 posts
    Registered:
    30 Jan 2015
    15 Aug 2011
    Link to this post
    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
    Answered
  4. Jester
    Jester avatar
    9 posts
    Registered:
    28 Jul 2011
    15 Aug 2011
    Link to this post
    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.
  5. Mike
    Mike avatar
    1 posts
    Registered:
    11 Jul 2016
    11 Jul
    Link to this post

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

    http://jqueryplugins.net/

5 posts, 1 answered