KrishnaVandanu

36 Eye-Catching Jquery Navigation Menus

<div dir="ltr" style="text-align: left;" trbidi="on"> <div style="text-align: justify;"> Navigation menus have really important role in any website. For big sites full with a lot of pages and articles, drop down menus and tabs are popular because they can make it a lot more easier to navigate and move through site, also you can save space on website displaying content on dynamic tabs. Also if you want to create a navigation menu, that really stands out of the crowd, jQuery could be the right choice to choose offering bunch of customizable options. That’s why I present to You 36 really good jquery navigation menu examples for every need.</div> <h2 style="text-align: justify;"> 1.<a href="http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial" target="_blank">jQuery Tabbed Interface / Tabbed Structure Menu Tutorial</a></h2> <div style="text-align: justify;"> Tabbed Interface or Tabbed Structure Menu is getting really famous in web design & development. This tutorial will show you how to build your own tabbed Interface using jQuery with slideDown/slideUp effect. Be sure to check out the demo, you definitely will like it.</div> <div style="text-align: center;"> <a class="aligncenter" href="http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial" target="_blank"><img alt="jquery-tabbed-interface" height="238" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-tabbed-interface.jpg" width="570" /></a></div> <div style="text-align: center;"> <a href="http://www.queness.com/resources/html/tabmenu/jquery-tabbed-menu-queness.html" target="_blank">Preview </a> || <a href="http://www.queness.com/resources/archives/jquery-tab-menu.zip" target="_blank">Download</a></div> <h2 style="text-align: justify;"> 2.<a href="http://www.shopdev.co.uk/blog/animated-menus-using-jquery/" target="_blank">Animated Menus Using jQuery</a></h2> <div style="text-align: justify;"> Learn how to create this amazing animated effect menu just with plain Xhtml,CSS and Javascript help, similar to <a href="http://dragoninteractive.com/" target="_blank">Dragon Interactive</a> (dragoninteractive.com).</div> <div style="text-align: center;"> <a class="aligncenter" href="http://www.shopdev.co.uk/blog/animated-menus-using-jquery/" target="_blank"><img alt="jquery-animated-menu" height="100" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-animated-menu.jpg" width="570" /></a></div> <div style="text-align: center;"> <a href="http://www.shopdev.co.uk/blog/menuDemo.html" target="_blank">Preview</a> || <a href="http://www.shopdev.co.uk/blog/menuTut.psd" target="_blank">Download</a></div> <div style="text-align: justify;"> </div> <h2 style="text-align: justify;"> 2.1. <a href="http://codecanyon.net/item/sliding-tabs-jquery-plugin/141774?ref=1stwebdesigner">Sliding Tabs – jQuery Plugin</a></h2> <div style="text-align: justify;"> Sliding Tabs is a jQuery plugin for creating horizontal and/or vertical animated tabs for your website. You can have multiple instances of the tabs and customize them in any way with CSS . The script comes with many customization options, making it very flexible and easy to customize to your needs.</div> <div style="text-align: center;"> <a class="aligncenter" href="http://codecanyon.net/item/sliding-tabs-jquery-plugin/141774?ref=1stwebdesigner"><img alt="" class="" height="300" src="http://3.s3.envato.com/files/2497280/inline_preview.jpg" title="Sliding Tabs" width="590" /></a></div> <div style="text-align: center;"> <a href="http://codecanyon.net/item/sliding-tabs-jquery-plugin/full_screen_preview/141774?ref=1stwebdesigner">View Demo</a></div> <h2 style="text-align: justify;"> 3. <a href="http://nettuts.com/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/" target="_blank">Create a Cool Animated Navigation with CSS and jQuery (Tutorial + Download)</a></h2> <div style="text-align: justify;"> Animation and visual feedback are great ways to assist a user in navigating and interacting with a website. While traditionally Adobe’s Flash was the goto for anything animated, these days with the magic of javascript we can avoid Flash altogether.</div> <div style="text-align: center;"> <a class="aligncenter" href="http://nettuts.com/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/" target="_blank"><img alt="jquery-navigation-slide" height="160" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-navigation-slide.jpg" width="570" /></a></div> <div style="text-align: center;"> <a href="http://nettuts.com/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/" target="_blank">Preview</a> || <a href="http://nettuts.s3.amazonaws.com/009_jQueryMenu/sm/result.zip" target="_blank">Download</a></div> <h2 style="text-align: justify;"> 4.<a href="http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx" target="_blank">jQuery ListNav Plugin</a></h2> <div style="text-align: justify;"> This jQuery plugin supplies an easy way to unobtrusively add a letter-based navigation widget to any UL or OL list. An easily stylable (via CSS) nav bar appears above the list, showing the user the letters A-through-Z. Clicking one of the letters filters the list to show only the items in the list that start with that letter. Hovering over a letter (optionally) shows a count above the letter, indicating how many items will be displayed if that letter is clicked. Other options give you control over the basic functionality.</div> <div style="text-align: center;"> <a class="aligncenter" href="http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx" target="_blank"><img alt="jquery-list-nav" height="143" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-list-nav.jpg" width="570" /></a></div> <div style="text-align: center;"> <a href="http://www.ihwy.com/Labs/Demos/Current/jquery-listnav-plugin.aspx" target="_blank">Preview </a> || <a href="http://www.ihwy.com/Labs/downloads/jquery-listnav/2.0/jquery.listnav-2.0.js" target="_blank">Download</a></div> <h2 style="text-align: justify;"> 5. <a href="http://plugins.jquery.com/project/jqDock" target="_blank">jqDock menu</a></h2> <div style="text-align: justify;"> Transform a set of images into a Mac-like Dock menu, horizontal or vertical, with icons that expand on rollover, and optional labels.</div> <div style="text-align: center;"> <a class="aligncenter" href="http://plugins.jquery.com/project/jqDock" target="_blank"><img alt="jqdock-jquery-plugin-menu" height="303" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jqdock-jquery-plugin-menu.jpg" width="474" /></a></div> <div style="text-align: center;"> <a href="http://www.wizzud.com/jqDock/" target="_blank">Preview</a> || <a href="http://www.wizzud.com/jqDock/" target="_blank">Download</a></div> <h2 style="text-align: justify;"> 5.1. <a href="http://codecanyon.net/item/floatmenu/164109?ref=1stwebdesigner" target="_blank">FloatMenu</a></h2> <div style="text-align: justify;"> A little similar to the above navigation menu, only more smarter and more pleasing to the eyes. It can float diagonally (both up and down), vertically (left and right), and horizontally (up and down). It is hard to discuss how cool this navigation menu is, you just have to see the live preview. Link below the image. Oh, it works for text links too with cool effects.</div> <div style="text-align: center;"> <a class="aligncenter" href="http://codecanyon.net/item/floatmenu/164109?ref=1stwebdesigner"><img alt="" class="size-full wp-image-42205" height="290" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/floatmenu.jpg" title="floatmenu" width="570" /></a></div> <div style="text-align: center;"> <a href="http://codecanyon.net/item/floatmenu/full_screen_preview/164109?ref=1stwebdesigner" target="_blank">Live Demo</a></div> <h2 style="text-align: justify;"> 6.<a href="http://hv-designs.co.uk/2009/02/17/sliding-jquery-menu/" target="_blank">Sliding Jquery Menu</a></h2> <div style="text-align: justify;"> This tutorial explains and let you download sliding jquery menu and you can see the effect in action over on the PSDtuts webpage in the top right hand corner.</div> <div style="text-align: center;"> <a class="aligncenter" href="http://hv-designs.co.uk/2009/02/17/sliding-jquery-menu/" target="_blank"><img alt="jquery-sliding-menu-tutplus" height="131" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-sliding-menu-tutplus.jpg" width="570" /></a></div> <div style="text-align: center;"> This is how looks finished demo version:</div> <div style="text-align: center;"> <a class="aligncenter" href="http://hv-designs.co.uk/2009/02/17/sliding-jquery-menu/" target="_blank"><img alt="vertical-sliding-menu" height="167" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/vertical-sliding-menu.jpg" width="570" /></a></div> <div style="text-align: center;"> <a href="http://www.hv-designs.co.uk/tutorials/sliding_menu/sliding_menu.html" target="_blank">Preview</a> || <a href="http://www.hv-designs.co.uk/tutorials/sliding_menu/sample.zip" target="_blank">Download</a></div> <h2 style="text-align: justify;"> 7.<a href="http://www.alistapart.com/articles/sprites2" target="_blank">CSS Sprites 2 – It’s JavaScript Time</a></h2> <h2 style="text-align: center;"> <a class="aligncenter" href="http://www.alistapart.com/articles/sprites2" target="_blank"><img alt="css-sprites-2-jquery" height="110" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/css-sprites-2-jquery.jpg" width="570" /></a></h2> <div style="text-align: center;"> <a href="http://www.alistapart.com/d/sprites2/examples/example1-css.html" target="_blank">Preview</a></div> <h2 style="text-align: justify;"> 8. <a href="http://www.ndesign-studio.com/blog/design/css-dock-menu/" target="_blank">CSS Mac Dock Menu</a></h2> <div style="text-align: justify;"> If you are a big Mac fan, you will love this CSS dock menu that I designed. It is using Jquery Javascript library and Fisheye component from Interface and some of my icons. It comes with two dock styles – top and bottom. This CSS dock menu is perfect to add on to my iTheme.</div> <div style="text-align: center;"> <a class="aligncenter" href="http://www.ndesign-studio.com/blog/design/css-dock-menu/" target="_blank"><img alt="css-dock-menu-jquery" height="120" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/css-dock-menu-jquery.jpg" width="549" /></a></div> <div style="text-align: center;"> <a href="http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html" target="_blank">Preview</a> || <a href="http://www.ndesign-studio.com/file/css-dock-menu.zip" target="_blank">Download</a></div> <h2 style="text-align: justify;"> 9.<a href="http://www.jeremymartin.name/projects.php?project=kwicks" target="_blank">Kwicks for jQuery</a></h2> <div style="text-align: justify;"> Kwicks for jQuery started off as a port of the insatiably attractive Mootools effect (of the same name), but has evolved into a highly customizable and versatile widget.</div> <h2 style="text-align: center;"> <a class="aligncenter" href="http://www.jeremymartin.name/projects.php?project=kwicks" target="_blank"><img alt="kwicks-jquery-menu-navigation" height="104" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/kwicks-jquery-menu-navigation.jpg" width="570" /></a></h2> <div style="text-align: center;"> <a href="http://www.jeremymartin.name/examples/kwicks.php?example=1" target="_blank">7 Examples</a> || <a href="http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/Kwicks-1.5.1.zip" target="_blank">Download</a></div> <h2 style="text-align: justify;"> 10.<a href="http://www.abeautifulsite.net/blog/2008/03/jquery-file-tree" target="_blank">Jquery File Tree</a></h2> <div style="text-align: justify;"> jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code. Currently, server-side connector scripts are available for PHP, ASP, ASP.NET, JSP, and Lasso. If you’re a developer, you can easily make your own connector to work with your language of choice.</div> <h2 style="text-align: center;"> <a class="aligncenter" href="http://www.abeautifulsite.net/blog/2008/03/jquery-file-tree" target="_blank"><img alt="jquery-file-tree-navigation" height="180" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-file-tree-navigation.jpg" width="570" /></a></h2> <div style="text-align: center;"> <a href="http://labs.abeautifulsite.net/archived/jquery-fileTree/demo/" target="_blank">Preview</a> || <a href="http://labs.abeautifulsite.net/archived/jquery-fileTree/jquery.fileTree-1.01.zip" target="_blank">Download</a></div> <div style="text-align: justify;"> </div> <h2 style="text-align: justify;"> <a href="http://codecanyon.net/item/drop-menu/81289?ref=1stwebdesigner">Drop Menu</a></h2> <div style="text-align: justify;"> With this script you can make nice and interactive drop down menus. The advantage of this script is that it not only gives you the ability to make list drop down menu. You can also use a div as drop down element. This way you can create big drop down menus like under the buttons products and tutorials in the live preview. Or you can create a login panel in your drop down like I did in the live preview.</div> <div style="text-align: center;"> <a class="aligncenter" href="http://codecanyon.net/item/drop-menu/81289?ref=1stwebdesigner"><img alt="" class="" height="296" src="http://0.s3.envato.com/files/249782.jpg" title="Drop Menu" width="600" /></a></div> <div style="text-align: center;"> <a href="http://codecanyon.net/item/drop-menu/full_screen_preview/81289?ref=1stwebdesigner">View Demo</a></div> <h2 style="text-align: justify;"> 11.<a href="http://css-tricks.com/learning-jquery-fading-menu-replacing-content/" target="_blank">Learning jQuery: Fading Menu – Replacing Content</a></h2> <div style="text-align: justify;"> Nice tutorial from CSS-tricks explaining how to use CSS with jQuery, this time he teaches how to use jquery fading options on menu.</div> <div style="text-align: center;"> <a class="aligncenter" href="http://css-tricks.com/learning-jquery-fading-menu-replacing-content/" target="_blank"><img alt="menu-fader-jquery-navigation" height="145" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/menu-fader-jquery-navigation.jpg" width="570" /></a></div> <div style="text-align: center;"> <a href="http://css-tricks.com/examples/MenuFader/" target="_blank">Preview</a> || <a href="http://css-tricks.com/examples/MenuFader.zip" target="_blank">Download</a></div> <h2 style="text-align: justify;"> 12. <a href="http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/" target="_blank">How to Make a Smooth Animated Menu with jQuery</a></h2> <div style="text-align: justify;"> Ever seen some excellent jQuery navigation that left you wanting to make one of your own? This tutorial teaches how to do just that by building a menu and animate it with some smooth effects.</div> <div style="text-align: center;"> <a class="aligncenter" href="http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/" target="_blank"><img alt="smooth-animated-jquery-menu" height="160" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/smooth-animated-jquery-menu.jpg" width="570" /></a></div> <div style="text-align: center;"> <a href="http://buildinternet.com/live/smoothmenu/animated-menu.html" target="_blank">Preview</a> || <a href="http://buildinternet.com/live/smoothmenu/animated-menu.zip" target="_blank">Download</a></div> <h2 style="text-align: justify;"> 13.<a href="http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx" target="_blank">Create Vimeo-like top navigation </a></h2> <div style="text-align: justify;"> Learn how to create navigation just like on Vimeo site, here is only xhtml,css used, but still I wanted to include this.</div> <div style="text-align: center;"> <a class="aligncenter" href="http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx" target="_blank"><img alt="create-vimeo-like-top-navigation" height="136" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/create-vimeo-like-top-navigation.jpg" width="570" /></a></div> <div style="text-align: center;"> <a href="http://www.jankoatwarpspeed.com/examples/vimeo_navigation/" target="_blank">Preview</a> + <a href="http://vimeo.com/" target="_blank">Vimeo site</a> || <a href="http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx" target="_blank">Download</a></div> <h2 style="text-align: justify;"> 14. <a href="http://pupunzi.wordpress.com/2009/01/18/mbmenu/" target="_blank">jQuery (mb)Menu 2.3</a></h2> <div style="text-align: justify;"> This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way!</div> <div style="text-align: justify;"> You can add as many submenus as you want; if your submenu or menu is not declared in the page, the component will get it via ajax calling the template page with the id of the menu you need (the value of “menu” attribute) the ajax page should return a well formatted code as the example below for the menu voices code.</div> <div style="text-align: center;"> <a class="aligncenter" href="http://pupunzi.wordpress.com/2009/01/18/mbmenu/" target="_blank"><img alt="jquery-mb-menu-navigation" height="190" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-mb-menu-navigation.jpg" width="570" /></a></div> <div style="text-align: center;"> <a href="http://pupunzi.com/mb.components/mb._menu/demo/demo.html" target="_blank">Preview</a> || <a href="http://github.com/downloads/pupunzi/jquery.mb.menu/jquery.mb.menu.2.8.5.zip" target="_blank">Download</a></div> <h2 style="text-align: justify;"> 14.1.<a href="http://codecanyon.net/item/context-menu-class/108671?ref=1stwebdesigner" target="_blank">Context Menu Class</a></h2> <div style="text-align: justify;"> Advantage: anyone can use this class even without enough programming experience. Or if you are a master coder but is short of time, this one is for you. very easy to customize. You can even make a website the same as how you see a contextual menu on your desktop!</div> <div style="text-align: center;"> <a class="aligncenter" href="http://codecanyon.net/item/context-menu-class/108671?ref=1stwebdesigner"><img alt="" class="size-full wp-image-42207" height="290" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/context.jpg" title="context" width="570" /></a></div> <div style="text-align: center;"> <a href="http://codecanyon.net/item/context-menu-class/full_screen_preview/108671?ref=1stwebdesigner" target="_blank">Live Preview</a></div> <h2 style="text-align: justify;"> 15. <a href="http://www.ndoherty.com/blog/category/coda-slider" target="_blank">Coda Slider</a></h2> <div style="text-align: center;"> <a class="aligncenter" href="http://www.ndoherty.com/blog/category/coda-slider" target="_blank"><img alt="coda-slider-jquery" height="245" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/coda-slider-jquery.jpg" width="570" /></a></div> <div style="text-align: center;"> <a href="http://www.ndoherty.com/demos/coda-slider/1.1.1/" target="_blank">Preview</a> || <a href="http://www.ndoherty.biz/demos/coda-slider/1.1.1/coda-slider.1.1.1.zip" target="_blank">Download</a></div> <h2 style="text-align: justify;"> 16. <a href="http://www.sunsean.com/idTabs/#t2" target="_blank">jQuery idTabs</a></h2> <div style="text-align: justify;"> idTabs is a plugin for jQuery. It makes adding tabs into a website super simple. But it can also open the door to endless possibilities.</div> <div style="text-align: center;"> <a class="aligncenter" href="http://www.sunsean.com/idTabs/#t2" target="_blank"><img alt="idtabs-jquery-navigation" height="102" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/idtabs-jquery-navigation.jpg" width="570" /></a></div> <div style="text-align: center;"> <a href="http://www.sunsean.com/idTabs/#t1" target="_blank">Preview</a> || <a href="http://www.sunsean.com/idTabs/jquery.idTabs.min.js" target="_blank">Download</a></div> <h2 style="text-align: justify;">  </h2> <h2 style="text-align: justify;"> 17. <a href="http://nettuts.com/tutorials/html-css-techniques/how-to-create-a-slick-tabbed-content-area/" target="_blank">Create a Slick Tabbed Content Area using CSS & jQuery</a></h2> <div style="text-align: justify;"> One of the biggest challenge to web designers is finding ways to place a lot of information on a page without losing usability. Tabbed content is a great way to handle this issue and has been widely used on blogs recently. This is great tutorial explain ing to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally achieve the same thing using the jQuery library.a </div> <div style="text-align: justify;"> <a href="http://nettuts.com/tutorials/html-css-techniques/how-to-create-a-slick-tabbed-content-area/"><img src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/slick-tabbed-content-area-css-jquery.jpg" /></a> <a href="http://nettuts.s3.amazonaws.com/001_Tabbed/site/jQuery.html">Preview</a></div> <h2 style="text-align: justify;">  </h2> <h2 style="text-align: justify;"> 18. <a href="http://www.gmarwaha.com/blog/category/client-side/jquery/" target="_blank">LavaLamp for jQuery lovers!</a></h2> <div style="text-align: justify;"> Extremely light weighted Lavalamp menu packaged as a plugin for the amazing jQuery javascript library.</div> <div style="text-align: center;"> <a class="aligncenter" href="http://www.gmarwaha.com/blog/category/client-side/jquery/" target="_blank"><img alt="lava-lamp-jquery-navigation" height="79" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/lava-lamp-jquery-navigation.jpg" width="570" /></a></div> <div style="text-align: center;"> <a href="http://www.gmarwaha.com/blog/category/client-side/jquery/" target="_blank">Preview</a> || <a href="http://www.gmarwaha.com/jquery/lavalamp/zip/lavalamp_0.1.0.zip" target="_blank">Download</a></div> <div style="text-align: center;"> </div> <h2 style="text-align: justify;"> <a href="http://codecanyon.net/item/mega-menu-complete-set/152825?ref=1stwebdesigner">Mega Menu Complete Set</a></h2> <div style="text-align: justify;"> This Mega Drop Down Menu Complete Set is perfect for creating unique menus by using one of the 10+ jQuery effects and one of the 13 color variants.Based on a custom grid, this menu allows you to organize your content into columns (from 1 up to 12) with a lot of typography examples such as headings, lists, images styling, tables, form elements, etc.</div> <div style="text-align: center;"> <a class="aligncenter" href="http://codecanyon.net/item/mega-menu-complete-set/152825?ref=1stwebdesigner"><img alt="" class="" height="300" src="http://1.s3.envato.com/files/3766260/large_preview.jpg" title="Mega Menu Javascript" width="590" /></a></div> <div style="text-align: center;"> <a href="http://codecanyon.net/item/mega-menu-complete-set/full_screen_preview/152825?ref=1stwebdesigner">View Demo</a></div> <h2 style="text-align: justify;">  </h2> <h2 style="text-align: justify;"> 19. <a href="http://clarklab.com/posts/animated-drop-down-menu-with-jquery/" target="_blank">Animated Drop Down Menu with jQuery</a></h2> <div style="text-align: justify;"> Drop down menus are a really convient way to fit a large menu into a really small initial space. For a long time people have just used a form element for standard drop downs, but with minimal effort you can create a much slicker effect using jQuery and CSS.</div> <div style="text-align: center;"> <a class="aligncenter" href="http://clarklab.com/posts/animated-drop-down-menu-with-jquery/" target="_blank"><img alt="animated-dropdown-menu-jquery" height="199" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/animated-dropdown-menu-jquery.jpg" width="570" /></a></div> <div style="text-align: center;"> <a href="http://clarklab.com/lessons/dropdown/example.html" target="_blank">Preview</a> || <a href="http://clarklab.com/lessons/dropdown/animateddropdown.zip" target="_blank">Download</a></div> <h2 style="text-align: justify;">  </h2> <h2 style="text-align: justify;"> 20. <a href="http://snook.ca/technical/jquery-bg/" target="_blank">Using jQuery for Background Image Animations</a></h2> <div style="text-align: justify;"> Five different ways, how to create background image animations using jquery – very live effect.</div> <div style="text-align: center;"> <a class="aligncenter" href="http://snook.ca/technical/jquery-bg/" target="_blank"><img alt="jquery-background-image-animations" height="75" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-background-image-animations.jpg" width="570" /></a></div> <div style="text-align: center;"> <a href="http://snook.ca/technical/jquery-bg/" target="_blank">Preview</a></div> <h2 style="text-align: justify;"> 21. <a href="http://nettuts.com/html-css-techniques/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/" target="_blank">How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery</a></h2> <div style="text-align: justify;"> As you know there are a host of competing javascript libraries around these days. Though I prefer jQuery, I’ve always liked the way the menu on MooTools worked. So in this tutorial we’ll recreate that same effect … but this will be done in jQuery!</div> <div style="text-align: center;"> <a class="aligncenter" href="http://nettuts.com/html-css-techniques/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/" target="_blank"><img alt="mootools-homepage-navigation-effect" height="239" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/mootools-homepage-navigation-effect.jpg" width="570" /></a></div> <div style="text-align: center;"> <a href="http://nettuts.s3.amazonaws.com/004_Moo/tutorial/demo/demo.html" target="_blank">Preview</a> || <a href="http://nettuts.s3.amazonaws.com/004_Moo/tutorial/demo/Download.zip" target="_blank">Download</a></div> <h2 style="text-align: justify;">  </h2> <h2 style="text-align: justify;"> 22. <a href="http://greengeckodesign.com/projects/menumatic.aspx" target="_blank">Menumatic Mootools</a></h2> <div style="text-align: justify;"> MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system. For users without javascript, it falls back on a CSS menu system based on Matthew Carroll’s keyboard accessible flavor of Suckerfish Dropdowns by Patrick Griffiths and Dan Webb.</div> <div style="text-align: center;"> <a class="aligncenter" href="http://greengeckodesign.com/projects/menumatic.aspx" target="_blank"><img alt="menumatic-vertical-menu-jquery" height="324" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/menumatic-vertical-menu-jquery.jpg" width="570" /></a></div> <div style="text-align: center;"> <a href="http://greengeckodesign.com/projects/menumatic/examples/vertical/" target="_blank">Preview Vertical</a> || <a href="http://greengeckodesign.com/projects/menumatic/examples/horizontal/" target="_blank">Preview horizontal </a> || <a href="http://menumatc.googlecode.com/files/MenuMatic_0.68.3.zip" target="_blank">Download</a></div> <h2 style="text-align: justify;">  </h2> <h2 style="text-align: justify;"> 22.1. <a href="http://codecanyon.net/item/super-menu-pack-10-menus/98066?ref=1stwebdesigner">Super menu pack (10 menus)</a></h2> <div style="text-align: justify;"> Super menu pack is a collection of 10 cool menus, 5 in pure css and 5 using jQuery framework for customize or layout with your websites or applications and projects.It’s perfect for anyone who wants to give a special touch to their designs or find a starting point. Collection is as varied as possible in style and appearance to give you choice. Thinking in design working with code.</div> <div style="text-align: center;"> <a class="aligncenter" href="http://codecanyon.net/item/super-menu-pack-10-menus/98066?ref=1stwebdesigner"><img alt="" class="" height="300" src="http://1.s3.envato.com/files/313239.jpg" title="Super Menu Pack" width="600" /></a></div> <div style="text-align: center;"> <a href="http://codecanyon.net/item/super-menu-pack-10-menus/full_screen_preview/98066?ref=1stwebdesigner">View Demo</a></div> <h2 style="text-align: justify;">  </h2> <h2 style="text-align: justify;"> 23. <a href="http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/" target="_blank">jQuery convertion: Garagedoor effect using Javascript</a></h2> <div style="text-align: justify;"> For all the jQuery lovers: Here is the Garage Door effect. Now in jQuery!</div> <div style="text-align: center;"> <a class="aligncenter" href="http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/" target="_blank"><img alt="garage-door-jquery-menu" height="181" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/garage-door-jquery-menu.jpg" width="570" /></a></div> <div style="text-align: center;"> <a href="http://www.gayadesign.com/scripts/jquerygaragedoor/" target="_blank">Preview</a> || <a href="http://www.gayadesign.com/scripts/jquerygaragedoor/jquerygarage.zip" target="_blank">Download</a></div> <h2 style="text-align: justify;">  </h2> <h2 style="text-align: justify;"> 24. <a href="http://www.mattweltman.com/sliding_tabs.html" target="_blank">Perspective tabs</a></h2> <div style="text-align: justify;"> Perspective tabs is a simple mootools 1.2 plug-in that allows for a lagre number of tabs to fit into a small space.</div> <div style="text-align: center;"> <a class="aligncenter" href="http://www.mattweltman.com/sliding_tabs.html" target="_blank"><img alt="perspective-tabs-mootools-menu" height="255" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/perspective-tabs-mootools-menu.jpg" width="570" /></a></div> <h2 style="text-align: justify;">  </h2> <h2 style="text-align: justify;"> 25. <a href="http://marcgrabanski.com/pages/code/fisheye-menu" target="_blank">Fisheye Menu</a></h2> <div style="text-align: justify;"> Fisheye Menu is an expanding menu based on the MacOSX doc.</div> <div style="text-align: center;"> <a class="aligncenter" href="http://marcgrabanski.com/pages/code/fisheye-menu" target="_blank"><img alt="fisheye-menu-jquery" height="203" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/fisheye-menu-jquery.jpg" width="570" /></a></div> <div style="text-align: center;"> <a href="https://github.com/1Marc/javascript-fisheye-menu/zipball/master" target="_blank">Download</a></div> <h2 style="text-align: justify;">  </h2> <h2 style="text-align: justify;"> 26. <a href="http://www.leigeber.com/2008/05/sliding-javascript-menu-highlight-1kb/" target="_blank">Sliding JavaScript Menu Highlight 1kb</a></h2> <div style="text-align: justify;"> This sliding hover effect script is an easy method to add some flavor to your navigation. Using the CSS you can easily customize the navigation to fit your “look and feel”. The markup for the script is very simple as below.</div> <div style="text-align: center;"> <a class="aligncenter" href="http://www.leigeber.com/2008/05/sliding-javascript-menu-highlight-1kb/" target="_blank"><img alt="sliding-javascript-menu-highlight" height="106" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/sliding-javascript-menu-highlight.jpg" width="570" /></a></div> <div style="text-align: center;"> <a href="http://www.leigeber.com/wp-content/uploads/2008/05/menueffect.zip" target="_blank">Download</a></div> <h2 style="text-align: justify;">  </h2> <h2 style="text-align: justify;"> 27. <a href="http://www.chromasynthetic.com/blog/mootools-demo-redux/57/" target="_blank">Mootools Demo Redux</a></h2> <div style="text-align: justify;"> Simple expandable Javascript navigation menu.</div> <div style="text-align: center;"> <a class="aligncenter" href="http://www.chromasynthetic.com/blog/mootools-demo-redux/57/" target="_blank"><img alt="mootools-demo-redux" height="117" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/mootools-demo-redux.jpg" width="570" /></a></div> <div style="text-align: center;"> <a href="http://www.chromasynthetic.com/blog/uploads/mootools_nav_example.html" target="_blank">Preview</a></div> <h2 style="text-align: justify;">  </h2> <h2 style="text-align: justify;"> 28. <a href="http://berndmatzner.de/jquery/hoveraccordion/" target="_blank">HoverAccordion</a></h2> <div style="text-align: justify;"> A jQuery Plugin for no-click two-level menus (or whatever else you want to do with it).</div> <div style="text-align: center;"> <a class="aligncenter" href="http://berndmatzner.de/jquery/hoveraccordion/" target="_blank"><img alt="hover-accordion-jquery" height="325" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/hover-accordion-jquery.jpg" width="570" /></a></div> <h2 style="text-align: justify;">  </h2> <h2 style="text-align: justify;"> 29. <a href="http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/" target="_blank">Simple Javascript Accordions</a></h2> <div style="text-align: justify;"> Javascript accordians have been used a lot in todays web design world. There are a lot of scripts we have seen and sure you too would have seen them. This script is one of the smallest accordion script which is extremely simple and easy to integrate. Does’nt require any framework and fully cross-browser compatible.</div> <div style="text-align: center;"> <a class="aligncenter" href="http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/" target="_blank"><img alt="simple-javascript-accordion-jquery" height="193" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/simple-javascript-accordion-jquery.jpg" width="468" /></a></div> <div style="text-align: center;"> <a href="http://www.dezinerfolio.com/wp-content/uploads/accordemo/01.html" target="_blank">Preview</a> || <a href="http://www.dezinerfolio.com/system/files/simple_accordions_with_src.zip" target="_blank">Download</a></div> <h2 style="text-align: justify;"> 30. <a href="http://tools.uvumi.com/dropdown.html" target="_blank">UvumiTools Dropdown Menu </a></h2> <div style="text-align: justify;"> The UvumiTools Dropdown Menu is the menu featured on this website. It is a very simple multi-level menu built from an HTML unordered list, using Mootools Javascript Framework, it can be easily updated by simply editing a <ul> HTML element.</div> <div style="text-align: center;"> <a class="aligncenter" href="http://tools.uvumi.com/dropdown.html" target="_blank"><img alt="uvumi-tools-dropdown-menu" height="161" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/uvumi-tools-dropdown-menu.jpg" width="570" /></a></div> <h2 style="text-align: center;">  </h2> <h2 style="text-align: justify;"> 31. <a href="http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery" target="_blank">Create a multilevel Dropdown menu with CSS and improve it via jQuery</a></h2> <div style="text-align: center;"> <a class="aligncenter" href="http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery" target="_blank"><img alt="multilevel-dropdown-menu-jquery" height="117" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/multilevel-dropdown-menu-jquery.jpg" width="490" /></a></div> <div style="text-align: center;"> <a href="http://www.kriesi.at/wp-content/extra_data/suckerfish_tutorial/step4.html" target="_blank">Preview</a> || <a href="http://www.kriesi.at/wp-content/uploads/files/dropdown.zip" target="_blank">Download</a></div> <h2 style="text-align: justify;">  </h2> <h2 style="text-align: justify;"> 32. <a href="http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/" target="_blank">jQuery & CSS Example – Dropdown Menu</a></h2> <div style="text-align: justify;"> Dropdown menus and menu bars have been heavily used since the early days of graphical user interfaces. Their use has become ubiquitous, and even expected, in desktop applications, and the web has quickly followed suit. This article is intended to describe an extremely basic, yet extremely powerful, technique for adding dropdown menus in your application user interface or website design.</div> <div style="text-align: center;"> <a class="aligncenter" href="http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/" target="_blank"><img alt="jquery-css-example-dropdown-menu" height="183" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-css-example-dropdown-menu.jpg" width="510" /></a></div> <div style="text-align: center;"> <a href="http://designreviver.com/wp-content/uploads/2008/10/example.html" target="_blank">Preview</a></div> <h2 style="text-align: justify;">  </h2> <h2 style="text-align: justify;"> 33. <a href="http://nettuts.com/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/" target="_blank">Floating menu jQuery&CSS</a></h2> <div style="text-align: justify;"> For all of us who deal with long web pages and need to scroll to the top for the menu, here’s a nice alternative: floating menus that move as you scroll a page. This is done using HTML, CSS and jQuery, and it’s fully W3C-compliant.</div> <div style="text-align: center;"> <a class="aligncenter" href="http://nettuts.com/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/" target="_blank"><img alt="live-floating-menu-jquery" height="203" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/live-floating-menu-jquery.jpg" width="231" /></a></div> <div style="text-align: center;"> <a href="https://nettuts.s3.amazonaws.com/018_Floating_Menu/demo/dhtml_float_menu_final_nettut.html" target="_blank">Preview</a> || <a href="https://nettuts.s3.amazonaws.com/018_Floating_Menu/code-floating-menu.zip" target="_blank">Download</a></div> <h2 style="text-align: justify;">  </h2> <h2 style="text-align: justify;"> 34. <a href="http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started" target="_blank">Superfish – jQuery menu plugin</a></h2> <div style="text-align: justify;"> Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds the following much-sought-after enhancements:</div> <div style="text-align: center;"> <a class="aligncenter" href="http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started" target="_blank"><img alt="superfish-examples-jquery" height="186" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/superfish-examples-jquery.jpg" width="415" /></a></div> <div style="text-align: center;"> <a href="http://users.tpg.com.au/j_birch/plugins/superfish/#examples" target="_blank">Preview</a> || <a href="http://users.tpg.com.au/j_birch/plugins/superfish/#download" target="_blank">Download</a></div> <h2 style="text-align: justify;">  </h2> <h2 style="text-align: justify;"> 35. <a href="http://plugins.jquery.com/project/Pager" target="_blank">JQuery Pager</a></h2> <div style="text-align: justify;"> A simple JQuery plugin to provide paging UI functionality for data driven web applications</div> <div style="text-align: center;"> <a class="aligncenter" href="http://plugins.jquery.com/project/Pager" target="_blank"><img alt="jquery-pager-menu" height="139" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-pager-menu.jpg" width="417" /></a></div> <div style="text-align: center;"> <a href="http://jonpauldavies.github.com/JQuery/Pager/PagerDemo.html" target="_blank">Preview</a> || <a href="http://www.komodomedia.comwp-content/uploads/2008/10/jquery_feed_menu.zip" target="_blank">Download</a></div> <h2 style="text-align: justify;">  </h2> <h2 style="text-align: justify;"> 36. <a href="http://www.komodomedia.com/blog/2008/10/jquery-feed-menus/" target="_blank">jQuery feed menus</a></h2> <div style="text-align: justify;"> When feeds became popular, it worked to have one icon on your site to point your readers to your RSS or Atom feeds. As feeds are more prevalent in blogs and websites abroad, the presence of multiple feeds abound – this jquery feed menu is solution here!</div> <div style="text-align: center;"> <a class="aligncenter" href="http://www.komodomedia.com/blog/2008/10/jquery-feed-menus/" target="_blank"><img alt="jquery-feed-menus" height="204" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-feed-menus.jpg" width="491" /></a></div> <div style="text-align: center;"> <a href="http://www.komodomedia.com/mint/pepper/orderedlist/downloads/download.php?file=http%3A//www.komodomedia.com/samples/feed_menu/jquery_feed_menu.zip" target="_blank">Download</a></div> <div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"> <img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=bb1f9ab9-9239-4439-9ada-fce26eafe693" style="border: none; float: right;" /></div> </div>

36 Eye-Catching Jquery Navigation Menus

Navigation menus have really important role in any website. For big sites full with a lot of pages and articles, drop down menus and tabs ar...

iFrame “Auto Height” dengan Jquery

<div dir="ltr" style="text-align: left;" trbidi="on"> <div style="text-align: justify;"> Dalam tag tidak berlaku untuk elemen style=”height:100%” melainkan yang bisa berlaku hanya style=”width:100%”. Untuk membuatnya menjadi auto height 100% bisa menggunakan jQuery Jadi berapapun ukuran iframe akan tetap menyesuaikan secara otomatis, sehingga seolah-seolah tidak memakai iframe. </div> Caranya : - masukkan jQuery library, terserah pakai yang versi keberapa <script type="text/javascript" src="jquery-1.6.2.js"></script> - masukkan jQuery buat auto height iframe <script type="text/javascript" src="https://raw.github.com/house9/jquery-iframe-auto-height/master/release/jquery.iframe-auto-height.js"></script> - masukkan script iframe, untuk jQuery ini akan otomatis mendeteksi semua iframe menjadi auto height <iframe src="iframe.html" width="100%" scrolling="no" frameborder="0"></iframe> - masukkan fungsi javascript iframe autoheight <script type="text/javascript"> jQuery('iframe').iframeAutoHeight(); </script> - Simpan dan lihat hasilnya <a href="https://www.dropbox.com/s/f6hkh5p7gvvnqrc/jQuery%20iFrame%20autoheight.rar">Download Script Lengkap</a> Source Script : <a href="https://github.com/house9/jquery-iframe-auto-height">https://github.com/house9/jquery-iframe-auto-height</a> <div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"> <img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=1e59e869-d6dc-4918-9ea6-c0f9350940c2" style="border: none; float: right;" /></div> </div>

iFrame “Auto Height” dengan Jquery

Dalam tag tidak berlaku untuk elemen style=”height:100%” melainkan yang bisa berlaku hanya style=”width:100%”. Untuk membuatnya menjadi aut...

add go to top and go to bottom buttons Using jQuery in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="post-title entry-title" style="text-align: justify;"> <a class="zem_slink" href="http://en.wikipedia.org/wiki/Comment_%28computer_programming%29" rel="wikipedia" title="Comment (computer programming)">/*</a> The Up and Down <a class="zem_slink" href="http://en.wikipedia.org/wiki/Button" rel="wikipedia" title="Button">buttons</a> can be used to navigate to the top and bottom of the page content, especially when on the main page there are many articles or when an article has too many comments. These buttons have a fadeIn and fadeOut effect, this means that they will fade slightly when we are scrolling to the top or bottom of the page and additionally, have the function of going up/down the blog.</div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw6yvEii6XwMrLkghctQpiFPsjDSEU7RHBbIyJao-BsPYqT4HN1UQ4vn2jtH9gX7PX8pG5IJoR04auOwEgUi0KZht5x98r1qLYeN_Po_I-PSOc5AEJCYuKr8pwf9nBKL0E7k-F9CrY2MpJ/s1600/how-to-add-go-to-top-go-to-bottom-buttons-in-blogger-blogspot.png" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger widgets, blogger navigation" border="0" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw6yvEii6XwMrLkghctQpiFPsjDSEU7RHBbIyJao-BsPYqT4HN1UQ4vn2jtH9gX7PX8pG5IJoR04auOwEgUi0KZht5x98r1qLYeN_Po_I-PSOc5AEJCYuKr8pwf9nBKL0E7k-F9CrY2MpJ/s200/how-to-add-go-to-top-go-to-bottom-buttons-in-blogger-blogspot.png" title="how to add back to top go to bottom navigation in blogger" width="200" /></a></div> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> </div> Demo You can see a live demo on my blog, the buttons are located on the right side. How to put Go Up and Go Down buttons using the <a class="zem_slink" href="http://jquery.com/" rel="homepage" title="JQuery">jQuery</a> slide effect <a class="zem_slink" href="http://en.wikipedia.org/wiki/USMLE_Step_1" rel="wikipedia" title="USMLE Step 1">Step 1</a>. Go to Template, click on the Edit <a class="zem_slink" href="http://en.wikipedia.org/wiki/HTML" rel="wikipedia" title="HTML">HTML</a> button <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUNh1FiiNZ31MGbDiJU-lZCrTbOZ7vwCD6d5_T2EToIWiIAi_3bWKsNxRQiD5e8zVS-u68aCEQxejs3FrFf1O-waUGNfXeDoeMMwkmKcUe2VhW8fjiLqDkaG3ptxkzN2oYpem0b8idN16L/s1600/blogger-template-edit-html.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUNh1FiiNZ31MGbDiJU-lZCrTbOZ7vwCD6d5_T2EToIWiIAi_3bWKsNxRQiD5e8zVS-u68aCEQxejs3FrFf1O-waUGNfXeDoeMMwkmKcUe2VhW8fjiLqDkaG3ptxkzN2oYpem0b8idN16L/s400/blogger-template-edit-html.png" width="400" /></a></div> Step 2. Select the "Expand Widget Templates" box <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2G-HEiE8LGkM42ZW-4qWXOOshkO6o4tf-TobyiYv8Cw3JsRyZJ8UhBwoAvEeCOSAmKTDWTPW6A2mn4Dp4uslq7R1tW9Kxd9AeLTwOnO1Oh9h4hz_kvkGbTwb5Jul3qd30AK-fb_SP8Sg2/s1600/blogger-expand-widget-templates.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2G-HEiE8LGkM42ZW-4qWXOOshkO6o4tf-TobyiYv8Cw3JsRyZJ8UhBwoAvEeCOSAmKTDWTPW6A2mn4Dp4uslq7R1tW9Kxd9AeLTwOnO1Oh9h4hz_kvkGbTwb5Jul3qd30AK-fb_SP8Sg2/s320/blogger-expand-widget-templates.png" width="320" /></a></div> Step 3. Search (using <a class="zem_slink" href="http://en.wikipedia.org/wiki/Table_of_keyboard_shortcuts" rel="wikipedia" title="Table of keyboard shortcuts">CTRL + F</a>) for the following piece of code: <blockquote class="tr_bq"> ]]></b:skin></blockquote> Step 4. Just above this code, paste this one: <blockquote class="tr_bq"> /* Up and Down Buttons with jQuery ----------------------------------------------- */ .button_up{ padding:7px; /* Distance between the border and the icon */ background-color:white; border:1px solid #<a class="zem_slink" href="http://en.wikipedia.org/wiki/Civilian_Conservation_Corps" rel="wikipedia" title="Civilian Conservation Corps">CCC</a>; /* Border Color */ position:fixed; background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUdelsPJ5E4HdlQd4gr-ZLwIikDFNJga8uel0exKaBYyIpof9RY4hiPLCHFE2ATK23CFK_H7NDVlE7lzgWjA5sbyKaTu-P025GBefZqVZrp2LoP-tvGx37ou6NHNjkJayi_69JxrE_drE/s16/arrow_up.png) no-repeat top left; background-position:50% 50%; width:20px; /* <a class="zem_slink" href="http://en.wikipedia.org/wiki/Web_button" rel="wikipedia" title="Web button">Button</a>'s width */ height:20px; /* Button's height */ bottom:280px; /* Distance from the bottom */ right:5px; /* Change right to left if you want the buttons on the left */ white-space:nowrap; cursor: pointer; border-radius: 3px 3px 3px 3px; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } .button_down{ padding:7px; /* Distance between the border and the icon */ background-color:white; border:1px solid #CCC; /* Border Color */ position:fixed; background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAZwTfp2whlkvJ8Potpv9stHiT6hE9crgoWGZYVpeZYo9VbdAmcZufhMsufDivyPZrc7lRTQvCg_5XODmo2gIXy5WOY30DrP9gjngdBlEan1qvaQcW3x5TkughVhQKhpHTpr1CPIIZ58s/s16/arrow_down.png) no-repeat top left; background-position:50% 50%; width:20px; /* Button's width */ height:20px; /* Button's height */ bottom:242px; /* Distance from the bottom */ right:5px; /* Change right to left if you want the buttons on the left */ white-space:nowrap; cursor: pointer; border-radius: 3px 3px 3px 3px; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); }</blockquote> Note:  - in green are some annotations that explains what styles you can modify on their left side.            - You can change the arrows by changing the <a class="zem_slink" href="http://en.wikipedia.org/wiki/Uniform_resource_locator" rel="wikipedia" title="Uniform resource locator">URLs</a> in blue.            - To change the buttons background color of buttons, change the white text with your color Step 5. Now search (CTRL + F) for this tag: <blockquote> </body></blockquote> Step 6. And just above it, paste the following code: <blockquote class="tr_bq"> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <div class='button_up' id='button_up' style='display:none;'/> <div class='button_down' id='button_down' style='display:none;'/> <script> //CDATA[ (function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})(); $(function() { var $elem = $('body'); $('#button_up').fadeIn('slow'); $('#button_down').fadeIn('slow'); $(window).bind('scrollstart', function(){ $('#button_up,#button_down').stop().animate({'opacity':'0.2'}); }); $(window).bind('scrollstop', function(){ $('#button_up,#button_down').stop().animate({'opacity':'1'}); }); $('#button_down').click( function (e) { $('html, body').animate({scrollTop: $elem.height()}, 800); } ); $('#button_up').click( function (e) { $('html, body').animate({scrollTop: '0px'}, 800); } );}); //]]> </script></blockquote> Note: In case you want to remove the "Go to top" button, remove the 1st bolded code and to remove the "Go to bottom" button, remove the 2nd one. Step 7. Finally, Save your Template. Enjoy! <div class="post-title entry-title" style="text-align: justify;"> </div> <div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"> <img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=0385d58c-c4b5-4fc4-ac42-9b4d1148e48a" style="border: none; float: right;" /></div> </div>

add go to top and go to bottom buttons Using jQuery in Blogger

/* The Up and Down buttons can be used to navigate to the top and bottom of the page content, especially when on the main page there are m...

Userscripts.org currently contains over 2K scam scripts

<div id="root"> <a href="http://s3.amazonaws.com/uso_ss/icon/163038/large.png?1365299642" id="icon" rel="lightbox" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;" title="Userscripts.org Scam Filter"><img alt="Large" src="http://s3.amazonaws.com/uso_ss/icon/163038/large.png?1365299642" width="92" /></a> <div id="section"> <div id="content"> <div id="heading"> <div id="install_script"> <h4 class="title"> Userscripts.org Scam Filter <a class="userjs" href="http://userscripts.org/scripts/source/163038.user.js">Install</a> </h4> <div class="title"> </div> <h4> Userscripts.org currently contains over <abbr title="A conservative estimate...">2,000</abbr> scam scripts.</h4> There is currently no way to report scam scripts and have them officially removed. Scam Filter attempts to do the next best thing by detecting them for you. Scam Filter checks script <a class="zem_slink" href="http://en.wikipedia.org/wiki/Author" rel="wikipedia nofollow" target="_blank" title="Author">authors</a> against a list of over 700 known scam, spam & copycat authors. For unknown authors, Scam Filter scans each script's code for known scam patterns. Likely <a class="zem_slink" href="http://en.wikipedia.org/wiki/Confidence_trick" rel="wikipedia nofollow" target="_blank" title="Confidence trick">scams</a> are then hidden. The filter works when you browse or search the <a href="http://userscripts.org/scripts">Userscripts.org script list</a>. A toggle link is provided to re-display hidden scripts. <a name='more'></a> Most of the "<a class="zem_slink" href="http://facebook.com/" rel="homepage nofollow" target="_blank" title="Facebook">Facebook</a> Auto Like" scripts are scams. So are "Auto Suggest" and "Get Followers" scripts. If you install them, they cause YOU to like pages the script author is trying to promote, instead of getting likes FOR you. To make matters worse, many Facebook scam scripts say they are for other websites, but use your Facebook account without your knowledge. Authors of highly suspicious and useless scripts are included. Scam Filter blocks authors who post blank scripts, suspicious scripts (eg. scripts that contain hidden code), and copies of other people's scripts (usually modified to include spam links). It also blocks accounts that haven't posted any scripts (yet) but are clearly operated by scammers and spammers. Scam authors periodically "update" their scripts in order to keep them near the top of the Userscripts.org list (some do this many times per day). Don't blindly trust reviews either: Scam authors post positive reviews for each other, and use phony accounts to post further positive reviews of their own scripts. <hr /> Note that Ultoo.com scripts that submit specific names or mobile numbers are blocked as highly suspicious, though they are not confirmed scams (testing would require an India-based mobile phone, which I don't have).</div> <div id="install_script"> </div> <div id="install_script"> </div> </div> <div id="heading"> </div> <textarea style="height: 59px; width: 450px;"> <pre class="sh_javascript sh_sourceCode" id="source">// <a class="zem_slink" href="<a class=" zem_slink"="" title="Hypertext Transfer Protocol" rel="wikipedia nofollow" target="_blank">http</a>://en.wikipedia.org/wiki/Relational_operator" title="Relational operator" rel="wikipedia nofollow" target="_blank">==<a class="zem_slink" href="http://www.greasespot.net/" title="Greasemonkey" rel="homepage nofollow" target="_blank">UserScript</a>== // @name Userscripts.org Scam Filter // @description Filters out scam scripts at Userscripts.org. // @namespace http://userscripts.org/scripts/review/163038 // @icon http://s3.amazonaws.com/uso_ss/icon/163038/large.png?1365299642 // @updateURL https://userscripts.org/scripts/source/163038.meta.js // @downloadURL https://userscripts.org/scripts/source/163038.user.js // @homepageURL https://userscripts.org/scripts/show/163038 // @require https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js // @include http*://userscripts.org/ // @include http*://userscripts.org/scripts* // @include http*://userscripts.org/tags/* // @grant GM_getValue // @grant GM_setValue // @grant GM_listValues // @version 5.093 // ==/UserScript== $(document).ready(function(){ // Load <a class="zem_slink" href="http://jquery.com" title="JQuery" rel="homepage nofollow" target="_blank">jQuery</a> cookie functions and viewport visibility selectors loadJQcookies(); loadJQViewport(); // If our settings cookies don't exist yet, create them if (GM_getValue('cont',-5) == -5) GM_setValue('cont','0'); if (GM_getValue('update',-5) == -5) GM_setValue('update','1'); // Append Settings checkboxes and set their tooltip text var updateTip = 'Checks for Scam Filter updates a maximum of 3 times per day.'; var contTip = 'Automatically displays more results when you scroll to the end of a list.'; var checkboxParams = 'type="checkbox" style="font-weight:bold;color:white;vertical-align:middle;"'; var labelParams = 'style="font-weight:bold;color:white;;vertical-align:middle;"'; $('div#top div.container').prepend('<div style="vertical-align:middle;font-size:11px;color:white;float:left;padding-top:4px;"> ' + '<label class="filterSettingsToggle" style="cursor:pointer;color:white;font-weight:bold;">Scam Filter Settings</label>' + '<div class="filterSettings" style="padding-bottom:3px;font-weight:bold;" hidden=""> ' + ': ' + '<input title="' + contTip + '" class="setCont" '+ checkboxParams +' />' + '<label title="' +</label> contTip + '" class="setCont" '+ labelParams +'>Continuous Scroll ' + '<input title="' + updateTip + '" class="setUpdate" '+ checkboxParams +' />' + '<label title="' +</label> updateTip + '" class="setUpdate" '+ labelParams +'>Update Check ' + //'<label '="" +="" labelparams="">• v' + GM_info.script.version + ' • Authors Blocked</label>' + '<label '<="" span=""> + labelParams + '>• Authors Blocked</label>' + '</div> ' + '</div> '); // Set initial state of checkboxes if (GM_getValue('cont') == '1') $('input.setCont').prop('checked', true); if (GM_getValue('update') == '1') $('input.setUpdate').prop('checked', true); // Save settings var setCont; var setUpdate; $('input.setCont').change(function(){setCont = $(this).prop('checked') ? '1' : '0';GM_setValue('cont',setCont);location.reload(); }); $('input.setUpdate').change(function(){setUpdate = $(this).prop('checked') ? '1' : '0';GM_setValue('update',setUpdate);location.reload(); }); // Toggle checkboxes when their labels are clicked $('label.setCont').click(function(){toggleCheck('setCont')}); $('label.setUpdate').click(function(){toggleCheck('setUpdate')}); // Toggle settings display when label is clicked $('label.filterSettingsToggle').click(function(){ if ($('div.filterSettings').attr('hidden')){ $('div.filterSettings').removeAttr('hidden').css('display','inline'); } else { $('div.filterSettings').attr('hidden','').css('display',''); } }); function toggleCheck(className){ if ($('input.'+className).prop('checked')){ $('input.'+className).prop('checked', false); if (className == 'setCont') GM_setValue('cont','0'); if (className == 'setUpdate') GM_setValue('update','0'); location.reload(); } else { $('input.'+className).prop('checked', true); if (className == 'setCont') GM_setValue('cont','1'); if (className == 'setUpdate') GM_setValue('update','1'); location.reload(); } } // Read settings var cCont = (GM_getValue('cont') == '1') ? true : false; var cUpdate = (GM_getValue('update') == '1') ? true : false; // *** Set update info *** // Tell auto-updater this script's description page URL, for the update notification link var thisScriptURL = location.protocol + '//userscripts.org/scripts/show/163038'; // Tell auto-updater this script's meta data URL, for checking the script's latest version number var thisScriptMetaURL = location.protocol + '//userscripts.org/scripts/source/163038.meta.js'; // *** End update info *** // ********************* Continuous scroll ********************** if ((cCont) && ($('span.loading.done').length < 1) && (location.pathname.search('/show') < 0) && (location.pathname.search('/review') < 0) && (location.pathname.search('/fans') < 0) && (location.pathname.search('/issues') < 0) && (location.pathname.search('/discuss') < 0) && (location.pathname != '/') && (location.pathname.search('/review') < 0) && (location.pathname.search('/versions') < 0) && (location.pathname.search('/diff') < 0) && (location.pathname.search('/upload') < 0) && (location.pathname.search('/admin') < 0) && (location.pathname.search('/edit') < 0) && (location.pathname.search('/images') < 0)){ // Remove the page links to avoid confusion in continuous mode $('div.pagination').remove(); var pageOffset = 0; // Get the current page number if (location.href.search('page=') > -1){ // If the URL contains page=, read page number from there var page = parseInt(location.href.substr(location.href.search('page=') + 5,4)); } else { // Otherwise assume we're on page 1 var page = 1; } // Clone the table header for use in our "floater" fixed info bar var info = $('table.wide.forums th.la').clone(); info.addClass('floated'); // Create a div and table to contain the cloned table header var floater = '<div style="width:950px;position:fixed;left: 50%;margin-left:-475px;z-index:50;" class="floater" hidden=""> ';// Insert the floater div into the page...$('body').prepend(floater);// ...and insert the cloned table header into that div$('.floater table').prepend(info);// Hide or show the floater based on whether or not the original table header is in view (:in-viewport selector from a plugin)if(($('table.wide.forums th.la:not(.floated):in-viewport').length <1)&&($('.floater[hidden]').length >0)){$('.floater').removeAttr('hidden');}elseif(($('table.wide.forums th.la:not(.floated):in-viewport').length >0)&&($('.floater[hidden]').length <1)){$('.floater').attr('hidden','');}// Scrolling should trigger a check to see if the floater needs to be shown, and whether we need to fetch more content$(window).scroll(function(){scroll();});}functionscroll(){// Again, hide or show the floater as appropriateif(($('table.wide.forums th.la:not(.floated):in-viewport').length <1)&&($('.floater[hidden]').length >0)){$('.floater').removeAttr('hidden');}elseif(($('table.wide.forums th.la:not(.floated):in-viewport').length >0)&&($('.floater[hidden]').length <1)){$('.floater').attr('hidden','');}// If the page footer is in view, we've hit the bottom of the page, so fetch more content...if($('div#root_footer:in-viewport').length >0){// ...But don't fetch more content if a fetch is already in progressif(!($('table.wide.forums tbody.active').length >0)){// Tell upcoming scroll triggers that a fetch is in progress$('table.wide.forums tbody').addClass('active');// Keep track of which results page we're up to pageOffset++;var nextPage = page + pageOffset;// Start constructing the URL to fetch. Strip out any anchor data from the current URLvar urlFixed = location.href.replace(/\#.*/i,'');// Set the URL to fetch the next page. Must be done in different ways depending on the current URL's tokensif(urlFixed.search(/page\=/i)>-1){var nextUrl = urlFixed.replace(/page\=\d+/i,'page='+ nextPage);}elseif(urlFixed.search(/\?/)>-1){var nextUrl = urlFixed +'&page='+ nextPage;}else{var nextUrl = urlFixed +'?page='+ nextPage;}// Display "Fetching" message$('span.loading').text(' [Fetching More Results...]').css('color','lightblue');// Retrieve the next page $.ajax({ url: nextUrl, dataType:'html',//async: false, success: addContent });}}}functionaddContent(data){if(data.search('No results. Sorry!')>-1){$('span.loading').addClass('done').text(' No more results!');}else{// From the retrieved page, strip out everything above and below the rows of the results tablevar newData = data.replace(/\!DOCTYPE[\s\S]*?\ \'scripts-').replace(/\<\/table\>[\s\S]*\<div class\="pagination[\s\S]*\<\/html\> /i,''); // Debug new table row extraction //document.open('text/plain');document.write(newData); // Append the new table rows to our current table $('table.wide.forums tbody').append(newData); // Tell upcoming scroll triggers that a fetch is no longer in progress $('table.wide.forums tbody').removeClass('active'); // Clear "Fetching" text $('span.loading').text(''); // Run the filter again to check for scams in the new content filter(); } } // ************************* End Continuous ********************** /* The following 5 arrays comprise the blacklist. They are divided by type for possible future auto-review features. Note that clear scammers are placed in the Scammers array, even if they might fit one of the other categories. */ // IDs of known scam/spam authors var scammers = [ 505511,509293,509378,510850,513541,510672,480097,510116,500038,512571,442265,513430,507472,513409,505429, 513357,512124,507498,506735,500300,511244,510309,511328,497384,513364,513355,511676,487511,511415,507901, 507089,513264,510605,512529,511674,511989,510527,512972,513188,512212,509425,512669,512668,512519,472464, 513030,508237,509455,445861,505765,505775,490174,505107,504907,475448,439139,489768,427958,500250,475874, 500010,501687,441113,477783,477939,469787,480448,490444,507032,507280,506308,511070,414793,512674,510630, 507732,510588,512779,512759,512752,512179,512061,512725,500430,505802,378054,509405,510729,100713,510389, 504342,512514,506181,509046,512362,511138,511847,512226,511439,511386,509806,512154,510785,502394,513843, 511333,511604,511998,511984,505329,471739,511959,497739,508301,496647,511856,511598,511852,508789,509003, 511640,506401,511558,511543,510077,506307,511319,511367,511401,426758,511160,505130,511129,500403,511060, 511004,510975,509376,510881,508826,510788,510790,510609,510487,510565,504495,507700,474473,508083,508770, 436783,503959,501839,508952,510181,510183,496061,502509,434378,319859,509709,445145,506323,509541,509477, 509401,509102,507765,440600,507395,493603,469852,504611,508929,504955,508885,507596,492463,508839,502511, 505519,507645,508665,507767,508322,507927,508149,505864,508437,506372,501446,507756,479455,508339,508327, 508228,508224,439396,486100,484490,483252,477018,469610,474749,475548,469791,471187,469618,469741,469778, 469780,469784,469809,469886,428875,464299,440810,442036,238348,441298,440800,441085,437719,420155,409280, 403145,342242,329565,139742,511861,314407,473973,322218,503485,471931,502003,353460,507208,512693,501361, 512259,511888,511170,511127,291772,510918,503054,510750,510611,509950,427026,507649,507934,508452,471736, 507729,507614,507751,507753,508147,507588,507142,492379,507486,507485,508087,507183,479194,507094,507093, 507082,499556,507041,507861,507870,507861,507870,426361,506908,506898,506748,505764,506542,506547,507776, 506324,428623,507651,507659,506107,271918,504188,507554,505267,506223,507471,504831,290748,503800,507340, 507232,342061,468969,507199,507215,507166,498865,497933,507014,506995,505950,439843,467890,506668,506119, 501773,504380,503586,392894,288247,503614,503108,418280,513678,487207,492564,513638,513429,289792,289964, 435713,151070,512412,431803,484943,473044,508774,497119,327303,492799,208735,498726,505617,413570,513804, 482213,513968,513981,502217,507365,508594,504474,512915,512525,502367,513487,513002,512606,512442,512570, 512387,512085,511795,512089,510382,511475,505926,511188,511093,510847,510691,510422,509275,509241,509157, 509083,508882,508057,508849,508673,508103,507510,507260,507241,506729,506697,506689,506430,505845,505607, 504993,504988,504327,504005,503775,503709,503590,503498,503334,503206,503298,283470,501668,502362,502190, 501444,501345,500825,500637,500843,500630,500190,500078,499802,498950,498417,498115,497795,495883,497163, 495995,490808,476102,476758,514045,505250,514143,514332,507958,514409,426481,432055,428693,440592,509598, 514445,514517,514637,514412,445056,473740,488376,510780,514863,514894,515078,512570,510946,507241,506729, 515107,515223,514725,515272,515299,515313,470172,515268,515446,515440,515489,515465,515540,420148,515577, 515862,506824,501137,503837,516035,516034,516152,508693,516334,481002,256842 ]; /* IDs of useless authors. These include authors who only post unexplained copies of existing scripts and scripts that primarily do nothing. */ var useless = [ 513573,484405,513621,422292,478814,513746,494425,508578,498070,500894,514046,514258,512116,466803,506234, 182070,154802,210716,326372,142623,479344,412017,195004,209847,483188,515140,506391,502722,497223,516057 ]; /* IDs of accounts that haven't posted scripts (yet) but are clearly operated by scam authors (ie. they post dummy reviews for scams, etc) */ var scamHelpers = [ 505792,505791,505782,505352,505300,502220,442199,442192,502618,513557,196818,498788,501053,513390,513028, 509806 ]; /* IDs of authors who post Packer and other obfuscated (hidden) code, and privately-hosted remote code, that can not be easily verified. */ var obfuscated = [ 506312,482708,426106,469018,422222,442786,422223,422224,422226,422227,473813,505802,505802,512195,511096, 434917,292807,398936,199618,485411,308463,437023,507118,506973,250955,469976,474262,439208,433063,130901, 360083,401264,286875,301639,126265,85357,76302,508036,365484,471746,179136,511801,499040,507524,470746, 507881,507267,484532,484441,412918,505444,493299,503861,469860,470394,331170,442420,511090,489916,369106, 514114,440592,514408,489669,514396,514718,320677,515026,509312,486160,516124,395734,515898,516107,516309 ]; /* Misc. suspicious: IDs of authors of suspicious scripts that are not confirmed scams but exhibit highly suspicious behavior. This is currently populated primarily by Ultoo.com script authors. */ var suspicious = [ 512776,505330,509760,508814,507726,511000,513360,511118,513246,509798,416110,505078,513216,513490,512836, 507909,505314,509298,513106,506607,512750,512842,506195,513236,508667,501009,505326,509690,508422,506068, 470374,505168,512743,512685,505778,423469,417384,512178,201391,511758,510350,510972,509965,508299,505635, 504693,508121,509729,511015,510766,507604,510191,510582,509360,507832,507466,509694,506866,505770,507854, 508794,506958,508725,470697,508401,507876,505912,505945,506579,505689,506680,508333,505434,506731,505035, 500679,506741,506998,506512,505247,505401,505047,513812,234423,513836,514361,514276,514231,514399,514231, 514448,503630,514493,513984,514728,514873,169798,513360,514911,514768,514953,503846,514658,515321,504962, 515176,510636,515832,10072,516079,516201,516225 ]; /* IDs below belong to scripts rather than authors. Used to block scripts that the author doesn't intend as malicious, but nevertheless are -- such as scripts advertised as "pranks". Though authors who ONLY post pranks (and similar) will probably be added to the scammer list. */ var pranks = [124287,165241,142050,165892,165889]; // Ignore the following script authors. This is to prevent known false-positive detections var whitelist = [ 501553,19916,297645,86416,103626,169575,386991 ]; // Combine all author blacklist arrays into one var blacklist = scammers.concat(useless).concat(suspicious).concat(obfuscated).concat(scamHelpers); // Display blacklist total in settings $('span.tally').text(blacklist.length); // *************************** For individual script pages ***************************** // If we're on a particular script page, any tab, check it and display a warning if it's suspect if ((location.pathname.search('/show') > -1) || (location.pathname.search('/review') > -1) || (location.pathname.search('/fans') > -1) || (location.pathname.search('/issues') > -1) || (location.pathname.search('/discuss') > -1)){ // Set the warning to use on individual scam script pages var pageWarning = '<div class="aboutWarning" style="width:80%; border:2px red solid; line-height:20px; color:darkred; font-size:14px; font-weight:bold;' + 'padding:3px; margin:5px 5px -3px 5px; text-align:center;">' + 'This script is a suspected scam. Use caution before installing it.' + '</div> '; // Extract author ID from author link var author = parseInt($('a[user_id]').attr('user_id')); // Extract script ID from the URL var urlSplit = location.pathname.split('/'); var id = urlSplit[(urlSplit.length-1)]; // Check the author ID against our whitelist and scammer list if (whitelist.indexOf(author) > -1){ return false; } else if (blacklist.indexOf(author) > -1){ tagScamPage(); } else if (pranks.indexOf(parseInt(id)) > -1){ tagScamPage(); // If the author wasn't found in any list, retrieve the script code for scanning } else { $.ajax({ url: location.protocol + '//userscripts.org/scripts/source/' + id + '.user.js', dataType: 'text', cache: false, success: function(data){ checkScript(data,false); } }); } }// ************************************** End individual script pages ***************************************** // Declare some variables as global var cScamHide; var suspects = []; /* Check for an existing session cookie: Ajax Range header for bandwidth reduction measure doesn't work without a session cookie. If one is not found, retrieve the login page once (without logging in), which creates the session cookie for us */ if (!$.cookie('_uso_session')) { $.ajax({ url: location.protocol + '//userscripts.org/login', dataType: 'text', async: false }); } // If toggle cookie doesn't exist yet, create it, so our toggle state can be saved if (GM_getValue('hide',-5) == -5) GM_setValue('hide','1'); // Create a function to read toggle cookie function readCookie(){cScamHide = (GM_getValue('hide') == 1) ? true : false;} // Set the text to use when tagging suspected scam scripts var tag = '' + '[SUSPECTED SCAM]' + ' '; // Set the expanded warning to be placed in the descriptions of suspected scam scripts var caution = '' + 'Warning: This script is a suspected scam. Use caution before installing it. ' + ' ' + 'Author\'s description: '; // Set update notice var notify = ' <a style="font-size:80%" class="notify" target="_blank" href="' +</a><a style="font-size:80%" class="notify" target="_blank" href="' thisScriptURL + '">' + 'Filter Update Available!</a>'; // Insert our toggle link, along with fields to show # of detected scams and the auto-update notice var toggleLink = "Toggle Scam Filter"; if (location.pathname == '/') toggleLink = "Scam Toggle"; $('th.la:contains("Name"):lt(2)') .append(' ' + '<a href="#a" class="autoToggle">'</a><a href="#a" class="autoToggle">+ toggleLink +'</a> (' + '[Working]' + ': ' + '0 ' + '' + ')' + '' + ''); // Set toggle link hover effect $('a.autoToggle').hover( function(){ $(this).css('color','#FFDD11'); }, function(){ $(this).css('color','white'); } ); // Read our cookie to determine toggle state readCookie(); // Set toggle text based on cookie if (cScamHide){ $('span.tog').text('hidden'); } else { $('span.tog').text('shown'); } // Determine login status, which effects the location of elements on the page var loggedIn = ($('a.mail').length > 0) ? true : false; // Loop through each list row function filter(){ // Working $('span.working').text('[Working]').css('color','orange').css('text-shadow','0px 0px 5px #yellow'); var loopsLength = $('tr[id^="scripts-"]:not(.checked)').length; $('tr[id^="scripts-"]:not(.checked)').each(function(i,val){ $(this).addClass('checked'); // Extract script ID from row ID id = $(this).attr('id').replace('scripts-',''); suspects[i] = id; // Get title length so we can determine where author code will be on the retrieved page var offset = $('tr[id="scripts-' + id + '"] a.title').attr('title').length; // Author code is further down for logged-in users, so add to the offset if we're logged in offset = (loggedIn) ? (offset + 100) : offset; offset = offset + 100; // Retrieve that section of the script's "fans" page $.ajax({ url: location.protocol + '//userscripts.org/scripts/fans/' + suspects[i], dataType: 'text', headers: {Range: "bytes=" + (offset + 1600) + "-" + (offset + 2300)}, cache: false, success: handOff1 }); function handOff1(data){ // Hand off the retrieved description page to the checkScriptAuthor function checkScriptAuthor(data, suspects[i]); // Debug author offset: //alert(data); // If this was the last loop iteration, change "Working" text to "Done" and hide/show scams based on toggle if (i == loopsLength-1) $('span.working').text('Done').css('color','white').css('text-shadow',''); toggleScams(false); } }); } // Run the filter initially filter(); function checkScriptAuthor(data, id){ var uid = id; // Get script author's ID from the retrieved script description page var auth = data.match(/;s=80&default=identicon" rel="nofollow" user_id="(\d*)"\>(.*)\<\/a\>/i); var authorID = parseInt(RegExp.$1); var authorText = RegExp.$2; // Debug author offset: //$('p.subtitle').append(' ' + auth + ' ' + authorID + ' ' + authorText); // Check if the script is in the pranks list, tag and move on if it is if (pranks.indexOf(parseInt(uid)) > -1){ tagScam('prank', id, authorText, authorID); // If the script's author is in our whitelist, move on } else if (whitelist.indexOf(authorID) > -1){ return false; // If the script's author matches one of our known scammers, tag the script as a suspected scam } else if (blacklist.indexOf(authorID) > -1){ tagScam('scammer',id,authorText,authorID); // Otherwise, retrieve the script code for scanning } else { // Retrieve script meta data, which contains Userscripts.org's unique version stamp getMeta(id).success(function(data){ // Extract the version stamp var usoVersion = parseInt(data.substr( data.search(/@uso:version/) + 17, 6) ); // Get our cached data for this script, if it exists var cache = GM_getValue(id,0); // If there is cache data for the script, extract the cached version stamp and cached scan result if (cache != 0){ var cacheVersion = cache.split(',')[0]; var reason = cache.split(',')[1]; } // If there is no cache data for this script, or if the cached version stamp doesn't match Userscripts.org's // stamp, retrieve the script code for scanning. if ((cacheVersion != usoVersion) || (cache == 0)){ $.ajax({ url: location.protocol + '//userscripts.org/scripts/source/' + id + '.user.js', dataType: 'text', cache: false, success: function(data){ handOff2(data, uid, authorText, authorID); } }); function handOff2(data, id, authorText, authorID){ // Hand off the retrieved script code to the checkScript function checkScript(data, true, id, usoVersion, authorText, authorID); } /* Otherwise, we have cache data that is current (the cached version stamp matches the retrieved version stamp), AND the script was determined to be a scam (a 'reason' value of '1' means NO scam, all others indicate scams). Tag the scam using the cached reason. */ } else if (reason != 1){ tagScam(reason, uid, authorText, authorID); } }); } } function getMeta(id){ // Start meta.js retrieval, return a "promise", because JS is too retarded to handle asynchronous returns right now return $.ajax({ url: location.protocol + '//userscripts.org/scripts/source/' + id + '.meta.js', dataType: 'text', cache: false }); } function checkScript(data,isList,id,usoVersion,authorText,authorID){ //Skip scripts that don't contain at least one instance of the word "facebook", "ultoo", or "ask.fm" if ( (data.search(/facebook/i) > -1) || (data.search(/ultoo/i) > -1) || (data.search(/ask\.fm/i))){ // Check the script code for known scam patterns if (data.search(/&action\=subscribe/i) > -1){ if (isList){var reason='&action=subscribe';tagScam(reason, id, authorText, authorID)} else{tagScamPage()} } else if (data.search(/\/ajax\/friends\/lists\/subscribe/i) > -1){ if (isList){var reason='/ajax/friends/lists/subscribe';tagScam(reason, id, authorText, authorID)} else{tagScamPage()} } else if (data.search(/\/ajax\/follow\/follow_profile\.php/i) > -1){ if (isList){var reason='/ajax/follow/follow_profile.php';tagScam(reason, id, authorText, authorID)} else{tagScamPage()} } else if ((data.search(/p,a,c,k,e,(d|r)/i) > -1) && (data.search(/eval/i) > -1)){ if (isList){var reason='packer';tagScam(reason, id, authorText, authorID)} else{tagScamPage()} } else if (data.search(/facebook.com\/plugins\/(like|follow)\.php?href\=/i) > -1){ if (isList){var reason='facebook.com/plugins/like.php?href=';tagScam(reason, id, authorText, authorID)} else{tagScamPage()} } else if (data.search(/(&|\?)action\=add_friend/i) > -1) { if (isList){var reason='paramsAdd';tagScam(reason, id, authorText, authorID)} else{tagScamPage()} } else if ( (data.search(/document\.getElementById$'MobileNos_'$/i) > -1) && (data.search(/ultoo/i) > -1) ){ if (isList){var reason='ultooNumber';tagScam(reason, id, authorText, authorID)} else{tagScamPage()} } else if ( (data.search(/document\.getElementsByName$'PollUserName'$\[0\]/i) > -1) && (data.search(/ultoo/i) > -1) ){ if (isList){var reason='ultooName';tagScam(reason, id, authorText, authorID)} else{tagScamPage()} } else if (data.search(/\/ajax\/groups\/members\/add_post.php/i) > -1) { if (isList){var reason='facebook post';tagScam(reason, id, authorText, authorID)} else{tagScamPage()} } else if (data.search(/iframe.*facebook\.com/i) > -1){ if (isList){var reason='facebook iframe';tagScam(reason, id, authorText, authorID)} else{tagScamPage()} } else if (data.search(/ask\.fm\/likes.*\/add/i) > -1){ if (isList){var reason='ask.fm /add';tagScam(reason, id, authorText, authorID)} else{tagScamPage()} } else if (data.search(/(facebook|twitter)\.com.*target\=/i) > -1){ if (isList){var reason='ask.fm spam';tagScam(reason, id, authorText, authorID)} else{tagScamPage()} } else if (data.search(/(ask\.fm.*(ask|preguntame|pergunt(e|a)s?))|(href\='Skype)/i) > -1){ if (isList){var reason='ask.fm spam';tagScam(reason, id, authorText, authorID)} else{tagScamPage()} } else { var reason = 1; } } else { var reason = 1; } // Store cache data: current version stamp and our scan results. A reason of '1' indicates NO scam. GM_setValue(id,usoVersion + ',' + reason); } // Display warning on individual scam suspect pages function tagScamPage(){ $('h2.title').css('color','darkred').css('font-size','20px'); $('div#details').append(pageWarning); } function tagScam(reason,id,authorText,authorID){ var reasonPre = reason; // Set row selector var row = 'tr[id="scripts-' + id + '"] '; // Tag the suspected scam's HTML code $(row).addClass('scam'); // Show reason only on hover $(row + 'td.script-meat').css('padding-bottom','0').hover( function(){ $('span.reason', this).removeAttr('hidden'); }, function(){ $('span.reason', this).attr('hidden',''); } ); // Hide the suspected scam if the cookie tells us the toggle is set to hide if (cScamHide) $(row).attr('hidden',''); // Tag the suspected scam visually using our preset messages $(row + 'a.title') .css('color','darkred') .before(tag) .parent().children('p.desc').prepend(caution); // Set reason text if (reason == '&action=subscribe'){ var reason = 'Contains url subscribe token [&action=subscribe].'; } else if (reason == '/ajax/friends/lists/subscribe'){ var reason = 'Contains Facebook ajax subscribe code [/ajax/friends/lists/subscribe].'; } else if (reason == 'packer'){ var reason = 'Contains "Packer" hidden eval code [eval(p,a,c,k...)].'; } else if (reason == '/ajax/follow/follow_profile.php'){ var reason = 'Contains Facebook ajax profile follow code [/ajax/follow/follow_profile.php]'; } else if (reason == 'scammer'){ var reason = 'This script was published by known scam or spam author ' + authorText; } else if (reason == 'facebook.com/plugins/like.php?href='){ var reason = 'Contains Facebook "like" reference to specific pages [like *or* follow.php?href=].'; } else if (reason == 'paramsAdd'){ var reason = 'Contains Facebook friend add token for a specific user [&action=add_friend].'; } else if (reason == 'ultooNumber'){ var reason = 'Contains Ultoo.com code that may procure points for one particular mobile number.'; } else if (reason == 'ultooName'){ var reason = 'Contains Ultoo.com code that may procure points for one particular user name.'; } else if (reason == 'facebook post'){ var reason = 'Contains ajax post code that may post to a specific Facebook page.'; } else if (reason == 'facebook iframe'){ var reason = 'May contain spam/misleading Facebook iFrames or "Like" buttons.'; } else if (reason == 'prank'){ var reason = 'This script is advertised as a prank or similar. It is considered malicious even if its author does not intend harm to Userscripts.org users.'; } else if (reason == 'ask.fm /add'){ var reason = 'Contains code that may automatically add or follow specific Ask.fm pages.'; } else if (reason == 'ask.fm spam'){ var reason = 'Contains code that is likely duplicated from another script to contain a new author\'s spam links.'; } // Append reason text if (reasonPre != 'scammer') $(row + 'span.reason').text(' Reason: ' + reason); // Append author name/ID var designation = (reasonPre == 'scammer') ? 'Known Scammer' : 'Author Name'; $(row + 'span.authorWarn').html(' ' + designation + ' • ' + '"<a style="color:darkblue;text-decoration:none;" href="' +</a><a style="color:darkblue;text-decoration:none;" href="' location.protocol + '//userscripts.org/users/' + authorID + '">' + authorText + '</a>" • ID: <a style="color:darkred;text-decoration:none;" href="' +</a><a style="color:darkred;text-decoration:none;" href="' location.protocol + '//userscripts.org/users/' + authorID + '">' + authorID + '</a>'); // Increment the running count of detected scams $('span.total').text(parseInt($('span.total:first').text()) + 1); // If all results were hidden, proceed to following page of results if ((!cCont) && ($('tr[id^="scripts-"]').not('[hidden]').length == 0)) return window.location.href = location.protocol + '//userscripts.org' + $('a.next_page').attr('href'); // In continuous mode, if filter resulted in too few results, fetch more even without a new scroll trigger //if ((cCont) && ($('tr[id^="scripts-"]').not('[hidden]').length < 10)) scroll(); if ((cCont) && ($('div#root_footer:in-viewport').length > 0)) scroll(); } // Set the toggle link's click function $('a.autoToggle').click(function(){ toggleScams(true); }); // Make sure the toggle setting is in effect in case a toggle click occurred during the loop toggleScams(false); function toggleScams(click){ // Read our cookie to determine the current toggle setting readCookie(); /* If toggleScams is running as a result of a toggle link click, toggle hide/show setting and hide or show the scams. If it's running initially (not the result of a click), simply hide/show scams based on the current setting. */ if (cScamHide){ if (click) {showScams(click)} else {hideScams(click)} } else { if (click) {hideScams(click)} else {showScams(click)} } } function hideScams(click){ $('tr.scam').attr('hidden',''); $('span.tog').text('hidden'); if ((cCont) && ($('div#root_footer:in-viewport').length > 0)) scroll(); // If toggleScams is running as a result of a toggle link click, toggle the cookie appropriately if (click) GM_setValue('hide','1'); } function showScams(click){ $('tr.scam').removeAttr('hidden'); $('span.tog').text('shown'); // If toggleScams is running as a result of a toggle link click, toggle the cookie appropriately if (click) GM_setValue('hide','0'); } /* Auto-updater: Daily check. If an update is found, update notice displays on the current and next two subsequent page loads, then stops displaying again until following day. */ // If the auto-update cookie doesn't exist, create it. if (cUpdate){ if ($.cookie('ScamFilterUpdate') == null) $.cookie('ScamFilterUpdate', '1', { expires: 1, path: '/' }); // Convert the cookie's data into a number var cUpdater = parseInt($.cookie('ScamFilterUpdate')); // If the cookie showed a number less than 4, retrieve Scam Hider's remote meta data, which includes its version number if (cUpdater < 4){ // Retrieve the piece $.ajax({ url: thisScriptMetaURL, dataType: 'text', cache: false, headers: {Range: 'bytes=-330'}, success: checkUpdates }); } } function checkUpdates(data){ // Extract Scam Hider's current version number from the retrieved data... var currentVersion = parseFloat(data.substr( data.search(/@version/) + 13, 5)); // Debug offset: //alert('Installed version: ' + GM_info.script.version + ' Latest version: ' + currentVersion + ' (' + data + ')'); // and compare it to the installed version number. if (currentVersion > GM_info.script.version){ // If the current version number retrieved is greater than the installed version number, show our update notice. $('span.upd').html(notify); // Set the notification link's tooltip to show installed + latest versions $('a.notify').attr('title','Installed version: ' + GM_info.script.version + ' Latest version: ' + currentVersion); /* If the user doesn't update and loads another script listing page, increment the cookie's number. This lets the user see the update notice for 3 page loads total, then doesn't bother them again for another day (the cookie is set to expire in 24 hours). */ $.cookie('ScamFilterUpdate', cUpdater + 1, { expires: 1, path: '/' }); } } function loadJQViewport(){ /* Viewport - jQuery selectors for finding elements in viewport Copyright (c) 2008-2009 Mika Tuupola Licensed under the MIT license: <a class="sh_url" href="http://www.opensource.org/licenses/mit-license.php">http://www.opensource.org/licenses/mit-license.php</a> * Project home: <a class="sh_url" href="http://www.appelsiini.net/projects/viewport">http://www.appelsiini.net/projects/viewport</a> $(":in-viewport") $(":below-the-fold") $(":above-the-top") $(":left-of-screen") $(":right-of-screen") */ (function($) { $.belowthefold = function(element, settings) { var fold = $(window).height() + $(window).scrollTop(); return fold <= $(element).offset().top - settings.threshold; }; $.abovethetop = function(element, settings) { var top = $(window).scrollTop(); return top >= $(element).offset().top + $(element).height() - settings.threshold; }; $.rightofscreen = function(element, settings) { var fold = $(window).width() + $(window).scrollLeft(); return fold <= $(element).offset().left - settings.threshold; }; $.leftofscreen = function(element, settings) { var left = $(window).scrollLeft(); return left >= $(element).offset().left + $(element).width() - settings.threshold; }; $.inviewport = function(element, settings) { return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings); }; $.extend($.expr[':'], { "below-the-fold": function(a, i, m) { return $.belowthefold(a, {threshold : 0}); }, "above-the-top": function(a, i, m) { return $.abovethetop(a, {threshold : 0}); }, "left-of-screen": function(a, i, m) { return $.leftofscreen(a, {threshold : 0}); }, "right-of-screen": function(a, i, m) { return $.rightofscreen(a, {threshold : 0}); }, "in-viewport": function(a, i, m) { return $.inviewport(a, {threshold : 0}); } }); })(jQuery); } // Add jQuery cookie functions: Makes the cookie functions above work. // This must load above function use for Chrome/Tampermonkey support, so it's wrapped in a function called in the beginning. /* jQuery Cookie Plugin v1.3.1 <a class="sh_url" href="https://github.com/carhartl/jquery-cookie">https://github.com/carhartl/jquery-cookie</a> * Copyright 2013 Klaus Hartl. Released under the MIT license */ function loadJQcookies(){ (function (factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as anonymous module. define(['jquery'], factory); } else { // Browser globals. factory(jQuery);} }(function ($) { var pluses = /\+/g; function raw(s) { return s;} function decoded(s) { return decodeURIComponent(s.replace(pluses, ' '));} function converted(s) { if (s.indexOf('"') === 0) { // This is a quoted cookie as according to RFC2068, unescape s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');} try { return config.json ? JSON.parse(s) : s; } catch(er) {}} var config = $.cookie = function (key, value, options) { // write if (value !== undefined) { options = $.extend({}, config.defaults, options); if (typeof options.expires === 'number') { var days = options.expires, t = options.expires = new Date(); t.setDate(t.getDate() + days);} value = config.json ? JSON.stringify(value) : String(value); return (document.cookie = [ config.raw ? key : encodeURIComponent(key), '=', config.raw ? value : encodeURIComponent(value), options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : '' ].join(''));} // read var decode = config.raw ? raw : decoded; var cookies = document.cookie.split('; '); var result = key ? undefined : {}; for (var i = 0, l = cookies.length; i < l; i++) { var parts = cookies[i].split('='); var name = decode(parts.shift()); var cookie = decode(parts.join('=')); if (key && key === name) { result = converted(cookie); break;} if (!key) { result[name] = converted(cookie);}} return result;}; config.defaults = {}; $.removeCookie = function (key, options) { if ($.cookie(key) !== undefined) { // Must not alter options, thus extending a fresh object... $.cookie(key, '', $.extend({}, options, { expires: -1 })); return true;} return false;};})); } // End jQuery Cookie Plugin ************************************************* }); <pre class="sh_javascript sh_sourceCode" id="source"> </pre> </div> ," tr="" id=" <table class="wide forums"> <tbody> <tr id\="scripts\-/i</tr> </tbody></table> </div> </pre>

http://userscripts.org/scripts/show/163038

http://userscripts.org/scripts/review/163038

Userscripts.org currently contains over 2K scam scripts

Userscripts.org Scam Filter Install Userscripts.org currently contains over 2,000 scam scripts. There is currently no way to report sca...