#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    21
    Rep Power
    0

    Help with sorting


    Hy all i have a webpage with some products how can i make a button for sorting the products by price or by name?The button i know do it but the rest not so much.
    Thanks in advance
  2. #2
  3. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,008
    Rep Power
    2791
    Post some example code.
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [ANSI C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    21
    Rep Power
    0
    i don't have yet i don't know if is a begining i don't know from where to start i must use only js this is what i have

    PHP Code:
    sort_by_price.onclick = function(){
        var 
    childs  document.getElementById('contentdiv').childNodes;
        var 
    childs_length childs.length;
        var 
    nb_childs = (childs_length 1)/2;
        var 
    nb_childs2 childs_length 2;
        var 
    nb 0;
        var 
    child_clone = new Array(nb_childs);
        var 
    val1 document.getElementById('col2prixeuro').firstElementChild.innerHTML;
        var 
    val2 document.getElementById('col3prixeuro').firstElementChild.innerHTML;
        var 
    val3 document.getElementById('col4prixeuro').firstElementChild.innerHTML;
        
    alert(val1);
        
    alert(val2);
        
    alert(val3);
        

        while(
    nb != nb_childs)
        {
            
    child_clone[nb] = childs[nb_childs2].cloneNode(true);
            
    nb_childs2 -= 2;
            
    nb++;
        }

    return 
    false;

  6. #4
  7. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,008
    Rep Power
    2791
    Example X/HTML, please.
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [ANSI C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    21
    Rep Power
    0
    Originally Posted by Winters
    Example X/HTML, please.
    HTML:
    Code:
    <!--content div-->
           <div id="contentdiv">
    
            <div id="sort-div"><a href="#">Sort</a></div>
    
            <div id="col1">
              <div id="col1img1"><a href="baterie1.html"><img src="./images/b2.jpg"></a></div>
              <div id="col1carac"><p>Batterie FULMEN<br />FB802<br />FORMULA ** </p></div>
              <div id="col1prixeuro"><p>111,57 €</p></div>
              <div id="col1prixht"><p>93,27 € HT</p></div>
              <div id="col1buy"><a href="panier.html"><img src="./images/acheter.png"></a></div>
              <div id="col1stock"><p>En stock</p></div>
            </div>
    
            <div id="col2">
              <div id="col2img1"><a href="baterie2.html"><img src="./images/b3.jpg"></a></div>
              <div id="col2carac"><p>Batterie de démarrage<br />P-Start 50-500L/0<br />12V 50Ah +D</p></div>
              <div id="col2prixeuro"><p>75,50 €</p></div>
              <div id="col2prixht"><p>63,11 € HT</p></div>
              <div id="col2buy"><a href="panier.html"><img src="./images/acheter.png"></a></div>
              <div id="col2stock"><p>En stock</p></div>
            </div>
    
            <div id="col3">
              <div id="col3img1"><a href="baterie3.html"><img src="./images/b4.jpg"></a></div>
              <div id="col3carac"><p>Batterie de démarrage<br />FB357 12V<br />35Ah 240A</p></div>
              <div id="col3prixeuro"><p>92,00 €</p></div>
              <div id="col3prixht"><p>76,91 € HT</p></div>
              <div id="col3buy"><a href="panier.html"><img src="./images/acheter.png"></a></div>
              <div id="col3stock"><p>En stock</p></div>
            </div>
            
           
    
           </div>
           <!--content div finish-->
    And js until now....but i have the impresion cuz i go so far
    PHP Code:
    var sort document.getElementById('sort-div');

    sort.onclick = function(){
        var 
    childs  document.getElementById('contentdiv').childNodes;
        var 
    childs_length childs.length;
        var 
    nb_childs = (childs_length 1)/2;
        var 
    nb_childs2 childs_length 2;
        var 
    nb 0;
        var 
    child_clone = new Array(nb_childs);
        
        var 
    val1 document.getElementById('col1prixeuro').firstElementChild.innerHTML;
        
    val1 val1.substring("€"val1.length -1);
        
    val1 val1.replace(","".");
        
    val1 parseFloat(val1);
        
        var 
    val2 document.getElementById('col2prixeuro').firstElementChild.innerHTML;
        
    val2 val2.substring("€"val2.length -1);
        
    val2 val2.replace(","".");
        
    val2 parseFloat(val2);
        
        var 
    val3 document.getElementById('col3prixeuro').firstElementChild.innerHTML;
        
    val3 val3.substring("€"val3.length -1);
        
    val3 val3.replace(","".");
        
    val3 parseFloat(val3);
        
        if (
    childs_length == 4)
        {
        var 
    val4 document.getElementById('col4prixeuro').firstElementChild.innerHTML;
        
    val4 val4.substring("€"val4.length -1);
        
    val4 val4.replace(","".");
        
    val4 parseFloat(val4);
        }

        
    alert(val1);
        
    alert(val2);
        
    alert(val3);
        while(
    nb != nb_childs)
        {
            
    child_clone[nb] = childs[nb_childs2].cloneNode(true);
            
    nb_childs2 -= 2;
            
    nb++;
        }

        var 
    tab  = [];
        var 
    0;
        while(
    nb_childs != 0)
        {
        
    tab[i] = "val" i;
        
    i++;
        
    nb_childs--;
        }
     
        
    tab.sort(function(a,b){return a-b});

    return 
    false;
    }; 
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Dec 2004
    Posts
    2,990
    Rep Power
    375
    if you want to sort, try jquery sort. it does what you want.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    21
    Rep Power
    0
    Originally Posted by paulh1983
    if you want to sort, try jquery sort. it does what you want.
    it is a project and is forbiden to use anything else just html css and js
  14. #8
  15. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,008
    Rep Power
    2791
    Have a look at this.
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [ANSI C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    21
    Rep Power
    0
    Originally Posted by Winters
    Have a look at this.
    framework is forbiden to
  18. #10
  19. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,008
    Rep Power
    2791
    Right but the code that I linked to has the correct logic. See if you can make it work.
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [ANSI C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.

IMN logo majestic logo threadwatch logo seochat tools logo