JavaScript Assistance Required

[jscheuer1]

No, not a script, just take care of it. Or not. You seem to like all your code as slimmed down as possible, but you don't want to break your sprites, so it's really up to you. If you decide to try out sliming them down, be sure to keep a backup of your working sprites and, to be on the safe side, also a backup copy of each of your entire working css files before you start.

As far as the exchange sprites go though, you could start with my recommendations:

.exchangesprite{background:url("../../img/exchangesprite.png") no-repeat;width:20px;height:21px;margin-left:10px;display:inline-block}
.zarsprite{background-position:0 -8px}
.usdsprite{background-position:0 -31px}
.gbpsprite{background-position:0 -54px}
.eurosprite{background-position:0 -77px}

Just be sure to keep a backup. As you can see, anything that's repeated exactly in the more specific definitions can be moved to only appear in the overall definition. You can use this as a sort of template for other sprites. Also make sure not to inadvertently overwrite anything from the overall definition. Notice how in the overall definition above I use the shorthand "background" property which will set any and everything in the background* whether it's mentioned or not. When I get to the specific definitions, since all I want to redefine is "background-position", I use that more specific property name.


* Because of that, these can be condensed even a little further:

.exchangesprite{background:url("../../img/exchangesprite.png") no-repeat 0 -8px;width:20px;height:21px;margin-left:10px;display:inline-block}
.usdsprite{background-position:0 -31px}
.gbpsprite{background-position:0 -54px}
.eurosprite{background-position:0 -77px}

The zarsprite is now identical to the overall definition, so needs no further css code, the others simply redefine the background-position, since that's all that changes for them. In fact, once this change is made, you no longer need use the class name zarsprite in the HTML code, but it might be good to keep it for clarity's sake. Other sprites I see you have feature more variety in their definitions, so cannot be compressed as much, but still can be whittled down some.

[simonf]

Hi John

Understand what you mean now, thanks again

[simonf]

Hi John

I need your help with the script again....

I did some changes to make the sprites responsive, but now I'm getting a weird effect. Please can you take a look and advise me, thanks in advance.

This is what I wanted

This is what I'm getting

html property code is :

<!-- Property Listing Start -->
<div class="divborder col-md-8"><div class="divTable"><div class="divTableBody"><div class="divTableRow">
<div class="divTableCell"><a href="https://www.property24.com/for-sale/little-falls-ext-2/roodepoort/gauteng/739/105075922" target="_blank"> <img class="pic feathove" src="img/listing/105075922.jpg" alt="" width="450" height="253" />&nbsp;</a></div></div>
<div class="divTableRow"><div class="divTableCell"><h1>Little Falls</h1><h2><span class="zar"><img class="zarsprite" alt="" src="data:../../img/silversprite.png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfAQMAAAAlYIR6AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAxJREFUeNpjYBi0AAAAmwABHpy5RwAAAABJRU5ErkJggg=="></span> R 2,495,000</h2>
<h2><img class="receptionsprite" alt="" src="data:../../img/silversprite.png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhAQMAAABtKlAsAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAxJREFUeNpjYBgOAAAAxgAB/v0USgAAAABJRU5ErkJggg==">3<img class="bedsprite" alt="" src="data:../../img/silversprite.png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhAQMAAABtKlAsAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAxJREFUeNpjYBgOAAAAxgAB/v0USgAAAABJRU5ErkJggg==">4<img class="bathsprite" alt="" src="data:../../img/silversprite.png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhAQMAAABtKlAsAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAxJREFUeNpjYBgOAAAAxgAB/v0USgAAAABJRU5ErkJggg==">2.5<img class="studysprite" alt="" src="data:../../img/silversprite.png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhAQMAAABtKlAsAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAxJREFUeNpjYBgOAAAAxgAB/v0USgAAAABJRU5ErkJggg==">1<img class="garagesprite" alt="" src="data:../../img/silversprite.png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhAQMAAABtKlAsAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAxJREFUeNpjYBgOAAAAxgAB/v0USgAAAABJRU5ErkJggg==">3<img class="swimsprite" alt="" src="data:../../img/silversprite.png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhAQMAAABtKlAsAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAxJREFUeNpjYBgOAAAAxgAB/v0USgAAAABJRU5ErkJggg==">1<img class="coveredpsprite" alt="" src="data:../../img/silversprite.png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhAQMAAABtKlAsAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAxJREFUeNpjYBgOAAAAxgAB/v0USgAAAABJRU5ErkJggg==">1<img class="domestic" alt="" src="data:../../img/silversprite.png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhAQMAAABtKlAsAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAxJREFUeNpjYBgOAAAAxgAB/v0USgAAAABJRU5ErkJggg==">1
<br><img class="erfsprite" alt="" src="data:../../img/silversprite.png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhAQMAAABtKlAsAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAxJREFUeNpjYBgOAAAAxgAB/v0USgAAAABJRU5ErkJggg==">731m²<img class="sizesprite" alt="" src="data:../../img/silversprite.png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhAQMAAABtKlAsAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAxJREFUeNpjYBgOAAAAxgAB/v0USgAAAABJRU5ErkJggg==">TBA<img class="ratesprite" alt="" src="data:../../img/silversprite.png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhAQMAAABtKlAsAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAxJREFUeNpjYBgOAAAAxgAB/v0USgAAAABJRU5ErkJggg==">TBA<img class="levysprite" alt="" src="data:../../img/silversprite.png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhAQMAAABtKlAsAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAxJREFUeNpjYBgOAAAAxgAB/v0USgAAAABJRU5ErkJggg==">TBA
<br><img class="smdianesprite imgsprite" alt="" src="data:../../img/silversprite.png;base64,iVBORw0KGgoAAAANSUhEUgAAAIcAAABGAQMAAADcnRVYAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAABJJREFUeNpjYBgFo2AUjILhDwAE7AABJ87WUwAAAABJRU5ErkJggg=="></h2></div></div><div class="divTableRow"><div class="divTableCell"><div class="social"><h4>&nbsp;</h4></div></div></div></div></div></div>
<!-- Property Listing End -->

JScript Code at bottom of my htmp page:

<script>jQuery(function($){function commatize(num){num=Math.ceil(num).toString(10).split("").reverse();var n=num.length,i=-1,newnum=[];while(++i<n){!(i%3)&&i&&newnum.push(",");newnum.push(num[i])}return newnum.reverse().join("")}jQuery.fn.currencyrates=function(rates){var base=this.text().replace(/\D/g,"");this.append(['  <span class="usd"><img class="usdsprite" alt="" src="data:../../img/silversprite.png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfAQMAAAAlYIR6AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAxJREFUeNpjYBi0AAAAmwABHpy5RwAAAABJRU5ErkJggg=="></span> $ ',commatize(base*rates.USD),'   <span class="gbp"><img class="gbpsprite" alt="" src="data:../../img/silversprite.png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfAQMAAAAlYIR6AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAxJREFUeNpjYBi0AAAAmwABHpy5RwAAAABJRU5ErkJggg=="></span> £ ',commatize(base*rates.GBP),'   <span class="eur"><img class="eurosprite" alt="" src="data:../../img/silversprite.png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfAQMAAAAlYIR6AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAxJREFUeNpjYBi0AAAAmwABHpy5RwAAAABJRU5ErkJggg=="></span> € ',commatize(base*rates.EUR)].join(""))};$.getJSON("http://api.fixer.io/latest?base=ZAR",function(data){$(".divborder.col-md-8 h2").not(":has(i)").each(function(i,z){$(z).currencyrates(data.rates)})})});</script>

[jscheuer1]

Change the script to:

<script>jQuery(function($){function commatize(num){num=Math.ceil(num).toString(10).split("").reverse();var n=num.length,i=-1,newnum=[];while(++i<n){!(i%3)&&i&&newnum.push(",");newnum.push(num[i])}return newnum.reverse().join("")}jQuery.fn.currencyrates=function(rates){var base=this.text().replace(/\D/g,"");this.append(['  <span class="usd"><img class="usdsprite" alt="" src="data:../../img/silversprite.png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfAQMAAAAlYIR6AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAxJREFUeNpjYBi0AAAAmwABHpy5RwAAAABJRU5ErkJggg=="></span> $ ',commatize(base*rates.USD),'   <span class="gbp"><img class="gbpsprite" alt="" src="data:../../img/silversprite.png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfAQMAAAAlYIR6AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAxJREFUeNpjYBi0AAAAmwABHpy5RwAAAABJRU5ErkJggg=="></span> £ ',commatize(base*rates.GBP),'   <span class="eur"><img class="eurosprite" alt="" src="data:../../img/silversprite.png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfAQMAAAAlYIR6AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAxJREFUeNpjYBi0AAAAmwABHpy5RwAAAABJRU5ErkJggg=="></span> € ',commatize(base*rates.EUR)].join(""))};$.getJSON("http://api.fixer.io/latest?base=ZAR",function(data){$(".divborder.col-md-8 h2:has(span.zar)").each(function(i,z){$(z).currencyrates(data.rates)})})});</script>

[simonf]

Hi John

Many thanks yet again....

One small change makes all the difference I see wow

NEW

(".divborder.col-md-8 h2:has(span.zar)")

OLD

(".divborder.col-md-8 h2").not(":has(i)")

rgds, Simon