The Problem:
Applying Rounded Corners to a web-page divs where in you also have a coda-slider inside the main div works not only in Firefox and other major browsers but also in MSIE-6 & > versions.
Upon Searching for rounded corners, I came across many plugins and css tricks like rounded-corners, corner, curvycorners to name a few, but none was giving what I expected to work in IE.
I was happy to see CurvyCorners working in IE when codaslider was not integrated, but it also bombed when slider was integrated, although the corners were getting rounded, the slider was not in place either in IE or in firefox.
Resources:
Coda-slider
http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/ (I have used this)
http://jqueryfordesigners.com/coda-slider-effect/
http://www.webresourcesdepot.com/featured-content-slider-with-jquery-ui/
Rounded Corners:
http://www.atblabs.com/jquery.corners.html
http://www.curvycorners.net/instructions/ (and Used this version 2.0.3)
http://www.aspcode.net/JQuery-Curvy-Corners.aspx
http://battletech.hopto.org/html_tutorials/rounded_css_borders/more_styles.html
http://perishablepress.com/press/2008/11/24/perfect-rounded-corners-with-css/
http://www.sitepoint.com/article/css-round-corners-boxes-curves/
http://www.cssplay.co.uk/menu/
http://www.html.it/articoli/nifty/index.html
http://www.zen-cart.com/forum/showthread.php?t=64799
The Directory for rounded corners
http://www.smileycat.com/miaow/archives/000044.php#javascript
So, I have taken to the task of finding a solution to make it work when it is integrated too.
Now into the solution:
Step 1:
Applying rounded corners to an div having only content. I am using the Nifty Corners for the rounded corners (as a first test)
Changed my Mind: Proceeding with where I left... Starting with CuryCorners Plugin
Working Normally for a simpl,e div with text
Step 2:
Now applying Slider into the div:
When the slider is applied to the div, the corners are getting applied but the slider href are getting manipulated when the curvyCorners function is being called
Step 3:
Eliminate the Slider and only put a div with a href and the curvy corners js and its related functions
Working fine, but when when tested for the returning of the value of
$(this).parent().attr('href').slice(1) returns the whole url string instead of the last number or the last element
for suppose
this is the url:
file:///Users/saideep/Public/Problem-RoundedCorners/curvyCorners.html#6
Instead of giving 6 it returns the whole url after the curvycorners method is invoked only in IE6 & IE 7. For firefox it is working fine
Step 4:
Now debugging into the curvy corners Method in curvycorners.src.js
Step by step and function by function, at one point you see that in the above js file the author is taking a back-up of the whole content in the following syntax:
this.boxContent = this.box.innerHTML;
along with other properties and then he is doing the following
this.box.innerHTML = "";
And then re-assigning the content into another new div as follows:
var contentContainer = document.createElement("div");
contentContainer.innerHTML = this.boxContent;
This is where the problem persists. Actually when we the backup of the whole content is being done and re-assigned in IE 6 & 7 versions. the href attribute is getting stored with the complete base url.
And in the coda slider onclick functionality we have been using the following
theInterval($this.parent().attr('href').slice(1) - 1);
where in the attr('href') is returning the whole url and in the string format which is not getting sliced. To the above instead if you put the following syntax, and split the whole by "#" and get the number from the array, here you go you get what you are waiting for:::
theInterval($this.parent().attr('href').split("#").slice(-1)-1);
Step 5:
Integrate and look with the working version of Coda-Slider & the CurvyCorners in IE 6 & 7 as well.
