Okay I want to change my websites colors on the press of a button. So i have this code:
$( window ).konami({
code : [38,38], // up up
cheat: function() {
$('*').filter(function() {
var match = 'rgb(255, 165, 0)'; // match background-color: black
/*
true = keep this element in our wrapped set
false = remove this element from our wrapped set
*/
return ( $(this).css('color') == match );
}).css('color', 'purple'); // change background color of all black spans
}
});
Now the problem is I want to add bunch of other attributes like background-color, border-color and even active and hover color - though these two might be problematic with this code snippet I think.
Any help adding named attributes to the fray is welcomed - as I'm not an javascript expert by no means.
Also bonus question my webpage is on AngularJS and when I used this konami code, it seems to only work on colors that are currently on display. So on different pages I would have to enter the keys again. Any simple workaround or I gotta deal with it?
Related
I am new to CSS/JS and I am creating an accessibility chrome extension and I need to change the background color of the page. The problem I encounter is when changing the color of pages that have videos like twitch and youtube.
function changeBKColorPredefined(background, color) {
var tags = document.querySelectorAll("*");
for (let i = 0; i < tags.length; i++) {
tags[i].style.backgroundColor = background;
tags[i].style.color = color;
}
}
This code clearly changes everything there is on the page, but I don't know how to avoid changing the background color of certain tags without having to specifying them which would of course become a really hard to maintain code.
Example output of the code showed before:
I have also tried to only change the body color by using document.body.style.backgroundColor but it does not change the color of the whole page.
Thank you for any help.
Edit: an example of what I mean can be found in this extension: https://chrome.google.com/webstore/detail/a%20-fontsize-changer/ckihgechpahhpompcinglebkgcdgpkil
Use css custom properties also known as CSS Variables. This way you can set in your CSS property value as background, and then change only said value.
Simple example would be:
:root {
/**
* This will be your default value. In this example - black.
*/
--changing-background: #000;
}
/**
* In places where you want to change backround set it as background color
*/
.classes-with-changing-background {
background-color: var(--changing-background);
}
Then in JS you do:
// This is your JS. In my example we change property value to white
document.documentElement.style.setProperty('--changing-background', '#fff');
I took JS from this answer
I created a nav bar that changes color based on scroll using js. I want to add a bottom border line prior to scroll with the properties "thin" "solid" and white (#FFFFFF or rbga(255,255,255) but I am having issues with syntax I guess. Everything else works fine, the color change on scroll, but I cannot figure out the bottom border. I'm pretty sure I just have the syntax wrong.
type="text/javascript">
$(document).ready(function(){
$(window).on("scroll",function(){
var wn = $(window).scrollTop();
if(wn > 20){
$(".navbar").css("background","#191918");
}
else{
$(".navbar").css("border-bottom","thin solid rbg(255,255,255)");
$(".navbar").css("background","rgba(0,0,0,0)");
}
});
});
Any help would be appreciated.
Figured it out, was a combination of a syntax error and also needed to add a line to the change to transition the line to black as well to cover it.
type="text/javascript">
$(document).ready(function(){
$(window).on("scroll",function(){
var wn = $(window).scrollTop();
if(wn > 20){
$(".navbar").css("border-bottom","thin solid rgb(0,0,0)");
$(".navbar").css("background","#191918");
$(".navbar").css("transition-duration","0.2s");
}
else{
$(".navbar").css("border-bottom","thin solid rgb(255,255,255)");
$(".navbar").css("background","rgba(0,0,0,0)");
}
});
});
Continuing with this I also have an issue where the line is not there when the page loads and only works once I scroll. There is currently no css for .navbar and any css added to .navbar does not seem to affect the page. Any thoughts?
You need use rgb(255,255,255)instead of rbga. Rgba requires 4 arguments.
Check difference beetween rgb and rgba https://www.w3schools.com/cssref/css_colors_legal.asp
You set border-bottom to white color, so I guess, you don't see it. Check example, I hope you see it here – Aksana Tolstoguzova
Regarding background, you set opacity 0, so you can not see it as well, if background of parent also has white color.
I want to change the chat window fontcolor/fontsize of the page younow. I tried 2 'cssText' samples but I'm unable to change the font color to RED. How can I change the chat window font color to RED? I'm using Firefox and greasemonkey.
sample 1:
document.getElementById("chatcomments").style.cssText = 'font-size: 36px; color: red !important;'
sample 2:
document.querySelector(".chatcomments span").style.cssText = 'font-size: 36px; color: red !important;'
click to see the chatimage
you need to be specific with the attributes of the style object:
document.getElementById("chatcomments").style.color = "red";
document.getElementById("chatcomments").style.fontSize = "30px";
If you use JQuery, you can use the css function, like so:
$(".chatcomments > span").css("color", "red");
You do not need to set font-size again if it already has been set. Another issue is that .chatcomments span won't work as they're two different things; instead, > will work: .chatcomments > span.
It is also better to use RGB or hexadecimal values instead of colour names, for example:
$(".chatcomments > span").css("color", "#EE4B38"); //RGB
$(".chatcomments > span").css("color", "rgb(238, 75, 56)"); //Hex
In the case that you're trying to create a custom client-side script in Tampermonkey or Greasemonkey (it looks like you are), you must use // #require to import the JQuery source (as seen in this answer):
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
el.style.setProperty('color', 'red'); seems more right
I am calling the following function and passing it the location of an image:
function show_image(source) {
var img = d3.select("#right-section").append("img").attr("src",source)
img.transition().duration(5000).easeLinear;
}
Here is the function that uses some JQuery to empty the relevant HTML div object (right-section) and then show the image:
function Con1aaRight(div) {
$("#right-section").empty();
show_image("images/netflix.jpg");
}
The problem is the image is showing but not fading in like I would like it to (with d3.ease in the show_image function). I probably should be using JQuery but I would like to incorporate d3. Similar transition/animation ideas welcome. I am building a scrolling webpage tutorial on a data science topic with text on the left and images on the right.
The problem here is understanding what is a D3 transition and how it works.
A D3 transition, as the name implies, transitions from one state, or value, to another state.
That being said, you can, for example, transition...
A position: from x = 10 to x = 60.
A color: from green to blue.
A font size: from 10px to 18px.
An opacity: from 0.2 to 0.9.
A stroke width: from 1px to 5px.
... and several other attributes/styles.
However, you cannot transition this:
non-existence ➔ existence
As Bostock, creator of D3, once said (emphasis mine):
When modifying the DOM, use selections for any changes that cannot be interpolated; only use transitions for animation. For example, it is impossible to interpolate the creation of an element: it either exists or it doesn’t. (source)
Solution: transition the opacity of the image:
var body = d3.select("body");
show_image("http://www.defenders.org/sites/default/files/styles/large/public/tiger-dirk-freder-isp.jpg")
function show_image(source) {
var img = body.append("img").attr("src", source).style("opacity", 0)
img.transition().duration(5000).ease(d3.easeLinear).style("opacity", 1)
}
<script src="https://d3js.org/d3.v4.min.js"></script>
PS: get rid of that jQuery code. You don't need jQuery when using D3. Mixing jQuery and D3 is not only unnecessary but also, in some cases, it will make things silently break.
I'm trying to figure out what the best way would be to set up a website interface that has a large centre 'tile' (basically a div with rounded corners, a variable background image, and text on it) that acts as the hub of the interface, around which I have smaller tiles which are clickable as link, e.g. one tile will lead to a photo gallery etc... However I need these smaller tiles to be moveable i.e. I would like them to visibly whisk away off the screen (in a specific direction) before the next set of tiles enters the screen.
(Ideally they would be the same set of tiles, they would simply go off screen to 'change' as it were and come back as the new set of tiles - An ideal example would be of clicking on the photo gallery tile, all the main tiles whisk away off screen, to be replaced by more tiles representing individual photos in the gallery)
I have no issues with the CSS of round corners and positioning my tiles etc... but I'm currently trying to get the tiles to actually move using the code referenced here: Alter CSS class attributes with javascript?
I can't get it to work. I've set up one of my test tiles to make just one change to the width of another test tile using the above-referenced code when it detects a mouseover event on the div, but it appears not to work.
Here's my code, if you can spot any errors, but primarily I'd also like to hear if you have any better suggestions of reaching the design state I'm looking for:
var style;
function changeFoo() {
if(typeof style == 'undefined') {
var append = true;
style = document.createElement('style');
}
else {
while (style.hasChildNodes()) {
style.removeChild(style.firstChild);
}
}
var head = document.getElementsByTagName('head')[0];
var rules = document.createTextNode(
'.tiletest2 { border:4px solid #999; background-color:#999; width: 50px; border-radius:32px; }'
);
style.type = 'text/css';
if(style.styleSheet) {
style.styleSheet.cssText = rules.nodeValue;
} else {
style.appendChild(rules);
}
if(append === true) head.appendChild(style);
}
The onmouseover event looks like this:
<div class="tiletest1" onmouseover="changeFoo()">
<br/><br/>
SAMPLE left
<br/><br/>
Try using a JavaScript library like http://jquery.com/. You can also get plugins like http://jqueryui.com/ for the kinds of effects you're describing.
I agree with TimS to go with jquery, specifically you will want to use the .animate()function.
This will make it much easier on yourself since you can easily control the speed and time the animation plays and you may be able to easily remove div(s) with the .hide() function, which gives you many options of what kind of animation you could use to close it.