I have a image (uploaded by user, cant say about the size of that). It will be used as background image for his page.
I just want to scale it to the full size of the screen. Some think like. On load find the screensize using Jquery/javascript and add that style to the background image.
PS:- There is no Y scroll on the page. And I am not concerned about the quality of the image on scaling if image size of too small.
Check out this jQuery plugin https://github.com/iamjpg/jQuery-Ez-Background-Resize
Related
Can you make your canvas resize to the page width using the style in the html of the canvas id?
And then in your js for the canvas just resize listeners based on the size of the canvas at the current time?
I have many of my variables and listeners hardcoded just wondering what is the fastest method of solving this :)
Firstly, a good starting thing would be not to take the entire page width, but a divcontainer. That way if you end up putting your app in a website or anything, your code will adapt to any container. If you want it to be the full page, this container can just be a 100% width/height absolute with no padding/margin.
Please also note that there are two sizes for a canvas :
The HTML size, which is the size you will draw on "programmatically"
The CSS size, which is the size it will be displayed, independently of the other size (and it will resize it, causing potential distortions)
Based on that, you can know an element's screen width using jquery $("#myID").width() or height(), which applies to the canvas too. Based on this you can set whatever size you want in html and/or css :
$("#myCanvas").width = 400; // The size you will draw on
$("#myCanvas").css('width', '800'); // The size it will be displayed (2x scale in X in that case)
Then for resizing you have multiple solutions :
CSS full stretching : You use your canvas with whatever size you'd like to code in, and then resize it in CSS to use the full page width, that is basically putting the css at 100% width / height
CSS stretching with aspect ratio : My prefered solution, which consists of resizing the canvas in CSS, but by keeping the original application's aspect ratio (and putting black borders on the rest of the screen, like in large-screen movies)
Pure canvas resizing : This method won't destroy graphics, but it has the big cost of making you think all your drawing with any size possible. Instead of having a fixed size canvas that is resized by the browser, you will have to multiply all your drawing sizes and positions according to the screen size, which can end up being very boring, and problematic if not thought soon in the development.
As an exemple here is my canvas manager, with CSS aspect ratio resizing. It is not documented and may not suit your need, but it can give you some ideas
I have a site where it has div tags with background colors, and I use relative positioning to move them all together so it looks like an image. I moved them so its exactly on the top left of the page.
How do I create an image out of it, so like if there was a button, when it gets clicked, it creates an image of width 608px and height 105px, and then asks the user if they want to save it or open it or close it (standard download box)?
I would need to get the pixel color starting from index (0,0) right?
Instead of using background images on divs, just draw images onto a canvas. Then take a look at this http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/
I am building a mobile version of a website where the page data loads very quickly, but since the images on the page are large, they come in more slowly over time.
The issue is that as the images come in slowly, they push the content of the page down so the user loses his reading position.
What I want to do is determine the sizes of these images and then leave a correctly sized black placeholder for the image which will fill in with the image as it loads. So that the users reading experience is not jarred while the images open.
I was wondering if its possible to get the dimensions of the images with javascript or html5 before the image loads and then go in with jscript/html5 and set width and height attributes to the tags on the initial page load-- before the images fully have loaded.
Thanks!
*EDIT: I cannot use the width and height HTML attributes off the bat, since the images are from all different sources with no pre-known width and heights (its mostly random user posted images)
This is what the height and width attributes are for on the <img /> element. Set those to the height/ width of the image, and that space will be reserved by the renderer.
Otherwise you're in a chicken-and-egg situation; you can't magically find the size of the image; you need to download it first!
The client wants to have a simple slideshow with a little twist: he wants the menu to be on top of the image being changed.
what would be the way to achieve this using css and javascript?
Don't use a background image, just put the menu in a division and position it absolutely on the top of the image somewhere. You can't resize background images and if the images are bigger than the client's visible area they will be cut off.
As you normally do. The order of the image and menu is important. If the menu is after the image then you are ok. If you can't/won't change the order then you'll have to use the css z-index property.
im using a image preview that allows me to add css styles to the previews that pops up.
now, some images are larger than the screen so you will just see a portion of them, while other images are very small so you don't have to resize them.
is there a way to only resize the larger images and not touching the smaller ones, eg. only resize images with width or height larger than 400 px?
any other approaches to make the larger ones fit into the screen without affecting the smaller ones would be appreciated cause if i just use width=400px and height=400px all images will be at that size and the proportion will be wrong. and for smaller images you will se very large pixels.
thanks in advance
Seam carving javascript implementation is what I call smart resizing of images :)
Anyway, in Javascript, you can implement your logic depending on the width and height properties of the Image object.
Also have a look at this page, the author uses jQuery to resize images larger than specified dimensions.