I am working on an Opencart site and for the categories on the left hand side I need them to alternate in different colours eg. red, purple, green, blue etc and then repeating when more categories are added to the menu.
Can anyone give me advice of the easiest way to do this?
You can view the site below:
http://getsmarta.co/_ecommerce/easy-leaf/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var color = ['Red', 'Green', 'Yellow'];
$('ul#test').find('li').each(function (i) {
$(this).addClass(color[((i + 3) % 3)]);
});
});
</script>
<style type="text/css">
.Red
{
background-color: Red;
}
.Green
{
background-color: Green;
}
.Yellow
{
background-color: Yellow;
}
</style>
</head>
<body>
<ul id="test">
<li>a</li><li>b</li><li>c</li>
<li>a</li><li>b</li><li>c</li>
<li>a</li><li>b</li><li>c</li>
<li>a</li><li>b</li><li>c</li>
</ul>
</body>
</html>
I am not familiar with Opencart, but can't this be achieved with css? You can most likely use the n-th child thing to make this work.
Or you can colour it by using jquery, using a for loop and a class name of colour1, colour2 and so on. Loop through the number of colours and addClass() to each element.
There are probably better solutions these are just what came up now.
Edit: ok maybe the n-th child won't be good for earlier browsers so the jquery solution would be good unless you want to add the colour class in the page itself using the same concept as the jquery
I'd do this server side.
In part code / part comments that you'll need to fill in:
$i = 0;
// loop through rows
$i++;
$alt=false;
if ($i % 2 == 0) {
$alt = true;
}
// output row
// make sure to use a if ($alt) { echo 'class="alt""'; } or something similar so you can style away
// end loop
I am not giving you the code. Write it yourself. Here is the idea.
Write 4 classes for 4 different colors.
Now write a function to add correct class to each li item. ie, you
can check the li item's position and add correct class to it.
You can use either javascript or php to do this.
Now the link color will change automatically with new categories adding.
Related
I have created a skin switcher and it is working great, but the code is messy.
I save a cookie and then for some defined css classes, I append '-userDelectedColourFromTheCookie' to the end of the css class to apply it on the page.
So far, I am adding a short php line to the end of every instance of these classes in the html code and as I have said, it is working.
I would prefer to run the php code just once across the whole page and update all occurrences of an array containing the required classes to append the class as above.
I have this at the top of my page:
<?php
$classList = array("theme-1","theme-2","theme-3","theme-4","theme-5","theme-6","theme-7","theme-8","theme-9","theme-10","theme-hover","theme-heading","theme-drop-content","theme-container","theme-banner-text");
if ((isset($_COOKIE["Theme"])) && in_array($_COOKIE["Theme"], array("Blue","Red","Grey","Ochre","Mauve"))) echo $classList."-".strtolower($_COOKIE["Theme"]);
?>
<!DOCTYPE html>
... etc
I am defining an array of css classes, then reading the user colour from the cookie and appending it to the css class.
As and example, the default class might be 'theme-3' but of the user selects the blue skin, then this class becomes 'theme-3-blue' and so on.
But it's not working.
Any help would be appreciated.
Don't mess with the element class lists. Use CSS files to apply the colours you want.
Start with a basic CSS design file:
p {
margin-left:10px
font-size: 12pt;
}
h1 {
font-size: 24pt;
}
div {
margin: 10px;
padding 20px;
}
Then create CSS colour files with different colour selections:
blue.css
p {
color:blue;
}
h1 {
color: darkblue;
background-color: lightblue;
}
red.css
p {
color:red;
}
h1 {
color: maroon;
background-color: pink;
}
default.css
p {
color:black;
}
h1 {
color:white;
background-color:black;
}
Then load the colour theme you want
<?php
if (isset($_COOKIE['theme'] && in_array($_COOKIE['theme'], ['red','blue'])) {
$themeCSS = '<link rel="stylesheet" href="'.$_COOKIE['theme'].'.css">';
} else {
$themeCSS = '<link rel="stylesheet" href="default.css">';
}
Then echo $themeCSS in your <head> just like any other <head> element
** I've used standard HTML elements here to illustrate, but any CSS selectors should work.
I believe you want to change the class names inside the $classList variable by appending the selected color theme from the cookies.
You may use the array_map function to modify all elements of your $classList array.
$classList = array("theme-1","theme-2","theme-3","theme-4","theme-5","theme-6","theme-7","theme-8","theme-9","theme-10","theme-hover","theme-heading","theme-drop-content","theme-container","theme-banner-text");
$themeColor = $_COOKIE["Theme"]; // blue
$classList = array_map(function($val) use ($themeColor) { return $val.'-'.$themeColor; }, $classList);
Once you use the array_map function, all elements of the $classList array will be appended with the "-blue".
You can execute and see the output here
http://sandbox.onlinephpfunctions.com/code/6051282e00be1eb7bb7e6a086de20bbcfe9bcc9f
Several good ways to do it. It's a little more complicated with the array of classes but you should be able to adjust this if you need it (not sure why the syntax highlighting is wonky).
Use output buffering and replace at the end:
<?php
ob_start();
?>
<html>
<head></head>
<body>
<div class="theme-1"></div>
</body>
</html>
<?php
$themes = array("Blue","Red","Grey","Ochre","Mauve");
if ((isset($_COOKIE["Theme"])) && in_array($_COOKIE["Theme"], $themes)) {
echo preg_replace('/class="(theme-[^"]+)"/', 'class="$1-' . $_COOKIE['Theme'] . '"', ob_get_clean());
}
With the array of classes, just do it the same way with output buffering but replace like so:
$replace = array_map(function($v) { return "{$v}-{$_COOKIE['Theme']}"; }, $classList);
echo str_replace($classList, $replace, ob_get_clean());
I have an array of various input boxes, that when filled, fills up the database with information. Then, from another file, I take the information and print it out to the screen.
What I want to do is to put a symbol in front of each line, however using something like .style br {}; doesn't seem to work.
Reading the from MySQL, using Wordpress if that matters.
EDIT:
I was asked to post how I want it to look like. I think this is pretty straight-forward, but here it is anyway:
# Entry1
# Entry2
# Entry3
EDIT #2:
I would prefer it to be in CSS, if that's not possible, then PHP. Javascript would be the last solution that I want.
I have tried the following and it didn't work at all:
.myform.lines br {
border-bottom: 1px dashed #000000;
background-color: #ffffff;
display: block;
}
Hi have a look at Can you target <br /> with css?
I tried the following html page:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('br').replaceWith('<br># ');
});
</script>
hi<br>
there<br>
testing<p>
again<p>
</body></html>
This results in
hi
# there
# testing
again
Here is some more code that also does basically the same thing - it adds a symbol (#) at the start of each line (assuming new lines follow a br).
<html><head><title>test2</title>
<script type="text/javascript">
function replaceLineBreaksWithHorizontalRulesInElement(element)
{
elems = element.getElementsByTagName( 'br' );
for ( var i = 0; i < elems.length; i ++ )
{
br = elems.item( i );
txt = document.createTextNode("# ");
br.parentNode.insertBefore(txt, br.nextSibling);
}
}
</script>
</head>
<body onload="replaceLineBreaksWithHorizontalRulesInElement(document)">
testing<br>
one<br>
two<br>
three<br>
four<br>
five<p>
six<p>
</body></html>
Note that this does work in both firefox and internet explorer giving the same results. If you remove the space however then firefox shows a space anyway, and internet explorer shows no space. I think this won't be an issue for you though, since you want the space.
How about
.mySelector:before { content: '#'; }
My goal is to show a series of embedded youtube videos on one page but allowing the user to hide or show any youtube video by clicking a button associated with a specific youtube video on the page. I made a form that submits the youtube embed code to a mysql database and I created a php file to retrieve every embed code using a for loop. For each iteration of the for loop, a youtube video will pop up with a corresponding button which will allow the user to hide or show the youtube video.
It works when there is only one entry in the mysql table but does not work when more youtube embed codes are uploaded. For example, when there are two youtube embed codes uploaded, two buttons are created, but when I click either of the two buttons, it will only show or hide the first youtube embed. None of the buttons will show the second youtube video.
here is the code with some edits:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>hide/show iframe</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<style type="text/css">
<!--
#frDocViewer {
width:70%;
height:50%;
display:none;
}
-->
</style>
<script type="text/javascript">
<!--
function HideFrame() {
var fr = document.getElementById ("frDocViewer");
if(fr.style.display=="block") {
fr.style.display="none";
} else {
fr.style.display="block";
}
}
//-->
</script>
</head>
<body>
<?php
mysql_connect ("","","") or die(mysql_error());
mysql_select_db ("") or die(mysql_error());
$lastid = mysql_query ("SELECT * FROM embed ORDER BY id DESC LIMIT 1");
$lastid = mysql_fetch_assoc($lastid);
$lastid = $lastid['id'];
for ($count=1; $count<= $lastid ; $count++) {
$iframe = mysql_query ("SELECT * FROM embed WHERE id=$count ");
$iframe = mysql_fetch_assoc($iframe);
$iframe = $iframe['url'];
echo "
<image src='utube.gif' onclick='HideFrame()' />
<div id='frDocViewer'>
$iframe
</div>
";
}
?>
</body>
</html>
Because each div has the same ID. You need to create unique ID's for each DIV to show or hide ie. frDocViewer1, frDocViewer2 etc
Use your $count variable to echo it's value onto the ID as it will increment by 1 for each iteration of the loop.
echo "
<image src='utube.gif' onclick='HideFrame()' />
<div id='frDocViewer_{$count}'>
$iframe
</div>
";
Then you just need to make sure that you have corresponding Javascript for each of those DIV's. I would send the id into the javascript function using your onclick tag.
for ($count=1; $count<= $lastid ; $count++) {
$iframe = mysql_query ("SELECT * FROM embed WHERE id=$count ");
$iframe = mysql_fetch_assoc($iframe);
$iframe = $iframe['url'];
echo "
<image src='utube.gif' onclick='HideFrame({$count})' />
<div id='frDocViewer_{$count}' class='frDocViewer'>
$iframe
</div>
";
}
And then have the javascript code as something like:
var old_element = null;
function HideFrame(id) {
var fr = document.getElementById("frDocViewer_" + id);
if(fr != old_element)
{
fr.style.display = "block"
if(old_element != null) old_element.style.display = "hide";
old_element = fr;
}
}
Then finally you need to change your CSS to make frDocViewer a class rather than a unique style. Notice above in the PHP echo string I added in the new class attribute to the DIV
<style type="text/css">
.frDocViewer {
width:70%;
height:50%;
display:none;
}
</style>
PS: This code might not actually compile, it's just a rough guide.
I think the problem is with this line:
<div id='frDocViewer'>
IDs are supposed to be unique across the entire page, but you're creating a new element with the same ID on each iteration of your loop. I haven't tested this, but my assumption is that when your JavaScript executes to hide/show that ID, it's only picking up the first ID by that name that it finds.
You'll need to change your code to give a unique ID to each iteration, and pass a reference to that element when you call your HideFrame() function. The function can then operate on that specific ID.
hmm...where to start....
if you getElementById where your id is frDocViewer AND frDocViewer is used by every video there will be problems.
how about something like
<div onclick='HideFrame(this)' >
<image src='utube.gif'/>
....
</div>
function HideFrame(el) {
...
}
Not at all tested, but you NEED to go for something more GENERIC then hard coding an id....in my opinion
I have a standard html page so:
<html>
<head>..
.
..
and so on
and i have a php script linked to that html page with:
if blablabla {
change background color;
}
does anyone know how to change the background color of my page if the conditions in the if statement are met?
I hope i made this clear, if not, please say which bit is unclear.
Thanks for any help in advance
put your <body> tag inside the if else
if blablabla {
echo '<body style="background-color:white">';
}
else {
echo '<body style="background-color:orange">';
}
It's not necessarily great practice, but it should get the job done:
if ( your_conditional ) {
$styleBlock = sprintf('
<style type="text/css">
body {
background-color:%s
}
</style>
', $yourColor);
echo $styleBlock;
}
One good (?) thing about this is that with this technique, you can put your if statement anywhere - it'll act on the body tag regardless of where you put it.
One caution: if you have additional style rules for the body tag's background color farther down your page, those will take precedence over the one from your if statement.
here is code that i whant to change background of body
<body bgcolor="<?php echo $name2; ?>">
As you'll see, I'm a newbie to all this ajax stuff but I can do a bit of php and so I plumped for xajax to take care of the javascript for me.
I've got an array with items listed in different section. I want to use this array to produce an unordered list that expands when someone clicks on a section.
I've adapted a script I found here:
Sliding Draw
My script currently looks like this:
<?php
include ("xajax_core/xajax.inc.php");
$subs = array(
"Mortice" => array("Union Deadlock 2.5", "Union Deadlock 3", "Union Sashlock 2.5", "Union Sashlock 3"),
"Cylinders" => array("30/30 Euro", "30/40 Euro", "30/50 Euro", "30/60 Euro"),
"uPVC" => array("30/92 Fullex", "35/92 Fullex", "Sash jammer")
);
function addsub($show, $key)
{
$objResponse=new xajaxResponse();
if ($show=="true") {
$objResponse->assign("list", "style.display", "block");
$objResponse->replace("$key","innerHTML","true","false");
}
else {
$objResponse->assign("list", "style.display", "none");
$objResponse->replace("$key","innerHTML","false","true");
}
return $objResponse;
}
$xajax = new xajax();
$xajax->registerFunction("addsub");
$xajax->processRequest();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<?php $xajax->printJavascript() ?>
<title>Expand menu test</title>
<style type="text/css">
.list {display: none;}
</style>
</head>
<body>
<?php
echo "<ul>\n";
foreach ($subs as $key => $group) {
echo "<li id=\"".$key."\" onClick=\"xajax_addsub('true','$key');\">".$key."\n";
echo "<ul class=\"list\" id=\"list\">\n";
while (list($list, $each) = each($group)) {
echo "<li id=\"list\">".$each."</li>\n";
}
echo "</ul>\n</li>\n";
}
echo "</ul>";
?>
</body>
</html>
The idea is that when an element is clicked on it changes the style display to block (thus showing the rest of the list) and sets the function to 'false' so if it's clicked again it will change the display back to none and hide the list.
Needless to say it doesn't work so if someone could point out to me why I'd be eternally grateful.
Cheers,
Nick.
Solved - I sorted it by placing the lists to be shown (or hidden) into <divs> and assigning them each a unique id and setting their style as display: none.
Then I just had to make a request to set the style as block when it was clicked on.
Thanks.
I think you should look into jQuery as your default javascript library, it's used by many web professionals and is very good. There you will find the Accordion control, which I think will suite this need very well.
Good luck!