Creative Art

How to remove a specific item from an array

noreply@blogger.com (Unknown) — Sat, 24 Oct 2020 03:38:00 +0000

How to remove a specific item 9 from an array arr?

There are different methods which we can use to remove elements from an arrays

const arr = [1, 2, 7, 9, 19]; const index = arr.indexOf(9); if (index > -1) { arr.splice(index, 1); }

If we want new array without specific value

const result = arr.filter((item) =>{

return item !== 9;

});

Es6 how to get matching objects array

noreply@blogger.com (Unknown) — Sat, 24 Oct 2020 03:24:00 +0000

Requirement is in array find objects which value is 1

const arr = [ {id:1, value:1}, {id:2, value:2}, {id:3, value:1}, {id:4, value:1} ];

In result we are expecting

// [{id:1, value:1}, {id:4, value:1} ]

const result = arr.filter((item) => {

  return item.value === 1;
});

How to remove duplicate values from an array

noreply@blogger.com (Unknown) — Sat, 24 Oct 2020 03:03:00 +0000

Set object can be used to remove duplicate values from an array.

const arr = [1,4,7,8,1,9,4];

const result = [...new Set(arr)];

const result = are.reduce((x, y) => x.includes(y) ? x : [...x, y], []);

const result = arr.filter((item, index) => { return arr.indexOf(item) === index; });

How to remove undefined values from an array in es6

noreply@blogger.com (Unknown) — Fri, 23 Oct 2020 02:39:00 +0000

Let assume we have an array

const arr = [4, 1, undefined, 2, undefined, 9];

And in result we are expecting

[4, 1, 2, 9]

To solve this problem

Const result = arr.filter((item) => {

return item !== undefined;

});

Console.log(result);

Website design examples

noreply@blogger.com (Unknown) — Tue, 20 Oct 2020 04:50:00 +0000

jQuery/CSS multi level dropdown menu

noreply@blogger.com (Unknown) — Mon, 26 Mar 2012 14:41:00 +0000

Drop-down menus and menu bars have been heavily used in many larger sites to make it easier for visitors to find what they are looking for. Here you’ll find jquery and CSS based drop-down .

Simple jQuery Dropdowns

Very stripped down code and minimal styling and has all the functionality typically needed and it works in all major browsers even in IE6.

Superfish on ‘roids

Superfish is one of the most popular Drop-Down menus available. Superfish on ‘roids takes it to the next level with jQuery!

Smooth Navigational Menu

Multi-level CSS and jQuery for smooth navigation.

Mega Drop Down Menus

Create a Mega Drop-down menu perfect for eCommerce websites.

Vimeo-like top navigation

Create a Vimeo-like top naviation. It offers you different search options that you can choose and narrow your search.

Animated Drop Down Menu with jQuery

Drop down menus are a really convent 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.

Sliding Jquery Menu Tutorial

This tutorial will show you how to create a sliding menu button using jquery. You can see the effect in action over on the PSDtuts webpage in the top right hand corner.

Twitter style dropdown with jQuery

This tutorial will explain how it works step by step and it’s good for learning jQuery how to do the toggle and tool tips. Enjoy it!

Dynamic Drive Navigational Menu

Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair. The menu’s contents can either be from direct markup on the page, or an external file and fetched via Ajax instead.

jQuery.mb.Menu

This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right-click) in an intuitive way!

jQuery and CSS Example

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.

jQuery iPod-style Drilldown Menu

We created an iPod-style drilldown menu to help users traverse hierarchical data quickly and with control. It’s especially helpful when organizing large data structures that don’t translate well into traditional dropdown or fly-out menus.

smooth animated menu with JQuery

A very nice tutorial to learn to create a very nice and artistic effect for your websites.

Best jQuery Lightbox Scripts

noreply@blogger.com (Unknown) — Mon, 09 Jan 2012 18:23:00 +0000

Light box is nice tool to displays images using modal box. jQuery is very popular for modal dialogs because of its very easy implementation and it make website more friendly and interactive.
In this article I collected the best and Efficient Lightbox based on the jQuery Javascript library.

jQuery lightbox

A jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup.

fancybox

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.

lightbox2

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

PrettyPhoto

prettyPhoto is a jQuery based lightbox clone. Not only does it support images, it also add support for videos, flash, YouTube, iFrames. It’s a full blown media lightbox. The setup is easy and quick, plus the script is compatible in every major browser.

Facebox

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It’s simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.

jquery nivo zoom

noreply@blogger.com (Unknown) — Mon, 09 Jan 2012 17:52:00 +0000

Nivo Slider is the world’s most popular jQuery image slider, and it’s completely free!
Nivo Zoom is popular jQuery plugin that allows you to zoom the image. This plugin comes with 5 different zoom types, Optional overlay support, Supports HTML captions, Simple clean & valid markup, Loads of settings to tweak and others. The plugin is lightweight (4kb compressed), focused only on images and comes with a bunch of settings. Nivo Zoom, by default, doesn’t use overlays but can display the bigger image with an overlay where the opacity and colors of it can be customized.

Features

Specify position of larger image relative to the thumbnail
Add topLeft, topRight, bottomLeft, bottomRight, or center class to the image to specify relative position
Optional overlay support
Supports HTML captions
Simple clean & valid markup
Customizable settings
Lightweight: Packed version only weighs 4kb

For more details Visit

jquery tab panel

noreply@blogger.com (Unknown) — Mon, 09 Jan 2012 17:51:00 +0000

Tabbed panels are very useful and one of the most popular way to place a lot of information on a page without losing usability. Here is listed popular JQuery Tabs tutorials and plugins which you can use in your project.

Tabs with Next/Previous :
View Live Demo
Smooth tabbed menu in jQuery :Simple plug-in that allows for a large number of tabs to fit into a small space
View Live Demo
Slick Tabbed: This script allows you to create a slick tabbed content area using CSS and jQuery.
View Live Demo
Simple Tabs w/ CSS & jQuery: This jQuery plugin supplies an easy way to create tabbed menu with our lovely jQuery library
View Live Demo
AJAX Tabs: This tabbed panel allows you to squeeze much more content in a seemingly limited space and provide a structured way of accessing it.
View Live Demo

jquery iframe auto height

noreply@blogger.com (Unknown) — Mon, 09 Jan 2012 17:47:00 +0000

A simple solution for automatically resize iframe height depending on content.
In page call jQuery library and in head script part past below script.

$(function () {

            $('#myIframe').load(function () {
  
                this.style.height =
  
                 this.contentWindow.document.body.offsetHeight + 'px';

            });

});

jcarousel tutorial

noreply@blogger.com (Unknown) — Mon, 09 Jan 2012 17:46:00 +0000

There are lots of jQuery plugins for slider, but jCarousel is a best jQuery plugin for controlling a list of items in horizontal or vertical order. It works with all major browsers. To use the jCarousel component, include the jQuery library, the jCarousel source file and a jCarousel skin stylesheet file inside the tag of your HTML document.

jquery dotdotdot

noreply@blogger.com (Unknown) — Mon, 09 Jan 2012 17:45:00 +0000

jQuery.dotdotdot is an advanced cross-browser ellipsis for multiple line content. It adds an ellipsis after cut off text to indicate that there is more text than currently visible. Not only on a single line of content, but also particularly on multiple lines of content.

To use add jquery library and script file in header and on document ready call function.

For more details Visit

How To Set A Default Landing Tab For Your Facebook Page

noreply@blogger.com (Unknown) — Mon, 09 Jan 2012 17:42:00 +0000

Steps:

Open the newly created page and click on edit page link.
On edit page select “Manage Permission” tab from left menu. It will reload the right hand side of the page, now from right hand panel search for select drop down “Default Landing Tab” label and select the appropriate tab from select drop down, this tab will be loaded in place of default wall when visitor is not a fan or not logged in.

jqPagination jQuery Pagination Plugin

noreply@blogger.com (Unknown) — Fri, 06 Jan 2012 18:20:00 +0000

jqPagination is a effective jQuery plugin for quickly creating a pagination interface and functionality for your web site or application..
The plugin is controlled with the special class names and attributes of HTML elements (for defining the prev, next buttons or setting the max pages).
It has a pretty unique, simple-yet-functional feature which is the ability to clicking on the pagination item and setting the page to be displayed manually.
jqPagination has a single callback which is ran when a pagination request is made and returns the page number to be displayed.
Its design can be customized easily and the plugin degrades nicely when JavaScript is disabled.

Demo

Best Mobile Frameworks for web development

noreply@blogger.com (Unknown) — Fri, 06 Jan 2012 18:15:00 +0000

jQTouch

Zepto/jQuery is a Open Source plugin with native animations, automatic navigation, and themes for mobile WebKit browsers like iPhone, Android, iPod Touch, and other devices.
Demo

Sencha Touch

Sencha Touch is HTML5-based framework for developing mobile web apps aimed at next generation, touch enabled, devices. It’s currently compatible with Apple iOS 3+, Android 2.1+, and BlackBerry 6+ devices.
Demo

Zepto.js

Zepto.js is a minimalist JavaScript framework for modern browsers, with a jQuery-compatible syntax.
Demo

JQuery Mobile Framework

A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.
Demo

jQuery Geo location plugin for map relation actions

noreply@blogger.com (Unknown) — Fri, 06 Jan 2012 18:02:00 +0000

jQuery Geo is an open-source popular framework for map/geolocation related actions.
The plugin uses the open source map servers like Open Street Map, WMS and Esri ArcGIS for pulling the map data. The maps created are mobile-friendly and have lots of built-in methods for customization.
jQuery Geo is very well-documented and supported with a bunch of examples.

show mapping data and handle direct user interaction with the map
use geospatial functions like calculating bounding boxes, measuring the distance between geometries, etc.

Demo

jQuery News Ticker

noreply@blogger.com (Unknown) — Fri, 06 Jan 2012 17:45:00 +0000

jQuery News Ticker

Many websites today including news ticker to display your latest headlines or to show other features in a tiny space. jQuery News Ticker is useful plugin, inspired from the BBC news ticker, that simplifies creating them. News Ticker enables users to show unordered lists, RSS feed, HTML file, or content in a simple yet slick customizable interface.It support for loading content via an RSS feed.
Demo Download

Best jQuery Chart Libraries

noreply@blogger.com (Unknown) — Thu, 05 Jan 2012 19:11:00 +0000

In this article we listed best chart libraries that you can use in your projects. Most of them are free for personal and commercial use.

Jquery GraphUp Plugin

“GraphUp is a very flexible and lightweight jQuery (v1.4+) plugin to spice up your data tables. It visualizes the values using color, bar charts and bubbles.” and only 4kB.
Demo.

jQuery Highcharts

Highcharts is a really impressive jQuery Chart Library. In a few words Highcharts is compatible with most Browsers and even the iPhone; numerous chart types are supported; it is a dynamic plugin because you can add, remove and modify series, axes or points at any time after chart creation and you can load data from external files; tooltip labels are also supported which is great for detailed information in a point of a chart; zooming and last but not least all text labels can be rotated in any angle.
Demo

jqPlot

jqPlot is a plotting and charting plugin for the jQuery. jqPlot produces beautiful line, bar and pie charts with many features you can even add shadows and interact per drag&drop in the charts! It even automatically computes trend lines. We could compare it to highcharts in terms of features and functionality.
Demo

Flot

Flot is as the authors call it an “Attractive Javascript plotting for jQuery” which is true. The charts look simple and nice, it is easy to create charts and all settings are optional. Some key features of plot is turning series on/off, zooming, interacting with the data points and it integrates a simple tooltip feature.
Demo

jQuery Google Charting

The current version is 1.4.1 and is available under the GPL or MIT licenses. Whilst the API itself is pretty simple to use (the format to generate graphs is to form a complex url with multiple query string parameters), the plugin goes one step further and actually forms that complex url for you, by allowing you to set the parameters you want with simple jQuery calls:

nivo zoom tutorial

noreply@blogger.com (Unknown) — Thu, 05 Jan 2012 18:26:00 +0000

Features

Specify position of larger image relative to the thumbnail
Add topLeft, topRight, bottomLeft, bottomRight, or center class to the image to specify relative position
Optional overlay support
Supports HTML captions
Simple clean & valid markup
Customizable settings
Lightweight: Packed version only weighs 4kb

For more details Visit: http://nivozoom.dev7studios.com/

steps to create facebook page

noreply@blogger.com (Unknown) — Thu, 05 Jan 2012 18:23:00 +0000

Quick easy steps to create facebook page tab are as follows.

Step 1: Login to facebook account.
Step 2: Open url https://developers.facebook.com/apps in browser.
Step 3: In right hand section, find “create new app” button and click it.
Add display name, namespace is optional and select agree checkbox.
Step 4: Once its saved it will load next page where you can find settings in the “Basic” section of your apps in the Developer App under ‘Select how your app integrates with Facebook’. Click ‘Page Tab’ to expand the Page Tab settings, and the Page Tab fields will appear, here you have to add the tab name, and application url & Secure Page Tab URL e.g. http://phptechi.com/. secure url is mandatory now. Click on save changes. On same page you can find “App ID:” at the top copy it somewhere in notepad/ text editor.
Step 5: Now open url in another tab http://www.facebook.com/pages/ and click on create page button and create page.
Step 6: Adding an App/ page tab to a Page.
Open new tab and pest following url into that. It will show “chose facebook page” dropdown. now select the newly created page. Dont forget to replace
“YOUR_APP_ID” with application id copied in step 4 and “YOUR_URL” with “application url” used in step 4.
Format : http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL
Sample URL : http://www.facebook.com/dialog/pagetab?app_id=214247878655791&next=http://172.20.150.166/sampalApp/
If you follow all the steps correctly it should add page tab in newly newly created page. Just refresh/ reload page thats all !!.

Best jQuery grid plugins

noreply@blogger.com (Unknown) — Thu, 05 Jan 2012 18:20:00 +0000

There are so many jQuery grid plugins. Each having different features and capabilities. Below I listed the best jQuery grid plugins which you can use in your projects

Flexigrid: http://flexigrid.info/ : Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.
jQuery Grid: http://www.trirand.com/blog/ :
jqGridView: http://plugins.jquery.com/project/jqGridView jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web.
Ingrid: http://reconstrukt.com/ingrid/ :Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.
DataTable : http://www.datatables.net/index : DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.
Slickgrid : http://code.google.com/p/slickgrid/
TableSorter: http://tablesorter.com/:tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.
dhtmlxGrid: http://www.dhtmlx.com/docs/products/dhtmlxGrid/
Sigma Grid: http://www.sigmawidgets.com/products/sigma_grid2/

jQuery feed menus tutorial

noreply@blogger.com (Unknown) — Thu, 05 Jan 2012 18:12:00 +0000

There are many way to get or promote your site become popular. One of the popular method is by submiting your site to rss feed. When feeds became popular, it worked to have one icon on your site to point your readers in one location.
Demo

jQuery UI 1.8 features

noreply@blogger.com (Unknown) — Thu, 05 Jan 2012 18:12:00 +0000

jQuery UI 1.8 just released. The biggest changes are, of course, the new widgets themselves.

Core – the core of jQuery UI, required for all interactions and widgets
Widget – the widget factory, base for all widgets
Mouse – the mouse widget, a base class for all interactions and widgets with heavy mouse interaction
Position – a utility plugin for positioning elements relative to other elements

The Position Utility

With this, you can position any element relative to any other, or even relative to the parent window or your mouse.

The Button Widget

With the button widget you can create a fully theme-able button from any imaginable element you want to use as a native button.Traditionally buttons had an input type of submit, reset, image or button, but progressively developers are creating from elements such as anchor tags. The Button widget makes this an attractive alternative for developers who want new styles to their website.

The Autocomplete Widget

This is maybe the most requested feature, which made it into the latest release of jQuery UI – The Autocomplete. The Autocomplete widget makes any text input field pop up a menu to help the user in completing their search or entry, provide suggestions and improvements to search criteria they’re entering.

jQuery UI 1.8 you can download from:

Minimized version: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js
Full Version with comments: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js

jquery 3d carousel

noreply@blogger.com (Unknown) — Thu, 05 Jan 2012 18:10:00 +0000

3D Carousel is a powerful jQuery plugin enabling you to create 3D carousel with great features. It can be fully customizable controlled by mouse. jQueryCarousel uses JSON as source data provider.
Demo

jquery jcarousel tutorial

noreply@blogger.com (Unknown) — Thu, 05 Jan 2012 18:09:00 +0000

Demo