SitePoint Sponsor |
|
User Tag List
Results 1 to 10 of 10
-
Mar 4, 2009, 08:04 #1
- Join Date
- Dec 2006
- Location
- USA
- Posts
- 59
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I need a alt-title-target array for my Script
I am a novice when it comes to Javascript, but I am fairly proud of the one I have working at Total Physique Online
In the Sponsor section, I have one banner in particular that updates each day automatically. It's pretty cool.
However, due to the fact that the code is a customized code of a tutorial I saw online, I cannot take full credit for it, and the fact that I am creating this thread is largely due to the fact that I lack a fundamental understanding of how to create arrays from scratch without breaking the code I so painstakingly got to work (I know the code may look simple to most jscript masters, but for a guy like me this was like creating a masterpiece! heheh I know....sad eh?)
Here is the code:
Code:today = new Date(); day = today.getDay(); arday = new Array("http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/sunday.gif", "http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/monday.gif", "http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/tuesday.gif", "http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/wednesday.gif", "http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/thursday.gif", "http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/friday.gif", "http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/saturday.gif"); arURL = new Array("http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=4421", "http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=1012", "http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=4999", "http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=6132", "http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=6127", "http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=1026", "http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=6191"); document.write("<a href='" + arURL[day] + "'><img src='" + arday[day] + "' border='0'><\/a>");
Can someone take the above code, copy it, add the required elements and post it in this thread?
I want to thank you in advance.
Many blessings.
-
Mar 4, 2009, 08:33 #2
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
Let's compartmentalize the code so that it's easier to make changes to it, without breaking how it works.
Code javascript:function dayImage(day) { var dayOfWeek = [ 'sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday' ]; return 'http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/' + dayOfWeek[day] + '.gif'; } function url(day) { urlCode = [ '4421', '1012', '4999', '6132', '6127', '1026', '6191' ]; return 'http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=' + urlCode[day]; } var today = new Date(); var day = today.getDay(); var image = '<img src="' + dayImage(day) + '" border="0">'; var link = '<a href="' + url(day) + '">' + image + '<\/a>' document.write(link);
Does that make it easier for you to see where the changes you need to make, should occur?Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Mar 4, 2009, 08:40 #3
- Join Date
- Aug 2007
- Posts
- 566
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I personally found OOP more readable, so:
Code JavaScript://we create an object to hold the banner infos banner=function(url, img, alt, trg){ this.url=url this.alt=alt this.img=img this.target=trg } //we create the banners ban1=new banner('http://www.av.com','http://1.sitepointstatic.com/images/new/logo.gif','this is the alt 1','_top') ban2=new banner('http://www.av.com','http://1.sitepointstatic.com/images/new/logo.gif','this is the alt 2','_top') ban3=new banner('http://www.av.com','http://1.sitepointstatic.com/images/new/logo.gif','this is the alt 3','_top') ban4=new banner('http://www.av.com','http://1.sitepointstatic.com/images/new/logo.gif','this is the alt 4','_top') ban5=new banner('http://www.av.com','http://1.sitepointstatic.com/images/new/logo.gif','this is the alt 5','_top') ban6=new banner('http://www.av.com','http://1.sitepointstatic.com/images/new/logo.gif','this is the alt 6','_top') ban7=new banner('http://www.av.com','http://1.sitepointstatic.com/images/new/logo.gif','this is the alt 7','_top') //and associate them to the array ary=new Array(ban1, ban2, ban3, ban4, ban5, ban6, ban7) //we get the day of week number day = new Date().getDay(); //and we output the html code lnk="<a href='"+ary[day].url+"' alt='"+ary[day].alt+"' title='"+ary[day].alt+"' target='"+ary[day].trg+"'><img src='"+ary[day].img+"' border='0'/></a>" document.write(lnk)
would be my go.
-
Mar 4, 2009, 08:41 #4
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
Here's a second pass at that code, which may be easier to update and maintain over time:
Code javascript:var imageSource = 'http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/'; var sponsorPrefix = 'http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend='; var sponsor = [ {image: 'sunday.gif', code: '4421', title: 'Order ... today'}, {image: 'monday.gif', code: '1012', title: 'Order ... today'}, {image: 'tuesday.gif', code: '4999', title: 'Order ... today'}, {image: 'wednesday.gif', code: '6132', title: 'Order ... today'}, {image: 'thursday.gif', code: '6127', title: 'Order ... today'}, {image: 'friday.gif', code: '1026', title: 'Order ... today'}, {image: 'saturday.gif', code: '6191', title: 'Order ... today'} ]; var today = new Date(); var day = today.getDay(); var image = '<img src="' + imageSource + sponsor[day].image + '" border="0">'; var title = 'title="' + sponsor[day].title + '"'; var href = 'href="' + sponsorPrefix + sponsor[day].code + '"'; var link = '<a ' + href + ' ' + title + ' target="_top">' + image + '<\/a>'; document.write(link);
Edit:
@tripy: Ahh, it seems we have both arrived at similar inspirationsLast edited by paul_wilkins; Mar 4, 2009 at 09:38.
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Mar 4, 2009, 09:18 #5
- Join Date
- Dec 2006
- Location
- USA
- Posts
- 59
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Tripy, I took your suggestion and customized the code thusly:
Code://we create an object to hold the banner infos banner=function(url, img, alt, trg){ Order.url=url Order.alt=alt Order.img=img Order.target=trg } //we create the banners ban1=new banner('http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=4421','http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/sunday.gif','Order Vitamin C Today','_blank') ban2=new banner('http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=1012','http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/monday.gif','Order CO Q-10 Today','_blank') ban3=new banner('http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=4999','http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/tuesday.gif','Order OmeGold Today','_blank') ban4=new banner('http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=6132','http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/wednesday.gif','Order Daily Biobasics Today','_blank') ban5=new banner('http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=6127','http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/thursday.gif','Order MSM Plus Today','_blank') ban6=new banner('http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=1026','http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/friday.gif','Order Real NRG Today','_blank') ban7=new banner('http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend=6191','http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/saturday.gif','Order Proanthenols Today','_blank') //and associate them to the array ary=new Array(ban1, ban2, ban3, ban4, ban5, ban6, ban7) //we get the day of week number day = new Date().getDay(); //and we output the html code lnk="<a href='"+ary[day].url+"' alt='"+ary[day].alt+"' title='"+ary[day].alt+"' target='"+ary[day].trg+"'><img src='"+ary[day].img+"' border='0'/></a>" document.write(lnk)
I am calling the script with this line of code:
Code:<li><script language="javascript" type="text/javascript" src="/wordpress/wp-content/themes/redux2/js/spotlight.js"></script></li>
-
Mar 4, 2009, 09:19 #6
- Join Date
- Dec 2006
- Location
- USA
- Posts
- 59
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Mar 4, 2009, 09:26 #7
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
My apologies, that code was written without testing it live.
Change the gifSource to imageSource and it'll work perfect.Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Mar 4, 2009, 09:34 #8
- Join Date
- Dec 2006
- Location
- USA
- Posts
- 59
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
~giggle~
I am always puzzled how a teeny tiny letter or space or word can break or make a code in js.
Paul, thanks. That worked. The only problem is that the target array fails.
This is how I coded it:
Code:var imageSource = 'http://totalphysiqueonline.com/wordpress/wp-content/themes/redux2/images/days/'; var sponsorPrefix = 'http://www.lifepluscentral.com/members/capture.cgi?pin=2353283&resend='; var sponsor = [ {image: 'sunday.gif', code: '4421', title: 'Order Vitamin C Plus today!', target: '_blank'}, {image: 'monday.gif', code: '1012', title: 'Order COQ-10 today!', target: '_blank'}, {image: 'tuesday.gif', code: '4999', title: 'Order OmeGold EPA today!', target: '_blank'}, {image: 'wednesday.gif', code: '6132', title: 'Order Daily BioBasics today!', target: '_blank'}, {image: 'thursday.gif', code: '6127', title: 'Order MSM Plus today!', target: '_blank'}, {image: 'friday.gif', code: '1026', title: 'Order RealNRG today!', target: '_blank'}, {image: 'saturday.gif', code: '6191', title: 'Order Proanthenols today!', target: '_blank'} ]; var today = new Date(); var day = today.getDay(); var image = '<img src="' + imageSource + sponsor[day].image + '" border="0">'; var title = 'title="' + sponsor[day].title + '"'; var href = 'href="' + sponsorPrefix + sponsor[day].code + '"'; var link = '<a ' + href + ' ' + title + ' target="_top">' + image + '<\/a>'; document.write(link);
OK I see what I need to do. Paul thanks. Tripy THANKS!@!!!!!
-
Mar 4, 2009, 09:49 #9
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
It doesn't serve much purpose to place identical information in the sponsor array.
Remove the target properties from the sponsor array and adjust instead the link variable near the bottom of the script so that it says target="_blank"Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Mar 4, 2009, 10:02 #10
- Join Date
- Aug 2007
- Posts
- 566
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
@tripy: Ahh, it seems we have both arrived at similar inspirations
It broke the images so that no image or link appears in the banner section. Did I implement this improperly?
You changed
Code:banner=function(url, img, alt, trg){ this.url=url this.alt=alt this.img=img this.target=trg }
Code:banner=function(url, img, alt, trg){ Order.url=url Order.alt=alt Order.img=img Order.target=trg }
Changing "Order" back to "this" corrected it.
Bookmarks