I am trying to make a button that has a :hover state on a popup box, when you one of the buttons I am removing the box from the DOM and saving it for future interacts. the problem is when I reattach it to the DOM in IE9 it has not cleared the :hover state until you next hover it then mouse out.
Obviously this is not present on any other browser, but is reproducible here: http://jsfiddle.net/5dXSp/
I cant find a manual way of clearing a css :hover state, and I really dont want to have to rebuild the menu every time because of this. Any thoughts?
Try controlling the hover with a class and jQuery. This seemed to work for me:
http://jsfiddle.net/5dXSp/25/
CSS:
.box{
height:200px;
margin:10px 0;
}
.button{
display:block;
width:200px;
height:20px;
background:#ccc;
}
.hover {
background-color: #000;
}
jQuery:
$(".button").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
$(".button").click(function(ev){
ev.preventDefault();
$(ev.target).appendTo($(".catch"));
$(this).removeClass("hover");
});
There is one additional way to fix it.
You can hide element before detaching it from DOM, but in a different event processing.
Something like that:
// HTML structure: <div id="aaa"> <a id="bbb"> Text </a> </div>
var bbb = document.getElementById('bbb');
var container = document.getElementById('aaa');
bbb.attachEvent("onclick", function() {
bbb.style.display = "none";
window.setTimeout(function() {
container.removeChild(bbb);
bbb.style.display = "";
// Some time later
window.setTimeout(function() {
container.appendChild(bbb);
}, 2000);
}, 1);
});
bbb.style.visibility = "hidden" worked too.
using jquery you can do ugly things like:
if($.browser.msie)
$('el').html($(el).html());
to de and attach the element
Related
I am trying to detect click events on an elements ::after pseudo element.
I'm hoping something like this is possible:
//css
div:after{
content:"X";
display:block;
}
//jsx
class PsudoExample extends Component{
render(){
return(
<div onAfterClick={() => {}}>
</div>
)
}
}
Ideally I would like a solution that doesn't involve the use of document.queryselector or something like that.
I don't believe there's a way to distinguish click events from an element and it's pesduo element(s) - the same event handler will fire when the user clicks on either.
One thing you can do though is use CSS to disable pointer-events on the host element, while allowing pointer-events on the element's pseduo element(s). That would give you a "half-way-there" mechanism for detecting clicks on pseduo element(s) only:
div:after{
content:"X";
display:block;
pointer-events: initial;
}
div{
pointer-events:none;
}
With that, you would then use the regular onClick handler which should now only fire when the ::after element is clicked:
class PseudoExample extends Component{
render(){
return(
<div onClick={() => { console.log("after clicked"); }}>
I host a pseduo elements
</div>
)
}
}
Hope that helps!
You can set a click handler on the parent, but that won't tell you that the click was exactly on the "x" button.
Pseudo elements are meant to be used for decoration only. That's why you wouldn't need to write HTML for them and they are fully written in CSS.
If you have an "X" button that does something, you are better off adding a button element for it. Pseudo elements are not made for this. They are also not accessible (cannot have keyboard focus).
class PseudoExample extends React.Component {
render () {
return (
<div>
<button onClick={this.close} type="button" class="close"/>
</div>
)
}
close = () => {
console.log('clicked')
}
}
ReactDOM.render(<PseudoExample/>, document.querySelector('main'))
.close {
border: none;
}
.close:after {
content: "X";
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<main/>
I hate "you are doing it wrong" answers too. But in this case I think a small change (hopefully it's small in your case) is a much better option.
const handleClick = (item, e) => {
let divLength = 210; // depends on your width
if(e.nativeEvent.layerX < divLength) {
//your code goes here
} else {
console.log("clicked after")
}
return (
<div onClick={(e) => handleClick(e)}>Click me</div>
)
e.nativeEvent.layerX returns the width of the clicked area of the element from left to right.
I was wondering if there was a way to change a button's style, in css, after it's been clicked, so not a element:active.
If you're looking for a pure css option, try using the :focus pseudo class.
#style {
background-color: red;
}
#style:focus {
background-color:yellow;
}
Each link has five different states: link, hover, active, focus and visited.
Link is the normal appearance, hover is when you mouse over, active is the state when it's clicked, focus follows active and visited is the state you end up when you unfocus the recently clicked link.
I'm guessing you want to achieve a different style on either focus or visited, then you can add the following CSS:
a { color: #00c; }
a:visited { #ccc; }
a:focus { #cc0; }
A recommended order in your CSS to not cause any trouble is the following:
a
a:visited { ... }
a:focus { ... }
a:hover { ... }
a:active { ... }
You can use your web browser's developer tools to force the states of the element like this (Chrome->Developer Tools/Inspect Element->Style->Filter :hov):
Force state in Chrome Developer Tools
It is possible to do with CSS only by selecting active and focus pseudo element of the button.
button:active{
background:olive;
}
button:focus{
background:olive;
}
See codepen: http://codepen.io/fennefoss/pen/Bpqdqx
You could also write a simple jQuery click function which changes the background color.
HTML:
<button class="js-click">Click me!</button>
CSS:
button {
background: none;
}
JavaScript:
$( ".js-click" ).click(function() {
$( ".js-click" ).css('background', 'green');
});
Check out this codepen: http://codepen.io/fennefoss/pen/pRxrVG
Try to check outline on button's focus:
button:focus {
outline: blue auto 5px;
}
If you have it, just set it to none.
What is the code of your button? If it's an a tag, then you could do this:
a {
padding: 5px;
background: green;
}
a:visited {
background: red;
}
A button
Or you could use jQuery to add a class on click, as below:
$("#button").click(function() {
$("#button").addClass('button-clicked');
});
.button-clicked {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Button</button>
If your button would be an <a> element, you could use the :visited selector.
You are limited however, you can only change:
color
background-color
border-color (and its sub-properties)
outline-color
The color parts of the fill and stroke properties
I haven't read this article about revisiting the :visited but maybe some smarter people have found more ways to hack it.
An easy way of doing this is to use JavaScript like so:
element.addEventListener('click', (e => {
e.preventDefault();
element.style = '<insert CSS here as you would in a style attribute>';
}));
all answers is true for hover, focus,...
if you want change background-color when you click and be stay that clicked state, you could do this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
<script>
const element = document.querySelector("body")
let taskDone = false
// function for show button
const elementShow = () => {
element.innerHTML = `
<button id="done-button" style="background-color : ${!taskDone
? "#4dd432" : "#fd67ad"};" onclick=doneTask()>
${!taskDone ? "Done" : "not done yet"}
</button>
`
}
elementShow()
// click Done button
const doneTask = () => {
taskDone = (taskDone ? false : true)
elementShow()
}
</script>
</html>
Angular JS code I am working on has media queries that can be used to limit the display of blocks with code like this:
#media screen and (max-width: 370px) {
#testGrid {
.gridHeader {
div:nth-child(2),
div:nth-child(3),
div:nth-child(n+7) {
display: none;
}
div:nth-child(6) {
border-top-right-radius: 0.4rem;
}
}
.gridBody {
div {
div:nth-child(2),
div:nth-child(3),
div:nth-child(n+7) {
display: none;
}
}
}
}
}
My comment here was that it's not good to use things like div:nth-child(2) as this would easily break if another column was added. Plus it's also difficult to maintain. I suggested to give the column names class names that matched the contents of the columns.
Still this means that I have the code that defines what shows and what does not show far removed from the HTML. Does anyone have any suggestions on a way that I could do this with AngularJS that would have the showing and hiding of columns next to the actual <div>s
You can get the current width from the $window service so you could try something like this:
DEMO
app.controller('MainCtrl', function($scope, $window) {
$scope.name = 'World';
angular.element($window).bind('resize', function(){
$scope.hideThing = ($window.innerWidth < 400);
// have to manually update $scope as angular won't know about the resize event
$scope.$digest();
});
});
Then in your HTML
<body ng-controller="MainCtrl">
<p ng-hide="hideThing" >Hello {{name}}!</p>
</body>
I would like to highlight a div when it's clicked.
Heres the example: www.spidex.org
On this website if you hover any of the navigation buttons a div on the top of the page is highlighted.
You may use jQuery for achieving this.
get jQuery here.
now consider that you have a div that you want to highlight on mouseover called item.
do this by adding an overlay div.
div.overlay{
opacity:0;
background:#000;
width:100%;
height:100%;
position:absolute;
top:50px;left:0;
}
then use jquery
jQuery(document).ready(function($){
$('.item').mouseover(function(){
$('.overlay').css({opacity:0.3});
});
});
You can change the appearance of elements when hovered using the :hover pseudo-class.
For example
div:hover {
color: red;
}
Secondly, you can change the text color via using the color property and the background color using the background-color property.
Both are shown below:
div:hover {
color: black;
background-color: white;
}
In your given example, when you hover over the primary navigation items in the super-header, then the body dims. I agree with your analysis that this is managed with some cover div of the body.
One cross-browser approach (using jQuery in this example) you might consider would be the following:
EXAMPLE HTML:
<div class="header">
Some Link
</div>
<div class="body">
<div class="body-content">
[ CONTENT HTML ]
</div>
<div class="body-cover"></div>
</div>
EXAMPLE CSS:
.body {
position: relative; /* container needs position */
}
.body-cover {
position: absolute;
top: 0px;
left: 0px;
background-color: blue;
/*
you could use a sligtly transparent background here,
or tween your opacity in your javascript
*/
}
EXAMPLE JavaScript:
// on dom ready
jQuery(function ($) {
// closures
var $links = $('.header a');
var $body = $('.body');
var $content = $body.find('.body-content');
var $cover = $body.find('.body-cover');
var sCoverHiddenCssClassName = 'body-cover-hidden';
var sCoverTweeningCssClassName = 'body-cover-tweening';
var sCoverShowingCssClassName = 'body-cover-showing';
// closure methods
var fMouseOver = function () {
// check to see if hidden (not already tweening or showing)
if ($cover.hasClass(sCoverHiddenCssClassName)) {
// check content, may have changed.
$cover.css({
height: $content.outerHeight(),
width: $content.outerWidth()
});
// animate or tween cover (do this however you want)
$cover
.removeClass(sCoverHiddenCssClassName)
.addClass(sCoverTweeningCssClassName)
.fadeIn(function () {
// when completed, mark as showing/visible
$cover
.removeClass(sCoverTweeningCssClassName)
.addClass(sCoverShowingCssClassName);
});
}
};
var fMouseOut = function () {
// check to see if visible (not already tweening or hidden)
if ($cover.hasClass(sCoverShowingCssClassName)) {
// animate or tween cover (do this however you want)
$cover
.removeClass(sCoverShowingCssClassName)
.addClass(sCoverTweeningCssClassName)
.fadeOut(function () {
// when completed, mark as showing/visible
$cover
.removeClass(sCoverTweeningCssClassName)
.addClass(sCoverHiddenCssClassName);
});
}
};
var fClick = function (e) {
// prevent default if needed for anchors or submit buttons
// e.preventDefault();
if ($cover.hasClass(sCoverHiddenCssClassName)) {
fMouseOver();
}
else if ($cover.hasClass(sCoverShowingCssClassName)) {
fMouseOut();
}
};
// init interaction
$cover.hide().addClass(sCoverHiddenCssClassName);
$links.each(function () {
// wire links
jQuery(this)
.mouseover(fMouseOver)
.mouseout(fMouseOut);//
//.click(fClick); // use click event if desired
});
});
JQuery UI is also gives an good option to quickly highlight div .
https://jqueryui.com/effect/
$( "#divId" ).effect( "highlight", 500 );
I have created a CSS button but it is not responsive. I have tried adding EM or % but still not working. I want to change width and height according to the screen resolution.
Following is the CSS code I am actually using:
#media only screen and (min-width:321px) and (max-width:480px) { }
HTML
<div>
<p>
<button class="btn btn-1 btn-1a">Click Here To Enter The Future</button>
</p>
</div>
CSS
.btn {
font-size:0.875em;
display:block;
left:-60px;
margin-top:35px;
}
Right now the button is moving from left to right, but I want the button to appear at the exact same place.
You could add width:100%; to achieve your objective.
.btn {
font-size:0.875em;
display:block;
left:-60px;
margin-top:35px;
width:100%;
}
This should work
.btn {
width: 100%;
min-width: 50px; // add this if you want
max-width: 300px; // add this if you want, adjust accordingly
}
This works for me:
<script>
$(document).ready(function() {
$('#select_preferences').multiselect({
buttonText: function(options, select) {
return 'Look for users that:';
},
buttonTitle: function(options, select) {
var labels = [];
options.each(function() {
labels.push($(this).text()); //get the options in a string. later it would be joined with - seprate between each.
});
if(!labels.length ===0 )
{
$('#range-div').removeClass('hide');
// The class 'hide' hide the content.
//So I remove it so it would be visible.
}
if (labels.length ===0)
$('#range-div').addClass('hide');
//If the labels array is empty - then do use the hide class to hide the range-selector.
return labels.join(' - ');
// the options seperated by ' - '
// This returns the text of th options in labels[].
}
});