Is there a way to make position'ed elements scale correctly relative to the window size using only CSS or I got to step it up to javascript/jQ? I tried adding a container with 100% width and height and then scale accordingly.
.container{
position: relative;
width: 100%;
height: 100%;}
.transblock{
position:absolute;
width:44%;
height:5%;
top:90%;
left:0%;
background:green;
opacity: 0.6;
z-index:5; }
.h1text{
position:absolute;
width:30%;
height:5%;
top:90.75%;
left:13.5%;
z-index:10;
color:white;}
http://jsfiddle.net/cyaXL/
The gap between the paragraph and the menu is the issue. It's too small on 1280p screen and too large on 1920p. Is there any way to make it adjust better?
You can as well us 'viewport' units like this:
div {
width: 50vw; //means it should take 50% of the window size
}
I think the fact that you have the .menu4 with a left of 25% is the problem here:
.menu4 {
left: 25%;
}
better:
.menu4 {
left: 0%;
width:auto;
margin-right:1%;
}
.menu4 ul {
float:right;
clear:both;
}
This must be done through css and not with any scripts and Yes your are doing it right, making the container go 100% of windows size then placing items in that container.
You are using font size in pixel. Please try with "em". while doing the layout with %, we need to used "em" instead of "px". please refer the conversion table and try.
Related
This question builds upon that one, where in order to apply full screen width to a child of a non full width parent element, the following rule is used on the child element:
width: 100vw;
margin-left: calc(-50vw + 50%);
As shown in this Fiddle, this solution doesn't work in the presence of a vertical scrollbar though: 100vw doesn't take the scrollbar into account and hence the child element ends up being wider than the screen (note: works perfectly without scrollbar).
Is there a way to solve this problem so that the child element takes exactly full screen width? If not in pure CSS then with JS?
Note: an overflow rule on body isn't acceptable in my case as I need the child to fill the exact width of the screen.
https://jsfiddle.net/k3nvkL35/4/
One of the issues you'll come across with the solution here is that I believe scrollbar widths are not universal, and so you may need to implement some conditional logic to affect width/margin based on that.
That being said, you may find this useful. The function below will check to see if the document has a vertical scrollbar by comparing the document's height to the window's height. Based on the existence of said scrollbar, it will modify the child's width and margins to fit the window.
Again, it likely requires tweaking, though it should provide a decent foundation.
function adjustWidth() {
if ($(document).height() > $(window).height()) {
$(".child").css({
"width": "calc(100vw - 18px)",
"margin-left": "calc(-50vw + 50% + 9px)"
});
} else {
$(".child").css({
"width": "",
"margin-left": ""
})
}
}
$(window).resize(adjustWidth).trigger("resize");
.parent {
width: 500px;
height: 500px;
margin: 0 auto;
border: 3px solid green;
}
.child {
height: 100px;
background: red;
width: 100vw;
margin-left: calc(-50vw + 50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child">
content
</div>
</div>
Simple. Since the parent isn't positioned in any way, then the child can be positioned absolutely. No messing with calc or otherwise, works everywhere.
.child {
height: 100px;
background: red;
position:absolute;
left:0;
right:0;
}
Here is a working fiddle:
https://jsfiddle.net/vgbr6qw2/
I found this solution, which was sourced by this guy, but I don't know who originally did it. I haven't fully tested it, so it may not work in all browsers. I know the vw unit isn't supported in IE8, as if anyone cares.
body {
margin:0;
}
.wrapper {
width:100%;
max-width:400px;
margin:0 auto;
background:pink;
/* margin is for display purposes on stack overflows fullscreen snippet view */
margin-top:80px;
}
.full-width {
width:100vw;
margin-left:-50vw;
left:50%;
background:red;
position:relative;
color:white;
}
<div class="wrapper">
<span>Hi. I'm a paragraph.</span>
<div class="full-width">
<p>You aint no paragraph, sucka!</p>
</div>
<strong>Be quiet, you weak losers.</strong>
</div>
I have a here.com where I am using the geocoding example (LINK) exactly as described.
My <div class="mapModal" id="mapContainer"></div> has the following css:
.mapModal{
height:calc(100% - 50px);
width:calc(100% - 250px);
top:50px;
left:250px;
padding:5px;
position:absolute;
z-index:3;
}
Unfortunately this does not show the div with the map.
When I change the height to a fixed height like this: height: 800px; it works perfectly.
Is there any way to have a (screen fitted) dynamic size of the map container?
The parent element needs to have a defined height otherwise height: 100% will have no effect.
If you want the element to be 100% of the window height / width you can use viewport units:
.mapModal{
height:calc(100vh - 50px);
width: calc(100vw - 250px);
...
}
So currently I have a div that houses an image. The css is setup as so
.InnerBanner{
position:relative;
text-align:center;
margin-bottom:0px;
margin-top:0px;
}
.InnerBanner img{
width:100%;
height:auto;
position: absolute;
top:0;
left:0;
}
and since the outer container no longer sees the height as anything i have to use jquery to load the height after the fact and it is an obvious switch on the page. I was wondering if there is either a way to do this soley in css or a way to do this before the page loads in jquery. I've exhausted search engines trying to find a way to do this. Odds are I'm not phrasing it right but hey you win some and you lose some.
the jquery for loading is below
function Height(){
var height = $(".BannerImage").height();
var em = height/200;
var newfont = em * 24;
$(".InnerBanner a").css("font-size", newfont);
$(".InnerBanner").height($(".BannerImage").height());
}
the function is currently called like so
$(document).ready(function(){
You need to call jquery on document load so it actually loads the image so you can get it's height. On document ready the image will not be loaded(depending on the size, butt 99% it will not be fully loaded). Because of position absolute the image does not take any space in it's parent, so it behaves like a totally independent element.
So to do it with jQuery :
$(window).on('load', function(){
$('.InnerBanner').height( $('.InnerBanner img').height() );
});
Also, as I can see from the css .InnerBanner img will take up the complete width of it's parent element, so why do you add position:absolute to the image?
Since you are asking to do this in CSS,
.InnerBanner{
position:relative;
text-align:center;
margin-bottom:0px;
margin-top:0px;
}
.InnerBanner img{
position: absolute;
top:0;
left:0;
}
<!--Same height and width for both class-->
.InnerBanner img,
.InnerBanner{
width:100%;
height:auto;
}
other trick is here
<div class="layout">
<div class="columns-container">
<div class="column"></div>
<div class="column"></div>
</div>
</div>
.layout {
display: table;
}
.layout .columns-container {
display: table-row;
}
.layout .columns-container .column {
display: table-cell;
}
Since we don’t know the columns’ heights, we can’t set a fixed height
on their parent. Also setting height: 100% or something like that on
the columns won’t work: we are counting on them to spread to the
maximum height and thus make their parent taller.
In your case
.InnerBanner{
display: table-row;
}
.InnerBanner img{
display: table-cell;
}
.InnerBannerlayout {
display: table;
}
keep an extra layout parent div with class InnerBannerlayout .
I have html sturcture
<div id="bg" class="layer">
<img id="trackmap" src="images/back_2416.jpg" width="1208" height="768" class=" ui-draggable map-icon" usemap="#main-map" data-zoom-image="images/background_zoom.jpg" data-big="images/background_zoom.jpg" style="position: relative; left: -439px; top: -272.6px; margin: 0px; display: inline-block; height: 1327.2px; width: 2088px;">
<div id="nav-text">LOREM IPSUM.</div>
</div>
Jquery
var windowHeight = $("#trackmap").height();
var windowWidth = $("#trackmap").width();
var text_height=((windowHeight)-(100));
$("#nav-text").css("top",windowHeight);
Css
.layer {
position: absolute;
width: 1208px;
height: 768px;
}
#nav-text{
z-index: 200;
color: white;
position: absolute;
font-size: 10px;
margin-left: 715px;
width: 310px;
height: 10px;
position: fixed;
bottom: 5px;}
I just want to fix the nav-text to the bottom right whatsoever.. Now i problem i am facing is theres zoom function on the trackmap.. which increases the height and width of the image ..so the text comes in between of the image ..intereferring with the image.. I have tried taking the image width height using jquery ..but somehow its not working
I am not sure I am following your issue here, but it sounds like you are trying to get a div to be in the bottom-right of another div no matter what size it is. That can be done by setting the parent div position to relative which you have, and the child div position to absolute. You have that set but then override it by setting the position to fixed lower in the CSS. You will also want to set the bottom to 0 and the right to 0.
This will position the child div to the bottom right of the parent div. Then you can get rid of your jQuery. Hopefully this helps.
Ok.. I am in a hurry to catch the bus.. but here's a fiddle that illustrates the idea..
basically you will need to use the scrolltop and left parameters to do so:
$(".container").on("scroll", function() {
$(".nav-text").css("top", $(this).prop("scrollTop") + 130);
$(".nav-text").css("left", $(this).prop("scrollLeft") + 120);
});
but move the scrolls first.. sorry I need to go now..
You can achieve this by not fixing the .layer width and height, using display:inline-block; to prevent the div from filling the whole container width. At that point, the .layer size will match the image size whatever it is.
Finally you just need to set the text to absolute position and bottom and right properties too.
.parent{
display:inline-block;
position:relative;
}
.children{
position:absolute;
bottom:0;
right:0;
}
Here is the fiddle explaining
And here is the proof it works even if the image size is changed(click on the image).
Fiddle 2
I'm looking to do something like this but with CSS or JavaScript.
I need to highlight a certain part of an image but everything I find is how to do it in Photoshop. Can I do this with CSS or maybe JavaScript?
Am I even asking the right question?
EDIT:
Well here is a great submission but I have a follow up question:
I need this for a mobile device and portrait and landscape views as well for many devices like: iOS, iPad, Android, WebOS, Etc... So the fixed position I'm not sure will work.
Any advice?
You could use background-position with absolutely positioned divs as follows:
CSS:
.container {
position:relative;
height:455px;
width:606px;
}
.container div {
position:absolute;
background-image:url(http://www.beachphotos.cn/wp-content/uploads/2010/07/indoensianbeach.jpg);
}
.container .bg-image {
opacity:0.3;
height:455px;
width:606px;
}
.container div.highlight-region {
height:50px;
width:50px;
opacity:0;
}
.container div.highlight-region:hover {
opacity:1;
}
HTML:
<div class="container">
<div class="bg-image"></div>
<div class="highlight-region" style="top:50px;left:50px;background-position: -50px -50px;"></div>
<div class="highlight-region" style="top:150px;left:150px;background-position: -150px -150px;"></div>
</div>
Please see http://jsfiddle.net/MT4T7/ for an example
Credit to beachphotos.com for using their image.
EDIT (response to OP comment): Please also see http://jsfiddle.net/zLazD/ I turned off the hover aspect. also added some borders.
CSS changes:
.container div.highlight-region {
height:50px;
width:50px;
border: 3px solid white;
}
/* removed :hover section */
You can probably fake it, here is a sample:
http://jsfiddle.net/erick/JMBFS/3/
I covered the image with an opaque element. The color of the element is the same as the background of the image. Used z-index to put it on top.
You sure can. For example, most crop plugins provide "highlighting" as the basis of their UI. So for a complete cross-browser solution, just use an existing plugin, like Jcrop.
Of course, you might want it to be fixed, in which case you can programmatically tell the plugin which section to highlight and that the user shouldn't be able to move it, and then it will act as a highlighter, not a cropper.
These are the steps you can take to highlight a part of an image:
Access the image in JavaScript, and dynamically add another identical image immediately after it. (this could be done just in HTML, but it would change the semantics of your markup)
Position the second image over the first image
Apply a css mask on the second image so that only the "highlighted" part shows up
When the user hovers over the images' container, adjust the opacity of the first image.
I can provide more technical details on this later if need be.
What about overlaying the cropped image (with 100% opacity) on top of the whole image (with 30% opacity)?
This answer is only a proof of concept
body {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.img {
position: absolute;
top: 0;
left: 0;
}
.img-base {
opacity: 0.3;
z-index: -99;
}
.img-overlay {
opacity: 1.0;
}
.cropper{
width: 150px; /* input width and height of the box here */
height: 120px;
overflow: hidden;
position: relative;
padding: 0 0 0 0;
margin: 0 0 0 0;
left: 90px; top: 170px; /* input starting location of the box here */
}
#overlay1 {
position: absolute;
left: 0px; right: 0px;
margin-left: -90px; margin-top: -170px; /* input starting location of the box here */
}
<img src="https://images.unsplash.com/photo-1583355862089-81e9e6e50f7a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" class="img img-base">
<div class="cropper">
<img src="https://images.unsplash.com/photo-1583355862089-81e9e6e50f7a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" class="img img-overlay" id="overlay1">
</div>