...

View Full Version : className changer function only works for the first result



slvr99
05-29-2012, 08:02 PM
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


//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:



<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<2 && $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'], 0, 34)." </a> ";?>

<div><div class='childSmallDesc'><?php print substr($smallDesc, 0,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>";
?>




.resultRow {

background-color: #FFF;
height: auto;
width: auto;
top: 0px;
float: left;

}

.resultRow #box{
width: 400px;
height: 129px;
float: left;

border-left: 1px solid rgb(198,198,198);
border-right: 1px solid rgb(198,198,198);
background-image: url(../ll.png);

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


}

.listRow{

background-color: #FFF;
height: auto;
width: auto;
top: 0px;
float: left;

}
.listRow #box{

width: 400px;
height: 36px;
float: left;
border-left: 1px solid rgb(198,198,198);
border-right: 1px solid rgb(198,198,198);
background-image: url(../ll.png);

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

Old Pedant
05-29-2012, 09:09 PM
#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.

slvr99
05-29-2012, 10:45 PM
Sorry I don't have a live preview but I took screenshoots

http://i46.tinypic.com/sqqezl.png

listRow:
http://i49.tinypic.com/6i8wgh.png

resultRow
http://i47.tinypic.com/hvxzbd.png
notice, only the first box is effected by this view mode

slvr99
05-29-2012, 10:47 PM
in the source code, id='box' is looped over 4 times

Old Pedant
05-29-2012, 11:26 PM
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.

slvr99
05-30-2012, 12:18 AM
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 print"
<div id='box".$row['id']."' class='listRow' onClick=\"location.href='$reListingLink';\">
";?>

Old Pedant
05-30-2012, 12:37 AM
??? 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.

Old Pedant
05-30-2012, 12:41 AM
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:


<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:


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 ...
}
}

slvr99
06-03-2012, 08:21 PM
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:


function hybridView(){

var divs = document.getElementsByTagName("div");
for ( var d = 0; d < divs.length; ++d )
{
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 d = 0; d < divs.length; ++d )
{
var div = divs[d];
if ( div.id.substring(0,7) == "wrapper" )
{

div.removeClass = "resultRow";

div.className = "listRow";

}

}
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum