Page 12 of 15 FirstFirst ... 289101112131415 LastLast
Results 111 to 120 of 141

Thread: One more: Online Designer?

  1. #111
    jmarcv's Avatar
    jmarcv is offline Cranky Coder
    Join Date
    Jan 2005
    Posts
    354

    Default

    subroutines.
    It is beyond the scope of the next 10 minutes I have. It will be several days before I am back, but....

    #1 is if you had renamed images as I suggested:
    This could be used for ALL your images without having to write out theimage name for each one.

    document.getElementById('cardTemplate').style.back groundImage='url(designer/images/pics/backgrounds/'+this.value+'.jpg)';


    Until then...

  2. #112
    rlhanson's Avatar
    rlhanson is offline Master Glow Jedi
    Join Date
    Aug 2007
    Location
    Chapman, Kansas
    Posts
    531

    Default

    John-Marc,
    I am waiting until I have the majority of images to upload to change the names to the database value....and will come back to this portion of my question then.

    New question (are you groaning?) lol

    I am working on the font selection for each line of the designer. I have it functioning as radio buttons but want them in list menus.

    I found a function which works for one line and one id of the list menus:

    Code:
    function selectCallback(s) 
    {  
    // This function gets called when selection changes  
     if( s.selectedIndex == -1 ) return;  
     var v = s.options[s.selectedIndex].value; 
     switch(v) {
     case '443':   
     // Change Company Name Font   
     document.getElementById('companyName').style.fontFamily='Arial';   
     break;  
     case '444':
     document.getElementById('companyName').style.fontFamily='verdana';  
     break;  
     default:   
     // Do nothing for other selections 
     break; 
     } 
    }
     
    function attachBehaviors() 
    { 
     // Attach event handler to your select object  
     var s = document.getElementById("select1");  
     if( s )  
     {  
     s.onchange = function(){selectCallback(s);};  
     }
    }
     window.onload = attachBehaviors;
    I want to be able to have a function that works for id=select1, id=select2, etc...

    id=select2 would change this: document.getElementById('sloganS')
    id=select3 would change this: document.getElementById('titleS')

    Can you just talk me through this. YOu mentioned looping through things before...

    Thanks!
    Thank you,
    Lynne Hanson
    RL Hanson-Online

  3. #113
    jmarcv's Avatar
    jmarcv is offline Cranky Coder
    Join Date
    Jan 2005
    Posts
    354

    Default

    Lets say you have 10 selects.
    Code:
    function attachBehaviors() { 
     // Attach event handler to your select objects  
       for (i=1 ; i<11 ; i++){
        var s = document.getElementById("select"+i);  
        if( s ) {  
          s.onchange = function(){selectCallback(s);};  
        }
       }
    }
    But what you REALLY want is this:
    Instead of IDing it select2, make the id id=select_sloganS
    select3 is select_titleS

    Now, we make an array of our selects - put this aomewhere up top.
    Code:
    selectIDs=['companyName','sloganS','titleS'];
    This will create an array with 3 things in it. The nice thing here, is you just add a new element to the array, make sure you create the html and the following code will automatically create it.
    Note: arrays start with zero, not 1
    The numeric reference is called an 'index'
    eg: selectIDs[2] will contain the string 'titleS'
    Code:
    function attachBehaviors() { 
     // Attach event handler to your select objects  
       for (i=0 ; i<selectIDs.length ; i++){
        var s = document.getElementById("select_"+selectIDs[i]);  
        if( s ) {  
          s.onchange = function(){selectCallback(s,selectIDs[i]);};  
        }
       }
    }
    Note that selectIDs[i] will loop and contain each value each time through. It adds select_ to the name to reference the select, and we pass it to the selectCallback() function, which then gets rewritten like so:
    Code:
    function selectCallback(s,changevar) 
    {  
    // This function gets called when selection changes  
     if( s.selectedIndex == -1 ) return;  
     var v = s.options[s.selectedIndex].value; 
     var theobjtoChange=document.getElementById(changevar);
     switch(v) {
     case '443':   
     // Change Company Name Font   
     theobjtoChange.style.fontFamily='Arial';   
     break;  
     case '444':
     theobjtoChange.style.fontFamily='verdana';  
     break;  
     default:   
     // Do nothing for other selections 
     break; 
     } 
    }
    Lets take it one step further
    Make 1 special 'lookup' array
    Code:
    fontData=[];
    fontData[443]='Arial';
    fontData[444]='verdana';
    ... etc ...
    And our code becomes simpler AND permanent.
    Code:
    function selectCallback(s,changevar) 
    {  
    // This function gets called when selection changes  
     if( s.selectedIndex == -1 ) return;  
     var v = s.options[s.selectedIndex].value; 
     var theobjtoChange=document.getElementById(changevar);
     theobjtoChange.style.fontFamily=fontData[v];
    }
    Any lights coming on?


    Mastering Javascript Arrays

  4. #114
    rlhanson's Avatar
    rlhanson is offline Master Glow Jedi
    Join Date
    Aug 2007
    Location
    Chapman, Kansas
    Posts
    531

    Default

    rofl!!
    Yes, intermittent power to lights as I read through....

    You said,
    Now, we make an array of our selects - put this aomewhere up top.
    This at the top of my html doc or my js file?

    So when you see the i++ it's adding one each time it loops through what I have on the page, right?

    That's the same concept in php also isn't it? I saw in the function code that same type of coding for the optn name....

    Okay - reading through this and trying it out. Thanks so much!
    Thank you,
    Lynne Hanson
    RL Hanson-Online

  5. #115
    jmarcv's Avatar
    jmarcv is offline Cranky Coder
    Join Date
    Jan 2005
    Posts
    354

    Default

    ... at the top of....

    Either one. It just needs to be SOMEWHERE before that onload command.

    and yes, i++ is 'increment.
    shorthand for
    i+=1;
    or
    i=i+1;

  6. #116
    rlhanson's Avatar
    rlhanson is offline Master Glow Jedi
    Join Date
    Aug 2007
    Location
    Chapman, Kansas
    Posts
    531

    Default

    What do I put in the <select> tag? Is the function autmatically creating an ID or do I still assign an ID to them?

    This is what I have in the js file:
    Code:
    selectIDs=['companyName','sloganS','nameS','titleS','address1S','address2S','phoneS','cellS','emailS','websiteS'];
    function attachBehaviors() { 
     // Attach event handler to your select objects  
       for (i=0 ; i<selectIDs.length ; i++){
        var s = document.getElementById("select_"+selectIDs[i]);  
        if( s ) {  
          s.onchange = function(){selectCallback(s,selectIDs[i]);};  
        }
       }
    }
    fontData=[];
    fontData[443]='Arial';
    fontData[444]='Book Antiqua Italic';
    fontData[445]='Bradley Hand ITC';
    fontData[446]='Century Gothic';
    fontData[447]='Comic Sans MS';
    fontData[448]='Copperplate Gothic Bold';
    fontData[449]='Courier';
    fontData[461]='edwardian script ITC';
    fontData[462]='Garamond';
    fontData[463]='Georgia';
    fontData[464]='Haettenschweiler';
    fontData[482]='Helvetica';
    fontData[483]='Impact';
    fontData[484]='Lucida Handwriting';
    fontData[485]='Monotype Corsiva';
    fontData[486]='Tahoma';
    fontData[487]='Times New Roman';
    fontData[488]='Trebuchet MS';
    fontData[489]='Verdana';
    function selectCallback(s,changevar) 
    {  
    // This function gets called when selection changes  
     if( s.selectedIndex == -1 ) return;  
     var v = s.options[s.selectedIndex].value; 
     var theobjtoChange=document.getElementById(changevar);
     theobjtoChange.style.fontFamily=fontData[v];
    }
    in the html
    Code:
     
    <select name="optn34" id="select1" >
                    <option value="443">Arial</option>
                     <option value="444">Bookman</option>
                     <option value="choose" selected="selected">-- Choose Style --</option>   </select>
     
    <select name="optn34" id="select2" >
                    <option value="443">Arial</option>
                     <option value="444">Bookman</option>
                     <option value="choose" selected="selected">-- Choose Style --</option>   </select>
    Sorry, trying to get this.
    Thank you,
    Lynne Hanson
    RL Hanson-Online

  7. #117
    jmarcv's Avatar
    jmarcv is offline Cranky Coder
    Join Date
    Jan 2005
    Posts
    354

    Default

    Skimming are you? I said
    Instead of IDing it select2, make the id id=select_sloganS
    select3 is select_titleS

  8. #118
    rlhanson's Avatar
    rlhanson is offline Master Glow Jedi
    Join Date
    Aug 2007
    Location
    Chapman, Kansas
    Posts
    531

    Default

    I had tried that, then a few others, then realized I didn't have the onload, then just tried it again...can't seem to get it to work.
    I will reskim (lol) in the morning. I actually read it when you posted it this time JohnMarc.
    Thank you,
    Lynne Hanson
    RL Hanson-Online

  9. #119
    jmarcv's Avatar
    jmarcv is offline Cranky Coder
    Join Date
    Jan 2005
    Posts
    354

    Default

    Well, keep in mind that select1 is no referenced anywhere, so it CANT work.

    You DO use Firefox with firebug so it can tell you exactly what the problem is, right?
    Lemee take a look. Whats the URL?

  10. #120
    rlhanson's Avatar
    rlhanson is offline Master Glow Jedi
    Join Date
    Aug 2007
    Location
    Chapman, Kansas
    Posts
    531

    Default

    Here's the page with the js file:
    Untitled Document

    Honestly, I didn't know what the firebug errors meant anyway so I haven't been using it.

    It may be that I also have a nother font selection on that page, I haven't had enough coffee yet to review.
    Thank you,
    Lynne Hanson
    RL Hanson-Online

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
  •  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16