www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: Can't get title change on for loop [i]=0

  1. #1
    Join Date
    Nov 2009
    Posts
    268

    Question Can't get title change on for loop [i]=0

    Hey Guy's,
    this is a wierd one. The for loop works on all the pseudo links except the first one? I hope it's a matter of [i-1] but can't figure out how I'd write it.
    This is the relevant js.
    Code:
    //appended to row
    var additemlink=document.createElement('span');
    additemlink.setAttribute('title','Review this '+item+', then click Continue Shopping to return.');
    additemlink.className='itemlink';
    additemlink.onclick=function()
    {
    this.style.color='red';
    this.setAttribute('title',this.innerText+', item just reviewed.');
    var eimg=document.getElementById('eimg');
    eimg.firstChild.src=ref;
    eimg.style.display='block';
    EvalSound1();
    f2.className='register';
    tablecontainer2.style.display='block';
    invoice2.style.display='block';
    this.parentNode.parentNode.scrollIntoView(false);
    var itemlinks=document.getElementsByClassName('itemlink');
    for(var i=0;i<itemlinks.length;i++)
    {
    if(itemlinks[i] !== this )
    {
    itemlinks[i].setAttribute('title','Review this '+itemlinks[i].innerText+', then click Continue Shopping to return.');
    itemlinks[i].style.color='#2c3664';
    this.style.color='red';
    this.setAttribute('title',this.innerText+', just reviewed.');
    }
    }
    };
    additemlink.onmouseover=function()
    {
    var itemlinks=document.getElementsByClassName('itemlink');
    for(var i=0;i<itemlinks.length;i++)
    {
    if((this.style.color=='red')&&(eimg.style.display=='block'))
    {
    this.setAttribute('title','Showing: '+this.innerText);
    //I think itemlinks[i-1].setAttribute('title',?????????
    itemlinks[i].setAttribute('title','Review this item: '+itemlinks[i].innerText+', then click Continue Shopping or Sub Total above to return.');
    }
    if((this.style.color=='red')&&(eimg.style.display=='none'))
    {
    this.setAttribute('title',this.innerText+', item just reviewed.');
    itemlinks[i].setAttribute('title','Review this item: '+itemlinks[i].innerText+', then click Continue Shopping or Sub Total above to return.');
    }
    }
    };
    Any help greatly appreciated. It works on all but the first one?
    Last edited by THEFOOL; 04-02-2012 at 09:30 PM.

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,438

    Lightbulb

    I believe it is this statement...
    Code:
    {
    if(itemlinks[i] !== this )
    {
    It bypasses the title logic when i=0.
    It would happen elsewhere when the i value does not equal the value of 'this'.

    Add an 'else' { alert('Value of i: '+i+'\n'+this); } portion to this 'if' to see if what I predict will happen.

  3. #3
    Join Date
    Nov 2009
    Posts
    268

    Can't get title change on for loop [i]=0

    Right on JMRKER will do
    Last edited by THEFOOL; 04-02-2012 at 10:17 PM.

  4. #4
    Join Date
    Nov 2009
    Posts
    268
    JMRKER You're right, the first onclick didn't alert anything, the second onclick alerted 'Value of i: 1 [htmlspanelement]'. The problem is, how do you get itemlink[0] to change it's title after it has been clicked?

  5. #5
    Join Date
    Nov 2009
    Posts
    268

    Can't get title change on for loop [i]=0

    JMRKER SET THE ALERT TO THIS BUT IT DOESN'T ALERT ON THE FIRST 'ITEMLINK' CLICKED IT ONLY ALERTS ON THE NEXT PSEUDO LINKS
    Code:
    alert('Value of i: '+(i-1)+'\n'+this);
    SHOULD IT BE VAR I<0;? WILL CHECK IT OUT

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,438

    Question Clarification needed...

    Quote Originally Posted by THEFOOL View Post
    JMRKER SET THE ALERT TO THIS BUT IT DOESN'T ALERT ON THE FIRST 'ITEMLINK' CLICKED IT ONLY ALERTS ON THE NEXT PSEUDO LINKS
    Code:
    alert('Value of i: '+(i-1)+'\n'+this);
    SHOULD IT BE VAR I<0;? WILL CHECK IT OUT
    You don't show the HTML that goes along with your snippet,
    so I'm not sure what the reference 'this' is testing.

    If 'this' has a 'name' or 'id' value, then try...
    Code:
    alert('Value of i: '+i+'\n'+this.name);
    // alert('Value of i: '+i+'\n'+this.id);
    Can you be a bit more specific about what it is that you are trying to do?
    Last edited by JMRKER; 04-02-2012 at 11:33 PM.

  7. #7
    Join Date
    Nov 2009
    Posts
    268
    JMRKER unortunatley the html is an insertrow with append span span to cell and onclick added with the appended element and I realize this may be the wrong way to go because I'm setting the title with the onclick and that is why the function should be called from outside of the insertrow function? Unless I could use
    Code:
    if(itemlinks[i-1]==this)

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,438

    Exclamation

    Quote Originally Posted by THEFOOL View Post
    JMRKER unortunatley the html is an insertrow with append span span to cell and onclick added with the appended element and I realize this may be the wrong way to go because I'm setting the title with the onclick and that is why the function should be called from outside of the insertrow function? Unless I could use
    Code:
    if(itemlinks[i-1]==this)
    The problem with this logic is that if 'i' is zero, then the element of the array is out-of-bounds right off the bat.
    If you want this logic, then you would need to start the 'for' loop at i=1 instead.

    But then, without additional logic change, you would probably not set the last element of the array.
    As in:
    (for i=1; i<max_arr_position; i++) { ...
    would need to change to:
    (for i=1; i<max_arr_position+1; i++) { ...


    Might be time to just re-think the task to better define what the end result is to attain.

  9. #9
    Join Date
    Nov 2009
    Posts
    268

    Thumbs up

    Wow JMRKER , that was a wild lesson in CSS as well as javascript. I had set the style by external CSS for .itemlink:hover to change the color of the link from basicaly blue to green therefore the first itemlink hovered over would never recieve the if style is blue statement to change the title in the first place. I commented out the :hover in the style sheet so the color remained equal to the if at all times. Not only that but I only needed to set the title attributes in the onmouseover not in the append span or the onclick function. I still don't know how to add the hover effect after setting the style color with onclick the CSS :hover command no longer has any affect at all? Is hover an attribute? I guess I'd have to change the classnames of the itemlinks[i] or just recall itemlinks[i].className= to get the blue links to turn green on hover again but the script as written bellow accomplishes everything except the hover affect very well.

    Code:
    var additem=itemrow.insertCell(1);
    additem.className='item';
    additem.colSpan='3';
    var additemlink=document.createElement('span');
    additemlink.className='itemlink';
    //additemlink.setAttribute('title','Review this item, then click Continue 
    Shopping or Sub Total above to return.');
    //not needed as it also overides the first spans title
    //mouseover first, get the title change first
    additemlink.onmouseover=function()
    {
    var itemlinks=document.getElementsByClassName('itemlink');
    for(var i=0;i<itemlinks.length;i++)
    {
    if((itemlinks[i].style.color=='red'/*change to green to catch css :hover?*/)&&(eimg.style.display=='none'))
    {
    itemlinks[i].setAttribute('title',this.innerText+', item just reviewed.');
    //maybe itemlinks[i].className='itemlink2' to get new :hover?
    }
    //use direct comparison else if
    else if((itemlinks[i].style.color=='red')&&(eimg.style.display=='block'))
    {
    itemlinks[i].setAttribute('title','Showing: '+this.innerText);
    //maybe itemlinks[i].className='itemlink2' to get new :hover?
    }
    //set the blue span speudo links automatically
    else
    {
    itemlinks[i].setAttribute('title','Review this '+itemlinks[i].innerText+', then click Continue Shopping or Sub Total above to return.');
    //maybe itemlinks[i].className='itemlink' to restore :hover?
    }
    }
    };
     
    //add onclick after so that color changes made by onclick don't affect mouseover
    additemlink.onclick=function()
    {
    this.style.color='red';
    var eimg=document.getElementById('eimg');
    eimg.firstChild.src=ref;
    eimg.style.display='block';
    EvalSound1();
    f2.className='register';
    tablecontainer2.style.display='block';
    invoice2.style.display='block';
    this.parentNode.parentNode.scrollIntoView(false);
    var itemlinks=document.getElementsByClassName('itemlink');
    for(var i=0;i<itemlinks.length;i++)
    {
    if(itemlinks[i]==this )
    {
    this.style.color='red';
    //over-rides css :hover?
    }
    if(itemlinks[i]!==this )
    {
    itemlinks[i].style.color='#2c3664';
    //over-rides css :hover?
    //maybe itemlinks[i].className='itemlink'? to reset :hover 
    }
    }
    };
    will have to check it out latter. I'm brained out. Any insight greatly appreciated. Ispell this latter
    Last edited by THEFOOL; 04-03-2012 at 08:10 PM.

  10. #10
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,438
    :hover is a pseudo-attribute. I don't believe it can be changed with an onclick event.

    You don't need to post your entire program, but it would be easier for me to analyze
    if you included a brief portion of the HTML that is being effected by your JS
    so we can see the effect that you are trying to achieve.

  11. #11
    Join Date
    Nov 2009
    Posts
    268

    Question Can't get title change on for loop [i]=0

    JMRKER , It is prity dificult to load html that is created with insertrow styled html and I'm not sure it will explain beyond my previous endeavours.
    1. #f1 div recieves ajax responseText. Multiple fieldsets in div rows showing each item row from dbase
    2. #f2 recieves insertrow to tbody[0].rows[0] when buttons are clicked in #f1 fieldsets in responseText
    3. #f2 className .register shows tbody[0].rows[0] only scroll y only
    4. #tablecontainer2 with cloned table for fixed header covers top half of #f2 .register, position fixed z-index 2.
    5. #tablecontainer2 onclick changes #f2 className to .viewtable
    6. #f2 .viewtable covers #f1 to show full table scroll y only
    7. .itemlink span is in insertrow.cells[1]
    8. #eimg div covers #f1 when .itemlink is clicked to show enhanced item image scroll x only
    That is about a simple as I can put it and I'm not sure it explains the required 'if' statements. I'm testing out className changes now to see if I can maintain the on hover affect. Let me know if you understood any of this.

  12. #12
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,438
    Too confusing for me with so little code provided.

    I'm afraid I really don't understand your problem
    and probably cannot be of much further help.

    Good Luck!

  13. #13
    Join Date
    Nov 2009
    Posts
    268
    JMRKER Yes, I'll have to take some screen shots to show you what I'm getting at. I've got a script that works but it takes out the css :hover. Can't do it till next teusday. Happy Easter.

  14. #14
    Join Date
    Nov 2009
    Posts
    268
    JMRKER hey, I got video mpeg4 of screen shots that might help demonstrate the cause and affect of this post. I hope it can be uploaded here. That way any of the javascript guru's might be able to help. I guess the post title should have been made more clear, something like ' CSS Hover affect gone after mouseover javascript '. Woops, WebDeveloper.com won't allow mpeg files of any kind to upload. What a shame. I guess it could lead to an official WebDeveloper.com Porno site?

  15. #15
    Join Date
    Nov 2009
    Posts
    268

    resolved Can't get title change on for loop [i]=0

    JMRKER , I solved it like so

    External CSS
    HTML Code:
    .itemlink 
    { 
    display:block; 
    color:#2c3664; 
    white-space:nowrap; 
    text-decoration:none; 
    }
    .itemlink:hover 
    { 
    color:#e8b23d; 
    text-decoration:none;
    }
    #itemlink2 
    { 
    display:block; 
    color:red !important; 
    white-space:nowrap; 
    text-decoration:none; 
    }
    #itemlink2:hover 
    { 
    color:#e8b23d !important; 
    text-decoration:none;
    }
    .JS FILE
    Code:
    var additem=itemrow.insertCell(1);
    additem.className='item';
    additem.colSpan='3';
    var additemlink=document.createElement('span');
    additemlink.className='itemlink';
    additemlink.onmouseover=function()
    {
    var itemlinks=document.getElementsByClassName('itemlink');
    for(var i=0;i<itemlinks.length;i++)
    {
    if((itemlinks[i].id==='itemlink2')&&(eimg.style.display=='none'))
    {
    itemlinks[i].setAttribute('title',this.innerText+', item just reviewed.');
    }
    else if((itemlinks[i].id==='itemlink2')&&(eimg.style.display=='block'))
    {
    itemlinks[i].setAttribute('title','Showing: '+this.innerText);
    }
    else
    {
    itemlinks[i].setAttribute('title','Review purchase of: '+itemlinks[i].innerText+', then click Continue Shopping or Sub Total above to return.');
    }
    }
    };
    additemlink.onclick=function()
    {
    var eimg=document.getElementById('eimg');
    eimg.firstChild.src=ref;
    eimg.style.display='block';
    EvalSound1();
    f2.className='register';
    tablecontainer2.style.display='block';
    invoice2.style.display='block';
    this.parentNode.parentNode.scrollIntoView(false);
    var itemlinks=document.getElementsByClassName('itemlink');
    for(var i=0;i<itemlinks.length;i++)
    {
    if(itemlinks[i]==this )
    {
    this.id='itemlink2';
    }
    if(itemlinks[i]!==this )
    {
    itemlinks[i].className='itemlink';
    itemlinks[i].id='';//Necessary!!!!!!!!!!!!!!
    }
    }
    };
    additemlink.appendChild(document.createTextNode(item));
    additem.appendChild(additemlink);
    Last edited by THEFOOL; 04-13-2012 at 12:28 PM. Reason: ;//Necessary!!!!!!!!!!!!!!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles