We're growing into something new. Read More
adardesign

Eliazer Braun


Discussion

The evolution of the web

A cool informative timeline with interesting information on how we got to where we are now.

Email campaign

This is for a email blast for thepenline.com. See full size for detail. Looking for all types of feedback.

$.each(["h1","h2","h3","h4","h5","h6"], function(index, value) { 
console.log($(value))
});

Get a quick SEO report on header's usage (h1, h2 etc) on a page.

Logs the usage of Header's (h1, h2 etc) used on a page Just open firebug (or any console) and run this code to get a quick look on the headers where the are used. *Requires jQuery (can be loaded with the jQuerify bookmarklet)

(function ($) {
    $.fn.bannerRotate = function (options) {
        var defaults = {
            speed:1500,
            seconderySpeed:500,
            interval:5000,
            builedNav:function(a){
                var i = 0,
                    container= $("<div class='controlsContainer'>").hide();
                    navElements = " "
                for(var i=0; i<a;i++){
                    navElements+="<a href='#'>";
                    }
                container.html(navElements);
                return container;
            },
            stopAnimation:function(b){
                b.stop();
            },
            stopInterval:function(int){
                clearInterval(int);
            }
        }
        var options = $.extend(defaults, options);
        return this.each(function (i, el) {
            var bannerContainer = $(el),
                banners = bannerContainer.children(),
                bannersLength = banners.length,
                bannerNav = bannerContainer.append((options.builedNav(bannersLength).fadeIn(options.seconderySpeed))).find(".controlsContainer a"),
                next=1,
                last=0,
                fadeInterval = function(){
                    banners.eq(last).fadeOut(options.speed);
                    banners.eq(next).fadeIn(options.speed);            
                    bannerNav.removeClass("active");
                    bannerNav.eq(next).addClass("active");
                    next = next===bannersLength-1?0:next+=1;
                      last = last===bannersLength-1?0:last+=1;
                },    

                doFadeInterval = setInterval(fadeInterval,options.interval);
                bannerNav.eq(0).addClass("active");
                
                bannerContainer.hover(function(){
                    options.stopAnimation(banners);
                    options.stopInterval(doFadeInterval);
                    },function(){
                    doFadeInterval = setInterval(fadeInterval,options.interval);
                })
            // used "delegate" (boosts performance)
                .find(".controlsContainer").delegate("a", "click", function(){
                    var clickedNav = $(this);
                    options.stopAnimation(banners);
                    options.stopInterval(doFadeInterval);
                   clickedNav.siblings().removeClass("active");
                    clickedNav.addClass("active");
                    indexOfClicked = bannerNav.index(clickedNav);
                    
                    banners.eq(indexOfClicked === last?bannersLength+100:last).fadeOut(options.speed);
                    banners.eq(indexOfClicked).fadeIn(options.speed, function(){banners.eq(indexOfClicked).css("opacity",1)});
                    last = indexOfClicked;
                    next = indexOfClicked === bannersLength-1?0:indexOfClicked+1;
                    return false                       
                })
            })
        }  
})(jQuery);




// run it!
    $(".bannerContainer").bannerRotate();



jQuery plugin "banner rotater" Please review code and comment

I wanted a simple banner rotate functionality on my site, i know that i can grab one off one of the hundreds of plug-ins available, But i wanted to build it myself. I will need multiple such components on a page (that is why i made this into a configurable plugin). See a working demo. jsfiddle.net/adardesign/NFDvB/ Please comment (and critique) on the quality of this code. Thanks

(function () {
        var $style = $('head').find('link[type=text/css]'),
             hrefArray = [];
            for(i=0;i<$style.length;i++){
               hrefArray.push($style.eq(i).attr("href"))
              }
       (function () {
          $style.each(function(i,e){
               $(this).attr('href', hrefArray[i] + '?cachebuster=' + Math.random());
        })
         setTimeout(arguments.callee, 5000);
   })();
})();

Refresh CSS links by interval while designing/debugging

This code extends forr.st/… slightlymore wrote the core concept code, i just extended to allow multiple CSS <link's> in a page. It basically refreshes all the styles on the page while debugging. You can include it in the page (while in developing mode) or run it in the (firebug) console. Requires jQuery.

Untitled

I am designing a logo/identity for a architecture and interior planner and designer, I would really appreciate your thoughts and comments :)

First try:
#problamaticElement{zoom:1;}

Second try:
#problamaticElement{display:inline;}

Your first try for debugging

zoom 1 triggers >IE7 hasLayout which for some reason talks to IE7 layout engine to behave. It works 90% of the time.

function getStickingOutElement(frame, startFrom) {
    var frame = $(frame).width() || $(window).width(),
        startFrom = startFrom || document.body,
        report = [];
    $(startFrom).find("*").andSelf().each(function (i, e) {
        if (parseInt($(e).width()) > frame) {
            report.push(e);
        }
    })
    return report
}
// define who is the frame, and from where to start.
getStickingOutElement(window, document.body)

Eliminate unwanted scrollbars, This is a Firebug debug function that reports those elements that stick out and causing these unwanted scrollbars.

Ever wondered who is sticking out of a element and creating scroll-bars? This code checks sticking out elements horizontally, You can quickly change it to see all those elements sticking out on the Y as well by changing "width" to "height". Open firebug and open console and paste in this function. When calling the function you can optionally define (by passing arguments) who is the frame, and from where to start to check. Requires: jQuery on page. (Remember: you can always jQuerify the page and then use it).