uncleflo

Fiddle to experiment with browser element offsets/sizes

http://jsfiddle.net/y8Y32/25/

Saved by uncleflo on May 9th, 2018.

Note how the browser reserves some space to the right of this paragraph, just enough to fit a scrollbar. This happens even though there is a decent amount of padding-right.

development code fiddle js jquery padding browser scroll javascript preview realtime tool margin element experiment crossbrowser compatible size position

You Might Not Need jQuery

http://youmightnotneedjquery.com/

Saved by uncleflo on May 9th, 2018.

jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application. If you're developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more than what the browser ships with. At the very least, make sure you know what jQuery is doing for you, and what it's not. Some developers believe that jQuery is protecting us from a great demon of browser incompatibility when, in truth, post-IE8, browsers are pretty easy to deal with on their own.

jquery why reason javascript howto alternative development code browser library bandwidth dependency incompatible utility requirement advice server application speed execution

Stackoverflow - offsetTop vs. jQuery.offset().top

https://stackoverflow.com/questions/6777506/offsettop-vs-jquery-offset-top

Saved by uncleflo on May 9th, 2018.

I have read that offsetLeft and offsetTop do not work properly in all browsers. jQuery.offset() is supposed to provide an abstraction for this to provide the correct value xbrowser. What I am trying to do is get the coordinates of where an element was clicked relative to the top-left of the element. Problem is that jQuery.offset().top is actually giving me a decimal value in FFX 3.6 (in IE and Chrome, the two values match). http://jsfiddle.net/htCPp/ exhibits the issue. If you click the bottom image, jQuery.offset().top returns 327.5, but offsetTop returns 328. I would like to think that offset() is returning the correct value and I should use it because it will work across browsers. However, people obviously cannot click decimals of pixels. Is the proper way to determine the true offset to Math.Round() the offset that jQuery is returning? Should I use offsetTop instead, or some other method entirely?

offset top left position development code abstract browser coordinate element jquery js javascript pixel chrome ie firefox crossbrowser stackoverflow problem solution

You Don't Need jQuery!

https://blog.garstasio.com/you-dont-need-jquery/events/#next

Saved by uncleflo on April 7th, 2018.

Free yourself from the chains of jQuery by embracing and understanding the modern Web API and discovering various directed libraries to help you fill in the gaps. In this fifth installment of “You Don’t Need jQuery (anymore)”, I’m going to talk about dealing with events in the browser without jQuery. As always, each section will cover the jQuery approach, followed by a solution using the native Web API instead. After reading this post on events, you should be confident enough to deal with events in your own project without using jQuery. As I’ve mentioned (many times) before, this blog is not about bad-mouthing jQuery. jQuery is, without a doubt, ubiquitous in the world of web development. In the earlier days of web development, jQuery was required to smooth out the significant implementation differences and bugs found in various browsers when dealing with the DOM and the Web API as a whole. Also, the Web API was quite primitive at the time, in some respects, and jQuery helped to make development a bit more intuitive.

jquery js alternative development modern web api browser howto replace solution demo reference description anti need event library events dispatch add eventlistener listener implementation code example

Find mouse position relative to element

https://stackoverflow.com/questions/3234256/find-mouse-position-relative-to-element

Saved by uncleflo on April 6th, 2018.

I want to make a little painting app using canvas. So I need to find the mouse's position on the canvas. The solution is For people using JQuery.

jquery mouse event position canvas paint stackoverflow question answer element public

Any Time™ DatePicker/TimePicker AJAX Calendar Widget - HTML5, AJAX, JSON and XML Consulting and Training by Andrew M. Andrews III (SM)

http://www.ama3.com/anytime/

Saved by uncleflo on June 13th, 2015.

It seems like there's a million calendar and clock widgets out there, and when you look past the eye-candy, they all have one thing in common: they're tedious at best. At worst, counter-intuitive. Sure, a picker that uses sliders or spinners, or looks like an analog clock face might be cute, but did you ever notice how long it takes to position one to the correct hour and minute? Or how about choosing a month that's more than a season away? Worse yet, entering your birth year on a datepicker that forces you to click... backwards... repeatedly... one... year... at... a... time? Does your favorite "pretty" picker even work if your user has a keyboard, but not a mouse? Does it scale larger if the user increases the text size on your page? If not, ask your legal department how they'd feel about an accessibility lawsuit!

jquery javascript time timepicker date picker ajax calendar widget html5 clock month pretty useful keyboard position intuitive development administration format user friendly js web

How to Create a Basic Plugin | jQuery Learning Center

http://learn.jquery.com/plugins/basic-plugin-creation/

Saved by uncleflo on March 26th, 2015.

Sometimes you want to make a piece of functionality available throughout your code. For example, perhaps you want a single method you can call on a jQuery selection that performs a series of operations on the selection. In this case, you may want to write a plugin.

jquery plugins tutorial webdev learn read dev development javascript website plugin center create howto method description guide example

Dynamically Load jQuery Library Using Plain JavaScript

http://www.sitepoint.com/dynamically-load-jquery-library-javascript/

Saved by uncleflo on February 22nd, 2015.

This is how you can load the jQuery library using plain JavaScript. As the load takes place asynchronously so i’ve included a callback version too so you know when the script inserted has completed and you can start using jQuery! I previously posted about inserting scripts into secure pages so there are more options for you there too.

load jquery library javascript html website design asynchronous

DateTimePicker jQuery plugin - DatePicker and TimePicker in one - select date and time - XDSoft

http://xdsoft.net/jqplugins/datetimepicker/

Saved by uncleflo on February 16th, 2015.

jQuery plugin select date and time. Use this plugin to unobtrusively add a datetimepicker, datepicker or timepicker dropdown to your forms. It's easy to customize options. Source code on GitHub or download (zip).

datepicker jquery datetime plugin javascript time date picker pick choice ui object interaction

RateIt - a jQuery (star) rating plugin - Home

http://rateit.codeplex.com/

Saved by uncleflo on January 30th, 2015.

A very beautiful website that is an excellent example on how to do project management with all the tools included. CodePlex is Microsoft's free open source project hosting site. You can create projects to share with the world, collaborate with others on their projects, and download open source software. Rating plugin for jQuery. Fast, Progressive enhancement, touch support, customizable (just swap out the images, or change some CSS), Unobtrusive JavaScript (using HTML5 data-* attributes), RTL support, ARIA & keyboard support. Use as many stars as you'd like, and also any step size.

jquery plugin stars rating rate best project management project management star html

jQuery Rain | Animated Opening Type

http://www.jqueryrain.com/

Saved by uncleflo on January 20th, 2015.

Popular & Latest Web Resources & Tools: 25+ jQuery Responsive Layer Slider with Examples, 35+ Best URL Shortner Generator Websites, 40+ Best Lorem Ipsum Text Image Generator Websites, 30+ CSS Responsive Framework & Boilerplates, 20 Best WordPress Boostrap Themes

jquery javascript plugins plugin webdesign resize tab interface type animate rain open table product quantity list reference download development design website business invoice generator helpful

Loading Scripts with jQuery

http://davidwalsh.name/loading-scripts-jquery

Saved by uncleflo on January 20th, 2015.

JavaScript loaders are incredibly powerful and useful utilities. I've even covered a few of them on this blog, like curljs and LABjs, and have used RequireJS and the Dojo loader on personal projects. They're super powerful but can be overkill in some cases. If you're using jQuery, there's a built in method for loading a single script which may come in handy if you'd like to lazy load a plugin or any other type of script. Here's how to use it!

cache javascript jquery development web scripts script load solution case lazy use utility loader howto project

deparam function in JavaScript - opposite of $.param

https://coderwall.com/p/quv2zq/deparam-function-in-javascript-opposite-of-param

Saved by uncleflo on December 7th, 2014.

Often in Javascript you want to parameterize a map (hash|dictionary|whatever) to create a URL string, and jQuery has the utility function $.param to help you do so. But what happens when you want the reverse? jQuery doesn't have a "deparam" function. I bet other utility libraries do, and are probably more robust, but it's fun to write your own.

function javascript opposite param deparam jquery parameter url utility library robust dictionary explanation guide code development solution

markItUp! Universal Markup Editor

http://markitup.jaysalvat.com/home/

Saved by uncleflo on September 2nd, 2014.

markItUp! universal markup jQuery editor markItUp! is a JavaScript plugin built on the jQuery library. It allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented. markItUp! is not meant to be a “Full-Features-Out-of-the-Box”-editor. Instead it is a very lightweight, customizable and flexible engine made to meet the developer's needs in their CMSes, blogs, forums or websites. markItUp! is not a WYSIWYG editor, and it never will be.

jquery editor wysiwyg markup javascript software plugin doc wiki ui easy universal live preview different editors powerful flexible lightweight mark markdown implement textarea system developer customize need library engine

The Easiest Mobile Development Tool - Codiqa

https://codiqa.com/

Saved by uncleflo on September 2nd, 2014.

Build jQuery Mobile apps, the easy way. Codiqa is a powerful drag-and-drop builder for creating cross-platform HTML5 mobile apps and websites. It's simple, easy to use, and so damn useful.The most intuitive mobile interface builder ever built. Period.Over 100,000 businesses in over 150 countries rely on Codiqa to dramatically reduce the time and cost it takes to build a mobile app. It's prototyping with a twist: edit and export real, standards-compliant HTML5/CSS/JS or even native binary.

mobile app tools prototype ios jquery apps ui code quick build test develop tool codiqa website create crossplatform cross platform business cost html5 interface intuitive reduce useful easy css standard compliant js

hilios/jQuery.countdown - GitHub

https://github.com/hilios/jquery.countdown

Saved by uncleflo on August 5th, 2014.

A simple and html agnostic date countdown plugin for jQuery To get started, check-it out: http://hilios.github.io/jQuery.countdown/ The ultimate countdown plugin designed to fit in any coupon, auction site or product launch. Read our Documentation and follow our Examples to see what suits your particular needs.

jquery plugin time timer programming countdown javascript development website nice beautiful presentation interactive example code howto guide information download github

jquery training

http://appendto.com/what-we-do/training/schedule/jquery-virtual-training-june-2014/

Saved by uncleflo on July 17th, 2014.

appendTo will provide another public jQuery virtual training event on June 17 through June 19. The event is three four hour workshops on topics such as JavaScript and jQuery Foundations, Advanced jQuery Techniques and jQuery UI.

jquery training ui virtual class javascript foundation technique workshop manage team schedule result tool company about design beautiful site webdesign

jQuery.parallax

http://stephband.info/jparallax/

Saved by uncleflo on July 16th, 2014.

jParallax turns nodes into absolutely positioned layers that move in response to the mouse. Depending on their dimensions these layers move at different rates, in a parallaxy kind of way. With a bit of CSS you can either set up windows to see these layers through, or leave them free to roam about.

jquery parallax simple explanation guide howto plan css dimension position layer scroll mouse blog perspective development code

A Simple Parallax Scrolling Technique - Tuts Code Tutorial

http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641

Saved by uncleflo on July 16th, 2014.

Parallax scrolling is an interesting technique, where, as you scroll, the background images translate slower than the content in the foreground, creating the illusion of 3D depth. As I planned to re-design my personal website, my first goal was to write the shortest and simplest code to achieve maximum awesomeness! I'll show you how I did it. In this tutorial, I'll teach you the simplest parallax scrolling technique you've ever came across, so let's dig in!

code tutorial css jquery parallax scroll effect technique method howto solution simple website 3D depth content image markup speed

skrollr - parallax scrolling for the masses

http://prinzhorn.github.io/skrollr/

Saved by uncleflo on July 16th, 2014.

parallax scroll jquery javascript plugin skrollr js mass technique future web2.0 example template learn effect samples website design development demonstration

Css and Web Design Community News

http://cssglobe.com/

Saved by uncleflo on July 15th, 2014.

A website with lots of web design articles, that everyone around the world can contribute to.

css css3 html5 web tips portal cloud jquery design practice reference interesting article globe global contribute share knowledge information community

Web Designer - Defining the internet through beautiful design

http://www.webdesignermag.co.uk/

Saved by uncleflo on June 4th, 2014.

Web Designer is the leading authority for worldwide web creatives and designers. Covering next-gen technologies such as HTML5, CSS3, jQuery, WordPress and mobile apps across expert guides, it’s the premium choice for a variety of dedicated audiences. Always at the cutting edge of web design. Leading authority on web development since 1997. Content pitched to all designers and developers of any level. Connected to the biggest professional agencies in the business. Renowned annual web design awards

webdesign magazine css design html tutorial portal development internet web technology designer guide expert premium information jquery wordpress creativity

Heavily Customizing a Bootstrap Typeahead • FusionGrokker

http://fusiongrokker.com/post/heavily-customizing-a-bootstrap-typeahead

Saved by uncleflo on February 11th, 2014.

What follows is a (long) chronicle of my adventures customizing a Bootstrap Typeahead control to fit my needs. I can't claim that this is an ordained methodology because the documentation is pretty scant on what exactly you can and can't do with them; but it works and my changes will be used in production very soon.

development javascript bootstrap customize control html guide howto hack display jquery typeahead dropdown data

jQuery’s this: demystified

http://remysharp.com/2007/04/12/jquerys-this-demystified/

Saved by uncleflo on January 24th, 2014.

More often that not, in my early dabbling with jQuery and more advanced JavaScript, I found I would constantly get confused over the meaning of “this” in jQuery and my own new libraries. Hopefully this quick guide can help clarify those confusing moments, because once you’ve got it, it’s simple as pie.

jquery this object mystery blog guide explanation read article development code

Jquery - How to make $.post() use contentType=application/json? - Stack Overflow

http://stackoverflow.com/questions/2845459/jquery-how-to-make-post-use-contenttype-application-json

Saved by uncleflo on January 24th, 2014.

I've noticed that when using $.post() in jquery that the default contentType is application/x-www-form-urlencoded - when my asp.net mvc code needs to have contentType=application/json

(See this question for why I must use application/json: http://stackoverflow.com/questions/2792603/aspnet-mvc-why-is-modelstate-isvalid-false-the-x-field-is-required-when-that)

How can I make $.post() send contentType=application/json? I already have a large number of $.post() functions, so I don't want to change to $.ajax() because it would take too much time

javascript ecma jquery application browser request post get function question solution data howto