SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Create array of div History?

    Wow, another wierd javascript question! Ok. I can't alert the history array of the index page or use that arrays indexOf to read and write it to go back to predetermend conditional index of that array? If I could alert the history array and read the array elements then I might be able to write and go to one of the history array elements specificaly? So I might be able to use window onload to create an array that stores the classname of a div every time the divs classname is changed then go back in page history to the classname specified?

    Window Onload function
    Code:
    addEvent(window,'load',function(){
    var f1=document.getElementById('f1');
    var f1history=['product','htmlpage'];//create array of the classNames of 'f1' div?
    },false);
    
    var f1=document.getElementById('f1');
    var sidebar=document.getElementById('sidebar');
    addEvent(sidebar,'click',function(){
    f1history.length+='f1.className';//add the current className of 'f1' to 'f1history' array?
    },false);
    
    var header=document.getElementById('header');
    addEvent(header,'click',function(){
    if((f1history.length>0)&&(f1history.length.indexOf('htmlpage')){
    window.history=f1history[0];
    /*
    not sure that returning the className of 'f1' will work it should return the index number of 
    f1history array! Because 'f1' divs className has to be 'product' and the window has to return to the last time 'f1's' className was 'product'
    */
    },false);
    That should explain what I'm trying to do, maybe not? Please let me know of any way to achieve the same proposed result

  2. #2
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs down Create array of div History?

    Well I was wrong again, you can alert window history length like so
    Alert Window History Legth
    Code:
    var sidebar=document.getElementById('sidebar');
    addEvent(sidebar,'click',function(){
    alert(f1.className);}//alerts: either 'product' or 'htmlpage'
    alert(window.history.length);}//alerts: '4'
    ,false);
    This alert showed me that the history of the page had not changed at all even after httprequest to change 'f1' innerHTML and className, so the window history array can't help me. The problem is that after responceText alters 'f1' innerHTML the client can load an Object html page to 'f1' and change 'f1' className to 'htmlpage' which obstructs the view of an expanded div 'f2'. So I need to delete the object in 'f1' before 'f2' expands by clicking on header in 'f2' called by viewcart().

  3. #3
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Create array of div History?

    Ok. It turns out that I realy need to create an array of the li elements clicked with the className 'Item'. Every time one of the li items is clicked their id is added to the array so I'll call it 'products'. The 'products' array will be queried for the last item in that array 'products[-1]' when the header of a table in div 'f2' is clicked to expand the table and div 'f2' up and above div 'f1' and this function exists and works and is called 'viewcart()'. The problem is that the client makes http requests that change the innerHTML of 'f1' by clicking different links that change 'f1'. There are two types of changes with each element clicked that acctualy rewrite the className of 'f1'. 'f1 className product' and 'f1 className htmlpage'.

    1. 'f1 className product' uses get.php to change f1 innerHTML with Ajax
    2. 'f1 className htmlpage' appends an object containing static html pages on the server to f1 innerHTML


    when 'viewcart()' is called it queries the className of 'f1' and can alert 'You must return to the product page'+lastIndexOf.products. I would like to use a pseudo prompt that alters the innerHTML of 'f1' called f1prompt something like f1promt document create element prompt('You have to return to product page:',lastIndexOf.products). What would be realy sweet is that when the client clicks the OK. button in 'f1prompt' the last li element className 'item' clicked is acctually clicked again without the client having to do it.
    viewcart() with alert
    Code:
    //var items=[]; created with window onload or li element onclick??
    //items+=this.id; add to items array with li onclick
    function viewcart(){
    var items=cartbody.rows.length;
    if(f1.className=='htmlpage'){
    alert('You must return to the last product page: Silver Jewelry.');
    //works though 'Silver Jewelry' is static and doesn't click the Silver Jewelry link for the client
    //f1prompt('You have to return to the last product page:',+lastIndexOf.products)
    //would be perffect if clicking the OK. button in f1prompt would reclick the lastIndexOf 'products' array??
    }
    if(items<=1){//stops 'f2' expanding if client hasn't ordered an item
    alert('You have not ordered an Item.   ');
    }
    if((f2.className=='register')&&(items>=2)){
    f2.className='viewcheckout';
    submitbutton.style.visibility='hidden';
    printorder.style.visibility='hidden';
    orderinfo.style.visibility='hidden';
    header.className='header';
    carttable.style.top='0px';
    carthead.setAttribute('title','Click Header to Continue Shopping');
    ordersum.setAttribute('title','Click to Continue Shopping');
    getinvoice();
    getorderdate();
    }
    else{
    f2.className='register';
    header.className='header2';
    carttable.style.top='22px';
    carthead.setAttribute('title','Click Header to View more of Your Order');
    ordersum.setAttribute('title','Click to View more of Your Order');
    }}
    I'm pritty sure this methode can work so I'm going to set up a function that creates f1prompt but I'll deffinatley need help with stripping the last indexOf.items array to add an onclick function to the Ok. button. Not to mention adding the id of the li element clicked to the blank items array or geting the last value added to that array
    Any help greatly appreciated!!
    Last edited by Heinz Stapff; Oct 7, 2011 at 15:29. Reason: created with window onload or li element onclick??

  4. #4
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Create array of div History?

    Ok. The product array was created and a push of this.id in the onclick function is supposed to add it to the array. Unfortunatley when I use prompt 'You must return to page', products slice -1 the prompt returns 'You must return to page', Undefined.
    The Sript Shortend
    Code:
    var products=new Array();//empty array
    var sidebarli=document.getElementById('sidebar').getElementsByTagName('li');   
    for(i=0;i<sidebarli.length;i++){   
    if(sidebarli[i].className=='item' && sidebarli[i].parentNode.className=='prod'){ 
    sidebarli[i].onclick=function(){   
    alert(this.id+': Is sending your request.');
    EvalSound1();
    var p=this.id;
    products.push(P);//add to products??
    //more
    }}
    
    function viewcart(){
    var items=cartbody.rows.length;
    if(f1.className=='htmlpage'){
    prompt('You must return to product page: ',products.slice[-1]); //returns undefined may need '+' ??
    //prompt('You must return to product page: ', +products.slice[-1]); returns 'NaN' ?
    }
    Last edited by Heinz Stapff; Oct 7, 2011 at 17:12. Reason: returns 'NaN' ?

  5. #5
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Create array of div History?

    Ok. When I change prompt to alert products slice -1 the alert turns up undefined. Is there some security measure that causes this? No, it's got to be a syntax error with the add to array/push or the + products slice -1???

  6. #6
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Create array of div History?

    Wierd Science. When I add alert products 0 to the onclick function it returns the correct value, if I alert products -1 it returns undefined. The prompt products slice 0 or -1 both return 'Undefined'.

    The Onclick with Alert products Array 0 & -1
    Code:
    var products=new Array();
    var sidebarli=document.getElementById('sidebar').getElementsByTagName('li');   
    for(i=0;i<sidebarli.length;i++){   
    if(sidebarli[i].className=='item' && sidebarli[i].parentNode.className=='prod'){ 
    sidebarli[i].onclick=function(){   
    alert(this.id+': Is sending your request.');
    EvalSound1();
    var p=this.id;
    var pp=p.toString();//converted to string??
    products.push(pp);
    alert(products[0]);//returns 'silver' correctly?
    alert(products[-1]); //returns 'undefined' didn't try adding two clicked items yet?

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    South Africa
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi Heinz

    could you please provide necessary html code ?

    alert(products[-1]); //returns 'undefined' didn't try adding two clicked items yet?
    that's because there is no element -1 in the array, array elements start from 0

    <html>
    <head>
    <title>
    </title>
    <script type="text/javascript">
    var prods = ['pro1', 'pro2', 'pro3'];
    function add()
    {
    prods.push('meeow');
    }

    function display()
    {
    alert(prods.slice(-1) + ' : prods.slice(-1)'); // returns meeow
    alert(prods.slice(0) + ' : prods.slice(0)'); //returns pro1, pro2, pro3, meeow
    alert(prods.slice(1) + ' : prods.slice(1)'); // returns pro2, pro3, meeow
    alert(prods.slice(2) + ' : prods.slice(2)'); // returns pro3, meeow
    alert(prods.slice(3) + ' : prods.slice(3)'); // returns meeow
    alert(prods.slice(prods.length) + ' : prods.slice(prods.length)'); // returns nothing
    alert(prods.slice(prods.length - 1) + ' : prods.slice(prods.length - 1)'); // returns meeow

    alert(prods[-1] + ' : prods[-1]'); // returns undefined
    alert(prods[0] + ' : prods[0]'); // returns pro1
    alert(prods[1] + ' : prods[1]'); // returns pro2
    alert(prods[2] + ' : prods[2]'); // returns pro3
    alert(prods[3] + ' : prods[3]'); // returns meeow
    alert(prods[prods.length] + ' : prods[prods.length]'); // returns undefined
    alert(prods[prods.length - 1] + ' : prods[prods.length - 1]'); // returns meeow

    }

    </script>
    </head>
    <body>
    <input value="bleh" type="button" onclick="add();display();"/>
    </body>
    </html>

  8. #8
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Create array of div History?

    ulricht609 Thanks for jumping in, looks like I need an if else statement on the length of products. The push works because I checked the length by adding onclick to button that alerts products length. unfortunatley
    alert(products.slice(-1) + ' : products.slice(-1)'); // returns undefined in the prompt when products length is 1
    //Which is wierd as products length 1 actualy means two 0 & 1 ?
    Will try it again but I'm pritty sure I've seen a function that querys the length of an array before it uses slice[-1]

    Actually I was wrong, that is the correct syntax, this works and I can't thank you enough. Muchos Mas Gracias!
    viewcart() that works
    Code:
    function viewcart(){
    var items=cartbody.rows.length;
    if(f1.className=='htmlpage'){
    prompt('You need to return to product page: ',products.slice(-1));//returns 'silver' in prompt box
    //the exact affect I wanted. I thought I had tried it but must have done it wrong
    //the products length doesn't have to be longer than 1 or element 0 of the array
    //which is actually alert as length returning '1'?
    }
    Now I have to create a pseudo prompt which changes the innerHTML of 'f1' and gets the slice[-1] value just like the prompt input does. Then when the client clicks the OK./Return button I can apply the onclick calling the the original function with the value in that input?

    Thanks again ulricht609 for your instruction. Excelent demontration of the power of Javascript. I'll post back when all is done.

  9. #9
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    South Africa
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no probs man lol anytime


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
  •