Here's an image showing what I'm trying to achieve:
As you can see, I'm trying to get the profile options dropdown to be centered below the profile button. The current way I have it set up is to have the dropdown menu have position: absolute, and then use a margin-left: -3% to actually "center" it, but I feel like there should be a more reliable way to actually center it that isn't dependent on a hardcoded percentage value. Below is the relevant code:
index.php:
<div id="navTools">
<button id="navProfile"><img src="./imgs/profile.svg" alt="Profile"/></button>
<div id="profileDropdown">
Account Information
Orders & Returns
Logout
</div>
<a id="navCart" href="cart.php"><img src="./imgs/cart.svg" alt="Cart"/></a>
</div>
styles.css
#profileDropdown {
display: none;
background: #1d1d1d;
position: fixed;
margin-left: -3%;
}
Wrap profile button and profile dropdown in a div. Give that div position: relative and set position: absolute for the dropdown. If you want it to appear at the bottom, set bottom: 0. If you want to center it vertically, set left: 50%, transform: translateX(-50%).
<div id="navTools">
<div class="dropdown-wrapper">
<button id="navProfile"><img src="./imgs/profile.svg" alt="Profile"/></button>
<div id="profileDropdown">
Account Information
Orders & Returns
Logout
</div>
</div>
<a id="navCart" href="cart.php"><img src="./imgs/cart.svg" alt="Cart"/></a>
.dropdown-wrapper {
position: relative;
}
#profileDropdown {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
Related
There is button is on the left side of its container, with the text Go Right!.
When the button is on the left side, clicking it results in the button moving to the right side of the container.
When the button is on the right side, the button text is Go Left!
When the button is on the right side, clicking it results in the button moving to the left side of the container.
I tried this:
html:
<body>
<div class="container">
<button id="flip-flop" onclick="moveRight()">Go Right!</button>
</div>
</body>
js file:
function moveRight(){
const flip_flip_button = document.getElementById("flip-flop")
flip_flip_button.addEventListener("click", function () {
flip_flip_button.style.left = 400 + "px";
});
}
css:
.container {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
background-color: gray;
transform: translate(-50%, -50%);
}
#flip-flop{
position: relative;
}
image
This code result, the button is move right (by second click? don't know why also) but not responsive.How can I move right button just until container right side?
Several problems here.
You are adding a click listener every time the button gets clicked. Instead, only add one listener, that does the actual work you want.
Don't work with element.style, as that produces inline styles, which are widely consider very bad practice. Instead, prepare a CSS class in your CSS that contains the desired styles, and toggle that class on click.
In this case the easiest way to get your button aligned to the right is setting text-align: right on the button's parent element.
document
.getElementById('flip-flop')
.addEventListener("click", function() {
this.parentNode.classList.toggle('right');
});
.container {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
background-color: gray;
transform: translate(-50%, -50%);
}
#flip-flop {
position: relative;
}
.right {
text-align: right;
}
#flip-flop::after {
content: " right!";
}
.right #flip-flop::after {
content: " left!";
}
<div class="container">
<button id="flip-flop">Go</button>
</div>
Example of a post card
I know they use an absolutely positioned link tag one level below the root element and sized it to fill the width and height of the card. But I can't figure out how you can still click on individual links without the full size link blocking it.
<article>
<a id="full sized link"></a>
<div id="actual content">
<h3>
<a id="individual link">TITLE</a>
</h3>
</div>
</article>
Here is roughly how the cards are structured.
I think them may be using JavaScript to redirect you.
Try the anchor tag you want to target to set
<a id="full-sized-link" href='#' ></a>
#full-sized-link{
height: 100%;
position: absolute;
width: 100%;
top: 0;
left: 0;
cursor: pointer;
z-index: 1;
}
article{
position:relative;
}
And on individual links higher z-index
#individual-link{
position: relative;
z-index: 2;
}
Is it possible to show a dropdown whenever you hover over some specific area on an image? For example, if my mouse is within 50,62 and 70,80. I already tried this with invisible boxes and divs, but the only way I could get them to overlay the image was with position properties, but they wouldn't stay in place if I reshaped or resized the screen. Any ideas?
Demo : http://jsfiddle.net/v8dp91jL/12/
The code is pretty self-explanatory.
Just two imp things:
Everything should be in %
the .dropdown is inside .hover-area so that when you move your mouse from .hover-area to .dropdown, .dropdown doesn't disappear because it is still technically inside .hover-area even tho it's visually not
You can add some hidden element (span) positioned on some specific area and it is going to trigger the hover:
HTML:
<div class="image-wrapper">
<span class="image-hover-trigger"></span>
<img src="..." >
<div class="dropdown"></div>
</div>
CSS:
.image-wrapper { position: relative; }
.image-hover-trigger { position: absolute; top: 20%; left: 20%; right: 20%; bottom: 20%; }
.dropdown { display: none; }
.image-hover-trigger:hover ~ .dropdown { display: block; }
I need to do tank animation, where according to the liquid level, the height of the tank(image) changes. For this I have written HTML code as below:
<div>
<img id='T1' style="height:0px;position:absolute">
</div>
Now I am obtaining the level information from database using ajax and trying to change the height of the image according to the value of the level parameter using JavaScript.
var level=response;
document.getElementById('T1').height=level."px";
This is changing the height from top to down, but I want down to top.
Inverting the div using transform is not working. Also transition is not working as transition-time cannot be specified in this case.
Please provide me some suggestions.
Position the image absolute to the bottom of the container with bottom: 0 so that it always starts at the bottom and extends from there.
To demonstrate:
var level=14;
document.getElementById('T1').style.height = level+"px";
var changeLevel = function() {
var level = document.getElementById('level').value;
document.getElementById('T1').style.height = level+"px";
}
div {
margin-top: 20px;
position: relative;
height: 50px;
background-color: #eee;
}
#T1 {
height: 0px;
background-color: #909;
width: 100%;
position: absolute;
bottom: 0;
}
<input id="level" type="text" placeholder="Level" />
<input type="button" value="Change Level" onclick="changeLevel()"/>
<div>
<div id='T1'></div>
</div>
You can add following CSS for this
#t1 {
position: absolute;
left: 0px;
bottom: 0px;
}
or
<div>
<img id='T1' style="height:0px;position:absolute; bottom: 0px; left: 0px;">
</div>
Hard to figure out what you are trying to do. Maybe a link would help. Only thing I could see is style.height is written incorrectly.
document.getElementById("T1").style.height = level + "px";
I am making a simple reactjs app where I need to put a button over image.
My html looks like:
<div className={"panel-body"}>
<img className={"img-responsive center-block"}
src={album.photos.data[0].source} />
{(this.state.isMouseInsideID === album.id) ? <button>Your Button</button> : null}
</div>
Its all fine except button is shown below the image.
But I want to show the button over the image or in the middle of the div
How can I make this work ?
make button position relative and use z-index: maybe it will be helpful for you.
If you want to center the button in a div, while there is a background image to the div. I would suggest, to assign a background image for the div, rather than inserting an image into the div. Check out the fiddle:
http://jsfiddle.net/49s505sa/1/
HTML:
<div id="wrapper">
<button type="button">Your Button</button>
</div>
CSS:
#wrapper {
width: 100%;
height: 400px;
border: 1px solid black;
background: url('http://placehold.it/350x150') /*assign image, for demo purposes */
}
button {
height: 20px;
position: relative;
margin: -20px -50px;
width: 100px;
top: 50%;
left: 50%;
}
So, inside the render method
var style = {
backgroundImage: 'url(' + album.photos.data[0].source+ ')'
}
<div className={"panel-body"} style={style}>
{(this.state.isMouseInsideID === album.id) ? <button>Your Button</button> : null}
</div>
In this way, we will dynamically assign images to particular divs. And wont have to worry too much about styling.
Hope that helps!
Use z-index properties
The z-index property in CSS controls the vertical stacking order of
elements that overlap. As in, which one appears as if it is physically
closer to you. z-index only effects elements that have a position
value other than static (the default).. Note: z-index only works on
positioned elements
(position:absolute, position:relative, or position:fixed).
img {
position: absolute;
left: 0px;
top: 0px;
z-index: 10;
}