|
HTML - Swapping Input With Javascript
I have this script:
HTML Code: <script>
function upload()
{
document.getElementById("filebox").style.visibility='visible';
document.getElementById("namebox").style.visibility='hidden';
document.getElementById("newfile").value='1';
}
</script>
<form method="post" enctype="multipart/form-data">
<table>
<tr><td>Bestand:</td><td colspan="2">
<input type="hidden" id="newfile" name="newfile" value="0" />
<span id="filebox" style="visibility:hidden;">
<input type="file" name="uploadedfile" style="width:300px;" />
</span>
<span id="namebox">
<input name="filename" type="input" style="width:300px;" value="<?php echo $row['bestand'] ?>" DISABLED="DISABLED" />
<a href="javascript:upload()">New File</a>
</span>
</td></tr>
...more form...
</table>
</form>
My problem is now that the ''filebox" and "namebox" are not at the same place. I want that if a use presses 'New File' the "namebox" is hidde and ''filebox" appears at exact the same place as "namebox" was. how to do this? Similar TutorialsHi. I need to do a roll over image swap. When the user rolls over a button I want an image elsewhere on the page to change to a relevant image. i.e. When the user rolls over the Commercial Button, an image int he center of the screen changes to show an image of a commerial bill board. I'm using Dreamweaver mx 2004. I'm sure I had seen the tutorial in the Dreamweaver help files, but now I cannot find it. Can anybody direct me to where I need to look to get this sorted. Cheers. Leroy Hey guys, I am brand new to HTML. I managed to make it so that when I hover a mouse over an image it will change, like for a menu link button. Its a great effect. I got to thinking about it, and heres something I would LOVE to do: Have a menu link button, at the top of the page, when the mouse scrolls over it another picture changes below it as well as the button changing. So, I would have 4 pics all together. Menu1.jpg (default) Menu2.jpg (when the mouse is over it) Picture1.jpg (default, is a seperate picture below menu1.jpg) and Picture2.jpg (changes from picture1.jpg when the mouse is over menu1.jpg!) I can't seem to pull that off tho... Heres what I kinda attempted to do... <img src="forum2.jpg" style="border: none" name="forum2" <a href="URL"> <img src="forum1.jpg" style= "border: none" name="forum" onmouseover="forum.src='forum2.jpg'" onmouseover="forum2.src='forum1.jpg'" onmouseout="forum.src='forum1.jpg'"/> </a> Ok, I have a button, which i will call button.jpg I have a picture, which I will call picture.jpg I can make the image of the button change when I hover over it, but I ALSO want picture.jpg to change. The other pics are button2.jpg and picture2.jpg So when I hover over button.jpg it will change to button2.jpg and picture.jpg will change to picture2.jpg Any help? Hi there, I'm currently working on http://www.darkboutique.co.uk/DEMO/index.html (WARNING: It is very pink) and I cannot get the text on the right, Recent posts, categories etc. to go to the left. I think this is a HTML problem. Can anyone offer advice please? Thanks Why is this not working? (when i search hiscores it works, but not Google) Quote: <html> <head> <title></title> <script type="text/javascript"> function action( inStr ){ var a = "http://hiscore.runescape.com/hiscorepersonal.ws?user1="; var b = "http://www.google.com/search?q="; var c = document.sform; if( inStr == "h" ){ c.action = a; }else if( inStr == "g" ){ c.action = b; }else{ alert("I don't know where you want to go!!!"); } c.submit(); return true; } </script> </head> <body> <form method="get" action="#" target="_blank" name="sform"> <input name="user1" size="12" maxlength="12" value="" style="font-size: 10px;" type="text"> </form> <br> <input type="button" name="btnH" value="Hiscores" style="font-size: 10px;" onclick="action('h');"> <input type="button" name="btnG" value="Google" style="font-size:10px" onclick="action('g');"> </body> </html> I basically have some free code I found online for creating an overlay that reacts to javascript. It contains a quick time plugin and streams video when the user clicks a link. This is the code exactly as I received it and functions great. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style>
#displaybox {
z-index: 10000;
filter: alpha(opacity=50); /*older IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
-moz-opacity: .50; /*older Mozilla*/
-khtml-opacity: 0.5; /*older Safari*/
opacity: 0.5; /*supported by current Mozilla, Safari, and Opera*/
background-color:#000000;
position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}
</style>
<script>
function clicker(){
var thediv=document.getElementById('displaybox');
if(thediv.style.display == "none"){
thediv.style.display = "";
thediv.innerHTML = "<table width='100%' height='100%'><tr><td align='center' valign='middle' width='100%' height='100%'><object classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' codebase='http://www.apple.com/qtactivex/qtplugin.cab' width='640' height='500'><param name='src' value='http://cowcast.creativecow.net/after_effects/episodes/Shape_Tips_1_POD.mp4'><param name='bgcolor' value='#000000'><embed src='http://cowcast.creativecow.net/after_effects/episodes/Shape_Tips_1_POD.mp4' autoplay='true' pluginspage='http://www.apple.com/quicktime/download/' height='500' width='640' bgcolor='#000000'></embed></object><br><br><a href='#' onclick='return clicker();'>CLOSE WINDOW</a></td></tr></table>";
}else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
return false;
}
</script>
</head>
<body>
<div id="displaybox" style="display: none;"></div>
<a href='#' onclick='return clicker();'>Open Window</a>
</body>
But bugging/stuttering and browser incompatibility has made me want it to be a .swf file instead. So now I have a very basic flash object that plays my movie, splash.swf. Here is the code and it too functions perfectly: Code: <object width="640" height="480" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/ pub/shockwave/cabs/flash/swflash.cab"> <param name="SRC" value="splash.swf"> <embed src="splash.swf" width="640" height="480"></embed> </object> So now I have two independently working bits of code - one which opens the transparent overlay and plays a video using a quicktime object, and another that is simply a flash object to replace that quicktime object. So what I've done is replaced everything in between the [object]..[/object] in the first code with everything in between the [object]..[/object] in the second code, producing the following new code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style>
#displaybox {
z-index: 10000;
filter: alpha(opacity=50); /*older IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
-moz-opacity: .50; /*older Mozilla*/
-khtml-opacity: 0.5; /*older Safari*/
opacity: 0.5; /*supported by current Mozilla, Safari, and Opera*/
background-color:#000000;
position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}
</style>
<script>
function clicker(){
var thediv=document.getElementById('displaybox');
if(thediv.style.display == "none"){
thediv.style.display = "";
thediv.innerHTML = "<table width='100%' height='100%'><tr><td align='center' valign='middle' width='100%' height='100%'><object width="640" height="480"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab">
<param name="SRC" value="splash.swf">
<embed src="splash.swf" width="640" height="480"></embed>
</object><br><br><a href='#' onclick='return clicker();'>CLOSE WINDOW</a></td></tr></table>";
}else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
return false;
}
</script>
</head>
<body>
<div id="displaybox" style="display: none;"></div>
<a href='#' onclick='return clicker();'>Open Window</a>
</body>
But what is this? By replacing the working quicktime object with the working flash object, Dreamweaver produces a syntax error that wasn't there before, and breaks the entire script. Clearly the script is referencing something within the tags that I am replacing, although it's not clear to me what. This seems like an easy question, but what's the correct way to get user input and submit to a function? I'm able to get it to work like the following, but it doesn't seem like the 'right' way to do things: Code: <form name="some_name" action="doesnt-exist.php" onSubmit="return some_function()"><input type="text" name="query" /></form> And then I catch the variable in some_function() and return false so the page doesn't try to contact doesnt-exist.php. Then I'm able to use the input for my function. Like I said, this works, but is there a cleaner, more standard way? Thank you! Ok so here is my issue, i am new to web site design and i have a simple project i would like to work on. I am looking to have an entry box with a simple submit button, then i would like the submissions to be displayed below in the order they are submitted. I would also like to limit the number of submissions that show on the page at a given time by creating multiple pages that can be viewed. This seems like a very simple issue but im having trouble finding solutions on the web. Would inserting a java app or some other secondary tool be better? Any help is appreciated -Matt Hi What is wrong with this, it can't post text only post checkbox <html> <head> </head> <body> <FORM action="http://localhost:8182/items" method="post"> <P> <LABEL for="firstname">First name: </LABEL> <input type="text" value = "Hamada" id="firstname"><BR> <LABEL for="lastname">Last name: </LABEL> <input type="text" value = "I hate my life" id="lastname"><BR> <LABEL for="email">email: </LABEL> <input type="text" id="email" value = "I hate you"><BR> <INPUT type="radio" name="sex" value="Male"> Male<BR> <INPUT type="radio" name="sex" value="Female"> Female<BR> <input type="submit" value="Submit"> <INPUT type="reset"> </P> </FORM> </body> </html> Thanks Hi, I'm a newbie. I would like to know how do I display 2 labels and both inputs in the same row as shown in the attachment like state followed by input field followed by label for zip and followed by input within the same row of table in a form. Thanks in advance yls how to give margin or padding to the text inside in the input box? how to create a input-box with different 2 border color top and left........... hey guys, im really new to html. there is probably something really obvious that im missing here but, say i have and input box in html, what would i do in the onchange event to alert what the user typed in: <input type="text" onchange=(??!!)> for instance, if there was an input box and the user typed in "hello" into it, what would i put in the onchange event to alert "hello" Hope this makes sense! Thanks How do i save input from a client into a file on my computer? Code: <html> <head> <title>Register</title> </head> <form> Username: <input type="text" name="username"> <br> Password: <input type="text" name="password"> <br> Retype Password: <input type="text" name="confirmpass"> <br> <input type="submit" value="Submit"> </form> </html> - End - How do I store the input from the user? (username,password,confirmpass) Thank you -HTMLMW This might have already been answered but I need html code for this. "User input field" redirects to www.website.com/"user input".aspx Simple I think but I am going crazy trying to get it to work. I would like it to open to the page not a frame. Thanks Pete I'm trying to put default values in my Input fields, which are text fields, of course, but I have numeric input values so I want them on the right. Is there any way to do this? here's a snippet of my code so's you can see what I mean: <form action="" id="calculate_form"> <div> <table style="width: 937px; height: 438px;"> <tbody> <tr> <td> Height: (Metres) </td> <td style="text-align: center; vertical-align: top;"> <p><input value="0" name="height" id="height" /> </p> </td> <td> Cement Price/20kg Bag<br /> </td> <td><input value="7" name="cementprice" id="cementprice" /></td> </tr> <tr> <td>Breadth: (Metres)</td> <td style="text-align: center; vertical-align: middle;"> <p><input value="0" name="breadth" id="breadth" /> and so on........... Perhaps it can't be done in HTML? In that case, what could it be done in? i've got a javascript script on this page, to do the calcs. how i do. I have created a form and I want that every time you click the button vote on the text join a number more <form name="Vote"> <input type="text" value="" name="sky"> <input type="hidden" value="1" name="blue"> <input type="button" value="Vote" onClick="document.Vote.sky.value =(document.Vote.blue.value)"> </form> Thanks How increase the value? Hello guys. I'm kinda new to this so please pardon me if it sounds brainless. I need a simple solution (in fact nothing more than a form that sends data to my email when OK is clicked) for my website. It should be like: --------------------- Enter your name: Enter your email: Enter your mobile number (optional): Select your product:[drop-down list] Quantity: Select delivery method:[drop-down list] OK --------------------- Then thereafter the information is sent to my email. There'll be a pop up if there are blanks other than the mobile number (or we can completely ignore that if this is not possible) and returns to the page instead of sending. Is this possible? Encryption would be nice but is not necessary since this is very low-end application. Cheerio, Bill. I am creating a small crm and would like to have the input fields look like regular text until clicked on. At that point I would like the input field to be edited....is this possible? For example... First name : James would appear like this....when clicking on James, it puts a input box so you are able to edit the field. I will be using php. I wanted to make a form that, by email, submits an email adress. but instead of just saying <input type="text" name="email">, i want it so is has to be a account at any email host that i want. i would make a text box and call it "user" and a email dropdown list with email server, e.g. gmail, yahoo etc. I would receve an email like user="someemail"&email="yahoo.com". i want it as email="someemail@yahoo.com". heres the code: HTML Code: <form action="mailto:me@email.com"> <BR><input type="text" name="accountname" value="your email adress"> <BR><select name="host"> <option value="@gmail.com">Gmail.com</option> <option value="@yahoo.com">yahoo.com</option> <option value="@hotmail.com">hotmail.com</option> </select> Thnks, Aarmale |
|||||||