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
Related
I have this css style which is generated from Angular module so I can't do anything there.
The problem is that I want to -30px from what is generated.
<div ng2-sticky="" style="box-sizing: border-box; position: static; float: none; top: auto; bottom: auto; width: 1040px; left: auto;">
Hello World
</div>
As the value changes with screen size, I want the width to be 30px lesser always. So for this specific screen size, it should be 1010px.
I'm not sure how I could possibly use calc here or is there any other method to achieve this?
PS: I can't edit the Javascript generating this code since it's not on my server.
JS - You can do something like this in js
let element = document.querySelector('div[ng2-sticky]');
let width = element.offsetWidth;
let newWidth = width - 30 + "px";
element.style.width = newWidth;
CSS - or simple trick in css would be
div[ng2-sticky]{
margin: 0 15px;
}
so it would give a margin to the left and right
you could
document.querySelector('[ng2-sticky=""]').style.width = 1010px;
or perhaps
<style>div[ng2-sticky=""] {width:1010px !important;}</style>
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 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;
}
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 have a div with height = 10*screen-height.
I want to add another smaller div to it with height = screen height
Assuming that I can add 10 such smaller div's onto the bigger div, I want to add this div at particular position on the bigger div. Say starting from 4*screenheight pixel. How do I do that using jQuery?
Presumably you already have the screen height stored, and the two divs created at the correct heights, so:
$(inner_div).css('position', 'relative').css('top', 4*screen_height);
You may not need position:relative in your style if it's in your css already
See here how you can access and manipulate the body's height and the big div's inners afterwards;
JSfiddle
HTML
<div id="biggy">
<div class="smally">Smally :)</div>
<div class="smally">Smally 2, don't forget me :D</div>
</div>
CSS
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
#biggy {
width: 200px;
background-color: orange;
position: relative;
}
.smally {
width: 100%;
background-color: blue;
color: white;
text-align: center;
position: absolute;
}
JavaScript
$(document).ready(function() {
var bh = $('body').height();
var smally_offset = (bh / 10);
// Set biggy to be the body's height
$('#biggy').css('height', bh);
// Make all smallies 10% of the set height
$('.smally').css('height', smally_offset);
// Handle the different smallies :)
$('.smally:nth-child(1)').css('top', smally_offset * 0);
$('.smally:nth-child(2)').css('top', smally_offset * 1);
});