Think Bohemian » javascript http://www.thinkbohemian.com Secede from Convention in Life and Code Mon, 26 Jul 2010 17:13:55 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Stack Overflow Style Notifications – Using Jquery http://www.thinkbohemian.com/2010/04/22/stack-overflow-style-notifications-using-jquery/ http://www.thinkbohemian.com/2010/04/22/stack-overflow-style-notifications-using-jquery/#comments Thu, 22 Apr 2010 15:03:58 +0000 Richard Schneeman http://www.thinkbohemian.com/?p=401 Have you seen Stack Overflow? Besides the great content, they have excellent user interface elements that flow seamlessly together. When you visit, an orange notification bar instantly jumps out at you, yet is easily dismissed. I thought this was a great example of notifications done right, so I wondered how I might achieve a similar effect.

First lets take a look into my approach, and then I’ll talk about my implementation.

Stack overflow notification demo

Download Files View Demo

The Approach

The notifications use an animation to grab the users attention. For the animation I decided to use the jquery javascript library. It is very easy to use and has several pre-built animations such as fadeIn and fadeOut.

Once a user dismisses a notification they should never see it again. To remember when a user dismisses the notification, I decided to use http cookies.  These cookies allow us to save a value in the user’s browser, so when the user clicks dismiss they create a cookie on their local machine. Then the next time they visit the webpage, the page will see that they already have the cookie, and the notification will not be displayed.

Alternatively, if the webpage required a log-in, then I could have stored this data in a database and associated it with a user, but by utilizing cookies I can apply this technique to any web page without the need for any server side scripting (PHP, Ruby on Rails, etc.).

After looking into several ways to get and set cookies I decided to use the jquery cookies plugin which allowed me to dynamically set cookies without a page refresh.

Now that you know my approach to the problem lets take a look at the implementation.

The Implementation

For the fade in fade out animation I used Jquery. You can use the GoogleAPI copy of the library by placing this code in your webpage:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

Next I downloaded the jquery cookies plugin and included it in my webpage. To create a cookie named notificationBar and give it the value “closed” we can use the plugin and execute this command:

$.cookie('notificationBar', 'closed');

After we have created the notificationBar cookie we can get its value by executing this command:

$.cookie('notificationBar');

this command will now return the value “closed”.

Next I added the html for the notification that will be displayed:

<div id = "topannounce" class = "announce" style = "display:none;">
   This Is a Notification from <a href = "http://thinkbohemian.com" target = "_blank">ThinkBohemian</a>
    <a href = "#" onclick = "$.cookie('notificationBar', 'closed');
        $('#topannounce').fadeOut('slow')">X</a>
 </div>

By default it is hidden using:

style = "display:none;"

Using jquery we can fadeIn the notification unless the notificationBar cookie has been set to “closed“.  To accomplish this I added these lines of javascript to the page:

<script type="text/javascript">
 $(document).ready(function(){
   if ($.cookie('notificationBar') != 'closed') {
     $('#topannounce').fadeIn('slow');
   }
 });
 </script>

Then I styled my HTML with a little CSS, and the effect was complete. My webpage has its very own dismissible notification bar:  View the demo of the notification in action.

Richard Schneeman: @ThinkBohemian

I used this effect to notify visitors to  WhySpam.Me, my disposable email service,  about the launch of ShadyEmail.com, the fun way to hide your email and make it questionably suspicious.

–

]]> http://www.thinkbohemian.com/2010/04/22/stack-overflow-style-notifications-using-jquery/feed/ 3 DOM Navigation Javascript Cheat Sheet http://www.thinkbohemian.com/2009/12/30/javascript-cheat-sheet/ http://www.thinkbohemian.com/2009/12/30/javascript-cheat-sheet/#comments Wed, 30 Dec 2009 18:52:53 +0000 Richard Schneeman http://www.thinkbohemian.com/?p=208 This is a cheatsheet i wrote, so i don’t have to remember some simple javascript DOM stuff

http://pastie.org/761588

Also check out this sweet page of DOM attributes you can get with javascript http://www.howtocreate.co.uk/tutorials/javascript/domstructure

Sample Dom-
<body>
<h1> Hello World</h1>
<div id="america">
 I am an <em> american</em>, but I wish I was <span id="superman">superman</span>.</div>
<form>
 <input onclick="guess();" type="button" value="What Am I?" />
 </form>
</div>
</body>

Sample JS

var element = document;
 alert(element.lastChild.nodeName);// will return "HTML"
 alert(element.lastChild.nodeValue); // will return "null"

var element = document.getElementById("america");
alert(document.getElementById("america").parentNode.nodeName); // will return 'body'
alert(document.getElementById("america").nodeName ) ; // will return 'div
alert(document.getElementsByTagName("h1")[0].firstChild); // will return " Hello World"

document.getElementById("superman").firstChild // will return text "superman"
Valid Selectors
parentNode            // returns immediate parent node
childNodes            // returns an array of child nodes
firstChild            // gets first child of element
lastChild             // gets last child of element
getElementsByTagName    // gets element by tag name, such as "div" for <div> and "p" for <p> and "h1" for <h1>
getElementById          // gets element by id such as 'Element:something' for <div id="something">
getAttributeNode        // gets the attributes of element getAttributeNode("id") returns id attribute
]]> http://www.thinkbohemian.com/2009/12/30/javascript-cheat-sheet/feed/ 0 Global Javascript Variables and You http://www.thinkbohemian.com/2009/10/17/global-javascript-variables-and-you/ http://www.thinkbohemian.com/2009/10/17/global-javascript-variables-and-you/#comments Sat, 17 Oct 2009 23:31:52 +0000 Richard Schneeman http://www.thinkbohemian.com/?p=123 Just found out today that you can attach a javascript variable to the  window effectively making it a variable global to the window. You can define it like this:

window.myboolean = false ;

And then you can access the same variable anywhere in your window. Pretty Cool Huh? The reason I needed a global variable in the first place was due to some neat javascript hackery. In some of my tables, i have made an entire row clickable , by adding onclick = “window.location.href = ‘http://whateveriwant.com’ ” to the <tr> element, and setting it’s style to render a cursor when moused over. I then paired this with rails url_for helper to give me a gmail esque feel. The user can click any part of the table row, not just a link, and they will be redirected. Sweet.

<tr  onclick = "window.location.href =  '<%= url_for :controller => 'manage', :id => whymail.id, :type => "whymail", :action => 'show' %>' "  style = "cursor:pointer:" >
    <td> My Content </td>
</tr>

While clickable rows is a neat little trick,  what happens when you want to put a button or a checkbox in your table row to really get a gmail feel? When you click your button or your select box, you’re also clicking in the table row, so you automatically tell the browser to redirect to a different url. Make Sense?

<tr  onclick = "window.location.href =  '<%= url_for manage_spam_url(id)  %>' "  style = "cursor:pointer:" >
    <td> My Content </td>
    <td> <%= button_to_remote "Delete", :url => spam_survey_url(:id => whymail.id) , :update => "partial_update" %></td>
</tr>

So in the above example even if you clicked on the Delete button then browser will still redirect to manage_spam_url because you still clicked on the table row. Therein lies the rub, and here comes the global javascript variables. To keep the table row redirecting us we can set a variable flag. First we put a ternary operator in the  table row like this:

<tr  onclick = "window.location.href = window.myboolean ? '#' : '<%= url_for manage_spam_url(id) %>' "  style = "cursor:pointer:" >

and we can set our flag in the header like this:

<script type="text/javascript" charset="utf-8">
    window.myboolean = false ;
</script>

Then in our button we can set the flag to true when it gets pressed:

<%= button_to_remote "Delete", :url => spam_survey_url(:id => whymail.id) , :update => "partial_update", :loading => "window.myboolean = true;",  :complete =>"window.myboolean=false;" %>

And after the javascript from the button loads we set the flag back to false. Its possible that this is serious over kill. But if anyone finds a better way to do this, let me know. Till then happy global javascripting!!




]]>
			http://www.thinkbohemian.com/2009/10/17/global-javascript-variables-and-you/feed/
		1