I'm looking for a simple way to persist a "hover" style on a page refresh if the user did not move his mouse. The issue is that the hover style is only triggered on a mouse enter/mouseover event, so on a page refresh it will not be applied even if the cursor is above the item in question until the user touches the mouse again and moves it slightly. The code below has this issue.
$('div').click(function () {
window.location.reload();
});
div {
width: 100px;
height: 100px;
background: grey;
}
div:hover {
background: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
can you set the a:visited { background-color:black;color:#fff} Of course this would apply to the whole page so all your visited backgrounds would be black. I've never tried to marry div a:visited{background-color:black;color:#fff;} so not sure that would work. They say nothing ventured, nothing gained.
Related
I have a menu button which is half visible and half outside the screen. The full button is visible only when it is 'hovered' (I've written CSS for this, the button moves horizontal so it is displayed fully). Now this works on Desktop website. But as you know hover is not available on Mobile sites, so hover is converted to click. The click makes the button fully visible but it does not hide again when clicked again, because we have not defined click event to display and hide it, because it won't interfere with hover.
So is there any short and efficient way to do this, so that hover works on desktop and click works on phone for the same (display and hide) function?
You can use CSS or jQuery or both.
For your case, I suggest you set a hover function within a break-point that suits desktops and a click function within a break-point that suits mobile device. See my example below and adjust as needed.
$(document).ready(function() {
// When document is ready check window width, then choose hover/click
if ($(window).width() > 768) {
$("div").hover(function() {
$(this).toggleClass("increase");
});
} else {
$("div").click(function() {
$(this).toggleClass("increase");
});
}
});
div {
width: 50px;
height: 15px;
line-height: 45px;
margin: 0 auto;
background: red;
color: white;
border-radius: 5px;
text-align: center;
cursor: pointer;
overflow: hidden;
transition: all 1s;
}
div.increase {
width: 150px;
height: 45px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> I am the Button</div>
Note: in my example; hover toggles the height/width when device width is wider than 768px, while a click toggles the height/width when device width is less than 768px
its simple try this
1 - disable hover on mobile device using media query
#media screen and (max-width:767px){
button:hover{ just disable css u r using }
}
2- add this jquery - this code adding and removing a class on the button click
$('button').click(function(){
$(this).toggleClass('btnClick');
});
3: now write the same hover css for this class
.btnClick{
}
I'm using CSS to bring down a header element when the user hovers over it. Is it possible to also bring down the rest of the page so that the header overlaps absolutely nothing? How would this be done?
Example of header here: http://dev.handyvet.org/VetProsDevSite/_MASTER/views/vetpro%20users/vet_pro_registration_3.html
Thanks!
You just need to use the height of the nav div, like this:
nav {
width: 100%;
height: 50px;
background: #000;
color: #fff;
}
.active {
height: 200px;
}
I made you a very simple fiddle: http://jsfiddle.net/rnc8L53L/
I used jQuery to toggle the .active class, on the nav when the button is pressed. The .active class overrides the "height:50px" rule , which is the initial state of the nav class.
It's just a very simple example that. It can be done with Javascript too but the event handling is a little more complex. Hope it helps.
You can move the whole page instead of header. Set negative top margin for page as default and decrease it's value when you need it
On my webpage, I have a footer which has a textarea box. When the user clicks in the textarea, I want the rest of the page to darken by 60%, kindof like they are in a modal. I am a noob when it comes to advanced css so I am unsure of the properties to apply.
I am using bootstrap 3, javascript and knockout. I know how to detect when the user is in the text area I just want to change the background so everything else is opaque.
A jsFiddle would be wonderful as well :)
We use a combination of CSS and JQuery JavaScript for that. You'd basically use some Overlay method first to overlay the whole page (e.g. See Technique #1 from the Link).
With the help of JavaScript, We attach to events of the forms to:
Show the Overlay
Make the required form elements, e.g. the first Div inside the form, appear above the Overlay ("z-index" CSS attribute)
CSS:
Overlay has Z-Index 10, so give the relevant element the Z-Index 11 to appear on top:
form > div { z-index: 11; }
this JQuery JavaScript can look like this:
$(document).on("focus", "textarea", function() {
$(".overlay").show();
});
Beware, this is not only a "background" topic, if you want to prevent users to do any interaction with the page, you need an overlay which actually blocks clicks. Also, in our case, we also had to prevent any links to be triggered which are below the overlay. Users were still able to go through the links using the TAB key on they keyboard to navigate to a button and click it using the Space key, so we also added JavaScript code to prevent that when in editing mode.
EDIT: a very basic Fiddle
Here is how I would do this - When the user clicks in the text area, set a class on body, and style the class.
with jQuery (you can use vanilla js too)
$('.my-textarea').on('focus', function() {
$('body').addClass('dark');
});
$('.my-textarea').on('blur', function() {
$('body').removeClass('dark');
});
body.dark {
background-color: #333;
opacity: 0.6;
}
A good solution is to make a modal appear behind the input and not just making the background darker, this can be accomplished with css alone
...
<style>
textarea:focus{
z-index: 901;
position: relative;
}
textarea ~ .textarea-modal{
position: fixed;
background-color: transparent;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 900;
pointer-events: none;
transition: background-color .5s ease;
}
textarea:focus ~ .textarea-modal{
pointer-events: auto;
background-color: rgba(0,0,0,0.3);
}
</style>
...
<div>
<textarea></textarea>
<div class="textarea-modal"></div>
</div>
...
feel free to change the selectors to target specific elements, however at the moment when you focus on the textarea a modal would appear below it with other elements behind.
I'm currently having an issue with this on IE - http://jsbin.com/riyaxewo/4
HTML
<div class="a">
1
</div>
<div class="b">
2
</div>
CSS
.a, .b {
height: 50px;
width: 50px;
padding: 10px 10px;
border: 1px solid;
text-align: center;
}
.a:active, .b:active {
background-color: red;
}
.a:hover + .b {
background-color: transparent;
}
.a:active + .b {
background-color: yellow;
}
The expected result is for box #2 to be yellow whenever box #1 is pressed, however, on IE this
effect only occurs once, and then it just wont happen again.
The reason I'm doing this in CSS and not programatically is because I want the effect to take place as long as the mouse was pressed on the element, even if the mouse button was released somewhere else (meaning I can't rely on mouseup, and mouseleave/mouseout will not get me the wanted result)
Hope this helps: https://stackoverflow.com/a/17211251/3884420
apparently its a bug in IE and its the same for children of active elements and anything like that. you could try a js script that uses on mousedown and on mouseup triggers. I know you said you can't.
also something even funnier happened while testing your problem. if you try to leave your mouse while active it works every time. I removed hover property you added and even this stopped working. I'm guessing every time that your mouse leaves and hover effect stops, the active effect fires again.
I've got an interesting issue with combining jQuery's mouseenter and mouseleave events with a call to append. My object is to show extra content when the mouse enters something and then remove it when the mouse leaves. It's very similar to what happens when you mouse over a tag here on StackExchange. The sequence is:
In mouseenter, create content and position it by the element under the mouse via .offset and .append.
In mouseleave, remove that content from the screen.
The element I'm operating on is an img, and I'm using jQuery 1.6.2. The problem is that .append somehow triggers mouseleave, which is quickly followed by .mouseenter, ad infinitum. It appears as a strange flickering effect on the content being added, as it's removed and re-added repeatedly. See an example here on jsFiddle. Why is this happening, and how do I resolve it?
EDIT: figured it out. D'oh. The added content was appearing under the mouse.
The reason this happens is that you're adding content where your mouse is. That new content is not part of your original element so by definition when you show the new DIV your mouse is not over the IMG any more.
One way to solve this would be to use the image as a background of a parent DIV and then append the new DIV to the parent so that the new DIV is a child of the parent.
On a side note is there a reason you chose not to use .hover()?
Here's a working jsfiddle for how I'd do this.
HTML:
<div class="papa">
<div class='myDiv'>
<div id='divHover'>Hello World</div>
</div>
</div>
Javascript/Jquery:
$(document).ready(function() {
$(".papa").hover(
function () {
$(".myDiv").show();
},
function () {
$(".myDiv").hide();
}
);
});
CSS:
.papa {
background-image:url('http://dummyimage.com/100x100/000/fff');
height: 100px;
width: 100px;
}
.myDiv {
display: none;
height: 30px;
border: 1px solid black;
}
#divHover {
width:100px;
height:20px;
background-color:white;
border:1px solid black;
position: relative;
top: 10px;
left: 10px;
}