|
JavaScript - Img In Anchor, Override Default From Onclick
I am dynamically appending an img to the inner HTML of an element, to add in help in the form of a clickable icon next to select elements. When the img is added to an anchor the image of course becomes part of the link, and clicking the image invokes the anchor's action. The img has an onclick handler which triggers the dynamic help pop-up. My problem is that I can't seem to block the default anchor action, and thus the anchor is invoked also. The img onclick handler is called before the anchor event is processed (an alert popup will block the anchor's execution until the alert is dismissed), but returning false from it does not block the anchor's action.
Any suggestions? I can move the img element to be a peer of the anchor element instead of a child, but I would like a programmatic fix instead of changing the way it interacts with the DOM if possible. Thanks. Similar TutorialsTo order a customized product from my site, the user has to upload an image and then submit text (separate steps but part of the same php form) before adding to their cart. Currently, the user must scroll back down from the top of the page to the next part of the form after each step which is more confusing than I would like. The first step of the form uses a straight forward <form> and I was able to add an action="#anchor" to jump down to where I set the first anchor. The second step is regrettably not so straight forward and I'm having trouble adding an anchor. After entering text, the user clicks a submit button which triggers an alert letting them know the text was submitted successfully. When the user clicks the okay button on the popup alert, I would like the page to jump down to the 'add to cart' portion. This is the button: Code: echo '<tr>
<td valign="bottom" colspan="2" align="center">
<input id="delete_button" class="button" type="submit" value="Attach Text" onclick="return( confirm( this.form ) );" />
</td>
</tr>';
And this is the alert: PHP Code: echo vmCommonHTML::scriptTag('', "function confirm( form ) { form.task.value='confirm_text'; alert('Your text was successfully attached.'); return true; }" ); How can I prevent the page from returning to the top after the user submits text? Thank you, Charlotte OK, I'm filling in for a coworker on a radio stations website. The station currently streams live online. I want to add an event tracking so I can track how many people are streaming. I'm really new to js, but I think I figured it out (keyword is "think"). However, there was already an onclick event within the anchor tag. Can I have two in the same tag? Is there a better way to do this? Code: <a href="/fmstream/listen.asx" onclick="window.open(this.href,'Listen','resizable=no,location=no,menubar=no,scrollbars=no,status=no,toolbar=no,fullscreen=no,dependent=no,width=400,height=400,status'); return false" onClick="pageTracker._trackEvent('Stream','Listen_Button','Stream_Live');">
<img src="/images/filecabinet/folder1/listen1.png" alt="listen1"></a>
i have a dropdownlist with some values,ex: One, Two and Three; One being the default value selected on load of dropdown list. When I select Two or Three, there is onselectedchange event fired and I can write custom code in handler. But I also want to do some custom handling when page is loaded and user justs clicks on default value of "One". I want to take an action when user clicks on default value, "One" of dropdwn. any suggestions/ideas? Hello, I am trying to save a dynamically created anchor's id onclick, but I am having a lot of trouble. Code: <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
</style>
</head>
<body onload="initAll();">
<div id="test"></div>
<script type="text/javascript">
var xhr = false; //global xhr variable
var allRequestIds = new Array();
var allRequestDates = new Array();
var allRequestNames = new Array();
var allRequestBriefs = new Array();
var allListLinks = new Array();
var allListItems = new Array();
var linkId; //global variable for clicked link's id; set to be the same as xml data's id; used to pull more data in next page
function initAll(){
if (window.XMLHttpRequest){ //initialize xmlhttprequest into xhr variable
xhr = new XMLHttpRequest();
}
else{}//ie stuff goes here
xhr.open("GET","xml/request.xml",true); //open connection
xhr.onreadystatechange=createLinks; //onreadystatechange call createLinks()
xhr.send(null);
}
function createLinks(){
if(xhr.readyState==4){
if(xhr.status==200){
if(xhr.responseXML){
var allRequests=xhr.responseXML.getElementsByTagName("request"); //save all requests into array
var newList=document.createElement("ol"); //create a new ordered list
for(i=0;i<allRequests.length;i++){ //arrays of each tag, and an array of links
allRequestIds[i]=allRequests[i].getElementsByTagName("requestId")[0].firstChild.nodeValue;
allRequestDates[i]=allRequests[i].getElementsByTagName("date")[0].firstChild.nodeValue;
allRequestNames[i]=allRequests[i].getElementsByTagName("name")[0].firstChild.nodeValue;
allRequestBriefs[i]=allRequests[i].getElementsByTagName("brief")[0].firstChild.nodeValue;
allListLinks[i]=document.createElement("a"); //create an array of links
allListLinks[i].appendChild(document.createTextNode(""+allRequestDates[i]+" "+allRequestNames[i]+" "+allRequestBriefs[i]+"")); //i don't know how to add a new line within createtextnode!!! wtf?! i wanted to add a <br />
allListLinks[i].setAttribute("href","somepage.html");
allListLinks[i].setAttribute("class","dynamicLink");
allListLinks[i].setAttribute("onclick","pullDetailed();");
allListItems[i]=document.createElement("li"); //create an array of list items
allListItems[i].appendChild(allListLinks[i]); //append each anchor into each list item
newList.appendChild(allListItems[i]); //append all list items into ordered list
}
document.getElementById("test").appendChild(newList); //append list into test paragraph
}
}
}
}
function pullDetailed(){
alert("function pullDetailed called!"); //this is just testing to see if this function has been called on anchor click
linkId=this.innerHTML.; //this doesn't work
alert(linkId);
}
</script>
</body>
</html>
does anybody have an ideas? thank you. Hello, So I have two pieces of Javascript attached to my open/close text boxes. One for the visibility function: Code: <script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
The other for changinging the image to reflect the text box's status (open of closed): Code: <script type="text/javascript">
var ImgPath='../images/portfolio/';
function changeImage (id) {
var tab = document.getElementById(id);
if (tab.src.match('open.png')) {
tab.src = ImgPath + 'close.png';
}
else {
tab.src = ImgPath + 'open.png';
}
}
</script>
The problem only shows further down the page, when I click to open a box it automatically goes back to the top of the page instead of staying at the user's current page position I would like it to stop changing the page position onclick. Any help would be much appreciated! I am trying to autofill a box by clicking a link (with return false). The function to autofill works with button tag but not in anchor tag - instead of returning false, the click event transitions to the href. Here is the simplified code. Any help is appreciated.Thanks <!DOCTYPE html PUBLIC"-// W3C//DTD Xhtml 1.0 Strict//EN"" http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Untitled Page </title> </head> <script type="text/javascript"> function autofill(frm){ frm.box2.value = 'sample_value'; } </script> <body> <FORM NAME="browse" ACTION="<TMPL_VAR MYURL>/browse_results"> <font size="5"> <b>FIND </b> </font> <hr> <div class="menu" id="find_block"> <ul> <li> <a href="#">DOMAINS </a> <ul> <li> <a href="#1" onclick="alert('Heading Home!'); return false;">1. alert with link </a> </li> <li> <a href="#2" onClick="autofill2(this.form); return false;">2. autofill with link </a> </li> </ul> </li> </ul> <input readOnly name="box2"/> <INPUT TYPE=BUTTON OnClick="autofill(this.form,'2')" VALUE="autofill with button "> </div> <br> <font size="5"> <b>WHERE </b> </font> <hr> </FORM> </body> </html> Title basically says it. I need to get the object that was just clicked, to insert into a JavaScript function. I've tried "function('this')" and similar things, but it doesn't work. I'm sure this is REALLY easy to do, but I don't know it and I have no idea what to search for. Thanks Hi guys, Having a little bit of trouble with a site I'm currently working on... I'm using some AJAX for the instant g-mail/facebook style navigation, you know the kind, with no refreshes, etc. Problem is, to allow for back/forward and bookmarks, I currently use a URL that looks like: http://www.mySiteOfFun.com/index.html#page=news.html; This is fine, not a problem... The issue comes into play when I want to open up the news.html page, from my home.html page, and have it open to news item #6 (for example). I can't add a #, because one is already being used to reference the anchor for the content div. Has anyone run into a similar problem before? If so, how did you resolve it? Can some jQuery be used to find the location of the news item div in question, on load, and scroll to it like that? Just not sure how to progress really, and any help would be greatly appreciated! I don't even know where to begin with this one. I don't know the terminology for what I am trying to do here, and the sample code is too big and cluttered to post. So I put together the following to illustrate the structure of the object that I am trying to overcome. I have a method chain within an object, and I need to override one of the methods, but when I do so I loose access to the private methods and properties of it's containing object... I googled this for several hours, and the best that I can come up with is that I need to somehow use call() to access the scope of another object. But I don't understand call() or apply() at all, and I've read many tutorials on those... Code: window.oModule['Report'] = (function(){
var _privateProp1 = '' ,
_privateMethod1 = function(){
// ...
} ,
_publicMethod1 = function(){
// ...
} ,
_publicMethod2 = (function(){
var _sub_privateProp1 = '' ,
_sub_privateMethod1 = function(param1,param2){
// ...
} ,
_sub_publicMethod1 = function(){
// ...
} ,
_sub_publicMethod2 = function(start , end){ // I need to replace this method from somewhere else
var _neededValue = '';
for(var i = start ; i<end ; ++i) {
// ...
_neededValue += _sub_privateMethod1(arg1,arg2)
}
return _neededValue;
} ;
return{
'_sub_publicMethod1' : _sub_publicMethod1 ,
'_sub_publicMethod2' : _sub_publicMethod2
}
})() ;
return{
'_publicMethod1' : _publicMethod1 ,
'_publicMethod2' : _publicMethod2
}
})();
alert(oModule.Report._publicMethod2._sub_publicMethod2(1,5)) // This works fine
oModule.Report._publicMethod2._sub_publicMethod2 = function(start,end){ // Doing this modifies the output of all expressions that already call the sub method (which is what I need)
var _neededValue = '';
// ...
return start+end
}
alert(oModule.Report._publicMethod2._sub_publicMethod2(1,5)) // This will alert 6 (as intended)
oModule.Report._publicMethod2._sub_publicMethod2 = function(start,end){ // Doing this modifies the output of all expressions that already call the sub method (which is what I need)
var _neededValue = '';
for(var i = start ; i<end ; ++i) {
// ... different set of instructions
_neededValue += _sub_privateMethod1(arg1,arg2) // This line causes an error: _sub_privateMethod1 is undefined
}
return _neededValue
}
Hey all, I've built a website for my music and I'm fairly new to all this so bear with me. Essentially, I have two flash-based music players on my site. One is a simple single-track player that auto-plays some background music for the site. The functionality is limited to the user starting/stopping the music and adjusting the volume. The other is an advanced music player featuring a playlist of preselected tracks and allows the user to start/stop music, rewind, fast forward, adjust volume and select tracks in the playlist. This player does not start automatically. My question is this: when someone visits the site, the single-track background music player will start. Is there code that would allow the advanced music player, should it be turned on (i.e. someone selects a track and plays it), to override and actually stop the play of the single-track? TIA! I have something like this var oneTest = new CustomObj({ prop1 : 'value1', prop2 : 'value2', prop3 : 'value3' }) var twoText = Object.clone(oneTest) twoText.prop2 = "newvalue2" And when I console log twoText I see something like +Data prop2 Inside Data is a prop2 that has the value of "value2". THAT is the one I want to change/override... yet the console shows me that the prop2 is outside of the data structure so when I am acting on the cloned obj I am not getting the results i need. I tried obj.extend etc.... and that didn't work, perhaps my syntax was wrong. Any advice? Hi all, I was looking at mozilla object.watch function and found this post http://stackoverflow.com/questions/1...r-all-browsers and the solution post has a object.watch function, my question is how is this implemented? Do I need to put it in a file and include it along with my other libs? When I call it do I need to add the .prototype or just PHP Code: myObject.watch("itemSelect", handler); Will this create a problem if I'm using mozilla? Thanks! I'm currently working on a project and I am doing a bunch of image switching. I'm having a problem with the following... I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click. Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already. What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function. What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top. Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure. First off... I am new to javascript, and am learning while trying to add some cool extra features to an existing project. An existing JSP is generating the HTML page and table. I have retro-fitted it so that it adds to each input field a 'trigger' to the onkeyup event. The purpose of this trigger is check for the the cursor keys being pressed (UP, DOWN, LEFT, RIGHT) and then if it is a logically valid move, shift to the next cell in that direction. Code: <td class="inputField" rowspan="1" colspan="1" nowrap="nowrap"> <input name="ColorNumber0" id="" maxlength="" size="20" onchange="saveFieldObj(this)" onkeyup="return doOnKeyUp(event, 18, 14, 'ColorNumber0')" type="text"> </td> Now, the function it calls, doOnKeyUp, for the most part is working fine... when the input field in the table cells are a textbox or textarea, my method can re-focus the fields appropriately. HOWEVER, I am having a huge headache when the input field is a combo box. Basically, the value of the combo box is changed with the cursor keys (which is default combo box behaviour (I think)), instead of moving to the next editable cell in that chosen direction. Problem #1: My question: Is there a way to intercept/override the various onKey events or similar for the combo boxes. For the combo boxes, I want to continue to move between table cells UNLESS a do something specific, like press the spacebar to entire an update/modification mode for the current cell. Everything I have done so far does not prevent the combo box events from triggering. Any ideas? Problem #2: Also, I tried a nasty hack to try and get it to work, by trying to switch the combo box's value back 1 spot (if it appeared to be needed) by changing the <combo box>.selected value. However, that change never appears to be taking hold, so it is staying at whatever the original selected value was. For this one, I am just curious as to the correct way to have javascript change the selected value in a combo box and make it "stick" and make it applied to the view/UI? Code example: Code: var selectedIdx = (curObj.selectedIndex - 0);
if ( selectedIdx < curObj.length ) {
var newIdx = (selectedIdx-0) - 1;
curObj[selectedIdx].selected = "0";
curObj[newIdx].selected = "1";
curObj[newIdx].focus();
//curObj.selectedIndex = newIdx;
}
You can probably tell by the code that I had been trying various things to change the combo box's selection via javascript, but none has worked for me. Any help on either topic would be greatly appreciated! Is it possible disable an onclick after clicking it and then enable it from another onclick by id Code: <img id="one" href="images/homepage/sliders/bonus_button.jpg" style="position:relative; top:30px; left:50px; height:30px; width:70px; float:left;"> This code runs when it is clicked: Code: $("#one").click(function() {
runEffectB();
return false;
});
What I would like to happen is for either runEffectB() to not run if it was just run or to disable the #one.click once it has run. I am assuming I will be able to re-enable it from another onclick running a similar function. This is jquery and jquery ui if that helps. Any ideas much appreciated. I am trying to impliment Javascript code to replace the MS Tabular data control. How do I go about creating a Fields collection object that has a default method of Item(idx) ie. myrs.Fields.Item(4).name is the same as myrs.Fields(4).name What I'm trying to do is to do something similar to what this person wanted on their question: http://www.webmasterworld.com/javascript/3338586.htm I already have it so when the user clicks on one of the links, then it changes to the active class. But now I would like to have the first link already have the active class (which is the effect the links will have when the user clicks on it) and then have the same effect happen thereafter the user clicks on the links. Here is the Javascript: Code: <script type="text/javascript">
var hrefs=document.getElementsByTagName("a");
var hrefs=document.getElementsByClassName("links");
var preA="";
for(var i=0;i<hrefs.length;i++){
hrefs[i].onclick=function(){
if(preA!="" && preA!=this){
preA.className="links";
}
this.className="active";
preA=this;
}
}
</script>
Here is the CSS: Code: a.links:link {
color: #FFF;
text-decoration: none;
}
a.links:hover {
color: #96C;
text-decoration: none;
}
a.active {
color: #96C;
text-decoration: none;
}
Here is the HTML: Code: <a class="links" href="#">Curriculum Vitae</a> | <a class="links" href="#">Teaching Philosophy</a> | <a class="links" href="#">Artist Statement</a> Hi all, I would really appreciate any help producing a slider bar that goes from 0 to 100 with step = 1 that has NO default value. Basically, I do not want to bias people in any way, and so do not want to have the default tab on the slider at 0 or 50 or whatever. The ideal slider bar would not have a tab initially and then a tab would appear once (and where) the user clicked on the slider bar. Thanks for any help, Adrian Hello, I'm using pull downs for date but it always starts up "Dec" "31" "Year". How can I set it to start as "Month" "Date" "Year"? Thanks. PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Main</title> </head> <body> <br> <form name="form1" id="startOfForm"> <table><tbody> <tr> <td class="question"><label for="birthdate">Select Birthdate</label></td> <td> <select name="selMonth" id="selMonth" > <option value=0 selected>Month</option> <option selected value="1">Jan</option> <option selected value="2">Feb</option> <option selected value="3">Mar</option> <option selected value="4">Apr</option> <option selected value="5">May</option> <option selected value="6">Jun</option> <option selected value="7">Jul</option> <option selected value="8">Aug</option> <option selected value="9">Sept</option> <option selected value="10">Oct</option> <option selected value="11">Nov</option> <option selected value="12">Dec</option> </select> <select name="selDate" id="selDate" > <option value=0 selected>Date</option> <option selected value="1">1</option> <option selected value="2">2</option> <option selected value="3">3</option> <option selected value="4">4</option> <option selected value="5">5</option> <option selected value="6">6</option> <option selected value="7">7</option> <option selected value="8">8</option> <option selected value="9">9</option> <option selected value="10">10</option> <option selected value="11">11</option> <option selected value="12">12</option> <option selected value="13">13</option> <option selected value="14">14</option> <option selected value="15">15</option> <option selected value="16">16</option> <option selected value="17">17</option> <option selected value="18">18</option> <option selected value="19">19</option> <option selected value="20">20</option> <option selected value="21">21</option> <option selected value="22">22</option> <option selected value="23">23</option> <option selected value="24">24</option> <option selected value="25">25</option> <option selected value="26">26</option> <option selected value="27">27</option> <option selected value="28">28</option> <option selected value="29">29</option> <option selected value="30">30</option> <option selected value="31">31</option> </select> <select name="selYear" id="selYear" > <option value=0 selected>Year</option> <option value="2001">2001</option> <option value="2000">2000</option> <option value="1999">1999</option> <option value="1998">1998</option> <option value="1997">1997</option> <option value="1996">1996</option> <option value="1995">1995</option> <option value="1994">1994</option> <option value="1993">1993</option> <option value="1992">1992</option> <option value="1991">1991</option> <option value="1990">1990</option> <option value="1989">1989</option> </select> </td> </tr> <tr> <td colspan=2><input type="submit" value="Submit form"></td> </tr> </tbody></table> </form> </body> </html> |
|||||||