Tag: JavaScript

Using JQuery to reveal using a slide up effect

September 9th, 2009  |  Posted in Developer Blog   |  Tags: ,

The slideUp() method in JQuery is intended to hide the element rather than reveal it. It is basically the opposite of slideDown() which “unhides” your element by sliding it down.

As you can see on this blog, I have an “About Jason Gill” tab in my heading. When clicked, this tab reveals information about who I am by sliding upward. In figuring out how to do this, I of course consulted the Google gods and came up with a lot of people asking how, but few people providing answers. So, I’ve decided to post the solution I finally came up with hoping it will benefit others.

Basically, I am using two different effects to create what looks like one effect. What you are seeing is essentially a slideDown() in conjunction with an animate() effect. The animate() is literally moving the info box upward at the same speed it is sliding down (in my case, “slow”).  I just had to measure the height of the #about_me box and animate it upward exactly that many pixels (in my case it was 171 pixels). To close the box, I simply animate downward at the same rate I slideUp. Technically, I’m using animate in conjunction with slideToggle(), but you get the idea.

You can take a look at my source, but I’ll post the javascript here for your convenience:

$(document).ready(function(){
	var opened = false;
	$("#about_tab").click(function(){
		if(opened){
			$("#about_me").animate({"top": "+=171px"}, "slow");
		}else{
			$("#about_me").animate({"top": "-=171px"}, "slow");
		}
		$("#about_content").slideToggle("slow");
		$("#about_tab .close").toggle();
		opened = opened ? false : true;
	});
});

6 Responses  |  add yours »

Scriptaculous Autocomplete Page Jump Using Arrow Keys

January 20th, 2009  |  Posted in Developer Blog   |  Tags: , ,

When you use overflow:auto in your css in conjunction with Scriptaculous’ Autocomplete, there is a bug that makes the entire page jump around when you use the arrow keys on your keyboard to navigate up and down through the suggestion list. This bug normally appears only when the page itself is long enough to require a scroll bar.

I managed to come up with a very clean working solution by hacking the controls.js file that comes with scriptaculous. The solutions requires replacing the markPrevious and markNext functions and adding a small line of code to the updateChoices function.

Currently, markPrevious and markNext are telling the page to jump around like that, and I’m not sure why! As far as I can tell (please let me know otherwise) this solution could be included in the scriptaculous without breaking a thing (hint, hint to the scriptaculous team).

To implement the solution, replace:

markPrevious: function() {
 if(this.index > 0) this.index--;
  else this.index = this.entryCount-1;
   this.getEntry(this.index).scrollIntoView(true);
},
 
markNext: function() {
 if(this.index < this.entryCount-1) this.index++;
  else this.index = 0;
  this.getEntry(this.index).scrollIntoView(false);
},

With:

markPrevious: function() {
 if(this.index > 0) {this.index--;}
 else {
  this.index = this.entryCount-1;
  this.update.scrollTop = this.update.scrollHeight;
 }
 selection = this.getEntry(this.index);
 selection_top = selection.offsetTop;
 if(selection_top < this.update.scrollTop){
  this.update.scrollTop = this.update.scrollTop-selection.offsetHeight;
 }
},
 
markNext: function() {
 if(this.index < this.entryCount-1) {this.index++;}
 else {
  this.index = 0;
  this.update.scrollTop = 0;
 }
 selection = this.getEntry(this.index);
 selection_bottom = selection.offsetTop+selection.offsetHeight;
 if(selection_bottom > this.update.scrollTop+this.update.offsetHeight){
  this.update.scrollTop = this.update.scrollTop+selection.offsetHeight;
 }
},

Now find the updateChoices function and just after the code this.stopIndicator(); add this.update.scrollTop = 0; so that it looks like this:

this.stopIndicator();
this.update.scrollTop = 0;
this.index = 0;

I’ve tested in FF 2.0.0.4, FF 3.0.5, Chrome 1.0.154.43, Safari 3.2.1, Opera 9.5.1, IE 7.0.5730.13 and IE 6.0.2600 without problems.

32 Responses  |  add yours »

Using SWFObject for Flash Version Tracking

March 9th, 2007  |  Posted in Developer Blog   |  Tags: , ,

At my company, we use Omniture SiteCatalyst for our web analytics/tracking. Unfortunately, Omniture does not give user’s Flash Version statistics in their standard reports like Google Analytics does. On the other hand, Omniture gives you the freedom to create custom reports that you can determine on your own using their provided JavaScript code.

I am already using SWFObject to load the flash piece on our homepage to users with a specified version. So I figured I could hack that code a bit in order to pull the version it was already determining for me, and plug it into the Omniture code.

After mulling through the SWFObject code, I finally was able to run this page successfully, which will alert the exact version of flash I am using:

<!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=iso-8859-1" />
<title>test</title>
<script type="text/javascript" src="swfobject.js"></script>
</head><body>
<script type="text/javascript">
alert(deconcept.SWFObjectUtil.getPlayerVersion().major+
"."+deconcept.SWFObjectUtil.getPlayerVersion().minor+
"."+deconcept.SWFObjectUtil.getPlayerVersion().rev);
</script>
</body>
</html>

Basically, you can use deconcept.SWFObjectUtil.getPlayerVersion().major to get the major version, etc.

Once I got that working, I was able to use that same concept to plug it into my tracking code.

5 Responses  |  add yours »

Jack my FAQ

February 20th, 2007  |  Posted in Developer Blog   |  Tags: ,

Here’s a little freebie.

I’ve written a javascript that will take any faq page—properly formatted—and give it a little DHTML *umph* (oh, that’s right, we’re calling it AJAX these days). Basically it automatically converts all of the terms (questions) into links and collapses all of the defintions (answers) to be hidden until their term has been clicked. You can see an example of it in action on our newly deployed Travel Nursing staffing website.

Basically, for formatting, you only need to use a Definition List (DL) with proper <DT> tags for terms and <DD> tags for definitions.

<DL id="definitions">
	<DT>Is this the first Question?</DT>
	<DD>Because this question appears at the beggining of our definition list,
	it is in fact the first question and can be referred to as such from here on out.</DD>
	<DT>Is this the last Question?</DT>
	<DD>Yes, this is the last question. However, since there are only two
	questions in this example, it can also be considered the "second" question.</DD>
</DL>

Then just link to the file at the bottom of your page with the following code:

<script type="text/javascript" src="jackmyfaq.js"></script>

Download Jack My FAQ now!

1 Response  |  add yours »

Prevent copy/paste and Print Screen online

April 25th, 2006  |  Posted in Developer Blog   |  Tags: ,

NOTE: This script is no longer supported in Flash Player 10.

(It was fun while it lasted!)

Let’s face it, there is such a thing as sensitive material on the web. I was recently put to the task of protecting a certain page on our company’s intranet from being redistributed outside the company. In other words, we have a page on the intranet that is so sensitive, upper managment doesn’t want our employees to be capable of sending it to anyone outside the company.

So, I started thinking, what are the ways an average, non-techie employee, could reproduce this information? Since it’s on our password/firewall protected intranet, the risk of someone just emailing the link isn’t an issue. Of course the obvious is that they could copy and paste the text into an email and send it that way. They could also press the Print Screen button and paste a snapshot of the page as an email attachment or whatever.

I decided that beyond more “advanced” measures (like view source then save as), the clipboard was the method most people know how to use. So, the question became “how to disable the clipboard?”

I started tinkering around with JavaScript solutions, attempting to intercept any ctrl+c or PrintScreen commands and over-ride them with a call to write a message to the clipboard: “You’re fired! Pack your things and go home.” which would in turn be pasted into their email if they attempted it. But this was klugy at best. First, JavaScript really needs a form field to have focus in order to fire an onClick type event. I figured the best way around that was to run as an onBlur and onFocus in the <body> tag and just over-ride the clipboard whether they tried to copy or not. This seemed to be a great solution until I realized that for some unknown reason, when you select text and then blur (remove focus) a browser window, it doesn’t actually fire any onBlur commands. Not only that, but it’s a big mess to add anything to the clipboard with Firefox (IE makes it really, really easy). I suppose that Firefox doesn’t make writing to the clipboard easy due to security issues, and I’m not going to complain about any attempt to make my favorite browser more secure.  ;)

Then I remembered an Adobe Flash (that still sounds weird, doesn’t it?) application that I worked on a few years ago that used Flash’s built in clipboard functions. Booya! I cranked up Flash and wrote the following simple and very easy actionscript in the first line of the first frame:

this.onEnterFrame = function(){
System.setClipboard(“As long as this page is open your copy/paste functionality has been disabled.”);
}

(Added 08/28/2007: for the new CS3 use:)

addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame(E){

System.setClipboard(“As long as this page is open your copy/paste functionality has been disabled.”);
}

I then set the movie size to 1px wide and 1px high and published. I then placed the Flash somewhere on the sensitive document.

Since I left my movie at the default 12 frames per second, the text “As long as this page is open your copy/paste functionality has been disabled.” will be set on the clipboard 12 times per second. Go ahead, try to beat that time with ctrl+c and then ctrl+v!

As invasive as this method is, it works. As long as that page is open even in the background, it will prevent any copying and pasting and even Print Screen and paste. The only problem is, that it requires Flash v6 or higher, which is required in my company to use many of our Flash based applications. But just in case, I left the following IE only code as a backup:

<body onBlur=’window.clipboardData.setData(“Text”, “As long as this page is open your copy/paste functionality has been disabled.”);’>

53 Responses  |  add yours »

 Search