I have HTML code the loads a grid of images. The images have a box-shadow around them. Each image is loaded one by one on the grid, but they are all using the same style sheet. I want to make each box-shadow a different colour for the images. Is this possible?
I tried to test this a simple way by making each alternate image's shadow a different colour, but it only uses the last image's colour that is loaded for all of the images. Here is how I tested it:
//i is defined outside this
if($i == 0){
//I am using PHP to print out the HTML
Echo "<style> ul.rig li { box-shadow: 0 0 10px #2de61c; }</style>";
$i++;
}else if($i == 1){
Echo "<style> ul.rig li { box-shadow: 0 0 10px #ed1515; }</style>";
$i--;
}
Whatever i equals for the last loaded image, the rest of the image's shadows will have that colour. Is it possible to alternate/have different colours like this?
Just use nth-child CSS.
ul.rig li:nth-child(odd) { box-shadow: 0 0 10px #2de61c; }
ul.rig li:nth-child(even) { box-shadow: 0 0 10px #ed1515; }
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
Why not use something like:
//i is defined outside this
if($i == 0){
//I am using PHP to print out the HTML
Echo "<htmlselector class="1"></htmlselector>";
$i++;
}else if($i == 1){
Echo "<htmlselector class="1x"</htmlselector>";
$i--;
}
This way you can use CSS and style them accordingly.
You could load images into that grid together with a certain class. Then give each of those classes a preferred style. Because what you do now is just overriding css.
Related
Hi guys I have a shared layout navbar with white color text.
I happen to have a few other pages the user can visit but the background on them is very bright.
I dont want to change the background.
I want to change the navbar color but only on those selected pages,
can I do this in CSS?
Changing the color is not the problem, the problem is changing the color on only a few specific pages
Hope this make sense. I don't mind if its in javascript while I prefer CSS
so if I were to write pseudo code.
#myNavbar
{
color: white;
}
if(source == gallery.html || contact.html)
{
#myNavbar{
color:red; }
}
You don't have this kind of logic with css, but you can achieve this with javascript like this:
var currentUrl = document.location.href; // get URL from browser. You should add your PATH TO the files on the condition.
if (currentUrl !== 'PATH_TO/gallery.html' || currentUrl !== 'PATH_TO/contact.html') {
document.querySelector('#myNavbar').setAttribute('style' 'color: red;');
}
else {
document.querySelector('#myNavbar').setAttribute('style' 'color: white;');
}
You should wrap this with some onload function. And you can read about the document.location here.
Hope that help!
Hello there, I just created this datepicker thingy which turned out pretty cool except that it creates some really annoying and weird looking white space below the divs when empty and appears higher, see the fiddle > http://jsfiddle.net/VtKkM/2/ Any help is greatly appreciated!
Haven't figured out the problem as of yet, but it seems that it doesn't like it when the spans are empty. One workaround, at least for now, is to replace your blank options with just a space ( ) so that there's still the illusion that it's empty but the spans still technically contain a value. This may not be a permanent solution, but it'll work for now.
To elaborate:
Line 2 of your js would go from
var days = '<option></option>',
to
var days = '<option> </option>',
and line 32 would go from }).parent().prepend('<span></span>'); to }).parent().prepend('<span> </span>');
Its for line height and your font size of page you can fix it by
Add line height style to your datePicker class like this:
line-height: 8px;
or change font-size like:
font-size: 10px;
Edit:
and for moving when you pick a some value from select you should set your span to position: absolute;
.datePicker > div > span{
position: absolute;
}
Edit2:
or you can set space value in first time in your span, change <span></span> to <span> </span>
Edit3:
i changed this lines to add space in initial between span tag, check values that add onload datepicker:
$.each(picker.children(), function () {
$(this).wrap('<div>').change(function () {
if ($(this).hasClass('month')) {
$(this).prev().html(months[$(this).val() - 1]);
} else {
$(this).prev().html($(this).val());
}
}).parent().prepend('<span> </span>');
if ($(this).hasClass('month')) {
$(this).prev().html(months[$(this).val()]?months[$(this).val()]:" ");
} else {
$(this).prev().html($(this).val()?$(this).val():" ");
}
});
Edit 4:
and css way, you can fixed it by add padding style to empty span like this:
.datePicker > div > span:empty{
padding:5px;
}
.datePicker > div {
display:inline;
position:relative;
min-width: 18px;
min-height:28px;
padding:0 5px 0 5px;
}
Just change display:inline-block to display:inline
The part about it appearing high I could fix with giving .datePicker select a 5px margin.
I have part of a code where it displays a Multi Select box and displays the options depending on the if statement:
$moduleSELECT = '<select name="moduletextarea" id="moduleselect" size="10">'.PHP_EOL;
if($modulenum == 0){
$moduleSELECT .= "<option disabled='disabled' value=''>No Modules currently on this Course</option>";
}else{
while ( $currentmodstmt->fetch() ) {
$moduleSELECT .= sprintf("<option disabled='disabled' value='%s'>%s - %s</option>", $dbModuleId, $dbModuleNo, $dbModuleName) . PHP_EOL;
}
}
$moduleSELECT .= '</select>';
Now from doing some research on the internet I think it is bad practice to include tags inside option tags. So my question is that if the if statement is true where number of records in 0, how can I display the text for "<option disabled='disabled' value=''>No Modules currently on this Course</option>"; in red colour and if the else statement is met how can I display these options sprintf("<option disabled='disabled' value='%s'>%s - %s</option>", $dbModuleId, $dbModuleNo, $dbModuleName) . PHP_EOL; in black colour text?
Thanks
just set a css style to the select (if there are no options), in this case color: red;
you can also have different colors for the options as well, just set different colors on each option. example fiddle here: http://jsfiddle.net/kennypu/CP8Xf/1/
I don't believe you can style individual <option> tags with CSS, but you could style the entire <select> as #kennypu points out.
Another way to achieve the results you want with a better/more intuative UI might be to only output the <select> tag when you actually have data to put inside it. When $modulenum == 0 maybe you should just output some different HTML that you can style properly.
HTML
<div class='no-data'>No Modules currently on this Course</div>
CSS
.no-data{
background-color: #CCC;
color: red;
padding: 5px;
}
I've been trying to figure out on how to set the current page I'm at to a different background color than the other links, but to no avail.
HTML
<div id="navigation">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Gallery</li>
<li>Blog</li>
</ul>
</div>
What I want is to set the current active link to black, and the other four links to grey. That way if I visit Portfolio, for example, that link is black and the rest are grey. How would I do this?
Thankfully, there is no Javascript involved. HTML and CSS will work fine for this task. First off, let's create your HTML. You obviously know what page you are on, so we are going to add a class to the current page's link. So, for example, if we were on /index.php/home our markup might look similar to this.
<div id="navigation">
<ul>
<li><a class="current" href="<?php echo base_url() ?>index.php/home">Home</a></li>
<li>Portfolio</li>
<li>About</li>
<li>Gallery</li>
<li>Blog</li>
</ul>
</div>
Now, before we color the current link we are going to color the rest of the links. We can select the rest of the links via CSS like so.
#navigation a {
}
The following CSS will select all <a> elements that are children of the navigation element. So now we need to set its background color. The CSS property for setting the background color is background-color: xxx. Where xxx is either the hex code, rgb value, or the name of the color. So we would do the following to have all the links grey.
#navigation a {
background-color: #333; /* or whatever grey you want. */
}
This will set every link to the color grey. Now, we need to set the current link to the color black.
If you noticed, we added class="current" to the current link, the home link in this case. Next we need to create the appropriate styling for this. Our CSS declaration will look similar to this.
#navigation .current {
}
The above declaration applies to all elements with the class current that is a child of the element navigation. And so now we set the background color like so.
#navigation .current {
background-color: #000;
}
So, our final CSS would look like so.
#navigation a {
background-color: #333;
}
#navigation .current {
background-color: #000;
}
Note that the order is important! If we were to put the second declaration first, it would be overridden by the, more general, link declaration.
You have two options, you can use PHP and CSS, this is better, because this is client independent.
Second option is to use Javascript and CSS
PHP & CSS
I prefer this way!
You need to check on every site if the current page is equal to each menu link. Here are some snippets of my solution. It works fine for my site.
I don't know if its working with your way for linking: index.php/home. Think you have to adapt it. Because I use real files like home.php and blog.php
this is the menu.php, I include it into every site:
<div id="menu">
<div class="innertube">
<ul>
<?
markIfCurrent("Willkommen", "willkommen");
markIfCurrent("Salzgrotte", "salzgrotte-am-fehn");
markIfCurrent("Heilwirkung", "heilwirkung-des-salzes");
markIfCurrent("Farbtherapie", "farblichttherapie");
markIfCurrent("Salzshop", "salzshop");
markIfCurrent("Erfahrungs-<br/>berichte", "erfahrungsberichte");
markIfCurrent("Fragen und Antworten", "fragen-und-antworten");
markIfCurrent("Preise", "preise");
markIfCurrent("Galerie", "galerie");
markIfCurrent("Presse", "presse");
markIfCurrent("Praxis", "praxis");
markIfCurrent("Anfahrt", "anfahrt");
?>
</ul>
</div>
</div>
Now the php functions:
/* filter selected menu items */
function markIfCurrent ($name, $link) {
$should_mark = isCurrent($link);
if ($should_mark) {
$first = strtoupper(substr($name, 0, 1));
$rest = substr($name, 1);
echo "<li><span class='current'>".$name."</span></li>\n";
} else {
echo "<li><a class='lower' href='".$link."'>".$name."</a></li>\n";
}
}
/* check if $pageis current page */
function isCurrent ($page) {
/* reverse mapping */
if ($page == "willkommen") {
$page = "index";
}
$isCurrent = $page.".php" == getCurrentPage();
return $isCurrent;
}
function getCurrentPage() {
$path = $_SERVER['PHP_SELF'];
$a = explode("/", $path);
$site_name = $a[sizeof($a)-1];
return $site_name;
}
At least the CSS:
li span.current a {
background-color: black; /* or #000000 */
}
li span a {
background-color: gray; /* or #cccccc*/
}
JavaScript & CSS
This is more pseude code, but its the same logic for the PHP version
In this case you also need to check the current url
with window.location.pathname you get the url / pathname. split on the slash and extract the file.
Then you can iterate through the elements of your navigation with jQuery like $("#navigation").find("a") and then you can set the css style for the a element a.css("background-color", "black")
I have a div that is colored dynamically and inside that div there is a text. I would like the color of the text will be white or black depending of the darkness of the color of the div.
So if for example the color of the div is dark brown I would like the color of the text be white. If the color of the div is yellow, I would like the color of the text be black.
How to do that with HTML/CSS/PHP?
Javier
How are you setting the colour of the Div? An extension of what Doug said...
var myDiv = document.getElementById("yourDynamicDiv");
myDiv.style.color = "black";
if you set the colour manually add that at the same time.
Rick
This function will take any hexcolor and return either white or black depending on what has more contrast.
function TextContrast($hexcolor){
$hexcolor = str_replace("#","","$hexcolor");
if(!$hexcolor){
$hexcolor = "FFFFFF";
}
$r = hexdec(substr($hexcolor,0,2));
$g = hexdec(substr($hexcolor,2,2));
$b = hexdec(substr($hexcolor,4,2));
$yiq = (($r*299)+($g*587)+($b*114))/1000;
if($yiq >= 128){
$text_color = "#000000";
}
else{
$text_color = "#FFFFFF";
}
} // end text contrast function
For your style sheet, you can change the .css extension to .php and add
.custom_div {background: #FF00FF;}
<?php TextContrast("FF00FF"); ?>
.custom_div {color: <?php echo $text_color; ?>
Ok so, will the colors be pre-determined, or the user will generate it? If you're going with the predetermined colors, you can set classes for the parent and the child can now where it is via css and adjust accordingly. Below is an example on how.
HTML
<div class="parent">
<div class="child"> Enter Content Here</div>
</div>
CSS
.black-bg {
background:#000000;
}
.black-bg div {
color:#FFFFFF;
}
.white-bg {
background:#FFFFFF;
}
.white-bg div {
color:#000000;
}
Everytime you change the class on the parent, it will force the browser to re-render the area, hence enabling dynamic styling.
I don't know php, but you can do it in JS like this:
JS (jquery)
if ( x === condition-1 ) {
$(".parent").addClass(".black-bg");
} else if ( x === condition-2 ) {
$(".parent").addClass(".white-bg");
}