I have a js file that is being called in the body. The jQuery won’t execute in IE6, IE8 and possibly IE7. Here’s the files contents:
$(document).ready(function(){
$('img[src="/v/vspfiles/templates/cyberfront/images/buttons/btn_addtocart_small.gif"]').replaceWith('<br /><span id="blackbutton" class="mediumbutton" style="display:block;">Add to Cart</span>');
$('input[src="/v/vspfiles/templates/cyberfront/images/buttons/btn_go_gray.gif"]').replaceWith('<input type="submit" class="graybutton smallbutton" name="Go" alt="Go" value="Go" title="Go">');
$('input.previous_page_img').attr({class: 'graybutton mediumbutton', src: '/v/vspfiles/templates/eastcoasttvs/images/buttons/btn_prevpage.png'});
$('input.next_page_img').attr({class: 'graybutton mediumbutton', src: '/v/vspfiles/templates/eastcoasttvs/images/buttons/btn_nextpage.png'});
$('img[src="/v/vspfiles/templates/cyberfront/images/Bullet_MoreInfo.gif"]').replaceWith('<span class="learnmore">Learn More</span>');
$('td[background="/v/vspfiles/templates/cyberfront/images/Divider_Horizontal.gif"]').remove();
$('td.v65-productRow-bottom').remove();
$('select').wrap('<div class="styled-select" />');
});
Should I put this in the head rather than a separate file? Should I call the file in the head. Is there a problem with my markup?
—-EDIT—-
I made a fiddle and tested it in IE6, IE7 & IE8 I’ve confirmed it does not work in those browsers. The fiddle: http://jsfiddle.net/2mJWF/
If it renders properly this will be the final result
<body>
<br><span id="blackbutton" class="mediumbutton" style="display:block;">Add to Cart</span>
<input type="submit" class="graybutton smallbutton" name="Go" alt="Go" value="Go" title="Go">
<input type="image" src="/v/vspfiles/templates/eastcoasttvs/images/buttons/btn_prevpage.png" class="graybutton mediumbutton">
<input type="image" src="/v/vspfiles/templates/eastcoasttvs/images/buttons/btn_nextpage.png" class="graybutton mediumbutton">
<span class="learnmore">Learn More</span>
<table>
<tbody>
<tr>
</tr>
</tbody>
</table>
<div class="styled-select"><select>
<option>Hello</option>
</select></div>
</body>
The easiest way to tell if it worked is to see if you see a line that says Hllo Hello if you don’t see that line, it worked, if you do see the line it did not.
After checking the JSLint on that fiddle, I found out setting the class attribute is not valid so I changed it to
.addClass. My updated fiddle: http://jsfiddle.net/2mJWF/4/.