|
JavaScript - Forward Referencing & Forward Declaration
What are these used for? How are they done in JS? Any refs online?
Similar TutorialsHard to explain so: On my site, on the 'edit profile' page, I have this code to give a field value (because the back end code is hidden as it's a purchased script): Code: <table>
<tr>
<td>
<span class="title">
Facebook URL:
</span>
<br/>
<span class="details">
Enter the full URL
</span>
</td>
<td align="left">$ControlPanelMyProfileUser-profile_facebook$</td>
</tr>
</table>
<script type='text/javascript'>
if($('profile_facebook').value == "") {
$('profile_facebook').value = "http://";
}
</script>
Then, on the users profile page I have this code to hide a row if no info or just http:// is entered: Code: <ul>
<li id="facebook1"><a href="$RateViewProfileUser-profile_facebook$">Facebook Profile</a></li>
</ul>
if(document.getElementById('facebook1').innerHTML=='<a href="">Facebook Profile</a>')
{
document.getElementById('facebook1').style.display='none';
} else if(document.getElementById('facebook1').innerHTML=='<a href="http://">Facebook Profile</a>')
{
document.getElementById('facebook1').style.display='none';
}
In IE, on the users profile page, the source is showing: Code: <a href="http://">Facebook Profile</a> But, the li item with ID of facebook1 isn't hiding and when hovering over the link it shows "http:///" which may be why it's not working? Even though the source shows "http://"?? Any ideas why it isn't hiding? So far what I have the animation just..repeats over and over again, it doesn't go forward and backward as a seem-less bouncing little pin. Rattling my brain here, any help? I uploaded it to my server he http://www.boomspeed.com/alenna06/BouncingPushPin.html Also zip file attached Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pin bouncing</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<script type="text/javascript">
/* <![CDATA[ */
var pins = new Array(9);
var curPins= 0;
var direction;
var begin;
for (var i = 0; i < 9; ++i){
pins[i]=new Image();
pins[i].src="pin" + i + ".gif";
if (i == 8)
begin = setInterval("bounce()", 90);
function bounce() {
if (curPins == 8){
curPins = 0;
}
else
++ curPins;
document.getElementsByTagName("img")[0].src = pins[curPins].src;
if(curPins == 0){
direction = "up";
}
else if (curPins == 8)
direction ="down";
document.getElementsByTagName("img")[0].src= pins[curPins].src;
}
}
/* ]]> */
</script>
</head>
<body>
<img src="pin0.gif" alt="Image of push pin bouncing" />
</body>
</html>
Hi, Sorry very beginner in JS I am using formmail and JS to collect booking info calculates a total and sends to email. Formmail redirects to a thankyou page. Here I can send the total to paypal. I have looked and looked, but cant work out how to pass the total from the booking form to the thankyou page. How can I do this simply. Code not supplied because its nothing wonderous. Thanks Hi Everyone, I have the following problem that I have been trying to figure out for a few hours now and am hoping someone can give me a help out. I am opening a popup - this popup is solely to take an image url and as such has one field. On this 1st popup I have a 'button' which when clicked launches a 2nd popup window containing a file browser. The user selects the file by double clicking on the image they want, the url is passed back to the 1st popup, poulating the field and the 2nd popup is closed. Work perfectly in FF etc.. but in IE7 and IE8 it will not work. I am using the following function, linked to the button in the 1st popup, to open the 2nd popup window pass across the name of the field and the window object to the 2nd window. Code: function popupTwoInit(file_path, field_name, win) {
var w = window.open(file_path, null, 'toolbar=yes,menubar=yes,width=900,height=600');
w.fileFileField = field_name;
w.fileFileWin = win;
}
Where w is holding the window object created by the window.open, field_name is the name of the field on the popup that I wish to pass back a value to and win is the window object of the 1st popup. I am using this function as the callback to poulate the field in the 1st dialog after an image in the 2nd dialog has been selected: Code: filebrowser_callback(url) {
window.fileFileWin.document.forms[0].elements[window.fileFileField].value = url;
window.fileFileWin.focus();
window.close();
}
So this function accesses the passed through window object and field name from the window.open function, populates the field, gives the 1st popup focus and closes the 2nd popup. I thought about using opener in the 2nd popup to access the window object and field in the 1st popup but opener seems to refer to the main page in the browser - perhaps because I am using 2 popups OR I have got that wrong. Like I say works perfectly in FF but IE is always undefined for both 'window.fileFileWin' & 'window.fileFileField' which seems to suggest that the object is not interpreted by IE in the first function? I am a PHP developer with limited Javascript knowledge so any help would be great. Thanks very much. I'm currently trying to move a div that holds a text message forward pixel by pixel and eventually I'll write the code for it to go backwards and repeat. But I am not quite understanding what I've done wrong. It seems like a simple task, but It's not going anywhere. I call a function from the xhtml document like so: Code: <body onload = "moveText()">
<div id="movingText">
<p>This message should scroll forward</p>
</div>
............
and the function looks like: Code: function moveText() {
var movingText = document.getElementById("movingText");
movingText.style.left = (parseInt(movingText.style.left) + 1) + "px";
setTimeout("moveText()", 50);
}
it seems so clear cut, I can't imagine what could be wrong but apparently all my browsers don't like it. Anyway spot anything? I've been looking all over for an explanation of this function declaration but cant find it. Can someone answer what it means to have a function with no name, just declared as this. When does it execute? How does it get called? !function() { /* all the code in here omitted*/ } (); For reference, here's the function: !function () { var b = document.documentElement, c = "DOMControl_placeholder"; var a = function (d) { var g; var d = d || window.event, e = d.target || d.srcElement, f = e.getAttribute("placeholder"); if (f) { if ("focus" == d.type || "focusin" == d.type) { if (e.value == f) { e.value = ""; CSS.removeClass(e, c); } } else if (e.value == "") { CSS.addClass(e, c); e.value = f; } if (e.value == "" || e.value == f) { g = e.parentNode; CSS.addClass(g, "xyz"); CSS.removeClass(g, "xyz"); } } }; b.onfocusin = b.onfocusout = a; if (b.addEventListener) { b.addEventListener("focus", a, true); b.addEventListener("blur", a, true); } }(); I have the following code which attaches a function to events in x number of comboboxes (x will probably always = 4, but I do not want to hard-code this). I wish to pass the value of i to the function being attached as well as the value of tempData. In other words, I want the parameters in function to be the value, not a reference variable. In the current example, I am using the hard-coded variable ci. This I want to be replaced by a literal created when the event handler is attached (the value of the loop variable i). Also, notice that I get the filter value in the event handler (assigned to the variable ct). I would like to replace this code with the value of tempData which would also be determined when the evenet is attached (it is the same value in this case, but it keeps the onChange event from having to do this each time it runs). Code: var props = {
col_0: "select",
col_1: "select",
col_2: "select",
col_3: "select",
btn_reset:true,
display_all_text: "-Show All-",
on_filters_loaded: function(o){
//reset all filters
var slcIndexes = o.GetFiltersByType(o.fltTypeSlc, true); //o.fltTypeSlc = 'select'
for(var i=0; i<slcIndexes.length; i++){
//this public method returns a filter DOM element by column index
var slcElm = o.GetFilterElement(slcIndexes[i]);
//tempData = slcElm.options[slcElm.selectedIndex].text;
//window.alert(tempData + " " + slcElm);
tf_AddEvent(slcElm, 'change', onchangeFn=function(){
//ci is the column index for the column to filter on. ct is the new text from the combobox to filter on
var ci;
ci = 2;
var ct = tf_outputTable.GetFilterValue(ci);
tf_outputTable.ClearFilters();
//window.alert("ci= " + ci + " ct= " + ct);
tf_outputTable.SetFilterValue(ci, ct);
tf_outputTable.Filter();
}); //end tf_AddEvent
}
}
}
setFilterGrid("outputTable",props);
I've been going through this great tutorial on how to implement a type-ahead feature on a text field and there's something which hopefully you guys can explain. On the third page there is this function. Code: AutoSuggestControl.prototype.init = function () {
var oThis = this;
this.textbox.onkeyup = function (oEvent) {
if (!oEvent) {
oEvent = window.event;
}
oThis.handleKeyUp(oEvent);
};
};
What I don't understand is this line: this.textbox.onkeyup = function (oEvent) { I know about anonymous functions, but I don't know where the value for the parameter oEvent is going to come from. Can someone explain this? Thanks! :) I've just discovered (through trial and error) that if a variable is assigned a value without first being declared, it automatically has global scope, even if it is assigned inside a function. This is a pain in the butt because if you forget the var keyword, then suddenly ... whoops! You've got yourself a global variable! Is there any way that I can make javascript throw an exception if I fail to declare a variable before assigning a value to it? It would make things much easier, rather than having to hunt through increasingly complex functions to find that pesky unintentionally global variable. Hello, I've been writting HTML since last friday and javascript since yesterday. And I'm stuck on my first project. My functions for mouse_move / up / down all control the movement of a box. So you can click a box and move it anyway. It then snaps to an invisible grid. However there are multiple boxes on the screen so if you move it to a spot where another box already resides, then that box needs to swap places. This is what the mouse_over function tries to do. When I click the first box it stores the position of that box that was clicked. If I release the mouse button whilst hoovering over another box I want the other box to take the stored positions of the first box. However what I think is happening is the mouseover function is applying the new position to the box I'm moving, as I guess this is the first layer the mouse is over. Is there anyway I can reference the layer underneath using onmouseover. Sorry if this is jibberish. Thank you very much. Code:
<script language="javascript">
var x;
var y;
var org_top;
var org_left;
var diff_org_top;
var diff_org_left;
var element;
var element2;
var being_dragged = false;
var swap = false;
function mouse_over(ele_name2)
{
if (swap = true)
{
element2 = ele_name2;
document.getElementById(element2).style.top = org_top;
document.getElementById(element2).style.left = org_left;
swap = false;
element2 = null
}
}
function mouse_move(event)
{
x=event.pageX;
y=event.pageY;
if(being_dragged = true)
{
document.getElementById(element).style.top = y-diff_org_top +'px';
document.getElementById(element).style.left = x-diff_org_left +'px';
}
}
function mouse_down(ele_name)
{
being_dragged = true;
swap = false
element = ele_name;
document.getElementById(element).style.cursor = 'move';
org_top = document.getElementById(element).style.top;
org_left = document.getElementById(element).style.left;
diff_org_top = y-org_top.substring(org_top.length-2,org_top);
diff_org_left = x-org_left.substring(org_left.length-2,org_left);
}
function mouse_up()
{
being_dragged = false;
document.getElementById(element).style.cursor = 'auto';
if (x < 317)
{
document.getElementById(element).style.left = Math.floor(x / 316 - 1) * 316 +'px';
}
else
{
document.getElementById(element).style.left = 0+'px';
}
element = null;
swap = true;
}
</script>
Hi all, I'm wondering if what I'm trying to do here is even possible but I'd appreciate your thoughts on it. Code: <script type="text/javascript">
function test() {
var arrays = {
one: ['1', '2', '3'],
two: ['a', 'b', 'c']
}
var foo = 'one';
alert(arrays.(foo));
}
test();
</script>
I've tried numerous variations of the alert line with evals, brackets and jQuery syntax but always seem to get the error: Code: XML filter is applied to non-XML value ({one:["1", "2", "3"], two:["a", "b", "c"]})
Which makes me think I'm either attempting something stupid or only missing my target slightly. The code will be running within a jQuery project up if that helps in any way. Hi there. I have a table which I would like to be highlighted with the click of a button, but I can't seem to reference it correctly. I can make the <td> clickable and function, but when I try to apply it to the button I can't make it reference the td cell, rather than change the background color of the button. The function is: function roll(obj){ obj.style.backgroundColor == "pink" ? obj.style.backgroundColor = "#e5e5e5" : obj.style.backgroundColor = "pink"; } Html: <td style="background-color:#e5e5e5;"><img onmousedown="roll(this);" src="images/plus.png" title="Highlight Lot" /></td> Thanks a lot!! :) Years ago I created HTML that employs checkboxes and textboxes. I am now writing JS with the intention of adding flexibility and limiting redundancy. I am not sure I truly understand how to correctly interact the two though. For example, one of my scripts have arrays that contain the names of the checkboxes and textboxes, with a 'for' loop to document.write() them to references within the HTML code. This does not seem to be working for me though. Here is what I have thus far (in short): Code: <script language="javascript">
var teamNames = new Array(3);
teamNames[0]="South Africa";
teamNames[1]="Mexico";
teamNames[2]="Uruguay";
for (i=0; i<=31; i++) {
document.write("<p>" + teamNames[i] + "<\/p>");
}
</script>
</head>
<body>
<tr><td>Jun 11</td><td><input type="checkbox"
name="teamNames[0]" value="teamAbbr[0]"></td>
</body>
I've left out a lot of the code (to include the teamAbbr array, but you get the points. I've tried moving the JS within the HTML body and playing with the reference syntax, but nothing so far. Any help would be great! Hello, On a simple form, there is a radio button group with two radio buttons, a text box, and a submit button. The first radio button is checked(selected) by default. The text box input has the onChange event handler so that if the text is changed, the second radio button will be checked(selected). The problem is the input radio name contains a hyphen that breaks the JavaScript and the name can not be changed. What is the correct syntax for referencing a hyphenated form input radio name in the onChange event? Here is the form that works correctly with no hyphen in the input radio name: Code: <form name="myFormGood" action="" onsubmit="return false;"> Good Form with no hyphen in radio button name<br> <input name="radio1" type="radio" value="4" checked> First Option<br> <input name="radio1" type="radio" value="5"> Second Option<br><br> Change the text to select the Second Option<br> <input type="text" name="text1" onChange="document.myFormGood.radio1[1].checked = 'true';" size="10" value=" "><br><br> <input type="button" name="submit" value="It Works!"> </form> Here is the form that breaks the JavaScript because it has a hyphen in the input radio name: Code: <form name="myFormBad" action="" onsubmit="return false;"> Bad Form with hyphen in radio button name breaks JavaScript<br> <input name="radio-1" type="radio" value="4" checked> First Option<br> <input name="radio-1" type="radio" value="5"> Second Option<br><br> Change the text to select the Second Option. Nothing Happens.<br> <input type="text" name="text1" onChange="document.myFormBad.radio-1[1].checked = 'true';" size="10" value=" "><br><br> <input type="button" name="submit" value="It Doesn't Work!"> </form> |
|||||||