JQuery :: Uniform Dimension For Images Without Losing Ratio
Jan 6, 2012
i am working on a project that will involve displaying a long list of product information. this will include images and description of the product. knowing fully well that users must have uploaded images with different dimensions, i want to display the images such that they will all have same dimensions without having some of them lose aspect ratio. i want it to look like the way facebook displays facepile (your friends), it may only hide a portion of it,
Has anyone got any suggestions for keeping aspect ratio when scaling an image. I want to use it on my 'advert full details' on my website. This page displays an image the user has uploaded to my database, but sometimes I get really hugh images uploaded! When I scale them using % in Dreamweaver I lose the aspect ratio!
displaying images properly maintaining its aspect ratio?
My requirement: ===========
I have a table with single cell (means single row and column). I have to display image inside this cell. But when I do so using the below mentioned statement, the image expands and cover the entire cell area.
Is there a way to create a div or some container in which there will be an image such that the image fills the container but retains its aspect ratio? So if the container is 100px x 100px and an image is 200px x 100px it will be resized to 100px x 50px. Conversely, if the image is 100px x 200px then it resizes to 50px x 100px. An image of 400px x 50px becomes 100px x 12.5px and so forth.
The issue is I have to dynamically build the container pulling images from an image folder. The images can come in all sizes. But I want to make sure they all fit in the same square 'box' without distorting the image.
There is text and a button below the image and I want them to stay in the same 'spot' on the screen without being moved around because the height or width of the image above it grows/shrinks to accommodate a change in either the height or width. These can change but not outside a controlled 'box'.
Maybe there's a way to get the actual size (through Javascript or something) then calculate a percentage to resize the image to?
for example:the callback in jQuery.map( array, callback(elementOfArray, indexInArray) ) and the callback in jQuery.each( collection, callback(indexInArray, valueOfElement) ) Look similar but the parameters are reversed Why not make a uniformstandard
I would like to set the height of certain #div elements on a page based on the height of the user's current window state. It should draw the elements based on the size of the window at onLoad, and also respond to the onResize event.
I am using JQuery to load data into a textarea element on a form. The data has CRLFs in it, and of course the textarea element supports that. However, they seem to get lost in the load.
Code:
var sURL = "AjaxFunctions.php?Act=QuoteComment&CommentID=" + sID; $('#MainEdit').load(sURL);
I've tried replacing the CRLF with <BR> on the backend before returning the data, but that doesn't work. Is this just a limitation of the technology?
I've just set up an accordion using the simple version that comes with JQuery UI.It uses links inside h3s as the headers, and I noticed that links within the content divs had disappeared. The documentation at says - If you have links inside the accordion content and use a-elements as headers, add a class to them and use that as the header, eg. header: 'a.header'.I'm just struggling with the right way to do that. I've tried giving each 'a' a class of 'faq' and using :
In one folder i've put all pics, but they are not all the same size. i've got as many links as pics and clicking on link popUp opens showing that pic. now, i would like to have one function that opens popUp window but in different dimension for different pic....
I have a JSON source (a plain text file) that has some special chars in it and they look correct in the text file. However when I retrieve the file and use $.evalJSON against it the resultant array has things likeinstead.I'm sure I must be missing something obvious
Unexpectedly it's not happening in IE 6/7 :) So looking for form jQuery plugin which can save and deserialize form values on a event. Already using form plugin which saves form values in an Array but it doesn't write back the values, need to write back those values after some manipulation to the individual form. But the case is bit different here; we have been using multiple forms on a single page.
Basically I want to prevent a user from moving to another field if the current one is invalid (non-numeric).I've tried a few things that I though would do the job, I've also tried using the change event with the last line (resetting the focus to the current element) but no dice.
jQuery('.setupprice, .monthlyprice, .quantity','#config_dialog').live('focusout',function(e) { var val = parseFloat(jQuery(this).val());
I want to make a nice floating bar at the bottom of the screen, which hovers about 15px from the bottom. I am doing this to make a site look good in small and big resolutions. The minimum height for the bar to hover is 600px about, if the window is smaller, it is still there so it doesn't go into the content, if the window is bigger, it will follow the resize and be at the bottom still. It is obviously absolutely positioned, and also centered using some javascript (getting the width of the window).The second function is called in the header and positions the bar. The last two document.get things are just for testing so I can see the height in px somewhere. This works fine in IE. If I resize the window, making it shorter, everything goes as planned, and I can see the pixel count dropping in the header where it is displayed. However, in FF it does not work.
The weird thing is this. If I resize by a small amount, less than 10px, it works fine. However, I can not resize by more than 10px! If I do, the window height shown in the top still drops by only 10px.So if my window is 1000px tall, and I close it to say 500px, the value of the height will still be 990px. If I then resize it to any where higher than the 500px, say 550px, the javascript still sees it as making it smaller, since it says the height is 990px, therefore, the window height goes down to 980px. If I shrink the window to 500px and reload everything is fine, if I make it bigger, it works in both browsers. I am thinking that this could be a problem which is like "sampling rate" in music. When in IE I expand or shrink the window I can see the pixel count drop continuously and the bar floating down as I move the window, as if it was "sampled" every 0.05 seconds or something. In FF, shrinking is not working, but if I expand the window the pixel count doesn't change and the bar doesn't change place until I stop resizing (let go of the mouse button), as if it was sampled once, when I stop, so the problem maybe is related?
How can I get the real image dimension with javascript? code...
However this only seems to be working sometimes in Opera . No luck in firefox or chrome (dunno about IE)
Anyways to do it?
I thought of maybe using an Ajax call, but then the imgLink cannot be a relative position, which would be difficult to parse due to some address like http://example.com/directory as i tried to get everything before the last /
I've written some javasript code to resize an image tag. While the page loads the image tag is display: none so a large image wont break the stylesheet before I have a chance to shrink it. onload I call function load1 and you can follow the rest from the code below. This is working in Firefox and Chrome and appears to be doing absolutely nothing in any version of IE.
Javascript after </html> tag: <script type="text/Javascript"> function load1() { imageLoaded(); document.getElementById("confImage").style.display = "block"; } function imageLoaded() { var iW = document.getElementById("confImage").width; var iH = document.getElementById("confImage").height; changeImageSize(iW, iH); } function changeImageSize(iW, iH) { if (iW > 460 || iH > 460) { reset dimension of image to fit in div var multiply = 0; if (460 / iW < 460 / iH) { multiply = myFloor(460 / iW, 3); } else { multiply = myFloor(460 / iH, 3); } document.getElementById("confImage").width = multiply * iW; document.getElementById("confImage").height = multiply * iH; }} function myFloor(n, pos) { n = "" + n; if (n.length < n.indexOf('.') + pos + 1) { return parseInt(n); } else { return n.substr(0, n.indexOf('.') + pos); }} </script>
I am looping through an array of objects and creating an <li> element for each one and appending to a <ul> in the DOM. Works fine.During the looping I am also attached a 'details' object as data for the list element:$(thisListItem).data('details',{<obj>});Later, I am using the selector:$('ul#images_list li')to attach an on click function for each <li> element.In the click handler I am reading the data 'details' object for the <li> element:dataDetails = $.data(lotImage,'details');and, using the jAlerts plugin, I am opening a jPrompt which asks for the user to enter a price.
The jPrompt call includes a callback which receives the entered value as a parameter. The callback uses the value to 'post' the updated value, via $.ajax, to a server side unction.After OK is clicked in the jPrompt popup, in Firebug, I get an error that the dataDetails is undefined and it lists the line number in the click handler where I originally read the data object from the <li> element.I don't really understand why it should care after the click event has fired and the jPrompt callback has been invoked
table stripes are init with ... $("tbody tr:nth-child(even)",$context).addClass("even");
The event function for a click on a <th> loads sorted data ... $('tbody',$context).load("Grid.ajax.php?grid_id="+$grid_id+"&orderby="+this.title);
The striping is lost ... I tried adding the same statement after the load() with no change.
#1 ... What is the best practice for restoring the stripe effect other than doing it on the server.
#2 ... Should I call ".empty()" before an ajax request to protect against garbage left in memory?
#3 ... I also have a row highlighting functions for mouseover/mouseout events. Can I assume the ".live()" event definition should apply to rows added after an ajax request.
I've used the fantastic Cycle plugin on a couple of projects now, and it's worked really well.
I have four elements that use cycle, and I've used the timeout and delay options to have one box after another flip repeatedly.
This works well, so the first slide flips after 1 second, the second after 2 and so on, and then each slide continues to flip in turn.
Unfortunately, when I move to another browser tab or another window, then move back, returning focus to the window with the flip elements, the timing seems to go wrong. Each slide continues flipping, but they're no longer flipping one at a time.
My code runs as follows:
I'd like to see each one continue flipping in turn when I go back to the first tab.
I have just started using Superfish. I am using a reverse color scheme (the background is green font color white) - so when I rollover a main menu item the menu item rolled over has a background of white, font color is green. When I go to a sub menu item the background of the main menu item stays white, but the font also stays white (I want the font to stay green).This is an example of how I want my menu to work:
http:[url]....
(Notice that when you rollover and then fly out, the main menu item rolled over maintains its background and foreground color).This is the part of the superfish.css that I have edited:
I've set up jcarousel and configured it to work how I need it to, apart from one thing; I need the images to keep their width - height ratio when the browser is resized.
I'm using the Flexible carousel configuration and the width of the images changes appropriately when the window is resized, but the height stays the same, I need it to change.
I have a form which is used to calculate residential Floor Area Ratio (FAR). The form is structured into seven parts as follows:
Part A: Maximum FAR and Floor Area:
Part B: Gross Floor Area of the main floors of the main house:
Part C: Gross Floor Area of the basement or cellar:
Part D: Gross Floor Area of the attic:
Part E. Gross Floor Area of all accessory structures except detached garages: (including cabanas, guest houses, caretaker's cottages, pool houses, sheds, barns, or other structures except a detached garage)
Part F. Gross Floor Area of the garage: (not including basement garages)
Part G: Total Floor Area:
The Javascript involved in the calculations is as follows:
[CODE]
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> function checkAllInputFields(){ IsValidEntry(entireForm.A1.value) IsValidEntry(entireForm.A5.value)
[Code]....
I have attached the html file as a .txt file for reference, and I have attached a .txt document including all the values I used for testing.
From Implementation Tips - Google TV Web Developer's Guide - Google Code they give the following js snippet.
Code: function init() { var w = screen.width; var h = screen.height;[code]....
what I manipulate in the js to change the zoom ratio? I don't want my webpage for Chrome TV to zoom as much. I'm a designer and have little js experience.
I'm having a problem on a site where an onload event works in Firefox but not in IE. Actually, the onload event works in IE once - but then if the Ajax onreadystatechange changes, IE chokes and doesn't use the onsubmit event that worked when the page first loaded. Code:
Try entering something that isn't an email address and submitting it. Then try just submitting a blank form. Firefox will do the asynchronous call to a PHP script and return the results - IE will do it the first time, and then not again. Code:
IE works fine if I add a simple 'onsubmit="saveData();"' to the form itself, but I'm trying to keep my semantic, presentation, and behavioural layers separate. Using the DOM seems to be the way to do that, but IE seems to only do an XMLHttpRequest once and then stop listening for the event.
This slideshow works fine except that it keeps the aspect ratio of the original pic image. If original image is a portrate all photos are portrate size, even landscapes. If original is landscape, the same is true. The script works correctly when viewing in MS FrontPage. After FTP uploading problem appears. Code:
