I'm trying to find a way to get the dimensions of an image without actually rendering it on the page.
I guess I could render it with the css property display:hidden, but I'd rather not do this.
Is there a way to just ask what is the dimension of an image by specifying it's url. e.g. something like
width("http://www.somesite.com/somepic.jpg");
Same thing for the height parameter; for to set in the centre some popup with images what is better? what are the difference?
View 6 Replies View RelatedI have 2 monitors with a different resolution. It is important in yapplicationthat I get the screen size of the monitor wherethe webbrowser is located. When I try to get the screen size (window.screen.height + window.screen.width) only IE gives me always the screen size of the main monitor where my taskbar (windows7) is located, instead of the screen size of the secondary screen where the webbrowser is located. It does work in all other webbrowsers .
I have created a page with an alert on JSbin.com to show you your screen resolution. If you use 2 monitors open the page in one of the monitors. You will notice you will get the screen resolution of the screen where your web browser is located, except in IE (hoera!)
I"m looking for a cross-browser (Firefox 1+, IE 6+, Safari whatever+) to calculate the width of the viewable browser area. Note that this is different than the screen width, which would always stay the same value, even if you started resizing your browser.
View 1 Replies View RelatedIf I want to know the width of the screen that is displaying the page I can use the following JavaScript code:
Code:
// Find out the page width in pixels
if (document.layers) {
width = window.innerWidth;
}
[Code]....
Is there any similar code for determining the width of the printer page?
I'm trying to set my wrapper div width so it fits to screen res. i got it working but it only works when i call it by onclick="SetWidthToResolution()" function and i want it to load with the page.
function SetWidthToResolution()
{
if(screen.width == 2560)[code]............
On my home page, I have a 3-column layout where the left and right margins are fixed width and the middle column is fluid with a Min-Width and Max-Width to account for different screen resolutions and sizes. In my middle column, I would like to place a "slide-show", and the key point is that the slide-show should also have Min-Max capability so it adjusts with my middle column. I found a really nice slide-show script here: [URL]. My problem is that while I know some programming I do not know JavaScript and have no clue of what needs adjusting for my Min-Max effect to work.
Here is a link to my "test page". (It includes one link showing how my home page currently works with text in the middle column. And then there is a second link showing the slide-show that needs to be modified.) [URL]. Apparently the JavaScript file(s) go out and determine how many "slides" there are, then the script divides the total page width by that number of slides, and then it generates the accoding HTML/CSS to display the slide at the proper width. (If I can find that code, it shouldn't be too hard to adjust it so that it adjust to my Min-Width and Max-Width.)
Here is a link of what I currently have for an image-fade slideshow so far. However if I can I'd like html5+css3 to handle the fade effects instead of depending as heavily on jquery and js. Using the browsers own fade rendering will lighten that load.Link to what I have currently:
http://sympa.me/CHRISTOPHER/index.html .Link to some somewhat working examples.
http:[url]....
Im having a bit of an issue with a website im building for a band.The band want a site that is 2500 width so that when the page loads you can either scroll right or left to view the out of screen material...i cant find a way of the page loading centered...it is always loading to the far left and all i can do is scroll right...i have uploaded the site to http:[url].... for you to have a look at so you see what i mean.I origionally posted this thread in the CSS forum but was instructed this would be a Javascript issue.
View 1 Replies View RelatedI want to set the width of a div to be the same width of the image inside the div.The following code works great. But...The images are different widths, so both wrappers are set to the width of the first image. Without having to add an ID to each wrapper or image, can the wrapper width be set to the image width using the name of the image as the unique identifier?
jQuery:
$(document).ready(function(){
var newWidth = $('div.wrapper img').attr('width');
$('div.wrapper').width(newWidth);
});
HTML:
<div class="wrapper">
<p><img src="image1.jpg" width="200" /><br />
Caption</p>
</div>
[code].....
Baseline:
What I have is a string of 5 images that have .hover functions attached to them. so when you hover over a caption DIV pops up over it. But, the whole img/caption div is wrapped in a href tag to that when you click it will go to X URL. So 5 images, wrapped with a URL, and have a hover function to show caption over image. What I need to to is have these 5 Images auto scroll from right to left, 100% width, so it seems like the images are scrolling on the screen then off the screen. But, what I would like is for one of the images (lets say img1.jpg) to start out at the center of the page (50% of the width). Then have a time set so that within (x)milliseconds (lets say 5000) image 2 (img2.jpg) will scroll to 50% of the page and img1.jpg gets push to the left.
So 5 images, wrapped with a URL, hover function to show caption, scroll from right to left, scroll to 50% width for 5 seconds then move on to the next image in the string of 5 pushing the images from right to left. I would like "hot spots" for user control. Hover over the right hot spot and the function speeds up by 50%, so it will take 2500milliseconds to perform the scrolling function. I would like to have hover right to scroll right 50% faster, hover left to scroll 50% faster and when you are hovering over the image pausing the function. Also, I would like to have it "endless" so if the user keeps scrolling one direction it will just have a loop of the 5 images.
So in the end:
5 images-
Wrapped with a URL
Hover to show caption DIV
Scroll on a timer-
Start with img1.jpg at 50% page width (with endless loop of images img5.jpg would be on the left of it, img2.jpg would be on the right if it)
Have a function that auto scrolls to the next image in line after (x)milliseconds
Endless loop of the images
User control of the scroll time using hot spots
Left/right 50% faster (2500 milliseconds)
Hover on center image pause auto scroll function; hover off resumes the auto scroll
This is what I have so far, but I really think it is in the wrong direction: [URL]. I'm not really looking for a "scroll" pugin. I'm really trying to do is display this image at (x) time at (x) location then move on to the next image and perform the same task. What really interested me in Thomas's plugin is the hot spots, but I bet there is a simpler way. Really if you take the hover function out of the equation all I want is the "right"/"left" button is perform the task (x) times faster, then with the "center" button just pause the timed function.
All I can find is about style:float which is not what I want. I would like to animate an image randomly around the screen. So, it could slowly float across the screen, and would randomly choose its motion.
View 5 Replies View RelatedI have an image that I set to have a width of 100%. I want its height to be no greater than the visible height of the browser web-page area. This could distort the image, but thats OK. To makes things difficult, the image is in a div, and I want the div to be higher than the visible area. So I can't just set the div to height of 100%, and then within that set the image to a height of 100%. I know there is a javascript way of getting the height of the entire screen (screen.height) but that includes the extra areas of the browser such as toolbars etc. I know there is a 'offsetHeight' attribute, but I think I would have to use that on the BODY tag, and the BODY of the page could be several screens in height. So is there a solution to this? If there isn't then can I detect the aspect ratio of the screen?
View 3 Replies View RelatedI'm just starting my first jQuery project (tutorial from this months Web Designer) and I've got a background image that I want to spread across the entire background, regardless of browser size. It's big, so I originally had an onload function. This works fine in Mozilla and Safari but not in IE.
My question is, can jQuery set a width and height of 100% and have it work in IE?[code]...
I'm trying to learn a bit more Javascript/jQuery and I want to write a bit of code to adjust 'background-position' based on the width of the 'background-image'. So my short question is, How can I find the width of a background image using Javascript/jQuery? For those who are interested in what I'm doing (or trying): I have a list where each item has a background image along with some text. I want the images to all centrally-align along a vertical axis in a space to the left of the text. Problem is, the images are different widths, so I want to use jQuery to find their widths and calculate the appropriate background-position.
[Code]...
I have a strange issue with jQuery while using the following code :
$("#image").append('<img src="'+json.filename+'" id="cropje" alt="None" />');
$('#cropje').load(function() {
alert($(this).width());
}) .error(function(){
alert("FAIL TO LOAD IMAGE");
And the result is : 0 But it looks like the image gets loaded after the alert... How is that possible?
How can I get the width of an image when the page is ready...? I tried the code below, but it always return the value '0'...!
[Code]....
i want to do effect (overlib) like this [URL]
but i want to display image in center of screen not on right bottom corner.
var img_large = new Image();
$(img_large).load(function () {
$(".image_enlarge_container").append(this);
[code]....
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 got this working in chrome and was happy until I got to check out IE8! Enough said about that.The code I have now will work (in both chrome and IE8) if I manually set the height and width of the image but I cannot get them dynamically, for instance if images have different sizes, I've been trying for a while now but cannot get anywhere with it.The code I am currently using (of my own creation) is;
$("#lightbox_image_container").html('<img id="lightbox_image" src="http://www.veritywebdesign.com/gallery/gallery_images/image.jpg" />');
$("#lightbox_image").load(function() {
// image_width = $("#lightbox_image").width();
[code]....
How do I get the height and width dynamically after loading the image?
Is there any way that one could have supersubs functionality applied to drop-down multi-column menus?I assume one would need to calculate the width of each column plus the combined width for the container.
View 1 Replies View RelatedI currently have a website where i share thoughts with my friends (some kind of forum) and within this 'forum' people can post pictures they made but most of the time these pictures exceed the max width of my website so my website gets all streched out!So this is what i want: all images on the page must run thru some sort of function which checks if the image image width exceeds the max_width. if it does then the script must calculate how many pixels the current width exceeds the max_width and get this number so that the script does: current_width = current_width - (max_width - current_width)
View 1 Replies View RelatedI've recently start using Flexigrid (old JQuery grid plugin), and, as you may know, one of the few issue this really good grid plugin got is the lack of liquid layout option. My personal idea to solve the problem is to set the "width" parameter depending on $(window).width. Here is the problem (and here's why i post this question in "General use" and not in "Plugin").
The starting, and working, code is:
$(document).ready(function(){
$("#flex1").flexigrid
(
{
[Code].....
This work fine for me, but I supose it could be done way much elegant... maybe somethin without "IF" that could emulate the "%", like var percentage = $(#div.id).width()*0.XX with the 0.XX picked from an array of percentage, one for each column. Probably I should set up a function... ahhhh, as you may easily see I'm a total beginner with JQuery (and JS in general...)
I would like to be able to change my webpage background image according to the screen resolution the user uses so:
if screen resolution is greater than or equals to 1200*600 then background = mybackground.jpg no-repeat code...
I am an asp.net developer and I wanted to display user popup (kind of) which freezes the screen so that user won't click anything else on the screen. There are some predefined controls in asp.net, but I wanted do this using Javascript.
View 1 Replies View Related