|
JavaScript - Dynamically Add/remove Rollover Code To Js File.
Hi,
When the user clicks a button, I dynamically add entries to the page that have an X button rollover created with it as a means to remove the entry. The code would work just fine except that every time I add an element, I need to add the following line of javascript code: setrollover("images/tabs-icons/over-address_remove.png", 'address_remove1'); where the number '1' is replaced by whatever number of rollover I'm at (as new entries are added, it'd be rollover1, rollover2, etc. Is there a way to add, and possibly even remove, a line of javascript from a .js file? I'd like to do something like: Once the user clicks the button, and the entry is created, add/append "setrollover(\"images/tabs-icons/over-address_remove.png\", \"address_remove1" + i + "\");" to rollovers.js. A more challenging task would be to : When that element is removed, remove that line from the file. Below is a working example of two rollover images that differ only by the number. Code: <html>
<head>
</head>
<script>
//THIS SCRIPT BLOCK IS NORMALLY IN A SEPARATE FILE THAT I CAN PROBABLY APPEND/REMOVE FROM.
<!--
// copyright 1999 Idocs, Inc. http://www.idocs.com/tags/
// Distribute this script freely, but please keep this
// notice with the code.
var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
if (! document.images)return;
if (pageImageName == null)
pageImageName = document.images[document.images.length-1].name;
rollOverArr[pageImageName]=new Object;
rollOverArr[pageImageName].overImg = new Image;
rollOverArr[pageImageName].overImg.src=OverImgSrc;
}
function rollover(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
if (! rollOverArr[pageImageName].outImg)
{
rollOverArr[pageImageName].outImg = new Image;
rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
}
document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}
function rollout(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}
//-->
setrollover("images/tabs-icons/over-address_remove.png", 'address_remove');
setrollover("images/tabs-icons/over-address_remove.png", 'address_remove1');
</script>
<body>
<span id="AddressesVisited" style="font-weight:bold; cursor:pointer;">
<a onMouseOver="rollover('address_remove')" onMouseOut="rollout('address_remove')" style="cursor:pointer;">
<img src="images/tabs-icons/normal-address_remove.png" name="address_remove" title="remove" alt="remove"></a> <span class="address-
text">Entry1</span><br>
<a onMouseOver="rollover('address_remove1')" onMouseOut="rollout('address_remove1')" style="cursor:pointer;">
<img src="images/tabs-icons/normal-address_remove.png" name="address_remove1" title="remove" alt="remove"></a> <span class="address-
text">Entry2</span><br>
</span>
</body>
Similar TutorialsHi, I'm trying to integrate an address finder (http://www.craftyclicks.co.uk/) into my shopping cart (OsCommerce). I can get it to work but I need to add my own functionality. I'm not very experienced with JavaScript and my head has entered an infinite loop by now. The problem is that the address finder script can change the selected country in a drop-down list depending on the postcode entered by the user (using the onblur event handler). What I need it to do is to remove all other countries depending on the postcode. I can get it to remove all other countries but how do i return to the original list of countries when the postcode is changed again? Once all other counties are removed, the drop-down list will obviously only have one option left... I guess the question is also how does a function remember what it has done before, when it is called again? I have written this short test script as it is easier to work with than the craftyclicks oscommerce contribution: Code: <!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>
<title>HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
//<![CDATA[
function store(element) {
// store values
var cl = element;
var text_list = new Array();
var value_list = new Array();
var length = cl.length;
for (var foo=0; foo<length; foo++) {
text_list[foo] = cl.options[foo].text;
value_list[foo] = cl.options[foo].value;
alert("text array " + foo + " " + text_list[foo]);
alert("value array " + foo + " " + value_list[foo]);
}
populate(cl, text_list, value_list);
}
function populate(element, text, value) {
// populate options with previously stored values
var cl = element;
var length = cl.length;
cl.options.length=0;
for (var bar=0; bar<length; bar++) {
cl.options[bar]= new Option(text[bar], value[bar], false, false);
}
}
function crafty_set_country(code) {
var cl = document.getElementById('select');
store(cl);
for (var i=0; i<cl.length; i++) {
if (cl.options[i].value == code) {
alert(cl.options[i].value + " found");
var value = cl.options[i].value;
var text = cl.options[i].text;
cl.options.length=0;
cl.options[0]=new Option(text, value, true, true);
/*
for (var j=0; j<cl.length; j++) {
alert("second loop " + cl.options[j].text);
if (cl.options[i].value != code) {
cl.options[j]
}
}
*/
} else {
alert(cl.options[i].value);
}
}
}
//]]>
</script>
</head>
<body>
<form>
<select id="select">
<option value="10">ten</option>
<option value="20">twenty</option>
<option value="30">thirty</option>
<option value="40">fourty</option>
<option value="50">fifty</option>
<option value="60">sixty</option>
</select>
<input type="button" value="remove" name="button" onClick="crafty_set_country(50)">
<input type="button" value="repopulate" name="button" onClick="crafty_set_country(100)">
</form>
</body>
</html>
Many thanks! Martin Code: <!-- Add-in device.js files are placed here --> <div id="deviceScript"></div> What I have been doing is clearing this out when I select a new (add-in) device and append a script tag with its .src file. I have some vague idea that unhooking an external js file might remove its code from memory. If not is there a way to do so? Functions in different script files have the same name - for example, I use start() to set up each device. It seems that the latest device start() overwrites the one in memory - but I am not sure if overwrite means delete last one or whether there is some horrendous build up of dross going on. Any clarification appreciated. Beginner JavaScripter here. I'm wanting to run a piece of code (add rows) a specified amount of times based upon the number selected. Also, rows can be added after initial number has been specified. Example: User1 selects 2 -> 2 rows are added User1 goes back and selects 3 -> 1 row is added, making 3 rows total I've tried the following, but it seems to not take into account the number of rows already added. Any help is appreciated. Code: if (numSelected > 0) {
var counter = 0;
while (rowsAdded < numSelected ) {
function.addRow();
counter++;
}
}
Hi everybody, I have this File Upload control, whereby the user is granted a limit of 5 uploads. And so, the user clicks on "Attach Another File", and decides to attach a file ONLY in the first File Upload control. My problem is, I want the user to be able to click on an "X" beside every File Upload control, so that it will close those unnecessary (or unused) FIle Upload controls. How do I edit my code in JAVASCRIPT? Please advise. Code: <!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>
<title></title>
<script language="javascript" type="text/javascript">
var fileCount = 1;
function addOneFile()
{
++fileCount;
var div = document.getElementById("showFile"+fileCount);
if ( div != null ) div.style.display = "block";
}
</script>
<style type ="text/css">
.style37
{
color: Black;
margin-left: 99px;
}
</style>
</head>
<body>
<table cellpadding="5">
<tr>
<td style="vertical-align: top">
Attachment:
</td>
<td>
<input type="file" name="attachment" id="attachment" style="width:230px" />
<div id="showFile2" style="display: none;">
<input name="file2" type="file" />
</div>
<div id="showFile3" style="display: none;">
<input name="file3" type="file" />
</div>
<div id="showFile4" style="display: none;">
<input name="file4" type="file" />
</div>
<div id="showFile5" style="display: none;">
<input name="file5" type="file" />
</div>
<br />
<a href="javascript:addOneFile();" class="style37">Attach another File</a>
<br />
(Restricted to 5 uploads)
</td>
</tr>
</table>
</body>
</html>
Hi I have javascript which calls a load of Java applet functions, there are many of these, and the parameters are all the same. The only thing that changes is the name of the function to call. So here is an example of the Javascript: Code: function answercall()
{
try {
document.frm.response.value =
document.Telepop.Answercall(document.telepopfrm.extension.value);
} catch(err) {
alert(err.description);
}
}
function clearcall()
{
try {
document.telepopfrm.response.value =
document.Telepop.Clearcall(document.telepopfrm.extension.value);
} catch(err) {
alert(err.description);
}
}
function holdcall()
{
try {
document.telepopfrm.response.value =
document.Telepop.Holdcall(document.telepopfrm.extension.value);
} catch(err) {
alert(err.description);
}
}
etc, etc.... and the html like this: <input type="button" value="Answer" onclick="answercall()" /> <input type="button" value="Hangup" onclick="clearcall()" /> <input type="button" value="Hold" onclick="holdcall()" /> There does seem to be a lot of duplication here, so I was wondering of ways to reduce or eliminate the duplication. any ideas? AC hello i need help in deleting a code part, like: table, ul ... the problem is that when i use rss feeds, lot of them add some code parts that i don't need like: <ul class="similar-topics">, and it shows similar topics so, i want to remove this code part from the rss feed i think that i may add a javascript code to the rss template that brings the rss feeds, so as it remove the part i define i hope you help me doing this, even with another idea another idea is to use: http://pipes.yahoo.com i"m sure there is a way to cut parts from the code, but i couldn't get it yet and i'm still trying Regards Hi everyone, Here is my code that works flawlessly in IE but I can't get it to work in firefox. Can anyone tell me (please) what firefox doesn't like about this code? Code: <SCRIPT language="JavaScript" type="text/javascript">
//POPULATE COMBO BOX PER RADIO BUTTON CHECKED
function UpdateCombo()
{
var val = 0;
for( i = 0; i < document.notes.service.length; i++ )
{
if( document.notes.service[i].checked == true )
val = document.notes.service[i].value;
}
if (val=="phone")
{
document.getElementById("technical_issue_summary").options.length = 0
document.getElementById("technical_issue_summary").add(new Option("***Phone Issues***"," "));
}
}
</SCRIPT>
<TD align=left colspan=4><INPUT type="radio" name="service" ID="service" value="phone" checked onclick="UpdateCombo();">Phone
<INPUT type="radio" name="service" ID="service" value="cable" onclick="UpdateCombo();">Cable
<INPUT type="radio" name="service" ID="service" value="internet" onclick="UpdateCombo();">Internet
</TD>
Now, I obviously left unrelated code out here; but that code is the basic of what Im working with, but the combo box is just empty in firefox. Works fine in IE; so I'm guessing it doesn't like something with the code: Code: document.getElementById("technical_issue_summary").add(new Option("***Phone Issues***"," "));
Any guidance on this? Hi i have two images which are part of a rollover button that i want to have paused until the intro animation finishes. I have the javascript code but the rollover images are specified in the css. I just have the id to them in the html. I was wondering if anyone knew how to include the rollover files with the pausing javascript code. the files are profile.gif and profileover.gif. I tried to add the files to the preload part of the javascript but that didn't work. The website is www.creationindex.com/indextest.html thank you
Hey guys, Lookin' for a little help, not sure if it can even be done? hopefully someone has the answer. I'm trying to design myself an online portfolio; here's what I got so far... http://www.gregorymstevens.com/testsite/site.html As you can see my navigation is represented by each bird on the tree (every bird is a link), when you rollver one of the green birds they turn white, however, I am looking to not only have the green bird rollver to white but ALSO have the "choose a" image on the bottom right change to the corresponding page. For instance, when the mouse rolls over a bird-- this image: will turn into this image: while maintaining the original "white bird" rollover. Hopefully I'm explaining this correctly -- Any help greatly appreciated! Hi, I'm a beginner of JavaScript. I need the code for creating pgv_pvid and ssid. I had searched the web, and got some code, I wonder if the code is right: Code: var curDate = new Date(); var curMs = curDate.getUTCMilliseconds(); pgv_pvid = (Math.round(Math.random() * 2147483647) * curMs) % 10000000000; ssid = "s" + (Math.round(Math.random() * 2147483647) * curMs) % 10000000000; WScript.Echo(pgv_pvid) WScript.Echo(ssid) so i have code to make a popup via javascript and it works fine, but what actually pops up is an external file that i select (in my case test.html). i want all of the code of test.html to be in my index.html and when i call the popup it doesn't call an external file but instead calls the html code in the internal file (index.html)? possible? Code: <head>
<script language="javascript" type="text/javascript">
function popitup(url) {
newwindow=window.open(url,'name','status = 0,resizable = 0,height=500,width=600');
if (window.focus) {newwindow.focus()}
return false;
}
</script>
</head>
<body>
<a href="test.html" onclick="return popitup('test.html')">About</a>
</body>
what's in test.html? it's a form why? i need the code of test.html to access some global javascript variables in index.html Hey guys just using a simple Notepad++ to make a HTML page I've been trying to get a video working but its not turning out exactly well. I get an empty video page that won't load my video file. I downloaded JW Player and uploaded the javascript and player.swf to my folder. Then the following codes. Please Teach ME ! ----------------------------------------------------------- <html> <head> <script type="text/javascript" src="jwplayer.js"></script> </head> <body> <div id="container">Loading the player ...</div> <script type="text/javascript"> jwplayer("container").setup({ flashplayer: "player.swf", file: "Flyff Introduction.flv", height: 270, width: 480 }); </script> </body> </html> Hi everyone, I'm new here. This is my problem: I have a project done in Java that I would like to publish on the web. To do this I need some javascript or php script that allows me to see on one side the various packages of java file and in the other whenever I select a java file to view its contents into another window by highlighting the text with different colors for different methods, variables, and key word. I have some HTML that I want to put in a Javascript file and reference the HTML through external Javascript file. So I have my page, example.html Code: <html> <head></head> <body> <script type="text/javascript src="../js/external.js"> </script> </body> </html> external.js Code: document.write("<p class="txt_medium style4"> example.com<br />101 Street St.<br />City, ST, ZIP</p><p class="txt_medium style4">"The Best website." </p>");
The above code is all on one line, but is not displaying on the page. PHP is out of the question too (_._) Any thoughts? Can you place java code in an external javascript file (.js). For example can I do the following in my xx.js file. $(document).ready(function(){ <% execute some java code here %> ...execute some javascript code here... }) Can I do the above? Another question ... I know <% %> is to execute java code inside html. But what does <%-- - -%> mean? Thanks for any help. How come the below code is not woring for me? when someone comments on my facebook comments plugin I want to get an email. This is what i have Code: <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="fb-root"></div>
<script> window.fbAsyncInit = function() {
FB.init({
appId : '220041184732123', // App ID
channelUrl : '//http://www.corkdiscos.com/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.subscribe('comment.create', function(response){
// Here you need to do a call to some service/script/application
// to notify your administrator about new comment.
// I'll use jQuery ajax to call server-side script to illustrate the flow
$.post('mail.php', {
"action": "comment created",
"url_of_page_comment_leaved_on": response.href,
"id_of_comment_object": response.commentID
});
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<div class="fb-comments" notify="true" data-href="http://www.corkdiscos.com/testimonials.html" data-num-posts="30" data-width="544"></div>
</body>
</html>
I then have this php code to send me a mail in a mail.php file PHP Code: <?php $admin_email = 'corkdjs@gmail.com'; $commentID = $_REQUEST['id_of_comment_object']; $page_href = $_REQUEST['url_of_page_comment_leaved_on']; $message = "hello"; mail($admin_email, You have a new comment", $message); ?> what could be wrong and is there anyone that knows how to fix this to make it work? I am trying for a javascript code that would ask for the excel file location when run, fetch data from two columns till eof in an excel file (MS Excel 2010), append it to an existing text file and upload the plain text file to an ftp location. The ftp username, password and location needs to be hard coded in the script. Is this possible? Hi All, I have created my second Form to File Web Form thanks to some help from other members. Looks great. I am still new to HTML and Javascript, but basically I took my First Web Form coding (with the Java Script) and manipulated it so that it suited my needs for my 2nd Form (both are very close to being the same). For some reason, I can't get my Java Script validation to take effect. I was wondering if some one could try to pin point why it isn't functioning properly? Again it could be the most obvious thing, but please bear with me as I learn. Just for a little more clarity, I am going to list the things that I have changed to possibly make it easier to pin point: Added Fields: Department, SteetAddress, CityState Deleted: State/Research Accounts, Vendor Checkbox Modified: "Type" which is a radio button that I have changed the choices of. I beleive that's it...I will post my Java Script here and attach my Index File. Thank you in advance!! Code: /********************************************************************************
*
* FORM VALIDATION
*
********************************************************************************/
// get the value of a radio button group:
function getRBValue(grp)
{
if ( grp.length == null ) return grp.checked ? grp.value : null;
for ( var g = 0; g < grp.length; ++g )
{
if ( grp[g].checked ) return grp[g].value;
}
return null;
}
// trim a string
function trim(fld)
{
var val = fld.value.replace(/^\s+/,"").replace(/\s+%/,"").toUpperCase();
fld.value = val;
return val;
}
var echk = /^([a-z][\w\-\'\.]*)+\@([a-z][\w\-\'\.]+\.)+[a-z]{2,6}$/i
function emailCheck( fld )
{
var email = trim( fld );
fld.value = email;
return echk.test(email);
}
var digonly = /[^\d]/g
function formatPhone( fld )
{
var ph = fld.value.replace( digonly, "" );
if ( ph.length != 10 ) return;
fld.value = "(" + ph.substring(0,3) + ") " + ph.substring(3,6) + "-" + ph.substring(6);
}
var phchk = /^\(\d\d\d\) \d\d\d\-\d\d\d\d$/
function phoneCheck( fld )
{
return phchk.test(fld.value);
}
function validateForm( frm )
{
var oops = "";
if ( trim( frm.elements["Username."] ).length < 5 )
oops += "You must enter your first and last name\n";
if ( ! emailCheck( frm.elements["Email."] ) )
oops += "That does not appear to be a valid email address\n";
if ( trim( frm.elements["Department."] ).length < 3)
oops += "You must enter your department name\n";
if ( ! phoneCheck( frm.elements["Phone."] ) )
oops += "That is not a valid 10-digit phone number\n";
if ( trim( frm.elements["ShipToBuildingRoom."] ).length < 5 )
oops += "You must enter your building and room information\n";
if ( trim( frm.elements["StreetAddress."] ).length < 5 )
oops += "You must enter your street address information\n";
if ( trim( frm.elements["CityZip."] ).length < 5 )
oops += "You must enter your city and zip code information\n";
apptype = getRBValue( frm.elements["Type."] );
if ( apptype == null )
oops += "You must check one class\n";
var app = getRBValue( frm.RequireApprovalYesNo );
if ( app == null )
oops += "You must specify whether or not approval is required.\n";
if ( app == "Yes" )
{
if ( trim( frm.Approver ).length < 5 )
oops += "You must enter the name of the approver\n";
if ( ! emailCheck( frm.ApprovalEmail ) )
oops += "The approval email is not a valid email address\n";
}
}
function showapp(yesno)
{
document.getElementById("APP1").style.display =
document.getElementById("APP2").style.display =
document.getElementById("APP3").style.display =
yesno ? "" : "none";
}
</SCRIPT>
ok i have a script which will make a copy of the html in a div and place it into another div the problem with this it creates a duplicate element with the same id so what i want to know is can i create a new id based off old ids using a generic type script Code: function scope(e)
{
var popin = document.getElementById('popin');
popin.innerHTML = "<div class='container'>"+e.innerHTML+"</div>";
popin.style.display = "block";
}
this code is designed for taking content in a small div and placing it into a larger div to increase the viewing area so what i would need is sumthing that can look for Code: id="sum text" and maybe amend it to Code: id="sum textP" or sumthing to that extent if sum1 could point me in the right direction that would be great if my post is not clear enough just ask me to be more specific or sumthing and i will see what i can do to try and make it more clear if needed |
|||||||