Mental Jetsam

By Peter Finch

Archive for the ‘javascript’ Category

Google Developer Day 2011 HTML 5 Challenge

Posted by pcfinch on August 22, 2011

I entered the Google Developer Day 2011 HTML5 challenge, to create a “Google doogle” of the Developer Day Logo entirely in HTML, and I actually made the cut… top 3 in Australia, I’m very happy 🙂

https://sites.google.com/site/opencallforgdd/the-challenge-1

http://www.peterfinch.me/gdd2011/

Advertisements

Posted in HTML, javascript, Personal | Leave a Comment »

Simple JQuery popup context menu

Posted by pcfinch on October 13, 2010

Below is a simple JQuery right click popup context menu. The aim of the code is to be short, simple and flexible.

(function($) {
  $.fn.contextMenu = function(items) {
    var target, menu = $("<div>")
      .css({"background-color":"#eee",border:"1px solid black",padding:"5px"})
      .appendTo("body").hide()
      .hover(jQuery.noop(), function() { $(this).hide() }) ;
    for(var i = 0; i < items.length; i++) (function() {
      var item = items[i] ;
      menu.append($("<div>").html(item.title).css({"padding":"0 5 0 5"})
        .click(function() { item.action(target) ; menu.hide() } ) 
        .hover(
          function() { $(this).css({"background-color":"#aaf","color":"white"}) },
          function() { $(this).css({"background-color":"","color":""}) } )
      ) ;    
    })() ;
    this.each(function() { 
      $(this).bind('contextmenu', function(e) {
        target = $(this) ;
        menu.css({position:"absolute",left:e.pageX - 2,top:e.pageY - 2}).show() ;
        return (false) ; // don't propagate up
      }) ;
    } ) ;
  } ;
})(jQuery) ;

The code is implented as a JQuery function so it’s simple to add to existing HTML. The JQuery element, to which the context menu is attached, is passed in as the first argument in the menu callback, so it’s easy to relate it back to what was selected. e.g.

<script type="text/javascript">
$(document).ready(function() {
  var items = [
    {title:"<img src='public.png'>Small", action:function(e) { e.animate({"font-size":"16px"}, 200) ; } },
    {title:"<img src='private.png'>Mediam", action:function(e) { e.animate({"font-size":"26px"}, 200) ; } },
    {title:"<img src='group.png'>Large", action:function(e) { e.animate({"font-size":"36px"}, 200) ; } },
    {title:"<img src='cancel.png'>Huge", action:function(e) { e.animate({"font-size":"46px"}, 200) ; } }
  ] ;
  $(".popup").contextMenu(items) ;
}) ;
</script>
</head>
<body>
<div class="popup">popup1</div>
<div class="popup">popup2</div>
<div class="popup">popup3</div>
<div class="popup">popup4</div>
</body>

I have tested this code and IE 7+, Firefox, Safari and Chrome and it seems to work ok. Here is an example of what it should look like. Please let me know if you have any problems and I hope you fine it useful.

Simple JQuery context menu

Posted in javascript, JQuery | Leave a Comment »

CSS position:fix not working on IE 7

Posted by pcfinch on June 9, 2010

I was trying to create a fixed button bar, at the top of the page, on Internet Explorer 7 using JQuery but I could not get the bar to stay at the top. The CSS property “position:fixed” lets you fix the location of a HTML element on a page so when the rest of the page is scrolled, using the scrollbars for example, the element stays in the same location in the browser window. I found that adding the following DOCTYPE to the top of the pages fixed the problem.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bar")
    .css("width", "100%")
    .css("height","23px")
    .css("position","fixed")
    .css("zIndex", "100") 
    .css("background","gray")
});
</script>
</head>
<body style="margin:0 0 0 0">
<div id="bar">The bar goes here...</div>
.....

Posted in CSS, HTML, javascript | Leave a Comment »

Get HTTP cookies as associative array in Javascript.

Posted by pcfinch on March 23, 2010

The following snippet of Javscsript code can be used to retrieve a documents cookies as an associative array so that the values can be easily retrieved using associative array lookup methods like cookies[“username”] or cookies.username .

function getCookies() {
    var cookies = document.cookie.split( ';' );
    var list = {} ; 
    for ( i = 0; i < cookies.length; i++ ) {
        var cv = cookies[i].split( '=' );
        var name = cv[0].replace(/\s+/g, "").replace(/\s+$/g,"") ;
        list[name] =  cv[1] ;
    }
   return (list) ; 
}
cookies = getCookies() ;

Posted in javascript | Leave a Comment »