The Set-Up:
I am working on an HTML / JavaScript listing template for on-line auctions. There are two sets of tabbed navigation features in the listing that are driven by javascript as well as a dynamic image gallery. Everything appears to be functioning very nicely. The template is fiddled here. (complete project repository here). However, I have one BIG issue I need help resolving and a couple of smaller items I'd like feedback on.
BIG Issue:
This is the showstopper. I am NOT a javascript programmer yet (but I learning fast), so I don't know how involved of a question this is. Because the template will be used on Ebay, I am restricted to what can be done with javascript. The tabs module that I am using (which I forked from here) uses the replace()function in two places.
removeClass: function (element, className) {
element.className = element.className.replace(new RegExp("(^|\\s)" + className + "(\\s|$)"), "$1");
if (element.className === " ") {
element.className = "";
}
},
and here:
getStyle: function (element, property) {
if (element.style[property]) {
return element.style[property];
}
if (element.currentStyle) { // IE.
return element.currentStyle[property];
}
property = property.replace(/([A-Z])/g, "-$1").toLowerCase(); // Turns propertyName into property-name.
var style = document.defaultView.getComputedStyle(element, "");
if (style) {
return style.getPropertyValue(property);
}
},
Unfortunately, the replace() function is one of the Ebay BANNED JavaScript functions. Is there a replacement or work-around for the replace()? I did find a couple of ideas over on SO here, but I am not sure how to implement them.
Feedback Item:
I feel like the CSS is a mess. Is there tool available that could help streamline CSS and help identify redundant, useless or otherwise inefficient CSS? (besides good old fashioned experience, which I am working on). For instance, I find myself putting a margin:0; or padding:0 in an awful lot.
Feedback Item 2:
Cross browser compatibility. I am making use of the border-radius style in a couple of places. In the CSS, I have added the prefixes -moz and -webkit for these features. However, looking over at caniuse.com it looks like support for this feature is pretty high (over 90%). Is it necessary to include these prefixes in the CSS?
Final Item:
The image gallery is using the onclick() function to pass name attributess to the preview area whenever a thumbnail is clicked. Because the name attribute is obsolete, this method is preventing the file from validating to HTML 5. Is there a different way this could be done using id attributes instead? I tried simply replacing name with id but that didn't work. Alternatively, I do have a script I can use, but it also requires solving the BIG issue above.
