SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    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>");
    What I want is for each image to have a specific title and alt tag, and for each link to have a target that is _blank - so that when you mouse over the image you get a title that appears that says order such n such today, and when you click the image it launches a new window.

    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.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 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&amp;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

  3. #3
    SitePoint Evangelist
    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.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 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&amp;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 inspirations
    Last 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

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Location
    USA
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tripy View Post
    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.
    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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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)
    It broke the images so that no image or link appears in the banner section. Did I implement this improperly?

    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>
    which was more or less working with my original script.

  6. #6
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Location
    USA
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    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&amp;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="' + gifSource + 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 inspirations
    PMR, like Tripy's suggestion, yours 0 though quite appealing - broke the images as well and left the banner spot empty. Hmmm

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 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

  8. #8
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Location
    USA
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    My apologies, that code was written without testing it live.

    Change the gifSource to imageSource and it'll work perfect.
    ~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&amp;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);
    It will not launch the page in a new window.

    OK I see what I need to do. Paul thanks. Tripy THANKS!@!!!!!

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 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

  10. #10
    SitePoint Evangelist
    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
    Yep, looks like it, but I stayed on a simpler path than you took.

    It broke the images so that no image or link appears in the banner section. Did I implement this improperly?
    Yep.
    You changed
    Code:
      banner=function(url, img, alt, trg){
        this.url=url
        this.alt=alt
        this.img=img
        this.target=trg
      }
    to
    Code:
      banner=function(url, img, alt, trg){
        Order.url=url
        Order.alt=alt
        Order.img=img
        Order.target=trg
      }
    "this" is a keyword that means "in the context of this OOP object, we refer to ourself". You cannot change it like that.
    Changing "Order" back to "this" corrected it.


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
  •