I have a div with class .popup. I have an iFrame used to open another image gallery, but when I show the popup using jQuery it isn't centered and the top most page element.
CSS
.popup {
border: 1px solid #ccc;
width:inherit;
border-radius: 7px;
margin-right: auto;
margin-left:auto;
padding: 20px;
position:absolute;
z-index: 1000;
background-color: #f0f0f0;
height:400px;
}
HTML
<div class="popup " style="display: none">
<div class="col-lg-12" style="padding-bottom: 10px;">
<input onclick='SelectImage(inputImage)' class="btn btn-xs btn-success pull-left" type="button" value=" بازگشت " />
<input id="btnImageSelect" onclick='SelectImage(inputImage)' class="btn btn-xs btn-success" type="button" value="تایید عکس" />
</div>
<iframe id="iframeImage" src="../filemanager/ImagePicker.aspx" width="100%" height="320" frameborder="1"></iframe>
</div>
How do I fix this problem and where is my lost code?
$(document).ready(function(){
var width = $(.popup).width();
var height = $(.popup).height();
$(".popup").css({"top":"50%", "left":"50%", "margin-top":height/2+"px", margin-left:width/2+"px"});
});
This will move the div in center.
I'm not sure what you're looking for with width: inherit. This will always make your popup as wide as its parent element, so there's no need for centering. With position: absolute, however, your popup will be positioned according to either the body element of your page, or a parent element with position: relative.
Here's what I'd do if I understand your problem correctly:
I'm assuming width is unknown here.
.popup {
...
position: absolute;
margin: 0;
left: 50%;
transform: translateX(-50%);
}
Here's a fiddle: http://jsfiddle.net/ugys4znt/
If you want the popup to stay on screen even when the user scrolls, use position: fixed.
Please specify some more what you're trying to achieve with width: inherit, and I'll get back to you.
Related
I have an interesting issue or objective here. I have an image that is a yellow rectangle with 3 red rectangles in it. I'd like to add clickable buttons as an overlay on top of the picture, right over the red rectangles.
Thing is, I would like those buttons to always be exactly over each red rectangles, same size/position, no matter the aspect ratio of the pciture, the screen resolution of the user, or the zoom percentage of his browser (as if the buttons were part of the image)
As an example, I've included a picture where the yellow rectangles and the red rectangles are part of the same image, and the dotted green line would be the overlay buttons or their respective divs.
[Not enough reputation for picture, but here] : https://i.imgur.com/ms4xmMZ.png
MY HTML SO FAR
<body>
<div class="image-container">
<img src="img/justelimage.png" alt="Nature" class="video" />
<a href=“#”></a>
</div>
</body>
MY CSS SO FAR WORKS BUT THERE SHOULD BE A BETTER WAY ?
(works when I resize window, and change browser's zoom percentage, but what if we change the aspect ratio?)
.image-container {
display: inline-block;
position: relative;
margin-left: auto;
margin-right: auto;
width: 80vw;
height: auto;
z-index:0;
}
.video {
position: absolute;
width: 100%;
height: auto;
z-index:1;
}
.image-container a{
position: absolute;
margin-top:4.5%;
margin-left: 57%;
width:28.3vw;
height: 7vw;
color:white;
border: 0.25vw solid green;
z-index: 999;
}
}
Any idea how I could manage to get this in a more logical way?
Any suggestions would be gladly appreciated. Thanks!
I'd wrap the anchor in a div to center it. That way you could style
anchor separately with px while maintaining its position relative to the img.
<body>
<div class="image-container">
<img src="img/justelimage.png" alt="Nature" class="video" />
<div class="link-container">
<a href=“#”></a>
</div>
</div>
</body>
.link-container {
position: absolute;
top: 50%;
left: 50%;
}
If you also style the .image-container with a background color
and opacity you can toggle those values on :hover.
The best way to keep buttons in place with respective to an image will be to have the container as
position: relative;
and buttons inside the div as
position: absolute;
and placed top and left with px or any unit that doesn't change with size.
But one major thing you can do is have your image as the background of image-container.
That way buttons always stay on top of the image and u can restrict resizing of the container to make the buttons stay in position better.
I hope this helps.
.image-container {
position: relative;
background-image: url("https://cdn.pixabay.com/photo/2014/12/28/13/20/wordpress-581849_960_720.jpg");
background-size: contain;
background-position: center;
width: 600px;
height:200px;
}
.btn{
width:20px;
height:20px;
background-color: green;
border:none;
position: absolute;
}
.one{
top:10px;
left:300px;
}
.two{
top:100px;
left:100px;
}
.three{
top:50px;
left:200px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="image-container">
<button href="#" class="btn one"></button>
<button href="#" class="btn two"></button>
<button href="#" class="btn three"></button>
</div>
</body>
</html>
I'm trying to place a div with id 'absPos' in absolute position in relation to its parent div. But it is not working, the div is placed at the top left corner of the page.
My code sample is as follows
<html>
<body>
<div style="padding-left: 50px;">
<div style="height: 100px">
Some contents
<div>
<div style="height: 80px; padding-left: 20px;">
<div id="absPos" style="padding: 10px; position: absolute; left: 0px; top: 0px; background-color: red;"></div>
Some text
</div>
</div>
</body>
</html>
Can you help me to solve this issue.
In my actual case instead of the red background color I've to place a background image.
Regards
Elements with absolute positioning are positioned from their offsetParent, the nearest ancestor that is also positioned. In your code, none of the ancestors are "positioned" elements, so the div is offset from body element, which is the offsetParent.
The solution is to apply position:relative to the parent div, which forces it to become a positioned element and the child's offsetParent.
<html>
<body>
<div style="padding-left: 50px;">
<div style="height: 100px">
Some contents
<div>
<div style="height: 80px; padding-left: 20px; position: relative;">
<div id="absPos" style="padding: 10px; position: absolute; left: 0px; top: 0px; background-color: red;"></div>
Some text
</div>
</div>
</body>
</html>
If you are placing an element with absolute position, you need the base element to have a position value other than the default value.
In your case if you change the position value of the parent div to 'relative' you can fix the issue.
You need to declare the parent div either position: relative or position: absolute itself.
relative is what you're looking for in this case.
You need to give parent div relative position first:
<div style="height: 80px; padding-left: 20px; position:relative;">
You can also Apply Position:absolute to the Parent Div. Total Code below
<html>
<body>
<div style="padding-left: 50px;">
<div style="height: 100px">
Some contents
<div>
<div style="height: 80px;position:absolute; padding-left: 20px;">
<div id="absPos" style="padding: 10px; position: absolute; left: 0px; top: 0px; background-color: red;"></div>
Some text
</div>
</div>
</body>
</html>
If, like me, you were trying to position an element over another element, the floating element needs to be inside of the other, not as siblings. Now your position:absolute; can work!
I have a simple HTML, CSS website that is also making use of JavaScript for animated navigation for a mobile only site.
Current Naviation
The HTML for the button:
<div class="navigations">
<div class="left">
<div class="leftinner" id="left">
<i class="fas fa-arrow-left"></i>
<span id="lefttext">CONTACT</span>
</div>
</div>
<div class="right">
<div class="rightinner" id="right">
<i class="fas fa-arrow-right"></i>
<span id="righttext">WEBSITE</span>
</div>
</div>
</div>
When the user clicks on the contact button it triggers a JS function that runs the following:
document.getElementById('main').classList.add('slideright');
document.getElementById('left').style.display = 'none';
The issue I am having is when the user clicks the CONTACT button it triggers the WEBSITE button as well, almost as if the WEBSITE button has a hidden overlap over the CONTACT button. I have attempted using Flex Box, Float left, Float left and right, Display inline block, Display table with table-cell, column etc. The issue only persists on Chrome for Android, but works fine on iPhone and other browsers.
What would be the best way to fix this issue?
Apologies I can't share more than just the screenshot due to NDA reasons.
Edit
Here is the CSS for the navigation buttons, this uses the float left and right attempt.
.navigations .left {
width: 50%;
height: 100%;
z-index: 500;
display: block;
float: left;
}
.navigations .left .leftinner {
background-color: #ffcb05;
border-top: 6px solid #000;
border-right: 3px solid #000;
width: 100%;
height: 100%;
display: inline-block;
}
.navigations .right {
width: 50%;
height: 100%;
z-index: 500;
display: block;
float: right;
}
.navigations .right .rightinner {
background-color: #ffcb05;
border-top: 6px solid #000;
border-left: 3px solid #000;
width: 100%;
height: 100%;
display: inline-block;
}
So I managed to solve the issue with this.
Seems the float right on the text inside the right hand side button was the culprit. Changing how the right button moved its text to the right by making use of text-align: right;instead of float: right; solved the issue.
It seems that the floating right of text made the text's width 100% and overlap the button on the left.
I have div2(height 20px vertical align centre) inside div1(100px) and div2 having anchor tag.
On hover of div1 I am showing hand pointer, but also want on click anywhere in div1 area it should navigate to anchor tag url. Please refer Image for more detail
.test:hover {
cursor: pointer;
cursor: hand;
}
<div class="test" style="height:100px">
<div style=" position: relative; top: 50%; transform: translateY(-50%);">
Pawan Kotak
</div>
</div>
If the outer 'div' should behave like an anchor, just reorder the elements like this:
<a href="myAnchor.tld">
<div id="div1">
<div id="div2"></div>
</div>
</a>
You don't have to mess around with jQuery, if your markup could simply be structured the way it actualy works.
try with following way
$(div1).on("click",function(){
window.location = $(this).find("a").attr("href");
});
this is just a wayout.
Assuming your div id's to be div1 and div2 here is a solution.
$('#div1').on('click',function(){
$(this).find('a').trigger('click');
});
The script will attach a click event to the div1 and when ever user clicks this div it finds the a tag with in it $(this).find('a') and triggers a click event on that anchor tag.
you can also grow your anchor tag (there are several methods/approaches)
.test {
background-color: red;
}
.test a {
cursor: hand;
background-color: blue;
display: block;
line-height: 100px;
}
<div class="test" style="height:100px">
<div style=" position: relative; top: 50%; transform: translateY(-50%);">
Pawan Kotak
</div>
</div>
I created a notecard image where i overlayed multiple images on top of it. These are elements of the notecard. I want it so that when I hover over the notecard, I can completely change the contents on the notecard image (overlaying new things onto the notecard).
So right now, I have this right now:
<div style="position:relative;">
<a href="#games">
<img id "image_a" a" src="images/card_normal.png" onmouseover "this.src rc 'images/hover/card_hover.png';" ;" onmouseout "this.src rc 'images/card_normal.png';" ;" style="position: absolute; top: 0; left: 0;"/>
<img id "image_b" b" src="images/category_icons/icon_games.png" style="position: absolute; top: 10px; left: 40px;"/>
<img id "image_c" c" src="images/category_titles/title_games.png" style="position: absolute; top: 160px; left: 40px;"/>
</a>
</div>
Where the notecard changes into a "hovered" version, but I am unable to change anything else. I want it so that whenever the mouse pointer is in the notecard (including if its on other elements inside the notecard), the contents change. I want to completely scrap the contents of it (so the title and icon) and change it so I can add text and overlay new images.
How can I do this in JS/HTML/etc?
If the two versions (hover/non-hover) are significantly different (and you want a no-js solution), you could have two divs, one set to hide, one set to show. Then on-hover, you change their visibility. Fiddle.
<div class="card">
<div class="no-hover">
stuff you want to show when the user is just looking
</div>
<div class="on-hover">
stuff you want to show when the user hovers
</div>
</div>
CSS:
.no-hover {
display: block;
}
.on-hover {
display: none;
}
.card:hover > .on-hover {
display: block;
}
.card:hover > .no-hover {
display: none;
}
It's extra HTML elements, but might be easier to maintain.
Based on your comment to Learner's answer, here is an example of the idea you are describing:
HTML:
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
CSS:
.outer {
width: 304px;
height: 304px;
background-color: black;
}
.inner {
float: left;
width: 150px;
height: 150px;
background-color: red;
border: 1px solid black;
display: none;
}
.outer:hover .inner {
display: block;
}
DEMO
If you are trying to achieve something like this:
http://spoonfedproject.com/wp-content/uploads/demo/jquery-slide-hover/index.htm
Here's your solution:
http://www.robertkuzma.com/2011/01/jquery-animated-swap-div-content-on-hover-effect/