|
JavaScript - Setting And Resetting Div Height With Javascript - Only Works First Time?
Hello! I am playing with CSS3 transitions to show/hide a DIV element. The application will be for a newsletter which will allow a user to show and hide article content. There will be multiple articles.
I have a <DIV id="article1" class="content"> and the default height is 0px. When someone clicks the "show/hide article" link I set the height to 250px. A CSS transition on the content class (height) adds a smooth change from 0px to 250px. I have rigged up a simple Javascript function so that when someone clicks the "show/hide article" link, it checks the height of the DIV. If the div is 0px, it should expand the content, if not, it should shrink it. It works when you click the link the first time (i.e. the content div height is set to 250px and the transition works). But when you click it again, it does not set the height to 0px in order to hide the content. I think there is something wrong with the validation of document.getElementById(articleID).style.height ? Any ideas? Thank you! Code: Code: <!DOCTYPE html>
<html land="en">
<head>
<script language="javascript" type="text/javascript">
function showhideContent(articleID) {
if(document.getElementById(articleID).style.offsetHeight = '0px'){
document.getElementById(articleID).style.height = '250px';
}
else{
document.getElementById(articleID).style.height = '0px';
}
}
</script>
<style type="text/css">
p {
margin:10px;
font-size:12px;
}
h1 {
margin:10px;
}
body {
background-color:lightgrey;
font-family:Arial;
font-size:12px;
}
#newsletter {
width:500px;
border:solid;
border-width:1px;
border-color:black;
background-color:white;
text-align:left;
font-size:11px;
}
#header {
height:125px;
}
#footer {
height:50px;
background-color:#330033;
}
#headerbar{
background-color:lightblue;
height:35px;
overflow:hidden;
font-size:12px;
-webkit-transition: background-color 1s;
}
#headerbar:hover{
background-color:#3399FF;
}
.content{
background-color:white;
height:0px;
overflow:hidden;
-webkit-transition: height 0.5s ease-in-out;
}
#expand{
background-color:red;
}
</style>
</head>
<meta charset="UTF-8">
<body>
<center>
<div id="newsletter">
<section id="header">
<img src="newsletter_header_test.jpg">
</section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed turpis augue, nec cursus metus. Proin dictum,
velit vel vulputate vulputate, ante sem iaculis risus, at faucibus nibh tellus et ante. Vivamus quis enim nec arcu
dictum molestie non quis ipsum.
<br><br>
Proin vel mi eget sapien tincidunt pretium et non eros. Nullam vitae lacus at tortor volutpat feugiat. Vivamus
venenatis risus in urna aliquet laoreet tempus diam consequat. Praesent viverra placerat venenatis. Quisque arcu
nisl, congue sed blandit ut, suscipit eu velit. Nam quam massa, sollicitudin et elementum at, tempus nec eros.
Etiam eget tortor condimentum metus accumsan dignissim eu sed sem.
</p>
<article>
<section id="headerbar">
<div style="float:left;">
<h1>Introducing: the first article</h1>
</div>
<div style="float:right;">
<p>
<a id="expand" href="#" onClick="javascript:showhideContent
('article1');return false;">Show/Hide Article</a>
</p>
</div>
</section>
<div>
<section id="article1" class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed turpis augue, nec cursus metus. Proin dictum,
velit vel vulputate vulputate, ante sem iaculis risus, at faucibus nibh tellus et ante. Vivamus quis enim nec arcu
dictum molestie non quis ipsum.
<br><br>
Proin vel mi eget sapien tincidunt pretium et non eros. Nullam vitae lacus at tortor volutpat feugiat. Vivamus
venenatis risus in urna aliquet laoreet tempus diam consequat. Praesent viverra placerat venenatis. Quisque arcu
nisl, congue sed blandit ut, suscipit eu velit. Nam quam massa, sollicitudin et elementum at, tempus nec eros.
Etiam eget tortor condimentum metus accumsan dignissim eu sed sem. Quisque ultricies volutpat mauris, nec cursus
<br><br>
sapien laoreet ut. Maecenas volutpat porta enim et tincidunt. Sed vel lectus eget dolor dictum ultrices in in
mauris. Praesent laoreet velit vitae est vulputate a varius lorem eleifend.
</p>
</section>
</div>
</article>
<br>
<br>
<section id="footer">
<p>footer</p>
</section>
</div>
</center>
</body>
</html>
Similar TutorialsHello everyone, I am completely new to javascripts. I want to have a count down timer on my webpage. I already found a script, but it does not do everything I want it to do. I couldn't find a script that did everything I need. I need it to do the following things: - Use the time zone GMT+1 - Reset everyday at a specific time - From 15:00 till 17:30: A countdown (so it shows 2 hours and 30 minutes from the start and count's down to 0 (which will be 17:30) - During 15:00 till 17:30 it shows: "The game is playing" - Once it is 17:30 I want it to reset and countdown till the next day 15:00 - From 17:30 till 15:00 next day it says: "The game will start in" So it is actually 2 countdown clocks in one javascript. One countdown from 15:00 to 17:30 (whilst the game is playing) and one directly starting after it from 17:30 till 15:00 next day. But both are displayed on the same spot. The countdown will be in text. No buttons or fancy images etc. Hope you can help me out. Thanks Code: <html>
<head>
<script type = "text/javascript">
function getSeconds() {
var now = new Date();
var time = now.getTime(); // time now in milliseconds
var midnight = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0); // midnight 0000 hrs
// midnight - change time hh,mm,ss to whatever time required, e.g. 7,50,0 (0750)
var ft = midnight.getTime() + 86400000; // add one day
var diff = ft - time;
diff = parseInt(diff/1000);
if (diff > 86400) {diff = diff - 86400}
startTimer (diff);
}
var timeInSecs;
var ticker;
function startTimer(secs){
timeInSecs = parseInt(secs);
ticker = setInterval("tick()",1000);
tick(); // to start counter display right away
}
function tick() {
var secs = timeInSecs;
if (secs>0) {
timeInSecs--;
}
else {
clearInterval(ticker); // stop counting at zero
//getSeconds(); // and start again if required
}
var hours= Math.floor(secs/3600);
secs %= 3600;
var mins = Math.floor(secs/60);
secs %= 60;
var result = ((hours < 10 ) ? "0" : "" ) + hours + " hours " + ( (mins < 10) ? "0" : "" ) + mins
+ " minutes " + ( (secs < 10) ? "0" : "" ) + secs + " seconds";
document.getElementById("countdown").innerHTML = "The game will start in " + result;
}
</script>
</head>
<body onload = "getSeconds()">
<span id="countdown" style="font-weight: bold;"></span>
</body>
</html>
Reply With Quote 01-07-2015, 10:11 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts First of all, move your JavaScript where it belongs: Just before the </body> tag. Then you don't need stuff such as onload='....' Here's my attempt at it: Code: <!DOCTYP html>
<html>
<head>
<title>Game play starts at 17:30</title>
</head>
<body>
Other stuff...<br/><br/>
<span id="countdown" style="font-weight: bold;"></span>
<br/><br/>Other stuff...<br/><br/>
<script type="text/javascript">
var timer = null;
function tick( )
{
var msg = document.getElementById("countdown");
var now = new Date();
var yr = now.getFullYear(); var mon = now.getMonth(); var dy = now.getDate();
var startat = new Date(yr,mon,dy,15,0,0);
var endat = new Date(yr,mon,dy,17,30,0);
if ( now.getTime() < startat.getTime() )
{
msg.innerHTML = "The game will start at 17:30";
} else if ( now.getTime() > endat.getTime() )
{
msg.innerHTML = "The game started at 17:30";
} else {
var sec = Math.floor( ( endat.getTime() - now.getTime() ) / 1000 );
var min = Math.floor ( sec / 60 );
sec %= 60;
var hr = Math.floor ( min / 60 );
min %= 60;
if ( min < 10 ) min = "0" + min;
if ( sec < 10 ) sec = "0" + sec;
msg.innerHTML = "The game will start in " + hr + ":" + min + ":" + sec;
}
}
tick(); // immediate start
timer = setInterval( tick, 1000 ); // every second
</script>
</body>
</html>
I've seen a few people elsewhere with a similar problem, but couldn't get the solutions to work for my individual problems. I am currently trying to display a gallery of images using Lightbox, and a contact form in a different modal window using a different script. Here is the URL, so you can view the source. Clicking 'contact' opens the Contact window, which currently works, and clicking the images SHOULD open lightbox but doesn't. If I shuffle the code around, I can get Lightbox to work but the contact window then breaks. If someone could provide just the code I should replace mine with so I can just copy and paste it in, that would be great because I don't know anything about javascript and struggled to follow the instructions for this I found elsewhere. However any help is appreciated! Thanks in advance. (: (Just in case you notice - please excuse my use of tables in the coding, this is just temporary) Am I doing something wrong here? I have two anonymous functions to validate two different forms on two different pages. They both work on the individual page, though when I try and put them in the same script.js folder only the top function seems to work. Code: <script type="text/javascript">
// Form Validation / Catalog Template ----------------------------------------------------------------------------------------------------------------------
document.getElementById("formValidation").onsubmit = function(){
if(document.getElementById("reqAddrCont").value == ""){
document.getElementById("reqAddrCont").className = "error";
return false;
}if(document.getElementById("reqAddrName").value == ""){
document.getElementById("reqAddrName").className = "error";
return false;
}if(document.getElementById("reqAddr1").value == ""){
document.getElementById("reqAddr1").className = "error";
return false;
}if(document.getElementById("reqAddr6").value == ""){
document.getElementById("reqAddr6").className = "error";
return false;
}if(document.getElementById("reqAddrState").value == "0"){
document.getElementById("reqAddrState").className = "error";
return false;
}if(document.getElementById("reqAddrPost").value == ""){
document.getElementById("reqAddrPost").className = "error";
return false;
}if(document.getElementById("reqAddrPhone").value == ""){
document.getElementById("reqAddrPhone").className = "error";
return false;
}if(document.getElementById("reqAddrEMail").value == ""){
document.getElementById("reqAddrEMail").className = "error";
return false;
}else{
return true;
}
};
// Form Validation / New Account Template --------------------------------------------------------------------------------------------------------------------------
document.getElementById("formValidationAccount").onsubmit = function(){
if(document.getElementById("AcctName").value == ""){
document.getElementById("AcctName").className = "error";
return false;
}if(document.getElementById("AcctTitle").value == ""){
document.getElementById("AcctTitle").className = "error";
return false;
}if(document.getElementById("AcctCompany").value == ""){
document.getElementById("AcctCompany").className = "error";
return false;
}if(document.getElementById("AcctAddress1").value == ""){
document.getElementById("AcctAddress1").className = "error";
return false;
}if(document.getElementById("AcctAddress2").value == ""){
document.getElementById("AcctAddress2").className = "error";
return false;
}if(document.getElementById("AcctAddress6").value == ""){
document.getElementById("AcctAddress6").className = "error";
return false;
}if(document.getElementById("AcctState").value == "0"){
document.getElementById("AcctState").className = "error";
return false;
}if(document.getElementById("AcctPost").value == ""){
document.getElementById("AcctPost").className = "error";
return false;
}if(document.getElementById("AcctCountry").value == ""){
document.getElementById("AcctCountry").className = "error";
return false;
}if(document.getElementById("AcctPhone").value == ""){
document.getElementById("AcctPhone").className = "error";
return false;
}if(document.getElementById("AcctLogin").value == ""){
document.getElementById("AcctLogin").className = "error";
return false;
}if(document.getElementById("AcctLogin2").value == ""){
document.getElementById("AcctLogin2").className = "error";
return false;
}if(document.getElementById("AcctPassword").value == ""){
document.getElementById("AcctPassword").className = "error";
return false;
}if(document.getElementById("AcctPasswordDupe").value == ""){
document.getElementById("AcctPasswordDupe").className = "error";
return false;
}else{
return true;
}
};
</script>
Hello everybody I am new here and my English is not very good, sorry. I hope this post is in the correct forum.Thank you in advance for helping me out. I am from the netherlands and we are having a problem with a script. I will explain a few things so everything is clear for you. We are a member from a website: www.onderdelenzoeker.nl Through this website customers can ask for used carparts. If we have these parts in stock we can send the customers an email trough this website. (we are loggin in at leden.onderdelenzoeker.nl) We don't have a regular stock and price so every email we send is unique. That is why we are using this script. When we are sending a customer an email, this script will put the parts in our webshop with the prices. The customer will get an email with a unique link and can order the parts and pay trough the internet. But now the problem , this script won't work the first time. If we fill in a form and send it the first time the script won't work (the customer is getting an email but without the link and the parts are not in the webshop). If we fill in the same form a second time and send it the script is working and the customer is getting an email with a link and the parts are in the shop. Now the script is working in IE and we are using Trixie (is the same like greasemonkey is for FF) I hope I have written down all the information you need. And I hope there is somebody who can help me out. Thank you for your time and effort. Nicole This is the script: PHP Code: // ==UserScript== // @name onderdelenzoeker.nl Extractor for ie // @namespace http://www.autodemontage-wlubbers.nl // @description Adds products to the autodemontage-wlubbers.nl webshop width the information form the onderdelenzoeker.nl website when a users request a product. // @date 09.05.2011 // @version 1.0.2 // @require http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js // @include http://leden.onderdelenzoeker.nl/* // ==/UserScript== var merk; var model; var bouwjaar; var base_url = 'http://www.autodemontage-wlubbers.nl/shop/admin/services.php?action='; $(document).ready(function(){ setTimeout('replace_button()',500); }); replace_button = function(){ if($('.info').find('td:eq(7)').length!=0){ merk = $('.info').find('td:eq(7)').html().split(' ')[0]; model = $('.info').find('td:eq(10)').html(); bouwjaar = $('.info').find('td:eq(13)').html().replace(/[^A-Za-z0-9 .]/,''); $('.info:eq(4)').find('button').after('<input type="button" class="button" onclick="addProjectToShop();" style="width:100%" value="Verstuur gegevens naar aanvrager" />'); $('.info:eq(4)').find('button:eq(0)').remove(); $('body').after('<iframe style="display:none;" id="sendFrame" />'); $('#sendFrame').attr('src',base_url+'login&pass=q6pk4mcn5kzy5hppg0bcq'); } setTimeout('replace_button()',1000); } addProjectToShop = function (){ $('body').after('<div style="position:fixed;top:'+(window.innerHeight/2-100)+';left:'+(window.innerWidth/2-200)+';width:400px;height:200px;border:1px solid black;background:white;" id="loadingFrame" ><h1>Sending...</h1></div>'); var length = 10; var sPassword = ""; for (i=0; i < length; i++) { numI = getRandomNum(); while (checkPunc(numI)) { numI = getRandomNum(); } sPassword = sPassword + String.fromCharCode(numI); } var int_ = 200; $('.info:eq(4)').find('label').each(function(){ var parent = $(this).parent().parent().parent(); if(parent.find('input:eq(0)').attr('checked')) { setTimeout('$(\'#sendFrame\').attr(\'src\',\''+base_url+'addProduct&pass=q6pk4mcn5kzy5hppg0bcq&code='+sPassword+'&merk='+merk+'&model='+model+'&bouwjaar='+bouwjaar+'&item='+$(this).html()+'&prijs='+parent.find('input:eq(1)').val()+'&statiegeld='+parent.find('input:eq(2)').val()+'&verzendkosten='+$('#verzendkosten').val()+'&garantie='+parent.find('select option:selected').text()+'\');',int_); int_ = int_ + 200; } }); setTimeout('$(\'#sendFrame\').attr(\'src\',\''+base_url+'logout\');',int_); $('textarea').val($('textarea').val()+"\nU kunt de producten via onze webshop bestellen.\nKlik of kopieer de onderstaande link in uw browser.\nhttp://www.autodemontage-wlubbers.nl/shop/index.php?route=product/product/refcode&refcode="+sPassword); setTimeout('$(\'#loadingFrame\').remove();$(\'#sendFrame\').remove();validate_and_submit();',4000); return false; } getRandomNum = function () { var rndNum = Math.random() rndNum = parseInt(rndNum * 1000); rndNum = (rndNum % 94) + 33; return rndNum; } checkPunc = function (num) { if ((num >=33) && (num <=47)) { return true; } if ((num >=58) && (num <=64)) { return true; } if ((num >=91) && (num <=96)) { return true; } if ((num >=123) && (num <=126)) { return true; } return false; } 1 down vote favorite I do have the countdown script (see link below) to display the time between current time and the date given in real-time. However, I want to achieve to display the time difference between a given start and end time. Right now, it calculates from the current server time to the end time. I want to be able to set up my own start time and end time. Here is what I have: http://jsfiddle.net/BgEtE/ thank you for help So this is my first thread and I am a noob at javascript so please forgive obvious mistakes. I am try to make images float across the screen horizontally. Ideally I would like them to come from both sides and be at different y positions. The problem I am having is that I can only seem to get one to move at a time. Another problem is that when they move off to the right of the screen it expands the viewable size of the site. So here's what I've come up with thus far. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<title>Image Mover</title>
<style>
DIV.movable { position:absolute; }
body {
background-color: #0CF;
}
</style>
<script language="javascript">
var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = 1000; //Ending Location - left
var dest_y = 5; //Ending Location - top
var interval = 1; //Move 10px every initialization
function moveImage() {
//Keep on moving the image till the target is achieved
if(x<dest_x) x = x + interval;
if(y=dest_y) y = y + interval;
//Move the image to the new location
document.getElementById("cloud").style.top = y+'px';
document.getElementById("cloud").style.left = x+'px';
//if ((x+interval < dest_x) && (y+interval < dest_y)) {
//Keep on calling this function every 100 microsecond
// till the target location is reached
window.setTimeout('moveImage()',100);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body background="backgroundgradient.png" onload="moveImage()">
<div id="cloud" class="movable">
<img src="cloud01.png" />
</div>
<script language="javascript">
var x = -100; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = 1500; //Ending Location - left
var dest_y = 5; //Ending Location - top
var interval = 1; //Move 10px every initialization
function moveImage01() {
//Keep on moving the image till the target is achieved
if(x<dest_x) x = x + interval;
if(y=dest_y) y = y + interval;
//Move the image to the new location
document.getElementById("plane").style.top = y+'px';
document.getElementById("plane").style.left = x+'px';
//if ((x+interval < dest_x) && (y+interval < dest_y)) {
//Keep on calling this function every 100 microsecond
// till the target location is reached
window.setTimeout('moveImage01()',10);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body background="web_layout/backgroundgradient.png" onload="moveImage01()">
<div id="plane" class="movable">
<img src="plane.png" />
</div>
</body>
</html>
Any help is greatly appreciated. Thanks Hello; I have been trying to find files referenced in Acrobat 9 Pro help regarding using javascript in PDF files. I am waiting or Adobe to send me a link I can use to change my password for their forums. Meanwhile, does anyone have good links to these references? Thanks so much JK I really thought this would work, a user goes to a page, selects a value from a select box then clicks a link to run a report using that hidden variable as a parameter. I am attempting to place the value in the URL to pass it. I'm sure the javascript is working, and maybe it's the HTML I've messed up - not sure. Here is the javascript (the alert does return the correct value): Code: function OnChangeDay() {
//assign the day id to the hidden variable $day
x=eval(document.getElementById("day_loc_id_select").value)
if(x) {
document.getElementById("test_day_id").value=x;
} else {
document.getElementById("test_day_id").value=0;
}
// test
alert(document.getElementById("test_day_id").value)
}
Here is the calling HTML: Code: <input type="hidden" name="test_day" id="test_day_id" value="">
<select name="day_loc_id" id="day_loc_id_select"
onchange="OnChangeDay()">
<option></option>
<?= form_options($day_loc_options) ?>
</select>
And here is the HTML that should send the value, but I get day= (nothing) Code: <a href='/depts/edoptions/excel_extract.php?ex=2&day=<? echo $test_day ?>'>SLIP Data to Excel</a> Can anyone point out where I've messed up? Thanks So this is how I setup an item in the list and it works fine but I can't fine the syntax for setting an option group in javascript. Cheers Daniel. Code: Users[0] = new Option("Text to show in list", "Item Value");
Hi , I need your help in toggling the causes validation property of a link button depending upon the value selected from the radio button list...if i select "yes" from radio button then the linkbutton causes validation=true...if i select "no" from radio button then the linkbutton causes validation =false..help me out people Hello, I am having some trouble with this Javascript slide show. At the moment when you click on the thumbnails they link to a larger image in a seperate browser page. I would really like to customize it so that the images open up in a smaller window on the same page. I'm sure this is something really simple but as of yet haven't been able to solve this little problem. I'm quite new to webdesign and would really appreciate some help. Thanks Hazel <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Exclusive Ionian</title> <script type="text/javascript"> <!-- var timeout = 500; var closetimer = 0; var ddmenuitem = 0; // open hidden layer function mopen(id) { // cancel close timer mcancelclosetime(); // close old layer if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; // get new layer and show it ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = 'visible'; } // close showed layer function mclose() { if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; } // go close timer function mclosetime() { closetimer = window.setTimeout(mclose, timeout); } // cancel close timer function mcancelclosetime() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null; } } // close layer when click-out document.onclick = mclose; // --> </script> <script> function changeimage(towhat,url, toImg){ if (document.images){ document.getElementById(toImg).src=towhat.src gotolink=url } } function sshow(){ window.location=gotolink } </script> <script language="JavaScript1.1"> var myimages=new Array() var gotolink="#" function preloadimages(){ for (i=0;i<preloadimages.arguments.length;i++){ myimages[i]=new Image() myimages[i].src=preloadimages.arguments[i] } } preloadimages("i/allegra/1.jpg","i/allegra/2.jpg","i/allegra/3.jpg","i/allegra/4.jpg","i/allegra/5.jpg") </script> <style type="text/css"> <!-- #sddm { margin: 0; padding: 0; z-index: 30} #sddm li { margin: 0; padding: 0; list-style: none; float: left; font: 11pt Trebuchet MS} #sddm li a { display: block; margin: 0 1px 0 0; padding: 0px 1px; width: 78px; background: #EDEFED; color: #999999; text-align: center; text-decoration: none} #sddm li a:hover { background: #EDEFED} #sddm div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #EDEFED; border: 0px solid #EDEFED} #sddm div a { position: relative; display: block; margin: 0; padding: 5px 10px; width: auto; white-space: nowrap; text-align: left; text-decoration: none; background: #EDEFED; color: #999999; font: 11pt Trebuchet MS} #sddm div a:hover { background: #F7CB96; color: #999999} --> </style> <link href="file:///E|/c/rou.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- --> </style> </head> <body> <br /> <table width="900" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#EFEFED"> <tr> <td width="900" bgcolor="#EFEFED"> <div align="center"> <p><a href="javascript:sshow()"><img src="i/allegra/1.jpg" name="targetimage" width="900" height="425" hspace="0" vspace="15" border="0" id="targetimage"><br /> </a> <a href="file:///E|/i/allegra/1.jpg" onmouseover="changeimage(myimages[0],this.href, 'targetimage')"><img src="i/allegra/1s.jpg" width="180" height="85" hspace="0" vspace="0" border="0"></a><a href="file:///E|/i/allegra/2.jpg" onmouseover="changeimage(myimages[1],this.href, 'targetimage')"><img src="i/allegra/2s.jpg" width="180" height="85" hspace="0" vspace="0" border="0" /></a><a href="file:///E|/i/allegra/3.jpg" onmouseover="changeimage(myimages[2],this.href, 'targetimage')"><img src="i/allegra/3s.jpg" width="180" height="85" hspace="0" vspace="0" border="0" /></a><a href="file:///E|/i/allegra/5.jpg" onmouseover="changeimage(myimages[4],this.href, 'targetimage')"><img src="i/allegra/4s.jpg" width="180" height="85" hspace="0" vspace="0" border="0"></a><a href="file:///E|/i/allegra/4.jpg" onmouseover="changeimage(myimages[3],this.href, 'targetimage')"><img src="i/allegra/5s.jpg" width="180" height="85" hspace="0" vspace="0" border="0" /></a></p> </div></td></tr> <tr> <td valign="top" bgcolor="#EFEFED"><br /> <p align="left" class="style9"><br /> <br /> </p></td> </tr> </table> <p align="center"> </p> </body> </html> hi everyone im here again begging for your help im innocent in this field is there a javascript for setting up a limit in form submit attempts by which someone's attempts can be reset for given time? Shall we say you could try again after 10minutes or tommorow or whatsoever. for example in my form: <form blahblahblah...> <input value=""...blahblahblah/> (then here it goes my problem, if the input value above IS NOT EQUAL to "MYUSERNAME" then limit the form submission attempts to 10 tries, else a warning box will appear saying "You have reach the maximum tries per day") <input type="submit" value="Submit"/> </form> thank you so much and may the God Bless you for your kindness! Hi I am new to programming have tried to write a simple HTML page and servlet. Using tomcat. Added a javascript validation function. However when I type wrong it works the first time, displays alert and returns to entry form. on second attempt type in wrong again, expected to see alert and return to entry form but it submits. I am new to programmng and could do with some help can not find any clue, answer to this problem. Have checked javascript is ticked in Firefox 5.0. Set up is I have a HTML page with one javascript check function at present for test development. It is linked to a servlet in tomcat. Problem is when I enter wrong the first time, get alert message and it returns to the HTML orginal page. However if I click on entry field and enter wrong again. It submits the form, does not give an alert or return to the orginal form? Has any one got a solution or is this how validation should work. Code is: Code: <HTML><head><title>Creation of POs</title>
<H1>Purchase Order</h1>
<script type="text/javaScript">
function check() {
check = document.forms[0].SLine1.value;
if(check=="wrong"){
alert("enter correct info");
return false;
} else {
return true; }
}
</script></head><body bgcolour="yellow">
<form method="GET" action="Distest_session30a_vs1" onSubmit="return
check()">
various inputboxes and messages
<table>
<tr><td><input type="text" name="SLine1"></td></tr>
various other lines of inputs boxes
</table>
<Input type="submit" value="Send now">
</form></body></html>
Thanks in advance for any help people can give spent a lot of time on this already and can think of nothing else to try to resolve. Using firefox 5.0, check and javascript is enabled? Basically, i am creating an expandable/collapsible menu. which works fin in FF and chrome, but not in IE. this is the code i can narrow it down to that is not working: Code: window.addEvent('domready', function() {
SqueezeBox.initialize({});
$$('a.modal').each(function(el) {
el.addEvent('click', function(e) {
new Event(eX).stop();
SqueezeBox.fromElement(el);
});
});
});
it keeps giving me errors, but when i take it out, it stops. it works in FF just fine and in chrome just fine. but in IE, it loads with errors and then the function is not working. this is the code for the actual placement of the function: Code: echo '<div class="abstract">';
echo '<div class="top">';
echo '<h2 class="gold bold md-2">';
echo wordwrap($row['vp_name'], 50, '<br>');
echo '</h2>';
echo '<span class="md">';
echo 'Hotel: ';
echo '</span>';
echo '<strong class="md">';
echo wordwrap($row['vp_hotel'], 50, '<br>');
echo '</strong>';
echo '<br />';
echo '<span class="md">';
echo 'Price Range: ';
echo '</span>';
echo '<strong class="md">';
echo $row['vp_price'];
echo '</strong>';
echo '<br />';
echo '<p>';
echo 'Details: ';
echo '<span class="expand blue">Expand</span> | <span class="collapse blue">Collapse</span>';
echo '</p>';
echo '</div>';
echo '<div style="overflow:hidden;">';
echo '<div class="more-details clear">';
echo '<ul>';
echo '<li>';
echo $row['vp_desc'];
echo '</li>';
if(!empty($row['vp_terms'])){
echo '<li>';
echo $row['vp_terms'];
echo '</li>';
}
if(!empty($row['vp_website'])){
echo '<li>';
echo '<a href="' . $row['vp_website'] . '" title="" rel="nofollow" target="_blank" class="md">Visit Website</a>';
echo '</li>';
}
echo '</ul>';
echo '</div>';
echo '</div>';
echo '</div>';
So I've been working on this code for the day, and when I choose one radio button and click convert, it gives me the value and disables the box that shows the value. When I go to click the other radio button to do another conversion, it freezes up. I really am just trying to figure out how to make this code functionable whether you choose one radio button and do the conversion, or you want to do the other conversion without stalling out. I can't seem to find the bugs since I'm a newbie. Code: var $ = function (id) {//enables you to use $ instead of all the blah blah blah nonsense
return document.getElementById(id);
}
var temperature = function (){//This function converts the value the user provides
if($("to_celcius").checked == true)//if checked, then do this conversion
{
$("degrees_celcius").disabled = true;
var far = parseFloat($("degrees_fahrenheit").value );
if(isNaN(far))//if its not a number then it gives the alert to enter a valid temperature
{
alert("Please enter a valid temperature.")
return;
}
var far_cel =Math.round((far-32) * 5/9);//conversion assigned to variable
$("degrees_celcius").value = far_cel;
}else ($("to_fahrenheit").checked ==true)//if the other radio button isn't clicked, then this conversion
{
$("degrees_fahrenheit").disabled = true;
var cell = parseFloat($("degrees_celcius").value);
if(isNaN(cell))//if its not a number then it gives the alert to enter a valid temperature
{
alert("Please enter a valid temperature.")
return;
}
var cel_far = Math.round(cell * 9/5 + 32);
$("degrees_fahrenheit").value = cel_far;//conversion variable equals the value of text box "degrees_fahrenheit"
}
}
function reset()//resets the text box fields
{
$("foofoo").reset();
}
window.onload = function(){//handles all the onload activities
$("convert").onclick = temperature;
$("convert").onchange = temperature;
//$("to_celcius").onchange = reset;
//$("to_fahrenheit").onchange = reset;
}
Code: <body>
<form id="foofoo" name="foofoo">
<div id="content">
<h1>Convert temperature</h1>
<input type="radio" name="conversion_type" id="to_celcius" />From Fahrenheit to Celcius<br />
<input type="radio" name="conversion_type" id="to_fahrenheit" />From Celcius to Fahrenheit<br />
<br />
<label>Degrees Fahrenheit:</label>
<input type="text" id="degrees_fahrenheit" name="cat" class="disabled" /><br />
<label>Degrees Celcius:</label>
<input type="text" id="degrees_celcius" name="poo" class="disabled" /><br />
<br />
<input type="button" id="convert" value="Convert" /><br />
<br />
</div>
</form>
</body>
Hi, Wonder if you could help I have a js issue with i.e, my gallery works fine in ff but not in ie. Any ideas heres the link http://www.sparekeys.org.uk/ Hi, Can anyone tell me why the following js code fails in Mozilla? I call the function from: <tr><td><a href=\"javascript:;\" onClick=\"javascript:ChangeFrame('{$link}')\" ><img src='{$thumbs_fr}' border=0></a></td></tr> Code: var ie45,ns6,ns4,dom;
if (navigator.appName=="Microsoft Internet Explorer") ie45=parseInt(navigator.appVersion)>=4;
else if (navigator.appName=="Netscape"){ ns6=parseInt(navigator.appVersion)>=5; ns4=parseInt(navigator.appVersion)<5;}
dom=ie45 || ns6;
var http=createRequestObject();
var objectId = '';
var loadok = 0;
function createRequestObject(htmlObjectId){
var obj;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
obj = new ActiveXObject("Microsoft.XMLHTTP");
}
else{
obj = new XMLHttpRequest();
}
return obj;
}
function sendReq(serverFileName, variableNames, variableValues,objId) {
var paramString = '';
objectId = objId;
variableNames = variableNames.split(',');
variableValues = variableValues.split(',');
for(i=0; i<variableNames.length; i++) {
paramString += variableNames[i]+'='+variableValues[i]+'&';
}
paramString = paramString.substring(0, (paramString.length-1));
if (paramString.length == 0) {
http.open('get', serverFileName);
}
else {
http.open('get', serverFileName+'?'+paramString);
}
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if (http.readyState == 4) {
responseText = http.responseText;
getobj(objectId).innerHTML = responseText;
} else {
getobj(objectId).innerHTML = "<br><div align=center><img src='images/loading.gif' border=0><br>Loading content ...</div>";
}
}
function change_icon(imgDocID,url) {
document.images[imgDocID].src = url;
}
function showhide(id) {
el = document.all ? document.all[id] : dom ? document.getElementById(id) : document.layers[id];
els = dom ? el.style : el;
if (dom){
if (els.display == "none") {
els.display = "";
} else {
els.display = "none";
}
}
else if (ns4){
if (els.display == "show") {
els.display = "hide";
} else {
els.display = "show";
}
}
}
function getobj(id) {
el = document.all ? document.all[id] : dom ? document.getElementById(id) : document.layers[id];
return el;
}
function showobj(id) {
obj=getobj(id);
els = dom ? obj.style : obj;
if (dom){
els.display = "";
} else if (ns4){
els.display = "show";
}
}
function hideobj(id) {
obj=getobj(id);
els = dom ? obj.style : obj;
if (dom){
els.display = "none";
} else if (ns4){
els.display = "hide";
}
}
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
function openPopUp(url, windowName, w, h, scrollbar) {
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scrollbar ;
win = window.open(url, windowName, winprops);
if (parseInt(navigator.appVersion) >= 4) {
win.window.focus();
}
}
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName]
}
else {
return document[movieName]
}
}
function sendToFlash () {
var txt = document.getElementById("inputField").value;
var txtBold = document.getElementById("txtBold").value;
var txtItalic = document.getElementById("txtItalic").value;
var txtColor = document.getElementById("txtColor").value;
var txtFont = document.getElementById("ls_font").value;
var txtSize = document.getElementById("ls_size").value;
getobj('NDKPhoto').sendText(txt,txtFont,txtColor,txtSize,txtBold,txtItalic);
return false;
}
function ChangeFrame (url) {
getobj('NDKPhoto').sendFrame(url);
}
function ChangeClipart (url) {
getobj('NDKPhoto').sendClipart(url);
}
function updateFile(outFile) {
furl = 'act:savecam|url:'+outFile;
sendReq('index.php', 'cmd', furl,'cam_result');
showobj('cam_result');
}
function Show_Select_Color() {
var newcolor = showModalDialog("select_color.html", "000000", "resizable: no; help: no; status: no; scroll: no; unadorned: no; dialogLeft:400; dialogTop:500;");
if (newcolor != null) {
document.getElementById("txtColor").value = newcolor;
document.getElementById("cl_pick").src = "pick_color.php?c="+newcolor;
sendToFlash();
}
}
function Dao_Gia_Tri(obj) {
var num = document.getElementById(obj).value;
if (num!=1) document.getElementById(obj).value = 1;
else document.getElementById(obj).value = 0;
sendToFlash();
}
function gotopage(p,cat){
change_frame_page(p,cat);
}
function change_frame_page(p,cat) {
furl = 'act:jsload|sub:frame|p:'+p+'|cat:'+cat;
sendReq('index.php', 'cmd', furl,'displayFrame');
}
function gotopage_clip(p,cat){
change_clip_page(p,cat);
}
function change_clip_page(p,cat) {
furl = 'act:jsload|sub:clip|p:'+p+'|cat:'+cat;
sendReq('index.php', 'cmd', furl,'displayClipart');
}
Hi, I am using googles O3D software and it uses a javascript base, one of there plugins works in Firefox only and not Internet Explorer I was wondering if anyone here could help me find out why it isnt working in IE and even how to fix it, here is the page that works in firefox but not IE http://o3d.googlecode.com/svn/trunk/...edesigner.html Many Thanks, Simon I am haivng a little problem with this js and was wondering if anyone had any idea on how to fix it. Here is the issue: Visit: http://www.test.trpn.com/1/cgi/page.cgi?g=;d=1 (the guy at the footer with numbers) Now unless you are using IE, you will notice that when you try to click on search-box and type anything it won't work. The only way to make any input field work is by first right clicking on it and then it will accept input. Test site works normally without the js at footer. Here is the URL with full JS: http://www.test.trpn.com/ratenow/rate.js I have 'no clue' what is wrong, however if someone can tell me how to fix this, it would be much appreciated. Thanks. |
|||||||