SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dispaly Array Items in Divs

    Hi there,

    I have a php array as follows:


    PHP Code:
    <?php 
    $brand 
    = array ( 
    "nike" => array ( 
                    array( 
    'logo'=>'images/nike.png''description'1=>'some nike text'), 
                    array( 
    'logo'=>'images/nike.png''description2'=>'some nike text'), 
                    array( 
    'logo'=>'images/nike.png''description3'=>'some nike text')), 
    "puma" = array( 
                    array( 
    'logo'=>'images/puma.png''description'=>'some puma text'), 
                    array( 
    'logo'=>'images/puma.png''description'=>'some puma text'), 
                    array( 
    'logo'=>'images/puma.png''description'=>'some puma text')), 
    "addidas" = array( 
                    array( 
    'logo'=>'images/addidas.png''description'=>'some addidas text'), 
                    array( 
    'logo'=>'images/addidas.png''description'=>'some addidas text'), 
                    array( 
    'logo'=>'images/addidas.png''description'=>'some addidas text')), 
    "Asics" = array( 
                    array( 
    'logo'=>'images/Asics.png''description'=>'some Asics text'), 
                    array( 
    'logo'=>'images/Asics.png''description'=>'some Asics text'), 
                    array( 
    'logo'=>'images/Asics.png''description'=>'some Asics text')), 
    "Qicksilver" = array( 
                    array( 
    'logo'=>'images/Qicksilver.png''description'=>'some Qicksilver text'), 
                    array( 
    'logo'=>'images/Qicksilver.png''description'=>'some Qicksilver text'), 
                    array( 
    'logo'=>'images/Qicksilver.png''description'=>'some Qicksilver text')), 
    ); 
    ?>
    The goal is to display the brand names ie Puma, Nike etc as hyperlinks in a div:


    Code:
    <div id="brand-nav">
    
    </div>

    Then when you click on one of the hyperlinks, it will load the content within the arrays. For example when you click on the Nike link, it will load the 3 array items into a div below:

    Code:
    <div id="brand-content">
    
    </div>

    I understand that to achieve this effect, I would be better using Javascript so that I don't navigate away from the current page, and avoid page refreshes etc. So I believe that it would be easier to convert my php array as a JSON object.



    Code:
    <script type="text/javascript">
    var brand = <?php echo json_encode($brand) ?>;
    </script>



    So now the array is a JSON object, I need to iterate over it to display just the brand names as hyperlinks.



    Code:
    for (var n in brand){
    for (var i in brand[n]){
         document.write('<a href="' + brand[n][i].logo + '">' + brand[n][i].description + '</a>');
        }
    }



    With this code it is just dumping all the array items for every brand.

    So essentially I would like to display all the brands names as hyperlinks within the brand-nav div and onClick, load all related array items for that brand.

    Hope someone can help.

    Volterony

  2. #2
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have had a play about and had some help and manged to get part of my issue solved:

    Code:
    <?php
    $brand = array (
    "nike" => array (
                    array('logo'=>'images/nike.png', 'description' =>'some nike text'),
                    array('logo'=>'images/nike.png', 'description' =>'some nike text'),
                    array('logo'=>'images/nike.png', 'description' =>'some nike text')),
    "puma" => array(
                    array('logo'=>'images/puma.png', 'description' =>'some puma text'),
                    array('logo'=>'images/puma.png', 'description' =>'some puma text'),
                    array('logo'=>'images/puma.png', 'description' =>'some puma text')),
    "addidas" => array(
                    array('logo'=>'images/addidas.png', 'description'=>'some addidas text1'),
                    array('logo'=>'images/addidas.png', 'description'=>'some addidas text2'),
                    array('logo'=>'images/addidas.png', 'description'=>'some addidas text3')),
    "Asics" => array(
                    array('logo'=>'images/Asics.png', 'description'=>'some Asics text'),
                    array('logo'=>'images/Asics.png', 'description'=>'some Asics text'),
                    array('logo'=>'images/Asics.png', 'description'=>'some Asics text')),
    "Qicksilver" => array(
                    array('logo'=>'images/Qicksilver.png', 'description'=>'some Qicksilver text'),
                    array('logo'=>'images/Qicksilver.png', 'description'=>'some Qicksilver text'),
                    array('logo'=>'images/Qicksilver.png', 'description'=>'some Qicksilver text')),
    );
    ?>
    
    <style type="text/css">
    a {
    margin-left:10px;
    }
    #brand-content {
    margin-top:50px;
    border:solid 1px #000;
    padding:10px;
    display:none;
    width: 50%;
    }
    #brand-content img {
    margin-right:25px;
    }
    
    
    </style>
    
    <script>
    
    var brand = <?php echo json_encode($brand) ?>; // json_encode($brand) is equivalent to the following: {"nike":[{"logo":"images\/nike.png","description":"some nike text"},{"logo":"images\/nike.png","description":"some nike text"},{"logo":"images\/nike.png","description":"some nike text"}],"puma":[{"logo":"images\/puma.png","description":"some puma text"},{"logo":"images\/puma.png","description":"some puma text"},{"logo":"images\/puma.png","description":"some puma text"}],"addidas":[{"logo":"images\/addidas.png","description":"some addidas text"},{"logo":"images\/addidas.png","description":"some addidas text"},{"logo":"images\/addidas.png","description":"some addidas text"}],"Asics":[{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"}],"Qicksilver":[{"logo":"images\/Qicksilver.png","description":"some Qicksilver text"},{"logo":"images\/Qicksilver.png","description":"some Qicksilver text"},{"logo":"images\/Qicksilver.png","description":"some Qicksilver text"}]}
    
    function readyLinks()
    {
     for (var n in brand){
      for (var i in brand[n]){
       var link = document.createElement("a");
       link.href = brand[n][i].logo;
       link.innerHTML = n;
       link.setAttribute("data-description",brand[n][i].description);
       link.onclick = function(){
        document.getElementById("brand-content").innerHTML = "<img src=\""+this.href+"\"/>" + this.getAttribute("data-description");
        document.getElementById("brand-content").style.display = "block";
        return false;
       }
      }
      document.getElementById("brand-nav").appendChild(link);
     }
    }
    
    window.onload = function() {
     readyLinks();
    }
    
    </script>
    
    <!-- body -->
    
    <div id="brand-nav"></div>
    
    <div id="brand-content"></div>
    However It only seem seems to be loading 1 item from the array into the brand-content div. So for example if I click on the Nike div, it only loads item 3 and items 1 and 2 are missing?

    Any ideas?

    Volterony

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2013
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It might be easier to load all the content first then use click events to show / hide the appropriate content.

    For example:

    Code:
    foreach( $brand as $key => $item ) {
        <div class="<?php echo $key ?>">
             <a href="" class="js-toggle" data-area="<?php echo $key; ?>-area"><?php echo $key; ?></a>
             <div class="js-<?php echo $key; ?>-area">
                     //Loop through again and display everything from inside the array
             </div>
        </div>
    }
    Now you need to set up the click event.

    Code:
    $( '.js-toggle' ).click( function( e ) {
    
        var target = e.target;
    
        $( '.js-' + $( target ).attr( 'data-area' ) + '-area' ).slideToggle( 'fast' );
    
         e.preventDefault();
    });
    I havent testing this properly but an approach like this would work.


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
  •