|
JavaScript - Webkit And Mozilla Full-screen Mode
Similar TutorialsHi 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! This is a search box that I can add to my site. However, it stretches to the full width of the screen. Is there any way I can get it to reduce in width to about 25%? Code: <!-- place this javascript fragment in your page where you want the nhs evidence search panel to appear -->
<script type="text/javascript">
var _nhsesp_unique_id='b7130ea1-a037-4c09-85d9-e4341d8ad58b';
var _nhsesp_base_uri=("https:"==document.location.protocol?"https://":"http://")+'www.evidence.nhs.uk';
document.write(unescape("%3Cscript src='"+_nhsesp_base_uri+"/evidence-search-panel-1.1.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<!-- end of evidence search panel script -->
Cheers Daniel. I have an emagazine i want to add to my website, the probelm is when it opens in a browser you have to sroll down the page, to view it all, what i was wondering is, is it possibe to create a link that when somebody selects to view the magazine it forces the browser to openin full screen mode so that it fits niely on the screen without the toolbars and evertything taking up half the page. Thanks 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. Hi: The code below, partly suggested by Old Pedant, will open the radio button PDF file, but it will take up the entire screen. Is it possible to open the checked PDF file in a slightly smaller screen so that the user, when finished with the PDF file, can always be sure that he/she is closing only the PDF file and not the browser? I'm trying to use the showDetails() to do this, but am having two problems: 1) where in the <body> should this function be "called", and 2) how does one get a file name into the first parameter of window.open when the name of the file is not known until the user has checked one of the several choices? Or is it the Foxit and Adobe Readers that govern the screen size of the PDF files, and not Javascript? Thanks for any help and pointing me in the right direction. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Open smaller PDF window.html</title> <script type="text/javascript"> function goToCheckedValue ( rbs ) //courtesy of Old Pedant { var go = null; if (rbs.length == null ) { if (rbs.checked ) go = rbs.value; } else { for (var r = 0; r < rbs.length; ++r ) { if (rbs[r].checked ) go = rbs [r].value; } } if ( go == null ) return; location.href = go; } var detailsWindow; function showDetails() { //leave filename parameter blank detailsWindow = window.open("","", "width=500,height=350"); detailsWindow.focus(); } </script> </head> <body> <form name="myForm"> <fieldset id="pdfchoices"> <input type="radio" name="gmplitword" value="11.pdf" checked="checked" /> Gospel Acclamation <br /> <input type="radio" name="gmplitword" value="15.pdf" /> Gospel Acclamation - Lent <br /> <input type="radio" name="gmplitword" value="16.pdf" /> Gospel Acclamation - Paschal time <br /> <input type="radio" name="gmplitword" value="23.pdf" /> Apostles' Creed (IV) <br /> <br /> <input type="button" value="Open PDF file" onclick="goToCheckedValue(this.form.gmplitword)" /> </fieldset> </form> </body> </html> Dear Experts, I am very new for javascript so I am not even sure it is possible or not. The situation is like this, I have a page, which is actually a photo gallery with a table having 3 rows. First row shows the full screen size pic. Second row displays the Caption of that image and third row shows thumbnail view of six different images and the previous and next button. this is the sample layout: <table> <tr> <td colspan=8> Full size image will be shown in this cell </td> </tr> <tr> <td colspan=8> Caption of the image will be displayed here </td> </tr> <tr> <td>Previous Button</td> <td>Pic1 thumbnail view</td><td>Pic2 thumbnail view</td><td>Pic3 thumbnail view</td> <td>Pic4 thumbnail view</td><td>Pic5 thumbnail view</td><td>Pic6 thumbnail view</td> <td>Next Button</td> </td> </tr> My requirement is whenever the user click on the thumbnail view, which is in the 3rd row, the corresponding full screen size pic should open in 1st row of the table. As my photo gallery should be having more than 6 pics, lets take 20 pics, I want to show only 6 thumbnails in 3rd row at a time. Whenever user press "Next" button the 3rd row having 6 thumbnails should show other 6 thumbnails and previous button should show previous 6 thumbnails. I have a guess that it can be done using arrays, but how????? I have no idea. So please if you have any guesses it will be nice if you can post the entire code here as I will not be in a position to work on the hints given by you. Thanks in advance. Charles Hi all, I hope you can help I have some code which: 1) Opens a URL (e.g. google.com) in a hidden iframe, then 2) Redirects the visitor to a different URL (e.g. yahoo.com) after it has loaded... This works exactly as I need. What I'd like to do is the following: 1) Open a URL (e.g. google.com) in a hidden iframe, then 2) Redirect the visitor to a different URL (e.g. yahoo.com) in a full-screen iframe 3) The address bar of the full-screen iframe should be my domain (obviously!) Here's what I have so far... Hidden iframe -> New URL Code: Code: <html>
<body>
<script type="text/javascript">
var page_body = document.getElementsByTagName('body');
var myframe = document.createElement('iframe');
var id = Math.random();
myframe.setAttribute('id', 'myFrame'+id);
myframe.src = 'http://google.com'; //First open Google in hidden iframe
myframe.setAttribute('frameborder', '0')
myframe.setAttribute('width', '0');
myframe.setAttribute('height', '0');
if (myframe.attachEvent)
{
myframe.attachEvent('onload', function()
{
top.location = 'http://yahoo.com'; //Once loaded redirect to Yahoo -- but the address bar shows yahoo.com -- I want the address bar to display mydomain.com/page.html
});
}
else if (myframe.addEventListener)
{
myframe.addEventListener('load', function()
{
top.location = ('http://yahoo.com');
}, false);
}
page_body[0].appendChild(myframe);
</script>
</body>
</html>
I have an example of some code which displays the full screen iframe, but my problem is... ...I can't figure out how to redirect to this after the hidden iframe has loaded Here's an example of how I want the redirect to display -- after the initial hidden iframe has loaded: Code: <html>
<head>
<script type="text/javascript">
function sendParams() {
document.body.style.overflow = "hidden";
}
</script>
</head>
<body>
<!--Open Yahoo.com in a full screen iframe, and disable extra scrollbar -->
<iframe height="100%" width="100%" frameBorder="no" onload="sendParams()" src="http://yahoo.com"></iframe>
</body>
</html>
I've been beating my head against the wall today trying to figure this out, and I'm fresh out of ideas. If you can help, you'll have some serious gratitude and good karma thrown your way! Best wishes, and thanks in advance, Paul So I've been making a game using html canvas. Here is a link to the game. (Move around with wasd, rotate turret with left and right arrows) http://db.tt/ei3LlR The problem is that the shadow flickers when it is rotated. This does not happen in firefox. The shadow is not an image, but another canvas element, generated dynamically from the image of the tank. So the problem seems to be with webkit drawing rotated canvas elements inside another. Could this possibly be the reason behind this, or is it more likely to be a problem on my end? In the development of our website, we are experiencing issues with a few images when the browser is not at 100% zoom (shake, odd spacing, irregular) on webkit browsers. These images are animated using jquery. We have heard this could be due to the functionalities of webkit browsers. I was curious if anyone else has experienced a similar problem, and if so, identified any work around solutions.
Hi I want to create a javascript form validation but i cant with the following code. What is wrong with the code? How to create a form validation without changing the following code- Code: <html>
<head><title>Javascript Validation</title>
<style>
.lf{
position:relative;
left: 30px;
float right;
}
</style>
<script>
function validate()
{
var c=document.getElementById("f1").value;
if(c.length<1)
alert(" Name Field can't be blank");
if(c.length<=5)
alert("Enter a valid name");
var a=parseInt(document.getElementById("f6").value);alert(a);
var b=document.getElementById("f7").value;alert(b);
var d=document.getElementById("f8").value;alert(d);
var lp=0;
if((d%400)==0 && (d%100==0) || (d%4==0))
lp=1;
if((a==31) && ((b=="4") || (b=="6") || (b=="9") || (b=="11")) )
alert("Date out of Range");
if((lp==0) && ((a=="29") || (b=="2") )
alert("Date out of Range");
}
</script>
</head>
<body>
<div style="width:50%;background-color:lightgray;">
<fieldset>
<legend style="color:brown;font-weight:bold;"> SignUp Form</legend>
<table height=300>
<form>
<tr><td> FirstName: <input type="text" name="fn" id="f1" class="lf" size=50 /></td></tr>
<tr><td> Address: <input type="text" name="adr" id="f2" class="lf" size=50 /></td></tr><br/><br/>
<tr><td> Zip:
<input type="text" name="zp" id="f3" class="lf" size=20 /></td></tr><br/><br/>
<tr><td> UserName: <input type="text" name="fn" id="f4" class="lf" size=30 /></td></tr>
<tr><td> Password: <input type="password" name="fn" id="f5" class="lf" size=30 /></td></tr>
<tr><td> DOB: <br /><br />Day: <input type="text" name="dy" id="f6" />
Month: <input type="text" name="m1" id="f7" />
Year: <input type="text" name="m2" id="f8" /></td></tr>
<tr><td> Email:
<input type="text" name="fn" id="f9" size=50 /></td></tr>
<tr><td><center>
<input type="submit" value="submit" onClick="validate()" />
</center></td></tr>
</form>
</table>
</fieldset></div></body>
</html>
I have a stylesheet switcher which works fine in all mainstream browsers until Safari 5.1 and possibly a past version of Chrome. The source of the problem appears to be in WebKit version 534. Other designers have experienced similar problems: https://discussions.apple.com/thread...art=0&tstart=0 This version of WebKit appears not to action: Code: a.disabled = false in the following script. Code: function changeLayout(description){
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++){
if(a.getAttribute("title") == description){a.disabled = false;}
else if(a.getAttribute("title") != "default"){a.disabled = true;}
}
}
(or perhaps it may be the case that it will only allow one active stylesheet, the default?) I have alternative code I can deliver to switch the stylesheet but it is more onerous and I only want to run it if the usual method would fail. Is there a way I could test if the browser is respecting "a.disabled = false" (or "true" for that matter) and then deliver the alternative code if not? OR is there a reliable way to test for WebKit version 534? Thanks in advance. I have read that if i have to use jquery with other libraries then i have to use jquery in no conflict mode. I understand that and and it works. i use Code: $j = jquery.noconflict() so that $ of jquery does not mix with $ of other libraries Now my question is that i use any jquery plugin , and i include that JS file Code: e,g plugin.jquery.js I am not sure whether i am correct or not i think that plugin is coded by using $ sign not the $j and i think it will conflict with other libraries. So it means i have to chnage the plugin code as well or there is no need to change plugin Can someone correct me if i am wrong I have a strange problem. I'm running a shortcut with target: Code: "%PROGRAMFILES%\Internet Explorer\iexplore.exe" -k "C:\myfile.html" It opens the page in kiosk mode. The contents of myfile.html contains an image with an onclick to this function: Code: function loader(){
window.open('myurl.com','','');
}
In Windows 7 32-bit running IE8 the url breaks out of kiosk mode. In Windows XP 64-bit running IE7 the url stays in kiosk mode. I can't think why. Is it the IE difference, the bit difference or the platform difference? Anyone struck this before? I know kiosk mode isn't that well used. Hi everyone, I am a first time poster but have been reading your forum for some time. I think I am following all the rules but be gentle if I missed something! I recently inherited a website at work and have been tasked with sprucing it up. We have a photo directory page for all employees. The page takes a directory of jpegs and creates one long page with all the names and pictures of all the employees. The problem is the page only works in IE compatibility mode. It does not work in IE (non-compatibility), Firefox, or Chrome. When the page is not in IE compatibility mode, all that loads is the top of the page that says "CONFIDENTIAL" but none of the pictures load. There is a "progress bar" that has been coded in (it doesn't really accurately reflect the progress of all the pictures loading... again I didn't make this but am now stuck with it) which doesn't work unless in compatibility mode either. I am sure there must be something simple in the code that has since been deprecated or something like that, but I have been looking at it for days and can't seem to figure out what it is. The page was made a long time ago by someone who doesn't work here anymore, but I can't just get rid of it because according to our click tracks, it is one of the most viewed pages on the site. Code: <SCRIPT LANGUAGE="JavaScript">
var duration=10 // Specify duration of progress bar in seconds
var _progressWidth = 50; // Display width of progress bar.
var _progressBar = "|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||"
var _progressEnd = 5;
var _progressAt = 0;
// Create and display the progress dialog.
// end: The number of steps to completion
function ProgressCreate(end) {
// Initialize state variables
_progressEnd = end;
_progressAt = 0;
// Move layer to center of window to show
if (document.all) { // Internet Explorer
progress.className = 'show';
progress.style.left = (document.body.clientWidth/4) - (progress.offsetWidth/4);
progress.style.top = document.body.scrollTop+(document.body.clientHeight/8) - (progress.offsetHeight/8);
}
ProgressUpdate(); // Initialize bar
}
// Hide the progress layer
function ProgressDestroy() {
// Move off screen to hide
if (document.all) { // Internet Explorer
progress.className = 'hide';
} else if (document.layers) { // Netscape
document.progress.visibility = false;
} else if (document.getElementById) { // Netscape 6+
document.getElementById("progress").className = 'hide';
}
}
// Increment the progress dialog one step
function ProgressStepIt() {
_progressAt++;
if(_progressAt > _progressEnd) _progressAt = _progressAt % _progressEnd;
ProgressUpdate();
}
// Update the progress dialog with the current state
function ProgressUpdate() {
var n = (_progressWidth / _progressEnd) * _progressAt;
if (document.all) { // Internet Explorer
var bar = dialog.bar;
} else if (document.layers) { // Netscape
var bar = document.layers["progress"].document.forms["dialog"].bar;
n = n * 0.55; // characters are larger
} else if (document.getElementById){
var bar=document.getElementById("bar")
}
var temp = _progressBar.substring(0, n);
bar.value = temp;
}
// Demonstrate a use of the progress dialog.
function ProgressBar() {
ProgressCreate(10);
window.setTimeout("Click()", 100);
}
function Click() {
if(_progressAt >= _progressEnd) {
ProgressDestroy();
return;
}
ProgressStepIt();
window.setTimeout("Click()", (duration-1)*1000/10);
}
function CallJS(jsStr) { //v2.0
return eval(jsStr)
}
</script>
<SCRIPT LANGUAGE="JavaScript">
// Create layer for progress dialog
document.write("<span id=\"progress\" class=\"hide\">");
document.write("<FORM name=dialog id=dialog>");
document.write("<TABLE border=1 bgcolor=\"RED\">");
document.write("<TR><TD ALIGN=\"center\">");
document.write("Loading Page ... Please Wait ...<BR>");
document.write("<input type=text name=\"bar\" id=\"bar\" size=\"" + _progressWidth/2 + "\"");
if(document.all||document.getElementById) // Microsoft, NS6
document.write(" bar.style=\"color:navy;\">");
else // Netscape
document.write(">");
document.write("</TD></TR>");
document.write("</TABLE>");
document.write("</FORM>");
document.write("</span>");
ProgressDestroy(); // Hides
</script>
There is more to the page but I have tried to narrow it down to the parts I feel are relevant. Any help would be greatly appreciated. Ben Reply With Quote 01-23-2015, 09:38 PM #2 felgall View Profile View Forum Posts Visit Homepage Master Coder Join Date Sep 2005 Location Sydney, Australia Posts 6,745 Thanks 0 Thanked 666 Times in 655 Posts That is a really antiquated script - basically written for Internet Explorer 4 and Netscape 4. If you want it to work properly with modern browsers then the code needs a significant rewrite. You should start by getting rid of all of the document.all document.layers and document.write references Hi I hope someone can help me or direct me to the right place.... Here is the situation. I am a graphic guy and do some web design but am not really good with javascript. I am using the enlargeit.js program for the photo viewer on www.blackwoodsconcrete.com in the galleries. It has worked wonderfully up till now. I recieved new pictures from the owner to post on his page and they will not open when i view them live. I use dreamweaver cs5 and when i look in preview mode, they work great. They are standard jpg images. see http://www.blackwoodsconcrete.com/example_error.html for an example. The top pic does not work and the rest do... I have resized them, changed file formats, opened them in photoshop and edited them, and basically anything else you could think of, i tried. Even if i open one of the working photos in photoshop and place the new one over it and save it as something completely different it still does not work! everything else does. Does anyone have any clue what to do? Thanks in advance! TK Dear all Gurus, I'm stucked with below logic. Wanna get your advice to find out where I went wrong.Please help.... Below is my Coding done. A dynamic HTML table is generated text boxes in table Rows(Dissable mode) with EDIT & DELETE buttons. When user clicks on Edit button, particular row(Text Box) should be enable to edit the values generated. But Unfortunately in my coding, always the fist row only gets enabled. <script type="text/javascript"> function m(id){ document.getElementById('Record_id').disabled=false; document.getElementById('file_number').disabled=false; return false; } </script> PHP Code: while ($rw = mysql_fetch_array($query1)) {$k = $rw['Record_id'];echo '<tr>';echo'<form name = "t_data">';echo '<td>'.'<input type="text" id="Record_id" name="Record_id"value="'.$rw['Record_id'].'" disabled="true" size ="5"/>'.'</td>';echo '<td>'.'<input type="text" id="file_number" name="file_number" value="'.$rw['file_number'].'" disabled="true" size = "9"/>'.'</td>';echo '</tr>'; echo '<tr>';echo' <td>';echo'<form action="dlt_grid.php" method = "GET">';echo'<input type="submit" value="Delete">';echo'<input type="hidden" name="hf" value="'.$k.'">';echo'</form> ';echo'</td>'; echo' <td>';echo'<input type="submit" id="'.$k.'" value="Edit" onclick = "return m(this.id)">';echo'<input type="hidden" name="hf" value="'.$k.'">';echo'</td>';echo '</tr>';echo'</form>'; This is my first javascript game and it's pretty much built of code I've gathered over time and cleaned up. Here's a manipulated screenshot of what I'm trying to accomplish. You're an ant and you want those goodies on the map as quickly as possible! click this link to view a bigger manipulated screenshot click this link to view the goodies (items) The ant is the playable character you control by using the arrow keys. Every time you load the page, or click "restart game", three new items will spawn randomly on the level and the time will be reset to 0 seconds. An arrow key must be pressed to start the time counter and the game itself. There are only 5 items so far, cheese, apple, banana, candy and donut. The items are supposed to be collected as quickly as possible, when the last item has been collected (by simply running over it) the game will end, save the time and display a hi-score list. Time limit is 30 seconds, the game will display a classic "GAMER OVER" if the limit is overrided. Problems I'm trying to solve: 1: Fullscreen mode (and make the ant actually STAY on the screen) I want the game level to adapt itself to the computer screen. The game dimensions are 1000x600px at the moment but the ant does not respect the level dimensions. Screenshot: http://i41.tinypic.com/kc1j81.jpg. I have a feeling about that somekind of percental code has to be implented but I've never done this before. (Please note that the size of the ant and the items will remain as they are) 2: Spawning three items randomly on the level I drew 5 items and saved them as 100x100 PNG. Three of these items have to spawn at a random location on the fullscreen level. The LAST item collected must trigger the time counter to stop. The time will later be used on the hi-score list where he/she can type her nickname. This information will be uploaded to a database. 3: 30 second time limit Letting the time counter reach 30 seconds will trigger a "GAME OVER". The only way to try again is page refresh or "restart game". Code: <html>
<head>
<style type="text/css">
div#game {
width:1000px;
height:600px;
position:absolute;
background:#c3c3c3;
}
</style>
<script type='text/javascript'>
// movement vars
var xpos = 100;
var ypos = 100;
var xspeed = 1;
var yspeed =1;
var maxSpeed = 5;
// boundary
var minx = 0;
var miny = 0;
var maxx = 1000; // characters movement field, width
var maxy =600; // characters movement field, height
// controller vars
var upPressed = 0;
var downPressed = 0;
var leftPressed = 0;
var rightPressed = 0;
function slowDownX()
{
if (xspeed > 0)
xspeed = xspeed - 1;
if (xspeed < 0)
xspeed = xspeed + 1;
}
function slowDownY()
{
if (yspeed > 0)
yspeed = yspeed - 1;
if (yspeed < 0)
yspeed = yspeed + 1;
}
function gameLoop()
{
// change position based on speed
xpos = Math.min(Math.max(xpos + xspeed,minx),maxx);
ypos = Math.min(Math.max(ypos + yspeed,miny),maxy);
// or, without boundaries:
// xpos = xpos + xspeed;
// ypos = ypos + yspeed;
// change actual position
document.getElementById('character').style.left = xpos + "px";
document.getElementById('character').style.top = ypos + "px";
// change speed based on keyboard events
if (upPressed == 1)
yspeed = Math.max(yspeed - 1,-1*maxSpeed);
if (downPressed == 1)
yspeed = Math.min(yspeed + 1,1*maxSpeed)
if (rightPressed == 1)
xspeed = Math.min(xspeed + 1,1*maxSpeed);
if (leftPressed == 1)
xspeed = Math.max(xspeed - 1,-1*maxSpeed);
// deceleration
if (upPressed == 0 && downPressed == 0)
slowDownY();
if (leftPressed == 0 && rightPressed == 0)
slowDownX();
// loop
setTimeout("gameLoop()",10);
}
function keyDown(e)
{
var code = e.keyCode ? e.keyCode : e.which;
if (code == 38)
upPressed = 1;
if (code == 40)
downPressed = 1;
if (code == 37)
leftPressed = 1;
if (code == 39)
rightPressed = 1;
}
function keyUp(e)
{
var code = e.keyCode ? e.keyCode : e.which;
if (code == 38)
upPressed = 0;
if (code == 40)
downPressed = 0;
if (code == 37)
leftPressed = 0;
if (code == 39)
rightPressed = 0;
}
</script>
</head>
<body onload="gameLoop()" onkeydown="keyDown(event)" onkeyup="keyUp(event)" bgcolor='gray'>
<!-- level -->
<div id="game"></div>
<!-- ant character -->
<img id='character' src='images/ant.png' style='position:absolute;left:500px;top:500px;height:125px;width:200px;'/>
</body>
</html>
I have following JavaScript code, aim to open full window. It works fine except Firefox in one of my computers, in which the width is not full. Could someone help me to sort out? Quote: ; function openFullWin(urlPara) <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --> <!-- This is to open a full size normal browser window with focus. --> <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --> { ; var newUrl = ('http'==urlPara.substr(0, 4)) ? urlPara : ('http://' + urlPara) ; var windowFeatures = 'copyhistory=yes,directories=yes,location=yes,menubar=yes,modal=no,resizable=yes,scrollbars=yes,stat us=yes,toolbar=yes,width=' + screen.availWidth + ',height=' + screen.availHeight + ',left=0,top=0' ; var winNew = window.open(newUrl, '', windowFeatures) ; this.blur() ; winNew.focus() } Hey guys i'm making a clothing website and i was just wondering.. if i have a bunch of thumbnail sized images on the page atm, how would i go about so if people put their mouse over the thumbnail, it would load the full sized T-shirt? I obviously have the images on my computer and host for the Thumbnails and the Real-image sized shirts. Thanks xx |
|||||||