I am not a sales person so I don’t know how to sell it, but it’s not hard from a technical perspective to, let’s say consolidate all real estate websites in NZ into a platform.

If we look at all these real estate listings, they basically consisted with 2 models, the “listing” and “agent”. Having those 2 models stores 90% of the information needed. Surely we are not stopping at those 2 models, we will normalise the repetitive fields into models defined such as “location” , “company”(if we e want to have just one installation to serve multiple company websites”, etc etc. I think for implementing this is using Django, creating models is a breeze and using Django Rest Framework serving as APIs.

Slapping on a comprehensive search function using ElasticSearch, easy.

Since now we have a backend and communicating via API calls, then implementing the frontends is rather a freedom of choice for different companies. Lots of options (Django, NodeJS etc etc)

Side note:

These real estate companies will most probably have their own CRM systems, might be a bit of pain the implement the integration and probably having each installation for every company is a better choice.

as you know I had 2 options, use plugins or roll my own.
It’s personal, and I chose the latter. Simply because of the desire of knowing the mechanics underneath everything.

Before we start, I would like you be aware that, the code snippets in this article were written on the fly from my memory, so please excuse for any syntax errors.

Let’s roll!

First thing first, you will need JQuery. I mean, if you don’t know what JQuery is, you probably don’t want to proceed any further.

The concept of carousel:

A carousel should contains the following elements:

• Some slides, inside
• A slide holder, inside
• A stage

Slides are the areas you want to show to your viewers, each slide has same width and height and floats left to each other

eg.

<div style="width: 100px; height: 100px; float: left;">slide 1</div>
<div style="width: 100px; height: 100px; float: left;">slide 2</div>

A slide holder inside a stage is to provide enough space for the slides so the slides won’t wrap to a second line, notice it has 2 x 100px width for 2 slides

eg.

<div id="slide-holder" style="width: 200px; height: 100px;">
<div style="width: 100px; height: 100px; float: left;">slide 1</div>
<div style="width: 100px; height: 100px; float: left;">slide 2</div>
</div>

A stage is a div element that has a fixed width and height, in this case we are showing one slide therefore width is 100px, notice the slide-holder is wider than the stage, and it will show up a horizontal scroll bar, we don’t want that, so we need to add overflow:hidden to the stage

eg.

<div id="stage" style="width: 100px; height: 100px; overflow: hidden;">
<div id="slide-holder" style="width: 300px; height: 100px;">
<div style="width: 100px; height: 100px; float: left;">slide 1</div>
<div style="width: 100px; height: 100px; float: left;">slide 2</div>
</div>
</div>

Now, you have the basic structure for the carousel. To show the slide 2, you just need to scroll the stage to the right.

eg.

//jquery animate function to create scroll effect
$('#stage').animate({"scrollLeft":"+=100"});

Vise versa, you can figure out how to scroll back to slide 1.

The magic, infinite scroll with slide animation

Infinite scroll means when you hit the last slide and keep scrolling right, the first of the slide reappears on the right and so on.

To make it happen, you clone the slides, prepend and append to the original slides, so you have same set of slides on the left and on the right.

Make sure once you have done that, scroll your stage to the middle set, you will see the reason in a few moments

Magic moment, when you scroll right, you reduce the most the width of the most left slide to zero by animating it, which will create the effect of slide the carousel to left, once the animation is finished, you move the most left slide to the most right, in other words, the first slide become the last slide, and restore the width back to original, say 100px in this case

eg.

var slide_holder = $('#slide-holder);
//get the slides
var slides = $('div', slide_holder);
//animate width to 0, then move to the back and restore width
slides[0].animate({'width':0}, function(){
$(this).appendTo(slide_holder);
$(this).width(100);
});

by now, you should have a slide set look like this
slide 2, slide 1, slide 2, slide 1, slide 2, slide 1

Vise versa, to scroll left, you first shrink the furthest slide on the right to zero width, then move it to the most left, then slowly expand it’s width back to 100px in the case by animating it (refer to the above code)

And that’s it! it’s simple as that! If you are still struggling, feel free to drop me a comment.

http://twitter.github.com/bootstrap/

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

History tells us, we as human, will repeat history, for example,  have a look at my previous blog about HTML 5 Form Elements Demo Firefox already doesn’t support some of the elements. Another example, location detection, Firefox provides more user options than other browsers(eg. Chrome) which makes implementation extremely difficult.

Due to fragmentation like this, we are forced to skip this location feature in our next software release, hopefully we can come up a better approach before the next release.

read the full article here

Overview of Firebug 1.6

Firebug 1.6 supports Firefox 3.6

Console and Command Line

• Command line available on all panels
• New API for the console object: console.table()
• Console allows to filter its content
• Improved auto-completion now the best of all
• Logging of cut/copy/paste events
• Support for XPath console logging
• Descriptive background colors for console messages

HTML

• Support for expand All through a context menu or by pressing ‘*’
• When copying XPath, namespace is included (if any)
• Improved display of iframes
• DOCTYPE is now also displayed
• Scrollable Breadcrumbs
• Better keyboard navigation

CSS

• Better search match highlighting
• SVG CSS autocomplete
• Support for copying CSS declarations
• Folding for computed styles
• Auto-completion for “!important”

Script

• Disabling break on next error
• The stack panel now displays argument names and values + support for expanding/collapsing
• Script Panel shows nicer message when it is inactive during page load
• Improved presentation of the scope chain in the Script panel Watch side panel
• Save and restore breakpoints across Firefox sessions
• Script panel file list has auto scroll button and shows filtering text

DOM

• Show the prototype, constructor, and __proto__ properties of objects
• localStorage and sessionStorage now also displayed
• Better search match highlighting

Net

• BF Cache reads are also reported
• MozAfterPaint events displayed in the timeline
• SVG pretty print in the net panel
• Better search match highlighting

Toolbars and Menus

• Back and Forward arrows
• Scrolling Panels tab Bar
• New option to use en-US locale

Miscellaneous

• First Run Page now displayed when new Firebug version is installed
• TestBot result page displaying results from automated testing
• Known issue page
• Visual indication for search field not finding any matches
• Support for private browsing mode
• Filterable file location menus
• Locale updates + one new language
• New Firebug icon
• Editor configurations improvements

html5 test ie7 scored 27 points

Take a test here

I ran a few tests again different browsers installed on my computers: (scores out of a total of 300 points)

Windows XP / Ubuntu 10.4

IE7: 12 points

IE8:  27 points

Latest Firefox: 139 points

Chrome 7: 231 points

Android 2.2 Hero

Stock browser: 127 points

iOS 4 IPhone 3G

Stock browser: 196 points

I had a div with css set to overflow:hidden and using jquery’s scrollLeft function in order to scroll the thumbnails, everything works, however, if you close the modal (setting the div to display:none), the scrollLeft value change back to 0, so next time I open up the modal again, it won’t remember the scroll position. However firefox and internet explorer doesn’t suffer that.

The way I worked around it was not to use display:none at all, instead use left:-9999 to shift the div out of the page.