I'm trying to simulate an Etch-a-Sketch and I want to let the user change the squares color using the [type=color] input. Until now I was only painting them black...
I've tried assigning a variable to the color hex code obtained from the form and creating unique classes using that value as class name, which seems ok, but then I cannot edit the css "background-value" for that class, since from what I've read, you can't edit variables' css.
Any help is appreciated.
The hover-color-applying javascript part is as follows:
//apply hover effect
$(document).on("mouseenter", ".gridSlot", function() {
var color = document.getElementById("myColor").value; //myColor = input
$(this).addClass(color); //what I want to do
$(this).addClass("color"); //what I'm doing
});
.color is a class with a fixed background-color, and if I change it by using $(".color").css("background-color"), it'll change both old and new squares colors.
Is there a way to let the already hovered ones be, for example, black, and draw new red ones?
JSFiddle: https://jsfiddle.net/0g3c6c0v/1/
Simply use .css Reference jQuery.css
Add a non existing class name to it to check if the square is already painted.
$(document).on("mouseenter", ".gridSlot", function() {
var color = document.getElementById("myColor").value;
if(!$(this).hasClass("painted")){
$(this).css("background-color",color);
$(this).addClass("painted");
}
});
Updated Fiddle
This might be a good place to use a global variable. At the top of your JS add line like this: window.color_picker = "#000000";
And then in your function simply use: $(this).css("background-color",window.color_picker);
Anytime that the color picker changes you'll need a js function that updates that global:
$('#myColor').on("change", function() {
window.color_picker = $('#myColor').val();
});
Related
I am trying to change some colors on a table that is generated for a calendar. Certain TD's in the table get a different color than others, this was coded by someone else and is done with inline CSS (meaning there is no class/ID assigned). I don't have access to the code they created to change it and can only try to overwrite the color.
What I am trying to do is use a short script to find any TD element that has the particular color, in this case LightSlateGray, and change it to a different background color.
Below is what I mostly recently tried but I know that I am doing something incorrectly and am hoping someone can point it out to me.
var tdColor = $("td");
if(tdColor.css('background-color') === 'LightSlateGray'){
tdColor.css('background-color', 'red');
}
You need to iterate over each element:
var tdColor = $("td");
tdColor.each(function() {
$this = $(this);
if($this.css('background-color') === 'LightSlateGray'){
$this.css('background-color', 'red');
}
}
I'm using the construct theme on Wordpress. I would like to make it such that the top_title class changes color everytime the page is refreshed. I am not sure whether to edit the stylesheet or to place it in some unknown php file, I have tried a lot of suggestions from this site but none seem to work, in the stylesheet, this is what appears for the top_title class:
.top_title {background: #hexval}
Any suggesitons are welcome, but please be thorough, I am rather new at this particular section.
P.S. Also if possible I would like to choose the colors myself.
I would definitely suggest picking your own colors.
Probably the easiest way to accomplish this is to create 1) an array of color codes, 2) choose your HTML element to target (in this case, .top_title), and 3) call a random position in that array.
So if you really want to use JS something like this in your header:
<script> var colorArray = ["ffffff", "cccccc"]; </script>
Then this in your HTML element:
<div class='top_title' style="background:<script>colorArray[Math.floor(Math.random() * colorArray.length)];</script>">
I think that is what you are looking to do?
Try this
jsfiddle http://jsfiddle.net/harshdand/f4p7dj3g/ everytime you run you will get a new color
var colors = ['ababab','cc66ff','fefefe','ff0000','ff9900']; //colors array
//randomly pick color
var random_color = colors[Math.floor((Math.random() * colors.length))];
//add color as background color
$('.top_title').css('background-color','#'+random_color);
I've a pretty minimalistic site, so I want to add details to it, like a hidden theme switching. But I don't want to tell the user that the theme can be changed, so I want to hide the text.
I've tried this:
var tausta = $(body).css("background-color");
$('.piiloteksti').css("color",tausta);
But it doesn't do anything. What would be the correct approach?
A fiddle.
if($('.piiloteksti').css("color",tausta); is a wrong statement. Thats a syntax error! There shouldn't be any if here.
Either remove if
$('.piiloteksti').css("color",tausta);
or complete the if statement.
if($('.piiloteksti').css("color",tausta)){
// some other code
}
Also $(body) does not refer to anything. Use either $('body') or $(document.body)
I tried to modify CSS, and it works.
// javascript
var tausta = $('body').css("background-color");
if($('.piiloteksti').css("color") == tausta) {
alert(tausta);
}
// css (test)
body{background-color:red;}
.piiloteksti{color:red;}
The syntax of your the if statement was off a little. Also, body must be made a String literal.
var tausta = $("body").css("background-color");
$('.piiloteksti').css("color", tausta);
Example: http://jsfiddle.net/HbAHS/8/
You can hide the element with CSS
.piiloteksti{display:none;} Fiddle
OR if you think that would interfere with your layout then,
.piiloteksti{visibility:hidden;} Fiddle
Or you can just give transparent color to your piiloteksti elements
.piiloteksti{color:transparent;} Fiddle
Is it in any way possible, to change a css class model using JavaScript?
Pseudo code:
function updateClass(className, newData) {
cssInterface.alterClass(className, newData);
}
className being the name of the class, which is supposed to be changed (like ".footer") and newData being the new class content (like border: "1px solid pink;").
The target is, actually, just to save space: I am working with CSS3-animations, so changing one attribute of an element, which is affected by it's class, will terminate the animation of of it - The (in my case) font size won't change anymore. Using different classes will require an entire new set of classes for all affected elements, I'd like to avoid this.
I am not searching for a change via
element.className = "foo";
or
element.style.fontSize = "15pt";
Thanks for your help, guys :)
Here's my function to do this...
function changeCSS(typeAndClass, newRule, newValue) // modify the site CSS (if requred during scaling for smaller screen sizes)
{
var thisCSS=document.styleSheets[0] // get the CSS for the site as an array
var ruleSearch=thisCSS.cssRules? thisCSS.cssRules: thisCSS.rules // work out if the browser uses cssRules or not
for (i=0; i<ruleSearch.length; i++) // for every element in the CSS array
{
if(ruleSearch[i].selectorText==typeAndClass) // find the element that matches the type and class we are looking for
{
var target=ruleSearch[i] // create a variable to hold the specific CSS element
var typeExists = 1;
break; // and stop the loop
}
}
if (typeExists)
{
target.style[newRule] = newValue; // modify the desired class (typeAndClass) element (newRule) with its new value (newValue).
}
else
{
alert(typeAndClass + " does not exist.");
}
}
Called with (example)
changeCSS("div.headerfixed","-moz-transform-origin", "100% 0%");
hope this helps.
See my answer here. To answer your question: Yes, it's possible.
#CSS3: I tried exactly the same in one of my html5 experiments. I created an extra <style> element, and changed its contentText to the CSS class definitions I needed. Of course changing the cssRule object would be much cleaner :-)
As far as I can tell the CSS object model cannot easily tell you whether you already have an existing style rule for a particular class, but you can easily append a new rule for that class and it will override any previous declaration of that style.
I found an example of creating dynamic stylesheets.
You should take a look at dojo, it has some nice features where you can do just that..
require(["dojo/dom-class"], function(domClass){
// Add a class to some node:
domClass.add("someNode", "anewClass");
});
http://dojotoolkit.org/reference-guide/1.7/dojo/addClass.html
I'm trying to hack Drupal's colorpicker module so that as my user drags it around picking colors, he sees colors changing on the web site's in real-time.
Right now the colorpicker's js changes the color of the picker widget in real-time.
I want to hack the js so that the color of the picker widget AND a specific DOM element change background colors at once.
Is there a way I can write some code that "listens" to the background-color setting of the colorpicker input and then changes the background-color of ?
Here's the code where Drupal is applying settings from the colorpicker widget to its input:
Drupal.behaviors.colorpicker = function(context) {
$("input.colorpicker_textfield:not(.colorpicker-processed)", context).each(function() {
var index = $('body').find('input.colorpicker_textfield').index($(this));
Drupal.colorpickers[index] = new Drupal.colorpicker($(this).addClass('colorpicker-processed'));
Drupal.colorpickers[index].init();
});
What can I add to this to tell it to "listen" to the background color of "input.colorpicker_textfield" and then set that value to "body" in real time as it changes?
Try using change() to apply it to the bg.
$("input").change( function () {
//var below would obviously have to be correctly formatted.
var newColor$(this).val();
$(body).css({background-color: newColor});
});
Similar to Cole's answer with some improvements (assuming '#' is not included by the colorpicker):
$('input.colorpicker_textfield').live('change', function() {
var color = this.value;
if(color.search((/^[A-Fa-f0-9]{6}/) != -1) {
body.style.backgroundColor = '#'+this.value;
}
});
Uses more specific selector
uses the 'live' event handling method, ensuring the handler will be attached to any dynamically created colorpickers
It will not change the background color if the input is not a hex value
It uses the style attribute directly instead of wrapping in the jQuery object.