Page 2 of 2 FirstFirst 12
Results 11 to 15 of 15

Thread: JavaScript Assistance Required

  1. #11
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,327
    Thanks
    76
    Thanked 3,415 Times in 3,376 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    .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:

    Code:
    .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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  2. #12
    Join Date
    Sep 2004
    Location
    Little Falls, Roodepoort, South Africa
    Posts
    408
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    Hi John

    Understand what you mean now, thanks again
    Very Best Rgds, Simonf :cool:
    __________________________________
    My Site | E-Mail Me

  3. #13
    Join Date
    Sep 2004
    Location
    Little Falls, Roodepoort, South Africa
    Posts
    408
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    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.

    Click image for larger version. 

Name:	needed.jpg 
Views:	17 
Size:	51.2 KB 
ID:	6170 This is what I wanted

    Click image for larger version. 

Name:	actual.jpg 
Views:	13 
Size:	57.0 KB 
ID:	6171 This is what I'm getting

    html property code is :
    Code:
    <!-- 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:
    Code:
    <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>
    Very Best Rgds, Simonf :cool:
    __________________________________
    My Site | E-Mail Me

  4. #14
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,327
    Thanks
    76
    Thanked 3,415 Times in 3,376 Posts
    Blog Entries
    12

    Default

    Change the script to:

    Code:
    <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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #15
    Join Date
    Sep 2004
    Location
    Little Falls, Roodepoort, South Africa
    Posts
    408
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    Hi John

    Many thanks yet again....

    One small change makes all the difference I see wow

    NEW
    Code:
    (".divborder.col-md-8 h2:has(span.zar)")
    OLD
    Code:
    (".divborder.col-md-8 h2").not(":has(i)")
    rgds, Simon
    Very Best Rgds, Simonf :cool:
    __________________________________
    My Site | E-Mail Me

Similar Threads

  1. image assistance in javascript
    By Paula57 in forum JavaScript
    Replies: 3
    Last Post: 04-15-2015, 12:25 PM
  2. Javascript/DHTML Tooltip Assistance Please
    By Del087 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 04-29-2014, 09:25 AM
  3. Replies: 5
    Last Post: 11-19-2011, 02:38 PM
  4. expanding table in flash/javascript required
    By janicefernandes in forum JavaScript
    Replies: 0
    Last Post: 06-05-2007, 02:19 PM
  5. Assistance required please.
    By radiocodes in forum Looking for such a script or service
    Replies: 2
    Last Post: 01-29-2007, 04:17 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •