Script & Style Revamp with Submission Favelet

By  on  

It's been six months and some change since the launch of Script & Style and the website is doing extremely well. Traffic continues to rise, our RSS feed subscriber count is close to 4,000, the submissions continue to be quality, and we're slowly adding new features to the site. We've recently taken some time to revamp the website to continue its growth.

Click here to read Chris Coyier's article with regard to the site redesign.

The newest code snippet we've added to enhance your S&S experience is a submission favelet/bookmarklet. This new favelet allows you to quickly submit the article you're reading, no matter what the source, to Script & Style. All you need to do is select/highlight the text you'd like to act as the article description and click the favelet. A new window will appear with the submission screen already filled out for you!

The Favelet Code

//favelet modified from:  http://cubicle17.com/post/32941821/bookmarklet-search-netflix
(function()%7Bvar%20d=document,w=window,ds=d.getSelection,ws=w.getSelection,ss=d.selection,e=encodeURIComponent;t=(ws)%3Fws():(ds)%3Fds():(ss)%3Fss.createRange().text:'';t=(t.toString().length)%3Ft:prompt('Please select article description text.','');if(t)%7Ba='http://www.scriptandstyle.com/submit%3Ftitle=' + e(document.title) + '%26url=' + e(window.location) + '%26content=';u=a+e(t);f=function()%7Bx=w.open(u,'nfx','scrollbars=1,toolbar=0,resizable=1,status=1,width=600,height=600');if(!x)w.location.href=u;%7D;if(/Firefox/.test(navigator.userAgent))setTimeout(f,0);else%20f();%7D%7D)();

Don't worry about the mess of code. All you need to do is drag the link to your "favorites" toolbar and it will work on any site you visit!

Jump on over to Script & Style to check out the new look and be sure to grab the Script & Style favelet!

Recent Features

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

Incredible Demos

  • By
    Create Custom Events in MooTools 1.2

    Javascript has a number of native events like "mouseover," "mouseout", "click", and so on. What if you want to create your own events though? Creating events using MooTools is as easy as it gets. The MooTools JavaScript What's great about creating custom events in MooTools is...

  • By
    RealTime Stock Quotes with MooTools Request.Stocks and YQL

    It goes without saying but MooTools' inheritance pattern allows for creation of small, simple classes that possess immense power.  One example of that power is a class that inherits from Request, Request.JSON, and Request.JSONP:  Request.Stocks.  Created by Enrique Erne, this great MooTools class acts as...

Discussion

  1. I like the change to the layout. Not that I disliked the previous, but the new one lends itself to the content well. Cool favelet, nice job man!

  2. talv

    nice redesign but your footer still says 2008!

  3. Hey David, just wanted to let you know that I’ve turned the “Social Bookmarking Menu” into a WordPress plugin and submitted it to the plugins directory on WordPress.org…

    Until they add it though, it’s available for download on my site here: http://eight7teen.com/sexy-bookmarks

    Script & Style is still the default #1 link in the menu! I figured that was the least I could do for you and Chris getting a buzz going about the menu on Script & Style!

    You know, in the one day that it was on the front page over there, the original menu was downloaded over 4,000 times!! Anyway, thanks again and I’m still working on those questions… I’ll email them to you when I finish.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!