Public marks with search width Public marks with search width http://blogmarks.net/marks/search/width A jQuery Plugin for Zoomable, Interactive Maps - New Media Campaigns http://www.newmediacampaigns.com/page/a-jquery-plugin-for-zoomable-interactive-maps#demos asic css file is included with the demo zip. Here is some rough minimal css: view sourceprint? 1.#map { position: relative; width: 700px; height: 470px; overflow: hidden; } 2.#returnlink { display: block; position: absolute; bottom: 0; right: 0; } 3.#map a.bullet { display: block; position: absolute; width: 10px; height: 10px; background: yellow; } 4.#map img.zoomable { } 5.#map div.popup{ display: none; position: absolute; width: 200px; height: 300px; } 6.#map div.popup a.close{ display: block; position: absolute; bottom: 0; right: 0; } The code above will work just fine as a starting point. Obviously a lot of embellishment can be added to make the map look as g 2009-11-09T12:03:22Z vrossign css, maps, jQuery, js, plugins, zoom

A jQuery Plugin for Zoomable, Interactive Maps - New Media Campaigns

by vrossign

asic css file is included with the demo zip. Here is some rough minimal css: view sourceprint? 1.#map { position: relative; width: 700px; height: 470px; overflow: hidden; } 2.#returnlink { display: block; position: absolute; bottom: 0; right: 0; } 3.#map a.bullet { display: block; position: absolute; width: 10px; height: 10px; background: yellow; } 4.#map img.zoomable { } 5.#map div.popup{ display: none; position: absolute; width: 200px; height: 300px; } 6.#map div.popup a.close{ display: block; position: absolute; bottom: 0; right: 0; } The code above will work just fine as a starting point. Obviously a lot of embellishment can be added to make the map look as g

Copy | React (0)
]]> PixelWindow http://www.pixelwindowapp.com/ PixelWindow is a simple, light-weight, cross-platform application for measuring things on your screen. It creates a transparent window that acts like a pixel ruler with its width and height reported in the center. Usefull when fixing a page layout. 2009-10-29T09:34:04Z Xavier Lacot air, application, tool, layout, Measuring, measure, html

PixelWindow

by Xavier Lacot

PixelWindow is a simple, light-weight, cross-platform application for measuring things on your screen. It creates a transparent window that acts like a pixel ruler with its width and height reported in the center. Usefull when fixing a page layout.

Copy | React (0)
]]> jQuery maxImage plugin: Demo http://www.aaronvanderzwan.com/maximage/ This plugin will resize and scale targeted images to their max width according to the image ratio, the browser size and some simple options. Change the size of your browser to see it's effect. 2009-09-02T11:58:29Z Spone plugin, image, javascript, jQuery

jQuery maxImage plugin: Demo

by Spone & 2 other(s)

This plugin will resize and scale targeted images to their max width according to the image ratio, the browser size and some simple options. Change the size of your browser to see it's effect.

Copy | React (0)
]]> 960 Grid System http://960.gs/ <blockquote><p>The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem</p></blockquote> 2009-07-18T23:21:43Z karlcow webdesign, css

960 Grid System

by karlcow & 19 other(s)

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem

Copy | React (0)
]]> Prevent your images from being too large http://www.wprecipes.com/prevent-your-images-from-being-too-large .post img { max-width: 500px; /* Adjust this value according to your content area size*/ height: auto; } 2009-08-26T09:33:52Z mozkart

Prevent your images from being too large

by mozkart

.post img { max-width: 500px; /* Adjust this value according to your content area size*/ height: auto; }

Copy | React (0)
]]> Qt Labs Blogs » Qt Declarative UI http://labs.trolltech.com/blogs/2009/05/13/qt-declarative-ui/ Declarative UI is a way of making fluid user interfaces by describing them in terms of simple elements (Text, Image, Rect,and other QObjects) that are built up into components. The reason it is “declarative” is that rather than the changes in the UI being expressed as imperative code (”set this, set that, do this, do that, …”), they are instead expressed as sets of QObject property expressions (”this width is always half that width”), grouped into states (”when enabled, the properties are …, when disabled, they are …”).  The language that enables this is named QML.  QML is simple yet powerful. Most of a user interface is described by a simple tree structure of property bindings: 2009-05-19T10:30:03Z oseres interface

Qt Labs Blogs » Qt Declarative UI

by oseres

Declarative UI is a way of making fluid user interfaces by describing them in terms of simple elements (Text, Image, Rect,and other QObjects) that are built up into components. The reason it is “declarative” is that rather than the changes in the UI being expressed as imperative code (”set this, set that, do this, do that, …”), they are instead expressed as sets of QObject property expressions (”this width is always half that width”), grouped into states (”when enabled, the properties are …, when disabled, they are …”).  The language that enables this is named QML.  QML is simple yet powerful. Most of a user interface is described by a simple tree structure of property bindings:

Copy | React (0)
]]> PopTip - Greasemonkey Customisable - Add pop-up preview to any site - Flickr http://userscripts.org/scripts/show/32219 Script Summary: Add pop-up preview to any site.(Script homepage).....Rules for popup action must be written in "SITEINFO" in proper format. Properties of SITEINFO url (required)(RegExp) : URL to which the rule is applied. targetElement (required)(XPath) : XPath which select "A" elements. When "mouseover" action occurs on them, linked pages (values of "href" attributes) will be fetched. popupElement (required) (XPath) : XPath which select elements in fetched pages. These elements will be appear in tooltips. disabled (optional) : If you want to disable a rule temporally, set "false". style (optional) : CSS attributes of tooltips. Please be careful to write in CamelCase! (border-width -> borderWidth) stripe (optional) : If you set "true", small icons will be appended to elements on which the action will occur. 2009-04-30T00:40:35Z decembre flickr, FlickrSurf+, extension, pop-up, preview, previsualiser, image, thumbnail, firefox, greasemonkey, script, tutoriel, tutorial

PopTip - Greasemonkey Customisable - Add pop-up preview to any site - Flickr

by decembre

Script Summary: Add pop-up preview to any site.(Script homepage).....Rules for popup action must be written in "SITEINFO" in proper format. Properties of SITEINFO url (required)(RegExp) : URL to which the rule is applied. targetElement (required)(XPath) : XPath which select "A" elements. When "mouseover" action occurs on them, linked pages (values of "href" attributes) will be fetched. popupElement (required) (XPath) : XPath which select elements in fetched pages. These elements will be appear in tooltips. disabled (optional) : If you want to disable a rule temporally, set "false". style (optional) : CSS attributes of tooltips. Please be careful to write in CamelCase! (border-width -> borderWidth) stripe (optional) : If you set "true", small icons will be appended to elements on which the action will occur.

Copy | React (0)
]]> 960 Grid System http://960.gs/ The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem 2009-04-26T16:08:28Z gregg grid layout

960 Grid System

by gregg & 19 other(s)

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem

Copy | React (0)
]]> JS Coverflow http://radnan.public.iastate.edu/coverflow/ Coverflow in Javascript !!Strictly proof of concept!! * Tested in Firefox 3, Opera 9.5 and Safari 3 * Only works for images of equal width and height (250px x 250px in this example) * Utilizes scroll wheel and left/right keys * You can have custom labels and onclick events for center image * I have tested it with other javascript libraries like jQuery, MooTools, Dojo and Prototype 2009-03-30T10:23:43Z Spone javascript, coverflow

JS Coverflow

by Spone & 3 other(s)

Coverflow in Javascript !!Strictly proof of concept!! * Tested in Firefox 3, Opera 9.5 and Safari 3 * Only works for images of equal width and height (250px x 250px in this example) * Utilizes scroll wheel and left/right keys * You can have custom labels and onclick events for center image * I have tested it with other javascript libraries like jQuery, MooTools, Dojo and Prototype

Copy | React (0)
]]> A Huge Compilation of 60 Free Illustrator Brushes - Vectortuts+ http://vector.tutsplus.com/articles/web-roundups/a-huge-compilation-of-60-free-illustrator-brushes/ Adobe Illustrator has many powerful tools and unique features. And one among them is Illustrator's Paintbrush Tool (B). The brushes can be applied to paths and strokes, they are great for creating stunning stroked designs in seconds. And, the best part about Illustrator's brushes is that they are vectors and can be completely modified to suit your needs by changing their colors, stroke width, weight, and more. Let's take a look at a large selection of Illustrator brushes available on the web! 2009-03-28T14:02:44Z decembre illustrator, free, brush, compilation, ressource, brushe, gratuit

A Huge Compilation of 60 Free Illustrator Brushes - Vectortuts+

by decembre

Adobe Illustrator has many powerful tools and unique features. And one among them is Illustrator's Paintbrush Tool (B). The brushes can be applied to paths and strokes, they are great for creating stunning stroked designs in seconds. And, the best part about Illustrator's brushes is that they are vectors and can be completely modified to suit your needs by changing their colors, stroke width, weight, and more. Let's take a look at a large selection of Illustrator brushes available on the web!

Copy | React (0)
]]> JS Coverflow http://radnan.public.iastate.edu/coverflow/ Coverflow in Javascript !!Strictly proof of concept!! * Tested in Firefox 3, Opera 9.5 and Safari 3 * Only works for images of equal width and height (250px x 250px in this example) * Utilizes scroll wheel and left/right keys * You can have custom labels and onclick events for center image * I have tested it with other javascript libraries like jQuery, MooTools, Dojo and Prototype 2009-03-27T17:48:29Z sbrothier javascript, web/tech

JS Coverflow

by sbrothier & 3 other(s)

Coverflow in Javascript !!Strictly proof of concept!! * Tested in Firefox 3, Opera 9.5 and Safari 3 * Only works for images of equal width and height (250px x 250px in this example) * Utilizes scroll wheel and left/right keys * You can have custom labels and onclick events for center image * I have tested it with other javascript libraries like jQuery, MooTools, Dojo and Prototype

Copy | React (0)
]]> Proxy-Service.de - fast WebProxy width German IP http://www.proxy-service.de/ 2009-03-20T15:57:35Z jakamos Anonym.Proxys

Proxy-Service.de - fast WebProxy width German IP

by jakamos

Copy | React (0)
]]> swffit - Smart Flash Resize Script - 100% Width and 100% Height http://swffit.millermedeiros.com/ 2009-02-23T15:34:14Z dav flash, html

swffit - Smart Flash Resize Script - 100% Width and 100% Height

by dav & 3 other(s)

Copy | React (0)
]]> Ask SM [CSS/JS]: Pixel Width Decisions, Modal Boxes | Developer's Toolbox | Smashing Magazine http://www.smashingmagazine.com/2009/02/05/ask-sm-pixel-width-decisions-rollover-buttons-modal-boxes/ 2009-02-06T15:31:43Z vrossign modal, tabs, cookies, windows, js, jQuery

Ask SM [CSS/JS]: Pixel Width Decisions, Modal Boxes | Developer's Toolbox | Smashing Magazine

by vrossign

Copy | React (0)
]]> 960 Grid System http://960.gs/ The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. 2009-01-09T10:15:45Z melanie photoshop

960 Grid System

by melanie & 19 other(s)

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.

Copy | React (0)
]]> A growing collection of Basic WordPress Templates, for web designers | SAOB: Senseless Acts of Beauty http://www.saobart.com/?p=339 After beginning development of several WordPress websites I found that I was doing the same beginning edits to the wordpress theme structure. So, in order to make my life easy, I proceeded to make some basic editable templates that would suit my needs for multiple websites. Also its very close to Christmas, and this is a time of giving and sharing so I am going to make these theme templates available to anyone. NOTE: These theme templates are only meant to be expanded by a web designer, by no means are these templates a finished design. Now then, there are many basic features of any website that I wanted to make available in each of these theme templates, and over time I will try and make a theme template for each combination. Features to be considered: * Single column layout * Two column layout * Three column layout * Fixed width * Fluid width * Top navigation addition * Search bar in header * Multiple side bars 2008-12-02T19:56:56Z camel template, wordpress, themes, web

A growing collection of Basic WordPress Templates, for web designers | SAOB: Senseless Acts of Beauty

by camel

After beginning development of several WordPress websites I found that I was doing the same beginning edits to the wordpress theme structure. So, in order to make my life easy, I proceeded to make some basic editable templates that would suit my needs for multiple websites. Also its very close to Christmas, and this is a time of giving and sharing so I am going to make these theme templates available to anyone. NOTE: These theme templates are only meant to be expanded by a web designer, by no means are these templates a finished design. Now then, there are many basic features of any website that I wanted to make available in each of these theme templates, and over time I will try and make a theme template for each combination. Features to be considered: * Single column layout * Two column layout * Three column layout * Fixed width * Fluid width * Top navigation addition * Search bar in header * Multiple side bars

Copy | React (0)
]]> Ezine Width - How Wide Should An HTML Email Newsletter Be? http://emailuniverse.com/ezine-tips/?Ezine-Width---How-Wide-Should-An-HTML-Email-Newsletter-Be?&id=1305 2008-11-25T10:04:49Z br1o emailing, email, largeur, width, webdesign, newsletters, newsletter, htmlemail, inspiration, mail

Ezine Width - How Wide Should An HTML Email Newsletter Be?

by br1o

Copy | React (0)
]]> jQuery.popeye - an inline lightbox alternative | Christoph Schüßler » Informationsarchitektur und so http://herr-schuessler.de/blog/jquerypopeye-an-inline-lightbox-alternative/ The plugin transforms an unoredered list of images into a box displaying only one preview image at a time. The box has controls to skim through the preview images and to enlarge a given image. The box expands to accomodate the enlarged version, while the controls are hidden in full image size mode. A simple click on the image returns the box to its compact state. The compact box has fixed, automatically calculated dimensions. The widht and height are calculated so that all thumbnail images are cropped to the smallest width and height in the set and centered resulting image area (stage). 2009-01-26T07:27:48Z conseilnet galerie photos, jQuery, plugin, images, image, lightbox, gallery

jQuery.popeye - an inline lightbox alternative | Christoph Schüßler » Informationsarchitektur und so

by conseilnet & 3 other(s)

The plugin transforms an unoredered list of images into a box displaying only one preview image at a time. The box has controls to skim through the preview images and to enlarge a given image. The box expands to accomodate the enlarged version, while the controls are hidden in full image size mode. A simple click on the image returns the box to its compact state. The compact box has fixed, automatically calculated dimensions. The widht and height are calculated so that all thumbnail images are cropped to the smallest width and height in the set and centered resulting image area (stage).

Copy | React (0)
]]> jQuery.popeye - an inline lightbox alternative | Christoph Schüßler » Informationsarchitektur und so http://herr-schuessler.de/blog/jquerypopeye-an-inline-lightbox-alternative/ The plugin transforms an unoredered list of images into a box displaying only one preview image at a time. The box has controls to skim through the preview images and to enlarge a given image. The box expands to accomodate the enlarged version, while the controls are hidden in full image size mode. A simple click on the image returns the box to its compact state. The compact box has fixed, automatically calculated dimensions. The widht and height are calculated so that all thumbnail images are cropped to the smallest width and height in the set and centered resulting image area (stage). 2008-11-22T00:03:02Z camel plugin, image, images, list, box, jQuery, lightbox, inline

jQuery.popeye - an inline lightbox alternative | Christoph Schüßler » Informationsarchitektur und so

by camel & 3 other(s)

The plugin transforms an unoredered list of images into a box displaying only one preview image at a time. The box has controls to skim through the preview images and to enlarge a given image. The box expands to accomodate the enlarged version, while the controls are hidden in full image size mode. A simple click on the image returns the box to its compact state. The compact box has fixed, automatically calculated dimensions. The widht and height are calculated so that all thumbnail images are cropped to the smallest width and height in the set and centered resulting image area (stage).

Copy | React (0)
]]> Monospace/Fixed Width Programmer's Fonts http://www.lowing.org/fonts/ 2008-11-06T03:26:31Z yuan font

Monospace/Fixed Width Programmer's Fonts

by yuan & 10 other(s)

Copy | React (0)
]]> Flexigrid for jQuery : Web 2.0 Javascript Data Grid http://www.webplicity.net/flexigrid/ Lightweight but rich javascript data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content. Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration. Features * Resizable columns * Resizable height and width * Sortable column headers * Cool theme * Can convert an ordinary table * Ability to connect to an ajax data source (XML and JSON[new]) * Paging * Show/hide columns * Toolbar (new) * Search (new) * Accessible API * Many more 2008-11-05T07:59:05Z camel web, javascript, ajax, xml, convert, search

Flexigrid for jQuery : Web 2.0 Javascript Data Grid

by camel & 6 other(s)

Lightweight but rich javascript data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content. Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration. Features * Resizable columns * Resizable height and width * Sortable column headers * Cool theme * Can convert an ordinary table * Ability to connect to an ajax data source (XML and JSON[new]) * Paging * Show/hide columns * Toolbar (new) * Search (new) * Accessible API * Many more

Copy | React (0)
]]> On having layout http://www.satzansatz.de/cssd/onhavinglayout.html <blockquote><p>A lot of Internet Explorer's rendering inconsistencies can be fixed by giving an element “layout.”. John Gallant and Holly Bergevin classified these inconsistencies as “dimensional bugs,” meaning that they can often be solved by applying a width or height.</p></blockquote> 2008-10-24T11:22:15Z ms_michel css

On having layout

by ms_michel & 10 other(s)

A lot of Internet Explorer's rendering inconsistencies can be fixed by giving an element “layout.”. John Gallant and Holly Bergevin classified these inconsistencies as “dimensional bugs,” meaning that they can often be solved by applying a width or height.

Copy | React (0)
]]> sebsauvage.net - Les trucs qui m'énervent - <img style="width: 18px; height: 18px; border:none;" src="../images/smiley_colere.gif"> Le bestiaire des forums http://sebsauvage.net/rhaa/?2007/07/20/10/16/29-le-bestiaire-des-forums 2008-09-09T15:49:29Z yakari35 humour

sebsauvage.net - Les trucs qui m'énervent - <img style="width: 18px; height: 18px; border:none;" src="../images/smiley_colere.gif"> Le bestiaire des forums

by yakari35

Copy | React (0)
]]> Flexigrid http://www.webplicity.net/flexigrid/ Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content. Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration. Features * Resizable columns * Resizable height and width * Sortable column headers * Cool theme * Can convert an ordinary table * Ability to connect to an ajax data source (XML and JSON[new]) * Paging * Show/hide columns * Toolbar (new) * Search (new) * Accessible API * Many more I'm planning to add an Editable and Resortable rows feature, as well as other cool GUI features. One of my main goal for the plugin is ultimately to keep it lightweight, maybe under 20k when compressed. Because otherwise you should probably stick with Ext Grid or YUI data table. 2008-08-04T06:16:13Z eledo34 jQuery, tableau

Flexigrid

by eledo34 & 6 other(s)

Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content. Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration. Features * Resizable columns * Resizable height and width * Sortable column headers * Cool theme * Can convert an ordinary table * Ability to connect to an ajax data source (XML and JSON[new]) * Paging * Show/hide columns * Toolbar (new) * Search (new) * Accessible API * Many more I'm planning to add an Editable and Resortable rows feature, as well as other cool GUI features. One of my main goal for the plugin is ultimately to keep it lightweight, maybe under 20k when compressed. Because otherwise you should probably stick with Ext Grid or YUI data table.

Copy | React (0)
]]> Flexigrid http://www.webplicity.net/flexigrid/ Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content. Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration. Features * Resizable columns * Resizable height and width * Sortable column headers * Cool theme * Can convert an ordinary table * Ability to connect to an ajax data source (XML and JSON[new]) * Paging * Show/hide columns * Toolbar (new) * Search (new) * Accessible API * Many more I'm planning to add an Editable and Resortable rows feature, as well as other cool GUI features. One of my main goal for the plugin is ultimately to keep it lightweight, maybe under 20k when compressed. Because otherwise you should probably stick with Ext Grid or YUI data table. 2008-08-03T01:52:50Z loneseb ajax, plugin, table, edit, edition, crud, modification, javascript

Flexigrid

by loneseb & 6 other(s)

Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content. Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration. Features * Resizable columns * Resizable height and width * Sortable column headers * Cool theme * Can convert an ordinary table * Ability to connect to an ajax data source (XML and JSON[new]) * Paging * Show/hide columns * Toolbar (new) * Search (new) * Accessible API * Many more I'm planning to add an Editable and Resortable rows feature, as well as other cool GUI features. One of my main goal for the plugin is ultimately to keep it lightweight, maybe under 20k when compressed. Because otherwise you should probably stick with Ext Grid or YUI data table.

Copy | React (0)
]]>