Mental Jetsam

By Peter Finch

Archive for the ‘Web’ Category

Web topics

3 column HTML page layout with fixed left and right sidebars using CSS

Posted by pcfinch on February 8, 2011

The following is a simple 3 column HTML page layout using CSS (no tables) so that the left and right “sidebars” have a fixed size and the content expands and contracts to fit the remaining page width.

There are a couple of “tricks” to get this working.

  • Use “float:left” and “float:right” to position the left and right sidebars.
  • The “lbar” and “rbar” divisions MUST appear before the “middle” division.
  • [Optional] Remove the margin from the h1 heading “margin:0” otherwise it looks odd on some browsers if it’s the first element in the division.
<html><head>
<style type="text/css">
body { font-size:10pt }
.lbar { float:left ; width:120px; background-color:yellow }
.rbar { float:right ; width:120px; background-color:yellow }
.middle { margin-left:130px; margin-right:130px; background-color:gray }
h1 { margin:0; font-size:12pt; background-color:blue ; color:white ;  }
</style>
</head><body>
<div>
<h1>Left Bar</h1>
<ul><li>Home</li>
<li>Development</li>
<li>Dowload</li>
<li>Support</li></ul>
</div>
<div>
<h1>Right Bar</h1>
<ul><li>Peter</li>
<li>Steve</li>
<li>Andrew</li>
<li>Chris</li></ul>
</div>
<div>
<h1>Middle</h1>
<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.<p>
</div>
</body></html>
Advertisements

Posted in CSS, HTML | 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 »

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 »

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 »