I am building a site and I would like users to have the option of changing the colour scheme of the site. For example, you can have a 'red scheme' or a 'blue scheme' etc etc..
So, how can I produce a link to load new css files, that will return the current page with new css files?
I am using ASP.NET to develop this site, what would be the best to acheive this, Javascript? Code behind?
I'm looking to give viewers options for changing the colour scheme of a site. I've had a trawl through through the basic jQuery and UI capabilities, and it looks like toggleClass is the best option.
Has anyone other suggestions, from the range of other plugins?
The options will likely include changing the body backgound color, and background-image; changing text colour on certain classes; and changing the *content* of a div, which is the background layer for one area of the window.
The button is a blob of colour (.jpg) with text over the top. I want two things to happen: first, when the cursor is rolled over the .jpg and then the text, I want the text to change colour. This works ok. Second, I want to link to industry.php when clicked. This works ok over the .jpg but, obviously, not over the text.
[code = PHP]
echo '<div id="industry_button"><a href="industry.php" onmouseover="Roll_Industry(true)" onmouseout="Roll_Industry(false)">
<img name="Industry" src="graphics/industry_button.jpg" width="133" height="30" /></a>
[Code]....
I spotted some nice code to change the background colour of a web page to
one of four different colours at random but I can't find it now!
The method was to select a number at random from 1 to 4 by using the rnd()
function and then dividing by modulus 4. The result was then used to select
a cell in a 4 cell array which was holding a different colour in each cell
of the array. I would like to have this code but lack the knowledge to
re-create it.
How come this isn't working?
document.getElementById('glance').style.display='block'.color='gold';
I'm having a problem with changing the background image on an element when I use the .hover() and .toggleClass() methods. Here's some code:
First the CSS:
Code:
.down-arrow {
cursor: pointer;
background: #efefef url(images/arrow-down.png) no-repeat 13px 13px;
[Code]....
It seems to work ok(ish) if I use the .css() method and change it directly in the code, but I want to try and keep my styling only in my CSS file and use classes to make the change.
Basically a simple question concerning click events.
Code:
<li><a href="#" class="CelesteCufon clickDes">Description</a></li>
Code:
$("li a.clickDes").click(function() {
$(this).addClass("active");
});
Basically it changes the text, and background image, clicking it will change the background image, but until we leave the link itself, it will not change the colour.
I'm obviously(hoping) I've overlooked something simple
Click For Demo
I am using javascript code to change the background colour and font colour of some elements called 'filled') dynamically. For example:
if(timeInputValue >= startcode && timeInputValue < endcode && stateInput.value == "playing") {
filled.style.backgroundColor = '#ffffff';
filled.style.color = '#000000';
}
I also want to put a border around these 'filled' elements too - how can I do this is javascript? I can't find an equivelent to style.border = "1px"
I'm looking at Doug Crockford's Javascript translations of Scheme functions at:[url]
I'm really confused by the variable declaration:
There's no quotes around the value, so what is it?
I played around with it in the console of my Chrome developer tools
How do I do this? I've set up javascript to change the background colour depending on what colour square the user clicks on, this is working fine.However, I want to be able to set an initial colour, other than white, and then let the user chose their own.
here is my code so far.
<script language="JavaScript">
<!--
function changeBGC(color){
[code]....
I want the page to be initially set to the brown colour, then I want the user to be able to choose their own colour.
I'm trying unsuccessfully to get some text links to change & restore their colour.
[URL]
Referencing this link - there are 3 text links at the top of the page, which scroll to different anchor points on the same page.I need the following to happen: On hover, change colour (easy using css) On click link A, change colour When clicking link B, link A restores to original colour.
i have an image of a t-shirt and i want to use a colour picker type thing to change the images colour, is this possible, and if it is possible does anybody have any idea what code i would need for the script
View 1 Replies View RelatedBeing new to javascript, I'm stuck on what is obviously a simple thing.
I have a script which finishes with a document.write statement to
print the result to the screen. This is all working OK, but how do I
change the colour of the text and make it bold?
I tried adding style.color = "yellow"; before the write statement,
but the colour was still black.
I am generating a html based table with multiple rows of data coming
in real time from a postgres DB. The underlying technology is java
based however the front end is html.
now i am unable to alternate the colour of every row so that the table
is lot more readable. can anyone suggest a javascript or even a css
script which will alternate the row colours irrespective of the number
of rows.
I created some RGB-to-HSL and HSL-to-RGB functions for JavaScript that I think might be useful for some of you. function fnRgbToHsl(r, g, b){ // R G B as integers, 0..255.
r /= 255;
g /= 255;
b /= 255;
var
max = Math.max(r, g, b),
min = Math.min(r, g, b),
l = (max + min) / 2;
h = 0,
s = 0;
if(max != min){
s = (l < .5)?
(max - min) / (max + min):
(max - min) / (2 - max - min)
h = (max != r)?
(max != g)?
4 * (r - g) / (max - min):
2 * (b - r) / (max - min):
(g - b) / (max - min);
}
h *= 60;
if(h < 0)
h += 360;
return [h, s, l];
}
function fnHslToRgb(h, s, l){ // H as degrees 0..360, S L as decimals, 0..1.
h /= 360;
function fnHueToRgb(x, y, h){
if(h < 0)
h += 1;
else if(h > 1)
h -= 1;
return ((h * 6 < 1)?
x +(y - x) * h * 6:
(h * 2 < 1)?
y:
(h * 3 < 2)?
x + (y - x) * (2 / 3 - h) * 6:
x);
}
var
y = (l > .5)?
l + s - l * s:
l * (s + 1),
x = l * 2 - y,
r = fnHueToRgb(x, y, h + 1 / 3) * 255,
g = fnHueToRgb(x, y, h) * 255,
b = fnHueToRgb(x, y, h - 1 / 3) * 255;
return [r, g, b];
}
If I get the time, I'll build some tools around them, such as methods of getting triad colours, complementary and split complimentary colours, analogous colours, saturation variations, luminance variations (tints and shades) and hue variations (chromatic variations).
My website formatting knowledge is mostly HTML; I know hardly any
Javascript. Recently I created a site with a nav bar in table format across
the top of the page, and I made the background colour of the cell with the
name of the page that the reader was on a different shade, like this:
Home | This | That | Other | Etc.
If you were on "Other" page, for example, the background colour of the
"Other" cell was a different shade from the others. I created this by
altering the code on each page.
This site was hosted with a web host that has SSI, and the nav bar became
the same file for every page, so we lost this minor navigation aid. Someone
mentioned that the same effect (a different colour or shade for the cell
with the page name) could be achieved with Javascript, but since I don't
know Javascript and we'd run out of time, we didn't do it.
Now I'd like to have this different colour for the page name cell at another
site using SSI for the nav bar. Is this possible? If so, how? To make it
even more fun, some of the page names are entry points to another section of
the site. If I can make "Other" a different colour, for example, I'd also
like to make pages in the "Other" folder have this same feature so that
readers know that they're in the "Other" section of the site. Or is this too
much?
I'm just trying to do something pretty simple which is an alert box which will give me the background color. So simple that it doesn't want to work, that is!
The line the body is onmouseover: <p id="metallic" onMouseOver="switchElementColour('metallic');">metallic c-prints</p>
The function is as follows
function switchElementColour(elementName){
var tryId = document.getElementById(elementName);
var yrf = tryId.style.backgroundColor;
[Code]...
is there an easy way to change the colour of a scrollbar without using java?
View 2 Replies View RelatedI wish to change the background colours of two divs, one is blue and the other is gray.i already have the pull down onchange working that changes the fields to active or disabled depending on the selection made and wish to change the background to gray out the div that has disabled fields.how is this done using Javascript
View 1 Replies View RelatedIve seen on the fox website home page (although this is flash), when the top programme image changes, so does the background colour values of their logo... can this be achieved in js?
From my perspective, i want a image gallery (fade/slider)(pulled from a database), then create some kind of array (maybe in the image db record) of a #colour that i can can add to other elements..
Im working on my own little javascript engine at the moment.
One of the functions i would like to add to it is a fadeToBackground function. In essence, it would detect the element that is calling it and find out the background colour for that element. From there it would take a hex colour that it is given and then fade to the background colour.
To do this i need to generate an array of inbetween colours. Ie, i need something like #000000, #0000EE, #0000FF etc etc.
Does anyone know of an algorithm to calculate the colours in between two given hex values?
I want to be able to dynamically generate the colours so it is a drop in function for down teh track where you just give it a colour to fade from and it does the rest.
I'm trying to change the colour of the letters that have a link. Anyway it is not working correctly on Jquery
//Jquery
$("a").mouseover(function(){$().html(<a href="http://www.google.co.jp/"><font size="7">linktest</font></a>
[code]....
Basically, I am wrapping a span around each letter of a link element, so i can apply a random class to it - thus creating a rainbow effect on text. My sticking point is that successive letters can't be the same colour, nor can the first letter of successive links.
So 'Link1' wouldn't be acceptable as L and i have the same colour, nor would 'Link1 Link2' as the two L's have the same colour. Also, the code I'm using to append the spans to each letter is also appending a span to any spaces in the links, is there a way I can stop this? I've attached all the files I'm using.
On the example I've attached, I have made each links first letter successive, so the colours will never be the same. I've also made spans from the second letter onwards so they'll never be the same - but occasionally it'll throw up a clash where the first and second letters of each link are the same colour.
I have this script which, on mouseover, shows a nested element of a class.
I want to add a snippet which, on click, changes the color of the class... maybe with a fast fade.
Does it require creating a second class with the new color? Something like:
$(document).ready(function(){
$('.class').hover(function(){
$(this).find('.bit').show();
}); //existing script
[Code]....
I am trying to add some styling to the first word of all of my H2 headings.
Now obviously this would be very easy to do using a span, but let me clarify my situation.
I am working on a Joomla! site, so a lot of my code is read from php and sql files. I thus can't go and wrap my text in a span by hard coding it since it is dynamic and read from a database.
I thus decided that manipulating it using javascript will be the simplest. The only other chice is to write a php script that does pretty much the same thing, but I prefer javascript.
So here is what I am thinking of doing:
I want to select all of the H2 elements from my document, get access to their text content, single out the first word, and then wrap it in a span. The span will have a class, which will then simply be styled using CSS.
I though I was on a roll, but is seems that I have hit a snag. I am able to select and edit a single element with an id, but not all of the H2 elements in my document.
I was using 'getElementById' and assumed I could simply change it to 'selectElementByTagName' at some point.
I then used 'innerHTML' to retrieve and manipulate the contents.
Here is my code so far, and it work to some extent:
Code:
It seems though that 'innerHTML' does not work with 'selectElementByTagName', and I can't seem to find a similar command that does.
I also can't use ID's since I can't manipulate the HTML (at least not without scratching through a whole mess of php). Even then I need to manipulate various elements on one page, so ID's are no good anyway.
So my question finally is this: Is there a similar command I could use, or am I busy going in the wrong direction?
trying to get the javascript function into the divs background colour.The javascript function finds a cookie with a hex code and then the div is ment to add the code as its background colour.
<script type="text/javascript">
function imgcolour() {
color1=getCookie('color1');
[code]...
