I have 2 selectors that can be itemID-XX and articleID-YY like this:
.itemID-XX.articleID-YY
The XX and YY are numbers that are generated dynamically by this script:
<div class="itemID-<?php echo $item->id; ?> articleID-<?php echo $article_id; ?>">
How can I say in CSS if XX=YY then add my declarations, or through PHP if XX=YY then add a new class, or maybe jQuery?
Thank you.
The best is to add a new class if the numbers are the same.
Inside the routine that echoes the classes, add this:
<div class="itemID-<?php echo $item->id; ?> articleID-<?php
echo $article_id;
if ($item->id==$article_id)
echo " thesame";
?>">
and then you can simply use .thesame for a selector in CSS.
Update
Answer is No
as with plain css we cant compare two classes you need js for that
If you want to select static selectors only then below code will work for you
[class*='XX'][class*='YY']{
// code here
}
/* if you want to target both */
[class*='XX'][class*='YY'] {
color: red;
}
/*to target YY*/
[class*='YY']{
color: green;
}
/*to target XX*/
[class*='XX']{
color: blue;
}
<p class="itemID-XX articleID-YY">xx yy</p>
<p class="articleID-YY">yy</p>
<p class="itemID-XX">yy</p>
<p class="as-dsads-as">dsds</p>
Related
CSS
.number{
float:none;
background-color:white;
cursor:ponter;
}
#panel{
background-color:red;
height:200px;
width:100px;
overflow-y:scroll;
}
I want to make a list of number in a panel. I've tried with HTML
HTML
<div id="panel>
<span class="number">1</span>
<span class="number">2</span>
<span class="number">3</span>
<span class="number">4</span>
.....
<span class="number">50</span>
</div>
When <span> is clicked, something will appear by jQuery, but I have no problem with jQuery.
Because I thought that looping the number manually doesn't efficient, I tried to use PHP.
PHP
<?php
for($number=0;$number<=50;$number++){
echo "<span class='number'>".$number."</span>";
}
?>
But the number made by PHP doesnt do the same like HTML does.
This is what I want and done by HTML.
This is done with PHP and the numbers are made horizontally until 50
You need to make sure the same whitespace is present when looping through it in PHP:
<?php
for($number=0;$number<=50;$number++){
echo "<span class='number'>".$number."</span>\n";
}
?>
Remember, your original code is just outputting one long string:
<span class='number'>1</span><span class='number'>2</span>...
In this case, whitespace (A newline) is important which may alter how your CSS looks. Forcing a new line each time you echo out a <span> by adding \n should fix this.
.number{ display : inline-block; }
I'm designing a web page to show some commodity
results (such Model, price, Comment) for every Commodity is a database
and I call theme to show in each Commodity (it while be shown in a div)
I wanna to set backgrounds for each div (it saved in database and every Commodity have one background-image)
please tell me whats the true syntax for this div s
for example I wrote this code:
<div class="commodities"> <style>.commodities{ background-image:<?php $Images[$i]?>} </style>
<?php
echo "Model:";
echo $Models[$i];
echo "<br><br>";
echo "Price: ";
echo $Prices[$i];
echo "<br><br>";
echo $Comments[$i];
?>
</div>
please help me to fix this part of code: { background-image:}
You have to do this:
<div class="commodities" style="background-image: url('<?php $Images[$i]?>');">
<?php
echo "Model:";
echo $Models[$i];
echo "<br><br>";
echo "Price: ";
echo $Prices[$i];
echo "<br><br>";
echo $Comments[$i];
?>
</div>
If you put < style > tags in the < body > (put it on the < head > tags) you are doing nothing ;)
Instead use style property. ;)
Apart you are forgetting to use url tag on the background-image property. ;)
You are missing two keywords, scoped and url. See e.g. http://www.w3schools.com/tags/att_style_scoped.asp and http://www.w3schools.com/cssref/pr_background-image.asp.
use inline css.
<div style="background-image: url(<?php echo $variable_name; ?>);">
or
use internal css.
<style type="text/css">
.logo {
background: #FFF url(<?php echo $variable_name; ?>);
}
</style>
So basically i would like to color the comments from users so it look clear and separate.
The comments is coming from the database, the php codes will generate the comments in a HTML page. And i am using CSS and Jquery as well. I have tried but my codes don't work, any idea?
HTML/PHP:
<?
for($i=0;$i<mysql_num_rows($comment);++$i)
{
$row = mysql_fetch_array($comment);
?>
<div class = "comment">
<p> <? echo $row['c_content']; ?> by <? echo $row['c_name']; ?> </p>
</div>
<?}?>
CSS:
.comment
{
background-color:#fff;
}
.alt
{
background-color:#ccc;
}
Jquery:
$(document).ready(function(){
$(".comment:odd").addClass('alt');
});
So as you can see, I want the "odd" comment class have color #CCC, and the even have #FFF... Please help
No need to use jQuery here. Use CSS:
.comment:nth-child(even) {
background-color: #fff;
}
.comment:nth-child(odd) {
background-color: #ccc;
}
Unrelated, but worth noting is that unless you're using both associate and numerical keys to access your mysql result, you should get into the habit of using mysql_fetch_assoc() instead of mysql_fetch_array() or you are always using twice as much memory.
Is it possible to change the div's font-size depending on how many characters are in it? I have image album titles in small fixed width div's (100px). Sometimes the album names have too many characters that they force a new line. So I was wondering if it is possible to re-size the font to keep the title on one line?
Yes, by assigning a variable to a class:
In your css:
.longstring {
font-size: 10pt;
}
.shortstring {
font-size: 14pt;
}
In your view
<?php
$random_number = '42';
if(strlen($div_string)>$random_number){
$font_class = 'longstring';
}else{
$font_class = 'shortstring';
}?>
<div class="<?php echo $font_class; ?>">
<?php echo $div_string; ?>
</div>
There is not a css way to do it you can use javascript or text-overflow in css3
i'm trying to use a jQuery show/hide script on a PHP file, and it goes like this:
<?php
foreach ($empresas as $empresa) {
echo "<style type='text/css'>
.$empresa[teaserid] {
width:100%;
background-color: #CCC;
color: #000;
margin-top:10px;
border:1px solid #CCC;
position:relative;
vertical-align:middle;
}
.showhide$empresa[teaserid] {
display:none;
}
</style>";
echo '<script type="text/javascript">';
echo ' $(document).ready(function(){ ';
echo ' $(\".$empresa[teaserid]\").hide(); ';
echo ' $(\".showhide$empresa[teaserid]\").show(); ';
echo ' $(\".showhide$empresa[teaserid]\").click(function(){ ';
echo ' $(\".$empresa[teaserid]\").slideToggle(), 500; ';
echo ' }); ';
echo ' });';
echo '</script>';
echo "<a href='#' class='showhide$empresa[teaserid]'>$empresa[titulo]</a><br />
<div class='$empresa[teaserid]'>
TEST</div>";
}
?>
So, what I need is a foreach in php that echoes new CSS values and a new jQuery script. because each DIV needs different CSS and jQuery to relate and be able to show and hide its content. This echoing didn't work. The CSS goes ok, but the jQuery doesn't with the PHP $strings. What can I do?
Or there's a simpler way to do this? A jQuery function that relates to any current div alone ?
Thanks anyone who helps me in this one..
Worth mentioning:
You can create a settings object to keep your variables in. For example:
Your php:
<?php
$settings = array( 'settingA' => 'something',
'settingB' => 'something else',
'wat' => 9001 );
?>
Keep your JS in your js file - scripts.js, whatever. But you can add this to your html file:
<script>
var settings = <?php echo json_encode( $settings ) ?>;
</script>
What will that output?
var settings = {"settingA":"something","settingB":"something else","wat":9001};
So you can put your required server info in ONE global object (or put it as a property of your application object or something) and can access it.
console.log( settings.settingA ); // returns "something"
Looking further at your question, don't forget you dont' have to stay in the PHP tags. I'm not advocating ever needing PHP in your css, but this should help you grasp the concept:
<style>
<?php foreach ($empresas as $empresa): ?>
.showhide<?php echo $empresa['teaserid'] ?> {
display:none;
}
<?php endforeach; ?>
</style>
In PHP, you can only put variables in double quote strings:
$a = 'Jon';
echo "Hi $a"; // Should output 'Hi Jon'
echo 'Hi $a'; // should output 'Hi $a'
So if you want the Javascript to read:
$(".Jon") // where Jon is the value of $a
Then in PHP you can output it this way:
echo '$(\".' . $a . '\")'; // Notice we are splitting the echo statement into a concatenation of 3 strings
There isn't really a need to have the PHP print out a new block of CSS and Javascript for each item. If you write the css and javascript is a good way, then it will all be handled for you.
One other thing to keep in mind is that PHP is at it's most basic a templating language, so if you find yourself echoing large chunks of code, you are probably being something wrong. Instead something like this:
<?php
$variable = "SOme value";
echo "Some very long huge string with <html> tags and stuff plus $variables";
?>
You can do something like this, opening and closing the tags several times.
<?php $variable = "SOme value"; ?>
Some very long huge string with <html> tags and stuff plus <?php print $variables; ?>
With that covered, here is a reworked version of your code.
As well, rather than needing to make PHP output custom Javascript with hard-coded ids, what you reall need is to structure your javascript so that it doesn't need to know ANY of that stuff at all, as I have done.
<style type='text/css'>
/* The CSS is the same, so just have one class that is used on all the items. */
.empresa-teaser {
width:100%;
background-color: #CCC;
color: #000;
margin-top:10px;
border:1px solid #CCC;
position:relative;
vertical-align:middle;
}
</style>
<script type="text/javascript">
$(function(){
// Hide all of the teasers to start.
$(".empresa-teaser").hide();
// Add a handler for when the show/hide link is clicked.
$(".showhide-empresa-teaser").click(function(){
// When it is clicked, find the next item with the 'empresa-teaser' class
// and show it using a sliding toggle effect.
$(this).nextAll('.empresa-teaser:first').slideToggle(500);
});
});
</script>
<?php foreach ($empresas as $empresa) { ?>
<a href='#' class="showhide-empresa-teaser">
<?php print $empresa['titulo']; ?>
</a>
<br />
<div class="empresa-teaser">TEST</div>
<?php } ?>