Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
Sointenly
Sep 7, 2008

golgo13sf posted:

Nope.

Just for clarification sake...

In the code you posted above, what is it that links those functions to the submit/verification button? Im used to VB where you just code everything individually using common names. I cant seem to find the connection here.

Adbot
ADBOT LOVES YOU

Kekekela
Oct 28, 2004

Sointenly posted:

Just for clarification sake...

In the code you posted above, what is it that links those functions to the submit/verification button? Im used to VB where you just code everything individually using common names. I cant seem to find the connection here.

When the submit button is clicked it will trigger the form's onsubmit, which is where he's calling your validate function:

form id="myform" onsubmit="return validateForm();" method="POST" action="submitpage.html"

CT2049
Jul 24, 2007
I'm currently working on a page in which that has a drop down menu similar to an option element. However, I need more than just text for each option so I'm using a div that I make appear and disappear. I've got the appearing working correctly, but I'm not sure how to make it disappear when I click anywhere on the page. Does anyone how I can accomplish this?

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

CT2049 posted:

I'm currently working on a page in which that has a drop down menu similar to an option element. However, I need more than just text for each option so I'm using a div that I make appear and disappear. I've got the appearing working correctly, but I'm not sure how to make it disappear when I click anywhere on the page. Does anyone how I can accomplish this?

when you show your DIV, add a click hander to the document, check to see if the click was in your DIV, and if not, hide. When you hide, remove the click handler as well, so it's not checking when it doesn't need to.

Sointenly
Sep 7, 2008

golgo13sf posted:

Nope.

First of all, thank you very much for all the help.

Everything is working with the exception of one little bug.

If both email fields are left blank, it will alert the user to enter an email, but then it also alerts the user that inputs were accepted (because it then goes on to check that email1==email2 and i assume it accepts two blank fields as being == )

code:
function checkInput(usernameId, emailId, varemaildId) {
    var usernameValue = document.getElementById(usernameId).value;
    var email1= document.getElementById(emailId).value;
    var email2= document.getElementById(varpemailId).value;
      if (usernameValue.length <4 || usernameValue.length > 8) {
            alert("the username must be between 4 and 8 characters long");
 }
      if(email2.length == 0) {
			 alert("Please confirm your email");
 } 
      if(email1 != email2) {
              alert('The two emails do not match!');
 }      
      else {
              alert("User name and Email accepted");

 }
} 

Just-In-Timeberlake
Aug 18, 2003

Sointenly posted:

First of all, thank you very much for all the help.

Everything is working with the exception of one little bug.

If both email fields are left blank, it will alert the user to enter an email, but then it also alerts the user that inputs were accepted (because it then goes on to check that email1==email2 and i assume it accepts two blank fields as being == )

code:
function checkInput(usernameId, emailId, varemaildId) {
    var usernameValue = document.getElementById(usernameId).value;
    var email1= document.getElementById(emailId).value;
    var email2= document.getElementById(varpemailId).value;
      if (usernameValue.length <4 || usernameValue.length > 8) {
            alert("the username must be between 4 and 8 characters long");
 }
      if(email2.length == 0) {
			 alert("Please confirm your email");
 } 
      if(email1 != email2) {
              alert('The two emails do not match!');
 }      
      else {
              alert("User name and Email accepted");

 }
} 

Stick a "return false;" after each alert, like so:

code:
function checkInput(usernameId, emailId, varemaildId) {
     var usernameValue = document.getElementById(usernameId).value;
     var email1= document.getElementById(emailId).value;
     var email2= document.getElementById(varpemailId).value;
     
     if (usernameValue.length <4 || usernameValue.length > 8) {
     	alert("the username must be between 4 and 8 characters long");
     	return false;
     }
	 
     if(email2.length == 0) {
	alert("Please confirm your email");
	return false;
     } 
	      
     if(email1 != email2) {
	alert('The two emails do not match!');
	return false;
     }      
	 
     alert("User name and Email accepted");
     return true;
	 
}
"return <value>" ceases all execution of that function and returns that value, kind of like an "exit function" statement in VB, except it returns a value. So you have a bunch of statements that return false on error and at the very end have a "return true;", if it gets to that point everything is ok and processing should continue.

Just-In-Timeberlake fucked around with this message at 20:18 on Oct 13, 2009

Sointenly
Sep 7, 2008

quote:

"return <value>" ceases all execution of that function and returns that value, kind of like an "exit function" statement in VB, except it returns a value. So you have a bunch of statements that return false on error and at the very end have a "return true;", if it gets to that point everything is ok and processing should continue.

success!

thank you

epswing
Nov 4, 2003

Soiled Meat
What's the difference between this...
code:
function Book(page) {
	this.page = page;
	this.getPage = function() {
		return this.page;
	};
};

book = new Book(4);
document.writeln(book.getPage());
...and this...
code:
var Book = function(page) {
	this.page = page;
};

Book.prototype.getPage = function() {
	return this.page;
};

book = new Book(4);
document.writeln(book.getPage());
Both seem to work. Any pros/cons?

Mr.Radar
Nov 5, 2005

You guys aren't going to believe this, but that guy is our games teacher.
The first creates a new function instance for each object while the second only creates one function instance which is shared by all Book instances.

CT2049
Jul 24, 2007

Lumpy posted:

when you show your DIV, add a click hander to the document, check to see if the click was in your DIV, and if not, hide. When you hide, remove the click handler as well, so it's not checking when it doesn't need to.

That worked great, thanks!

Flamadiddle
May 9, 2004

Edit: I'm an idiot. Ignore.

Flamadiddle fucked around with this message at 14:28 on Oct 21, 2009

Rabbi Dan
Oct 26, 2005

ASK ME ABOUT MY CREEPY FACEBOOK APP FOR STALKING GIRLS I DON'T KNOW
I wrote a Greasemonkey script that is supposed to run on someone's Facebook profile page. It grabs the user's ID which I found to always be in the same place in the link for the "Share" button as well as the user's name and then adds a link under their profile picture in the "profile_actions" div.

For some reason, when I navigate to someone's profile (such as by clicking a link on my news feed), the new link doesn't appear. In fact it seems that the script is not running at all (I've tested this with an alert()). Only when I refresh the page AFTER navigating to it does the script run, and it runs successfully.

Does anyone have any idea why this could be? Here's the code...

code:
// ==UserScript==
// @name          ScriptName
// @namespace     [url]http://diveintomark.org/projects/greasemonkey/[/url]
// @description   Script Description
// @include       [url]http://www.facebook.com/*[/url]
// @exclude       [url]http://apps.facebook.com/*[/url]
// ==/UserScript==

window.addEventListener("load", function(e) {
alert('test');

var name = document.getElementById('profile_name').innerHTML;

var divs = document.getElementsByTagName("div");
var anchors = document.getElementsByTagName("a");
var share_url = "";

// Locate Share link and retrieve share URL
for (i = 0; i < anchors.length; i++) {
	if( anchors[i].className == "share share_a" ) {
		share_url = anchors[i].href;
		break;
	}
}

// Parse user id from the share URL
var uid = share_url.substr(share_url.indexOf('p[]=') + 4);

// Locate profile_actions DIV and append dig button
for (i = 0; i < divs.length; i++) {
   if( divs[i].className == 'profile_actions' ) {
	// alert(divs[i].innerHTML);
	divs[i].innerHTML += '<a href=\"http://apps.facebook.com/XXX\" class=\" profile_action actionspro_a\" target=\"_blank\" id=\"new_link_id\">New Link</a>';
	break;
	}
}
}, false);

I tried this with and without the load event listener.

Thank you very much for any help in advance.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice
Is navigating to someone's profile done via AJAX by the site, so there's no page load?

Rabbi Dan
Oct 26, 2005

ASK ME ABOUT MY CREEPY FACEBOOK APP FOR STALKING GIRLS I DON'T KNOW

Lumpy posted:

Is navigating to someone's profile done via AJAX by the site, so there's no page load?

Clicking on someone's profile link changes the header of the entire page. There's a whole browser/page reload so I don't think that's the issue, although I could be mistaken.

Nigglypuff
Nov 9, 2006


BUY ME BONESTORM
OR
GO TO HELL
Look at the page URL before and after clicking the profile link. If everything before the hash (#) is the same, then a real page load has not occurred.

Rabbi Dan
Oct 26, 2005

ASK ME ABOUT MY CREEPY FACEBOOK APP FOR STALKING GIRLS I DON'T KNOW

Nigglypuff posted:

Look at the page URL before and after clicking the profile link. If everything before the hash (#) is the same, then a real page load has not occurred.


Wow I did not notice this, that is exactly what is going on. If you click on someone's profile link from either the search results, newsfeed, or someone else's profile then the URL that you are taken to only changes from the current URL by info after the hash.

What are my options here? Can I somehow detect when the new page is loaded and have the function be called?

Rabbi Dan fucked around with this message at 17:34 on Oct 22, 2009

Vanadium
Jan 8, 2005

Rabbi Dan posted:

What are my options here? Can I somehow detect when the new page is loaded and have the function be called?

You can do someNode.addEventListener("DOMNodeInserted", someCallback).

Rabbi Dan
Oct 26, 2005

ASK ME ABOUT MY CREEPY FACEBOOK APP FOR STALKING GIRLS I DON'T KNOW

Vanadium posted:

You can do someNode.addEventListener("DOMNodeInserted", someCallback).

I put my main code in a function called process() and then added this line to the bottom of the greasemonkey script:

document.getElementById('profile_actions').addEventListener("DOMNodeInserted", process() );

This doesn't seem to do anything. Clearly that event is not being fired. How can I find out which nodes are having their DOMNodeInserted event fired when I navigate from profile to profile on Facebook?

Flobbster
Feb 17, 2005

"Cadet Kirk, after the way you cheated on the Kobayashi Maru test I oughta punch you in tha face!"
Are there any good JavaScript + canvas/SVG/whatever libraries out there that will let me draw interactive graphs? The graph-theoretical kind with nodes and edges, not charts. Basically I'd like to be able to let a user create finite automata diagrams and then be able to do things to them on the backend, so being able to label nodes/edges, and distinguish between different types of nodes, would be a necessity.

Rabbi Dan
Oct 26, 2005

ASK ME ABOUT MY CREEPY FACEBOOK APP FOR STALKING GIRLS I DON'T KNOW

Rabbi Dan posted:

I put my main code in a function called process() and then added this line to the bottom of the greasemonkey script:

document.getElementById('profile_actions').addEventListener("DOMNodeInserted", process() );

This doesn't seem to do anything. Clearly that event is not being fired. How can I find out which nodes are having their DOMNodeInserted event fired when I navigate from profile to profile on Facebook?

I managed to get the DOMNodeInserted event working at the highest level (document) with the following line:

document.addEventListener("DOMNodeInserted", process, false);

Apparently that third argument helps...

Anyways, this doesn't work because that event gets triggered so many times and my extra HTML gets appended to the profile_actions div over and over when I really only want it to go there once.

This is the best solution I have gotten to work but I'm convinced there has to be a better way.

code:
process();

var old = parent.location.href;

setInterval( function(){ detectURLChange() }, 250 );

function detectURLChange() {
	var newURL = parent.location.href;

	if( newURL != old ) {
		setTimeout(process,1500);
		old = newURL;
	}

}
Basically it stores the current URL in a global variable and then checks for changes 4 times per second. If it detects a change, it means that likely a new profile page is loading and so it waits 1.5 seconds before calling process() again.

Any comments/thoughts on my solution? My fear is that if for some reason there is a network hiccup the 1.5 seconds won't be enough and the function will be called too early to work. If on the other hand I increase the 1.5 seconds, then it will result in a lovely user experience since that will mean more time waiting until the new link is added.

Any further ideas on this topic?

Nigglypuff
Nov 9, 2006


BUY ME BONESTORM
OR
GO TO HELL
In newer browsers, you can also listen for the hashchange event.

Rabbi Dan
Oct 26, 2005

ASK ME ABOUT MY CREEPY FACEBOOK APP FOR STALKING GIRLS I DON'T KNOW
I came up with a robust solution that is just like the URL-change-detection one except it detects changes in the profile name DIV. This won't work if you go from one John Smith directly to another John Smith but I guess I'm over that. My only worry is that there could be some performance implication with calling a Javascript function every 250 ms but I haven't noticed anything yet.


EDIT: just kidding, name-detection doesn't work when you're looking through photos and click a tag link to go to someone's profile.

Rabbi Dan fucked around with this message at 18:50 on Oct 25, 2009

ATLbeer
Sep 26, 2004
Über nerd
So I'm building a list of messages on screen that the user will be interacting with. Moving in between different queues etc...

I want to have a master array of all "messages" and that array is objects which are the messages themselves.

They key of the associative array is an ID number that is randomly generated. Here is my test code so far
code:
		function Comment(){
			//comment Class for comments to displayed 
			this.id = Math.floor(Math.random()*999999999);
			this.div_id = "wrapper_" + String(this.id);
			this.from_user = "undefined";
			this.message = "undefined message";
			this.picture = "undefined.picture.url";
			this.queue = "undefined";
		}
		Comment.prototype.div_output = function(){
			//snipped a bunch of code that generates the HTML
			//doesn't make any calls external to this function just string concatenation  
			return html;
		}
		
		$.messages = new Array();
		$(document).ready(function() {
			comment = new Comment();
			comment.from_user = "test";
			comment.queue = "feed";
			comment.message = "this is some junky message";
			comment.picture = "CLS_bigger.jpg";
			$.messages[comment.id] = comment;
That's all well but, when I try to access the $.messages array in FireBug it goes into an "unresponsive script" hang. I guess there is an infinite loop somewhere but, I can't see it.

ATLbeer fucked around with this message at 01:28 on Nov 7, 2009

geetee
Feb 2, 2004

>;[

ATLbeer posted:

That's all well but, when I try to access the $.messages array in FireBug it goes into an "unresponsive script" hang. I guess there is an infinite loop somewhere but, I can't see it.

Other problems aside, here is why you're hanging.

code:
var messages = [];
messages[5] = "test";
console.log(messages);
Results in an array that looks like:

code:
[undefined, undefined, undefined, undefined, undefined, "test"]
Now replace 5 with something upwards of 999999999.

Nigglypuff
Nov 9, 2006


BUY ME BONESTORM
OR
GO TO HELL

ATLbeer posted:

So I'm building a list of messages on screen that the user will be interacting with. Moving in between different queues etc...

I want to have a master array of all "messages" and that array is objects which are the messages themselves.

If you want an associative array in javascript, just use a plain old Object instance. As you have seen, it may be technically possible to treat Array instances as sparse arrays with arbitrarily high numeric keys, but it will ruin iteration. The built-in Array class is spooky, and will automatically adjust its own length property — meaning that most of its methods will behave as if the array contains a whole lot of undefined items in-between the ones you actually assigned. In general, you only want to use an Array instance if you are actully iterating over or manipulating the contents as a dense list, eg pushing/popping items.

Also: you don't need to be generating keys with Math.random(). Just do something like
code:
function Comment() {
        this.id = Comment.next_id++;
};

Comment.next_id = 1;

Nigglypuff fucked around with this message at 10:35 on Nov 7, 2009

nydriek
Oct 3, 2005
I have a question for those who know javascript. I'm trying to create a favorite with javascript embedded to ask for a two character country abbreviation, and input that into the url to load.

Example:

open favorite
input: CA
loads url -> https://www.website.com/page.cfm?country=CA

I know I've seen this before with searching.. I just can't seem to find it again.

Nigglypuff
Nov 9, 2006


BUY ME BONESTORM
OR
GO TO HELL
javascript:location = "http://www.website.com/page.cfm?country=" + prompt("Country code?")

nydriek
Oct 3, 2005

Nigglypuff posted:

javascript:location = "http://www.website.com/page.cfm?country=" + prompt("Country code?")

Thanks, that is perfect.

Soks
Apr 1, 2006
lol internet
I posted the following in the PHP thread:

Soks posted:

Anyone have any ideas for making an image scroll in the background slower than the rest of the page? I'm trying to make a neat 3D effect where instead of just having a static background and a foreground that scrolls normally, I want the foreground to scroll normally and the background to scroll slowly and in relation to the length of the page.

The idea is that the page is made up of a header, 3 columns, and a footer. The left column is navigation and it looks like a tree, the right column is just a sliver of another tree, and the center column is where the content goes. It has a big 1000px by 2400x px canopy picture as it's background. This canopy picture is currently just static, with only the top 1000-1200px showing. I want this image to slowly scroll while the columns and the content ontop of the canopy (in semi-transparent background divs) scroll normally. By the bottom of the page, the bottom 1000-1200px would be showing and the top of it would be hidden. It would also have a minimum scroll setting so that it wouldn't scroll too fast on shorter pages.

I'll post up a diagram of what I mean when I get home. I don't even know where to start with this, I'm new to php so I don't know if it even has the capabilities to do something like this, maybe JavaScript? I just don't know. Could someone point me in the right direction?
And I was redirected here. But before I came here I managed to actually find and implement a script that does what I want, seen here:

http://inner.geek.nz/javascript/parallax/

And my implementation is here:

http://www.cyf.mylha.com/index.php

But this effect is very choppy in Firefox and Safari. It runs pretty smoothly in IE and even better in Chrome, but I really need a way to smooth this out for Firefox/Safari. Here's the code:

code:
function calcParallax(tileheight, speedratio, scrollposition) {
  return ((tileheight) - (Math.floor(scrollposition / speedratio) % (tileheight+1)));
}

window.onload = function() {

  window.onscroll = function() {
    var posY = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : window.pageYOffset;

    var container = document.getElementById('container');
    var containerparallax = -calcParallax(2300, 1.2, posY);

    container.style.backgroundPosition = "0 " + containerparallax + "px";
  }
}
I don't know JavaScript, but I was able to bumble my way around the code just fine. I just have no idea how this could be smoothed out, or why it's choppy in the first place. The artist is currently drawing up a 1000x2400px canopy for use with this script, so I'd like to get this working, but if I can't I'll just set it to fixed and be done with it. If I could just get it to work at least as smooth as it is in IE I'd be happy with it.

Also yes I know the pictures are blurry, the artist I'm making the site for is working on high res versions of everything and a new canopy (much better than my badly photoshopped one :v).

Soks fucked around with this message at 19:03 on Nov 24, 2009

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Soks posted:

[ choppy in Safari ]

It was quite smooth in Safari for me. 4.0.4 on OS X 10.6.2

Nigglypuff
Nov 9, 2006


BUY ME BONESTORM
OR
GO TO HELL

Soks posted:

I don't know JavaScript, but I was able to bumble my way around the code just fine. I just have no idea how this could be smoothed out, or why it's choppy in the first place.

I haven't checked this in Safari, but it looks like Chrome and Firefox implement the onscroll event differently. Basically, Chrome emits many more onscroll events than Firefox does, and most importantly, it emits an event every time the page is redrawn while scrolling. Firefox, on the other hand, boasts a 'smooth scrolling' feature. Smooth scrolling means rendering many brief, incremental frames while scrolling — but the onscroll does not fire every time one of these frames is drawn to the screen. Rather, the event is only fired during pauses in the movement of the scrollbar, when there is no incremental movement to render. This means that in Firefox, during the act of scrolling, many small changes in scroll-height are rendered to the screen before your handler is called, and so the movement of the different layers will appear to be jerky and out of sync.

I have not yet found a solution to this problem. My first impulse was calling setInterval() to check the scrollY property of the page at a high frequency, and call your handler when its value changes, regardless of whether an onscroll event has occurred yet. Unfortunately, it looks like Firefox also does not update the scrollY property smoothly during scrolling. In other words, there appears to be no way of testing whether or not a visible scroll has occurred until the actual onscroll event has fired, and by that point too much scrolling may already have occurred to make the parallax effect seem smooth.

Sorry to not be more helpful!

Nigglypuff fucked around with this message at 10:14 on Nov 25, 2009

peepsalot
Apr 24, 2007

        PEEP THIS...
           BITCH!

Soks posted:

:words:
I would try maybe putting the background image in an element using position:fixed so that the browser scrolling behavior does not affect it at all. I haven't tried this to verify if it would work, but it's an idea.

Soks
Apr 1, 2006
lol internet

Nigglypuff posted:

Sorry to not be more helpful!
No, thanks a lot. This is exactly what I was imagining was going on, I even thought of trying to rewrite the script to check for scrollY but I had no idea what scrollY was called, I don't have any Java Script experience. You saved me the trouble of looking up and writing such a script.

peepsalot posted:

position:fixed
I tried this before, the results were just as choppy (though smaller chops!) and produced some other odd alignment bugs. If I could fix the alignment bugs it was causing, I would use this, but I'd rather focus on trying to find a solution to the choppiness for now.

Thanks alot guys, I'll keep looking around for a solution.

Avenging Dentist
Oct 1, 2005

oh my god is that a circular saw that does not go in my mouth aaaaagh
Comedy "make your own scrollbar in HTML and synchronize everything so it updates simultaneously" option.

Soks
Apr 1, 2006
lol internet
I was just considering almost exactly that. :psyduck: Would there be a way to emulate additional onscroll events if the scroll bar was made in Java or something? I don't know. I'm just brainstorming, I think I need to pick up a Java Script book or something.

Soks fucked around with this message at 21:42 on Nov 25, 2009

spiritual bypass
Feb 19, 2008

Grimey Drawer

Soks posted:

Would there be a way to emulate additional onscroll events if the scroll bar was made in Java or something?

Just make the page a giant Java applet.

Soks
Apr 1, 2006
lol internet
Yeah, no. :v Is there a way for Java Script to get the entire length of the page, and then is there a way to catch mouse wheel input other than onscroll?

spiritual bypass
Feb 19, 2008

Grimey Drawer

Soks posted:

Is there a way for Java Script to get the entire length of the page

If you're thinking what I think you're thinking, then just use percentages instead.

Soks
Apr 1, 2006
lol internet

rt4 posted:

If you're thinking what I think you're thinking, then just use percentages instead.

Yeah, exactly! But it has to have a minimum speed somehow... Otherwise the background image will scroll hilariously fast on shorter pages.

Edit: Oh I see what you meant. Yeah, if not for that worry about speed, I could just use percentages.

Soks fucked around with this message at 21:56 on Nov 25, 2009

Adbot
ADBOT LOVES YOU

stack
Nov 28, 2000
I have a jQuery plugin which according to it's comments has a public function to destroy a tooltip. However it doesn't seem to actually be attached to anything according to firebug. I can see it being added to the $this but it doesn't stick around after the closure ends.

This is the whole js file
http://tooltip-toolbox.lukasbob.com/js/tooltip.js
http://github.com/lukasbob/Tooltip-Toolbox/blob/master/js/tooltip.js
This is the plugin demo page if anyone wants to debug with firebug
http://tooltip-toolbox.lukasbob.com/

The specific bit I want to use to remove tooltips with
code:
			//Public destroy method which unbinds all events and tidies up if we used the title attribute.
			$this.ttDestroy = function() {
				$ttTooltip.unbind(o.hideEvent, hideTip);
				$this.unbind(o.showEvent, delayShowTip).unbind(o.hideEvent, hideTip);
				if ($this.ttTitle) {
					$ttTooltip.remove();
					$this.attr('title', $this.ttTitle);
				}
			};

None of the following work and FireBug never shows a ttDestroy on any element before or immediately after I run $('#my_input').tt({...});
code:
$('#my_input').ttDestroy();
$('#my_input').tt().ttDestroy();
// Changing $this.ttDestroy = ...
// to this.ttDestroy = ...
// also doesn't work
Am I being mislead by an incorrect comment?

I'm using this tooltip plugin because it allows me to bind to focus and blur. I'd happily switch to a different one that someone knows both offers custom event binds for show and hide and also allows tooltips to be destroyed.

stack fucked around with this message at 00:43 on Nov 26, 2009

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply