So I've got some convoluted code I'm working with and I need a help on a couple of finishing touches.
I have :active set in CSS so that it changes the color of a div element to a brighter color when you click on it. Later on in the code, it changes the div via JavaScript .style.backgroundColor.
I noticed that after this, it no longer honors the :active color. I was wondering if there was a way to restore or revert this, so that it always has the :active brighter color activated when you click it, even though I manually change its bg color through JavaScript.
General example:
CSS:
#div1{ background-color:black; };
#div1:active{ background-color:blue; };
JS:
document.getElementById("div1").style.backgroundColor="red";
The :active in the CSS (when clicked basically)no longer turns blue after the JS turns it red. How would I go about fixing this?
Two ideas come to mind.
Easy but a bit hacky, add !important so you have:
#div1:active{ background-color:blue!important; };
Instead of setting CSS directly via JS, instead add a class, like "bg-blue", then you can add a CSS line like:
.bg-blue:active { background-color:blue; }
Related
At first, I was trying to make it so :hover over a div element would change the background color. I did this with just simple CSS. It worked in Chrome and some earlier IE versions I've checked. With IE 11 though, when my mouse leaves the div, the hover background color stayed there.
So then I used jQuery to, on hover, add a class on hover and remove the class on mouseleave (and in the CSS file I associated the hover background color with this class). I used console.log to check that it was in these parts properly, and they were there, but removeClass('class-name') just is not actually removing the class in IE 11 for some reason.
I tried to use setClass and classList.remove/add too and could not remove the added class. Even though console.log showed that I was right there in the code that would do this.
So then I tried to, instead of adding/removing a class, just change the background color directly with hover events in jQuery, like $('div.target').css('background-color', 'color'). This worked the first two times. On hover, it changed to the hover background color, then leaving, it changed to the other color. But then I couldn't hover over the div again to get the hover color to come back.
Any tips or knowledge about quirks that could cause these issues?
The following snippet use JQuery mouseleave and mouseenter to perform a background-color changing. Works with IE 9+.
JSFiddle
HTML
<div class="myDiv myDiv-red">
</div>
CSS
.myDiv
{
height : 30px;
width : 30px;
}
.myDiv-red
{
background-color : red;
}
.myDiv-green
{
background-color : green;
}
JQuery
$(function() {
$(".myDiv").mouseenter(function() {
$(this).removeClass("myDiv-red").addClass("myDiv-green");
});
$(".myDiv").mouseleave(function() {
$(this).removeClass("myDiv-green").addClass("myDiv-red");
});
});
I need to hide the body scrollbar smoothly. I have tried overflow:hidden with transition but it does not work. Thanks in Advance
Unfortunately there is no 'Short and simple' solution to do this. A scrollbar is not an element by itself, so you're going to end up having to make it yourself, and adding the hover or click effect on it or a different element. Fortunately there are other StackOverflow users that have done this before and shared this with us so that we can use this in the future and learn from it. The latter being the main reason of course, since that is what SO is mostly for.
See this JSFiddle.
This fiddle imitates the functionality of Facebook's scrollbar that fades out when you are not hovering over it anymore. All you need to do is make it work with a click() event instead of the hover() event.
I know I'm a bit late but you helped me out so I might as well try to help back haha.
The selector ::-webkit-scrollbar could be modified to have an opacity of 0 and you could apply overflow: hidden at the same time if you wrote it in jQuery or JS. Like add ::-webkit-scrollbar { opacity: 0; transition: all .25s;} whenever you're trying to.
Got the selector from this article.
https://css-tricks.com/custom-scrollbars-in-webkit/
You can use below code to hide scroll bar
This will hide all scrollbars for textareas.
textarea
{
overflow:hidden;
}
You can also use the id or class of the textarea to make it only that one
textarea#txt
{
overflow:hidden;
}
This will hide scroll smoothly as per your need
jQuery('html,body').stop().animate({scrollTop:900 },500,function(){});
I've got a text/html slideshow with Javascript however upon cycling of new text I also need the script to trigger the :hover class on the menu item corresponding to the content present in the slideshow.
For a visual example please see: http://i.stack.imgur.com/mkyMJ.png
I've uploaded the JS code to http://pastebin.com/Kp4a7VXP for viewing.
Would really appreciate your help on this guys! :)
Thanks so much!
Kind Regards,
Jake
It may not make sense to try to mimic the hover state, so it may be better to have a css class such as .active added to the element you want the hover state for, and then include the css from the hover state in that class.
I'm assuming you have a CSS like
.item{
/* normal appearance */
}
and
.item:hover{
/* appearance when mouse over */
}
but as far as I know, there's no way to trigger the pseudo class :hover via javascript. But you can use a standard class for this like (but for semantics I would name it like .currentSlide or .activeSlide)
.item:hover,
.item.hover{
/* appearance when mouse over
or selected */
}
and then you can add and remove that class using javascript for the current slide element, like:
currentSlideDiv.classList.add("hover");
EDIT:
You can use a function like this, and call highlightCurrentSlideName(currentContentItem); inside NextClick() and PreviousClick()
function highlightCurrentSlideName(slideIndex){
var slideNameList = jQuery('.contentmenu a');
jQuery(slideNameList).removeClass('current'); //unhighlight all slide names
var currentSlide = slideNameList[slideIndex]; //select a slide name by a numeric index
jQuery(currentSlide).addClass('current'); //highlight that element
}
and add a class on your CSS file, and style it whatever you want.
.contentmenu a.current{
color: lightblue;
background-color: gray;
}
PS: I'm not a jQuery programmer I always write pure javascript, just noticed you have it there already.
i'm playing around with jquery ui resizable with the default example from jquery ui's site and i noticed a white patch in the middle of my div:
the white patch is only visible if i put a background color to my div such as:
background-color: cyan;
jsfiddle:
http://jsfiddle.net/9aQUz/
anyone knows what's going on?
thanks in advance
In your sample, you've given the div the "ui-widget-content" class.
In jqueryui, this class has the following background defination.
background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/;
In the base theme, this is just a white image.
You shouldn't need to assign jquery classes to elements. Whenever you call the function, it'll happen automatically.
This comes from jQuery's theme. It inserts a 40x100 image (http://code.jquery.com/ui/1.10.3/themes/smoothness/images/ui-bg_flat_75_ffffff_40x100.png) as the background for the class .ui-widget-content. It's done automatically when you use the resizable widget.
If it really bugs you you can override it by adding background-image: none; to your rule.
jsFiddle example
It works perfectly if you have the css there instead of pulling it in:
Fiddle
I have a 4x4 matrix of tiles. Each tile is basically a div. Now, I want to do the following:
When the mouse pointer is on a particular tile, I have to check perform a check on that tile(using position and stuff, which i have already done). If the tile meets the requirements, then it should have a hover effect.
Note: that the tiles keep changing positions, so at one moment the given tile must have the hover effect, but after rearrangement, it may not have it. And the rearrangement is not complete, ie i dont not reset the whole matrix. It involves only shifting a couple of tiles.
I need to implement this using css class and javascript(prototype, not jquery). I set a hover style for class hoverTile. I added a mouseover to each tile, such that whenever the user's mouse is over a tile, my function is called, which sets the class for the html div element using setAttribute.
Here is a summary:
Before:
<div> ... </div>
After:
<div class="hoverTile"> ... </div>
Style:
.hoverTile: hover{
text-color: red;
}
This does not seem to work, even though the class name appears when i inspect the html page. What is the mistake here?
Look at the demo I set up for you HERE
2 issues:
1) your seudo-selector (:hover) shouldn't have a space after the colon (:).
2) text-color should just be color
Micron and Igo probably answered your question although i'd like to add that you could achieve the same effect by adding
div:hover { color: red;
}
(you might not need the hoverTile class).
As for the border color
border-color:red; should work. [W3schools] So
.hoverTile { border: 5px solid #ff0000; } in your scheme.
Your CSS should be
.hoverTile:hover {
color: red;
}
not text-color (which is not a CSS property). Hope that fixes it.
EDIT: Also, if I understand correctly, you are adding hoverTile class on mouseover? In that case, you wouldn't need the :hover pseudo-class in your CSS at all. Make sure to remove the hoverTile class on mouseout though.