JavaScript - Set Screen Size For Picture_viewer
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 Similar TutorialsI 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 all, I'm trying to detect the screen resolution of the client's computer. I've been using the following example: PHP Code: <HTML> <TITLE>screen resolution</TITLE> <HEAD> </HEAD> <BODY> <?php if(isset($_COOKIE["users_resolution"])) $screen_res = $_COOKIE["users_resolution"]; else //means cookie is not found set it using Javascript { ?> <script language="javascript"> <!-- writeCookie(); function writeCookie() { var today = new Date(); var the_date = new Date("December 31, 2023"); var the_cookie_date = the_date.toGMTString(); var the_cookie = "users_resolution="+ screen.width +"x"+ screen.height; var the_cookie = the_cookie + ";expires=" + the_cookie_date; document.cookie=the_cookie location = 'get_resolution.php'; } //--> </script> <?php } ?> <?php echo "Your screen resolution is set at ". $screen_res; ?> </BODY> </HTML> This all works fine except it doesn't factor in if the user changes their screen resolution for any reason. In my own experience I often change resolutions depending on what I'm doing. I posted the question in there PHP forum http://www.codingforums.com/showthread.php?t=192440 but it looks like I'm needing a pure JS solution. Fou-Lu kindly offered their approach: Quote: Originally Posted by Fou-Lu As for detecting changes, only javascript can do that. Instead of using PHP to check that, use pure javascript and alter you're function to check if its cookies are not existant OR the sizes have changed compared to the cookie, update them. And as mentioned, they will still only take effect after the next page load. Could someone help me with this? I want the end result to be something like http://www.screenresolution.org/ in that if you change your resolution then refresh the page, the screen resolution is updated. I hope I've explained this clearly? Let me know if you need any more information. The next challenge is then getting my PHP functions to work in the following manner: PHP Code: if ($screen_width > 1024){ function('1280'); else { function('1024'); } 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> Hi All, I am using jFlow slider for my website and in the head there is that function <script type="text/javascript"> $(document).ready(function(){ $("#myController").jFlow({ slides: "#slides", controller: ".jFlowControl", // must be class, use . sign slideWrapper : "#jFlowSlide", // must be id, use # sign selectedWrapper: "jFlowSelected", // just pure text, no sign auto: true, //auto change slide, default true width: "706px", height: "420px", duration: 500, prev: ".jFlowPrev", // must be class, use . sign next: ".jFlowNext" // must be class, use . sign }); }); </script> What i want to do is detect the browser window (max width 1024 ) and change the width and height attribute of this function...something like this : <SCRIPT language="JavaScript"> <!-- if ((screen.width<=1024) && (screen.height<=768)) { $(document).ready(function(){ $("#myController").jFlow({ slides: "#slides", controller: ".jFlowControl", // must be class, use . sign slideWrapper : "#jFlowSlide", // must be id, use # sign selectedWrapper: "jFlowSelected", // just pure text, no sign auto: true, //auto change slide, default true width: "706px", height: "420px", duration: 500, prev: ".jFlowPrev", // must be class, use . sign next: ".jFlowNext" // must be class, use . sign }); }); } else { $(document).ready(function(){ $("#myController").jFlow({ slides: "#slides", controller: ".jFlowControl", // must be class, use . sign slideWrapper : "#jFlowSlide", // must be id, use # sign selectedWrapper: "jFlowSelected", // just pure text, no sign auto: true, //auto change slide, default true width: "706px", height: "420px", duration: 500, prev: ".jFlowPrev", // must be class, use . sign next: ".jFlowNext" // must be class, use . sign }); }); } //--> </SCRIPT> But can't get this to work...any help please?? //Sam 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. I have an iframe that is a specific height and width. I want to detect whenever the the iframe is no longer exactly the height i set it to. If a user has CSS turned off for example the iframe will be in default height and width. I want to detect that. This is how you'd normally do it but this only returns the original size (try with 'no style' in Firefox): Code: function getSize() { alert('height is now '+document.getElementById("Iframemain").height) alert('height is now '+document.getElementById("Iframemain").width) } Is it possible? I want to have a screen (50% transparent white) pop up over an image on rollover with a button that, when pushed, will swap the image with a different one. Anyone know the easiest way to do this. The image is in a scrolling bunch of images similar to this: http://kellyperso.com
All- I have a page coded that pulls files from a directory using PHP then sets them up using a Flash type player to stream the video. My problem is that I have to resize the video window for each computer I play it on. They all have different resolutions. I was able to use: Code: <script type="text/javascript" src="/jwplayer/swfobject.js"></script> <script type="text/javascript"> var x = (+screen.width); var y = (+screen.height); if (x == '1920' & y == '1080') { var xn = 1440; var yn = 900; document.write(xn); document.write(yn); } if (x == '1024' & y == '600') { var xn = 900; var yn = 400; document.write(xn); document.write(yn); } swfobject.registerObject("player","9.0.98","/jwplayer/expressInstall.swf"); </script> To pull out the current Resolution of the user and pass to a variable the resolution I want the video to be. Here is where the video code is Code: <object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="900" height="400"> <param name="movie" value="/jwplayer/player.swf" /> <param name="allowfullscreen" value="true" /> <param name="allowscriptaccess" value="always" /> <? echo "<param name='flashvars' value='file=../Movies$full_dir.mp4 =../Movies$full_dir.jpg' />"; ?> <object type="application/x-shockwave-flash" data="/jwplayer/player.swf" width="900" height="400"> <param name="movie" value="/jwplayer/player.swf" /> <param name="allowfullscreen" value="true" /> <param name="allowscriptaccess" value="always" /> <? echo "<param name='flashvars' value='file=../Movies$full_dir.mp4&image=/Movies$full_dir.jpg' />"; ?> <p><a href="http://get.adobe.com/flashplayer">Get Flash</a> to see this player.</p> </object> </object> In the video part, where it says Height and Width, I just need to have it take the 2 variables i created depending on the resolution used. Variables xn or yn. Any ideas? Please Please help! been stumped on this all afternoon!! Thanks Defyer! I use a program that produce a graphic (imagine a sinusoid, more or less). There is no opportunity to obtain from the program an output of the coordinates of the points of this curve. I desperately tried a way to achieve this, for example using a program that transform a normal raster image in a vector, and after read the vector, but all this is not precise nor accurate. I wonder if there is a way to obtain this result. Bye Hi I have the code below which geocodes a postcode and returns a lat a long value. Its standard code from Google maps. I just want to print these values to a screen. I tried document.write(value) but this produces nothing. Any help would be greatly appreciated. Code: <script type="text/javascript"> var localSearch = new GlocalSearch(); function usePointFromPostcode(postcode) { localSearch.setSearchCompleteCallback(null, function() { if (localSearch.results[0]) { var resultLat = localSearch.results[0].lat; var resultLng = localSearch.results[0].lng; } document.write(resultLat+resultLng); //alert("Latitude: " + resultLat + "\nLongitude: " + resultLng + " q"); }); localSearch.execute(postcode + ", UK"); } </script> TIA Stew Hi, I want a link on my website where when you press it, it print screens. somthing like, <a href=printscrn();">Print Screen</a> anyone any ideas? Simon Good day, This program is supposed to have a "box" cover the entire screen and then collapse upon opening the page... I cannot find what is wrong, other than the obvious error that there is no object or it is null, but this is the example the book gave... Anyone care to give me a point in the right direction Thanks, in advance. ao5431 <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Boxed In</title> <link rel="stylesheet" href="js_styles.css" type="text/css" /> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript"> /* <![CDATA[ */ var clipSpeed = 5; var clipRight = 0; var clipLeft = 0; var clipTop = 0; var boxSize; var stopShrinking; var clipBottom = 0; var clipBox; var clipBox = document.getElementById("box").style; function startShrinking() { if(navigator.appName == "Microsoft Internet Explorer") { boxSize = document.documentElement.clientWidth / document.documentElement.clientHeight; clipRight = document.documentElement.clientWidth; clipBox.width = clipRight + "px"; clipBottom = document.documentElement.clientHeight; clipBox.height=clipBottom + "px"; } else { boxToShrink = window.innerWidth/window.innerHeigth; clipRight = window.innerWidth; clipBox.width = clipRight + "px"; clipBottom = window.innerHeight; clipBox.height = clipBottom + "px" } stopShrinkingInterval("shrinkBox()", 100); } function shrinkBox() { if(navigator.appName == "Microsoft Internet Explorer") minBoxSize=document.documentElement.clientWidth/2; else minBoxSize = window.innerWidth/2; if (clipLeft > minBoxSize) { clearInterval(stopShrinking); clipBox.display = "none"; } clipBox.clip = "rect(" + clipTop + "px" + clipRight + "px" + clipBottom + "px" + clipLeft + "px)" clipLeft += boxSize * clipSpeed; clipTop += clipSpeed; clipRight -= boxSize * clipSpeed; clipBottom -= clipSpeed; } /* ]]> */ </script> </head> <body onload="startShrinking()" > <div id="box" style="position:absolute; background-color:blue"></div> </body> </html> </code> Hi guys, I'm completely new here and seeking some help on this js: http://www.javascriptkit.com/script/...ow/index.shtml i'm building my picture website, an example is this one: http://www.lucagodina.com/mello/test.htm do you know how can i have all the thumbnails on the same row, and scrolling? because if i've let's say 100 pictures, the thumbnails will cover the pics itself! Would also be great to have play-next-previous button... i know i'm asking a lot! hope someone can help me out! Ok. My first fish is swimming across the screen perfectly fine. He starts from the left side and goes to the right side. But for the second fish, he is on the right side and he won't swim to the left side. How do I get him to start swimming? Then he will stop after the interval of 80 reaches like the left one and then start over from the left to the right. Here is my code: Code: var fish1Position = 0; var fish2Position = 0; horizontal = new Array(80); var fillPosition = 10; for(var i = 0; i < 80; ++i) { horizontal[i] = fillPosition; fillPosition += 10; } horizontal2 = new Array(80); var fillPosition2 = 10; for(var i2 = 80; i2 > 0; i2--) { horizontal2[i2] = fillPosition2; fillPosition2 = fillPosition2 - 10; alert(fillPosition2); } function fish1Swim() { document.getElementById("fish1").style.left = horizontal[fish1Position] + "px"; ++fish1Position; if (fish1Position == 79) fish1Position = 0; } function fish2Swim() { document.getElementById("fish2").style.right = horizontal2[fish2Position] + "px"; ++fish2Position; if (fish2Position = 79) fish2Position = 0; } function startSwimming() { setInterval("fish1Swim()",100); setInterval("fish2Swim()",100); } Hi friends, I have a dropdown menu,when i select one item from the dropdown menu,i want a checkbox to be created on the screen.How do i achieve this? Thank You Madhusudan Hi all, I'm new to javascript and im trying to teach myself how to use it, however, ive come accross a problem. I'm using this code embeded in a HTML page for rollover images: Code: <script language="JavaScript" type="text/javascript"> <!-- if (document.images) { homebuttonup = new Image(); homebuttonup.src = "./Images/nav/home2.png" ; homebuttondown = new Image() ; homebuttondown.src = "./Images/nav/home2.png" ; newsbuttonup = new Image(); newsbuttonup.src = "./Images/nav/news.png" ; newsbuttondown = new Image() ; newsbuttondown.src = "./Images/nav/news2.png" ; gallerybuttonup = new Image(); gallerybuttonup.src = "./Images/nav/gallery.png" ; gallerybuttondown = new Image() ; gallerybuttondown.src = "./Images/nav/gallery2.png" ; } function buttondown( buttonname ) { if (document.images) { document[ buttonname ].src = eval( buttonname + "down.src" ); } } function buttonup ( buttonname ) { if (document.images) { document[ buttonname ].src = eval( buttonname + "up.src" ); } } // --> </script> <a href="index.html?cmd=welcome" onmouseover="buttondown('homebutton')"onmouseout="buttonup('homebutton')"> <img src="./Images/nav/home2.png" name="homebutton" border="0" /></a> <a href="about.html?cmd=welcome" onmouseover="buttondown('newsbutton')"onmouseout="buttonup('newsbutton')"> <img src="./Images/nav/news.png" name="newsbutton" border="0" /></a> <a href="services.html?cmd=welcome" onmouseover="buttondown('gallerybutton')"onmouseout="buttonup('gallerybutton')"> <img src="./Images/nav/gallery.png" name="gallerybutton" border="0" /></a> This works completly fine in 1280 x 800 but goes mental when you hover over it in 1024 x 768 screen resolution. Can anyone help please, it would be greatly appreciated! Hi Guys, I would like to be able to change my webpage background image according to the screen resolution the user uses so: if screen resolution is greater than or equals to 1200*600 then background = mybackground.jpg no-repeat else background = #000000 THANKS A MILLION! I have been using wz_tooltip and have a big tooltip that needs to be opened at the top of the screen, not by the cursor in order to be read. What do I add to the script to do this? Thanks, Wina I wish to create an applett, which i am working on, Though I want to know if there is any way to: 1) Take screenshots of entire web page 2) Take screenshots of a certian part of the web page selected by the user with a Rectangle tool 3) Take screenshots of a certian part of the web page selected by the user with a FreeForm tool Im not asking for a full code or anything, But I just wish to know in what way could i go about this? |