How to set a CSS property with a variable in JQuery? - javascript

I need to set the CSS property of width as the same size as the browser's current width. To do this, I did var setWidth = $(window).width(), but I don't know how to apply this to my current code, which is something like this:
$(document).ready(function(){
$("#backgroundImg").css("width", "");
});
Is there any way to do this? I'm new to JQuery so I might just be really amateur.

Try this
$(document).ready(function() {
var setWidth = $(window).width();
$("#backgroundImg").css("width", setWidth + 'px');
});
or you can use $.width
$(document).ready(function() {
$('#backgroundImg').width( $(window).width() )
});

update code to following
$("#backgroundImg").css("width", setWidth + "px");

One option: $("#backgroundImg").css("width","100%");
with your variable option do: var setWidth = $(window).width() +'px';
so your code would be
$(document).ready(function(){
$("#backgroundImg").css("width", setWidth);
});

This should make the background match the browser's current width:
$( "#backgroundImg" ).width( setWidth )
Source

Related

How do I operate with the width on a jQuery click event?

I am creating a function that each time it is called 1px is subtracted to the width of an image. I can't figure it out...
Something like this:
var leafCompress = function(){
.css("width" -1 + "px"); //This line is definitely wrong
}
(The following code is working) Here I'm adding the event listener so on each click it calls the leafCompress function.
leaf.on("click",function(){
leafCompress();
});
the problem comes from your function leafCompress
$( "#panda" ).on('click', () => {
resize();
});
const resize = () => {
let width = $("#panda").width() - 50; // get the width of the image and substract 50
$("#panda").css("width", width);
}
#panda {
width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="panda" src="http://r.ddmcdn.com/w_624/s_f/o_1/cx_0/cy_17/cw_624/ch_416/APL/uploads/2014/06/red-panda-09-625x350.jpg" />
I am not sure if you are using jQuery but, you can do it with jQuery .width function,
the css('width') function returns the width as string i.e: "780px" and to use it to set the width property you usually do .css('width', valueToBeSet)
However you can achieve the same result using jQuery .width function
$().width() will return the actual width and $().width(value) will set width as the value
The most trivial way:
leaf.click(function(){
var node = $(this);
node.css('width', node.width() - 1 + 'px');
})
If event handler is a function, "this" points to event target.

Add width and height attr to all images

I need width and height attributes added to all images on a page via javascript/jquery. This is due to a tool our systems use. I thought a simple each loop, adding height/width attr would suffice. Unfortunately this doesn't seem to work
DEMO https://jsfiddle.net/z86xnqd7/
$('body').find('img').each(function (index) {
var theWidth = index.width();
var theHeight = index.height();
index.attr({
"width": theWidth,
"height": theHeight
});
});
When you inspect element you will notice no width/height attr has been added
jsFiddle : https://jsfiddle.net/CanvasCode/z86xnqd7/6/
You need to do your each on the load event, you need to make sure your image has loaded before you check its height and width. Also you want to use $(this) instead of index.
$(function () {
$('img').load(function () {
var theWidth = $(this).width();
var theHeight = $(this).height();
$(this).attr({
"width": theWidth,
"height": theHeight
});
});
});
It's because index is real iteration index (e.g. 1, 2...). Use $(this) or add second parameter to function header function (index, element) {}:
$.each($('img'), function () {
$(this).attr({
width: $(this).width(),
height: $(this).height()
});
});
Problem here is that you try to get the width and height from the index which is just a number and no jQuery object. Try this - it will do the job:
$('body').find('img').each(function(i, elem) {
var $this = $(this);
var theWidth = $this.width();
var theHeight = $this.height();
$this.attr({"width": theWidth, "height": theHeight});
});
See js fiddle: https://jsfiddle.net/g4nn2pk0/2/

JavaScript Window Height

I am using this code to set the height of a section.
//Fixed Image Window Height
$(window).ready(setSizes);
function setSizes() {
var containerHeight = $("#about").height();
$("#about").height(containerHeight - 70);
}
$(window).resize(setSizes);
I had initially
$(window).load(setSize);
There seem to be conflicting things going on I believe. How can I write this saying do this when the window loads and also when it gets resized?
$(document).ready(function(){
setSizes();
});
function setSizes() {
var containerHeight = $("#about").height();
$("#about").height(containerHeight - 70);
}
Try this!
I wrote it like this and it seems to work. Not sure if it's bad practice or not, and I haven't really checked cross-browser, but it's functioning.
$(document).ready(function(){
setSizes();
});
$(window).resize(setSizes);
function setSizes() {
var containerHeight = $(window).height();
$("#about").height(containerHeight - 70);
}

Add pixels to existing CSS element with Javascript

here is my trouble.
I'm using a plugin for a lightbox. For some reason, one of the divs is 28px too short. I've looked all over for a solution for this, but nobody seems to be having the same problem.
The solution I've come up with is to find that element (which I have) and create a javascript snippet that will add "28" to the existing number. The height and width is being calculated directly on the div, not in an element in a stylesheet.
Example:
<div id="colorbox" class="" style="padding-bottom: 57px; padding-right: 28px; position: absolute; width: 892px; height: 602px; top: 2234px; left: 500px;">
I want the Javascript code to add 28 pixels to the width and 55px to the height.
How would I go about doing this?
I would like to say that I'm not looking for just an answer; if you could explain it to me, that would be great. Thanks so much, guys!
Edit: this is how I called the JQuery
Also, this is where you can see the page with the gallery: http://olsencustomhomes.com.previewdns.com/designs/verona-2/#gallery
EDIT FOR KRIS:
Is this the right code? It's in my header
<script>
$(document).ready(function() {
function changeSize(){
var colorbox = $("#colorbox");
var initWidth = $("#colorbox").outerWidth(); // get colorbox width
var initHeight = $("#colorbox").outerHeight(); // get colorbox height
var newWidth = 28; // set your desired width
var newHeight = 55; // set your desired height
var height = initHeight + newHeight; // add heights together
var width = initWidth + newWidth; // add widths together
colorbox.css({"height" : height, "width": width});
}
$(document).ajaxStop(function() {
changeSize();
});
});
</script>
Pretty straightforward application of jQuery, but I commented it up for you anyway:
//select the box element using jQuery
var box = $('#colorbox');
//get the current width and height
var curWidth = box.width();
var curHeight = box.height();
//set the width and height with modified values
box.width(curWidth + 28);
box.height(curHeight + 55);
fiddle: http://jsfiddle.net/579s2/
If you want to add height and width dynamically. Something like this should work:
function changeSize(){
var colorbox = $("#colorbox");
var initWidth = $("#colorbox").outerWidth(); // get colorbox width
var initHeight = $("#colorbox").outerHeight(); // get colorbox height
var newWidth = 28; // set your desired width
var newHeight = 55; // set your desired height
var height = initHeight + newHeight; // add heights together
var width = initWidth + newWidth; // add widths together
colorbox.css({"height" : height, "width": width});
}changeSize();
Also if you want to insure your code is happens after the colorbox opens you could use .ajaxStop(); Also note, outerWidht() and outerHeight() will get colorbox width plus the padding and borders.
To fire function after ajax events are finished:
$(document).ajaxStop(function() {
changeSize();
});
Update:
Okay, it looks the function fires initially. You can see width is null because the colorbox has not opened. What you want to do is fire the function after the colorbox opens. That is where ajaxStop() would come into play. But it might actually be better to use the colorbox callback function:
But not after the colorbox opens. So try doing the ajaxStop() approach. Also note, if you do this you will need to remove changeSize(); after function changeSize() For example:
$(document).ready(function() {
function changeSize(){
// function stuff
}
$(document).ajaxStop(function() {
changeSize();
});
});
Or, Colorbox OnComplete:
$(".selector").colorbox({
onComplete:function(){
changeSize();
}
});
Update 2:
I am not sure where you are calling colorbox exactly. But I see you have this: Found here
jQuery(function($){
$('#wpsimplegallery a').colorbox({
maxWidth: '85%',
maxHeight: '85%'
});
});
So try:
jQuery(function($){
$('#wpsimplegallery a').colorbox({
maxWidth: '85%',
maxHeight: '85%',
onComplete:function(){
changeSize();
}
});
});

document.getElementById(); does not work for third time

Determine Minheight and put it via javascript. It work successfully twice but same code is not working in third calling. This one (document.getElementById("rightadmin").style.minHeight=wrapHeight+'px';) is not working. More amazing is that if I make the 3rd one elevate to 2nd position then it works and then 3rd one not working. So basically whatever I put after 2nd one don't work.
JavaScript:
function height(){
var dheight= ($(document).height());
var wheight= ($(window).height());
if(dheight>wheight){
var wrapHeight= dheight;
}
else {
var wrapHeight=wheight;
}
document.getElementById("iframeArea").style.minHeight=wrapHeight+'px';
document.getElementById("dailySchedule").style.minHeight=wrapHeight+'px';
document.getElementById("rightadmin").style.minHeight=wrapHeight+'px';
}
html:
<body onload="height();">
<!--Start of iframeArea-->
<div class="iframeArea" id="iframeArea">
<div class="btnRight" id="rightadmin">
</div>
<!--End of btnRight-->
</div>
<!--End of iframeArea-->
Are you sure the dailySchedule id exists ? If not your function will throw an error and won't execute the last line.
Might be due to scope problems - the variable wrapHeight is local in two blocks.
Should not have any effect on the outcome, but this code is more elegant way to assign the third variable:
var dheight = $(document).height();
var wheight = $(window).height();
var wrapHeight = (dheight > wheight) ? dheight : wheight;
As all others already said, something else is the problem.
I don't see element with id=dailySchedule on the page. If no element with that id is on the page you should get an error. Check browser console for javascript error.
you say <body onload='height()'> and never check if the document is ready, and then there is perhaps no div with id rightadmin...
Try to convert to jQuery and do something like this and delete the onload attribute.
$(document).ready(function(){
//your code here
}
I am using now the following code. It works fine for everything.
$(function(){
var dheight= ($(document).height());
var wheight= ($(window).height());
var wrapHeight = (dheight > wheight) ? dheight : wheight;
$('.dailySchedule').css({ "min-height": wrapHeight + 'px' });
$('.iframeArea').css({ "min-height": wrapHeight + 'px' });
$('.btnRight').css({ "min-height": wrapHeight + 'px' });
});
Thanks for answeri

Categories

Resources