I have a visjs graph in my web page (using Chrome v49). Whenever I click on or hover over the graph a blue shadow box appears around it. After looking at vis.css I assume this is controlled by this selector:
.vis-active {
box-shadow: 0 0 10px #86d5f8;
}
The only configuration option I found in the vis documentation was clickToUse but that does not cause the shadow box to disappear, regardless of value.
I have also tried specifying .vis-active in my own css, even using the browser's debug to set it as the element styles with no luck.
Lastly, in the browser debugger, going through all of the vis elements shows nothing to indicate that .vis-active is being applied, or any other stylings that would result in that shadowing.
How can I prevent visjs from showing this shadowing?
It's possible that what you're seeing is Chrome's default "focus ring," which can be overridden by:
.vis-active:focus {
outline: none;
}
Option 1:
The simplest way is to unset the box-shadow property in vis.css (do it in the vis.css, if you don't have the vis-active line in the vis.css file, then create the following in that). Unset like this:
.vis-active {
box-shadow: unset;
}
Option 2:
Or you can set the shadow blur and spread to 0, like this (in your example):
.vis-active {
box-shadow: 0 0 0px #86d5f8; /* in this case, color doesn't matter, you can even omit it */
}
Or, set it to something else you want, e.g.:
.vis-active {
outline: none;
border-color: #af90c8;
border-width: 1px;
box-shadow: 0px 0px 20px 5px #af90c8;
}
Good luck!
Related
I'm currently working on a custom element which is basically a slightly augmented version of an input element, hosting all of its building blocks (including an input element) in a shadow DOM.
When the internal input element has focus, the host element should be styled with a colored outline and box-shadow, as seen below:
Therefore the focus and blur event handlers of the input toggle an attribute "focussed" on the host element with the encapsulated styles looking like this:
:host([focussed]) {
transition: outline 0.3s ease-in-out;
outline-color: var(--focus-color, var(--default-focus-color)) !important;
box-shadow: 0px 0px 3px var(--focus-color, var(--default-focus-color)) !important;
}
What I don't like about this approach:
Exposing a custom attribute on the host that needs to be observed, in order to ensure the correctness of the visually represented state (e.g. consumer calls setAttribute('focussed', ''))
Alternatives I considered:
Of course my first thought was to encapsulate the attribute within the shadow DOM (or even toggle a class) on a container element filling out the space of the host element, but the problem is that overflowing contents such as outline and box-shadow seem to be forcefully hidden by the host element - which seems kind of logical.
I could dictate a fixed padding on the host element to ensure the visibility of the outline and shadow, but this would require considering different browser rendering behaviour of box-shadow and would feel counter-intuitive for custom styling by the consumer.
I'm looking for a best practice approach here and I would very much appreciate your educated thoughts on this one.
this.attachShadow({
mode: 'open',
delegatesFocus: true
})
works in Chrome, Edge, Opera, not the others (yet)
This styles the input (in shadowDOM) itself with:
:focus {
transition: outline 1s ease-in-out;
outline: 2px solid var(--focus-color,blue);
box-shadow: 10px 0px 10px var(--focus-shadow-color,red);
}
And styles the host element with (global) CSS:
:focus {
outline: 5px solid green;
}
Full explanation and playground JSFiddle
use Chrome/Edge/Opera first, then see lacking behaviour in others:
https://jsfiddle.net/WebComponents/Lpqyg201/
It has some pointers for click/focus/blur workarounds.
For FireFox , Safari support I would add something not too fancy that can easily be removed.
For now it is unclear to me what the time frame at Mozilla and Apple is,
maybe Supersharp knows
I want a css class to work for only one object at a time. I want to activate it only when I hover over an object with that class. When my cursor leaves that object the class should still be activated. But when I hover over a second object with that class it should simultaneously start working for that object and stop working for the previous object.
The css I am trying to implement this way is for a set of thumbnail images and is as follows
{
box-shadow: 0 0 5px red;
}
None of the images should have this css activated by default when the page loads. How do I do it? Open to any kind of solution here css/javascript/jquery/plugin/anything elce. Can anyone help?
Use :hover:
The :hover CSS pseudo-class matches when the user designates an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).
REF: https://developer.mozilla.org/en/docs/Web/CSS/:hover
div:hover {
box-shadow: 0 0 5px red;
}
<div>11111</div>
<div>22222</div>
<div>33333</div>
Solution 2: use mouseover event (or hover as #abeyaz's answer), remove all active then add the active class to the current one.
The hover() function is more high level - it's built to call functions to handle both a mouseenter event and a mouseleave event. It's very convenient for a UI element that has a hover and normal state (e.g. a button.)
The mouseover() function specifically binds to the mouseover event. It's best for situations where you only care when the mouse has crossed the border into an element and you don't really care what happens if it leaves. It's also the function to call when you want to trigger the event on some element.
jQuery provides hover() as a convient way to handle common UI hovering states.
mouseover() is more for manually accessing the specific browser event.
REF: https://www.quora.com/jQuery/jQuery-What-is-the-difference-between-the-hover-and-mouseover-functions
$('div').on('mouseover', function(){
$('div').removeClass('active');
$(this).addClass('active');
})
.active {
box-shadow: 0 0 5px red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>11111</div>
<div>22222</div>
<div>33333</div>
You can do it easily using jquery as in this fiddle https://jsfiddle.net/4f1g1yxf/. You can do it easily using jquery as in fiddle below. The idea is simple; remove the class from activated one first, then add to the new one.
$(".box").hover(function(){
$(".box.activated").removeClass("activated");
$(this).addClass("activated");
});
.activated {
box-shadow: 0 0 5px red;
}
.box {
display: inline-block;
margin-right: 30px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
Try the next approach:
CSS:
.abc {
box-shadow: 0 0 5px red;
}
HTML:
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<p>hello</p><br>
<p>hello</p><br>
<p>hello</p><br>
<p>hello</p><br>
JS:
jQuery('*')
.bind('mouseover', function (event) {
var o = jQuery(this);
if (!o.find('.abc').length) {
o.addClass('abc');
}
})
.bind('mouseout', function () {
jQuery(this).removeClass('abc');
});
P.S. Instead of '*' put the proper class or element identifier to limit event scope.
I am using Reveal JS. This is the CSS that I want to override:
.reveal section img {...
Using one of the methods below (or something better), how can I use JS to override that?
document.getElementById(image1).classList.add("red"); // I tried creating a CSS class called "red" but it doesn't overide the original
document.getElementById(image1).style.boxShadow = "red"; // this doesn't overide the original theme CSS
First, use chrome dev tools to make sure that the class is actually being added to the element.
If it is being added but the styles are not being applied, your problems may be stemming from css specificity rules.
Instead of defining your class like this:
.red {
box-shadow: 5px 2px 2px red;
}
Try this:
.reveal section img.red {
box-shadow: 5px 2px 2px red;
}
I have this slidetoggle and I want the style of the open toggle to be different then the closed ones.
By default all the faqtopics1 are set to border-radius: 5px; background-color: #f2ecec; when the div faqtext associated opens.
When the toggle opens, I want the style of faqtopics1 to be set to the "OnClick Style"
border-radius: 5px 5px 0 0;
background-color: #dedcdc;
I found out about the .css() Method and could somehow make something up (line 2 and 3):
$(".faqtopics1").click(function(event) {
$("div.faqtopics1").css({"border-radius":"5px", "background-color":"#f2ecec"});
$(this).css({"border-radius":"5px 5px 0 0", "background-color":"#dedcdc"});
$("div.faqtext").stop(true).slideUp(400);
$(this).next("div.faqtext").stop(true).slideToggle();
});
But it's not a total success as even when I re-click on a toggle to close it, the OnClick style remains. Is there a better way to make what I want ?
Also I want to apply the same principal even if I click on faqtopics2, faqtopics3 or faqtopics4 div. (cf the jsfiddle).
You can find my codes (css + query) on this jsfiddle
Thanks a lot for your help!
Something much easier:
Define your two states in CSS:
faqtopics1 {
border-radius: 5px;
background-color: #f2ecec;
}
.onclickstyle {
border-radius: 5px 5px 0 0;
background-color: #dedcdc;
}
Then in JS you just have to toogle the class:
$("div.faqtopics1").toggleClass("onclickstyle");
This means you have a clear separation between the exact style (in the css), and the dynamic toogle (in the javascript).
It may be easier to use addClass.
$this.addClass('active');
Then in your css
.faqtopics.active{border-radius:5px 5px 0 0; background-color:#dedcdc;}
You can give all of your "FAQ topics" a shared class .faqtopics and then unique id's #faqtopic1 #faqtopic2 if you need to style them a bit differently.
try this,
$('faqtopics1').attr('class','newClassName');
I have an image example here of this feature that is now available in Excel 2010's spark lines:
Ideally I'd like to have a vertical line as well indicating a max/min for each row.
Any resources to this effect (I'm here to learn) would be great.
(If you just want to get it done, Google charts will be much quicker and simpler - but if you want to learn, this sounds like a pretty cool little project.)
It sounds like you are primarily having trouble with HTML/CSS.
I would stick with <div> for this, as <table> has more baggage with browsers around setting widths, borders, etc. <div> is pretty much a blank slate. I'd ignore all the extra lines in your example picture (at first, anyways) and focus on creating stacked bars of differing widths, with lines for max and min.
HTML:
<div class="row">
<div class="value">5873</div>
<div class="min">3049</div>
<div class="max">6039</div>
</div>
CSS:
div {
height: 20px; /* You'll want all of the heights to match */
}
div.value {
position: absolute; /* All of the inner divs are positioned absolute so they overlap eachother */
-moz-box-shadow: inset 0 0 10px #aaa; /* basic inset shadow for some dimension - you could make it look however u like with some work */
-webkit-box-shadow: inset 0 0 10px #aaa;
box-shadow: inset 0 0 10px #aaa;
}
div.min,
div.max {
position: absolute;
text-indent: -999em;
border-right: 2px solid #000; /* This becomes the indicator for the min/max */
}
In javascript, you're going to want to set the widths of all div.value, div.max, and div.min based on what their text values are, something like:
$('div.value, div.min, div.max').each(function(){
$(this).width($(this).text() / 100);
});
I'm skipping lots of detail here, but hopefully this helps. Good luck!
How about Google Chart Tools? Looks like they have tons of options--We've used this in our projects with success (I've personally never used it though).
Here's a quick example (labels aren't quite what you're looking for but some of the examples do have inline labels):