Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
first of all just want to say that i'm not a programer but i'm trying to replicate a code and since my javascript is not the best i'm failing at it.
The "animation" in css/java/wtv i'm trying to replicate is from the 3 first boxes links on this site:
http://artcom.de
As you can see when you hover the box/link it stays hovered until the the mouse goes over another link.
I found some solutions with javascript that envolve animating and use a .stop().animate( function but that makes impossible to code css on top of it, one of the things is put a different background image when hovered different a link (that i can make i just can't put the box hovered until the next link).
If you find my question to much of a request feel free to not answer. It's my first post and since coding is a thing that i'm starting i feel kinda nervous of asking this questions.
Thanks in advance for any response.
You could use the below to simply apply a 'hover' class on mouseover of a valid element, after stripping it from similarly qualifying ones. The animation can be handled in CSS using a transition
$('div').on('mouseover', function() {
$('div').removeClass('hover');
$(this).addClass('hover');
});
body {
background: black;
}
div {
transition: all 200ms ease-in;
color: #fff;
border: 3px solid #fff;
width: 20%;
display: inline-block;
margin: 0 20px;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
.hover {
color: #000;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>link</div>
<div>link</div>
<div>link</div>
My solution is similar to that of SW4, but offers a slightly different variation. Basically, when you hover over an item, you want to add a style class to it, while removing that class from all of the other (possibly previously hovered) items.
FIDDLE - http://jsfiddle.net/44c9x5eb/2/
In my fiddle, I use a div item called #body instead of styling the actual body element.
HTML
<div id='body'></div>
<div class="item" data-bg="http://www.evokia.com/images/large-background.jpg">1</div>
<div class="item" data-bg="http://p1.pichost.me/i/10/1333648.jpg">2</div>
<div class="item" data-bg="http://www.desktopaper.com/wp-content/uploads/wonderful-fish-wallpaper-large-background.jpg">3</div>
<div class="item" data-bg="http://p1.pichost.me/640/17/1397737.jpg">4</div>
CSS
#body{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
background-color:#eee;
z-index:0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
transition: all 350ms ease-in;
}
.item{
float:left;
text-align:center;
padding:20px;
margin:0 8px;
background:#f00;
position:relative;
z-index:100;
}
.item.selected{
background:#0f0;
}
jQuery
$('.item').mouseover(function(){
//If this item is already selected, forget about it.
if ($(this).hasClass('selected')) return;
//Find the currently selected item, and remove the style class
$('.selected').removeClass('selected');
//Add the style class to this item
$(this).addClass('selected');
//set the body to a different image
$('#body').css( 'background-image', 'url(' + $(this).data('bg') + ')' );
});
basically you need to do two things.
Create an active class for the selected button in css that defines
the background color
Bind to the Hover event add the class to the
hovered over button and remove the class from the other buttons.
This will look something like this:
$('button').hover(
//this function is called on hoverin
function() {
//remove the css class from all buttons
$('.active').removeClass('active');
//add the class on the hovered over button
$(this).addClass('active');
},
//this function is called on hoverin not needed in this case
function() {}
);
.active {
background-color: white;
}
button {
border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>button1</button>
<button>button1</button>
<button>button1</button>
Keep in mind that in today's landscape a lot of mobile devices are being used to visit your site. Therefore you should not build actual functionality relying on hover events. i.e: A menu that opens up when you hover over it.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I tried to do that, but as show in this demonstration, it does not seem to work.
The CSS code:
div {
background-color: yellow;
padding: 20px;
display: block;
}
div:hover {
display: none;
}
So do we have to use javascript for my purpose?
You could use opacity:0; instead of display:none;.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: yellow;
padding: 20px;
display: block;
}
div:hover {
opacity: 0;
}
</style>
</head>
<body>
<span>Hover over me!</span>
<div>I will show on hover</div>
</body>
</html>
Yes. CSS is finnicky, and you have to understand the parent-child relationship first.
Make it so that when you hover over the parent, it hides the child.
The way you did it: if you hide the element, you will no longer be hovering over it, and therefore it reappears and the CSS can't decide what to do.
One more note: It will still spaz in this situation, if you use display: none, because it will change the size of parent. I used visibility: hidden to get around this.
https://www.w3schools.com/code/tryit.asp?filename=FVART8OA0CWY
.hide_hover:hover span{ visibility: hidden; } means that a span, with a parent of class hide_hover, when the parent is being hovered over, will be hidden.
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.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a shape which consists of 3 components:
* ***************************** *
*** * * ***
***** * * *****
******* ***************************** *******
As shown in the diagram above, the shape consists of a rectangle surrounded by two triangles (one on the left side and one on the right).
I would like the entire shape to change to the same colour whenever the user hovers over any one of its components.
I've tried using various methods to accomplish this task but without much success.
Here's what I currently have on JSFiddle.
The shape is kind of off, however my main concern is how to get the hover feature working for my object.
Even though I tried implementing JavaScript in the fiddle above, I will accept any other alternative methods that will get my code working.
I've done it like here:
<div class="container">
... your code
</div>
.container:hover .tabStyle{
background : #000;
border-color: #000;
}
.container:hover .slopeLeft, .container:hover .slopeRight{
border-bottom-color: #000;
}
where .container is parent element for your div's
JSFiddle: http://jsfiddle.net/svzrkdu6/12/
It is achievable using pure CSS. Modify your code line:
/* Just for an example */
.child {
height: 20px;
border: 1px solid black;
}
/* Your solution */
.parent:hover .child {
background-color: red;
}
<div class="parent">
<div class="child first">A</div>
<div class="child second">B</div>
<div class="child third">C</div>
</div>
First off, your JSFiddle was not displaying the .slopeRight, I added the following html:
.slopeRight {
border-bottom: 100px solid #D8D8D8;
border-right: 50px solid transparent;
position: absolute;
top: 10px;
left: 255px;
}
I then surrounded all the rectangle components under one div called .wrap, and added the following css:
.wrap:hover .tabStyle {
backGround: red;
border-color: red;
}
.wrap:hover .slopeLeft {
border-color: transparent red red transparent ;
}
.wrap:hover .slopeRight {
border-bottom: 100px solid red;
border-right: 50px solid transparent;
}
Here's a working fiddle...http://jsfiddle.net/svzrkdu6/10/
Moreover, are you sure you want 3 components to your shape? Because if not, you may create a trapezoid instead, which is much more concise...check out this fiddle
http://jsfiddle.net/383rksx6/1/
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am working on rebuilding my personal site and I have two elements which are floated side by side first at 80% and second at 20%.
http://codepen.io/anon/pen/xgask
SCSS
.container
width: 80%
margin: 0 auto
outline: 2px solid green
overflow: hidden /* Only used this here as a clearfix */
.text, .avatar
float: left
.text
width: 70%
outline: 1px solid red
.avatar
width: 25%
margin-left: 5%
outline: 1px solid blue
img
display: block
max-width: 100%
HTML
<div class="container">
<div class="text">
<p>Lots of text ...<p>
<p>Lots of text ...</p>
</div>
<div class="avatar">
<img src="http://www.foxprime.net/wp-content/uploads/2013/08/gravity-max-roller-coaster.jpg" />
</div>
</div>
On desktop sizes that is perfect. If the text in the first element is longer than the picture in the second the text does not wrap underneath which is what I want.
However, on mobile sizes I wish the text element to be full width and the picture to float right so the text wraps around.
With two separate elements as they are this is impossible, so is it appropriate to use javascript with something like enquire.js to react to the media query which then detaches the picture and places it at the beginning of the text element and have a style to float it right.
I know how to code it all, no problems there, just asking if it is appropriate to use a tiny bit of javascript to assist me getting the responsive layout I want?
With Responsive Web Design, there are many ways to accomplish the same thing; No one way is right.
Personally, I would try to work out a CSS-only solution or a solution that reorganizes my HTML markup to the best of my ability to reach the desired result. Only if I've exhausted all options in to making a CSS/Markup-only solution work would I turn to JavaScript.
In other words, yes, JavaScript is appropriate if it reaches your end result. However, if it's possible via Markup/CSS manipulation and no JavaScript, that is always the better choice.
If you don't mind putting the .avatar column first, you can get the exact results you want. Otherwise, I'd just hide and show with css, if it's just one image. Usually I avoid using jQuery unless it's absolutely necessary and after 3 years of responsive stuff, you get to know when to use it and when not to use it.
http://codepen.io/anon/pen/nfvmj
This is mobile first.
Put the .avatar before the .text in the html:
.container {
margin: 0 auto;
width:90%;
outline: 2px solid green;
overflow: hidden;
/* Only used this here as a clearfix */
}
.text {
outline: 1px solid red
}
.avatar {
float: right;
width: 50%;
margin:0 0 2% 2%;
}
.avatar img {
max-width: 100%
}
#media (min-width:600px) {
.text {
width: 70%;
float: left;
}
.avatar {
float: right
}
.container {
width: 80%;
}
.avatar {
width: 25%;
margin: 0 0 0 5%;
}
}
I have a page that scrolls sideways and I have a floating menu. I want the text in the menu to invert the color that is under it. Is there a way to do that with HTML5, Javascript, and/or jQuery?
Added: How would you invert an image when it goes over different parts of the page? CSS?
This is the bit of CSS I use for the menu
body{
background:#000;
font-family:Georgia;
font-size: 34px;
font-style: italic;
letter-spacing:-1px;
width:12000px;
position:absolute;
top:0px;
left:0px;
bottom:0px;
}
ul#banner{
position: fixed;
line-height: 45px;
margin: 0 30px; padding: 0;
}
step1. Get the position of your menu
step2. Remove your menu and get an element that is placed on the position
maybe you can use document.elementFromPoint
step3. Invert the element's color and apply it on your menu
step4. Show your menu again
step5. Repeat it whenever you need to change menu's color(scroll, etc.)
Try to use:
var color = // color in hex.
color ^ 0xFFFFFF (XOR bit operator) to get it?
I wrote a test page.
demo here.
inside body can't write width, or will make the page appears the scroll bar.
including the following knowledge point:
css cover:
.nav .selected .nav-01{background:#f93;}
.nav .selected .nav-02{background:#3c3;}
.nav .selected .nav-03{background:#36c;}
jquery plugin:
(function($){
$.fn.extend({
first: function(){ },
second: function(){}
});
}(jQuery));
jquery call
$(document).ready(function(){
$('#content').scrollPage({
pTag : '.list',
menu : '.nav',
speed : 600
});
})