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 7 years ago.
Improve this question
I have three social icons which grow when hovered (css element:hover) - I want them to shrink slowly to the initial size when user stops hovering them - how could I solve it with Javascript, CSS or jQuery?
You can use CSS alone to achieve this via the transition property, no Javascript required.
.icon {
font-size: 2em; // assuming the icons are font-based. Use height/width otherwise
transition: font-size 0.3s;
}
.icon:hover {
font-size: 4em;
}
Working example
Well, jQuery has a handy-dandy function set called .mouseenter() and .mouseleave() that I'm sure you've heard of :).
You obviously know how to get the elements to grow, so for them to shrink I would reverse what you've done and decrease the size after .mouseleave() Something like this, I think, would work:
$(document).ready(function(){
$('your_element_here').on('mouseleave', function(){
$(this).animate({height: '20px', width: '20px'}, 500);
});
});
Only you'd replace the '20px''s with whatever height and width you want the icon to shrink down to. I hope this helps and I would be glad to expand on this as much as you need so comment if you need anything else.
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 3 months ago.
Improve this question
fixed div through position:sticky and after scrolling navbar which is fixed overlaps div. How can this be fixed?
Navbar from bootstrap
I am new to frontend, so I used only padding, but it does not look nice, everything is not flat in relation to other blocks
I am new to frontend, so I used only padding, but it does not look nice, everything is not flat in relation to other blocks
You can use z-index property in CSS, imagine you have 2 divs, div-1 which has it's position sticky and and div-2
the code would be:
.div-1 {
position: sticky;
z-index: 0;
}
.div-2 {
z-index: 1;
}
I didn't understand what you want please write your code here, before that try the code below and see its work or not
* {
padding:0;
margin:0;
box-sizing: border-box;
}
#your-id-name-for-navbar{
z-index:99;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
Does the CSS animation property when used to change opacity also change the position of an element? If so, what is going on in the DOM that makes that happen, and how can it be offset?
Context: I've added a Javascript EventListener to a set of images, which when clicked calls a function that initiates a CSS animation fading the clicked image. A timer is also set that removes a CSS class thereby returning the clicked image from opacity 0 to opacity 1. It all works fine except that the image reappears slightly off to the left and top from where I originally placed it and where I want it to be. The same unwanted effect happens on both Chrome and Safari.
Here's the CSS:
.hiddenanimal {
animation: animalfade 1s;
animation-fill-mode: forwards;
}
#keyframes animalfade {
from { opacity: 1;
} to { opacity: 0;
}
}
Simple answer: A CSS animation will only change values you tell it to. In your example:
#keyframes animalfade {
from {opacity: 1;} to {opacity: 0;}
}
The only thing that will change is the opacity.
If your element is moving then something else is happening and maybe not to the element with the animation.
You ask what is going on in the DOM. Technically: nothing. The CSS values are changing over time, not the DOM.
Having a better example would help others to be able to answer your question better. I have made assumptions and have no idea is my answer is even close to what you want to know. If you can update your question to include some HTML and JavaScript then I can modify my answer.
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 6 years ago.
Improve this question
I cannot get my #supportive DIV to sit underneath it's preceding div and I'm unsure why:
I was going to solve this by adding a 'margin-top' dynamically in javascript as the slider's height will change based on the screen size however I'm certain there must be a way to do this in CSS?
Will absolute positioning be the problem when trying to float elements 'under' each other?
Here's the website: https://dl.dropboxusercontent.com/u/4469116/new/index.html
(to reach the issue, please click on 'projects', then the first image on the top left).
Your slider has absolute positioning, therefore you must compensate for its height by applying a margin-top of the amount of the absolutely positioned items height, in this case it was around 380px
Add this CSS to your stylesheet for that view:
#supportive {
margin-top: 380px;
}
Furthermore, the float is not doing anything as I can see so you should be able to remove it
If you would like your solution not fixed, the easy way with your current markup would be to give the slider a percentage height and then give a margin-top of th#e #supportive node
.slider {
height: 30%;
width: auto;
}
#supportive {
margin-top: 30%;
}
Or you can put the .slider inside of a separate container, and give the container the dimensions you want. This way your node will always be on the bottom as you wish as it and the container of .slider will be in natural flow for the document.
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 7 years ago.
Improve this question
Is it possible to make the trimmed borders by "border-radius" unclickable, and also not detecting you are hovering over it?
One way is to make the wrapping div and a tags also have a border radius...
.blackground > div, .blackground > div a {
border-radius: 100%;
}
.blackground > div a {
display:block;
}
The trick is to make the <a> tag the one whose size changes, because that's the element that determines the click area.
So you can do
.backgroud > div > a {
display: inline-block;
border-radius: 100%;
overflow: hidden;
}
Then remove the border radius (if you want) on the actual image.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have an HTML table. Nothing too fancy. It has the thead and the tbody. I was wondering how I can using javascript or jQuery to move the tbody only down.
Edit:
So to give you some context about what I'm doing. I have a table with some information(who cares what it is). Using jQuery I fixed the header in place so that when I scroll down the header is still in place. It is all working well, with the little problem that the header and the first row overlap. So I need to move the top of the tbody down. Meaning The header will stay in place and the body will be moved down a little so that I can see the first row of the table(ie. first row after the header).
I was wondering if there was a way of doing this with jQuery or javascript.
I've tentatively tried to reproduce your issue here. There are certainly better ways to achieve the same effect, but is this the kind of code you have? There's no need to use jquery to keep the table header fixed, so I used css:
http://jsfiddle.net/LLjdk/
Relevant CSS:
thead {
position: fixed;
background: #fff;
}
table {
margin-top: 28px
}
Note that the table header is fixed (moves with scroll), and the background is set so that when the rest of the table goes behind it, it doesn't show through. Finally, there's a margin added to the top of the table to bump it down so they don't overlap.
I am not sure if this is what you are looking for but from your description I understand that you're trying to make the thead always appear on the top of the page. Here is what I came up with.
thead {
position: fixed;
top: 0;
left: 0;
background-color: white;
}
table {
margin-top: 30px;
}
DEMO
Hope it'll help you
You could use jQuery's scroll method http://api.jquery.com/scroll/
I would need more information but it sounds like you'd do something like this:
$(window).scroll(function(){
$("table").animate({marginTop: 50}, 250);
});
EDIT: I know this answer has been accepted as correct but it seems I misunderstood the question, as apparent by the downvotes. I thought OP was after getting the table to slide down and stay fixed just as the header does. I suggested the scroll method as that is how you'd get the table to change position states on scroll.
As others have pointed out you simply want to push the table down for the height of the header + the spacing desired, like so:
table {
margin-top: 80px;
}