Recent Updates RSS Hide threads | Keyboard Shortcuts

  • CSS :content and :section pseudo element selectors

    Dave Smith 1:04 pm on March 13, 2009 | 5 Permalink | Reply
    Tags: CSS, Selectors, Style

    I believe there is a useful and yet missing CSS3 selector. I’ll explain with a rough example:

    <section>
<h1 or h>My section heading</h1 or h>
<p>Para</p>
<p>Para</p>
<p>Para</p>
<p>Para</p>
</section>

    Given the above, to style the section content so that it is indented by 20px, but leave the heading with no margin, could be done with:

    .section > *:not(h1) {margin-left:20px;}

    but what if the following was available:

    h1:content {margin-left:20px;}

    A pseudo element wraps the content, based on heading scope, and is then styled.

    and

    h1:section { }

    A pseudo element wraps the heading and content, based on heading scope, and is then styled.

    Apart from being easy to read, one advantage could be in backwards compatibility with old documents (without section elements) that they could be styled just as easily as new ones. Plus it just feels right to me.

     

    • Bob 3:44 pm on March 13, 2009 Permalink

      Boo x

    • Dave Smith 3:53 pm on March 13, 2009 Permalink

      Thanks bro, love ya

    • Matthew Hillman 9:24 am on June 2, 2009 Permalink

      I havent seen the tag used before what is the purpose of this over the normal heading tag. Forgive me if its a stupid question I’m a bit out of touch with CSS3. :-P

    • Matthew Hillman 9:26 am on June 2, 2009 Permalink

      ‹h1 or h› I was on about.

    • Dave Smith 10:38 am on June 2, 2009 Permalink

      Your right, there is no such tag, I just meant h1, h2, h3, h4, h5, h6 or h.

  • jQuery.animate-sprite

    Dave Smith 12:44 am on March 9, 2009 | 1 Permalink | Reply

    A bit of fun with a jQuery and background image sprite.

    Current version 1.0.4 alpha.

     

  • Confused

    Dave Smith 11:12 pm on February 15, 2009 | 0 Permalink | Reply

    cartoon

     

  • jQuery.stacker-menu

    Dave Smith 4:53 pm on February 8, 2009 | 2 Permalink | Reply
    Tags: accessible, , , menu, navigation, usable

    Out of interest in the varying menu systems at my disposal on the web, I have created some of my own. My lastest, the stacker menu, blends previous ideas with the inspirational jQuery API browser (jQuery) menu. The code is still pretty fragile but in development. Please try out the latest demo and let me know what you think.

    Things I am trying to achieve with the menu:

    • A menu item can be a link, a link and menu or just a menu (alias)
    • Accessible, especially with a keyboard
    • Usable
    • Vertical space managed better than with a tree-like menu
     

    • Matthew Hillman 9:29 am on June 2, 2009 Permalink

      I really like the effect it has with the sliding menu’s I have a bit of issue with it overlapping menu items, is it suppose to do that? Is it hard to do?

    • Dave Smith 10:30 am on June 2, 2009 Permalink

      Thanks Matt, hmm I think I’ll have to write a how to. But essentially if you use a bog-standard list of links then it will do its thing. After which, it’s a matter of playing with the CSS.

  • jQuery plugin template

    Dave Smith 11:45 pm on February 7, 2009 | 3 Permalink | Reply
    Tags: , , , template

    Wanting a quick way to create a plugin in jQuery I found A Plugin Development Pattern (Learning jQuery), by Mike Alsup, via Improving upon the jQuery Plugin Template (Google Groups). Later, much later, I looked in the more obvious place; Plugins/Authoring (jQuery). I work best from hacking examples, so Mike Alsup’s pattern/template was the most useful to me.

    The only difference between the following template and Mike Alsup’s is that I’ve stripped it down to just the essentials.

    The template

    (function($)
{
	$.fn.plugin = function(options)
	{
		// Set the options.
		options = $.extend({}, $.fn.plugin.defaults, options);

		// Go through the matched elements and return the jQuery object.
		return this.each(function()
		{
		});
	};
	// Public defaults.
	$.fn.plugin.defaults = {
		property: 'value'
	};
	// Private functions.
	function func()
	{
		return;
	};
	// Public functions.
	$.fn.plugin.func = function()
	{
		return;
	};
})(jQuery);

    Updates

    1. Removed “var” where not required, many thanks to Jim (Jim’s comment)
     

    • Jim 9:22 am on September 4, 2009 Permalink

      Thanks for this.

      The “var” there is not required, as options is already a local variable by virtue of being an argument.

    • Dykam 4:04 pm on September 20, 2009 Permalink

      Did you find a way to have acces to the selector inside $.fn.plugin.func in case of $(”#foo”).plugin.func;?

    • Dave Smith 12:44 pm on September 22, 2009 Permalink

      Hi Dykam

      No, because essentially we’re just accessing the plugin object (passing nothing to it) and then calling the function on that object. The problem, to a certain degree, is about namespacing the plugin, so what if we just create a “sub-plugin” like as follows:

      $.fn.plugin_func = function() {}
      and call it with $(’#foo’).plugin_func();

      Basically it is just another plugin, but by name (only) related to the main plugin. You could still access the main plugin objects etc. from the “sub-plugin”. For example getting the defaults = $.fn.plugin.defaults.

      I’ve not done a plugin that works like I’m describing and so I have no idea of the problems involved in working across plugins. If you do try it out, please let me know how you get on. Good luck!

  • Progressive JPEGs for thumbnails? - Another look

    Dave Smith 3:34 pm on January 13, 2009 | 4 Permalink | Reply
    Tags: , ,

    Just had a thought that maybe the browsers could sort this out. A browser could detect when a JPEG is shown smaller than full-size and choose to download only what is needed.

    For example, if a JPEG is displayed 100% or larger then the full image is downloaded. If displayed at 20% then maybe only the first pass is downloaded. If then changed to 100% with Javascript or CSS or both, then a browser would download the rest of the image.

     

    • Matthew Hillman 1:32 pm on January 15, 2009 Permalink

      Hi Dave,

      What about a solution using something like ajax or something like that, maybe php?

    • Dave Smith 6:17 pm on January 17, 2009 Permalink

      Yeah, that would work, but there would always be the need for the browser to download a thumbnail in addition to the full-size image. I was trying to think of a way around that, which is why progressive JPEGs came up.

    • Matthew Hillman 9:34 am on June 2, 2009 Permalink

      What would be the browser load time be like for that? I’m guessing it would be quick as it would only download part of the image (if I understand correctly?) then when you click the image it goes to 100%? Would this be just like a dynamically expanding image or in a pop up? (knowing me i’ve missed the point completely)

    • Dave Smith 10:26 am on June 2, 2009 Permalink

      Yep, it would be quicker and save bandwidth. Missed the point a little, the idea is that the browser handles how much of an image to download. I mentioned Javascript only to make sure that a browser would take dynamic/javascripted changes into account; if an image is made larger, then more of the image, if there is any, should be downloaded accordingly.

  • Progressive JPEGs for thumbnails?

    Dave Smith 12:49 pm on January 8, 2009 | 0 Permalink | Reply
    Tags: , ,

    Not possible as far as I’m aware, but thumbnails do annoy me. Either they are processed smaller version of the full image – a form of duplication. Or the full version is used but displayed smaller – bandwidth, page loading times and browser image resizing beauty niggles.

    Progressive JPEGs load progressively with each iteration enhancing the previous. The first iteration will be poor quality but probably good enough to pass as a thumbnail. Then if the full image is wanted the browser will just download what it doesn’t already have.

    Anyone know if this is possible?

     

  • jQuery.linkify

    Dave Smith 6:40 pm on December 21, 2008 | 0 Permalink | Reply
    Tags: , link, linkify, , section

    A plugin for jQuery turning sections into links. Read the jQuery.linkify page for a demo and more info.

     

  • Right then

    Dave Smith 2:24 pm on September 23, 2008 | 6 Permalink | Reply

    I’ve started this thing

     

    • Diana the Wonderful 9:43 pm on September 23, 2008 Permalink

      Dear Dave,
      What a lovely site. You really know how to combine prettiness and functionalilty

    • Dave Smith 10:06 pm on September 23, 2008 Permalink

      Ha, thanks Diana, you are indeed wonderful!

    • Dan Webb 1:42 pm on October 28, 2008 Permalink

      So……are you going to write something then? :)

    • Dave Smith 2:01 pm on October 28, 2008 Permalink

      Ha, that just might work

    • Matthew Hillman 1:46 pm on January 15, 2009 Permalink

      Although Dave it would be good to use a nicer template than the defualt. ;-)

    • Dave Smith 1:54 pm on January 15, 2009 Permalink

      Right then. Again!

c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
esc
cancel