i need to remove/deactivate/change to zero effect following style argument:
#wrapper .fragment-card.aktuelles-card .image-card img:hover{
transform:scale(3);
box-shadow:0 4px 6px 0 #222;
}
this has to happen with very basic Javascript, so i can not use libarys etc. The JS part will be executed at the end of the page.
Thanks for your help!
You cannot directly deactivate a CSS rule using javascript. So you have two options:
1) The first option uses only javascript for doing it. You can modify the style attribute of the element using the setAttribute() method in order to set transform: none; box-shadow: none;. Like this:
const el = document.querySelector("#myElementId");
el.setAttribute("style", "transform: none; box-shadow: none;");
However, I don't like to use the style attribute while using css rules since I prefer to see all styles in the same css file, and it makes more difficult to mantain code, so I don't recommend to use this solution.
2) The good practice solution involves both CSS and JS. You have to reference make your css rule to a class .my-style. So then you write your css rule like this:
.my-style {
transform:scale(3);
box-shadow:0 4px 6px 0 #222;
}
So, now you will need to use Javascript to add or remove the .my-style class whenever you need. In the case of img:hover reference you use in your original css, you can make your own js function to add the class when an img is hover, and remove the class when the pointer leaves the img. This event listener will be useful:
document.querySelectorAll("img").forEach(img => {
img.addEventListener("mouseover", function() {
img.classList.add("my-style");
})
img.addEventListener("mouseleave", function() {
img.classList.remove("my-style");
})
});
Try it here
document.querySelectorAll("img").forEach(img => {
img.addEventListener("mouseover", function() {
img.classList.add("my-style");
})
img.addEventListener("mouseleave", function() {
img.classList.remove("my-style");
})
});
.my-style {
transform:scale(3);
box-shadow:0 4px 6px 0 #222;
}
img {
width: 200px;
height: auto;
}
<img src="https://s1.eestatic.com/2021/05/06/curiosidades/mascotas/579203536_184266041_1706x960.jpg">
<img src="https://ichef.bbci.co.uk/news/640/cpsprodpb/15665/production/_107435678_perro1.jpg">
<img src="https://dam.ngenespanol.com/wp-content/uploads/2019/06/mirada-perros-770x395.png">
You could just create another stylesheet and add that to the end of the head element
if you are sure that the offending styling is set in the head. If not you could put it at the end of the body.
This snippet adds it to the end of the head:
<!doctype html>
<html>
<head>
<style>
#wrapper .fragment-card.aktuelles-card .image-card img:hover {
transform: scale(3);
box-shadow: 0 4px 6px 0 #222;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="fragment-card aktuelles-card">
<div class="image-card">
<img src="https://picsum.photos/id/1015/200/300">
</div>
</div>
</div>
<script>
const style = document.createElement('style');
style.innerHTML = '#wrapper .fragment-card.aktuelles-card .image-card img:hover{transform: inherit!important;box-shadow: inherit!important};';
const head = document.querySelector('head');
head.appendChild(style);
</script>
</body>
</html>
Related
I'm trying to override the background color present in vaadin-combo-box-overlay element.
Here is the css that I want to override, more specifically the background property, source taken from (https://github.com/vaadin/vaadin-combo-box/blob/master/vaadin-combo-box-overlay.html)
:host {
position: absolute;
#apply(--shadow-elevation-2dp);
background: #fff;
border-radius: 0 0 2px 2px;
top: 0;
left: 0;
.......
}
So I've tried something like:
:root ::content vaadin-combo-box-overlay.vaadin-combo-box-overlay {
background: red !important;
background-color: red !important;
}
Also I've tried with :host but I guess it should be used :root because I use this dropdown in a dialog, and the overlay component doesn't seem to be a child of the dialog. I've tried different combinatons as the one mentioned above without any success.
Also I'm wondering why the background is not parameterized as the text color is:
#selector .item {
cursor: pointer;
padding: 13px 16px;
color: var(--primary-text-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Specifying a different value for --primary-text-color I'm able to change the text color..
Thanks.
you can do it with javascript like that.
ready: function() {
var domElem=Polymer.dom(this).node.$.YOUR-VAADIN-ELEMENT-ID.$.overlay.style.backgroundColor="red";
}
OR
ready: function() {
var css = '#selector .item { background-color:red; }';
var style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
Polymer.dom(this).node.$.tourSelector.$.overlay.$.selector.appendChild(style);
}
Would like to have a working CSS selector, but i cant set breakpoints in CSS to find out the right selectors!
You should use dom-module for styling vaading parts see example below:
<dom-module id="combo-box-overlay-styles" theme-for="vaadin-combo-box-overlay">
<template>
<style>
[part~="content"] {
background-color: red;
}
</style>
</template>
</dom-module>
Read more here https://github.com/vaadin/vaadin-themable-mixin/wiki
Thanks Patrick !!
I wasn't thinking about to do try it this way.
Here's what I did, a hacky solution though.
ready : function(){
var combo = this.$$('#comboid');
combo.addEventListener('vaadin-dropdown-opened'', function() {
var overlay = Polymer.dom(this.root).querySelector('#overlay');
overlay.style.backgroundColor = primaryBackground;
});
},
I only have access to the overlay when the combo is expanded, so in the value change listener the combo would be expanded.
I have a program which allows the user to select some images and i gave them the pseudo class
.my_image_clas:hover{
border:3px solid blue;
-webkit-box-sizing: border-box; }
to make them surrounded with borders when the pointer goes over (giving a "selected effect"). I'd like to keep this effect even when i select the image, like this :
How can i achieve this? (With javascript)
CSS-only "hack"
At first this question asked for CSS-only solution and while, as others have said, it's not really possible to achieve what you ask for without JavaScript, there is a CSS-only hack, however:
img {
margin: 3px;
width: 100px;
}
img:hover, img:target {
border: 3px solid green;
margin: 0;
}
<img id="a" src="https://farm1.static.flickr.com/640/23366158776_3bddebe005_t.jpg" />
<img id="b" src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Marsglobe_tiny2.jpg" />
It works by making your images a target of a click on an anchor they are contained in. We can style elements that are link targets, because we have a selector for that in CSS.
Note that this way you can select only one image.
Pure JavaScript
If you want to do it with JavaScript though, you can use below code:
function select(element) {
element.onclick = function() {
element.classList.toggle('selected');
}
}
Array.from(document.getElementsByClassName('selectable')).forEach(select);
img {
margin: 3px;
}
.selected {
border: 3px solid green;
margin: 0;
}
<img class="selectable" src="https://farm1.static.flickr.com/640/23366158776_3bddebe005_t.jpg" />
<img class="selectable" src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Marsglobe_tiny2.jpg" />
It works by toggling class named selected on click for every element with class selectable. Also, it will let you select multiple items.
If you want to limit the user to selecting only one element though, change the above JavaScript to:
function select(element) {
element.onclick = function() {
var selected = document.getElementsByClassName('selected')[0];
if (typeof selected !== 'undefined') { selected.classList.remove('selected'); }
if (element !== selected) { element.classList.add('selected'); }
}
}
Array.from(document.getElementsByClassName('selectable')).forEach(select);
You may use jQuery here for hovering effects, jQuery provides the hover() pseudo-event, which behaves better than moueseenter/mouseleave. Also, it's a good idea to create a CSS class for each state (normal and hovered), and then change the class on hover:
$(document).ready(function() {
$(".my_image_clas").hover(
function() { $(this).addClass("Hover"); },
function() { $(this).removeClass("Hover"); }
);
});
.my_image_clas.Hover { border: 3px solid blue; }
#Francesco Monti I've read your comment.
for working with jquery you may add jquery.js under the head tag of your html
<head>
<script src="jquery-1.12.0.min.js"></script>
</head>
or adding online would be
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
and you can use $(document).ready(function() under the script tags.
If you want you can separate js & css files and includes those files accordingly.
Your approx CSS:
.item {
box-sizing: border-box;
border: 2px solid transparent;
}
.item.selected,
.item:hover,
.item:focus {
border: 2px solid blue;
}
Some basic jQuery:
$('.item').on('click', function (event) {
event.preventDefault(); // Prevent default behavior if .item is a link or button
$(this).toggleClass('selected');
})
My problem is as follows: I have a clickable div with a background-image that changes (the image) on :hover.
This div kind of represents a menu button. When the div is pressed a script is executed that changes the background-image too.
However, I want the hover to still work after running this script. I have read about the style priorities and that I should use !important with the hover. I have used this before without problems, but for some reason the hover doesn't work, even with !important. Does this have something to do with background-image, can't this be combined with !important?
The div:
<a href="#" onclick="open_Thema(1);">
<div id="venster_Links_Menu_1">
<div class="venster_Links_Menu_Tekst">Introductie</div>
</div>
</a>
The css:
#venster_Links_Menu_1 {
margin: 0;
height: calc((100%/6) - 1px);
border-bottom: 1px solid white;
width: 100%;
background-image: url(images/Thema_1_Half.png);
background-size: cover;
position:relative;
}
#venster_Links_Menu_1:hover {
background-image: url(images/Thema_1.png); !important
}
And the script:
<script>
var themaOud = 0;
function init(){
}
function open_Thema(themaNieuw){
if (themaOud != 0)
{
document.getElementById("venster_Links_Menu_"+themaOud).style.backgroundImage="url(images/Thema_"+themaOud+"_Half.png)";
}
document.getElementById("venster_Links_Menu_"+themaNieuw).style.backgroundImage="url(images/Thema_"+themaNieuw+".png)";
themaOud = themaNieuw;
}
</script>
The correct way to write an important would be
!important;
not
; !important
Notice the placement of the semicolon.
So I want one of my images, when clicked on, to have the #app1 animate towards either side then fade out.
I'm aware that my image should have a "on click" attribute, which I have done so. I have a swipe function that will get called. Within my swipe function is where the javascript/jquery is suppose to do the animation.
Yet it is not working, am I doing something wrong? Please help.
THANKS.
<!DOCTYPE html>
<!-- this is comment -->
<html>
<head>
<title>Forget Me Not</title>
<style>
body
{
background-color:#66d9ff;
}
#app1{
position:absolute;
width:250px;
height:250px;
z-index:0;
top:50%;
left:50%;
margin:-150px 0 0 -150px;
background:white;
box-shadow: 0 0 1px 1px #888888;
text-align:center
}
img.appIMG1{
-webkit-box-shadow: 0 0 1px 1px #888888;
box-shadow:0 0 1px 1px #888888;
}
img.appIMG2{
-webkit-box-shadow: 0 0 1px 1px #888888;
box-shadow:0 0 1px 1px #888888;
}
</style>
<script src="jquery-1.9.1.js"></script>
<script>
function Swipe()
{
$(document).ready(function()
{
$(".appIMG1").click(function()
{
$("app1").animate({left:'250px'});
});
});
}
</script>
</head>
<body>
<div id="app1"><p><b><u><font face="TimeBurner" color="#66d9ff" size="6">Do you want to make a reminder?</b></u></font></p>
<br>
<img class="appIMG1" border="0" src="YES.png" align="left" hspace=1.8% onclick="Swipe()">
<img class="appIMG2" border="0" src="NO.png" align="right" hspace=2%>
</div>
</body>
</html>
You missed #
$("#app1").animate({left:'250px'});
Demo --> http://jsfiddle.net/AdZ9r/
You don't need on click attribute on your image (as you are already
binding click handler with jQuery)
All you need is (with removed onClick attribute from img)
$(document).ready(function () {
$(".appIMG1").click(function () {
$("#app1").animate({
left: '250px'
});
});
});
since you are using the onclick attribute, you can do either this (without the onclick attribute) in the script tag:
$(document).ready(function()
{
$(".appIMG1").click(function()
{
$("#app1").animate({left:'250px'});
});
});
or this (with onclick attribute)
function Swipe()
{
$("#app1").animate({left:'250px'});
}
and don't forget '#' for the app1 selector.
You're missing the # in your animate.
Also, you shouldnt need the onClick attached to the IMG if you are using the jQuery events. I cleaned up your JS a bit too.
I created a simple example, based on your code, of what you're looking to accomplish here
$(".appIMG1").click(function()
{
$("#app1").animate({left:'250px'});
});
I have a site that has 4 subpages. I want to add nivo slider on each page in separate height. I've added 3 sliders successfully, but on one page I want to show nivo-controlNav with margin top 30px, how can I do that?
My code looks like this:
.nivo-controlNav {
text-align:center;
padding: 0;
}
It's good for my other 3 pages but I want to add:
.nivo-controlNav {
text-align:center;
padding: 0;
margin-top:30px;
}
Add this on the page wher u need margin in < head >< / head > section
<script type="text/javascript">
$(document).ready(function () {
$('.nivo-controlNav').css('margin','30px');
});
</script>
if that doesnt help try setting z-index, visible properties like above
$('.nivo-controlNav').css('z-index','1500');
$('.nivo-controlNav').css('visibility','visible');
You must add some class or id to separate from others. Then you write a style for that
particular class or id or use the inline style (Inline is not a good practice)
for example
.classname
{
margin-top:30px;
}
If it is on a completely separate page you can easily just add the second set of rules you have above. If they are all governed by one single style sheet you can do this
.differentClassName{
margin-top: 30px;
}
.nivo-controlNav {
text-align: center;
padding:10px 0px 0px 0px;
clear:both;
position: relative;
z-index: 10;}