I have been trying to scale an image in javascript so it is 15% of the screen width. The problem is now that javascript automaticcaly scales from the top down and i want to scale from bottom to top. Thank you in advance!
ps: jquery library is included.
html:
<img id = "image" src = "https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/>
js:
document.getElementById("image").width=window.innerWidth * 0.15;
First, you do not need jQuery, nor any JavaScript at all to get this to work as you would like. It can be done in pure CSS.
Second, this is not an issue with the way images scale, but an issue with positioning the image after it has been scaled.
Please see my jsfiddle showing how to accomplish this with pure CSS and position how you would like.
HTML:
<div id='imagewrapper'>
<img id = "image" src = "https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/>
</div>
CSS:
#image {
width: 15vw;
position: absolute;
bottom: 0;
right: 0;
}
#imagewrapper {
position: relative;
width: 768px;
height: 576px;
}
Related
here I have a big problem.
I try to cover a div by an image, so that it is disabled, except that I can not adapt to the size of the window, I managed to produce a code, here is the result: https://i.stack.imgur.com/tMY53.png
and sometimes it gives this bug: https://i.imgur.com/Cwck9Ol.png in both cases, the image is not centered from the top, I tried full value (all that between 20 & 30) but it does not help ..
Here is my code:
var width=$('.soon').width();
var height=$('.soon').height();
$('.soonIMG').css('width', width);
$('.soonIMG').css('height', height);
$('.soonIMG').css('top', -height-20.5);
$( window ).resize(function() {
var width=$('.soon').width();
var height=$('.soon').height();
$('.soonIMG').css('width', width);
$('.soonIMG').css('height', height);
$('.soonIMG').css('top', -height-20.5);
});
How to solve the problem? Thank you all!
As per your description, I understood like you want to block a specific div with some kind of image. So here I've given some CSS with this you can achieve that.
CSS
.overlay {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
z-index: 999;
top: 0;
left: 0;
position: absolute;
}
And place the following HTML in the div which you want to block with image.
<div class="overlay">
<!-- Here you can add HTML for the image/content which you want to show on that div and write CSS for that as well -->
</div>
Hope this helps for you, and let me know if any further changes/suggestions needed for this.
I am trying to enable a user to drag an image (e.g. a face) on another image (e.g. a map square). I implemented the drag&drop with an Angular directive and it kinda work. What is not working is the position of the dropped image (the face): it is not overlaying, but it is being placed below the map square.
The starting HTML code is generated via ng-repeat, but the resulting element is this:
<span style="display: inline-block;position:relative;">
<img src="map_square.jpg" class="map-image">
</span>
When dropping, it becomes:
<span style="display: inline-block">
<img src="map_square.jpg" class="map-image">
<img src="face.jpg" class="face-image-on-map">
</span>
This is my CSS code:
.map-image {
position: relative;
max-width: 42px;
z-index: 0;
}
.face-image-on-map {
position: absolute;
width: 100%;
max-width: 42px;
z-index: 100;
opacity: .8;
}
As a result of this, I would expect the face image to be over the map square, both being inside the span-delimited area (42*42px).
Instead, the face image is outside the span area, below the map square (actually, it is over another map square image, i.e. the one below the actual target).
Changing position of the face causes the face image to be placed on the right of the target (far away from it).
How can I fix this?
I think you're missing the top and the left property in .face-image-on-map.
So I would recommend this:
.face-image-on-map {
position: absolute;
top: 0; /* Positoning: distance from top border */
left: 0; /* Positioning: distance from left border */
width: 100%;
max-width: 42px;
z-index: 100;
opacity: .8;
}
(See the W3Schools page for more information)
Hope this is want you wanted :)
I have two img elements and I want the first image.png to go behind the transparent image.png. I have tried a lot of different things (z-index, transparent background color, rgba background color, positioning absolute and relative, nesting one in a div, making them both divs). Right now i've been trying to use a transparent .png image. The image .png is actually behind it, but it still shows through it. Please help.
html:
<body>
<main class="site-wrapper">
<div class="carnival"></div>
<div id="images">
<img id="divbox" src="images/divbox.png">
<img id="clown1" src="images/clown1.png">
</div>
</main>
</body>
js: (i did the styles in js b/c I was interested in learning how to do it that way):
//styles
//divbox:
document.getElementById('divbox').style.display = "inline-block";
document.getElementById('divbox').style.transform = "skew(-2deg)";
document.getElementById('divbox').style.marginTop = "21%";
document.getElementById('divbox').style.marginLeft = "47.6%";
document.getElementById('divbox').style.height = "200px";
document.getElementById('divbox').style.width = "200px";
document.getElementById('divbox').style.border = "1px solid orange";
document.getElementById('divbox').style.position = "absolute";
document.getElementById('divbox').style.zIndex = "2";
//clown1:
document.getElementById('clown1').style.display = "inline-block";
document.getElementById('clown1').style.transform = "rotate(90deg)";
document.getElementById('clown1').style.marginTop = "21%";
document.getElementById('clown1').style.marginLeft = "53%";
document.getElementById('clown1').style.border = "1px solid green";
document.getElementById('clown1').style.position = "relative";
document.getElementById('clown1').style.zIndex = "1";
Thanks for any help, please let me know if I can answer questions.
UPDATE:
Sorry for not being clearer. I have now achieved getting the image behind the other image, but since the image ontop is transparent, the image behind is showing. How do I stop this?
Here is an example of what is happening:
http://oi61.tinypic.com/2mw9egx.jpg
Notice the orange border is ontop so it is definitely ontop.
UPDATE 2:
This should make it really clear what I want. Again sorry for the confusion:
http://oi59.tinypic.com/eamb0n.jpg
I would do something like the following jsFiddle: http://jsfiddle.net/7gdx48fu/. Might need to reload a couple times to see a good example of the overlay working.
Create a wrapper DIV for your two images. Set that wrapper DIV's to position: relative so we can use absolute positioning on one of the images it contains. By doing this we prevent the absolute positioned image from potentially aligning itself elsewhere in the page, like the upper left corner of the browser window.
Then, set the position of our overlay image, the transparent PNG, to position: absolute along with top: 0 and left: 0 to align it with the first images upper left corner.
You can do this without using z-index if you watch the order you include your images. Place the image you want behind the transparent PNG in the markup first followed by the transparent PNG.
<div class="img-container">
<img src="http://lorempixel.com/200/200/city/">
<img class="overlay" src="http://lorempixel.com/200/200/city">
</div>
.img-container {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
opacity: 0.25; /* using this to replicate the transparent PNG */
}
EDIT
The OP's requirements have changed to include how to prevent an image behind a transparent image from showing through the transparent image.
Here is an updated jsFiddle: http://jsfiddle.net/7gdx48fu/2/.
This approach I wrapped the transparent PNG in a wrapper DIV and set it's background color. I used white in my example but you may use any color.
<div class="img-container">
<img src="http://lorempixel.com/200/200/city/">
<div class="overlay">
<img src="http://lorempixel.com/200/200/city">
</div>
</div>
.img-container {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
background-color: white;
top: 15px; /* shifting overlay for illustrative purposes - not use case code */
left: 15px; /* shifting overlay for illustrative purposes - not use case code */
}
.overlay img {
opacity: 0.25; /* using this to replicate the transparent PNG */
}
Not perfect but I'm unsure of how else to proceed.
EDIT 2
It seems the OP wants to do a form of masking. You can do this with overflow: hidden.
I have updated the jsFiddle: http://jsfiddle.net/7gdx48fu/4/
In this updated answer I have kept the wrapper DIV and set it with a fixed width and height. Then applied overflow: hidden. What we are doing here is creating an invisible window that will only show content when it is within the dimensions of the window.
To have the image appear as if it is coming out of the base layer image simply adjust the position of the image inside the wrapper DIV. For the jsFiddle simply play with the value of top in .mask img.
This will need a little tweaking for the proper placement and size of the .mask DIV to fit your needs but hopefully points you in the right direction.
<div class="img-container">
<img src="http://lorempixel.com/200/200/city/">
<div class="mask">
<img src="http://lorempixel.com/200/50/city">
</div>
</div>
.img-container {
position: relative;
}
.mask {
position: absolute;
top: 25px;
left: 25px;
height: 100px;
width: 100px;
overflow: hidden;
border: 1px solid red; /* for illustrative purposes */
}
.mask img {
position: relative;
top: 25px;
}
Have you tried the css opacity property ?
#clown1{ opacity:0.3;}
make both images' position absolute instead of relative
for the above to work, some common ancestor (i.e. #images) must have a non-default position too (e.g. relative)
forget zIndex - all else being equal, the latter element will be "topmost"
put all the above in a CSS style sheet instead of in JS code!
Forgetting the other transformations and margins, etc, the core CSS that you need is:
#images {
position: relative;
}
#divbox, #clown1 {
position: absolute;
}
Put them both in a parent container. Make the parent have position: relative and put both images having position:absolute. That way they will stack.(Something like that that I didn't check The order of img's could be wrong - play around a bit.
CSS:
.parent > img.transparent {
position: absolute;
}
.parent > img {
position: absolute; opacity: 0.5
}
HTML:
<div class="parent" style="position:relative">
<img src="other.png" class="transparent"/>
<img src="transparent.gif"/>
</div>
Some more explanation: When you make a parent/ancestor element's position relative it means that its contents that are absolute will be relative to the parent and not to the whole window
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 need to change the background of one of my main container divs with Javascript. The end goal is to apply a gradient but I'm having issues just changing background color. Here's the code:
var main = document.getElementById("main");
main.parentNode.style.maxWidth = 0;
main.parentNode.style.maxHeight = 0;
main.parentNode.style.margin = "0px";
main.style.backgroundColor = "black";
This is what the tag looks like in the browser once the page loads and the JS executes.
<div id="main" style="z-index: 10; position: relative; top: 0px; left: 0px; background-color: black;">
I am not getting any JS errors. The JS is executing bc other code runs and the background color is changed in the code but not rendered. The browser I am most concerned about is Safari but I am getting the same effect in Chrome. Any help would be much appreciated.
EDIT: Here's a fiddle: http://jsfiddle.net/hz7AR/
you are setting the parent container to maxWidth 0 and maxHeight 0. i think there is the problem
You need to set the width and height of your div. Currently the div has no width or height change your html to:
<div id="main" style="z-index: 10; position: relative; top: 0px; left: 0px; background-color: black; height: 100px; width: 100px">
That code makes the div 100 x 100 pixels you can set it to whatever you like