I am trying to give every second div in my container a different background color compared to the first one. The issue I have is, that there is a JavaScript code in between the divs. Here is an example:
echo '<div class="holder">';
echo '<script type="text/javascript"></script>';
echo '<div class="list_item"></div>';
echo '<script type="text/javascript"></script>';
echo '<div class="list_item"></div>';
echo '<script type="text/javascript"></script>';
echo '<div class="list_item"></div>';
echo '<script type="text/javascript"></script>';
echo '<div class="list_item"></div>';
echo '<script type="text/javascript"></script>';
echo '<div class="list_item"></div>';
echo '</div>';
When I now add the following css code:
.holder .list_item:nth-child(even) {
background-color:#fff;
}
it will give all of the divs the white background color.
Does anyone have an idea how to solve this???
P.S: I changed the css code to nth-child(odd) as well to test it. But that didn't work either.
You need nth-of-type instead of nth-child. This will only take <div> tags into account, regardless of what is in between of them.
The :nth-child() pseudo-class will count all siblings sharing the same parent.
Since you have multiple element types in the container, and you are targeting only the divs, you can skip over the script elements by using :nth-of-type() instead.
:nth-of-type() matches only elements of the same type.
So when you say:
I am trying to give every second div in my container a different background color compared to the first one.
Try something like this:
div:nth-of-type(even)
There are two child elements per entry. There is a script child and a div child. You could either address the divs using :nth-child(4n+1) (or +3 for even), or you could use the :nth-of-type selector to just address the div elements:
:nth-of-type(odd / even) {…}
Related
I am trying to hide the following:
<h1>aaa <?php echo HTML_SOBI::getMyCategories($mySobi, true);?> aaa</h1>
If the current div is present on the page:
<div id="bbb">
I tried to use this (Didn't work):
<div id="bbb" <?php if (condition) { echo 'style="display:none;"; } else {
echo <h1>Find More <?php echo HTML_SOBI::getMyCategories($mySobi, true);?> </h1>; } ?></div>
I thought that this would do what was expected but crashed the site in that area.
Sorry if this is newbie mistake or bad coding I am just starting out and couldn't find the right fit of code for this.
There will be tens of different eays to code this up. Critically, you need to ensure that:
you are closing any opening quotes associated with your inline style declarations
you are closing any opened html tags (<div)
These factors are essential to generate valid markup that will behave as you intend. If the following doesn't work as expected, you will need to clarify/edit your question.
<div id="bbb"<?php echo $condition ? ' style="display:none;"' : ''; ?>>
<?php
if (!$condition) {
echo '<h1>Find More ' , HTML_SOBI::getMyCategories($mySobi, true) , '</h1>';
}
?>
...
Note, I reckon the second (negated) condition is probably not needed, but I'll leave it to be demonstrative.
Another consideration is to use the condition block to assign a class to all elements that you wish to hide. If the condition is true, add the class like hiddenTag to the tags, then in your css file declare .hiddenTag { display: none; }.
I want to make some mini-blog using php, the code is next:
while($row = #mysql_fetch_array ($fetch)) {
echo '<div class="content-posts">';
echo $row['bio'] ;
'</div>';
}
the .content-posts Div is width:800px; and height 250px;
and I have them 5x echoed. but they go one over another (please check picture to see how it looks)
http://i.imgur.com/N5ogsMu.png
As you can see on picture, not only that divs go one over another, but also every next post goes a bit to the right, duo to border. if I delete border in CSS, they will be in same vertical line, but they will still be one over another.
can anyone suggest me proper code?
Thanks in advance!
while($row = #mysql_fetch_array ($fetch)) {
echo '<div class="content-posts">';
echo $row['bio'] ;
echo '</div>';
}
should work. Check the error-output settings of your PHP configuration. Your code above should result at least in a warning.
I have a <div> inside a while loop and inside this while loop I'm dynamically creating tables with different number of rows, therefore the div tag within the first while loop cannot have a pre-set size since some tables generated can be longer than expected.
Example of how my code is like:
while ()
{
echo '<div>';
echo '<table>';
while ()
{
echo '<tr></tr>'; // this varies since number of row retrieve may be different which is causing the issue
}
echo '</table>';
echo '<div>';
}
I am having trouble creating a solution that will target the end row of a MySQL query. Currently I have a foreach function that works through the query and displays each one as a div with the information inside:
<?php $residents = Resident::find_all();
foreach($residents as $resident): ?>
<div class="submenu">
<p class="menuitem submenuheader"><?php echo $resident->name; ?></p>
<img src="images/<?php echo $resident->image_path(); ?>" width="250" class="image" />
<p><?php echo $resident->info; ?></p>
</div>
.submenu currently has a bottom border. I need to remove this on the last row returned. I have looked at DESC LIMIT 1, however this requires another MySQL query and could make things very messy...
Addd this to your CSS:
.submenu:last-child { border-bottom: 0; }
Note: this is not supported by IE < 9.
You could switch to putting the border on the top of the element, and use the :first-child pseudo selector in CSS to remove it.
http://reference.sitepoint.com/css/pseudoclass-firstchild
The :last-child selector would be nice, but it's not supported in IE before version 9, so it's not a good idea to use it if you want compatibility.
If you separate your HTML and PHP a little this is easily achieved:
<?php
function echoBlock($resident,$pClass="menuitem submenuheader") {
echo "<div class=\"submenu\">\n<p class=\"$pClass\">\n";
echo $resident->name;
echo "</p>\n<img src=\"images/";
echo $resident->image_path();
echo "\" width=\"250\" class=\"image\" />\n<p>";
echo $resident->info;
echo "</p>\n</div>\n\n";
}
$residents = Resident::find_all();
$last=count($residents)-1;//2 element array last pos is 1
for ($i=0;$i<$last;$i++) {
echoBlock($residents[$i]);
}
echoBlock($residents[$last],"menuitem");
?>
echoBlock (which could easily be a method on a class) requires the calling code to know about the classes it uses, which isn't really separating intent but it does prevent the need for an if branch on every loop. That being said it would be less efficient but perhaps more usable to set it up as:
function echoBlock($resident,$isLast=false) {
$pClass="menuitem".($isLast?"":" submenuheader");
//...
Which then doesn't need the caller to know anything about what echoBlock does.
You could try and pop the array using array_pop(), to get the last value out of the array and then inputing it using the special class after the foreach loop.
What about
Instead of echo'ing each line one by one, create one big string in PHP, search for the last entry of "submenu" and change the class.
for($v=0;$v<11;$v++) {
echo "<div class='unsubscribed'><a class='button'>Unsubscribe</a></div>";
echo "<div id='$v'></div>";
}
I want onclick of the class unsubscribed to remove the div below in the same iteration. So for this i have to pass $v to jquery.
This is what i started with jquery but i don't know how to get the variable $v. How do i accomplish this?
$.ready(
function() {
$('.unsubscribed').remove();
}
);
you do not need to pass anything to jquery :
$(document).ready(function(){
$('.unsubscribed').one('click',function(){
$(this).next().remove();
});
});
This works for your current html.
To be more safe, you should add a class to the elements you want to be removed:
for($v=0;$v<11;$v++) {
echo "<div class='unsubscribed'><a class='button'>Unsubscribe</a></div>";
echo "<div class='to_be_removed'></div>";
}
This way you can reference the div you want to remove withouth it being necessarily after the unsubscribed div :
$(document).ready(function(){
$('.unsubscribed').one('click',function(){
$(this).next('.to_be_removed').remove();
});
});
A better solution might be:
<?php for($v=0;$v<11;$v++) { ?>
<div class="unsubscribed" rel="<?php echo $v; ?>">
<a class='button'>Unsubscribe</a>
</div>
<div id="<?php echo $v; ?>"></div>
<?php } ?>
$(document).ready(function(){
$(".unsubscribed").click(function(){
var div_to_remove = $(this).attr("rel");
$('#'+div_to_remove).remove();
});
});
I prefer doing it this way, because working with .next can sometimes cause problems, when you add something in between. It can be very hard to find the problem then.
This way, you simply embed the needed information about the div you want to remove into an attribute of the div that triggers the event.
Note: in this example, the function is called on clicking the .unsubscribed div - not the .button.
You also have to make sure, the removable divs have different and unique ids. If $v isn't unique, you can do e.g. something like this:
...
<div id="<?php echo $v . $i; ?>"></div>
...