Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: JavaScript Assistance Required

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

    Cool JavaScript Assistance Required

    What I need assistance with is the following...

    I require to do is show alternative currencies based on the exchange rates of the time when the person goes to the page on each and every property listing we have.

    Our Website URL : http://www.silvertreeestates.co.za if you want to take a look

    So I can get the actual updated info for the exchange rates by going to this URL : http://api.fixer.io/latest?base=ZAR

    Now I just need assistance with the actual JavaScript to pull this info and then the HTML code to display it on my page next to each property listing as below example, as my JavaScript ability is limited, so I would need the script element and the HTML element that goes on each listing price:

    Example Current :
    Click image for larger version. 

Name:	dd1.jpg 
Views:	46 
Size:	30.5 KB 
ID:	6095

    What I would like to see :
    Click image for larger version. 

Name:	dd2.jpg 
Views:	40 
Size:	35.6 KB 
ID:	6096

    HTML Code currently for that section:
    Code:
    <!-- Property Listing Start -->
    <div><img src="img/navi.jpg" width="700" height="2" alt="">
                    <table style="width: 100%"><tr><td style="width: 450px" class="text-left">
    <a href="http://www.property24.com/Search/RedirectToListing.aspx?listingNumber=104599615" target="_blank">
                    <img src="img/listing/104599615.jpg" width="450" height="253" alt="" class="bw pic tilt">&nbsp;</a>
                    </td></tr><tr><td>
                    <h1>Little Falls</h1>
                    <h2>ZAR 2,429,999</h2>
                    <h2><i class="iconsprite loungesprite"></i> 4<i class="iconsprite bedsprite"></i> 3<i class="iconsprite bathsprite"></i> 2.5
    <i class="iconsprite garagesprite"></i> 2<i class="iconsprite swimsprite"></i> 1<i class="iconsprite erfsprite">
    </i> 1,004m<i class="iconsprite sizesprite"></i> 390m</h2>
                    </td></tr></table></div>
    <!-- Property Listing End -->
    All help will be greatly appreciated, and many thanks in advance. rgds, Simon
    Very Best Rgds, Simonf :cool:
    __________________________________
    My Site | E-Mail Me

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,218
    Thanks
    74
    Thanked 3,384 Times in 3,345 Posts
    Blog Entries
    12

    Default

    Put this script at the end of the page, just before the closing </body> tag:

    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">US$ ', commatize(base * rates.USD), '</span>',
    			' ~ <span class="gpb">GBP ', commatize(base * rates.GBP), '</span>',
    			' ~ <span class="eur">EUR ', commatize(base * rates.EUR), '</span>'].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>
    Any questions or problems let me know. The script can be made external (in the usual manner, by removing its script tags and placing in an external file), but should still go at the end of the page.

    Demo:

    http://plnkr.co/edit/ylAS8llM8hwOG0hdFUoK?p=preview

    You may need to widen the column that shows the result, otherwise it might be a little horizontally squished.
    Last edited by jscheuer1; 02-08-2017 at 09:03 PM. Reason: minor code improvement - later, add demo
    - John
    ________________________

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

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

    Default

    HI John

    That is so cool... many thanks... I put icons in the script, hope I got that right.... if I want to use a imagesprite in the script, how would I do that??

    Code:
    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 src="img/usd-icon.png" width="20" height="20" alt=""> $ ', commatize(base * rates.USD), '</span>',
    			' , <span class="gpb"><img src="img/uk-icon.png" width="20" height="20" alt="">  ', commatize(base * rates.GBP), '</span>',
    			' , <span class="eur"><img src="img/euro-icon.png" width="20" height="20" alt="">  ', commatize(base * rates.EUR), '</span>'].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);
    		});
    	});
    });
    But in the meantime I cannot thanks you enough mate....

    rgds, Simon
    Very Best Rgds, Simonf :cool:
    __________________________________
    My Site | E-Mail Me

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,218
    Thanks
    74
    Thanked 3,384 Times in 3,345 Posts
    Blog Entries
    12

    Default

    I see that you've placed:

    Code:
    <script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><script src="exchange.js"></script>
    after every listing it looks like, or a lot of them. You don't need any of those. You only need what you already have at the end of the page.

    As to sprites:

    Hmm, I'm not all that up on imagesprites. I mean I know that a sprite is usually a background image that is composed of two or more images in one and that the image you see is set by the size of the element having the sprite as a background image and by the background position style on that element. As you can see, you can put any HTML you like into the currencyrates function. So you just need to put the elements in there that would have the sprite and set their background-image, background-position, and dimensions in style. One other consideration, their display style property should probably be inline-block for that because you want them to be able to have width and height but not cause a line break. So something like:

    Code:
    	jQuery.fn.currencyrates = function(rates){
    		var base = this.text().replace(/\D/g, '');
    		this.append ([' , <span class="usd"><span class="curr-ico"></span> $ ', commatize(base * rates.USD), '</span>',
    			' , <span class="gpb"><span class="curr-ico"></span>  ', commatize(base * rates.GBP), '</span>',
    			' , <span class="eur"><span class="curr-ico"></span>  ', commatize(base * rates.EUR), '</span>'].join(''));
    	}
    Then in your stylesheet you could have something like so (assuming your image sprite is named as indicated):

    Code:
    .curr-ico {
    	width: 20px;
    	height: 20px;
    	background-image: url('img/curr-ico-sprite.png');
    	display: inline-block;
    }
    .usd .curr-ico {
    	background-position: 0;
    }
    .gbp .curr-ico {
    	background-position: 0 20px;
    }
    .eur .curr-ico {
    	background-position: 0 40px;
    }
    The actual positioning would have to correspond to what works best with your image sprite, which you would have to make (or find one) to be suitable for that purpose.
    Last edited by jscheuer1; 02-09-2017 at 09:33 AM. Reason: add info
    - John
    ________________________

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

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

    Default

    Many thanks again... let me work on that and revert back if required, again many thanks
    Very Best Rgds, Simonf :cool:
    __________________________________
    My Site | E-Mail Me

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

    Default

    Hi John

    I managed to get it working 100% to my liking with the imgsprite etc... although knowing myself I will most likely makes some small changes over the next week or so as I tweak the site ROFL

    For all those interested in the final outcome here is the end result which you can see in action on our website : http://www.silvertreeestates.co.za/#littlefalls

    The JavaScript is :

    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"><span class="exchangesprite usdsprite"></span> $ ', commatize(base * rates.USD), '</span>',
    			' : <span class="gpb"><span class="exchangesprite gbpsprite"></span>  ', commatize(base * rates.GBP), '</span>',
    			' : <span class="eur"><span class="exchangesprite eurosprite"></span>  ', commatize(base * rates.EUR), '</span>'].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>
    CSS For the "imgsprite" :
    Code:
    .exchangesprite{background:url("../../img/exchangesprite.png") no-repeat}
    .zarsprite{background:url('../../img/exchangesprite.png') no-repeat -0px -8px;width:20px;height:21px;margin-left:10px;display:inline-block}
    .usdsprite{background:url('../../img/exchangesprite.png') no-repeat -0px -31px;width:20px;height:21px;margin-left:10px;display:inline-block}
    .gbpsprite{background:url('../../img/exchangesprite.png') no-repeat -0px -54px;width:20px;height:21px;margin-left:10px;display:inline-block}
    .eurosprite{background:url('../../img/exchangesprite.png') no-repeat -0px -77px;width:20px;height:21px;margin-left:10px;display:inline-block}
    And the imgsprite I'm using for this :
    Click image for larger version. 

Name:	exchangesprite.png 
Views:	18 
Size:	2.3 KB 
ID:	6097

    Many thanks again John... rgds, Simon
    Very Best Rgds, Simonf :cool:
    __________________________________
    My Site | E-Mail Me

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,218
    Thanks
    74
    Thanked 3,384 Times in 3,345 Posts
    Blog Entries
    12

    Default

    That's great! I always wonder why in the css sprites are often done that way. I suppose it might have something to do with older browsers, though I doubt that page would work very well with them anyway. But perhaps even some modern browsers might need that. My thinking though, since css is cascading, it would seem more efficient to use this css:

    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}
    Also, with the javascript, since you don't appear to be using the spans or the classes I put in there originally, those could be dropped:

    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="exchangesprite usdsprite"></span> $ ', commatize(base * rates.USD),
    			' : <span class="exchangesprite gbpsprite"></span>  ', commatize(base * rates.GBP),
    			' : <span class="exchangesprite eurosprite"></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>
    But, no need to mess with either of those things if it currently works as desired.
    - John
    ________________________

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

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

    Default

    HI John

    With the "imgsprite", when I started using them I found the following.

    width:20px;height:21px this is needed to define the size/part of the img you need. The initial position "background-position:0 -8px" defines the top left hand starting point, then your saying you want a part of the img from this starting point of 20px x 21px (or whatever you need etc) this then defines the img to display.

    I use a nice website online tool called sprite___ to help me define my sprites. upload an image and choose the section you want and it provides the settings....

    Remember you can have different imgs on one actual img... so that's why I define on each part needed

    Sample:
    Click image for larger version. 

Name:	oddsprite.jpg 
Views:	20 
Size:	11.5 KB 
ID:	6099
    the the css code looks like this:
    Code:
    .oddsprite{background:url("../../img/oddsprite.png") no-repeat}
    .qrsprite{background:url('../../img/oddsprite.png') no-repeat -234px -25px;width:126px;height:127px;display:inline-block}
    .onshowsprite{background:url('../../img/oddsprite.png') no-repeat -9px -375px;width:302px;height:28px;display:inline-block}
    .navi4sprite{background:url('../../img/oddsprite.png') no-repeat 0 -36px;width:189px;height:2px;display:inline-block}
    .navi6sprite{background:url('../../img/oddsprite.png') no-repeat 0 0;width:374px;height:2px;display:inline-block}
    .noshowsprite{background:url('../../img/oddsprite.png') no-repeat -9px -375px;width:302px;height:102px;display:inline-block}
    .nolistsprite{background:url('../../img/oddsprite.png') no-repeat -8px -168px;width:301px;height:172px;display:inline-block}
    .pendingsprite{background:url('../../img/oddsprite.png') no-repeat -335px -167px;width:28px;height:210px;display:inline-block}
    .p24sprite{background:url('../../img/oddsprite.png') no-repeat 0 -59px;width:83px;height:27px;display:inline-block}
    .emailsprite{background:url('../../img/oddsprite.png') no-repeat -125px -53px;width:48px;height:45px;display:inline-block}
    The next section "display:inline-block}" is needed to actual display the imgsprite on your site....

    Fixed the JS as well

    rgds, Simon
    Last edited by simonf; 02-10-2017 at 01:14 PM.
    Very Best Rgds, Simonf :cool:
    __________________________________
    My Site | E-Mail Me

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,218
    Thanks
    74
    Thanked 3,384 Times in 3,345 Posts
    Blog Entries
    12

    Default

    That's what I thought, it's auto-generated. Often you get inefficient code that way. The shortened css I wrote in my previous post should yield the same results. But, again, as I said, as long as it's working, no need to change it. But, for the ones that all use the same background image, why define it more than once? For the ones that all have the same width and height, why define that over and over? And the other common attributes of no-repeat on the bg and using display inline-block. It's all so repetitious.
    - John
    ________________________

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

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

    Default

    Hi John

    I understand your input.. re repetition...

    So I guess the question is do you have some script for me to do that to stop the repetition??

    If you would be so kind as always... I'm always looking for ways to improve the site... but as I said previously my JS is basically none existent mate so pretty please with a cherry on top, if you can assist me.
    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, 01: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, 03: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
  •