I would like to add accessibility options to a website to give the user the chance to change the background of the following element (not the whole document background):
.ast-separate-container .ast-article-single {
background-color: #fffff0;
}
For example, I would like to display coloured boxes or text for:
Pink White Blue Yellow
and when the links are clicked the background colour changes.
Thanks in advance for any advice.
In this situation you should use JS and add event listener to this component:
element.addEventListener('click', function() {
element.classList.add(/* class with corresponding styles */)
});
Have a look at this code snippet, which uses javscript to achieve that:
var background = document.getElementById('background');
function setBackgroundTo(color) {
background.style.backgroundColor = color;
}
#background {
height: 100px;
width: 100px;
background-color: red;
}
The div below simulates your background. Click a button to change its color.
<div id="background"></div>
<button onclick="setBackgroundTo('red')">Red</button>
<button onclick="setBackgroundTo('blue')">Blue</button>
<button onclick="setBackgroundTo('green')">Green</button>
<button onclick="setBackgroundTo('#000')">Black</button>
Related
Here's the page that I'm having the issue on - http://impdigitaldev.site/home-v2-services-test/
Just scroll down a bit to the services section to see the menu that I'm referring to with this question.
So...
I've got a kind of "menu" on the services section of that page that has 4 different selections. When you click on one of the menu items, the background changes to orange.
When an item in the menu isn't selected however, the text should have a hover that changes the text orange. It currently has that.
The challenge I'm running into is that when you select a menu item, the background changes to orange. With the text hover still being set to orange - that creates a bit of a problem.
What I would like to have happen is that when you select a menu item, it removes the hover effect on that particular text element (or at least sets it to white), while maintaining the hover effect on the other 3 menu items on the page.
Then when you click on the other menu items, it does the same to the text in those divs, and kind of "resets" the hover on the previous menu item back to the orange hover on the text.
I've had some success with removing the hover effect when you click on a div, but I've not figured out resetting the hover effect back to the regular orange hover when you click on another div.
I dropped a snippet of the code I was experimenting with before that did change the hover color to white on the active menu item, but it doesn't switch back to orange after you select the other menu items.
Each button (div) of the menu has the class .blurb-1, 2, 3, 4 respectively.
(please be gentle, I literally just started experimenting with java/jquery like 2 weeks ago haha, so this code is probably garbage)
Any help is appreciated, thanks!
<script type="text/javascript">
(function($) {
$(document).ready(function() {
$(".blurb-1").click(function() {
$('.blurb-1:hover').css('color', '#ffffff');
$('.blurb-2:hover').css('color', '#ff6900');
$('.blurb-3:hover').css('color', '#ff6900');
$('.blurb-4:hover').css('color', '#ff6900');
});
$(".blurb-2").click(function() {
$('.blurb-1:hover').css('color', '#ff6900');
$('.blurb-2:hover').css('color', '#ffffff');
$('.blurb-3:hover').css('color', '#ff6900');
$('.blurb-4:hover').css('color', '#ff6900');
});
$(".blurb-3").click(function() {
$('.blurb-1:hover').css('color', '#ff6900');
$('.blurb-2:hover').css('color', '#ff6900');
$('.blurb-3:hover').css('color', '#ffffff');
$('.blurb-4:hover').css('color', '#ff6900');
});
$(".blurb-4").click(function() {
$('.blurb-1:hover').css('color', '#ff6900');
$('.blurb-2:hover').css('color', '#ff6900');
$('.blurb-3:hover').css('color', '#ff6900');
$('.blurb-4:hover').css('color', '#ffffff');
});
});
})(jQuery);
Here's one approach. Simplify your HTML structure and your JS code. Utilize stylesheet classes to make the hover changes you want... this example only does buttons one and two.
$(".blurb").click(function() {
$("body").removeClass(["b1", "b2", "b3", "b4"]);
$("body").addClass($(this).data('class'));
})
body.b1 [data-class=b1]:hover {
color: yellow;
}
body.b1 [data-class=b2]:hover {
color: green;
}
body.b1 [data-class=b3]:hover {
color: red;
}
body.b1 [data-class=b4]:hover {
color: blue;
}
body.b2 [data-class=b1]:hover {
color: indigo;
}
body.b2 [data-class=b2]:hover {
color: orange;
}
body.b2 [data-class=b3]:hover {
color: brown;
}
body.b2 [data-class=b4]:hover {
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-class='b1' class='blurb'>Blurb 1</button>
<button data-class='b2' class='blurb'>Blurb 2</button>
<button data-class='b3' class='blurb'>Blurb 3</button>
<button data-class='b4' class='blurb'>Blurb 4</button>
When navigating through inputs on the page using tab, they become outlined once in focus. But when I try to do something similar using, for example, arrow keys, focusing on checkboxes doesn't show outline styles.
jq(elems).keydown(function(e){
if(!e) return;
if(e.keyCode == '38') {
var el = ... // searching for the next element
el.focus();
}
Even if I manually add outline styles after focus, or add css like
input[type="checkbox"]:focus
{
outline-style:auto;
outline-color:
-webkit-focus-ring-color;
}
it wouldn't work. The focus is on the checkbox, the styles are there, but they are not displayed. Some other styles applied correctly, for example if I add styles like:
input[type="checkbox"]:focus {
box-shadow:1px 1px lightgrey;
}
I can see shadow box when focus is on the checkbox, but outline is not there.
I've only done this in raw js, but hopefully it helps:
Make sure to set the event listener on the document - otherwise you're only firing the event if the key is pressed whilst already 'inside' the element.
JS:
var el = document.getElementById('my-check');
document.addEventListener('keydown', function(e) {
e.preventDefault();
el.focus();
});
CSS:
input[type="checkbox"]:focus, input[type="checkbox"]:active {
width: 100px;
height: 100px;
outline-color: -webkit-focus-ring-color;
outline-style: solid !important;
}
DOM:
<form>
<input type="checkbox" id="my-check" />
</form>
Fiddle: https://jsfiddle.net/radmpxgs/1/
Sorry for the edits.
I am building a wordpress website and in the header part there is a search bar. How to create a dim effect(background:rgba(0,0,0,0.3)) on other elements except in search bar when I use the search bar (for example like in Quora.com). Also this code(your answer) should be working if I use code for other elements(other than search bar) like input box,or any other div.
I will be more satisfied if you come with an answer that is flexible to use for any div.
Thanking you in advance.
You need to add a click event to the element that needs to be clicked. You can then bind a function to that event that is triggered upon the click, as follows:
var test = document.getElementById("test");
test.addEventListener("click", changeColour);
function changeColour() {
var changeme = document.getElementById("change");
changeme.classList.add("addopacity");
}
#change {
background: #000;
width: 100px;
height: 100px;
}
#change.addopacity {
opacity: 0.2;
}
<button id="test">Click me please</button>
<div id="change"></div>
Please note, you don't have to add a class to the target element like I have above, you can just as easily add an inline style with changeme.style.opacity = "0.2"; within the function.
If you want to click on the element itself and have it change colour, you can do something similar:
var test = document.getElementById("change");
test.addEventListener("click", changeColour);
function changeColour() {
this.classList.add("addopacity");
}
#change {
background: #000;
width: 100px;
height: 100px;
color: #fff;
}
#change.addopacity {
opacity: 0.2;
}
<div id="change">CLICK ME</div>
Use the opacity property and apply it wherever you need it.
div {
opacity: 0.3;
}
I am building a one page website that will have a fixed burger icon for opening the menu. The burger icon has a color the same as certain background colors of some of the pages. Thus when the burger icon is on these pages it will not be visible. I am looking for a way to be able to change the color of the burger icon when it is on the pages that have the same color.
Let's say the burger icon is normally blue, and the div underneath it is white, here the burger icon remains blue. but if the next div is blue when the burger icon reaches this div it changes its color to white.
My burger icon is an empty div with the below css to make it look like a burger icon. The burger icon is wrapped in an other div with a fixed position.
//HTML Code
<section class="buttonset">
<div id="nav_list"></div>
</section>
//CSS Code
.buttonset
{
height: 50px;
position: fixed;
top: 53px;
left: 55px;
z-index: 1;
}
#nav_list
{
cursor: pointer;
height: 30px;
width: 41px;
}
#nav_list:before {
content: "";
position: absolute;
left: 0;
top: 2px;
width: 24px;
height: 0.17em;
background: #71ADBE;
box-shadow: 0 6px 0 0 #71ADBE, 0 12px 0 0 #71ADBE;
border-radius: 2px;
}
What I want is to change the background color of the burger icon to a different color when the background color of the div underneath the it is the same as the background color of the burger icon.
i.e if(burger icon = blue & homePage = blue){ burger icon background color change to white; }
In order to achieve this, I think that the code has to be running continuously check what the background color of the pages are so that it will be able to change the color of the burger icon.
Is there any way this can be done? Maybe detecting what background color the page has using javascript or jquery and then changing the color of the burger icon?
Thanks
EDIT Based off update HTML and CSS I created another fiddle https://jsfiddle.net/snpsp6as/4/
This is checking to see if body color matches burger color and if so changes burger button to white.
var element = document.getElementsByTagName("BODY")[0];
var style = window.getComputedStyle(element, "");
var bgColor = style.getPropertyValue("background-color");
var color = window.getComputedStyle(document.querySelector('#nav_list'), ':before').getPropertyValue('background-color');
if (bgColor == color) {
document.styleSheets[0].addRule('#nav_list:before', 'background: white !important; box-shadow: 0 6px 0 0 white, 0 12px 0 0 white !important;');
}
Yes, see fiddle https://jsfiddle.net/snpsp6as/
This is looking for the background color blue and its if blue it will change the text to white
<div id="div1">
<h1 id="myH1">Blue</h1>
</div>
<script>
var element = document.getElementById("div1");
var style = window.getComputedStyle(element, "");
var bgColor = style.getPropertyValue("background-color");
alert("The background color is: " + bgColor);
if (bgColor === "rgb(0, 0, 255)") {
document.getElementById("myH1").style.color = "white";
}
</script>
Disclaimer: This is just General Code and will be updated when the question gets some Detail.
var bgcol = $(this).css('background-color');
We save the bgcolor of the background. in the example the background is selected as this.
$(this).css('background-color', bgcol);
Append the background to your burger in this example Burger is selected as this.
I would use the analysis of the color component that you want. Here's an example of the red color (if you had a red and a blue icon):
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<body style="background-color: #F00">
<P id=value></P>
<script>
var color = $('body').css("background-color");
var red = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)[1];
//if red is too intense, we might want to avoid using the red icon
// (although it would be fine on a white background)
if (red > 100) {
$('#value').html("too red - choose a blue icon");
} else {
$('#value').html("not too red - chose a red icon");
}
</script>
</body>
</html>
Programatically - no. At least not in such a fashion that will universally work across browsers and platforms. The most reasonable approach (and the one used by countless corporate websites) is to have two versions of the image, and call them accordingly using (probably) javascript with a simple if statement that checks the blue values of the background.
If the background is an image, that gets a bit trickier, and may require manual intervention per page.
Using what I could assume from the question, you are looking for a solution that automatically changes the background color based on whether the burger icon is there (lets go with visible).
if ($(".logo").css('display') == 'none') {
$("html").css("background-color", "yellow", "!important");
}
Theoretically, this should work if the logo is set specifically to none.
Otherwise, there is additional Javascript to identify if the logo is present and change it to none and if that is what you are looking for you will need to edit your question.
Fiddle Link
I have a feeling this won't be possible, but thought I'd ask anyway.
<body> //body uses 'back' background
<div id="div1"> //div1 uses 'front' background
<div id="child1"> //child1: no backgrounds, so shows 'front' background
</div>
</div>
</body>
My body element uses a background image. (I'll call it the back background image)
div1 uses a different background image (I'll call it the front background image), so the front background image covers over the main background image.
div1 contains a child div child1 that doesn't use any background images, so it just shows the background image of its parent i.e. it shows the front background.
I would like child1 to use the background of body and not the background of its parent div1. Because of the nature of the back background (it's a drawing, not a repeating pattern), I can't just apply the back background image to child1. I actually need a way to make a hole in div1's background so that child1 gets the back background image as its background, and not its parent's background.
So my question is: is there a way a div can inherit its grandparent's background, as opposed to its parent's background?
If this isn't possible with CSS, I'm open to javascript solutions.
This would be with using javascript and jQuery:
CSS
body {
background: url("Background 1");
}
#div1 {
background: url("Background 2");
}
#child1 {
background: url("Background 1");
}
JS
$(function() {
function positionBackground() {
var myChild1 = $("#child1");
myChild1.css({
backgroundPosition : "-" + myChild1.offset().left + "px -" + myChild1.offset().top + "px"
});
}
positionBackground();
$(window).resize(positionBackground);
});
Here is the fiddle: http://jsfiddle.net/gMK9G/
I don't think you'll be able to change the way that styles are inherited, that said, you shouldn't really need to.
This is a little rough, but you could use the same image on the child div as you're using on the body and just play with the background positioning to line it up.
Working Example
body {
background: url("Background 1");
}
#div1 {
background: url("Background 2");
}
#child1 {
background: url("Background 1");
background-position: 0px -125px; /* adjust as needed */
}
UPDATE 2 Elements in the DOM Cannot share the same background image, you can maybe apply the background image and position them exactly so that it looks like they are, but in reality it is not possible.
As far as I am aware this is not currently possible because css only has inherit and inherit "inherits" from it's parents and there is no way to customize that. Of course javascript can do this easily and I will provide a jQuery example only because you have the jquery tag.
$('.inherit-grandparent').each(function( element ) {
var $this = $(this),
property = $this.attr('grandparent-property'),
value = $this.parent().parent().css(property);
if(property && value) $this.css(property, value);
});
Usage
<div class="inherit-grandparent" grandparent-property="background"></div>
Demo: http://jsfiddle.net/aKHfr/
So not only will this solve your problem, but it's dynamic so you can use it on any element and request any property.
Update:
Here is a jQuery Plugin version, if you would prefer that.
jQuery.fn.inheritGrandparent = function( property ) {
var $this = $(this),
value = $this.parent().parent().css(property);
if(property && value) $this.css(property, value);
};
Usage:
$('#test').inheritGrandparent('background');
Demo: http://jsfiddle.net/aKHfr/2/
Happy Coding!
My HTML:
<div class="p1">
<div class="p2">
<div class="p3">
GandSOn
</div>
</div>
</div>
My css:
.p1 {
disapley: flex;
}
.p2{
display:inherit;
}
.p3 {
display:inherit;
}