Develop Reference

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.

Jquery .height() not working until resize of window

I'm using this code to resize a div on my page:
function sizeContent() {
var newHeight = ($("html").height() - $(".header").height() -3) + "px";
$(".content").height(newHeight);
}
I am triggering this using:
$(window).resize(sizeContent());
But I also call it inside
$(document).ready(sizeContent());
to set all the heights properly.
If i resize the browser window by dragging at its borders it works great.
But the initial call does not seem to have any effect. Putting an alert inside the sizeContent function I can see that it is being called at page ready, and is setting the right height, but nothing is changed on the page.
It's as if the browser does not recognize that it needs to redraw anything unless the window itself is changed.
Solved:
In the end it was not the javascript that was the problem, using div's with display:table and display:table-row was causing it. Removed these from the css and everything worked.

// If you put your code at the bottom of the page to avoid needing`$(document).ready`, it gets even simpler:
$(window).on('resize', function () {
var newheight = ($(window).height() - $('.header').height() - 3);
$(".content").css("height", newheight);
}).trigger('resize');
// Another way to do that same thing
$(document).ready(sizeContent);
$(window).on('resize', sizeContent);
function sizeContent() {
var newheight = ($(window).height() - $('.header').height() - 3);
$(".content").css("height", newheight);
}
// Another technique is to`.trigger()`one event inside the other:
$(window).on('resize', function () {
var newheight = ($(window).height() - $('.header').height() - 3);
$(".content").css("height", newheight);
});
$(document).ready(function () {
$(window).trigger('resize');
});

Replace
$(".content").css({height:newHeight}) //replace this
with
(".content").height(newHeight);

Use below code:
function sizeContent() {
var newHeight = ($(window).height() - $(".header").css('height')-3) ;
$(".content").css('height',newHeight);
}

margin-left undefined after setting with jQuery

I am trying to set the margin of my wrapper dynamically. Here is my JavaScript code:
var w = window.innerWidth;
if (w > 800) {
var margin = (w - 800) / 2;
$('.ui-page').css('margin-left', margin);
var output = $('.ui-page').css('margin-left');
$('.ui-footer').css('margin-left', margin);
$('.ui-header').css('margin-left', margin);
alert(output);
}
But when I open the page, the alert says undefined !?

In addition to my previous answer, which shows it working, there is this fail-safe.. this is a different approach that must always work. I suspect your page is not loaded when the code is run:
http://jsfiddle.net/digitalextremist/xfVdL/1/
$( document ).ready( function() {
var w = window.innerWidth;
var maxWidth = 300
if ( w > maxWidth ) {
var margin = (w - maxWidth) / 2;
$('.ui-page').css('margin-left', margin);
var output = $('.ui-page').css('margin-left');
$('.ui-footer').css('margin-left', margin);
$('.ui-header').css('margin-left', margin);
alert( output );
}
});
Or, if you use jQuery Mobile:
$( document ).on( 'pagebeforeshow', function( event ) {
var w = window.innerWidth;
var maxWidth = 300
if ( w > maxWidth ) {
var margin = (w - maxWidth) / 2;
$('.ui-page').css('margin-left', margin);
var output = $('.ui-page').css('margin-left');
$('.ui-footer').css('margin-left', margin);
$('.ui-header').css('margin-left', margin);
alert( output );
}
});
It is critical that you let the page load first before testing sizes as you are doing.
What you are doing is correct, but jQuery and jQuery Mobile render the page in stages. To make sure you take your measurement of .ui-page at the right time, once everything is properly loaded by jQuery or jQuery Mobile, you need to make sure it all rendered first, which means you need to use $( document ).on( 'pagebeforeshow' ) for jQuery Mobile, or $( document ).ready() for jQuery itself. These make sure your code runs after the page is fully rendered. Before that, your measurements will be wrong! And before that, .ui-page might not even exist yet, if it is added by jQuery Mobile.
Here is more information for you:
When should I use jQuery's document.ready function?
jQuery: Why use document.ready if external JS at bottom of page?
http://learn.jquery.com/about-jquery/how-jquery-works/
http://www.w3schools.com/jquerymobile/event_pagebeforeshow.asp
http://jquerymobile.com/demos/1.1.0/docs/api/events.html

Try setting the margin with a unit; something like:
$('.ui-page').css('margin-left', margin + 'px');
Also, you can use margin: 0 auto; to have your div's center themselves within the page. See MDN for some details.

It looks like your query for .ui-page is returning no elements.
Therefore, when trying to retrieve the margin-left property, it returns undefined.
Try checking whether whether .ui-page actually exists on the page.
A quick way to do this:
if ( $('.ui-page').length > 0 ) alert('.ui-page exists!');

What version of jQuery are you using? And what browser?
Without changing your code really at all, it works fine under version 1.10.1
( It also works under every other version... on Chrome and Firefox )
See what I mean? http://jsfiddle.net/digitalextremist/xfVdL/
So, it does work... No "px" required.

Turn off zooming when in portrait mode

Hello i am using this zoom javascript code to zoom my div depending on the screen size it works perfectly but i would like it so when I set an ipad to portrait mode it stops the zoom script from working. here is the script.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" language="javascript">
var minW = 1800;
$(function () {
CheckSizeZoom()
$('#divWrap').css('visibility', 'visible');
});
$(window).resize(CheckSizeZoom)
function CheckSizeZoom() {
if ($(window).width() < minW) {
var zoomLev = $(window).width() / minW;
if (typeof (document.body.style.zoom) != "undefined") {
$(document.body).css('zoom', zoomLev);
}
else {
// Mozilla doesn't support zoom, use -moz-transform to scale and compensate for lost width
$('#divWrap').css('-moz-transform', "scale(" + zoomLev + ")");
$('#divWrap').width($(window).width() / zoomLev + 10);
$('#divWrap').css('position', 'relative');
$('#divWrap').css('left', (($(window).width() - minW - 16) / 2) + "px");
$('#divWrap').css('top', "-19px");
$('#divWrap').css('position', 'relative');
}
}
else {
$(document.body).css('zoom', '');
$('#divWrap').css('position', '');
$('#divWrap').css('left', "");
$('#divWrap').css('top', "");
$('#divWrap').css('-moz-transform', "");
$('#divWrap').width("");
}
}
</script>
cheers

Check the $(window).width() against the $(window).height() to determine the device orientation.
Another tip is to chain your jQuery calls like this $('#divWrap').css('position', '').css('left', '').css('top', ''); for better performance.

To detect portrait-mode WDever already presented the correct answer.
Yet I do not encourage either of the two ways of using the .css() function in this case.
You may pass an object to this function like:
$('#divWrap').css({
position: '',
left: '',
top: ''
});
This way you keep your code clean, short and easy to read.

Slow scrolling background in Javascript or CSS?

I'm trying to figure out how to make a background image scroll slower than the page contents. I haven't got a clue how it's done. The perfect example of what I'm trying to do is here
Is this done in CSS or jQuery/Javascript?

This is made by javascript (jQuery):
(function () {
var a = document.body,
e = document.documentElement;
$(window).unbind("scroll").scroll(function () {
a.style.backgroundPosition = "0px " + -(Math.max(e.scrollTop, a.scrollTop) / 8) + "px";
});
})();

The effect on the link you posted is done in Javascript using jQuery.
If you examine the code of a script of the site here, you can find:
.style.backgroundPosition="0px "+-(Math.max(e.scrollTop,a.scrollTop)/8)+"px"
Practically, the background-position CSS property is modified on page scrolling calculating Y-axis depending on page scroll position. If you have some knowledge of Javascript, jQuery or Mootools, you can reproduce the effect very easily.
I think it's impossible to do it using only CSS.

This one works for high bg images.
(function () {
var body = document.body,
e = document.documentElement,
scrollPercent;
$(window).unbind("scroll").scroll(function () {
scrollPercent = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());
body.style.backgroundPosition = "0px " + scrollPercent + "%";
});
})();