Mental Jetsam

By Peter Finch

Archive for the ‘JQuery’ Category

Pop-up message in JQuery Mobile

Posted by pcfinch on May 10, 2011

The following code can be used to pop-up a message in JQuery Mobile similar to an Android “toast”.

$("<div class='ui-loader ui-overlay-shadow ui-body-e ui-corner-all'><h1>Sorry, what was incorrect. Please try again.</h1></div>").css({ "display": "block", "opacity": 0.96, "top": $(window).scrollTop() + 100 })
  .appendTo( $.mobile.pageContainer )
  .delay( 1500 )
  .fadeOut( 400, function(){
    $(this).remove();
  });

BTW… I Love JQuery Mobile!!!!

Posted in JQuery | 13 Comments »

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 »

Delayed loading of images and content using JQuery

Posted by pcfinch on August 25, 2010

I’m new to JQuery, so please forgive me if this is not the best way to do this. I created this JQuery script to “lazy load” parts of a HTML page only when they appear in the window. It works great if you have a lot of large images and only want to load them when they are visible to the user, or if you have a section in the document [like comments at the bottom of the page] that you only need loaded when the user looks at it.

(function($) {
  $.fn.lazyload = function(func) {
    var nodes = [] ;
    this.each(function() { nodes.push($(this)) } ) ;
    var scrollFunc = function() {
      var topOffset = $(window).scrollTop() ;
      var bottomOffset = topOffset + $(window).height() ;
      for(var n in nodes) {
        var node = nodes[n] ; 
        if(!node[0]._lazyloaded) {
          var nodeTop = node.offset().top ;
          if((nodeTop < bottomOffset) && (nodeTop + node.height() > topOffset)) {
            node[0]._lazyloaded = true ;
            func(nodes[n]) ;
          }
        }
      }
    } ;
    if(nodes.length > 0) {
      $(window).scroll(scrollFunc) ;
      scrollFunc() ;
    }
  } ;
})(jQuery) ;

The function lazyload() is implemented as a JQuery plugin, so it’s really easy to use. Whenever the elements, corresponding to the selector, appear in the window the function passed into lazyload() will be called with the JQuery element node as the function parameter. For example, to lazyload images into a document you could do something like this.

$(document).ready(function() {
  $("img[lazysrc]").lazyload(function(e) { e.attr("src",e.attr("lazysrc")) ; }) ;
}
...
<img width=500 height=400 lazysrc="big1.jpg"></img>
<img width=500 height=400 lazysrc="big2.jpg"></img>
<img width=500 height=400 lazysrc="big3.jpg"></img>
<img width=500 height=400 lazysrc="big4.jpg"></img>
...

I hope you find this usefull.

Posted in JQuery | 1 Comment »