This is my button with information inside. The information div is on display none:
<div class="button">
<h2>Information</h2>
<div class="information">
<p>This is the information text</p>
<p>This is the information text</p>
</div>
p, h2 {
padding: 0;
margin: 0;
}
.button {
background: red;
width: 150px;
height: 40px;
}
.information {
display: none;
}
When I hover the button, I want to animate its width an height and fade in the information div which is working fine. On mouseleave the information div shall be on display none again and the button div should be animated to its beginning width and height:
$('.button').hoverIntent(function(){
$(this).animate({
width: 400,
height: 220
}, 800, function() {
$('.button').find('.information').fadeIn();
$('.button').mouseleave(function(){
$('.button').find('.information').fadeOut(200);
$(this).animate({
width: 150,
height: 40
}, 500, function() {
// Animation complete
});
});
});
});
Could you please help me with my code? I really don't no what I am doing wrong.
Here is the same code on JSFiddle:
http://jsfiddle.net/6WpCk/2/
Thank You.
Here's my pure Javascript suggest to you, I think it's easier, using onmouseover and onmouseout with simple functions.
Fiddle demo
simply change hoverIntent to hover
$('.button').hover(function(){...
Related
I have the following html:
<div class="mydiv">
<p>some text here</p>
<input type='text' />
</div>
...with the following CSS:
.mydiv {
background-color:yellow;
}
.mydiv:focus, .mydiv:hover {
background-color:orange;
}
The :hover is changing the background color appropriately, but the :focus is not having any effect. Is this because the <div> cannot truly have focus?
Is there a CSS solution to make .mydiv change background color when any of its children receive focus?
Here's a fiddle.
There is no CSS solution for this. But, you can achieve this by using jQuery.
$(".mydiv").children().focus(function() {
$(this).parent().css("background-color", "orange");
}).blur(function() {
$(this).parent().css("background-color","yellow");
});
Here is the Fiddle
You have to add the tabindex attribute to the element needs to be focusable.
Here is the Fiddle
But, to answer your question, there is no pure CSS solution to make the div bg color change if its children receive focus.
When using jQuery, I think you're better off using the focusin and focusout events.
The code as adapted from the accepted answer would then become:
$(".mydiv").focusin(function() {
$(this).css("background-color", "orange");
}).focusout(function() {
$(this).css("background-color","yellow");
});
though, personally, I'd rather use a "focus" class:
$(".mydiv").focusin(function() {
$(this).addClass("focus");
}).focusout(function() {
$(this).removeClass("focus");
});
combined with the css for the combined selector:
.mydiv.focus { background-color: orange }
p.s. For once, I find the bit of docs on w3schools more informative than the demo on api.jquery.com, which just looks confusing to me.
Possible CSS solution:
<style>
#row1 {display: block; position: relative; width: 100%; background-color: #ffffff; z-index: 150;}
.BGmagic {display: none; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: #efefef; z-index: 200;}
#inputone{display: block; position: relative; z-index: 250;}
#inputone:focus + .BGmagic {display: block;}
#inputone:hover + .BGmagic {display: block;}
</style>
<form>
<div ID="row1">
<p style="position: relative; z-index: 250;">First name:</p>
<input ID="inputone" type="text" name="firstname">
<div class="BGmagic"></div>
</div>
</form>
This seems to have been asked before without a sufficient answer. I have absolutely no knowledge of how to do this (including no plugins). I want my website to scroll horizontally when I actively scroll down vertically.
Some examples of what I mean:
http://hotdot.pro/en/
and
http://mashup.ikm.gda.pl/
To be clear, I don't care about the parallax effect that both of these websites utilize. I just want to scroll horizontally.
Thanks!
This can be solved in native JavaScript, without any library.
Example code
function transformScroll(event) {
if (!event.deltaY) {
return;
}
event.currentTarget.scrollLeft += event.deltaY + event.deltaX;
event.preventDefault();
}
var element = document.scrollingElement || document.documentElement;
element.addEventListener('wheel', transformScroll);
Explanation
While this solution does not lean on any library, it also takes other usage scenario's into account. When scrolling on a touchpad for example, the other solutions that lean on a single delta value all fall apart.
There are always multiple ways of scrolling with an input device. Laptops have touchpads, phones have touchscreens, mouses have scroll wheels. On top of that, you can modify your scroll direction for a scroll wheel by holding shift.
When preventing the default behaviour, we should also include the other possible directions a user can scroll in. Luckily screens only have two dimensions, so adding deltaY to deltaX covers all cases in this scenario.
Try this:
You need to add a script reference to jquery and to the mouse wheel plugin.
And then use this JS:
$(function() {
$("body").mousewheel(function(evt, chg) {
this.scrollLeft -= (chg * 50); //need a value to speed up the change
evt.preventDefault();
});
});
Script References:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/js/jquery.mousewheel.js"></script>
you can directly use the first one, jquery script, as is because it is a public repository, but the second, the mousewheel.js will require you to save the .js file somewhere on your server and provide a link to it (similar to how you provide links for images in the src attribute).
Plugin: https://github.com/brandonaaron/jquery-mousewheel
Reference: http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/
Here's the solution to this if anyone is working on Chrome. The star selector is what made it functional for Chrome, and the html selector should enable the functionality on Firefox as well.
$(function() {
$("html, body, *").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 50);
event.preventDefault();
});
});
Pure CSS solution
You dont need Javascript for this
For more information: https://css-tricks.com/pure-css-horizontal-scrolling/
::-webkit-scrollbar {
width: 1px;
height: 1px;
}
::-webkit-scrollbar-button {
width: 1px;
height: 1px;
}
body {
background: #111;
}
div {
box-sizing: border-box;
}
.horizontal-scroll-wrapper {
position: absolute;
display: block;
top: 0;
left: 0;
width: calc(250px + 1px);
max-height: 750px;
margin: 0;
padding-top: 1px;
background: #abc;
overflow-y: auto;
overflow-x: hidden;
-webkit-transform: rotate(-90deg) translateY(-250px);
transform: rotate(-90deg) translateY(-250px);
-webkit-transform-origin: right top;
transform-origin: right top;
}
.horizontal-scroll-wrapper > div {
display: block;
padding: 5px;
background: #cab;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: right top;
transform-origin: right top;
}
.squares {
padding: 250px 0 0 0;
}
.squares > div {
width: 250px;
height: 250px;
margin: 10px 0;
}
<div class="horizontal-scroll-wrapper squares">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div>item 4</div>
<div>item 5</div>
<div>item 6</div>
<div>item 7</div>
<div>item 8</div>
</div>
I want to hide a div con1 when i hover div con2 and vice versa. I am able to hide con2 when i hover con1 but can't do the same vice-versa. Why it is not working when i hover con2 to hide con1.
Below are the codes:
<html>
<head>
<title>Home</title>
<style type="text/css">
#con1{
float: left;
width: 500px;
height: 300px;
background: #f00;
}
#con2{
float:left;
width: 500px;
height: 300px;
background: #808;
}
#con1:hover ~#con2{
visibility:hidden;
}
#con2:hover ~#con1{
display:none;
}
</style>
</head>
<body>
<div id="con1">
</div>
<div id="con2">
</div>
</body>
</html>
Example: http://jsfiddle.net/mendesjuan/s8bbe/
I believe this is not possible with the general sibling selector as it only applies to elements after it in the html-structure. See more: http://css-tricks.com/child-and-sibling-selectors/
A possible (althought not especially elegant solution):
http://jsfiddle.net/s8bbe/4/
<div id="wrapper">
<div id="con1">
</div>
<div id="con2">
</div>
#con1{
float: left;
width: 500px;
height: 300px;
background: #f00;
}
#con2{
float:left;
width: 500px;
height: 300px;
background: #808;
}
#con1:hover ~#con2{
visibility:hidden;
}
#wrapper:hover #con1:not(:hover){
visibility:hidden;
}
Example: http://jsfiddle.net/s8bbe/5/
#KnutSv's solution is great. Here's an add-on if using more than 2 divs.
<div id="con-wrapper">
<div id="con1">
</div>
<div id="con2">
</div>
<div id="con3">
</div>
</div>
And a one-line css with :hover, :not(:hover).
#con1{
float: left;
width: 500px;
height: 300px;
background: #f00;
}
#con2{
float:left;
width: 500px;
height: 300px;
background: #808;
}
#con3{
float:left;
width: 500px;
height: 300px;
background: #606;
}
#con-wrapper:hover > div:not(:hover) {
visibility: hidden;
}
Using "> div" will target all #con-wrapper direct div children, which are not hovered, and hide them.
Use #con-wrapper:hover > div[id^=con]:not(:hover) if only cons needed to be targeted.
Putting the divs in one container div you can hide all contained divs on hoover, but not the actually 'hovered over' one with:
div:hover div {
visibility: hidden;
}
div:hover div:hover {
visibility: visible;
}
See demo: http://jsfiddle.net/TcPJZ/3/
EDIT: It actually works well for arbitrary number of divs (see demo).
Maybe you are using wrong selectors
try this
.con2:hover ~ div {display:none}
But this is "Hard code" if you will want to add more divs before con-2 they will be dissappearing too
I try it on jsfiddle and I get the problem.
When you have this:
<div id="con1">
</div>
<div id="con2">
</div>
Hover on "con1" works, but when you change the positions:
<div id="con2">
</div>
<div id="con1">
</div>
Now it's "con2" which is working and now not "con1".
So , I don't know how to fix it, but I can tell you about make it by Javascript/Jquery.
I think that can be solve the problem.
CSS doesn't support previous sibling selection. If you still want to have a previous sibling selector then you should look in to javascript.
var con1 = document.getElementById('con1');
var con2 = document.getElementById('con2');
function displayElem(el, property, value){
el.style[property] = value;
}
con1.onmouseover = displayElem.bind(null, con2, 'display', "none");
con1.onmouseout = displayElem.bind(null, con2, 'display', "");
con2.onmouseover = displayElem.bind(null, con1, 'visibility', "hidden");
con2.onmouseout = displayElem.bind(null, con1, 'visibility', "");
Working Fiddle
In the above fiddle, I even moved the next sibling selection to javascript so that to let you keep the code structured. if you don't want to do so, then happily don't events to the first element :)
it will be easily done by using below code using jquery , why you depend only on css
$("#con1").hover(function(){
$("#con2").css("visibility","hidden");
},function(){
$("#con2").css("visibility","visible");
});
here is the working sample http://jsfiddle.net/5jRXm/
I'm trying to create a anchor link so when the user clicks an item on the menu it goes to the specified destination. My menu consists of three items (one, two, three). When I click for example Three it jumps to Three but its heading goes under the header. How can I prevent that? I want the user to be able to see the heading.
Note that I want my header to be fixed and I want the contents to scroll behind the header.
HTML:
<body>
<header>
<nav>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</nav>
</header>
<section>
<div id="one">
<h1>One</h1>
<p>Text...</p>
</div>
<div id="two">
<h1>Two</h1>
<p>Text...</p>
</div>
<div id="three">
<h1>Three</h1>
<p>Text...</p>
</div>
</section>
<footer>
</footer>
</body>
CSS:
body {
background-color: #cf8;
}
header {
background-color: #000;
height: 4em;
width: 100%;
top: 0;
left: 0;
position: fixed;
}
nav ul {
list-style: none;
}
nav ul li {
margin-top: 0em;
padding: 5px;
float: left;
}
nav ul li a {
color: white;
text-decoration: none;
}
section {
height: auto;
width: 50%;
margin-top: 4em;
margin-left: 25%;
}
#one,#two,#three {
margin-top: 1em;
}
div {
background-color: #c00;
height: auto;
width: 100%;
}
footer {
background-color: #000;
height: 2em;
width: 100%;
clear: both;
}
JSFIDDLE, JSFIDDLE (Version 2)
JSFIDDLE (FULLSCREEN), JSFIDDLE (FULLSCREEN (VERSION 2))
I would recommend using a jQuery-based solution instead (p/s: see [Edit #2] for the final code, where I also detect the window.location.hash property):
$(function() {
// Only trigger .click() event when the link points to an internal anchor
$("header a[href^='#']").click(function(e) {
// Get the ID of the target
var target = $(this).attr("href");
// Animated scrolling to the vertical offset of the target element
// PLUS the outer height of the <header> element
$("html, body").animate({
scrollTop: $(target).offset().top - $("header").outerHeight()
});
// Prevent default scrolling action
// (I didn't use return false, because it stops event bubbling, too)
e.preventDefault();
});
});
http://jsfiddle.net/teddyrised/NHtvM/13/
[Edit]: However, you should note that this method does not work when the visitor is navigating to the specific div by entering the location hash in the url (e.g. /page.html#one).
[Edit #2]: Okay, I have revised my script so that it can detect the hashed URL if present, and perform the same thing as above (updated Fiddle here). An example would be: http://jsfiddle.net/teddyrised/NHtvM/15/show/light/#three, where you want the browser to navigate directly to the <div> with the ID of "three".
$(function () {
// Scroll to function
function scrollTo(ele) {
$("html, body").animate({
scrollTop: $(ele).offset().top - $("header").outerHeight()
});
}
// Detect location hash
if (window.location.hash) {
scrollTo(window.location.hash);
}
// Detect click event
$("header a[href^='#']").click(function (e) {
var target = $(this).attr("href");
scrollTo(target);
e.preventDefault();
});
});
You can accomplish this even without using JavaScript, just add empty divs with the same height and negative top-margin as menu before every part.
Like this:
<div id="one"></div>
<div>
<h1>One</h1>
...
with CSS
h1{ margin-top:0em; }
#one,#two,#three { margin-top:-4em; height:4em; }
See: http://jsfiddle.net/NHtvM/7/ (or in full screen http://jsfiddle.net/NHtvM/7/embedded/result/)
for the <nav>-tag define the inline style as style="z-index:1; position:absolute;"
and
for the <section>-tag define the inline style as style="z-index:2; position:absolute;"
In this case the contents in the section-tag will be visible above the nav menu.
I'm trying to create the following:
Using two images: one as mask (the diagonal lines) and the other the image and text themselves (the mask and image+text are the same size):
..and I just can't get it done!
I've tried all combinations with divs and z-indeces, opacity and background-image.. (should mention I'm noob to html).
Here's one shot I got at it (with only the mask and an image):
div {
position: absolute;
top: 775px;
left: 0px;
height: 188px;
width: 272px;
background-image: url('grey-out.png');
}
img {
z-index: 1000;
}
<div></div>
<img src="41_large.png" />
Which just gives the diagonal lines themselves..
Can someone please help me out?
How do I make that "disabled" look combining the (semi-transparent) mask and the div?
Thanks!
This approach works:
<div id="pspThing" class="disabled">
<img class="disabled" src="http://i.stack.imgur.com/lCTVr.png" />
</div>
#pspThing {
background: transparent url(http://i.stack.imgur.com/WpgNy.jpg) 0 0 no-repeat;
height: 93px;
width: 273px;
border: 1px solid #000;
margin: 0 auto;
overflow: hidden;
}
#pspThing img {
display: none;
opacity: 0.5;
}
#pspThing img.disabled {
display: block;
}
JS Fiddle demo
Bearing in mind that there's no transparency in your striped png (so far as the imgur hosted image is concerned, anyway, so I'm using opacity instead). Also the JS Fiddle demo's a little more complicated than necessary, so's I could show the disabled/enabled states.
Pleass consider this simple snippet. Very universal solution. Acts and feels very much like the 'disable' attribute of input elements. See the snippet
function disable(elementId, enabling) {
el = document.getElementById(elementId);
if (enabling) {
el.classList.remove("masked");
} else
{
el.classList.add("masked");
}
}
.masked {
position: relative;
pointer-events: none;
display: inline-block;
//visibility:hidden; /* Uncomment this for complete disabling */
}
.masked::before {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
visibility: visible;
opacity: 0.5;
background-color: black;
//background: url('http://i.imgur.com/lCTVr.png'); /* Uncomment this to use the image */
content: "";
}
<button onclick="alert('Now, click \'OK\' then \'Tab\' key to focus next button.\nThen click \'Enter\' to activate it.');">Test</button>
<div id="div1" style="display:inline-block" class="masked">
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
<button onclick="alert('Sample button was clicked.')">Maskakable</button><br/>
<br/>
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
<button onclick="alert('Sample button was clicked.')">Maskakable</button><br/>
<img src="http://i.stack.imgur.com/WpgNy.jpg">
</div>
<button>Dummy</button>
<br/>
<button id="enableBtn" onclick="disable('div1',true);disable('enableBtn',false);disable('disableBtn',true);">Enable</button>
<button id="disableBtn" onclick="disable('div1',false);disable('enableBtn',true);disable('disableBtn',false);" class="masked">Disable</button>
I built an example here.
I doubt that the position:absolute approach is the best way to handle this since you need to know the size of the image.
For doing it by z-index your both images should be in the container with img tag.