I am implementing a zoom in feature, but actually tricking the user as a full screen image is simply being stretched.
I plan to apply it to several pages, and don't really fancy working out the pixels for each.
I believe that if you simply put width: 150% height 150% it will change the image size relative to the browser. I don't want that, I want it relative to the original image size. Could I do sort of height*1.5 or something? How would I write that if so?
I'm trying to size an image to fit the browser window. It will be the only thing in the frame, so it doesn't matter if it's the background or not. I've found quite a few ways to have the image automatically resize itself where it either gets cropped off or changes ratio to stretch, but I've not found anything where it'll keep the full image and ratio and just have bars top and bottom or sides.
I have a photo gallery which lists out a bunch of photos. You can click on one which will open the photo in another window for you to view. In this window then, you are able to go to the next image, to the previous one, etc.
Now, I have some images which are portrait style, some are landscape. I want to have the window that the images show in to be adjusted on the fly depending on the orientation of the photo. I.e., if the photo is landscape, I want to display it in a window which is 800x600 in size; if it's portrait, I want to display it in a window which is 600x800.
All the thumbnails have the following code for their href: Code:
I;m trying to implement increase/decrease font size buttons on a site, but nothing is happening. I've set breakpoints and tried changing $('html') to $('body') and although the code runs, no attributes are set. The code I'm using is:
Even if I remove the cookie, the code runs but nothing happens. Am I missing something obvious?
I was playing around with some onmouseover/onmouseout and setting innerHTML to various strings depending on what has been mousedover/out. The DIV for the innerHTML was above the items being onmouseovered/out and because the strings sent were of different lengths, sometimes a one or two line wrap would happen and everything below it would be resized accordingly creating a horrible effect. For reference, what is a good way to approach building pages which are immune to this effect?
I'd like to move a gif gradually, starting at onload, from one location to another on the screen, while gradually making it larger. The moving part seems easy enough to do, using img.style. left=parseInt (img. style. left=1='px'; in a recursive function.But I understand that img.style.width (and img.width) and img.style.height are read-only properties, so I guess I can't use them to change the image's size (?). Is there a way to change the gif's size starting at onload?
I've got a website with font sizes using 'em's. I've made it so that in my 'body' CSS styling, I can change the font size and it changes it right throughout the whole site.
I have hyperlinks to increase and decrease the font size but have no idea how to get the links to change the 'font-size' property in my 'body' definition. As a secondary requirement (but not essential) I also need to remember this value and store in a cookie so the user doesn't need to keep resizing the page on every reload.
I'm reading jQuery in Action for my learning and thought I could start with a simple exercise for my page: I have several divs of the class ".important_new" with headings in there which are links to the articles:
<div class="important_new"> <h1><a href="#">New York Knicks sign Patrick Ewing Jr.</a></h1> <img class="important_new_flag" src="images/body/flags/USA.png" /> <span class="important_new_country">USA</span>
This results in displaying all the headings in an 8px font size except two of them (which don't have more than 40 characters either). The 40+ character headings also get reduced.
I've gone through it lots of times and changed a ton of things, but can get more than that. Can anyone see what my failing/s are?
Ive got a small image of a power button and when pressed the inner section on the button changes to yellow, but when its pressed down Im also trying to get part of my H1 (main header logo title) to change to yellow.
Ive created a span with an id surrounding the letters of the H1 that I want to change, the id being : "power";
<img id="poweron" src="http://www.sitepoint.com/forums/images/power.png" alt="Power on button" onmousedown="this.src='images/poweron.png';" onmouseup="this.src='images/power.png';"/>
I understand Im not really supposed to be using inline JS, and I know Ive got to create a function for the onmousedown event to trigger changing the H1 text, so am I under the right impression that the JS so far written is redundant and will have to be re-written so thats contained within a script placed just before the closing </body> and an external script for invoking the main function ?
I found this slide show [URL]. I got it to work on my website [URL] using Firefox, but when it is viewed in Internet Explorer it will not work. Second question, When the slide show gets to the last image, after the last image all photos disappear and it resets itself changing the format of the webpage. Any way to not have the images disappear while it loops itself or is there a code to have it stop on the last photo and not loop.
I also enable the admin to preview the site in an iframe and change size of for exp. left column. Playing with td sizes do not give me exact pixel sizes, so I would like to make sure that a td is displayed correctly, by resizing the spacer gif.
var LeftColumnSpacerWidth = myForm.leftcolumnspacer_width.value; // comes from the form var leftcolumnspacer = frames['testsite'].document.getElementById('leftcolumnspacer'); leftcolumspacer.style.width = LeftColumnSpacerWidth;
Why would this code not change the sizes of an image dynamically?
I found this code on another website and have been trying to mod the code so each image is the same size. but it will no even compile.So I am a bit fustrated right now. Any help on this topic<!-- Begin
var speed = 5000 var size = 75,100px var Pic = new Array() don't touch this