|
JavaScript - Tab View Script Incompatible With Ie And Safari
Hi everyone,
While designing my www I used the tab view script made by Lyubinskiy found on javascript kit www. It works brilliant on mozzila and chrome. However when I tried on safari and IE, the tabs don't work. Can anyone tell me how should I adjust the sript for it to work on IE and Safari? Code: function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
thanks for any suggestions Similar TutorialsI've added a Vertical Sliding Menu to my website that only seems to work in Internet Explorer. I have no idea what to do to get it to work in other browsers. If I could at least get it work in Firefox that would be great, but as I said, I'm a bit lost on how to do that. If anyone could help me I would gladly send them a box of chocolates. The menu is made up of images that are partially recessed into the left of the page, except for a small section which remains visible. When that section is clicked the image slides all the way into view revealing more options. The links are all done with image maps, if that helps. Here is the entire Javascript code that goes into the head tag: Code: <SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -
var Abouttop=124
var Newstop=195
var Profilestop=258
var Issuestop=351
var Extrastop=423
var Linkstop=499
var Forumtop=571
var menuleft=-118
var pace=14
var step
var direction
var pause=25
var thismenu
var vorzeichen=1
var vorzeiAbout=-1
var vorzeiNews=-1
var vorzeiProfiles=-1
var vorzeiIssues=-1
var vorzeiExtras=-1
var vorzeiLinks=-1
var vorzeiForum=-1
var menuismoving="no"
function gotourl(thisurl) {
alert("\n\nThis is onlay a demonstration.\nYou will not be linked to "+thisurl+".html.")
}
function inite() {
if (document.layers) {
document.About.left=menuleft
document.News.left=menuleft
document.Profiles.left=menuleft
document.Issues.left=menuleft
document.Extras.left=menuleft
document.Links.left=menuleft
document.Forum.left=menuleft
document.About.top=Abouttop
document.News.top=Newstop
document.Profiles.top=Profilestop
document.Issues.top=Issuestop
document.Extras.top=Extrastop
document.Links.top=Linkstop
document.Forum.top=Forumtop
}
if (document.all) {
document.all.About.style.posLeft=menuleft
document.all.News.style.posLeft=menuleft
document.all.Profiles.style.posLeft=menuleft
document.all.Issues.style.posLeft=menuleft
document.all.Extras.style.posLeft=menuleft
document.all.Links.style.posLeft=menuleft
document.all.Forum.style.posLeft=menuleft
document.all.About.style.posTop=Abouttop
document.all.News.style.posTop=Newstop
document.all.Profiles.style.posTop=Profilestop
document.all.Issues.style.posTop=Issuestop
document.all.Extras.style.posTop=Extrastop
document.all.Links.style.posTop=Linkstop
document.all.Forum.style.posTop=Forumtop
}
}
function getmenuname(clickedmenu) {
if (menuismoving=="no") {
if (document.layers) {
thismenu=eval("document."+clickedmenu)
}
if (document.all) {
thismenu=eval("document.all."+clickedmenu+".style")
}
step=pace
checkdirection()
movemenu()
}
}
function checkdirection() {
if (document.layers) {
if (thismenu==document.About){vorzeiAbout=vorzeiAbout*-1;vorzeichen=vorzeiAbout}
if (thismenu==document.News){vorzeiNews=vorzeiNews*-1;vorzeichen=vorzeiNews}
if (thismenu==document.Profiles){vorzeiProfiles=vorzeiProfiles*-1;vorzeichen=vorzeiProfiles}
if (thismenu==document.Issues){vorzeiIssues=vorzeiIssues*-1;vorzeichen=vorzeiIssues}
if (thismenu==document.Extras){vorzeiExtras=vorzeiExtras*-1;vorzeichen=vorzeiExtras}
if (thismenu==document.Links){vorzeiLinks=vorzeiLinks*-1;vorzeichen=vorzeiLinks}
if (thismenu==document.Forum){vorzeiForum=vorzeiForum*-1;vorzeichen=vorzeiForum}
}
if (document.all) {
if (thismenu==document.all.About.style){vorzeiAbout=vorzeiAbout*-1;vorzeichen=vorzeiAbout}
if (thismenu==document.all.News.style){vorzeiNews=vorzeiNews*-1;vorzeichen=vorzeiNews}
if (thismenu==document.all.Profiles.style){vorzeiProfiles=vorzeiProfiles*-1;vorzeichen=vorzeiProfiles}
if (thismenu==document.all.Issues.style){vorzeiIssues=vorzeiIssues*-1;vorzeichen=vorzeiIssues}
if (thismenu==document.all.Extras.style){vorzeiExtras=vorzeiExtras*-1;vorzeichen=vorzeiExtras}
if (thismenu==document.all.Links.style){vorzeiLinks=vorzeiLinks*-1;vorzeichen=vorzeiLinks}
if (thismenu==document.all.Forum.style){vorzeiForum=vorzeiForum*-1;vorzeichen=vorzeiForum}
}
menuismoving="yes"
}
function movemenu() {
if (document.layers) {
if (step>=0) {
thismenu.left+=step*vorzeichen
step--
var movetimer=setTimeout("movemenu()",pause)
}
else {
menuismoving="no"
clearTimeout(movetimer)
}
}
if (document.all) {
if (step>=0) {
thismenu.posLeft+=step*vorzeichen
step--
var movetimer=setTimeout("movemenu()",pause)
}
else {
menuismoving="no"
clearTimeout(movetimer)
}
}
}
// - End of JavaScript - -->
</SCRIPT>
Code: This is the CSS code that also goes into the head tag:
<style type="text/css">
#About {position:absolute;left:-1000px;}
#News {position:absolute;left:-1000px;}
#Profiles {position:absolute;left:-1000px;}
#Issues {position:absolute;left:-1000px;}
#Extras {position:absolute;left:-1000px;}
#Links {position:absolute;left:-1000px;}
#Forum {position:absolute;left:-1000px;}
.baseline {
position:absolute;
left:250px;
top:100px;
font-family:Arial;
font-size:9pt;
color:000000;
}
</STYLE>
And I'm not sure if this is needed or not, but just in case, here is everything between the body tags Code: <body onLoad="inite()" topmargin="0" leftmargin="0">
<DIV ID="About">
<IMG SRC="images/main/menu_tab_about2.gif" USEMAP="#Aboutdec99.gif" WIDTH=150 HEIGHT=71 BORDER=0>
<MAP NAME="Aboutdec99.gif">
<AREA SHAPE=RECT COORDS="128,3,143,67" HREF="javascript:getmenuname('About')">
<AREA SHAPE=RECT COORDS="30,4,113,20" HREF="about_nw.asp">
<AREA SHAPE=RECT COORDS="88,21,113,34" HREF="siteinfo.asp">
<AREA SHAPE=RECT COORDS="35,35,113,51" HREF="contributions.asp">
<AREA SHAPE=RECT COORDS="65,52,113,66" HREF="contact.asp">
</MAP></DIV>
<DIV ID="News"><IMG SRC="images/main/menu_tab_news2.gif" USEMAP="#Newsdec99.gif" WIDTH=150 HEIGHT=63 BORDER=0>
<MAP NAME="Newsdec99.gif">
<AREA SHAPE=RECT COORDS="128,5,143,58" HREF="javascript:getmenuname('News')">
<AREA SHAPE=RECT COORDS="30,14,113,31" HREF="news.asp">
<AREA SHAPE=RECT COORDS="30,33,113,48" HREF="news_archive.asp">
</MAP></DIV>
<DIV ID="Profiles"><IMG SRC="images/main/menu_tab_profiles2.gif" USEMAP="#Profilesdec99.gif" WIDTH=150 HEIGHT=93 BORDER=0>
<MAP NAME="Profilesdec99.gif">
<AREA SHAPE=RECT COORDS="128,5,143,89" HREF="javascript:getmenuname('Profiles')">
<AREA SHAPE=RECT COORDS="26,11,113,26" HREF="char_current.asp">
<AREA SHAPE=RECT COORDS="66,30,113,46" HREF="char_inactive.asp">
<AREA SHAPE=RECT COORDS="65,48,113,66" HREF="char_villains.asp">
<AREA SHAPE=RECT COORDS="90,68,113,82" HREF="char_all.asp">
</MAP></DIV>
<DIV ID="Issues"><IMG SRC="images/main/menu_tab_issues2.gif" USEMAP="#Issuesdec99.gif" WIDTH=150 HEIGHT=72 BORDER=0>
<MAP NAME="Issuesdec99.gif">
<AREA SHAPE=RECT COORDS="128,5,143,67" HREF="javascript:getmenuname('Issues')">
<AREA SHAPE=RECT COORDS="53,9,113,25" HREF="issues_uc.asp">
<AREA SHAPE=RECT COORDS="30,28,113,43" HREF="issues.asp">
<AREA SHAPE=RECT COORDS="52,48,113,63" HREF="issues_past.asp">
</MAP></DIV>
<DIV ID="Extras"><IMG SRC="images/main/menu_tab_extra2.gif" USEMAP="#Extrasdec99.gif" WIDTH=150 HEIGHT=76 BORDER=0>
<MAP NAME="Extrasdec99.gif">
<AREA SHAPE=RECT COORDS="128,6,143,71" HREF="javascript:getmenuname('Extras')">
<AREA SHAPE=RECT COORDS="47,10,113,27" HREF="wallpapers.asp">
<AREA SHAPE=RECT COORDS="65,29,113,45" HREF="avatars.asp">
<AREA SHAPE=RECT COORDS="36,48,113,64" HREF="merch.asp">
</MAP></DIV>
<DIV ID="Links"><IMG SRC="images/main/menu_tab_links2.gif" USEMAP="#Linksdec99.gif" WIDTH=150 HEIGHT=72 BORDER=0>
<MAP NAME="Linksdec99.gif">
<AREA SHAPE=RECT COORDS="128,10,143,64" HREF="javascript:getmenuname('Links')">
<AREA SHAPE=RECT COORDS="13,5,113,19" HREF="http://www.newwarriors.com">
<AREA SHAPE=RECT COORDS="74,21,113,34" HREF="http://newwarriors.wordpress.com" alt="New Warriors Continuity Conundrum">
<AREA SHAPE=RECT COORDS="32,37,113,51" HREF="http://infinitytitans.anycities.com/warriorsmix.html">
<AREA SHAPE=RECT COORDS="19,53,113,67" HREF="http://www.novaprimepage.com">
</MAP></DIV>
<DIV ID="Forum"><IMG SRC="images/main/menu_tab_forum2.gif" usemap="#menu_tab_test.jpg" width="150" height="69" border=0>
<map name="menu_tab_test.jpg">
<AREA shape=rect COORDS="128,5,143,66" HREF="http://www.newwarriors.net/forum">
</map></DIV>
</body>
And in case anyone wants to see what I'm talking about, here is the link to the page so that you can see the menu bar and how it functions. Make sure you are viewing it in IE though. lol. http://www.newwarriors.net I hope that's all of the information that is needed. I just don't have a clue what to do. I really like the menu and want to keep it. Thanks so much! Hello all, I'm back with more silly newbie questions. I'm building a website that includes 3 javascript codes: 1. Onmouseover image switch for the nav bar. 2. On a specific page, onmouseover display of hidden divs. 3. Particletree's Dynamic Resolution Dependent Layout script (http://particletree.com/features/dyn...ndent-layouts/) All three scripts work fine in firefox, but the 2nd script doesn't work in safari and chrome, and the 3rd one doesn't work in safari, chrome and IE(8). Since the 1st one works fine in all browsers, I'm guessing this isn't a problem with my javascript link or anything like that. The website is: www.sheket.co.il/index4.html The specific page that runs the 2nd code is: www.sheket.co.il/services.html My javascript is: http://www.sheket.co.il/javascript.js And my default stylesheet is: http://www.sheket.co.il/style.css (I apologize for possible jibrish- the website is in Hebrew...) Any help with these two problems would be greatly appreciated! Since I like to minimize on graphics to keep bandwidth low, I have been using a script to simulate buttons. When you mouseover, you get some color changes which revert back when you move the mouse off. Simple, right? The problem is that firefox totally ignores the script. Even worse, safari changes on mouseover, but doesn't revert on mouseout. I have this in the heading: Code: <script LANGUAGE="JavaScript">
function ColorBlock(oRegion,sLinkID)
{
if (document.readyState != "complete") return;
window.event.cancelBubble = true;
oRegion.className = "MenuSelected";
oRegion.style.cursor="hand";
sLinkID.style.color = "black";
}
function UncolorBlock(oRegion,sLinkID)
{
if (document.readyState != "complete") return;
window.event.cancelBubble = true;
var oToEl = window.event.toElement;
if ((oToEl && !oRegion.contains(oToEl))||!oToEl)
{
sLinkID.style.color = "white";
oRegion.className = "MenuUnSelected";
}
}
</script>
And this is in the body. Code: <table class=MenuTable>
<tr><td OnMouseover="ColorBlock(this, Link4);"
OnMouseout="UncolorBlock(this, Link4);"
CLASS="MenuUnSelected" nowrap>
<a STYLE="color:white" ID="Link4"
OnMouseover="this.style.textDecorationNone=true;" href="javascript:createWindow('edu.htm','edu','toolbar=1,location=1,directories=1,status=1,menubar=1,scrollbars=1,resizable=1,width=825,height=725')">
<div style="width:144; cursor=hand; font-weight:bold;">
Education
</a></div></td>
</tr>
</table>
I have a bunch of these "buttons" ... firefox ignoring the code is annoying but safari only using half the code makes it look really bad. Anyone have any ideas? I've done a lot of work over time on the site, there are just a few bugs that have been avoiding me and I am trying to hunt them all down and kill them. The page is at www.adam-k-watts.com $(function() { // HIDING THE CLASS $(".ad-nav").css("opacity","0.0"); // ON MOUSE OVER $(".ad-nav").hover(function () { // SET OPACITY TO 100% $(this).stop().animate({ opacity: 1.0 }, "slow"); }, // ON MOUSE OUT function () { // SET OPACITY BACK TO HIDE $(this).stop().animate({ opacity: 0.0 }, "slow"); }); }); I am hiding a Div and showing it on mouse over. Fade Animation is smooth on Safari but a bit choppy FF. Can anyone come up with a solution to make it run smoothly on both? thanks. I have this script and it is performing the calculations to provide an instant price quote script fine in IE and also making only certain boxes editable when a certain radio button is clicked. However in Firefox or Safari it isn't working. Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
td.calchead{
width:75px;
background:none;
border-top:thin solid black;
text-align:right;
}
td.calc{
width:75px;
background:none;
border:thin solid black;
text-align:right;
}
td.products{
float:right;
text-align:right;
border:1px solid black;
}
td.inputs{
width:200px;
float:right;
text-align:right;
}
p.products{
text-align:left;
font-family:Georgia, "Times New Roman", Times, serif, 14px;
}
p.inputs{
text-align:left;
font-family:Georgia, "Times New Roman", Times, serif, 14px;
}
input.inputs{
width:30px;
background-color:CCCCCC;
}
p.calculate{
text-align:left;
font-family:Georgia, "Times New Roman", Times, serif, 14px;
}
</style>
<?php
$header = $_POST['header'];
$productid = $_POST['group1'];
$width = $_POST['width'];
$height = $_POST['height'];
$openings = $_POST['openings'];
$clearpanel = $_POST['clearpanel'];
$resident = $_POST['resident'];
$color = $_POST['color'];
$motor = $_POST['motor'];
$priceperheader=.5833;
//error checking, ensures all variables are numeric between calculatable values 0 and 999
if($width>=0 && $width<=999 && $height>=0 && $height<=999 && $openings>=0 && $openings<=999 && $clearpanel>=0 && $clearpanel<=999)
{
$width2=$width+6;
$height2=$height+6;
if($productid == 'Roll-down Shutters')
{
$height2=$height2+4;
}
$wh=$width2*$height2;
if($header=='yes')
{
$he=$openings*$width;
$he=$he*$priceperheader;
}
else
{
$he=0;
}
if($resident=='yes')
{
$tax=1.085;
}
else
{
$tax=1;
}
if($motor=='2')
{
$motor=488*$openings;
}
else
{
$motor=0;
}
//$cl=$clearpanel*$priceperclearpanel;
//echo(' ' + $wh + ' ' + $he + ' ' + $cl + ' ');
//divide sq ft by 144 to get sq inches
////.050 alum =$4.94 per sq ft
////24 gauge steel =$3.72 per sq ft
////change Protexan to Lexan =9.94 sq ft
////roll downs = $24.99 per sq ft motor = $488.
////bahama impact = 25.99 sq ft no impact 21 per sq ft
////colonial impact = 25.99 and non = 21 sq ft
////Hurricane Fabric $6.38 per sq ft
//All prices are self install only installation is extra and highly reccommended
////F track = $1.79 per ft
////H track = $2.29 per ft
////Texas residents add 8.25 percent sales tax
//Standard Clamshell<input type='radio' name='group1' value='Standard Clamshell' onFocus="enable5()"><br />
//Impact Clamshell<input type='radio' name='group1' value='Impact Clamshell' onFocus="enable5()"><br />
//.063 Aluminum Panels<input type='radio' name='group1' value='.063 Aluminum Panels' onFocus="enable1()"><br />
//Accordian Shutters<input type='radio' name='group1' value='Accordian Shutters' onFocus="enable4()" /><br />
function sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2)
{
$wh=$wh*$priceperopening;
$subtotal=$wh+$he;
$subtotal=$subtotal+$motor;
$total=$subtotal*$tax;
$tax=$total-$subtotal;
echo("<table><tr ><td>Product</td><td>Measured Opening</td><td>Finished Opening</td></tr>
<tr><td >" . $productid . "</td><td align'right'>" . $width . " x " . $height . "</td><td align'right'>" . $width2 . " x " . $height2 . "</td></tr></table>
<table><tr><td></td><td class='calchead'>Shutter</td><td class='calchead'>Header</td><td class='calchead'>Motor</td><td class='calchead'>Tax</td><td class='calchead'>Total</td></tr>
<tr><td>$</td><td class='calc'>". money_format('%.2n',$wh) . "</td><td width='30' class='calc'>". money_format('%.2n',$he) . "</td><td width='30' class='calc'>" . money_format('%.2n',$motor) . "</td><td width='30' class='calc'>" . money_format('%.2n',$tax) . "</td><td align='right' class='calc'>$" . money_format('%.2n',$total) . "</td></tr></table>");
}
if($productid == '.050 Aluminum Panels')
{
$priceperopening=.03431;
sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2);
}
if($productid == '24 gauge steel')
{
$priceperopening=.02583;
sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2);
}
if($productid == 'lexan')
{
$priceperopening=.0659;
sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2);
}
if($productid == 'Roll-down Shutters')
{
$priceperopening=.17354;
sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2);
}
if($productid == 'Impact Bahama Shutters')
{
$priceperopening=.18049;
sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2);
}
if($productid == 'Impact Colonial Shutters')
{
$priceperopening=.18049;
sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2);
}
if($productid == 'Hurricane Fabric')
{
$priceperopening=.04431;
sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2);
}
if($productid == 'Non-Impact Bahama Shutters')
{
$priceperopening=.14583;
sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2);
}
if($productid == 'Non-Impact Colonial Shutters')
{
$priceperopening=.14583;
sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2);
}
}
else
{echo('Please make sure to enter numbers greater than zero and less than 999 in all required fields.');}
$header='';
?>
<script type='text/javascript'>
//white() clears backs of inputs to white and is called from eable functions
function white(){
document.getElementById("header").style.background='#ffffff';
document.getElementById("width").style.background='#ffffff';
document.getElementById("height").style.background='#ffffff';
document.getElementById("openings").style.background='#ffffff';
document.getElementById("resident").style.background='#ffffff';
document.getElementById("color").style.background='#ffffff';
document.getElementById("motor").style.background='#ffffff';
}
//enable1-5() enables particular requested fields specific for product type and disables unused fields.
function enable1()
{
white();
document.getElementById("header").disabled='';
document.getElementById("width").disabled='';
document.getElementById("height").disabled='';
document.getElementById("openings").disabled='';
document.getElementById("resident").checked='';
document.getElementById("resident").disabled='';
document.getElementById("color").style.background='#CCCCCC';
document.getElementById("color").value='';
document.getElementById("color").disabled='true';
document.getElementById("motor").style.background='#CCCCCC';
document.getElementById("motor").value='';
document.getElementById("motor").disabled='true';
}
function enable2()
{
white();
document.getElementById("header").disabled='';
document.getElementById("width").disabled='';
document.getElementById("height").disabled='';
document.getElementById("openings").disabled='';
document.getElementById("resident").checked='';
document.getElementById("resident").disabled='';
document.getElementById("color").value='';
document.getElementById("color").style.background='#CCCCCC';
document.getElementById("color").disabled='true';
document.getElementById("motor").value='';
document.getElementById("motor").style.background='#CCCCCC';
document.getElementById("motor").disabled='true';
}
function enable3()
{
white();
document.getElementById("header").checked='';
document.getElementById("header").style.background='#CCCCCC';
document.getElementById("header").disabled='true';
document.getElementById("width").disabled='';
document.getElementById("height").disabled='';
document.getElementById("openings").disabled='';
document.getElementById("resident").disabled='';
document.getElementById("resident").checked='';
document.getElementById("color").disabled='';
document.getElementById("motor").disabled='';
}
function enable4()
{
white();
document.getElementById("header").checked='';
document.getElementById("header").style.background='#CCCCCC';
document.getElementById("header").disabled='true';
document.getElementById("width").disabled='';
document.getElementById("height").disabled='';
document.getElementById("openings").disabled='';
document.getElementById("resident").checked='';
document.getElementById("resident").disabled='';
document.getElementById("color").disabled='';
document.getElementById("motor").style.background='#CCCCCC';
document.getElementById("motor").value='';
document.getElementById("motor").disabled='true';
}
function enable5()
{
white();
document.getElementById("header").checked='';
document.getElementById("header").disabled='true';
document.getElementById("header").style.background='#CCCCCC';
document.getElementById("width").disabled='';
document.getElementById("height").disabled='';
document.getElementById("openings").disabled='';
document.getElementById("resident").checked='';
document.getElementById("resident").disabled='';
document.getElementById("color").value='';
document.getElementById("color").disabled='true';
document.getElementById("color").style.background='#CCCCCC';
document.getElementById("motor").value='';
document.getElementById("motor").disabled='true';
document.getElementById("motor").style.background='#CCCCCC';
}
</script>
<title>Estimator</title>
</head>
<body>
<div>
<table>
<tr>
<td><p class='products'>First, select a product</p></td>
<td><p class='inputs'>Then, enter dimensions and select options (in inches) that appear in white</p></td>
</tr>
<tr>
<td class='products'>
<form width='550' name='form01' method='post' action='http://www.windowguardoftexas.com/estimator.php'>
.050 Aluminum Panels<input type='radio' name='group1' value='.050 Aluminum Panels' onFocus="enable1()"><br />
24 Gauge Steel<input type='radio' name='group1' value='24 gauge steel' onFocus="enable1()"><br />
Lexan<input type='radio' name='group1' value='lexan' onFocus="enable2()"><br />
Roll-down Shutters<input type='radio' name='group1' value='Roll-down Shutters' onFocus="enable3()"><br />
Impact Bahama Shutters<input type='radio' name='group1' value='Impact Bahama Shutters' onFocus="enable4()"><br />
Impact Colonial Shutters<input type='radio' name='group1' value='Impact Colonial Shutters' onFocus="enable4()"><br />
Hurricane Fabric<input type='radio' name='group1' value='Hurricane Fabric' onFocus="enable5()"><br />
Non-Impact Bahama Shutters<input type='radio' name='group1' value='Non-Impact Bahama Shutters' onFocus="enable4()"><br />
Non-Impact Colonial<input type='radio' name='group1' value='Non-Impact Colonial Shutters' onFocus="enable4()"><br />
</td>
<td class='inputs'>
Add Header and F-track to openings: <input type='checkbox' name='header' class='inputs' value='yes' disabled="disabled"/><br />
Width: <input type='text' class='inputs' name='width' value='' maxlength='3'disabled='disabled' /><br />
Height: <input type='text' class='inputs' name='height' value='' maxlength='3' disabled='disabled' /><br />
Openings: <input type='text' class='inputs' name='openings' value='' maxlength='3' disabled='disabled' /><br />
Texas Resident <input type='checkbox' name='resident' class='inputs' value='yes' disabled="disabled"/><br />
Color: <select name="color" id='color' class='inputs' disabled='disabled'><br />
<option value="0" >--Select Color--</option>
<option value="1" >White</option>
<option value="2">Bronze</option>
<option value="3">Ivory</option>
<option value="3">Beige</option>
</select>
<br />
Motor: <select name="motor" class='inputs' disabled="disabled"><br />
<option value="0">--Select Motor--</option>
<option value="1">None</option>
<option value="2" >Standard</option>
</select>
<br /><br />
<p class='calculate'>Finally, press calculate</p>
<input type='reset' name='Submit2' value='Reset'>
<input type='submit' name='Submit' value='Calculate'>
</td>
</form>
</tr>
<tr><td>All prices are self install only, installation</td><td>is extra and highly reccommended</td></tr>
</table>
</div>
</body>
</html>
How do I get this to work in Firefox and Safari? Why would it work in IE but not the others? In a webpage I am developing I need to change the presentation depending on user selection. At the moment this code is huge and not very maintainable. The first purpose was to have a working code, now I would like to make it more maintainable. Below is a main part of the problem; Code: function myFunction(type)
{
if (type.value == "1")
{
var form1 = document.getElementById("OrderForm1");
form1.style.display = "block";
var form2 = document.getElementById("OrderForm2");
form2.style.display = "none";
var form3 = document.getElementById("OrderForm3");
form3.style.display = "none";
}
else if (type.value == "2")
{
var form1 = document.getElementById("OrderForm1");
form1.style.display = "none";
var form2 = document.getElementById("OrderForm2");
form2.style.display = "block";
var form3 = document.getElementById("OrderForm3");
form3.style.display = "none";
}
else if (type.value == "3")
{
var form1 = document.getElementById("OrderForm1");
form1.style.display = "none";
var form2 = document.getElementById("OrderForm2");
form2.style.display = "none";
var form3 = document.getElementById("OrderForm3");
form3.style.display = "block";
}
}
<div id="OrderForm" style="display: block;">
<div id="OrderForm1" style="display: none;">
<FORM METHOD="POST"></FORM>
</div>
<div id="OrderForm2" style="display: none;">
<FORM METHOD="POST"></FORM>
</div>
<div id="OrderForm3" style="display: none;">
<FORM METHOD="POST"></FORM>
</div>
</div>
Basically the myFunction will be called based on user input. This input will show one section of html code and hide other sections of html code. So if input is "1", then OrderForm1 shall be shown and OrderForm2 and OrderForm3 must be hidden. if input is "2", the OrderForm2 shall be shown and OrderForm1 and OrderForm3 must be hidden etc. By adding more forms to show and hide, this code is growing massively. I would like to add some kind of for loop function to this but I am not sure how to loop through the various section names (OrderForm1, OrderForm2 and OrderForm3) and set the appropriate value. Appreciate any help HI , IF there is error in JS then in FF i can see in console window using firebug But i am noe getting script error in IE but i am not able to find where the error is. Is says object required line 499 now i don't understand which script is IE talking about . Is there any way to find error in IE Hi Sorry if the title is a bit vague. I have a single page with fixed background and <A name=section> / #section type menu also have a margin-bottom: 1000px; so content isnt visible until the link in menu is pressed I am using the smooth pack javascript so it scrolls rather than jumps straight to the #section content what I want to do is have the content invisible until it reaches the fixed background is it possible to have content invisible until it scrolls into a div, i'm sure it is the fixed background is about 800x500 and black all round so the text is visible, I could alter to have any text black but at the moment its blue and white What is the code to stop people from viewing your source. Such as this site: http://bad-behavior.com (View The Source of That Site) I've searched the forums, and all I got was a bunch of "nothing can protect your source" I don't care about all of that. I want the code because: 1. Most people don't know how to view a source after it has been blocked 2. I think it's cool If there is no street view available for a specific long and lat on google maps, is there a way to display some kind of message instead of the grey box which google shows? I cant find anything in the API?
Basic steps: A user loads the web page Wants to view a post by clicking Read more... A message box appears "Subscribe to view the article" Quote: If the user is subscribed, they view without any message boxes, links or redirects. What is the best practice to allow a user to view an entire post by clicking a Read more... only after subscribing? Hi, I'm creating an extension on Firefox that wishes to parse the source of a page that the user is currently viewing for specific information. I've gotten as far as creating a simple extension with a button and when I click on it, it will show the url of the page I am currently viewing through: content.location.href All the examples I've seen so far concerning viewing the source forces you to either use the 'view-source:' convention or the 'xmlhttprequest' method. But these examples seems to be meant to be called within a web page and not an extension. When I cut and paste with these examples, I only get the source for the actual chrome portion of Firefox. I've tried modifying some of the examples to include 'content.document....etc' to reference what's being displayed in the browser, but it doesn't seem to work. Can anyone provide sample or reference code so I can extract the page source of my current window from an extension? Thanks! How do I hide my javascript from html page (from view source on right click)?
My goal is to have one big picture center with 4 smaller pictures to the left that you click on and is target to the center. When you click on the center it will zoom. I haven't worked on it in a few years and not able to find the person who wrote the code. I added the zoom coding to the picture switch. The zoom works fine but when you click the smaller images the image is not viewable. Coding in the head Code: <!--Image Viewer-->
<script language="javascript" type="text/javascript">
<!--
function canManipulateImages() {
if (document.images)
return true;
else
return false;
}
// loadPosterImage
function loadPosterImage(imageURL) {
if (gImageCapableBrowser) {
document.imagePoster.src = imageURL;
return false;
}
else {
return true;
}
}
gImageCapableBrowser = canManipulateImages();
// -->
</script>
<!--End Image Viewer-->
<!--Picture Zoom-->
<script>
// C.2004 by CodeLifter.com
var nW,nH,oH,oW;
function zoomToggle(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichImage){
oW=whichImage.style.width;oH=whichImage.style.height;
if((oW==iWideLarge)||(oH==iHighLarge)){
nW=iWideSmall;nH=iHighSmall;}else{
nW=iWideLarge;nH=iHighLarge;}
whichImage.style.width=nW;whichImage.style.height=nH;
}
</script>
<!--End Picture Zoom-->
The body code Code: <!--Picture #4-->
<tr>
<td><A href="F:\mamies\santa_pic\purple_bottom.gif"
onClick="return(loadPosterImage('F:\mamies\santa_pic\purple_bottom.gif'))">
<img src="F:\mamies\santa_pic\purple_bottom.gif"
border=1 align=center width=56 height=75></A>
</td>
</tr>
</table>
<table align="center" border="1" cellspacing="0" cellpadding="5" height="10" bgcolor="#002152" bordercolor="#980008">
<tr>
<!--Image Zoom-->
<td><img name="imagePoster" src="F:\mamies\santa_pic\purple_front.gif"
border="0"
width="354"
height="502"
onclick="zoomToggle('354px','502px','708px','1004px',this);">
<!--End Image Zoom-->
Thanks for your help Charlene Hi , I made a table that retrieves some Data from the Database also I did some calculations for this data using Javascript and It works fine , but I can't see the calculated values in the source code . That's the Problem , cause I can't print it or export it without these values. and the source code doesnt show it... so , what can I do , to view the generated values from JS in the source code ?? Thanks , I'm afraid this is a task related to my job and I need ur Help Urgently I'm using IE 6 only as a web browser and the Javascript Calculations are functions and Classes in a seperated file and I linked it to the Report page ... I have created and opened a new window using Javascript and written to it with the document.write Command. When I click "View" and then "Page Source" (Firefox) to view the source of it, however, it displays a blank page. How can I get the source of a window I created? Thank You Charles I am making a site HERE and I was using this: Code: <script>
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile/i.test(navigator.userAgent)) {
if (document.URL != "http://www.precisionpaintandcollision.net") {
window.location = "http://m.precisionpaintandcollision.net";
}
}
</script>
to auto-redirect mobile users to the mobile site and I want to keep that but I want them to be able to view the desktop site without that code affecting them. I know some apps have "force/request desktop site" but i'd like them to be able to just view the desktop site without auto redirecting to mobile site. Is this possible? Thanks -John I have a dataTable in which on the keyup event, the cursor focuses to the next field. In IE7, after a field, the next field is not coming into the view. Please help. The occField(2nd attachment) comes into view only after focus moves to next field, i.e LTD Buy up. Code: if (currId.indexOf("Occ") >= 0)
{
if(stdBuyUpSelected){
autoTabFocus("SBuy",index);
}else if(ltdBuyUpSelected){
autoTabFocus("LBuy",index);
}
else if (isStateZipDisp){
autoTabFocus("Zp",index);
}
}
function autoTabFocus(next,index)
{
var focusElem = document.getElementById(next+index);
if (focusElem != null)
{
focusElem.focus();
}
}
Hi, Following this jQuery slideshow tutorial (Usecase 3 sample, about 2/3 down the page, this is the one without thumbnails): http://www.gcmingati.net/wordpress/w...vwt/index.html I constructed the slideshow: http://backstageweb.net/Salon/slideshowcode.htm ...which works perfectly in browser view locally (FF and IE). When uploaded to the server, however, I've got a static list of photos as you can see. Can someone shed some light on what the problem is? All relevant files are attached (I changed the images to simple colors to get the file size within the attachment limit). Thanks. John Hi - I'm working in ASP.Net 2.0. My page has a GridView control, which is populated by a SQLDataSource. The GridView has one Button control per row. The button has a client-side javascript function (ShowDelete) attached to its OnClientClick event on DataBinding of the GridView. This event fires some javascript. The javascript does 3 things: - It changes the text of the button from "Hide" to "Create" - It changes the background color of the button from red to green - It assigns a new onClientClick event to the button: "ShowAvailable" The text and the color of the button change with no problem. After I change the OnClientClick event, I send an alert with the button's OnClientClick event and it reports it to be "ShowAvailable". However, when I click on the button, it doesn't fire ShowAvailable, it fires the original onClientClick event (ShowDelete). Also, when I do View Source, it shows the button's text, color and OnClientClick event as their original settings, i.e., "Hidden", "Red" and "ShowDelete", even though I'm looking at a green button that says "Create." What's going on here? Here's the code I use to attach the OnClientClick event on DataBinding of the GridView: Code: foreach (GridViewRow row in this.gvLocation.Rows)
{
if (row.RowType == DataControlRowType.DataRow || row.RowType == DataControlRowType.EmptyDataRow)
{
int rowindex = row.RowIndex + 1; //to exclude the header which is counted as a row when we get to javascript
btnAction.OnClientClick = "ShowDelete(" + rowindex.ToString() + "); return false";
}
}
Here's the javascript for ShowDelete: Code: function ShowDelete(rowindex)
{
var locationgridID = '<%= gvLocation.ClientID %>';
locationgrid = document.getElementById(locationgridID);
if (locationgrid != null)
{
action_cell = locationgrid.rows[rowindex].cells[3];
for (k = 0; k < action_cell.childNodes.length; k++)
{
if (typeof(action_cell.childNodes[k].id) == 'string')
{
action_cell.childNodes[k].value = "Create";
action_cell.childNodes[k].style.backgroundColor = "Green";
action_cell.childNodes[k].onclientclick = "ShowAvailable(" + rowindex + "); return false";
alert(action_cell.childNodes[k].onclientclick); // reports the OnClientClick event is ShowAvailable
}
}
}
}
Any thoughts are greatly appreciated! |
|||||||