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);
Related
I ask participants yes/no questions in an experiment and they answer by keypress (Y/N). Now, I want to display YES green and NO red.
I'm doing this with Ibex farms where you have an experiment file in .js format. In this file, one defines the "Question controller" as follows:
"Question", {
as: [["Y","Yes"],["N","No"]], //defines keys+answer displays
}
Adding html tags <font-size>, <div style> in this line did not work.
Besides that, there is a .css file in which I can change the color for both answers, but give the same color to both:
span.Question-fake-link {
color: #ff6600; //changing this to red; both Yes and No are red now
cursor: pointer;
}
The third file is a Question.js file which defines behavior and properties of the question controller beyond its appearance. It is too long to post here, I think, and I don't have authorship. But in there, the answers are defined as "left Comment" and "right Comment". So I attempted to add the 4th line at the (I hope) relevant place:
var lcd = $(document.createElement("li"))
.addClass(this.cssPrefix + "scale-comment-box")
.append(this.leftComment);
.document.getElementById("leftComment").style.color = "red"; //added this, made experiment dysfunctional
this.xl.append(lcd);
Does anyone know how to change the colours individually?
I'm sorry, I know this must look complicated, but maybe someone can give me a pointer on what to do...If you need more of the scripts, please let me know.
Many thanks.
EDIT: After trying out some of the suggestions here, I see the answers are somehow as "span.fake-link". Maybe this code snippet can help (line 1/2):
var a = $(document.createElement("span")).addClass(this.cssPrefix + "fake-link");
__Question_answers__[i] = ans;
__Question_callback__ = function (i) {
var answerTime = new Date().getTime();
var ans = __Question_answers__[i];
var correct = "NULL";
if (! (t.hasCorrect === false)) {...}
}
But how can I replace "span" or "fake-link"? I guess I have to replace both. Removing the span.fake-link properties in css-files doesn't seem to help.
EDIT: Or could this be the problem?
if ((this.presentAsScale || this.presentHorizontally) && this.leftComment) {
var lcd = $(document.createElement("li"))
.addClass(this.cssPrefix + "scale-comment-box")
.append(this.leftComment)
.appendTo(this.xl)
this.xl.append(lcd);
}
I attempted to replace "scale-comment-box" by "red" (defined as a class in css before), but that also doesn't help.
You could probably use jquerys css function:
$("<li>")
.addClass(this.cssPrefix + "scale-comment-box")
.css({color:"red"})
.append(this.leftComment)
.appendTo(this.xl);
Since you're already using Javascript, is it feasible for you to add two extra css classes?
One could be .red and the other, .green and then append those classes to the element accordingly at creation:
//CSS
.red{
color:#F00;
}
.green{
color:#0F0;
}
//javascript
//Your javascript seems to be a mix of jQuery and JS so I assume jQuery is imported. If this is incorrect, you would need to use a raw javascript solution
//Hint: Look at document.getElementsByClassName and .classname += "red"
//jQuery version:
$("li").addClass("red") //for any items that need to be red. replace red with green for the green items
I'm trying to copy a style from the .current_page_item to different elements.
I am using WordPress and am not sure of another way to do this dynamically.
Essentially, I am using one style to color the .current_page_item (which changes colors depending on which page), and that is modifying the header color, and the post and content background colors.
The way I have thought up to do this is via JavaScript.
Here is my code:
window.onload = function() {
var page_color = document.querySelector('li.current_page_item').style.backgroundColor;
document.querySelector('div.blog-post p').style.backgroundColor = page_color;
document.querySelector('h2.blog-post-title').style.backgroundColor = page_color;
}
It doesn't seem to be reading the backgroundColor from .current_page_item, but I am able to set it if I use the same method.
Here is the page: http://whatloop.com/wpTheme/
Thanks!
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();
});
I am using the Snowstorm.js javascript file with my webpage.
Current the source allows you to change the character which a 'snowflake' is displayed as. However, I would like to be able change the property of he snowflake to be the image of a snowflake which I have created.
You are able to edit the source and this is the line which sets the character to be displayed.
this.snowCharacter = '•'; // • = bullet, · is square on some systems etc.
Is there any way I can change this to display an image instead of a character and if so, how is this done? I have never worked with Javascript before so for any help or pointers I would be very greatful.
It looks like Snowstorm.js might have the functionality to do this already. Have you seen the information posted at http://www.bozo.us/Javascript/snowstorm/? This page suggests:
File Structure
The script looks for snow images under ./image/snow/ by
default as shown below. If desired, this can be changed in the
user-configurable section.
This seems to correspond to an update mentioned at the bottom of the page you linked, where it says:
1.2.20041121a
Script moved into one file (snowstorm.js) for simplicity
addEventHandler and PNG support functions updated
There's probably a ton of hacky ways to do this in JavaScript, but maybe this will lead you to a clean solution. Good luck!
Find these lines
this.o = document.createElement('div');
this.o.innerHTML = storm.snowCharacter;
this.o.style.color = storm.snowColor;
this.o.style.position = (fixedForEverything?'fixed':'absolute');
this.o.style.width = storm.flakeWidth+'px';
this.o.style.height = storm.flakeHeight+'px';
this.o.style.fontFamily = 'arial,verdana';
this.o.style.cursor = 'default';
this.o.style.overflow = 'hidden';
this.o.style.fontWeight = 'normal';
this.o.style.zIndex = storm.zIndex;
The "o" here is your div element. You can add it a class by adding this line:
this.o.className = "myClass";
To remove the character remove this line:
this.o.innerHTML = storm.snowCharacter;
Than you can style the snowflake with css, the way you know it. Just give it a background image. You can also remove the lines that set the color, width and height and style them with css.
Use unicode '❄' instead of '•' in the original line like this:
this.snowCharacter = '❄';
this will output the snowflake '❄' character as above instead of bullet point.
you might also have to increase these values to 16 or so:
this.flakeWidth = 8;
this.flakeHeight = 8;
Is is possible to do change display: block; to none; with javascript. I would like to show 2 of them everytime page opens. But I want it to be random and change everytime page opens.
Anybody can help me with this ?
http://jsfiddle.net/WcxdR/1/
The below one will hide two of them randomly each time. You could reuse this to show only two instead.
window.onload = function() {
var ran = Math.round(Math.random() * 6);
document.getElementById("" + ran).style.display = 'none';
ran = Math.round(Math.random() * 6);
document.getElementById("" + ran).style.display = 'none';
};
P.S: From top of my head. Not tested.
P.S: Will need to put a check if both call to random gives same number
First the id of your form elements always has to begin with a letter, something like this:
<div id="i1">Line 1</div>
Then you can access to the style properties in this way:
document.getElementById("i1").style.display
As explained in this link.
Try with this demo.
EDIT:
What you want is simple, review the links that I have write for you for more info.
EDIT2:
Jared Farrish has made a better solution that my in the comments of the anwser of Suraj Chandran, only to emphasize that what we really need is this and using some function to load multiples function on body-onload event.
And I think he is right in what he says.