|
JavaScript - Controlling Browser Appearance Using Javascript
I am trying to use JavaScript to manipulate the appearance of a web browser.
(1) Initially I need to identify and save the current browser settings (e.g. position, height, width, caption on or off, menubar on or off, border on or off). (2) Then I need to change the appearance of the browser to full screen, no border, no caption, no status bar, no menubar). (3) Finally, I need to return the browser to the initial settings using the settings saved at the beginning. I am a novice at JavaScript and am having a difficult time locating details of the language that permit me to accomplish my objectives. John Chapman jchapman@onlinecbt.com Similar TutorialsHello, I need your help. I have 2 checkboxes. How would I control one from the other? Eg. [ ] Option A [ ] Option B - If Option A was checked first and, I put a checkmark in option B then Uncheck Option A and leave option B checked. - If Option B was checked and, I put a check mark in Option A then uncheck Option B and leave Option A checked. How would that be written in Javascript, I am totally confused. Any help with this is much and foremost greatly appreciated. Cheers, J I have the following code ... Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
body {
background-color:#000;
}
#scenery {
width:964px;
height:482px;
padding:318px 0 0 316px;
margin:auto;
background-image:url('http://www.deshow.net/d/file/travel/2009-10/new-zealand-scenery-738-20.jpg');
}
</style>
</head>
<body>
<div id="scenery">
<img src="http://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/DrawingPin1_Blue.png" alt="">
</div>
</body>
</html>
... in which I would like to use Javascript to control the values in the 'padding'. Code: padding:318px 0 0 316px; May I know how can I use Javascript to control that 'padding' values? Appreciate any help. I am trying to do a custom add to cart to use with paypal and need to utilize javascript to achieve inserting some code or a weight value per the paypal forms' options choice. Here is my dilemma, All of my items have multiple weights, for instance the below example called Aqua Max 100 comes in .5lbs, 1.5lbs., 10lbs., 20lbs., and 50lbs. Paypal allows you to enter weight but it's one weight per item and I would have to create 5 Paypal buttons just for this one item to calculate the different weights per zip code. I need help making javascript insert the following code within the paypal forms' code upon option select before clicking submit? <input type="hidden" name="weight" value=".5"> <input type="hidden" name="weight_unit" value="lbs"> <input type="hidden" name="weight" value="1.5"> <input type="hidden" name="weight_unit" value="lbs"> <input type="hidden" name="weight" value="10 <input type="hidden" name="weight_unit" value="lbs"> <input type="hidden" name="weight" value="20 <input type="hidden" name="weight_unit" value="lbs"> <input type="hidden" name="weight" value="50 <input type="hidden" name="weight_unit" value="lbs"> The code I came up with is wrong as I'm getting an error but I was originally trying to make it enter a weight using a hidden fillable number and without any real javascript training, just alot of googling but I think I'm pretty close. Please take a look at the code I've came up with so far and maybe point me in the correct direction: <html> <body> <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_cart"> <input type="hidden" name="business" value="test@test.com"> <input type="hidden" name="currency_code" value="USD"> <input type='hidden'text' name='amt' id='amt' value="0.00"/> <table> <tr> <td> <input type="text" name="on0" value="Aqua Max 100">Aqua Max 100</td></tr> <tr><td> <select name="os0" onChange="getamt()"> <option value="select">Please Select</option> <option value="1/2 lb.">1/2 lb. $3.99 USD</option> <option value="1 - 1/2 lbs">1 - 1/2 lbs $7.59 USD</option> <option value="10 lbs.">10 lbs. $25.80 USD</option> <option value="20 lbs.">20 lbs. $42.75 USD</option> <option value="50 lbs.">50 lbs. $86.20 USD</option> </select></td></tr> </table> <script type="text/javascript"> function getamt() { var sh=0; var choice = document.getElementById("os0").selectedIndex; if (choice == 0) { sh=0; } if (choice == 1) { sh=.5; } if (choice == 2) { sh=1.5; } if (choice == 3) { sh=10; } if (choice == 4) { sh=20 } if (choice == 5) { sh=50.00; } document.getElementById("on0").value=sh; } </script> <input type="image" src="https://images.paypal.com/images/sc-but-03.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" /> <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> </form> </body> </html> Greetings, I am currently using the websites tutorial about browser detection using the navigator. http://www.javascriptkit.com/javatutors/navigator.shtml I am however finding myself unable to detect a pattern in order to learn from. My aim is to use Browser detection to have a CSS file for each browser type, such as Firefox, IE, Opera, Safari and then an overall CSS file if none of the above, to fix numerous flaws. For IE and Firefox using the site's code is all well and good and while I haven't tested it yet I'm wondering how to set up the coding so that it can detect a safari browser. There are lots of slashes and d's and brackets and I do find myself unable to understand their purpose. So if someone can explain how I could do it for Safari I would be very appreciative. Hello, I have a question what is the best way to identify a browser, browser version and OS in javascript. I have try a few scripts but they all fail. This will help me out formating the code for diferent browsers. Thanks Hello! I am trying to find a script that allows you to open multiple browser tabs and then close each of those tabs, either one by one or all at once. Does anyone know how to do this please? Thanks so much for your help. I have code that I've been using for awhile now that will automatically log users off my site after a period of time. It works great using a 32 bit browser but not at all with a 64 bit browser. For the life of me I can't figure this out. <script type='text/javascript'> var secondsRemaining = 30; var mhcTimer; function countDown() { secondsRemaining -= 1; if (secondsRemaining <= 0) { secondsRemaining = 0; window.location='login.aspx'; } } function startAutoLogoff() { if (mhcTimer) { return false; } else { mhcTimer = setInterval('countDown();', 1000); } } startAutoLogoff(); </script> Hi, Im trying to change the position of a div when a button is clicked. The js is: Code: function curPos() {
objDivStrip = document.getElementById('thumbview');
return objDivStrip.style.top;
}
function up(pos) {
//get objects
objImgStrip = document.getElementById('str');
objDivStrip = document.getElementById('thumbview');
//Get End position
var totImg = (objImgStrip.height - 100) / 130;
var endpos = totImg * 130;
if (pos=endpos)
{
return false;
}
else
{
objDivStrip.style.top = pos - 130;
}
}
and the html on the button is Code: <img id="arrow" src="images/arrow_up.jpg" onclick="up(curPos());" /> The code doesnt work but if anyone could point me in the direction to get it to work your help is greatly appreciated. Cheers Sol ok guys, i am not very saavy with javascript and I dont know if this is an easy fix or something difficult, but here is my plan. I would like to have 4 divs with content in each and set each to occupy the same web space through absolute positioning. The .js would be for me to have three divs with a display:none and one to have display:block. and then at a set interval, have the divs switch role so that one that was display none is then block and the others are hidden. I dont want to have a page reload and I dont want to work in flash or anything like that, I just need an example of a script that will alternate through a set array of div ids (i.e. "<<div id="ad1"></div> div id="ad2"></div> <div id="ad3"></div> <div id="ad4"></div>, and change the display attribute every 10 seconds or so. Any help would be greatly appreciated thanks so much Hi, I have a few checkboxes in a form. Some of them work independently, but some make the others go on and off. Specifically the lower ones are controlling the upper ones. Can anyone explain why please? Code: <td> <input type="checkbox" name="weddingitem1" value="Toppers" id="Toppers"/><label for="Toppers" >Toppers<br /> <input type="checkbox" name="weddingitem2" value="Champers" id="Champers"/><label for="Champers" >Champers<br /> </td> I'm trying to use SmoothGallery 2.1 on my website as a featured box. I tried opening the demos provided with the code in all browsers to make sure it was compatible and it showed fine in them all. I copied the javascript onto my site and I'm able to show the gallery. However in Chrome and Internet Explorer it shows fine, but Firefox the images are spread vertically down my site and the javascript gallery box doesn't show. I don't understand why this is an issue because it shows fine opening the demo pages and the javascript code and css is a straight copy from the folder :S Can anyone help me out? Website I'm having the issue on is www.deewon.com -Thanks Dear all, can somebody help me with browser compatibility and this code. Working fine in Opera and Firefox, but do not working in Internet Explorer and Chrome. With one form working fine in every browser, but when I put second form it stops to work in Explorer and Chrome. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<SCRIPT type="text/javascript">
function showDiv(divIndex) { var f=document.forms[0]; var d=f.getElementsByTagName('div');
for(i=0;i<d.length;i++)d[i].style.display='none'
d[divIndex].style.display = 'block';
}
</SCRIPT>
</HEAD>
<BODY>
<form>
<select onchange="showDiv(this.value); ">
<option value="0" selected>option 1</option>
<option value="1">option 2</option>
<option value="2">option 3</option>
</select>
<div style="display:block;"><form action="001.htm" method="get" >
Your state<br>
<select name="statecode" id="statecode">
<option value="">Choose State for option 1...</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
</select>
<input type="submit" name="search" value="Get Quotes" />
</form></div>
<div style="display:none;"><form action="002.htm" method="get" >
Your state<br>
<select name="statecode" id="statecode">
<option value="">Choose State for option 2...</option>
<option value="AK">California</option>
<option value="AL">Colorado</option>
<option value="AR">Connecticut</option>
</select>
<input type="submit" name="search" value="Get Quotes" />
</form></div>
<div style="display:none;"><form action="003.htm" method="get" >
Your state<br>
<select name="statecode" id="statecode">
<option value="">Choose State for option 3...</option>
<option value="AK">Massachusetts</option>
<option value="AL">Maryland</option>
<option value="AR">Maine</option>
</select>
<input type="submit" name="search" value="Get Quotes" />
</form></div>
</form>
</BODY></HTML>
I was wondering if there was any way to determine what browser the remote address is using through JavaScript preferably or any other language and if so how to direct them to another page if they're using a specific browser...
hi everybody; i'm using this code to trigger functions with left and right arrow keys.. but they work even if the arrow keys pressed in input boxes.. is there any way to prevent this code to work when user presses the arrow keys in input boxes? Code: document.onkeydown = function(evt) {
evt = evt || window.event;
switch (evt.keyCode) {
case 37:
geri();
gostergeyaz();
break;
case 39:
ileri();
gostergeyaz();
break;
}
};
I am in the process of developing a form for the company intranet and i've recently added in code to capture the enter key event to prevent the page from automatically submitting. Along with this, i added code to move the focus to the next element in the tab index. When used in IE, the code works perfectly, but when i use it in firefox or chrome the focus jumps to the same box every time. I don't know what i'm doing wrong am i'm hoping someone can help me figure this out. You can test the page at http://implicitarts.com/fandfwork/Lo...l/default.aspx To start, go to the box for duty amount or freight charges and press enter The following code is what I used to handle this event. Code: function handleKeyPress2(e,control)
{
var evt = e ? e : window.event;
var bt = control.id;
if (bt)
{
if (evt.keyCode == 13)
{
//bt.click();
jumptoNext(control, e);
stopEvent(e);
return false;
}
}
}
function jumptoNext(field, event)
{
for (i = 0; i < field.form.elements.length; i++)
if (field.form.elements[i].tabIndex == field.tabIndex + 1)
{
field.form.elements[i].focus();
if (field.form.elements[i].type == "text") field.form.elements[i].select();
break;
}
}
function stopEvent(e)
{
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
Hi, I'm doing something wrong, I want my script to execute when the browser window opens, can someone please help me? Code: <p><iframe id="myFrame" style="display: none;" width="500" height="300"></iframe>
<script type="text/javascript">// <![CDATA[
window.onload=openpdf();
type="text/javascript">// <![CDATA[
function openPdf()
{
var omyFrame = document.getElementById("myFrame");
omyFrame.style.display="block";
omyFrame.src = "myFile.pdf";
}
// ]]></script>
Hello All, I'm working on a image slider, which will slide left to right and vice versa on mouser over event. the images are dynamically loaded from the database using ASP script. I use mootools.svn.js for the sliding implementation. and Ajax to pass the id of the image to another page as a query string. this is implemented in a Code: onclick="getValue('<%= id %>')"
event. This works fine in IE8, but when I test in Firefox 3.6 and Chrome the onclick event doesn't work. when I comment the mootools.svn.js, the onclick event get fired. what causes this. is their any solution? now my development has come to a grinding halt because of this. Please help <%@ Import Namespace="System" %> <%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Data.SqlClient"%> <%@ Import Namespace="System.Configuration" %> <%@ Import Namespace="System.Collections" %> <%@ Import Namespace="System.Web" %> <%@ Import Namespace="System.Web.Security" %> <%@ Import Namespace="System.Web.UI" %> <%@ Import Namespace="System.Web.UI.WebControls" %> <%@ Import Namespace="System.Web.UI.WebControls.WebParts" %> <%@ Import Namespace="System.Web.UI.HtmlControls" %> <%@ Import Namespace="System.Text" %> <%@ Page Language="C#" AutoEventWireup="true" CodeFile="slider.aspx.cs" Inherits="slider" %> <!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" > <head runat="server"> <title>Untitled Page</title> <script language="javascript" type="text/javascript"> //GETS THE IMAGE ID FROM function getValue(val) { alert(val); showHint(val); //document.form1.newval1.value=val; } var xmlhttp=null; //xmlhttp variable //Ajax function make_httpRequest(){ if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else if (window.ActiveXObject) { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } else { alert("Your browser does not support XMLHTTP!"); return; } } //Bind the query string as a URL function request_url(url){ url=url+"&sid="+Math.random(); xmlhttp.open("GET",url,false); xmlhttp.send(null); } //BIND THE IMAGE ID TO THE QUERY STRING VARIABLE TO THE url variable function showHint(val) { make_httpRequest(); var url = "Test.aspx?prodid="+ val; request_url(url); } </script> <style type="text/css"> <!-- .slider_con { height: 125px; width: 889px; } .slider_content { height: 125px; width: 889px; float: left; overflow: hidden; position:relative; } .image_con { float: left; height: 125px; width: 23px; } #maiin_container{ width: 889px; height: 125px; overflow: auto; overflow-x:hidden; overflow-y:hidden; float:left; } .main-content { width: 889%; height: 125px; } .section{ margin:0 0 0 0; float:left; } --> </style> <style type="text/css"> <!-- a { font-family: sans-serif; font-size: 15px; color: #666767; } a:link { text-decoration: none; } a:visited { text-decoration: none; color: #666767; } a:hover { text-decoration: none; color: #666767; } a:active { text-decoration: none; color: #666767; } .style1 { color: #A0A0A0 } --> </style> </head> <script type="text/javascript" src="mootools.svn.js"></script> <script type="text/javascript"> window.addEvent('domready', function(){ var scroll2 = new Scroller('maiin_container', {area: 100, velocity: .12}); // container $('maiin_container').addEvent('mouseover', scroll2.start.bind(scroll2)); $('maiin_container').addEvent('mouseout', scroll2.stop.bind(scroll2)); }); </script> <body> <form id="form1" runat="server"> <div class="slider_con"> <div class="image_con section"> </div> <div id="maiin_container"> <div class="main-content" id="Div1"> <% string connectionString = @"Data Source=174.37.88.148;Initial Catalog=lalith_db;uid=lalitha_jew;pwd=lalitha1234"; string query = "SELECT prod_id, prod_itemcode, prod_title, prod_thumbnailimage FROM dbo.products WHERE cat_id="+22+"and prod_topfive = 'yes' UNION SELECT prod_id, prod_itemcode, prod_title, prod_thumbnailimage FROM dbo.products WHERE cat_id="+22+"and prod_topfive = 'no'"; SqlConnection conn = new SqlConnection(connectionString); try { conn.Open(); } catch(Exception ex) { conn.Close(); } SqlDataReader reader; using (reader = new SqlCommand(query, conn).ExecuteReader()) { if (reader.HasRows) { while (reader.Read()) { int id = reader.GetInt32(reader.GetOrdinal("prod_id")); string prod_itemcode = reader.GetString(reader.GetOrdinal("prod_itemcode")); string prod_title = reader.GetString(reader.GetOrdinal("prod_title")); string prod_thumbnailimage = reader.GetString(reader.GetOrdinal("prod_thumbnailimage")); int i = prod_thumbnailimage.IndexOf('b'); string url = prod_thumbnailimage.Substring(i); %> <div class="section"> <a href="#" id='<%= id %>' onclick='getValue(<%= id %>)'><img id="img" src='<%= url %>' alt='<%= prod_title %>' /></a> </div> <% } } } %> </div> </div> </div> </form> </body> </html> I have found this Alarm Clock from JavaScript Kit and when the alarm time is reached it redirects to the URL entered. I would like to keep the alarm clock running, have it open a new window for the entered URL such as (Target="Blank") in HTML. Can someone help? var jsalarm={ padfield:function(f){ return (f<10)? "0"+f : f }, showcurrenttime:function(){ var dateobj=new Date() var ct=this.padfield(dateobj.getHours())+":"+this.padfield(dateobj.getMinutes())+":"+this.padfield(dateo bj.getSeconds()) this.ctref.innerHTML=ct this.ctref.setAttribute("title", ct) if (typeof this.hourwake!="undefined"){ //if alarm is set if (this.ctref.title==(this.hourwake+":"+this.minutewake+":"+this.secondwake)){ window.location=document.getElementById("musicloc").value } Hi I am a new bie to Javascript programming. We have a scenario to launch a new browser window for a given HTML. I have the following approaches : Approach 1: my_window = window.open("", "report"); my_window.document.open(); my_window.document.write("<HTML> <BODY> HI </BODY></HTML>"); my_window.document.close(); Approach 2: var newWindow = window.open("", "report"); newWindow.document.body.innerHTML = "<HTML> <BODY> HI </BODY></HTML>"; Could anyone sugges Which is the correct approach ? Our requirement is to have this code to work in any browser? Thanks |
|||||||