I have a div that I want to change the 'top' property of. It is currently set in the CSS sheet, however when my function is completed, I want it to change.
This is the code I was trying to use but it doesn't do anything:
<script>
function reposition(){
var windowWidth = window.innerWidth;
if (windowWidth > 667) {
document.getElementById("SubmitAFilm").style.top = "100px";
}
}
window.addEventListener("resize",changeFontSize,false);
</script>
Change the function you are applying in addEventListener to reposition. Also you need to have position: absolute for the top value to work.
function reposition() {
var windowWidth = window.innerWidth;
if (windowWidth > 667) {
document.getElementById("SubmitAFilm").style.top = "100px";
}
}
window.addEventListener("resize", reposition, false);
#SubmitAFilm {
position: absolute;
}
<div id="SubmitAFilm">Submit a Film</div>
You should set position:absolute on the div you are moving with.
Here is a demo: https://jsbin.com/pevomekezu/1/edit?html,output
And sample code:
<div id="SubmitAFilm" style="position:absolute">thefilm</div>
<script>
function reposition(){
var windowWidth = window.innerWidth;
if (windowWidth > 667) {
document.getElementById("SubmitAFilm").style.top = "100px";
console.log('changetop')
}
else {
document.getElementById("SubmitAFilm").style.top = "0px";
}
console.log('reposition')
}
window.addEventListener("resize",reposition,false);
</script>
Edit: Second solution: If you didn't want to use the absolute positioning, you can in your script use "marginTop" instead of "top". The result will be what you want.
Related
I want to cut the margin-left of a div container in half under a certain window width (mobile).
I've tried this with parseInt, .css and store it temporarly in a variable. Then cut it in half and use .replace.
if ($(window).width() <= 590) {
let oldmargin = parseInt($("#div").css("marginLeft"));
let newmargin = oldmargin/2;
$("#div").css("marginLeft").replace('rem', newmargin);
}
Unfortunately the code is not working.
To set a new value of margin-left, try with $("#div").css("margin-left",newmargin);
To GET a value using .css() = $("#div").css("margin-left")
To SET a value using .css() = $("#div").css("margin-left",newmargin)
$('.div').each(function() {
var oldmargin = parseInt($(this).css("marginLeft"));
var newmargin = oldmargin / 2;
$(this).css("marginLeft", newmargin);
});
Demo
$('.div').each(function() {
var oldmargin = parseInt($(this).css("marginLeft"));
var newmargin = oldmargin / 2;
$(this).css("marginLeft", newmargin);
});
.div {
margin-left: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div">#div</div>
<div class="div">#div</div>
I'm trying to set, with javascript, the width of one div to the width of another. In my case, the second div was cloned from the first.
The issue I'm running into is related to padding, and how style.width is defined differently from clientWidth/offsetWidth/scrollWidth. In my example below, I have two divs defined the same except with different widths. When the button is pressed, I'm trying to set the width of the smaller one to the bigger one - but the outcome is that it gets the width of the bigger one PLUS the padding (an extra 20px).
Is there a way to change the line:
two.style.width = one.clientWidth + 'px';
to make the two divs equal in width?
function setWidth() {
var one = document.getElementById("one");
var two = document.getElementById("two");
two.style.width = one.clientWidth + 'px';
}
.outer {
background: red;
padding: 10px;
}
.inner {
background: green;
height: 10px;
}
#one {
width: 100px;
}
#two {
width:50px;
}
<div id=one class=outer><div class=inner></div></div>
<br>
<div id=two class=outer><div class=inner></div></div>
<button onclick="setWidth()">SET WIDTH</button>
You can use getComputedStyle:
function setWidth() {
var one = document.getElementById("one");
var two = document.getElementById("two");
style = window.getComputedStyle(one);
wdt = style.getPropertyValue('width');
two.style.width = wdt;
}
Here's a fiddle
You should make use of .offsetWidth. They belong to the element, not .style.
function setWidth() {
var w=document.getElementById('one').offsetWidth
document.getElementById('two').setAttribute("style","width:"+w+"px");
}
The width isn't taking into account the padding. You'll still need to subtract it. Something like this should work:
function setWidth() {
var one = document.getElementById("one");
var two = document.getElementById("two");
two.style.width = one.offsetWidth + 'px';
//update the width again, subtracting the difference between the first div and the second (which includes padding)
two.style.width = (two.offsetWidth-((two.offsetWidth - one.offsetWidth)*2)) + 'px';
}
You can see it working here: https://jsfiddle.net/igor_9000/55d1pfak/1/
For what its worth, jQuery handles this a little easier and gets the elements width including padding/borders. That may be another option for you.
Hope that helps!
You need to take one's padding into consideration.
function setWidth() {
var one = document.getElementById("one");
var two = document.getElementById("two");
var leftPadding = window.getComputedStyle(one, null).getPropertyValue('padding-left');
var width = window.getComputedStyle(one, null).getPropertyValue('width');
two.style.width = width;
two.style.padding = leftPadding;
}
Here's a JSFiddle.
My code will find the largest width for all elements using class 'js-equal-width' and it will set all of them to the same width.
$(function() {
const extraWidth = 50
var maxWidth = 0
$('.js-equal-width').each(function() {
maxWidth = maxWidth > $(this).width() ? maxWidth : $(this).width()
})
$('.js-equal-width').each(function() {
$(this).width(maxWidth + extraWidth)
})
})
You can do it by using 'js-equal-width'
<div style="width: 300px;">
<span class="js-equal-width">Midterm Examination</span>
<span class="js-equal-width">Final Examination</span>
</div>
I have an addClass and removeClass function running on window resize, using an if else statement. The markup is as follows:
$(window).load(function() {
resize();
});
//Every resize of window
$(window).resize(function() {
resize();
});
//Dynamically assign height
function resize() {
// Handler for .ready() called.
var windowWidth = $(window).width(),
windowHeight = $(window).height(),
windowHeight = windowWidth / 1.7777;
var loadwindowHeight = $(window).height(),
loadspriteHeight = $('.spritespin-canvas').height();
if(loadspriteHeight < loadwindowHeight) {
$('.spritespin-canvas').addClass('height');
} else {
$('.spritespin-canvas').removeClass('height');
}
}
The only problem is, when you resize the window, it keeps repeatedly adding and removing the class, it it possible to run the addClass and removeClass functions once? Any suggestions would be greatly appreciated!
You can use .hasClass.
var hasHeightClass = $('.spritespin-canvas').hasClass('height');
if (loadspriteHeight < loadwindowHeight && !hasHeightClass) {
$('.spritespin-canvas').addClass('height');
} else if (hasClass) {
$('.spritespin-canvas').removeClass('height');
}
I am trying implement a small animation on a div. Whenever we click on the div it has to move right. I wrote some code but it is not working. Could anyone please help me?
here is my code
<style type="text/css">
#animDiv
{
background-color:#6F0;
width:87px;
height:39px;
left:10px;
}
</style>
<script>
function $(id)
{
return document.getElementById(id);
}
function moveRight()
{
var elem = $("animDiv");
//var divPos = parseInt($("animDiv").style.left);
var divPos = $("animDiv").offsetLeft;
var divWid = $("animDiv").offsetWidth;
if(divPos+divWid < 700)
{
$("animDiv").style.left = $("animDiv").style.left+100+"px";
}
}
</script>
<body>
<div id="animDiv" onclick="moveLeft()">
</div>
</body>
try replacing this code
<div id="animDiv" onclick="moveLeft()">
with this code
<div id="animDiv" onclick="moveRight()">
and add style position:fixed; to your css.
There are several issues in your code:
You are calling the wrong function. It is declared moveRight()
You are attempting to change the left property which will have no affect on elements that are positioned statically.
The element will only nudge right one time. After that the value for your left property is something like 100px100px.
How is this:
function moveRight() {
var elem = $("animDiv");
//var divPos = parseInt($("animDiv").style.left);
var divPos = $("animDiv").offsetLeft;
var divWid = $("animDiv").offsetWidth;
if (divPos + divWid < 700) {
var curLeft = Number($("animDiv").style.left.replace("px", ""));
$("animDiv").style.left = (curLeft + 100) + "px";
}
}
JSFiddle
I have an iframe that loads a page inside it.. when a link is clicked on the page in the iframe, resize the body of the parent aka the document that has the iframe's body..
Body <------------------------
Iframe |
Page |
Link... Upon Click, resize body --
How do I do the above? I tried Parent.document.body.style.width = "200px". and it didn't work. Not sure what to do. Please Help!
function Parentresize(id)
{
var newheight = 2000;
var newwidth = 2000;
parent.document.getElementById(id).height= (newheight) + "px";
parent.document.getElementById(id).width= (newwidth) + "px";
}
I think you have missed the style.height and style.width
This is the code I used in iframe
<script language="javascript">
function Parentresize(id)
{
alert("U r there");
var newheight = 200;
var newwidth = 200;
parent.document.getElementById(id).style.height = newheight + "px";
parent.document.getElementById(id).style.width = newwidth + "px";
}
</script>
<a href="javascript:Parentresize('sam');" >Call Me </a>
Ok I figured it out. This code will exactly do that. It is a bit lengthy because of extra code for cross browser compatibility:
function WindowSize()
{
WinWidth = 0, WinHeight = 0; //Initialize variables with a value of 0;
if(typeof(parent.window.innerWidth) == 'number') //Well I need the parent width of the iFrame aka browser width. Width is a number, not undefined..
{
//FireFox/Opera..
WinWidth = parent.window.innerWidth;
WinHeight = parent.window.innerHeight;
}
else if(parent.document.documentElement && (parent.document.documentElement.clientWidth || parent.document.documentElement.clientHeight))
{
//IE 6+
WinWidth = parent.document.documentElement.clientWidth;
WinHeight = parent.document.documentElement.clientHeight;
}
return WinWidth;
}
function BodyResize(ID)
{
var IDTag = parent.document.getElementById(ID);
if(IDTag.clientWidth == '1024')
IDTag.style.width = (WindowSize() + 'px');
else
IDTag.style.width = '1024px';
}
just call this function BodyResize(ID)
as
<body id="mainbody" onClick="BodyResize('mainbody')"> or <iframe id="interframe" onClick="BodyResize('interframe')">