Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    className changer function only works for the first result

    Im using the javascript below to dynamically change the css style of .resultRow div to .listRow #box css style. The problem is that the .listRow style only works for the first box. The php file loops through 20 of these boxes per page. .resultRow style works for all boxes.

    The reason why the .listRow style only works only effects the first box is because there is no .listRow div in the php file. The javascript calls the listRow #box css style to change the look of .resultRow div.

    Please any help would be appreciated. Thanks


    JavaScript
    PHP Code:
    //change the classname of container to hybrid, list, of thumbnail with on-click event
    function hybridView(){
                                            
    document.getElementById("wrapper").className="resultRow" //Assign the class "class1" to element
    }


    function 
    thumbnailView(){ 
                                            
    document.getElementById("wrapper").className="listRow" //Assign the class "class1" to element 

    PHP:
    PHP Code:

    <div class='topBar'>

            <div class="thumbnail_button" onClick="thumbnailView()" ></div>
            <div class="hybrid_button" onClick="hybridView()" ></div>

    </div>


    <?php print " <div id='wrapper' class='listRow'>";?> 


    <?php print"
    <div id='box' class='listRow' onClick=\"location.href='$reListingLink';\">

    "
    ;?>

    <div class='listingSmallImage' style=" width: 80px; height:100px;   background-image: url(timthumb.php?src=<?php print $firstPic?>)"  >
    <a href='javascript: void(0)' onclick="window.open('gallery.php?adid=<?php print $row['id']; ?>','<?php print $row['id']; ?>','width=700, height=600'); return false;">
    <img src='timthumb.php?src=<?php print $firstPic?>' />
    </a>
    </div>




    <?php 
    if($totalRePics<&& $totalRePics>0){
    ?>
    <a href='javascript: void(0)' onclick="window.open('gallery.php?adid=<?php print $row['id']; ?>','<?php print $row['id']; ?>','width=700, height=600'); return false;"></a>    
    <?php }
    if(
    $totalRePics>1){ ?>
    <a href='javascript: void(0)' onclick="window.open('gallery.php?adid=<?php print $row['id']; ?>','<?php print $row['id']; ?>','width=700, height=600'); return false;"></a>
    <?php ?>







    <?php print "<div class='resultHeading'> <a href= 'javascript: void(0)'> ".substr($row['headline'], 034)." </a>  ";?>   

    <div><div class='childSmallDesc'><?php print substr($smallDesc0,165); print"..."?>
    <?php 
    if($row['retype']==$relanguage_tags["Residential"]){ 
    $bedArray=preg_split('#(?<=\d)(?=[a-z])#i'$row['bedrooms']);
        
    ?>
    <div class='listingItem'><ul><li><b><?php print $relanguage_tags["Bedroom"];?>:</b><span class='listingItemValue'><?php print $bedArray[0]." ".$relanguage_tags[$bedArray[1]]; ?></span></li>
    <li><b><?php print $relanguage_tags["Bathroom"];?>:</b><span class='listingItemValue'><?php print $row['bathrooms']; ?></span></li>
    <li><b><?php print $relanguage_tags["Size"];?>:</b><span class='listingItemValue'><?php print $row['resize']; ?> Sq.Ft</span></li>
    </ul></div>
    <?php ?>
    </div>
    </div>





    <?php 
    if($showPrice=="true"){
    print 
    "<div class='price'>$priceValue</div>";
    ?>

    <div class='redpin'>
      <img src='../redpin.png' />
    <?php print "<div class='location'>".$row['city']."
    </div> 
    "
    ;?>
    </div>


    <?php print "
       <div class='date'> "
    .$listingDate."</div>
      "
    ;?>



    <?php 
    print "</div>";
    print 
    "</div>";
    print 
    "</div>";
    ?>
    PHP Code:
    .resultRow {
        
        
    background-color#FFF;
        
    heightauto;
        
    widthauto;
        
    top0px;
        
    floatleft;
        
    }

    .
    resultRow #box{
        
    width400px;
        
    height129px;
        
    floatleft;

        
    border-left1px solid rgb(198,198,198);
        
    border-right1px solid rgb(198,198,198);
        
    background-imageurl(../ll.png);

        
    margin-top:-1px;    
        
    margin-left: -1px;
        

    }

    .
    listRow{
        
        
    background-color#FFF;
        
    heightauto;
        
    widthauto;
        
    top0px;
        
    floatleft;
        
    }
    .
    listRow #box{
        
        
    width400px;
        
    height36px;
        
    floatleft;
        
    border-left1px solid rgb(198,198,198);
        
    border-right1px solid rgb(198,198,198);
        
    background-imageurl(../ll.png);

        
    margin-top:-1px;    
        
    margin-left: -1px;


  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    #box indicates some element in the HTML with id="box".

    It is ILLEGAL HTML to have more than one element in the page with the same id.

    So if you have more than one element with id="box" that could well be the problem.

    But in any case, if you would show us just the HTML, not your PHP code, it would be a lot easier for us to see. To do that, bring up your page in your browser, click on the VIEW menu of the browser, click on the SOURCE or PAGE SOURCE menu item. That will show you the HTML as the browser sees it. Copy/paste that here, instead of the PHP code.

    An even better alternative would be to give us a link to a live page, if possible.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry I don't have a live preview but I took screenshoots



    listRow:


    resultRow

    notice, only the first box is effected by this view mode

  • #4
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    in the source code, id='box' is looped over 4 times

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    I would start by fixing that. Again, IDs are supposed to be *UNIQUE* on a page.

    Anyway, your screenshots don't help. Again, if you want us to really look at your HTML code, see my prior message about how to capture it from your own screen.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    slvr99 (05-30-2012)

  • #6
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Good Idea, This gives each box a unique id but I don't know how I would call these boxes in CSS or in javaScript?
    PHP Code:
    <?php print"
    <div id='box"
    .$row['id']."' class='listRow' onClick=\"location.href='$reListingLink';\">
    "
    ;?>

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    ??? In CSS, they are class="listRow"

    In JS, you just have to iterate through the numbers. Or you could use geElementsByClassName("listRow") to get all of them. Or or or...

    Again, I would want to see the HTML, not the PHP, before deciding on easiest way.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    If you mean that sometimes they are class="listRow" and sometimes class="resultRow", then one easy trick is to give them all ANOTHER class name that is a dummy, just for the purposes of being able to get them with getElementsByClassName.

    example:
    Code:
    <div id='box".$row['id']."' class='listRow boxRow' onClick=\"location.href='$reListingLink';\">
    where boxRow is the dummy.

    But it would also be easy enough to do something like:
    Code:
    var divs = document.getElementsByTagName("div");
    for ( var d = 0; d < divs.length; ++d )
    {
        var div = divs[d];
        if ( div.id.substring(0,3) == "box" )
        {
              .... process this one ...
        }
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for your help, this was pissing me off so i worked on other stiff and ignored it.

    But I got it working thanks to you

    JavaScript:
    PHP Code:
    function hybridView(){ 

    var 
    divs document.getElementsByTagName("div");
    for ( var 
    0divs.length; ++)
    {
        var 
    div divs[d];
        if ( 
    div.id.substring(0,7) == "wrapper" )
        {
                                    
                
    div.removeClass "listRow";
        
                
    div.className "resultRow";
            
            }
             
        }
    }


    function 
    thumbnailView(){ 

    var 
    divs document.getElementsByTagName("div");
    for ( var 
    0divs.length; ++)
    {
        var 
    div divs[d];
        if ( 
    div.id.substring(0,7) == "wrapper" )
        {
                                    
                
    div.removeClass "resultRow";
        
                
    div.className "listRow";
            
            }
             
        }



  •  

    Posting Permissions

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