malsup / corner Goto Github PK
View Code? Open in Web Editor NEWjQuery Corner Plugin (by Dave Methvin and Mike Alsup)
Home Page: http://jquery.malsup.com/corner/
jQuery Corner Plugin (by Dave Methvin and Mike Alsup)
Home Page: http://jquery.malsup.com/corner/
Is there an issue with the corner plugin with jQuery 1.3.2? This is the first time this has happened, and I've used your plugin for a long time. When viewing in IE8, the element does not have a border. When reloading the page with javascript turned off, the border is there.
IE 8 shows a rendering bug. I'm using the following code:
<style> ul#navigation li a { color: white; text-decoration: none; display: inline-block; padding: 0.8em; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; font-weight: bold; font-size: 0.8em; text-transform: uppercase; } </style> <script> var nav = $('ul#navigation li a'); $.each(nav, function(i, n) { $(n).width($(n).width()); $(n).corner("11px"); }); </script>
The result is that most of them work, but 3 of the navigation links show a bug in rendering as the image below shows:
if i use div with style top:-100px; , then corner is not render properly.
Hey!
The transparency doesn't work on IE,
and that is really sad because I can't use your plugin until it will work in all IE6/7/8.
I saw an other script that it's transparency does work in IE,
so maybe it will help you to do the same that yours will also work,
take a look at:
http://www.curvycorners.net
I really don't know if this script work in the same way as yours, but maybe.
(why I don't just use it? because it's got some problems, but the transparency part does work)
Hi, I am using the plugin in three places on a page... it looks great in Firefox and Chrome, but in IE (all versions) this always happens:
The first instance works fine -- but subsequent instances don't get rounded right; they have a dark bit in each corner.
Thoughts?
if a min-height property is inherited from the parent element it overrides the inline height: 1px setting.
This code works fine with FF and other versions of IE, but with IE9 it does not round. First I test version and then set parameters;
<script type="text/javascript"> if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x; var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number if (ieversion <=6) $(document).ready(function(){ $("div.rounded").corner('top 10px') }); else if (ieversion>=7) $(document).ready(function(){ $("div.rounded").corner(); $(".content").corner('bottom 10px'); }); } else $(document).ready(function(){ $("div.rounded").corner(); $(".header").corner('top 10px') $(".content").corner('bottom 10px'); }); </script>Then I use the
"
So basically I use a background image in the "header" div, but in IE9 the div's are square. Link to test page, http://www.mgfic.com/default.aspx
The plugin doesn't work properly with Safari 4.0.4. It displays the corners, but they are not as smooth as before, links aren't clickable anymore and inline elements can't be rounded. It also generates lots of divs which makes the code messy.
The following renders a rounded div but not a rounded input element in FF3, IE7,
IE8, and in fact causes the input box border to disappear completely:
http://www.weichbrodt.org/jquery.corner.test.html
Doubly frustrating because border-radius does round the corners of input elements in FF3.
Cheers!
Hi,
I have a small table where I want to set-up some corners. Unfortunately, it's only working on safari. Since borders are set on the table itself, I don't want to embed all of this in a div.
Anyone having the same issue ?
Thanks
Please refer to the reply to my initial post at ASP.NET forums for more details. Essentially, when the corners plugin is applied to elements in a content placeholder page inside a master page it works fine. However when the placeholder is inside of a panel or div with an id it does not work on any object inside that panel.
I am using Windows XP, IE8, jQuery 1.4.2, and the latest corners plugin.
I've noticed that if i use a background picture the corners are not rounded when using Firefox; all other browsers are working fine (Safari, Internet explorer, Opera, Chrome...). How can i solve this?
thanks in advance,
IE 8 is giving me the following error:
Line: 157
Error: Unexpected call to method or property access.
regards,
Tim
Hi,
When I apply corners to a div that has a background and border, then borders are corned and displayed correctly in all browsers except Internet Explorer (tested with 7 and 8). Instead, the border is hidden but rounding is applied with the 'background' color of the div.
width: 170px;
float: left;
padding: 10px;
background: #bcbcbc;
border-left: 2px solid #f49d03;
border-right: 2px solid #f49d03;
border-bottom: 2px solid #f49d03;
}
$('#sidemenu').corner("bottom");
First off, great script. I just found it, but it is making web development much faster and easier for me.
I noticed today that the corners over a page background image are working, but the corner backgrounds are of the page background color and not pulling in the background image.
http://www.tryoutresults.com/inside.php?pg=associations
I am going to poke around to see if I can fix it, but I was wondering if this is a known issue with an easy fix, or now.
When expanding a rounded div tag in firefox 3.5.5 on windows xp and Mac OS X 10.6, it doesn't remove the old corners (try example code).
<title>Graphic glitch test</title> <script src="jquery-1.3.2.js" type="text/javascript"></script> <script type="text/javascript" src="jquery/jquery.corner.js"></script> <script type="text/javascript"> $(function() { $('#button').click( function() { $('.hidden').toggle(); }); $('.cornerbox').corner(); }); </script> <style type="text/css"> .cornerbox { padding: 15px; } .color1 { background-color: red; } .color2 { background-color: green; } .hidden { display: none; } </style><-- Graphic glitch
in firefox 3.5.5
People who had problems with ie compatibility. Code below deactivate the script only for ie browser.
Fırst it checks the browser whether if ie or not. if your browser is ie i just put a comment like Do Nothing, if not just write your plugin codes.
// PUT THIS CODE BETWEEN JAVASCRIPT TAGS
var isIE/@cc_on=1@/;
if(isIE){
//Do Nothing !
}else
{
// CORNER PLUGIN CODES
$("#mydiv").corner("bottom","3px");
}
Corner() works sensationally well for me in Chrome and FF, but in IE 7, the page renders first, then the corners are modified a split-second later, causing a distracting animation effect. These are the first two lines of my code:
$(document).ready(function(){
$(".tab").corner("tl tr 10px");
Other jQuery code following the corner statement is behaving as expected, just the corners are doing this two-step rendering.
Has anyone else noticed this behavior, or is it unique to me? Is there a work-around?
Opera does not propably correct handle the overlay. If you want to put some text floated up at corner and want to click on it, opera is making problem. In IE, Firefox is it ok. The temporaly solution is to create absolute position, with z-index.
We use jquery.corner to do rounded corners in our application.
Mostly this works fine. But in some situations (above all in combination with li elements) it produces extremly strange results.
display in firefox: http://dl.dropbox.com/u/1776128/firefox3.6-windows.png
display in ie8: http://dl.dropbox.com/u/1776128/ie8.png
The file code can be seen in
http://dl.dropbox.com/u/1776128/%40menus.html
The code opening and closing the slide-menu is as follows:
(function($) {
$.fn.slideMenu = function(div) {
return this.eq(0).each(function() {
var
var $span = $a.parent();
var
var menuId = $a.attr('href');
if ($.fn.slideMenu.openMenu && $.fn.slideMenu.openMenu == menuId) {
$.fn.slideMenu.openMenu = false;
$menu.hide();
} else {
// right align the menu?
var alignRight = $span.hasClass('right');
// display and hide menu? maybe calculation of width will not work if closed?
var spanPos = $span.offset();
var spanWidth = $span.outerWidth();
var spanHeight = $span.outerHeight();
var pagePos = $('#page').offset();
var menuWidth = $menu.outerWidth();
var duration = Math.max($menu.outerHeight()*1.5, 250);
if (alignRight) {
$menu.css('left', spanPos.left - pagePos.left - menuWidth + spanWidth).css('top', spanPos.top - pagePos.top + spanHeight);
} else {
$menu.css('left', spanPos.left - pagePos.left).css('top', spanPos.top - pagePos.top + spanHeight);
}
$menu.slideDown(duration);
$.fn.slideMenu.openMenu = menuId;
}
});
};
})(jQuery);
The code used to attach the slideMenu contents to the a-tags:
function prepareMenus() {
var openMenu = false;
var
$('#page').append($menus);
$('span.menu a').click(function() {
var
var href = $a.attr('href');
var pos = href.indexOf('#');
var id = href.substr(pos);
var
$menus.hide();
$menus.children().hide();
$div.show();
$a.slideMenu($menus);
return false;
});
}
The code used to prepare the rounded corners:
function prepareCorners() {
$('div.content span.edit a').corner("4px").parent().corner("5px");
if (!$.browser.msie) {
$('div.items', $menus).corner("5px").parent().corner("7px");
}
}
In summary:
As you can see the rounded corners of the menu itself (not the buttons within) are already excluded as they lead to a menu that looks very similar to the ie8-screenshot (but the whole menu displays in such a way).
the "keep" attribute allows for rounded corners with a border on IE/Chrome (tested), but IE's behavior is to simply render the original non-rounded border instead.
This happens in both my tests and on the demo site at malsup.com
When rounding corner on a container using the min-height hack (http://www.dustindiaz.com/min-height-fast-hack/), the bottom corners are rendered at the 'auto' height, resulting in bad display.
Solved this changing line 144 from this:
var cssHeight = $.curCSS(this, 'height');
to this:
var cssHeight = $(this).outerHeight()+'px';
please check the following paste:
Hi there,
I am still learning about JQuery Corner. So maybe I do a mistake. I want to draw rounded corners to my nav buttons. I am using JQuery 1.3.2 that comes with Wordpress 2.8.6.
My code is as follows:
[...]
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery('div.navbutton').corner("round 20px"); /* THIS DOES NOT WORK IN MSIE AND OPERA. */ jQuery('div.navbutton').wrap(''); jQuery('div.outer').corner("round 20px"); }); </script>[...]
<style type="text/css"> table#page table.main td.navtd div.navigation div.navbutton { width:70px; margin:3px auto; padding:7px 20px; //border:2px solid #555555; // THIS WORKS FINE IN FF AND CHROME border:none; //WHEN TRYING FOR MSIE AND OPERA I COMMENT THE ABOVE OUT AND DISABLE THE BORDER background:white; color:#555555; font-size:12px; font-weight:bold; text-align:left; } div.outer { margin:3px auto; padding:1px 4px; background:#555555; zoom:1; } </style>[...]
[...]
While FF and Iron/Chrome render the borders fine (Iron/Chrome looks somewhat aliased but at least it works somehow) and do not even require the "wrapped div" (border works) I have problems with MSIE 8 and Opera 10. Best way to imagine the problem is IMO to see the screenshot: http://www.meszi.de/Zwischenablage01.jpg
What can you suggest to get this issue resolved?
CU,
Mészi.
I am using corner to round out the corners of a container on a fixed-width centered layout. The body has a CSS background image (jpg) that is repeated. I apply a corner to the container and all is well except in IE8, it will not corner unless I remove the background image of the body via CSS- if I do that, it corners just fine.
Is this a limitation or is there a work around?
,my code
$("#member-box").corner("top 8px");
<div id="member-box-main">
test
</ div>
1 box is ok but if have a box more than 1
cornor is not show after first box :O
thanks.
I am not so sure if this is an issue so much as a feature request. For inner elements in list the corners module rounds all the list items. Is there a way to set a "no corners" options. This way subsequent elements that would normally be affected by the corner element could be unset. An example might be:
$("#element").corner("nocorners");I cant figure out how this works. What am I doing wrong?
i added jquery.js and jquery.corners.js
added
<script>$(document).ready( function(){
$('div.rounded').corner('5px');
});
</script>
have the following in my body tag
an outside div with id="wrap" and class="rounded"
and four divs inside the wrap div as seen below:
div class="features rounded">Feature: One </div
div class="features rounded">Feature: Two </div
div class="features rounded">Feature: Three</div
div class="features rounded">Feature: Four</div
Corners with Recaptcha gives following error
Firefox.
Error: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIXMLHttpRequest.send]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://example.com/jquery/jquery.min.js :: anonymous :: line 18" data: no]
Google Chrome:
Error: NETWORK_ERR: XMLHttpRequest Exception 101
Haven't tested other browsers.
generally works incorrectly in IE 7 in many cases when rounded buttons inside jquery UI dialog
for example:
$("button.btn").corner("keep 3px");
var testDialog= $("#testDialog");
testDialog.dialog({
autoOpen: true,
draggable: true,
resizable: false,
/*dialogClass: 'commonConfirmDialog',*/
height:100,
width: 180,
position: ['center', 'center'],
minWidth:180,
minHeight:100
});
});
function showDlg_Click()
{
$("#testDialog").dialog("open");
}
function btnOk_Click()
{
$("#testDialog").dialog("close");
}
</script>
</head>
<body>
<button class="btn" onclick="showDlg_Click()">Show dialog</button>
<div id="testDialog" title="Test dialog">
Some text<br/>
<button class="btn" onclick="btnOk_Click()">Press OK</button>
</div>
<body>
Hi,
If I want to set a default rounding of 5px + use the meta data-corner, the data-corner is ignored :
$('.rounded').corner("5px");
<div class="rounded" data-corner="bottom">My bottom rounded div</div>
The div will be rounded using 5px on each corner, the "bottom" setting is ignored.
Therefore, the only way to do what I want is currently to add the 5px in every rounded block of the page (a lot !).
Thanks :)
Using IE7 and 8, trying to do a simple 'keep bottom 6px' or similar command on a div (either using .corner() or as data-corner in the div itself), the object will corner correctly but the border stays square. You can see this behavior at http://jquery.malsup.com/corner/ in the 'Pick Your Colors (or keep your borders)' section.
bot ? this.appendChild(d) : this.insertBefore(d, this.firstChild);
saying that object doesn't support method.
Hi,
I was using another plugin called corners (yes, same with "s"). I had to drop it in favor of this one, and now my page behaves as expected :)
Anyway, there 2 things I miss in the current implementation :
It would be great to have these 2 features. Also, I must admin the rendering is a little better on IE with cornerS, but the library also has a lot less features !
ho, corners can be found here :
http://www.atblabs.com/jquery.corners.html
the project doesn't seem to be active any more :(
Thanks
In http://jquery.malsup.com/corner/image.html It should be stated that $.fn.corner.defaults.useNative = FALSE , otherwise it won't work on browsers supporting round corners.
Hey, and thanks so much for jCorner. What i wonder is if i'm missing a way to suppress the extra bits from the print style of a document that uses colored corners -- i.e. $(this).corner("cc:#9"); -- which i'm using with a 35px radius on top corners. It creates two distracting little crescents on the (printed) page and i'm wondering if there's a way around this. Thanks!
i try this plugin..work well in FF, but the border "keep" doesn't work in IE6. Please advice how to make it work in IE6. anyway, this is a very good plugins. thanks
Hello!
If you try to make a corner in an element other than div, using IE8, the execute of the script stops.
It occurs in line 157 of the jquery.corner.js script.
I've added a try...catch block to solve it, but I do'nt know if we can do it by some "best way".
Here what I changed:
At line 157:
bot ? this.appendChild(d) : this.insertBefore(d, this.firstChild);
changed to:
try {
bot ? this.appendChild(d) : this.insertBefore(d, this.firstChild);
}
catch(e) { /* do nothing */ }
That's all ;D
Thank you!
The following code didn't do what I expected (remove the current corner and recorner the selected elements):
$(".selector").uncorner().corner();
This would be a common task for recornering elements for example.
Replacing line 173 with:
Solved the problem. Perhaps remove() doest return jQuery?
I don't know enough about jQuery to know whose bug this is, but the line above fixes it.
There are basically some alignment/mostly horizontal axis issues with a number of the samples on the project page. I will try to fix some of these, but I'll need to get acquainted with the code first.
My itch to scratch is the "keep notch" variant.
(I don't see screenshot support, so this'll have to do...)
If anyone has any advice, please dispense it...
Hi
It seems that only in IE7 the bottom corners are rendered incorrectly if the div contains a
div style="clear: both;"
here is my site http://www.lazyshino.co.uk/test-1
and here are the results for several browsers
http://seeinvisible.litmusapp.com/pub/361e35d
best wishes
Lee
When i use the corner method on the window.open event in Chrome no corners are rounded. jQuery v1.3.2
Hi Dave and Mike,
I am trying to use rounded corners with a Wordpress theme and I just can't figure out what's not working.
jQuery comes with wordpress now and the only thing that I need to adjust, when using the actual library, is to change $ sign to 'jQuery'.
However, when I do the same to your plug-in and call it from the page, it doesn't seem to work.
Any ideas where I am going wrong or what information could help you help me?
Thank you very much!
This code works fine with FF and other versions of IE, but with IE9 it does not round. First I test version and then set parameters;
<script type="text/javascript"> if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x; var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number if (ieversion <=6) $(document).ready(function(){ $("div.rounded").corner('top 10px') }); else if (ieversion>=7) $(document).ready(function(){ $("div.rounded").corner(); $(".content").corner('bottom 10px'); }); } else $(document).ready(function(){ $("div.rounded").corner(); $(".header").corner('top 10px') $(".content").corner('bottom 10px'); }); </script>Then I use the
<div class="content"> Links to other stuff here... </div>
So basically I use a background image in the "header" div, but in IE9 the div's are square. Link to test page, http://www.mgfic.com/default.aspx
the only effect that will yield transparent corners is "round". Is it possible to have transparent "beveled" corners?
thanks
In IE8 I receive the following error:
Line: 132
Error: Unexpected call to method or property access.
when i used "the Corner Plugin with Images" from the page it self, it running well.
but, when i tried to call the image via ajax:
$.fn.corner.defaults.useNative = false;
$(document).ready(function(){
$("#imgBox").corner("15px");
});
the image still doesn't have rounded corners.
can yu give me an example how to call corner plugin with image via ajax..
thanks..
Hi - just wanted to report a memory leak using Internet Explorer + the corner plugin. Memory is lost on each page refresh (observed using ie6). It can be fixed as follows (call to removeExpression added):
var expr = $.browser.msie && (function() {
var div = document.createElement('div');
try { div.style.setExpression('width','0+0'); div.style.removeExpression('width'); }
catch(e) { return false; }
return true;
})();
Cheers,
Tim
First of All thanks a lot for your great script.
anyway: I tried all the solutions here and I couldn't solve
problem I have in IE when I am using corner plug-in and in some corners there are some problems which I can not solve:
you can check this with IE
http://huraman.com/tehranr/
Thanks a lot for your help
Danial
When using corner() in FF3.5.2 the usage of Sliding animations leaves a "barbed" look, as apparently FF rendering engine can not cope. Even uncornering and then recornering does not make the visual error go away, however - changing the opacity via FadeTo of the object sometimes resets the visual. Not sure if this is even an issue with corner.js or a FF bug?!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.