Building a better web forms Context highlighting using jQuery — Example


Содержание

jQuery contextMenu

Contextmenu plugin & polyfill

The contextMenu Plugin was designed for web applications in need of menus on a possibly large amount of objects. Unlike implementations as a beautiful site’s or trendskitchens’ this contextMenu treats the menu as the primary object. That means, that a single menu is defined that can be used by multiple objects. Unlike the mentioned plugins, contextMenu doesn’t need to bind itself to triggering objects. This allows injecting and removing triggers without having to re-initialize or update contextMenu.

contextMenu can provide a simple list of clickable commands, or offer an in-menu form. This makes very simple attribute modification possible. See the input example.

Once a menu is registered, it cannot be altered. That means no commands can be added or removed from the menu. This allows contextMenu to keep a single definition in memory, which enables it to work with hundreds of trigger objects. contextMenu knows the two callbacks show and hide which can be used to update the state of commands within the menu. This allows en/disabling commands, changing icons or updating the values of contained elements.

As of version 1.5 context menus can be created dynamically. That means the described behavior (once created, cannot be altered) still applies — but can be circumvented. Menus can be created on demand and they can be different depending on the triggering element.

Getting started

If you use NPM, install the jquery-contextmenu and include it in your build process.

If you just want to load the library into your website you can either donwload the contents of the dist folder or use cdnjs.com.

    Download contents of the dist folder of this library to you project site, for example to scripts/contextmenu

Features

  • trigger contextMenu with right-click, left-click, hover or own custom trigger events
  • delegated event handling removing the need for re-initialization when trigger objects are added / removed
  • dynamic on-demand menu creation
  • optional icons for commands
  • input elements (text, textarea, checkbox, radio, select) within the menu
  • custom html elements (command free)
  • show/hide callbacks to update the state of commands
  • small memory footprint even with hundreds of trigger objects
  • adjust position of menu to fit in viewport
  • enable / disable commands
  • nested sub-menus
  • full keyboard interaction
  • HTML5 support
  • CSS is for styling, javascript is not.

Authors

  • Björn Brala (SWIS)
  • Rodney Rehm
  • Christian Baartse (single callback per menu)

  • Addy Osmani (compatibility with native context menu in Firefox 8)

License

$.contextMenu is published under the MIT license.

Improved Current Field Highlighting in Forms

Easily manage projects with monday.com

As a matter of usability and aesthetics, it is a good thing to add some kind of visual feedback on web forms to indicate the currently active (or «focused«) field. Some browsers (Safari/Opera) have decided that is so important, that it take matters into it’s own hands and applies a glowy blue border around active form elements:

For non-Safari/Opera browsers, CSS offers some help through the :focus pseudo-classes. You can declare your own focus styles like this:

That’s a good start, but it has some unfortunate weaknesses:

  • It doesn’t work in some browsers (IE)
  • It only highlights the field itself, and does nothing for its corresponding label

We are going to tackle both of these weaknesses, improving our current field highlighting, using jQuery. Our form HTML will look just like any other form markup, except that each label/input group will be wrapped in a DIV:

Using jQuery, we can watch for an event where an input form comes into focus:

This is where we can do something cool that CSS alone can’t do, we can jump up to the parent element of that input element, and affect that. In our case, the parent element is that div wrapper we put around each label/input pair. What we would like to do is apply a unique class to that div when the input comes in focus.

With CSS, we can style up that unique class however we would like!

This works great, but if we just left this how it is, each field would have this class applied when it came into focus and it would never be removed. The whole point here is that this «current field highlighting» is only applied to the «current field». Fortunately, jQuery gives us a «blur» event, which is the opposite of focus. Let’s put in code for that:

We wouldn’t necessarily need to to specify «curFocus» on the removeClass function, since leaving that blank will remove all classes, but just in case we have multiple classes let’s leave it at that.

But wait! Your example has super-cool rounded corners on the active fields! Haha, it does! I’ll never tell! Er. Ehm. OK I will.

Each of the four corners is a little div that needs to go inside of each of our field wrapper divs. Since they are all exactly the same and need to be inside each wrapper div, let’s apply them through jQuery and save ourselves unnecessary repeated markup.

. there is something deeply satisfying about having semantic markup dynamically generated by JavaScript. From: Learning JQuery by Karl Swedberg & Jonathan Chaffer

I agree. We can make any HTML snippet into an jQuery object. Then we’ll use the «appendTo» function to slip it inside each div. Check it out:

In our CSS, we’ll style them up but leave their display values to «none» so they don’t show up until we want them.

We’ll use jQuery to toggle the visibility of all those divs on and off when we need them. Here is the final javascript:

Build better web applications with jQuery UI and jQuery plug-ins

Improving the look and feel of your web pages and applications

If you’re a traditional desktop application developer making the move to developing web applications, you probably have no trouble at all picking up HTML and CSS. But coming up with a good-looking visual design for your application can be a challenge. jQuery UI and various jQuery plug-ins can help a great deal in quickly putting together web applications with minimum time spent on GUI design.

JavaScript and jQuery

JavaScript has always been an inherent part of building any web page if you want the page to have any degree of dynamic content or interactivity. Without JavaScript, anything you want to do at run time to update your page would require a page refresh, which makes the interface unwieldy. In recent years, the importance of JavaScript has skyrocketed, as more is done with it and web applications become more powerful. JavaScript is even finding a place on the server side through technologies like Node.js, a server-side JavaScript engine. See Related topics for links to more information on Node.js and JavaScript in general, if you want to brush up.

jQuery is a library primarily used with client-side JavaScript code. It can vastly speed up the time needed to write UI code, providing shortcuts for many day-to-day actions. It also includes a flexible Ajax library that’s useful in creating dynamic interfaces and is already browser cross-compatible. See Related topics for links to more information, including a download link to both development and production copies of the library. The production code has been «minified,» meaning that all unnecessary white space and comments have been removed. The development copy is easier to read if you’re exploring the library’s internals, which is highly recommended. Before using any third-party library, it pays to inspect it to ensure that you understand and like both its quality and its functionality.

jQuery UI

jQuery UI is a set of UI widgets and CSS styles that come prepackaged to accomplish common tasks, such as setting up a custom window that prompts a user for information, through JavaScript and CSS, rather than as an old-style pop-up window. When you visit the jQuery UI website (see Related topics for a link), you’ll see there is no straight download option. Rather, the site presents a Build custom download link. Click on this link to assemble your own personalized package in which you can clear any components you know you aren’t going to use (such as the Accordion or Datepicker widgets) to reduce the library size.

When you download your jQuery UI package, you will notice that there are quite a few files. The development-bundle directory contains demonstrations and documentation, which are useful but not necessary for deployment in production. The files in the css and js directories do need to be deployed to your web application, however. The js directory includes both the jQuery and jQuery UI libraries; the css directory includes the CSS files and all imagery used to produce the widgets and styles.


Content themes/skins

The jQuery UI download you assemble from the main page also gives you the choice of using a particular theme. The jQuery UI page provides a tool to view the various themes available right on the site to save time, or you can use the website to build your own theme by specifying preferred colors. Doing so basically automatically assembles the necessary CSS settings for you, saving some time. For example, Figure 1 shows the Humanity theme (top) compared to the Start theme (bottom). Each theme includes a full set of matching icons.

Figure 1. The Humanity theme compared to the Start theme

Themes provide an easy way to get a full set of UI components that are nice-looking without spending a huge amount of time tinkering with CSS values or working in an image editor to produce static image elements. The examples in this article use the Humanity theme. However, using a skin does not mean that you can’t use your own CSS to accompany or override jQuery UI CSS. Listing 1 provides a basic HTML template that pulls in jQuery and jQuery UI, and includes a custom CSS file—app.css—that overrides the amount of padding displayed around text in buttons. It also includes app.js, which is where you place the application-specific JavaScript code.

Listing 1. A basic HTML template that loads jQuery UI

Interface improvement: The Dialog widget

Many web developers are fans of the alert or confirm functions for getting a message to (or from) a visitor. These messages are at best tacky, especially since they usually include a caption like, «The page at www.yoursite.com says. » which doesn’t really shine. Another common approach is to open a pop-up window. This method is losing ground because of problems caused by pop-up blockers, but it also has some degree of tackiness.

Using the jQuery UI Dialog functionality, you can show arbitrary content or a predefined

Figure 2. Comparing a plain alert window to a jQuery UI Dialog w >View image at full size

Using the Dialog widget is easiest when you have a separate

Listing 2. Displaying a jQuery UI Dialog w >

Interface improvement: Accordions and tabs

jQuery UI introduces a widget called Accordion , which allows you to have multiple sections of content where, generally, only one section is visible (by default). Clicking on a different section causes the visible section to be hidden with an animation and the new section to be shown. One advantage of an accordion is the ability to have virtually unlimited sections because additional sections are arranged vertically. This functionality provides a fluid and simple interface.

Many website visitors will be more familiar with a traditional tab-style layout. Here, the currently selected tab is visible, while other tabs are hidden, effectively limiting the number of tabs because you’re constrained by horizontal width. Figure 3 shows an Accordion widget (top) and a Tab widget (bottom).

Figure 3. jQuery Accordion and Tab w >View image at full size

Accordions are built using a containing

and an tag, followed by a subcontainer

Listing 3. Setting up an Accordion w >

Widget: Progressbar

jQuery UI also provides a progress bar widget, which can be useful for long-running operations. This widget is quite simple to use. Define a

Widget: Datepicker

A website that has strict requirements of entering a date in a particular format is annoying, particularly if its visitors are from a variety of countries (with their own date formats). It’s also dangerous to leave a free-form input field, which would require back-end validation and a means of notifying the visitor if the date entered could not be parsed. One easy solution is to use a date picker widget, like the one jQuery UI provides. It has extensive functionality, including the ability to limit date ranges, rename the days on the calendar (for internationalization), and other features. Using it is simple. Create a standard text input field, such as:

Цукерберг рекомендует:  30 отличных примеров сайтов кафе и ресторанов

And then turn it into a calendar using the following code:

The above code defines a maximum date of four months from the current date (5 March 2011, as it happens). The screen shot in Figure 4 reflects this.

Figure 4. The jQuery UI Datepicker widget

Building on jQuery animations

jQuery itself provides the ability to use animate to perform animations that transition any attribute from one value to another. This functionality is useful when defining your own animations. But always writing your own animations takes time. jQuery UI adds predefined animations, including the stand-alone effects Bounce, Highlight, Pulsate, Shake, Size, and Transfer, and the additional Show and Hide effects of Blind, Clip, Drop, Explode, Fade, Fold, Puff, Slide, and Scale. These effects are used in the usual jQuery show and hide functions; for example, $(‘#googleLogo’).show(‘slide’, <>, 1000); or $(‘#googleLogo’).hide(‘explode’, <>, 2000); .

jQuery plug-ins

Dozens of plug-ins have been developed for jQuery by third parties. These plug-ins are generally independent of jQuery UI and do not require it, although they do require jQuery itself. Let’s take a look at some of the particularly useful plug-ins.

Simple Tree

Ever since Microsoft® Windows® Explorer first made its appearance, tree-based menus have been popular. They are an easy way to navigate a complex set of resources, such as documentation. The jQuery Simple Tree plug-in makes it easy to implement tree menus, with any JavaScript action taken on click. If desired, the plug-in also makes it possible to drag and drop tree items, reorganizing them, also with a function fired on drop. (See Related topics for a download link; all the required components are also available in the sample code in the Download section.) Figure 5 shows the Simple Tree plug-in in use.


Figure 5. The Simple Tree jQuery plug-in

The tree content is defined with a single outer

    element, which has an ID identifying the tree and CSS settings styling it. Inside this, a root item is defined with an
    element. Inside this element, another
      element is placed, with tree items inside this (each one in its own
      element). Listing 4 illustrates this layout. When complete, the simpleTree function is called to activate tree functionality.
    Listing 4. Setting up a tree menu with Simple Tree

    Uploadify

    The Uploadify jQuery plug-in allows you to upload files to your site without having to do a POST operation to a new page and shows a progress indicator as files are being uploaded. The upload itself is handled with an Adobe® Flash® component. The tool allows a great deal of customization, including specifying what file extensions are allowed, size limits, and whether multiple files can be selected at once. When each file is finished uploading, the onComplete function is called; the onAllComplete function is called when all files are finished. The default upload handler that comes with Uploadify responds by echoing back the name of the uploaded file, but this upload handler can easily be customized to fit your needs (for example, posting a file into a forum or taking some other action). Listing 5 shows how to set up a file upload with Uploadify.

    Listing 5. Converting a standard file input to an Uploadify uploader

    It’s good practice to make sure that your upload directory is either inaccessible to the public or well-protected. Failure to do so can allow attackers to upload their own code and execute it on your server. In this example, files are written to tmp/ in the article example directory, so you simply forbid all visitors from accessing tmp/ with an .htaccess rule. It’s also important to ensure that the user your web server is running as (for example, www-data or apache) has write permission to the upload directory.

    Simpletip

    Any application, whether on a desktop or web-based, needs to be self-documenting for users to find it truly easy to use. Tooltips are one quick way to do this. After decades of tooltip use, most people are instinctively trained to let their mouse dwell over an item on screen if they are unsure pf what it is, waiting for some pop-up help. The Simpletip plug-in makes this easy to do. With Simpletip, you can create basic tooltips or use additional options to control placement. Effects for displaying and hiding the tooltips are supported, including custom animations as defined by a JavaScript function. Content for the tooltip can come from hard-coded text or from any other page content, such as a hidden

    Listing 6. Setting up a tooltips with Simpletip

    Conclusion

    Using the tools described in this article allows you to quickly create the visual components of your web application, leaving you free to focus on actual functionality in your site. You still need to think carefully about natural page flow and the usability of each page you write in an application, and jQuery UI and these plug-ins do not negate the need for careful page design. However, they do speed up development and make implementation easier. See the Download section for a complete web page that includes all the discussed sample code. You are welcome to use this as a starting point for your own projects.

    Downloadable resources

    • PDF of this content
    • Source code for examples (jQueryUIPluginsExamples.zip | 234KB)
    • JavaScript tutorial (w3schools): Start here if you’re new to JavaScript.
    • jQuery website: Find downloads and documentation for the jQuery library required by jQuery UI.
    • jQuery UI website: Build your custom download, including only the tools you need. The site also has great documentation and examples.
    • jQuery UI ThemeRoller: Build your own themes, and preview predefined themes. The site also makes a handy reference for a quick example of common components.
    • Node.js: Download this fascinating server-side JavaScript engine.
    • Simple Tree: Download this jQuery plug-in, which makes it less trivial to build tree-structure menus, optionally with drag-and-drop support.
    • Simpletip: Download this jQuery plug-in that simplifies adding tooltip-style pop-up windows to any element on your web page.
    • Uploadify: Handle file uploads in a clean manner, including progress display, removing the need for a POST and page reload.

    Comments

    Sign in or register to add and subscribe to comments.

    10 Smart Javascript Techniques to Improve Your UI

    Javascript can add a lot of special effects that can really improve the user’s experience. Here are 10 simple and clever Javascript techniques that add an extra dose of usability to any webpage.


    Javascript is typically used as an aesthetic language in web development. This means that web developers should almost always be using Javascript for one thing only: Improving the visitor’s experience. There are many clever and useful ways to improve a site from the user interface perspective. A developer can find nearly any snippet of Javascript to achieve what he or she wants to accomplish.

    Javascript is truly a powerful and easy language to learn. It can be used to perform simple, aesthetic functions like toggling an element. It can be used to power a dynamic email client, and even send data instantaneously. Javascript can be as simple or advanced as you want it to be.

    Javascript Frameworks

    A great place to find Javascript techniques that can improve your site’s functionality is by browsing Javascript frameworks and their plugins and documentation. Here are a few frameworks that have lots of resources, plugins, and communities behind them:

    Frameworks are a blessing to any developer or designer who wants to quickly add Javascript effects to their layouts, without having to make raw code. Many of the techniques that we use below will run on Javascript frameworks like JQuery or MooTools.

    Simple Javascript Techniques that Make Happy Users

    It’s important to note that many of these features aren’t big and obnoxious, but rather small and subtle. Too often developers get carried away when it comes to adding Javascript. These are small but very useful techniques that can be used by almost any developer. You’ll also note that most of these features deal with cleverly hiding and showing important information in non-traditional ways.

    1. jQuery Hover Sub Tag Cloud

    The jQuery hover sub tag cloud is an excellent example of a simple piece of Javascript that really adds a nice, subtle touch to tag clouds. As the user hovers over a specific tag and it has sub-tags associated with it, a pop-up box appears and shows the sub-tags. Simple, yet effective.

    2. Opacity Change

    Opacity Change is a little tutorial on how to use Scriptaculous to make an opacity change for an element.

    Opacity changes are great for many different reasons: showing hovered content, showing content that has been clicked on, and many other useful functions.

    3. Image Upload and Auto Crop

    Being able to crop photos after you upload them is a feature that more web applications could use. That’s why the %0A» title=»»>jQuery image upload and crop is such an under-used Javascript technique. Cropping images is a much-needed function when it comes to uploading images, and many web applications could benefit from adding this useful feature.

    Honestly, I think that nearly all image uploads could use a basic crop function. However, image cropping isn’t the easiest Javascript function to add to a form. It’s a somewhat involved process, using image libraries and Javascript. Using this script built on the jQuery framework can add a lot to the user’s experience without a bunch of extra code.

    4. Password Strength Meter

    As hackers become smarter and larger in numbers, it’s becoming more and more important for site users to pick strong, non-guessable passwords that contain a combination of letters (upper and lower case), numbers and special characters. However, this task is easier said than done. Users typically don’t read directions if they can help it.

    Visually showing password strength in registration forms is an excellent way to encourage users to make the passwords more challenging. While this is slowly becoming more common this simple technique is not used anywhere near as much as it should be.

    The title=»»>Password Strength Meter works off of prototype/scriptaculous and is a handy little script that shows the strength of the password with a colored meter in real-time. More sites need to implement this type of «safety» script to help users see the dangers of inputting weak passwords.

    5. Magic Zoom

    Magic Zoom is a highly-useful script for eCommerce sites, as well as other sites that have detailed images. Instead of having the user making an extra click to a much larger picture and use up bandwidth, Magic Zoom allows you to essentially look through a magnifying glass at each picture.

    Magic Zoom is a paid script, but well worth the $47 if you have an eCommerce store or any other site that has very detailed photographs. You can download the trial version below.

    6. JQuery Autotab

    Every single form on the Internet should have this feature. It might just be the perfectionist in me, but having multiple input forms that autotab to the next input automatically seems like it should be commonplace. It’s such a relief when filling out items like social security numbers when the input automatically tabs to the next input.

    The jQuery Autotab script is self-explanatory, and does what the name implies: adds autotabs to forms with jQuery.

    Sometimes it’s the small things in development that can really make a difference.

    7. Incredible Javascript Login Form

    While we typically don’t like to toot our own horn at NETTUTS, how can we talk about clever and useful Javascripts without bringing up Connor Zwick’s awesome tutorial on how to build a useful login form?

    The Javascript login form is an elegant combination of jQuery and a beautiful Photoshop layout to achieve the effect of being able to show a login form without having the box take up a bulk of the page. Digg is another great example of a site using Javascript to show and hide the login form.

    8. Context Highlighting Web Forms

    Forms are some of the hardest parts of web design. Make a form too long and you might scare away a potential user or customer. If a form’s design is unattractive, that might scare away a potential user as well. Any way that we can make our web forms more appealing to the eye will yield a higher sign-up conversion rate.


    The %0Ahttp://www.jankoatwarpspeed.com/post/2008/06/09/Building-a-better-web-forms-Context-highlighting-using-jQuery.aspx»>context highlighting web forms script is an excellent attribute to add to a signup form. It’s surprising that more forms don’t offer this functionality. Being able to quickly see the progress on a form can noticeably improve the user experience.

    9. Sliding Top Panel

    The %0A»>Sliding Top Panel script is a lot like the Incredible Javascript Login Form. Hiding/Showing important information is a key to beautiful, usable designs. Any time we can use Javascript to help keep unneeded information neatly packed away, we should be striving to do that.

    10. Social History

    Site promotion buttons and links can quickly clutter a site or blog’s layout. It seems that if you want to promote your blog posts and other content on sites like Digg and Delicious, you have to add a long list of buttons to your template so that you don’t exclude anyone’s favorite social bookmarking or news site.

    Social History comes in handy because it runs a test to see where the user has been recently, and loads images to those sites, and only those sites. Essentially, it’s only showing the visitor the buttons that they would want to see.

    How does SocialHistory.js know? By using a cute information leak introduced by CSS. The browser colors visited links differently than non-visited links. All you have to do is load up a whole bunch of URLs for the most popular social bookmarking sites in an iframe and see which of those links are purple and which are blue.

    • Subscribe to the NETTUTS RSS Feed for more daily web development tutorials and articles.

    Glen Stansberry is a web developer and blogger who’s struggled more times than he’d wish to admit with CSS. You can read more tips on web development at his blog Web Jackalope.

    Top 10: Best Tour (website gu >January 2nd 2020 84.2K

Have you ever visited a website or a web application, where you don’t have the most remote idea of how to start to using it because it’s your first time there and you just feel like Jhon Travolta?

If you’re a web developer, you may want to avoid this experience from your user creating some type of guide video, or a well explained documentation. However, some users won’t read the documentation or see a video because there is no time for that, they just want to use your app! For this kind of users (that’s the 90% of the people) you can use a dynamic in web tour while they learn to use your app. You can implement this feature by using a Guided Tour plugin in your app.

In this top, we are going to share with you 10 of the best guided tour plugins made in VanillaJS and jQuery.

10. Anno

Anno is a step-by-step guides plugin for powerful web apps. Anno.js is built to be extensible , the source is about 500 lines of literate coffeescript; you can read the annotated source in just a few minutes.

9. jQuery guide

jQuery Guide is a jQuery plugin made to create a «How to use guide» for your web app. It uses jQuery animations to provide a smooth and nice experience for the user while they learn how to use your app.

8. aSimpleTour

aSimpleTour is a jQuery plugin that will help you to make website tours easily.

7. Pageguide

Pageguide is a plugin to create interactive guide for web page elements using jQuery and CSS3. Instead of cluttering your interface with static help message, or explanatory text, add a pageguide and let your users learn about new features and functions. Pageguide comes with an example implementation (the files are in /example) which you can run locally with Grunt.

6. Bootstro.js

Bootstro show your users a guided tour of what is what on a page. Especially, for first-time users. Bootstro requires bootstrap & bootstrap popover, just add the class .bootstro to any element that you’d like to be highlighted, then include bootstro.js & bootstro.css and start using Javascript bootstro.start() .

Any element anywhere on the page can be intro’ed: popovers are automatically scrolled to so they always get focused. This plugins is easily customizable, Bootstro provides various public methods so you can control as you like bootstro.start() , bootstro.next() , bootstro.prev() .

5. Hopscotch

Hopscotch is a framework to make it easy for developers to add product tours to their pages. Hopscotch accepts a tour JSON object as input and provides an API for the developer to control rendering the tour display and managing the tour progress. Hopscotch supports internationalization via i18n object in tour config. The default language is English. If you need a tour in a language other than English, pass in translated text in your tour config. Text used for previous, next, skip, done and close buttons, as well as, tour step numbers can be translated.

A Hopscotch tour consists of a tour id, an array of tour steps defined as JSON objects, and a number of tour-specific options. The tour id is simply a unique identifier string. The simplest tour consists of just an id string and an array of one or more steps. This plugin has been created by the guys at LinkedIn.

4. Enjoyhint


A free web-tool that is created to guide users through a site or app in the simplest way. It gives an excellent way to create interactive tutorials with hints and tips, and embed them into your web apps, thus, enhancing their usability and value/effectiveness. EnjoyHint adds simple hints that prompt users to navigate a website or an app intuitively and easily. It comes along with instant auto-focus highlighting, as the user moves into a new field.

We demonstrated the use of the EnjoyHint web-tool in an issue tracker demo, created with Webix JavaScript UI library. The tool itself is based on Javascript, HTML5 and CSS. The tool works on the client-side and can be used with any server-side platform. The key features of EnjoyHint:

  • Fast web-tool setup
  • Simple initialization and configuration
  • Interactive hints — instant tips that provide a description to the user about the field they are in
  • Scenario of coherent actions — allows adding a sequence of hints for all necessary steps
  • Auto-focus highlighting — involves automatic focus on the area related to the hint and its instant hightlighting when the hint loads
  • Defining shape — defining the shape and margin of the highlighted area
  • Timeout settings — allows setting the delay before the moment, when the element is highlighted
  • Hint resume that restarts the display of hints from the step where it was stopped
  • Auto scrolling to the highlighted element at different animation speed.
  • Cross-browser support (Chrome, FireFox, IE10+, Safari)
  • Support for Android, iOS and Windows touch sceens (laptops and tablets)

3. Intro.js

Intro.js is a Step-by-step guide and feature introduction plugin for your website. When new users visit your website or product you should demonstrate your product features using a step-by-step guide. Even when you develop and add a new feature to your product, you should be able to represent them to your users using a user-friendly solution. Intro.js is developed to enable web and mobile developers to create a step-by-step introduction easily.

Intro.js has no dependencies, fast and small 10KB JavaScript and 2.5KB CSS, that’s all (minified, gzipped), besides it works on Google Chrome, Mozilla Firefox, Opera, Safari and even Internet Explorer.

2. Shepherd

Shepherd is a javascript library for guiding users through your app. It uses Tether, another open source library, to position all of its steps. Tether makes sure your steps never end up off screen or cropped by an overflow. Try resizing your browser to see what we mean.

Shepherd works in IE9+ and all modern browsers.

1. Bootstrap Tour

Bootstrap Tour is a plugin to make an animated, dynamic guided tour through your website using the famous Bootstrap Framework, however, if you don’t use Boostrap you can use the standalone version without problem. This plugins is the easiest way to show people how to use your website with Bootstrap Popovers.

Honorable mentions

Driver.js

Driver.js is a light-weight, no-dependency, vanilla JavaScript engine to drive the user’s focus across the page. Driver is compatible with all the major browsers and can be used for any of your overlay needs. Feature introductions, focus shifters, call-to-action are just a few examples.

If you know another awesome Tour plugin to show a website to your user or you’re developing your own tour plugin, don’t be shy and share it with the community in the comment box.

Carlos Delgado

Interested in programming since he was 14 years old, Carlos is the founder and author of most of the articles at Our Code World. Proud Self-taught programmer.

Better Understanding Forms in React

The goal for this post is to get a better understanding of how to build forms in React. But before we see some actual implementations let’s try to better understand why this topic might seem complex in a React context.


When talking about forms, we mostly have three areas in mind. Form Field Elements (representation), Form Values (state management) and Field Val >representation, state management and validation as independent areas.

Form State Management

Developers new to React seem to be surprised at how much manual work has to be done as compared to say jQuery to retrieve form values. In jQuery serializeArray returns all form values as an array of objects for example. (Thanks Artem Sapegin for the good comparison, also see https://twitter.com/iamsapegin/status/1010406113555120131 )

In React there are two ways to manage this state, via controlled and uncontrolled components. Let’s take a closer look at the former approach and consult the documentation.

In HTML, form elements such as ,

, and typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState() .

We can combine the two by making the React state be the “single source of truth”.

So any input element value that is controlled by React is described as a controlled component.

What does the actual implementation look like?

As seen in the above example, we can retrieve name and value from event.target and update the value for given name.

Now we also need to call onChange when the input value has changed, which can be achieved via the onChange prop on an form input element.

We should have a basic understanding of how we can manage form state in React. Check the following example that shows how React controls the complete form state.

Form Val >Another important aspect when building forms is val > data is val >display meaningful error messages in case any input values are incorrect.

Typically we want to ensure that a required input is not empty, that a name has a certain string length, that an e-mail has the correct format or that two dependent fields have the same values.

Let’s take a look at the following validation function.

We need a way to represent any errors for given data. The actual validation implementation can vary, but in this example we want to represent any errors via an object. Every form field value can either be false or contain an error message. Interestingly our validation function doesn’t know anything about the form. It’s a standalone function that accepts any data and returns an object.

What we need to do now, is enable to run the form data against the validation and display error messages when needed. Due to the fact that React renders the component as soon as the state has changed, we can run the validation every time we render. That also means there is no need to keep any errors in state.

Every time we render, we validate the current form state against the validation.

By separating the validation from the state management aspect, we can interchange how we want to validate our data, without being coupled to how state is managed. We can use a traditional validation library or write our own implementation.

Check the following example to see in more detail how this could be implemented.

Form Representation

Having covered the state management and the val >our components should not know anything about how are form state is managed nor how this state is validated. As long as we separate the representation from these two aspects, we can build components that receive props and display information according to these props.

We can also build components that take care of handling accessibility, ensuring certain standards are cons > Form component and we can interchange these components without having to change the actual Form component.

More advanced Concepts

In the previous section we built a basic implementation of a form library. But in reality this implementation will only get us this far. Real world requirements might include the need to val >Val > instant val >validate asynchronously, for example check if a given user name already exists etc.

Let’s try to see how we can solve these requirements while providing flexibility in user land.

How can we build a reusable Form component, without having to provide an extensive API for handling common scenarios?

What if we delegate any async validations to a parent component? By taking this approach we can define the async validation outside our Form component and only pass down the validation function and the validation result to our Form component.

Take a look at the following example. Our Form component passes any props through to our render functionality. This means we re-render every time an asynchronous validation result is available.

Sometimes we need to validate fields dynamically, as soon as the value has changed, but leave any untouched inputs unvalidated. To be able to display error messages on changed fields, we need to keep track of which fields have actually changed.

This can be achieved by extending our form state to also know about which fields have been changed. For example we could extend the state object with a changedFields property. The same approach can be taken to check if a form has submitted or not. Again, we can the state object with a submitted property, which we can use when rendering the actual form.

Checkout the following example that displays this approach in more detail.


Finally, we can prov > render and the initialState, but also how to update the data.

Now our form doesn’t even have to know about our state or how to actually update it, it only takes care of managing the state.

This approach is best understood, when applied via an example.

5 New jQuery Techniques for Creating a Better User Experience

WEBINAR:
On-Demand

Desktop-as-a-Service Designed for Any Cloud ? Nutanix Frame

Working in the fast-paced web development industry is always challenging. The key is to find the best-practices and techniques for your tasks and then use them to constantly improve the user experience.

As a web developer, you need to be always on the top of your game. With technologies evolving rapidly, constant learning is the key to success.

Web developers all around the world use JavaScript in their web apps. It is used to control different elements on the web page and make them function. JavaScript libraries, such as jQuery, are also popular and are used by many developers out there. In today’s article, we will be focusing on five new jQuery techniques for creating a better user experience.

1. Using the Latest Version of jQuery

jQuery is a complex framework and is updated regularly with new features and fixes. To build a better user experience, you should always use the latest version of jQuery. Apart from the user experience improvement, you will also get better website performance. The best thing about using the latest jQuery is that you only need to change the script tag and it will work!

jQuery can be included using CDN hosting that Google provides for JavaScript libraries. To include the latest version of the jQuery, you need to use the following script.

As you can see, we have included the full version in the 2nd script tag. It will automatically take the latest 3.3.x version once the developers release it.

2. Finding the Page Weight

Site load time is directly connected to the user experience, and that’s why you should take the proper time to optimize all aspects of your website.

This means that the higher the number of DOM elements on the page, the weightier the page is. As a web developer, you need to reduce the number of DOM elements without compromising the functionality of the website. You can use the following code to learn the total number of DOM.

You can run the command throughout the development period and focus on reducing the weight of the page at each step.

Most websites on the internet aim to reduce their page weight so that they can rank higher in search engine optimization (SEO).

3. Developing Sliding Forms

Forms play a crucial role in user experience as they are used for signups, contact information and so on. As a developer, you can use better techniques for forms that can help you better engage users. One of those techniques includes the use of sliding forms. Sliding forms can be used to give the users more than one form without feeling intrusive.

So, how do you do it?

To make it happen, you need to use the jQuery animate() method. First, you need to draw two forms on the page. For our example, it can be a registration form and a login form. When the page first loads, you need to load the registration form since the user is looking to register an account.

With different divs given to each form, you need to put their position relative to the outer div, which in this case can be the «page» div.

  1. Once the page loads, load the first form relative to the outer div.
  2. After the first form is filled in, then replace the form with the other form. To do so, you can use the animate() method.

4. Form Submission Without Page Refresh

Page refresh after a form submission may sound logical but can deter many users who want a seamless experience. That’s why as a developer, your job is to make the form submission without doing a page refresh. The good news is that you can do it using jQuery.

First, you need to build a simple HTML form. Once done, use a div tag that is connected with the form itself. Leave the method and tag attributes blank. We do that because we will be using jQuery to handle those aspects.

Now, you need to start adding jQuery. To do so, you need to create a simple JavaScript file and then reference the HTML in there. The format of the code should look like below.

You can then process others for input by writing more JavaScript.

However, the magic happens thanks to the jQuery AJAX function. Normally, when a form submission takes place, a PHP script will be triggered. With it, the data will be sent to the server but requires a page refresh.


With AJAX, the data will still be sent, but all of this will happen without the need for a page refresh. Let’s check out a sample AJAX code below.

This trick can be very useful and will surely improve the user experience.

5. Local Storage and jQuery

Local Storage can help you load your website faster. jQuery offers a local storage API that allows you to store data on the browser. To do so, you need to use the following line of code.

Conclusion

This leads us to the end of our new jQuery techniques that will help you create a better user experience. User’s experience should always be a top priority for a web developer, and we hope you found the article useful. Of course, more jQuery techniques let you control the user experience even further. For example, you can provide a text size slider, offer jQuery pagination, do a content slider, smoothen content scrolling and so on — all of this using jQuery.

So, which jQuery technique you are going to use in your project? Comment below and let us know. We are listening.

About the Author

Madan Pariyar is a blogger at WebPrecious and a digital marketing strategist helping clients to resolve their website woes. When not busy with all these things, you may find Madan occasionally watching movies, traveling and spending time with family.

IT Solutions Builder TOP IT RESOURCES TO MOVE YOUR BUSINESS FORWARD

jQuery contextMenu

Contextmenu plugin & polyfill

The contextMenu Plugin was designed for web applications in need of menus on a possibly large amount of objects. Unlike implementations as a beautiful site’s or trendskitchens’ this contextMenu treats the menu as the primary object. That means, that a single menu is defined that can be used by multiple objects. Unlike the mentioned plugins, contextMenu doesn’t need to bind itself to triggering objects. This allows injecting and removing triggers without having to re-initialize or update contextMenu.

contextMenu can provide a simple list of clickable commands, or offer an in-menu form. This makes very simple attribute modification possible. See the input example.

Once a menu is registered, it cannot be altered. That means no commands can be added or removed from the menu. This allows contextMenu to keep a single definition in memory, which enables it to work with hundreds of trigger objects. contextMenu knows the two callbacks show and hide which can be used to update the state of commands within the menu. This allows en/disabling commands, changing icons or updating the values of contained elements.

As of version 1.5 context menus can be created dynamically. That means the described behavior (once created, cannot be altered) still applies — but can be circumvented. Menus can be created on demand and they can be different depending on the triggering element.

Getting started

If you use NPM, install the jquery-contextmenu and include it in your build process.

If you just want to load the library into your website you can either donwload the contents of the dist folder or use cdnjs.com.

    Download contents of the dist folder of this library to you project site, for example to scripts/contextmenu

Features

  • trigger contextMenu with right-click, left-click, hover or own custom trigger events
  • delegated event handling removing the need for re-initialization when trigger objects are added / removed
  • dynamic on-demand menu creation
  • optional icons for commands
  • input elements (text, textarea, checkbox, radio, select) within the menu
  • custom html elements (command free)
  • show/hide callbacks to update the state of commands
  • small memory footprint even with hundreds of trigger objects
  • adjust position of menu to fit in viewport
  • enable / disable commands
  • nested sub-menus
  • full keyboard interaction
  • HTML5 support
  • CSS is for styling, javascript is not.

Authors

  • Björn Brala (SWIS)
  • Rodney Rehm
  • Christian Baartse (single callback per menu)
  • Addy Osmani (compatibility with native context menu in Firefox 8)

License

$.contextMenu is published under the MIT license.

Simple jQuery Based Syntax Highlighter — Highlight

File Size: 31.5 KB
Views Total:
Last Update: 06/01/2020 13:42:00 UTC
Publish Date: 07/11/2014 03:20:06 UTC
Official Website: Go to website
License: MIT

Highlight is a simple syntax highlighter built in jQuery that makes your Html, CSS, PHP, Javascript and SQL snippets look pretty and clean.

See also:

How to use it:

1. Include the core style in the head section of your web page.

2. Include the jQuery library and the jQuery highlight plugin at the end of your web page.

3. Create a code snippet with pre tag. Use data-language attribute to specify the code language. Available language: js, sql, html, css and php.

4. Call highlight() JavaScript method with default settings.

5. Available settings with defaults.

Change log:

  • Incorrect comment parsing in PHP

This awesome jQuery plugin is developed by ematsakov. For more Advanced Usages, please check the demo page or visit the official website.

5 New jQuery Techniques for Creating a Better User Experience

WEBINAR:
On-Demand

Desktop-as-a-Service Designed for Any Cloud ? Nutanix Frame

Working in the fast-paced web development industry is always challenging. The key is to find the best-practices and techniques for your tasks and then use them to constantly improve the user experience.

As a web developer, you need to be always on the top of your game. With technologies evolving rapidly, constant learning is the key to success.

Web developers all around the world use JavaScript in their web apps. It is used to control different elements on the web page and make them function. JavaScript libraries, such as jQuery, are also popular and are used by many developers out there. In today’s article, we will be focusing on five new jQuery techniques for creating a better user experience.

1. Using the Latest Version of jQuery

jQuery is a complex framework and is updated regularly with new features and fixes. To build a better user experience, you should always use the latest version of jQuery. Apart from the user experience improvement, you will also get better website performance. The best thing about using the latest jQuery is that you only need to change the script tag and it will work!

jQuery can be included using CDN hosting that Google provides for JavaScript libraries. To include the latest version of the jQuery, you need to use the following script.

As you can see, we have included the full version in the 2nd script tag. It will automatically take the latest 3.3.x version once the developers release it.

2. Finding the Page Weight

Site load time is directly connected to the user experience, and that’s why you should take the proper time to optimize all aspects of your website.

This means that the higher the number of DOM elements on the page, the weightier the page is. As a web developer, you need to reduce the number of DOM elements without compromising the functionality of the website. You can use the following code to learn the total number of DOM.

You can run the command throughout the development period and focus on reducing the weight of the page at each step.

Most websites on the internet aim to reduce their page weight so that they can rank higher in search engine optimization (SEO).

3. Developing Sliding Forms

Forms play a crucial role in user experience as they are used for signups, contact information and so on. As a developer, you can use better techniques for forms that can help you better engage users. One of those techniques includes the use of sliding forms. Sliding forms can be used to give the users more than one form without feeling intrusive.

So, how do you do it?

To make it happen, you need to use the jQuery animate() method. First, you need to draw two forms on the page. For our example, it can be a registration form and a login form. When the page first loads, you need to load the registration form since the user is looking to register an account.

With different divs given to each form, you need to put their position relative to the outer div, which in this case can be the «page» div.

  1. Once the page loads, load the first form relative to the outer div.
  2. After the first form is filled in, then replace the form with the other form. To do so, you can use the animate() method.

4. Form Submission Without Page Refresh

Page refresh after a form submission may sound logical but can deter many users who want a seamless experience. That’s why as a developer, your job is to make the form submission without doing a page refresh. The good news is that you can do it using jQuery.

First, you need to build a simple HTML form. Once done, use a div tag that is connected with the form itself. Leave the method and tag attributes blank. We do that because we will be using jQuery to handle those aspects.

Now, you need to start adding jQuery. To do so, you need to create a simple JavaScript file and then reference the HTML in there. The format of the code should look like below.

You can then process others for input by writing more JavaScript.

However, the magic happens thanks to the jQuery AJAX function. Normally, when a form submission takes place, a PHP script will be triggered. With it, the data will be sent to the server but requires a page refresh.

With AJAX, the data will still be sent, but all of this will happen without the need for a page refresh. Let’s check out a sample AJAX code below.

This trick can be very useful and will surely improve the user experience.

5. Local Storage and jQuery

Local Storage can help you load your website faster. jQuery offers a local storage API that allows you to store data on the browser. To do so, you need to use the following line of code.

Conclusion

This leads us to the end of our new jQuery techniques that will help you create a better user experience. User’s experience should always be a top priority for a web developer, and we hope you found the article useful. Of course, more jQuery techniques let you control the user experience even further. For example, you can provide a text size slider, offer jQuery pagination, do a content slider, smoothen content scrolling and so on — all of this using jQuery.

So, which jQuery technique you are going to use in your project? Comment below and let us know. We are listening.

About the Author

Madan Pariyar is a blogger at WebPrecious and a digital marketing strategist helping clients to resolve their website woes. When not busy with all these things, you may find Madan occasionally watching movies, traveling and spending time with family.

IT Solutions Builder TOP IT RESOURCES TO MOVE YOUR BUSINESS FORWARD

Цукерберг рекомендует:  Вакансии Чек Май Кукис
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих