JavaScript - How To Detect Screen Size To Wite Jauery Function

I have a goal in mind, and that is to get the width & height of a <DIV> tag in one document and insert them into another document...all on the same domain. It sounds like a simple task, but in case more detail is needed, let me explain:

I have a page called 'demo.html' which launches a page called 'gallery/archive_iframe.html' via Shadowbox as an iFrame. The problem is that 'gallery/archive_iframe.html' slightly differs in dimension on every browser and screen resolution. I want to have the iFrame's size detected every time it launches so Shadowbox can get solid dimensions to display it without scrollbars.

You can see the current (fixed size) example at:
http://www.mikegermond.com/demo.html
Click on the 'Video Archive' image.

Here is the code I would like to insert the dimensions in to:
Code:

<A HREF="/gallery/archive_iframe.html" rel="shadowbox;width= ??? ;height= ??? " class="imgLink" title="Video Archive"><img src="gallery/videoarchive_thm.jpg" alt="Launch Video Archive (popup window)" width="260" height="162" border="0" /></A>

I am using this javascript code to detect screen size and display an alternate css.

Code:

if (screen.width<1600)
{
 document.write('<link rel="stylesheet" href="<?php echo $path ?>/css/templateadjust.css" type="text/css" />');
}

This works fine in FF and Chrome but doesn't seem to work in IE. Any idea why?

Hi there

I know this picture_viewr js is a fullscreen slide

Would it be possible to set a screen size (700x500 e.g.) and then set a background color or the part that would be outside this window???


Thx a lot
allberto


http://www.alfaaudiovisual.com/pictu...er/ByB/ByB.htm

Im coding an internet browser and when I put it in full screen the web browser part is staying the same size as it was on small screen.


How do I make it so when its on small screen it is the size of the window but when its on big screen its the size of the whole screen?

I am new to Javascripting but am teaching myself and have written this script from my portfolio site in an effort to detect the users screen resolution so that my art is viewed properly. I have ran the code through a debugger and it has comback as "free of errors" but when I run the webpage on my local machine it does nothing, the page displays as if I had written nothing and due to my limited knowledge of Javascript I am at a loss and hoping for someone to say, "look you screwed this part up fix this and it's good to go"... I'm hoping. Thank You all in advance..

Here is the code

Code:

<script language="Javascript">
			function detect(){
                if(screen.width<1280||screen.height<720){
                    alert("This web page is best viewed with a screen resolution of 1280 by 720 or higher.  Your current resolution is "+screen.width+" by "+screen.height+".  If possible please change your resolution.")
            }
            else{
                alert("Whoa, you have a high resolution.  Nice Job!")
            }
        }
</script>

There is a stand-alone, full-screen slide show code published at

http://www.javascriptkit.com/script/...ow/index.shtml

I would like to know how to set the size of the show to less than full-screen, and how to integrate the show with other web content.

QUESTION 1:

Hello. I would like to know if this is possible with Javascript, and if yes, if someone can please provide me with the code or point me in the right direction.

Let me start of by saying that this is for an eBay listing. I know that they accept basic / limited javascript and if what I am asking is possible, I hope that it can work on eBay listings.

I would like to know if it's possible to determine the dimensions of an image with Javascript from an Image url, and to then resize it or not based on the the size of the image.

So, let's say this is the URL: www.adomainname.com/image.jpg

and let's say that image is 1400 px x 1400 px. I would first like the javascript code to detect that size. I also would like the maximum dimension for any side of the image to be 600 px. If both sides of the image are over 600 px, for both sides to be reduced proportionally to 600 px or lower. If any one side of the image is larger than 600 px, the image is to be resized to 600 px or lower. If both sides are under 600 px, the image is to not be reduced. It would also be nice if it can detect whether the image is portion or landscape based on I guess the larger side, because an image at 600 px in height might be too big, but in width might be o.k.

So, in this example (the 1400 px by 1400 px), the image is to be resized to 600 px x 600 px.

For an image that's 300 px x 500 px, it should remain as such.

For an image that's 400 px x 700 px, it should be resized to 400 / (700 / 600) px by 600 px, which is approximately 343 px x 600 px.

I have looked a bit into this and I see things being mentioned about the image being loaded first completely on the screen, or about using server side language like PHP, and so on, but like I said, keep in mind that this is for eBay, and so I am limited.

Note: The part that I am most interested in is in being able to detect the size / dimensions of the image.

QUESTION 2:

On a side note, does anyone know if it's possible to have a Javascript enlarging function for images, in which when one clicks on an image, it is enlarged, but either in a popup window that's smaller than the one behind it, and possibly centered, or by making the background go dark and then bringing up the enlarged image (is the latter done with Javascript; I have seen this effect for a while now and have always wondered.)

Hello all..I am new to this forum and also new to html and js. I started college at the ripe old age of 55 and I have to take this course for my required degree I have a table 5 across with thumbnails inside and a larger cell at the bottom with a picture of me. I need to write a javascript function that will make the big picture change when I click on the thumbnail...there is also a smaller cell at the bottom that would change that text to a description as well,when thumbnail clicked. Ihave no clue where to start. Any help would be much appreciated!! Thanks In advance

<style>
.table th {border-style: solid; border-color: red;background-color: #CCCCFF;
}
</style>
<body>
<table border="1" class="table">
<thead>
<th colspan = "5">Click an Image to Enlarge
</th>
</thead>
<tbody>
<tr>
<td>
<img src = "Thumbnails/ada1838-thumb.JPG" alt =
"ada1838-thumb" >
</td>
<td>
<img src = "Thumbnails/adaplaque-thumb.JPG" alt = "adaplaque-thumb">
</td>
<td>
<img src = "Thumbnails/babbageborn-thumb.JPG" alt = "babbageborn-thumb">
</td>
<td>
<img src = "Thumbnails/aediagram-thumb.JPG" alt =
"aediagram-thumb">
</td>
<td>
<img src = "Thumbnails/babbage1860-thumb.JPG" alt = "babbage1860-thumb">
</td>
</tr>

<tr><td colspan= "5" ><img src= "All_Images/Me@home.JPG" alt = "Me @ Home" width = "800px" height= "800px" align="center">

</td>
</tr>
<thead>
<th colspan = "5">
</th>
</thead>
</table>
</body>
</html>

im totally new to javascript and i would like to know how i can make my internet page detect the resolution of someone's computer and on base of that use different 'html pages' so that the background fits etc.

I have been searching for a way to accomplish a unique task for a while. Here's the situation: We have several users who are in locations where YouTube is blocked for various reasons. On our homepage we would like to embed a YouTube video except for when YouTube is blocked and then embed an alternative video that is hosted off one of our servers. Is there a way to use JavaScript to detect whether or not YouTube is available and then put in the correct video?

Thanks in advance!

hey all

is there a code where I can detect if the browser is IE6 or IE7 and send them to another webpage?

my current design is not compatible with IE6 or 7 and i want to make a new page that's compatible.


thanks!

I really want to learn a way determine whether custom fonts via @font-face got downloaded by the client machine and then set styles differently depending on whether they got the fonts or not.

To start I could run a fonts-inactive.css file to setup the styles to look nice without custom-fonts (this is the base style which should look fine without any JS, flash, custom fonts, etc.).

Then run a JS that will run the font-face-rules.css (which attempts to load the fonts via @font-face css rules) - this way if JS isn't active then no fonts will be loaded and the document will default to its fonts-inactive.css.

If the JS does run then font-face-rules.css will try to send the fonts. So the JS needs to somehow determine whether the fonts worked or not.

If the fonts worked then the JS would run the fonts-active.css which would alter some style rules to make the page look better with the custom fonts (since we know they got the fonts we can tweak the page a little to look better with them).

If the fonts didn't work then the JS needs to not run the fonts-active.css and instead just exit out leaving the document with its original, unaltered rules from fonts-inactive.css. (since we know they didn't get the fonts we leave them with the baseline stylesheet which optimizes the appearance for default fonts).

Sadly I don't know the first thing about Javascript so I am hoping that you guys might be able to help me come up with something that works.

Cheers,
line

I am attempting to make an page on my website where visitors can set my website as their homepage. I am trying to make my website read which browser my visitors are using and then redirects them to the page for the right browser where I can tell them how they can set my website as their homepage.
Basically I need exactly the same thing as THIS. Could you explain to me in plain English how I can realize this.
This is what I know have:

Code:

<table width="759" border="0" align="center" cellpadding="0" cellspacing="0" >
  <tr align="center">
    <td width="378" height="28" align="right">Selecteer jouw browser   </td>
    <td width="16"></td>
    <td width="365" align="left"><form id="browserSelection" name="browserSelection" action="customizeBrowser" method="GET"><select name="browser" size="1" id="browser" onchange="document.browserSelection.submit();"><option value="ff" selected>Firefox</option><option value="ie">Internet Explorer</option><option value="chrome">Chrome</option><option value="opera">Opera</option><option value="safari">Safari</option></select></form></td>
  </tr>
</table>

________________________________________

Please tell me if I make any English mistakes in my posts. I am trying to write as perfectly possible.

Hi once again!

Is it possible to detect was the mouse on the move or not in the moment when button is released ?

Hi,
I am currently detecting for Shockwave within IE by doing the following:
Code:

var isInstalled = false;  
if (window.ActiveXObject) {  
    var control = null;  
    try {  
        control = new ActiveXObject('SWCtl.SWCtl');  
    } catch (e) {  
        return;  
    }  
    if (control) {  
        isInstalled = true;  
    }  
}

This works as expected and if it fails to detect Shockwave I tell the user to install Shockwave.
The problem comes when AcitveX is disabled as it still returns the same message that it's not installed. I would prefer to be able to include an extra step to detect if ActiveX is disabled, in which case I can tell the user to enable it rather than giving them false advice.

My only idea would be to detect for an ActiveX Object that every IE user should have installed.

Any ideas on what that ActiveX Object could be or any ideas on how I could tackle this problem are greatly appreciated.

Thanks