I 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 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.
Is there a way to use JavaScript to push a page element (a DIV block,
for example) down the screen, so it sits at the bottom of the browser
window. Code:
Note how the footer is very high up. Is there a way to push the DIV
that the footer is in to the bottom of the browser window?
In pseudocode:
if (where element Y coordinate is above <browser window bottom Y
coordinate>) {
move footer to browser window bottom Y coordinate
}
else {
leave footer where it is , as that means that the content of the page
already pushed it down
}
I'm trying to move pictures around on the screen, with a slight delay
between the first picture and second picture (following onmousemove).
When I add the setTimeout function I must be doing it wrong because
the function that calculates the new coordinates for the picture
returns 32 million and change instead of the coordinate. This causes
the picture to not be able to appear on the display, obviously.
Here's the calling code (snipped for readability) that works without
setTimeout:
is there a way to get an element id that contains a particular point (x,y)?
View 1 Replies View RelatedIs there some type of plugin available that can dynamically track and output x,y coordinates of a box I set using .draggable(). I'd like the coordinates to show inside the box as it is being dragged.[URL]...I wrote I simple scripts and I'd like to be able to drag any box I add and show the x,y coordinates inside of each one.
View 1 Replies View RelatedI am well versed in design and PHP programming but when it comes to javascript (and Google's API for their maps) I'm pretty rusty. I don't need someone to provide me with exact answers on this, but just any advice on the best way to achieve ... or if you want to give me the exact code, that's cool too.I am potentially working on a project that would involve using Google Maps as a base and overlaying all of the various trails that can be found in the Minnesota area (snowmobile trails in winter, hiking in summer, etc).
I have been reading up on the API for Google Maps and from what I've read so far, it appears that to create the lines, you need to input coordinates for any accuracy? Is this correct? I see that I could simply overlay a graphic of the trail map on top of the Google map, but we are looking for something more elegant that actually shows the lines on the map versus an image.Would we need to have coordinates for every bend / turn of the trail?
I am doing a project now i going to use ajax to retrieve coordinate from the json in html and pin the coordinate onto a point on the map using javascript but the problem is i am only able to use one point on the map can tell me what to add in ? or how should i change it with? it will be nice if u can change the code from the below and show me how
Quote:
I have a problem with moving group element. I want to move it according to initial coordinate system of parent svg container. But transform:translate(10,20) for example, establishes a new user coordinate system which origin (0,0) is absolute X=10, absolute Y=20. How can I animate(move) group with absolute coordinates without writing additional functions to calculate this coordinates?
View 3 Replies View RelatedI'm currently doing on a project, frankly speaking i'm new in javascript only know the basics. I'm not even sure whether this thread is suppose to be here or under html.. I'm suppose to create some codes that enable a html page to load to the next html page when the mouse move from left to right within a specific time and distance(positive X coordinate) and also the other way round (right to left) once i figured out this. I've got an example online and edited it. Please take a look at my codes.
[Code]...
test01.html is just blank page created to make sure it loads. However i would like to load from test01 to another html page but no matter how i tried to edit the codes, there's errors. I cant possibly copying and pasting the exact codes to every page i want to load to right? And is it possible to sortof increase mouse sentivity such that i can most probably load to the next page in first few tries of moving the mouse on the first page. Is it common that when i launch the html on IE and Firefox somehow after showing the first page for maybe 1 second, it immediately jumped to 2nd page and i have to go back to 1st page to try out.
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.
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.
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 RelatedSo 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 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 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?
I 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.
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]...