Getting the width from an scaled image - javascript

I'm using Jquery to get the width of an image once it is appended to the body. Have a look at this fiddle to get an understanding of what I'm doing.
What I want to do is add each element with a constrained height and read what the respective width is once after it is scaled. The problem as you will see is that the console.log is giving me the value 0 for the width.

Use jQuery .load() function to do all the calculation after image load:
var number = 0;
$(document).ready(function(){
setInterval(function(){
console.log();
$('.container').prepend(
$('<img/>').attr({
src: "http://www.upress.umn.edu/book-division/images-1/other images/blockc.gif/image_thumb"
id:'img' + (number++)
}).load(function(){
console.log($(this).width())
})
},3000);
});​

http://jsfiddle.net/w7rcn/
The width was being "read" before the image could fully download.
So, we used the same concept, but applied it after the img load event had fired:
$('#img' + String(number)).load(function() {
console.log($(this).width());
});

Mohsen and Justice are right. However, you can still simplify a bit:
var number = 0;
$(document).ready(function(){
setInterval(function(){
console.log();
$('.container').prepend($('<img '
+ 'id="img'+number+'"src="http://www.upress.umn.edu/'
+ 'book-division/images-1/other-'
+ 'images/blockc.gif/image_thumb">').load(function() {
console.log($(this).width());
}));
number++;
}, 3000);
});​

Related

resize and see result in real time with js using resize() method

window.onresize = function(event) {
boxes = $('.heightHack');
maxHeight = Math.max.apply( Math, boxes.map(function() {
return $(this).height();
}).get());
boxes.height(maxHeight);
}
I used jquery onresize but I still need to refresh to see my result. Above is one of a demo for my height hack. My question is how to see instant or real time result along with users' event - resizing the windows.
$(window).resize(function() {
$('#resizeText').text('Width: ' + $(this).width() + ', Height: ' + $(this).height());
});
Do you mean this?
http://jsfiddle.net/sing0920/yKUyM/

jQuery.clone() an element, then add dynamic styling to it

Let's say I have an image, cat.jpg, and when clicked I want to clone it.
$('img.cat').on("click", function() {
$(this).clone().appendTo('#container');
});
Upon duplication, however, I want the new cat.jpg to appear as half the size of the original. And I want this to continue happening each time a new cat.jpg is clicked.
Any ideas on how to go about accomplishing this? Is it even possible to inject new styling/classes/parameters via .clone()?
It sounds like the following is what you're after:
// If all images are within #container, use $("#container") instead:
$(document).on("click", "img.cat", function () {
var original = $(this);
original.clone().css({
width: original.width() / 2,
height: original.height() / 2
}).appendTo("#container");
});
Fiddle: http://jsfiddle.net/G6XTz/
Of course, you may have wanted the newly added image to be half the size of the last cat image, rather than the cat image clicked:
Fiddle2: http://jsfiddle.net/G6XTz/1/
Caveat:
The width and height can only divide so far; eventually you'll run into some problems. Better check the result of division first, and make a decision to do something else when it makes sense.
Just setting the width to half seems to be enough with an img element, the height gets set automatically in proportion to the width:
$('#container').on('click','img.cat', function() {
$(this).clone()
.appendTo('#container')
.width(function(i,v) { return v/2;});
});
Demo: http://jsfiddle.net/Mr2x8/
But if you find you need to set the width and the height here's one way to do it:
$('#container').on('click','img.cat', function() {
var $this = $(this);
$this.clone()
.appendTo('#container')
.width($this.width()/2)
.height($this.height()/2);
});
Demo: http://jsfiddle.net/Mr2x8/1/
id do this:
$(this).clone().addClass('small').appendTo('#container');
this adds the css class small to the clone of this.
Create a new class with the specific new styling you want to get changed dynamicaly in your CSS file.
.newClass {
//example green outline
outline: solid thin green;
}
And then modify your script:
$('img.cat').on("click", function() {
$(this).clone().addClass('newClass').appendTo('#container');
});
EDIT :
If the only thing you want to change is the size of the img for lets say 10% each click then:
$('img.cat').on("click", function() {
var width = $(this).width() * 0.9;
var height = $(this).height() * 0.9;
$(this).clone().css({"width":width+"px", "height":height+"px"}).appendTo('#container');
});
The above code will produce the same image but 10% smaller than the image clicked .
If you want to click only the initial image then simply put the width and height variable outside the click function and update them inside for each click.
NOTE :
In the css() you add +"px" if initial width is in px else you add +"%" if it is in percentage.

jQuery.ScrollTo - how to make bg to scroll slower than the rest?

i'm new to coding , and to this site, i hope you'll help me! so i'm making horizontal website, i want to add scrolling background, that scrolls with other elements clicked, but slower
like for example http://hotdot.pro/en/ . How do i do that, where do i put code lines?
or maybe i could use better plugin?
Thanks for any help!
!!i'm putting script code here just because website says that my post is not informative enough. sorry
<script>
$(document).ready(function() {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 800);
return false;
});
$(window).resize(function () {
resizePanel();
});
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
mask_width = width * $('.item').length;
$('#debug').html(width + ' ' + height + ' ' + mask_width);
$('#wrapper, .item').css({width: width, height: height});
$('#mask').css({width: mask_width, height: height});
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}
</script>
or
where?
jQuery Parallax Plugin is probably what you are looking for.
See demo here: http://ianlunn.co.uk/plugins/jquery-parallax/
Source code and documentation here: https://github.com/IanLunn/jQuery-Parallax
"or maybe i could use better plugin" - rule of thumb is: whenever it is possible to use already written code (and not to write your own), you should do so. Except the cases, when writing a code is an academic exercise.

Animate max-width on img [JQuery]

I have tried looking for a solution, but can't find anything good.
I am customizing a blog for a friend of mine. When it loads, I want all the img's in each post to have a max-width and max-height of 150px. When the user pushes the img, the max-values should increase to 500px, which is easy enough. The problem with my code is that I can't get an animation on it, which I want. Any help out there?
var cssObj = {'max-width' : '500px','max-height' : '500px;'}
$("img").click(function(){
$(this).css(cssObj);
});
I got it working, combining two of the other answers (and removing max-width & max-height in the css-code)
var cssBegin = {'max-width' : '250px','max-height' : '250px;'};
$('img').css(cssBegin);
var cssObj = {'max-width' : '500px','max-height' : '500px;'};
$("img").click(function(){ $(this).animate(cssObj,'slow'); });
instead of using .css(), try using .animate()
var cssObj = {'max-width' : '500px','max-height' : '500px;'}
$("img").click(function(){
$(this).animate(cssObj,'slow');
});
$(document).ready(function()
{
// define sizes
var cssBegin = { width: 150, height: 150 };
var cssMax = { width: 500, height: 500 };
// init images with the small size
$('img').css(cssBegin);
// init click event on all images
$("img").click(function(){
$(this).animate(cssMax, 'fast');
});
});
Since you are already using CSS class, you can use toggleClass method - Adds the specified class if it is not present, and removes the specified class if it is present, using an optional transition.
$("img").click(function() {
$(this).toggleClass( "cssObj", 1000 );
return false;
});
See the demo here - http://jqueryui.com/demos/toggleClass/

Adding extra CSS with javascript

There's this image on a page I'm coding which should be resized and horizontally and vertically centered depending on some variables. I can't use the CSS sheet for this, as the width and height variables are dynamic. Therefore I want to have javascript add two extra arguments (top and left) to the style of this specific image.
I've tried this (which to me looked quite sensible)
function getStyleSheet() {
for(var i=0; i<document.styleSheets.length; i++) {
var sheet = document.styleSheets[i];
if(sheet.title == 'StyleSheet') {
return sheet;}
}
}
var rule_sheet = getStyleSheet();
function changeText() {
rule_sheet.insertRule(".className { top:" (-(.5*newHeight))+ "; left:" +(-(.5*newWidth))+ ";}");
showRules();
}
I've also tried to add an inline style to the image like so: (in the function where the image was resized)
$(this).style.top= (-(.5*newHeight));
$(this).style.left= (-(.5*newWidth));
Neither solution worked, while to me both methods seemed plausible. What am I missing?
EDIT: I realized I didn't add the suffix 'px' to this, but after doing so, it still doesn't work :(
EDIT II:
After NickFitz hints, I rewrote the last bit of code to this:
$(".className").each(function() {
$(this).css("top", (-(.5*newHeight)), 2);
$(this).css("left", (-(.5*newWidth)), 2);
});
This actually does change the way it looks. Not the way I want it, but at least I'ma tad closer to a solution.
If you're using jQuery, you want the CSS-related methods. $(this) returns a jQuery object, and setting the style property of that isn't going to do anything.
Try this:
$(this).css( 'top', (-(.5*newHeight))+'px' );
$(this).css( 'left', (-(.5*newWidth))+'px' );
You should try something like (using val on the end of the variables)
$(this).css({top: topval + "px", left : leftval + "px", width : widthval + "px", height : heightval + "px"});
or you could use:
$(this).width(widthval);
Can you just get a wrapped set containing the <img> and then use the .css() command to set the appropriate values for it?
$('#img').css({ 'width' : calculatedWidth + 'px', 'height' : calculatedHeight + 'px' });

Categories