I cannot get the dimensions of my swf to animate for whatever reason. This works:
function resizeSwf(contentHeight){
document.getElementById('swfplayer').height = contentHeight + 20;
}
But this does not:
function resizeSwf(contentHeight){
$("#swfplayer").animate({
height:contentHeight + 20
},400);
}
I am using jquery-1.4.3.min.js and I have verified it is at the correct path.
I cant get the scrollbar to animate to 500px, onload.
Here is a link to my page...[url]
<script type="text/javascript">
I have a toggle animation which puts the area I want to show to the user in view, ones that animation has played I want to animate several other objects on the page. I have the code to animate one object by using the callback function in animate. But is it possible to animate several objects in the callback function?. this is the code I have so far
$(document).ready(function(){
$(".navigaat").toggle(function(){
$(".mover").animate({left: '0px' }, 'slow',"", function() { $(".blok").animate( { fontSize:"160px" } , 1000 )});
[code]....
I use the wonderful .animate() method to create a "parallax website". It's still in developpement, but you can see the result : www.ohnewgarden.fr My problem : When you are at the very right, the animate effect reset my left property before animating. Which is weird is that this "reset" is applied only to two layers, without any sense. I'm going crazy !
So if someone could help me, it will be very nice ! It's probably my code which is wrong, but I can't see the mistake.
[Code]...
I said for my defense, I have tried to remove .stop(), tried to change parameters of .stop(), tried to reset (like there) the left property with a .css() method, and I have also tried to animate with "+=" (like there), but nothing works. If you follow to the link I gave, you could see very easily by clicking on "Contact" and after animation by clicking on "Accueil".
So I'm working in a project where I need to get the dimensions of an image. If I use .height() of the image I get 0 returned, but if use .height() on its surrounding div I get the image's height returned.I need the height and width of the actual image, what should I do?
View 8 Replies View RelatedI have a photo gallery built with XML and PHP (pulling images from a client's Myspace albums).The gallery works fine, displays thumbnails and captions, paginates properly, etc.The whole thing is loaded by AJAX into a div, which complicates things a bit, but it works.When a visitor clicks a thumbnail, the full-sized image displays in a div overlay on top of the gallery div.The overlay is hidden until a thumbnail is clicked, when it is toggled to "visibility:visible". When the overlay "close" link is clicked, the overlay is hidden again.That also works. Some of the images are too large to display properly inside the div without throwing off the layout, so I had to set a max height and width.I can't just use CSS to set the dimensions or it'll size EVERY image to those dims, and the photos are all different sizes...some wider, some longer.So I used javascript to check the image size when the thumbnail is clicked.
All of that worked.(Although strangely, if I try to toggle the visibility as part of the function rather than putting it into the link, it doesn't work!)The problem is that once the dimensions of "img1" are set, they STAY that size even when the next thumbnail is clicked.So if the first image is 800px tall, the script crops it to 640px...then the next image may only be 400px pix tall but it displays as 640px high, making it distorted.I tried to add a "resetImgSize" function to the "close" link in the overlay, setting the img1 dimensions back to 2px x 2px when the overlay is closed, but the same thing happens...Once the img1 dimensions are set to 2x2px, they stay that way even when a new thumbnail is clicked.
I'm developing an image slider. I'd like to be able to trigger functions when the mouse leaves an area, sort of like
$('#someDiv').mouseout or $('#someDiv').mouseleave
except instead of passing the div to the function I have a dimension I'd like to pass to it.
I have box like so[code]...
I have calculated the dimensions from the left of the box to 25% of the width of the box to the right (or 100px from the left of the box) and also calculated the height of the box and top offset. I want to be able to say if the mouse leaves those dimensions, run a function.
Can I pass the dimensions and use mouseout or mouseleave? is this possible without using an HTML element?
I am trying to load a jquery chart (Flot) inside the second tab of jQuery tabs. It works fine on the opening tab, but if i bury the chart in any tab, it breaks and throws the js error "Invalid dimensions for plot..."I looked around and the problem might be that because the second tab is hidden at page load, it is breaking something... I dug up a possible jquery fix/plugin called frameReady, which allows for you to load iframes, but I am not sure how to apply it.
[URL]
how I can enable the second tab to show the chart?
I have a div that has a negative top margin and a negative right margin. The right margin is because I want to have the div slide onto the page from the right. The top margin is because without it my page height is the height of the visible elements plus the height of the off-screen div.On a button click, I move the div down and then animate it onto the screen from the right. On button click again, I animate the div to the right, off the screen, and then move it up. I also toggle its width & padding so it will appear to grow/shrink as it moves on/off screen. At least that's what I am trying to do. The animation onto the screen looks good, but going off the screen, it appears to happen intantaneously, instead of animatedDoes anyone know how I can fix this?
$(".addPanels").live("click", function(){//now and in the future, show the add panels menu
var thisAddPanelsMenu = $(this).parent().prev(".addPanelsMenu");//get the addPanelsMenu
if(thisAddPanelsMenu.length) {//if the addPanelsMenu exists
[code]....
I want to have an image inside a div section, like a background image. that
adjust its size to the dimensions of div container:
<body
<div class="logo" id "logot">
<img src="logo.png" id="imagelogo">
</div>
a script function retreives the div section:
oLogo = document.getElementById("logot")
but oLogo.clientWidth gets the logo.png's width instead of the div area.
I have no problems with a similar function in mozilla browser,
any idea for IE?
I have a div which wraps a table. Initially, the div's display attribute is "none", basically I need to find the height of the table in the div, and use that information to render the div to the user. The div is rendered only on the users request.
View 1 Replies View RelatedMy site's encased in a pop-up, and since I don't know JavaScript, well, at all, I got some script from one of the many JS sites out there. I'm having an issue with it, though. It seems that different browsers are rendering its size differently, which is a bit of a hassle. For instance, it's a few pixels too tall in Firefox, but in Safari its a few pixels too wide and too tall. So, uh, what's wrong with it?
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=550,height=450,left = 362,top = 159');");
}
(...)
<a href="javascript:popUp('dLog.html')">Development Log</a>
Looks messy to me, so if anyone wants to completely fix it up...
Is there any way to determine the pixel height and width of an originalimage?
Specifically, If I have <IMG id=myImg src="pic.jpg" height=200 width=300> can I figure out what the original size of pic.jpg is (had I not placed the height and width attributes on the image, whether in the original tag or later via javascript)?
I'd like to know where I can find some informations on how to retrive
element dimensions in a cross browser whay. Until now I used
offsetWidth and offsetHeight, but I know their are not standard and
they have a different behaviour on different browsers. I need a way
that includes also margins, padding and eventually border size. I know
I have to deal with doctypes, but my javascript knowledge is not so
advanced.
The position and visibility of the image element is dynamically updated.The following code displays the correct dimensions in Firefox 3.0.10 and Chrome 1.0.154.65, but displays "0,0" in IE8.
View 1 Replies View RelatedI would like to force the initial location of a window to the (0,0) coordinate and give it a specific width and height when it loads.
I use the following:
Code:
function initPage() {
window.moveTo(0, 0);
window.resizeTo(400, 400);
}
I call this function at the onload event of the page body.
I get an error saying: "Access is denied"
what is the problem with the code? what could be causing this?
I am rotating images at one location of my web site. My problem is if I set the width and height of the new image before I show the new image, the old image is stretched first to the new image dimensions, and if I show the new image before setting its dimensions, the new image is stretched first to the old image dimension before it is adjusted to its own dimension. I would like to load a new image with its own dimension at the same time. How can I do this?
View 5 Replies View Relatedmy website[url]... has a pop-up video player but on certain videos (speeches for example) the video is of slightly different dimensions. I can not re-encode the video so I was wondering if I could easily edit a file in notepad to change the dimensions of the player in order to enable the user to be able to see all of the player controls. In the flash folder I have .swf and .flv files. Is there another file that represents the player dimensions/controls elsewhere?In addition to this, if a video is playing and I click off of the video player (onto the greyed out background) then the video player stops. Does anyone know how to stop this happening?
View 3 Replies View RelatedI'm trying to figure out the dimensions of the users viewable browser screen (how much is actually rendered) i.e my screen is 1680x1050 but when my browsers full screen that's not what is the viewable size, its less.So I tried this:
var height = window.innerHeight;
var width = window.innerwidth;
alert("width: "+height+"width: "+width);
and I get undefined. how I can get the height and width?
I've got the jquery-ui slider working on adjusting the size of my thumbnails, BUT the problem is if the image is portrait, it overflows out of the container�*jquery to the rescue, right? Not quite.Below is the js and basic css that i'm using. Shouldn't this be applying a different class on each img element based on the height/width values? They're all getting the same class.Am I needing to do some sort of loop function for this instead?
Code JavaScript:
$("#thumbnail_size").slider({
range: "min",
min: 125,
[code]....
I'm working on an image gallery and want to popup windows that are the size of the images they're meant to show.
In php I would use getimagesize() and plug the dimensions into a new window but the server doesn't support it so I'm sort of stumped on how to dynamically size the windows appropriately. Any suggestions?
I am trying to resize a modal window so that its dimensions will be minimal (based on its content). For some reason, I am getting a weird result Here is the JavaScript function I am running in the window's onload event:
function resize() {
var height = window.document.body.scrollHeight;
var width = window.document.body.scrollWidth;
var left = screen.availWidth / 2 - width / 2;// center window horizontally
var top = screen.availHeight / 2 - height / 2;// center window vertically
window.dialogLeft = left + "px";
window.dialogTop = top + "px";
window.dialogHeight = height + "px";
window.dialogWidth = width + "px";
}
I believe that I need to do these calculations because only in onload, the browser knows what dimensions it will need for the popup window. I cannot set the dimensions when invoking the window using window.showModalWindow(), because I don't know at that time how much area the browswer will need for the window.
The problem with the calculation I am doing is that sometimes I am getting an extra gray area between the client side right side, and the window's sidebar... I have attached an image to make my point more clear. I think there is a minimal limit on a modal window width and height but I am not sure.
I have some CSS/javascript which takes an image and re-sizes it on a page with a hover-over state which causes it to expand. However, this will only re-size to specific proportions (in this case 1:1).
This is fine in the case of e.g. an 86x86 image but what I want to be able to do is detect if the image has a height greater than it's width, and if so, crop the image accordingly to make it a square.
Is there a way of doing this with javascript?
The following code returns the width and height as: undefined in the alert. I can`t see what i am doing wrong here. I would like the width and height of the chosen image to be displayed in the alert.
<html>
<head>
<script type="text/javascript" language="javascript">
function getImageSize() {
[code]...
I will have two text boxes that will accept numeric values and an image. What I need is if the user change the value of box 1, the value in box 2 will automatically update depending on the pixel dimensions of the image and vice versa.
Basically I need to automatically calculate the pixel ratio of an image and then use that value to multiply by the user inputted size.
how to imitate browser zoom with javascript?I know you are not allowed to control browser's zoom capabilities, but perhaps there's a way to change all content dimensions with javascript?In firefox, when you press ctrl+, the whole page resizes appropriately, even background images.With this imitation JS zoom, background images would not zoom since there is no scale size numer or anything like that in CSS.It would simply be cool to have a script that resizes everything on the page. That way, you can design highdefinition content that fits a 1280 * 960 browser frame, but can zoom out for smaller resolutions (1024 or 800).
View 4 Replies View Related