tag:blogger.com,1999:blog-43815740720311623082024-02-07T21:08:40.661+05:30Creative ArtCreative Art is a web log where you find blog tips web design tips graphics art logo designs web layout free web tools and many more..Unknownnoreply@blogger.comBlogger99125tag:blogger.com,1999:blog-4381574072031162308.post-33816218842257867472020-10-24T09:08:00.005+05:302020-10-24T09:13:37.356+05:30How to remove a specific item from an array<p>How to remove a specific item 9 from an array arr?</p>
There are different methods which we can use to remove elements from an arrays<div><br /></div><div><br /></div>
const arr = [1, 2, 7, 9, 19];
const index = arr.indexOf(9);
if (index > -1) {
arr.splice(index, 1);
}<div><br /></div><div>If we want new array without specific value</div>
const result =
arr.filter((item) =>{ <div> return item !== 9;</div><div>});</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4381574072031162308.post-17476382176239446062020-10-24T08:54:00.006+05:302020-10-24T08:54:51.060+05:30Es6 how to get matching objects array<p>Requirement is in array find objects which value is 1</p>
const arr = [
{id:1, value:1}, {id:2, value:2}, {id:3, value:1}, {id:4, value:1}
];
<div><br /></div><div>In result we are expecting </div><div>// [{id:1, value:1}, {id:4, value:1} ]</div><div><span class="hljs-keyword" style="-webkit-text-size-adjust: 100%; border: 0px; box-sizing: inherit; color: var(--highlight-keyword); font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-caps: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><br /></span></div><div><span style="-webkit-text-size-adjust: 100%; color: var(--highlight-color); font-family: inherit; font-style: inherit; font-variant-caps: inherit;">const</span><span style="-webkit-text-size-adjust: 100%; color: var(--highlight-color); font-family: inherit; font-size: 13px; font-style: inherit; font-variant-caps: inherit;"> result = arr.filter((item) </span><span class="hljs-function" style="-webkit-text-size-adjust: 100%; border: 0px; box-sizing: inherit; color: var(--highlight-color); font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-caps: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">=></span><span style="-webkit-text-size-adjust: 100%; color: var(--highlight-color); font-family: inherit; font-size: 13px; font-style: inherit; font-variant-caps: inherit;"> {</span></div><div><pre class="lang-js s-code-block hljs javascript" style="-webkit-text-size-adjust: 100%; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 0px; box-sizing: inherit; color: var(--highlight-color); font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; line-height: 1.30769231; margin: 0px 0px calc(var(--s-prose-spacing) + 0.4em); max-height: 300px; overflow: auto; padding: 12px; vertical-align: baseline; word-wrap: normal;"><code style="border: 0px; box-sizing: inherit; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant-caps: inherit; line-height: inherit; margin: 0px; max-height: 300px; padding: 0px; vertical-align: baseline;"> <span class="hljs-keyword" style="border: 0px; box-sizing: inherit; color: var(--highlight-keyword); font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant-caps: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">return</span> item.value === 1;
});</code></pre></div><div><br /></div><div><br /></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4381574072031162308.post-36448316752339508942020-10-24T08:33:00.001+05:302020-10-24T08:33:07.837+05:30How to remove duplicate values from an array<span color="rgba(0, 0, 0, 0.87)" face="Roboto, HelveticaNeue, Arial, sans-serif" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: white; caret-color: rgba(0, 0, 0, 0.87); font-size: 14px;">Set object</span> can be used to remove duplicate values from an array.
<div><br /></div><div>const arr = [1,4,7,8,1,9,4];</div>
const result = [...new Set(arr)];<div><br /></div><div>Or</div><div><br /></div>
const result = are.reduce((x, y) => x.includes(y) ? x : [...x, y], []);<div><br /></div><div>Or</div><div><br /></div>
const result = arr.filter((item, index) => {
return arr.indexOf(item) === index;
});Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4381574072031162308.post-63493863260811696702020-10-23T08:09:00.002+05:302020-10-24T04:25:06.483+05:30How to remove undefined values from an array in es6<p> Let assume we have an array </p><p>const arr = [4, 1, undefined, 2, undefined, 9];</p><p>And in result we are expecting </p><p>[4, 1, 2, 9]</p><p><br /></p><p>To solve this problem </p><p><br /></p><p>Const result = arr.filter((item) => {</p><p> return item !== undefined; </p><p>});</p><p>Console.log(result);</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFHtVI0faOctWqUOx4rSYRbZNg3TNBGrab_YlrWyueye9hMoK2LExRNigdbq0Zg2SqrrEgiXtY0PaBiMVTCAaDQe2fZoyRW_2nfb2k6vnTfXPPf4IXcTs_-gAKuTAVZXrdYJGJQ2cXVjO5/s3531/F5E23A7A-764F-4350-9642-1E262F9E1556.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="717" data-original-width="3531" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFHtVI0faOctWqUOx4rSYRbZNg3TNBGrab_YlrWyueye9hMoK2LExRNigdbq0Zg2SqrrEgiXtY0PaBiMVTCAaDQe2fZoyRW_2nfb2k6vnTfXPPf4IXcTs_-gAKuTAVZXrdYJGJQ2cXVjO5/s320/F5E23A7A-764F-4350-9642-1E262F9E1556.jpeg" width="320" /></a></div><br /><p></p><p><br /></p><p><br /></p><p><br /></p>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4381574072031162308.post-11295293919225684742020-10-20T10:20:00.003+05:302020-10-20T10:20:15.649+05:30Website design examples<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhstRz4NUR4IbuHCYew8lhyzbkUih2yMP4q85WvGRIIT_r3MCYcwwxs-IwJaF0HIwaftKrI9ds9O-CaR4NGbM4xCsaOXCr6I8HUGmkTgbgK0GL4W9uz-jlrhG2xCg_e_PmB3h9L1YyvGBOf/s1574/option2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1574" data-original-width="1300" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhstRz4NUR4IbuHCYew8lhyzbkUih2yMP4q85WvGRIIT_r3MCYcwwxs-IwJaF0HIwaftKrI9ds9O-CaR4NGbM4xCsaOXCr6I8HUGmkTgbgK0GL4W9uz-jlrhG2xCg_e_PmB3h9L1YyvGBOf/s320/option2.jpg" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMSaU-YBEAIR7tg3CwAoJoLyBh0QyyPZrmLRyj4kqOkhfoahQcC_22_PqfKeO15Cx70Br2UZpby3RooLW76rbvh3nZMAUd5iPiNhsJoKOFNvLWtkLf2cUKi52lyVMkC_83xE7FF3akBoJx/s1280/home-option3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="1280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMSaU-YBEAIR7tg3CwAoJoLyBh0QyyPZrmLRyj4kqOkhfoahQcC_22_PqfKeO15Cx70Br2UZpby3RooLW76rbvh3nZMAUd5iPiNhsJoKOFNvLWtkLf2cUKi52lyVMkC_83xE7FF3akBoJx/s320/home-option3.jpg" width="320" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIbJ0qD8kUBRQpPoc9-O82pmx4optAuGWS1ySN1Ljc92gIFwRny4VP44xZjki5oAxeP1EqnPJlAQ5Xr6hjHZfPW6MvyN2v6yseNMdmLA9a-J-TnPZ_qv5zfO06Q82fYBXSPkppp5nSfAro/s1414/home1a.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="844" data-original-width="1414" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIbJ0qD8kUBRQpPoc9-O82pmx4optAuGWS1ySN1Ljc92gIFwRny4VP44xZjki5oAxeP1EqnPJlAQ5Xr6hjHZfPW6MvyN2v6yseNMdmLA9a-J-TnPZ_qv5zfO06Q82fYBXSPkppp5nSfAro/s320/home1a.jpg" width="320" /></a></div><br /><p></p>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4381574072031162308.post-10284011534076865782012-03-26T20:11:00.003+05:302020-10-24T05:27:49.165+05:30jQuery/CSS multi level dropdown menu<p>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 .</p>
<h3><a title="Simple jQuery Dropdowns" href="http://css-tricks.com/simple-jquery-dropdowns/" target="_blank">Simple jQuery Dropdowns</a></h3>
Very stripped down code and minimal styling and has all the functionality typically needed and it works in all major browsers even in IE6.
<h3><a title="Superfish on 'roids" href="http://users.tpg.com.au/j_birch/plugins/superfish/" target="_blank">Superfish on ‘roids</a></h3>
<p>Superfish is one of the most popular Drop-Down menus available. Superfish on ‘roids takes it to the next level with jQuery!</p>
<h3> <a title="Smooth Navigational Menu" href="http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm" target="_blank">Smooth Navigational Menu</a></h3>
<p>Multi-level CSS and jQuery for smooth navigation.</p>
<h3><a title="Mega Drop Down Menus w/ CSS & jQuery" href="http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/" target="_blank">Mega Drop Down Menus</a></h3>
<p>Create a Mega Drop-down menu perfect for eCommerce websites.</p>
<h3><a title="Create Vimeo-like top navigation" href="http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx" target="_blank">Vimeo-like top navigation</a></h3>
<p>Create a Vimeo-like top naviation. It offers you different search options that you can choose and narrow your search.</p>
<h3><a target="_blank" rel="nofollow" href="http://www.clarklab.net/blog/posts/animated-drop-down-menu-with-jquery/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.clarklab.net']);" title="Animated Drop Down Menu with jQuery">Animated Drop Down Menu with jQuery</a></h3>
<p>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.</p>
<h3><a target="_blank" rel="nofollow" href="http://hv-designs.co.uk/2009/02/17/sliding-jquery-menu/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://hv-designs.co.uk']);" title="Sliding Jquery Menu Tutorial">Sliding Jquery Menu Tutorial</a></h3>
<p>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.</p>
<h3><a target="_blank" rel="nofollow" href="http://aext.net/2009/08/perfect-sign-in-dropdown-box-likes-twitter-with-jquery/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://aext.net']);" title="Perfect signin dropdown box likes Twitter with jQuery">Twitter style dropdown with jQuery</a></h3>
<p>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!</p>
<h3><a target="_blank" rel="nofollow" href="http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.dynamicdrive.com']);" title="Dynamic Drive - Smooth Navigational Menu">Dynamic Drive Navigational Menu</a></h3>
<p>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. </p>
<h3><a target="_blank" rel="nofollow" href="http://pupunzi.open-lab.com/2009/01/18/mbmenu/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://pupunzi.open-lab.com']);" title="jQuery.mb.Menu">jQuery.mb.Menu</a></h3>
<p>This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right-click) in an intuitive way!</p>
<p><strong><a href="View Demo" target="_blank">jQuery and CSS Example</a></strong></p>
<p>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.</p>
<h3><a href="http://www.filamentgroup.com/examples/menusHierarchical/" target="_blank">jQuery iPod-style Drilldown Menu</a></h3>
<p>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.</p>
<h3><a href="http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/" target="_blank">smooth animated menu with JQuery</a></h3>
<p>A very nice tutorial to learn to create a very nice and artistic effect for your websites.</p>
<p> </p>Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-4381574072031162308.post-44019582012561798522012-01-09T23:53:00.000+05:302012-01-16T23:58:15.516+05:30Best jQuery Lightbox Scripts<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidpALdixLo_eAP8p5-oickVHZqdWtiQQxsugO4DpeaOH3GQW0jQ94K4puuPUTjs-2k8ENNJ1ioxnqzGpsdQfaJQuKaRS1XDJGuRD_Fd14pODDGeO5cLYx5RQeH5IOPHe2Max5xd_2hACly/s1600/lightbox-jquery.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidpALdixLo_eAP8p5-oickVHZqdWtiQQxsugO4DpeaOH3GQW0jQ94K4puuPUTjs-2k8ENNJ1ioxnqzGpsdQfaJQuKaRS1XDJGuRD_Fd14pODDGeO5cLYx5RQeH5IOPHe2Max5xd_2hACly/s1600/lightbox-jquery.jpg" /></a></div>
<br /></div>
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.<br />
In this article I collected the <i>best</i> and Efficient Lightbox based on the jQuery Javascript library. <br />
<h3>
<a href="http://leandrovieira.com/projects/jquery/lightbox/" target="_blank">jQuery lightbox</a></h3>
A jQuery <i>lightBox</i> plugin is simple, elegant, unobtrusive, no need extra markup.<br />
<h2>
<a href="http://fancybox.net/"> fancybox </a> </h2>
FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page. <br />
<h3>
<a href="http://www.huddletogether.com/projects/lightbox2/" target="_blank">lightbox2</a></h3>
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. <br />
<h3>
<a href="http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/" target="_blank">PrettyPhoto</a> </h3>
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. <br />
<h3>
<a href="http://famspam.com/facebox/" target="_blank">Facebox</a></h3>
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. </div>Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-4381574072031162308.post-84349011841571368902012-01-09T23:22:00.003+05:302012-01-09T23:22:33.303+05:30jquery nivo zoom<div dir="ltr" style="text-align: left;" trbidi="on">
Nivo Slider is the world’s most popular jQuery image slider, and it’s completely free!<br />
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.<br />
<h3>
Features</h3>
<ul>
<li>Specify position of larger image relative to the thumbnail</li>
<li>Add topLeft, topRight, bottomLeft, bottomRight, or center class to the image to specify relative position</li>
<li>Optional overlay support</li>
<li>Supports HTML captions</li>
<li>Simple clean & valid markup</li>
<li>Customizable settings</li>
<li>Lightweight: Packed version only weighs 4kb</li>
</ul>
For more details <b><a href="http://nivozoom.dev7studios.com/" target="_blank">Visit</a></b><br />
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4381574072031162308.post-76019636898665075352012-01-09T23:21:00.001+05:302012-01-09T23:21:30.839+05:30jquery tab panel<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="http://jqueryexample.com/wp-content/uploads/2011/12/jquery-tabed-panel.jpg"><img alt="jquery tabed panel" class="size-medium wp-image-542" height="142" src="http://jqueryexample.com/wp-content/uploads/2011/12/jquery-tabed-panel-300x142.jpg" title="jquery tabed panel" width="300" /></a><br />
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.<br />
<ul>
<li><strong><a href="http://css-tricks.com/jquery-ui-tabs-with-nextprevious/" rel="external nofollow" target="blank" title="jQuery UI Tabs with Next/Previous">Tabs with Next/Previous</a></strong> :<br />
<strong><a href="http://css-tricks.com/examples/TabsNextPrev/" rel="external nofollow" target="blank" title="View Live Demo">View Live Demo<br /></a></strong></li>
<li><strong><a href="http://yensdesign.com/2008/12/create-a-smooth-tabbed-menu-in-jquery/" rel="external nofollow" target="blank" title="Create a smooth tabbed menu in jQuery">Smooth tabbed menu in jQuery</a></strong> :<em>Simple</em> plug-in that allows for a large number of <em>tabs</em> to fit into a small space<br />
<strong><a href="http://yensdesign.com/tutorials/tabs/" rel="external nofollow" target="blank" title="View Live Demo">View Live Demo<br /></a></strong></li>
<li><a href="http://nettuts.com/tutorials/html-css-techniques/how-to-create-a-slick-tabbed-content-area/" target="_blank"><strong>Slick Tabbed</strong></a>: This script allows you to create a <em>slick tabbed</em> content area using CSS and <em>jQuery</em>.<br />
<strong><a href="http://d2o0t5hpnwv4c1.cloudfront.net/001_Tabbed/site/jQuery.html" rel="external nofollow" target="blank" title="View Live Demo">View Live Demo<br /></a></strong></li>
<li><strong> <a href="http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/" rel="external nofollow" target="blank" title="Simple Tabs w/ CSS & jQuery">Simple Tabs w/ CSS & jQuery</a></strong>: This <em>jQuery</em> plugin supplies an <em>easy</em> way to create <em>tabbed menu</em> with our lovely <em>jQuery</em> library<br />
<strong><a href="http://www.sohtanaka.com/web-design/examples/tabs/" rel="external nofollow" target="blank" title="View Live Demo">View Live Demo<br /></a></strong></li>
<li><strong><a href="http://tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/" rel="external nofollow" target="blank" title="Sweet AJAX Tabs With jQuery 1.4 & CSS3">AJAX Tabs: </a></strong>This
tabbed panel allows you to squeeze much more content in a seemingly
limited space and provide a structured way of accessing it.<br />
<strong><a href="http://demo.tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/demo.html" rel="external nofollow" target="blank" title="View Live Demo">View Live Demo</a></strong></li>
</ul>
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4381574072031162308.post-1573367633960649492012-01-09T23:17:00.002+05:302012-01-09T23:17:55.932+05:30jquery iframe auto height<div dir="ltr" style="text-align: left;" trbidi="on">
A simple solution for automatically resize iframe height depending on content. <br />
In page call jQuery library and in head script part past below script.<br />
<br />
<code>$(function () {<br />
$('#myIframe').load(function () {<br />
this.style.height =<br />
this.contentWindow.document.body.offsetHeight + 'px';<br />
});<br />
});</code> </div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4381574072031162308.post-22268343782947339572012-01-09T23:16:00.002+05:302012-01-09T23:16:59.670+05:30jcarousel tutorial<div dir="ltr" style="text-align: left;" trbidi="on">
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.<br />
<code><script src="jquery.min.js" type="text/javascript">
</script><br />
<script src="jquery.jcarousel.min.js" type="text/javascript">
</script><br />
<link href="skin.css" rel="stylesheet" type="text/css"></link><br />
<script type="text/javascript">
<br>
$(document).ready(function() {<br>
$('#mycarousel').jcarousel({<br>
// Configuration goes here<br>
});<br>
});<br>
</script></code> </div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4381574072031162308.post-21023542117385559382012-01-09T23:15:00.002+05:302012-01-09T23:15:41.139+05:30jquery dotdotdot<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
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.<br />
<br />
To use add jquery library and script file in header and on document ready call function.<br />
<br />
<code><script javascript”="" language="”javascript”" src="”jquery.dotdotdot-1.2.1.js"" text="" type="text/javascript” language=”javascript” src=”jquery.js“><br>
<script type=">
</script><br />
<script type="text/javascript">
<br>
$(function(){<br>
$(‘.ellipsis, .ellipsis-e’).dotdotdot();<br>
$(‘.ellipsis-r’).dotdotdot({<br>
watch: ‘window’<br>
});<br>
$(‘.ellipsis-a’).dotdotdot({<br>
after: ‘a’<br>
});<br>
});<br>
</script></code> <br />
For more details <a href="http://dotdotdot.frebsite.nl/" target="_blank">Visit</a></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4381574072031162308.post-60317282015953197762012-01-09T23:12:00.000+05:302012-01-09T23:12:12.365+05:30How To Set A Default Landing Tab For Your Facebook Page<div dir="ltr" style="text-align: left;" trbidi="on">
<b>Steps:</b><br />
<ol style="text-align: left;">
<li>Open the newly created page and click on edit page link.</li>
<li>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. </li>
</ol>
<br /></div>Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-4381574072031162308.post-36984071655753899722012-01-06T23:50:00.004+05:302012-01-06T23:50:59.309+05:30jqPagination jQuery Pagination Plugin<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_9r4LmWs8IUaSbj19ovRKbHJ2P9_5-7GtJwEynyci-QyNR0ErMRPO63ikkFFr4hZ0wjU9SgZA9fN8dP2dEsJr06Lt1wURIyEeO60Ubev2-mARfpp-0NwdBfZ-C84fHM94y3at5OOsLYtT/s1600/jquery-pagination.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_9r4LmWs8IUaSbj19ovRKbHJ2P9_5-7GtJwEynyci-QyNR0ErMRPO63ikkFFr4hZ0wjU9SgZA9fN8dP2dEsJr06Lt1wURIyEeO60Ubev2-mARfpp-0NwdBfZ-C84fHM94y3at5OOsLYtT/s1600/jquery-pagination.jpg" /></a></div>
<b>jqPagination</b> is a effective jQuery plugin for quickly creating a <b>pagination</b> interface and functionality for your web site or application..<br />
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).<br />
It has a pretty unique, simple-yet-functional feature which is the ability to <b>clicking on the pagination item and setting the page to be displayed manually</b>.<br />
<b>jqPagination</b> has a single <b>callback which is ran when a pagination request is made</b> and returns the page number to be displayed.<br />
Its design <b>can be customized easily</b> and the plugin degrades nicely when JavaScript is disabled.<br />
<br />
<a href="http://beneverard.github.com/jqPagination/#demo" target="_blank"><b>Demo</b></a></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4381574072031162308.post-29918901340184502342012-01-06T23:45:00.001+05:302012-01-07T00:07:25.336+05:30Best Mobile Frameworks for web development<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3IvWGV-ETLvIWWQ2JHhJRWd6Z47ugynboa8zG10R6XHE7pzK2o9wCeXeMELhF-8bmQkrLbI5fjQSA3yR0nt0mKraYE9jNI3yVhZ2sv8iDiZYr_q8XS9dzbECouG6mIYRk5xCHDxx2kLDH/s1600/mobileapp.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3IvWGV-ETLvIWWQ2JHhJRWd6Z47ugynboa8zG10R6XHE7pzK2o9wCeXeMELhF-8bmQkrLbI5fjQSA3yR0nt0mKraYE9jNI3yVhZ2sv8iDiZYr_q8XS9dzbECouG6mIYRk5xCHDxx2kLDH/s1600/mobileapp.jpg" /></a></div>
<h3>
jQTouch</h3>
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.<br />
<b><a href="http://www.blogger.com/code.google.com/p/jqtouch/" target="_blank">Demo</a></b></div>
<h3>
Sencha Touch</h3>
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.<br />
<b><a href="http://www.blogger.com/www.sencha.com/products/touch/demos/" target="_blank">Demo</a></b><br />
<h3>
Zepto.js</h3>
Zepto.js is a minimalist JavaScript framework for modern browsers, with a jQuery-compatible syntax. <br />
<b><a href="http://zeptojs.com/" target="_blank">Demo</a></b><br />
<h3>
JQuery Mobile Framework</h3>
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.<br />
<a href="http://jquerymobile.com/" target="_blank"><b>Demo</b></a></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4381574072031162308.post-45888508818382036962012-01-06T23:32:00.000+05:302012-01-06T23:32:03.062+05:30jQuery Geo location plugin for map relation actions<div dir="ltr" style="text-align: left;" trbidi="on">
<i>jQuery Geo</i> is an open-source popular framework for map/geolocation related actions.<br />
The plugin <b>uses the open source map servers</b> like Open Street Map, WMS and Esri ArcGIS for pulling the map data. The maps created are <b>mobile-friendly</b> and have lots of built-in methods for customization.<br />
<b>jQuery Geo</b> is very well-documented and supported with a bunch of examples.<br />
<ul>
<li>show mapping data and handle direct user interaction with the map</li>
<li>use geospatial functions like calculating bounding boxes, measuring the distance between geometries, etc.</li>
</ul>
<a href="http://www.blogger.com/jquerygeo.com/test/" target="_blank"><b>Demo</b></a><br />
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4381574072031162308.post-58809718358595024162012-01-06T23:15:00.002+05:302012-01-06T23:15:31.081+05:30jQuery News Ticker<div dir="ltr" style="text-align: left;" trbidi="on">
<h3>
jQuery News Ticker</h3>
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. <br />
<a href="http://www.jquerynewsticker.com/" target="_blank"><b>Demo</b></a> <a href="http://github.com/rhodimus/jQuery-News-Ticker"><b>Download</b></a><br />
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4381574072031162308.post-78975978910685910872012-01-06T00:41:00.000+05:302012-01-16T23:59:40.458+05:30Best jQuery Chart Libraries<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
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.</div>
<h3>
<a href="http://codecanyon.net/item/graphup-jquery-plugin/108025?ref=1stwebdesigner" target="_blank">Jquery GraphUp Plugin</a></h3>
“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.<br />
<a href="http://www.geertdedeckere.be/shop/graphup/" target="_blank"><b>Demo</b></a>.<br />
<h3>
<a href="http://www.highcharts.com/">jQuery Highcharts</a></h3>
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.<br />
<b><a href="http://www.highcharts.com/demo/" target="_blank">Demo</a></b><br />
<h2>
<a href="http://www.jqplot.com/">jqPlot</a></h2>
jqPlot is a plotting and <i>charting</i> plugin for the <i>jQuery.</i> jqPlot produces beautiful line, bar and pie <i>charts</i> 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.<br />
<b><a href="http://www.jqplot.com/tests/" target="_blank">Demo</a></b><br />
<br />
<h3>
<a href="http://code.google.com/p/flot/">Flot</a></h3>
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.<br />
<b><a href="http://people.iola.dk/olau/flot/examples/">Demo</a></b><br />
<h3>
<a href="http://keith-wood.name/gChart.html">jQuery Google Charting</a></h3>
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:</div>Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-4381574072031162308.post-76721730699314970582012-01-05T23:56:00.002+05:302012-01-05T23:56:53.578+05:30nivo zoom tutorial<div dir="ltr" style="text-align: left;" trbidi="on">
Nivo Slider is the world’s most popular jQuery image slider, and it’s completely free!<br />
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.<br />
<h3>
Features</h3>
<ul>
<li>Specify position of larger image relative to the thumbnail</li>
<li>Add topLeft, topRight, bottomLeft, bottomRight, or center class to the image to specify relative position</li>
<li>Optional overlay support</li>
<li>Supports HTML captions</li>
<li>Simple clean & valid markup</li>
<li>Customizable settings</li>
<li>Lightweight: Packed version only weighs 4kb</li>
</ul>
For more details Visit: http://nivozoom.dev7studios.com/</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4381574072031162308.post-24759267695473417742012-01-05T23:53:00.001+05:302012-01-05T23:53:13.901+05:30steps to create facebook page<div dir="ltr" style="text-align: left;" trbidi="on">
<strong>Quick easy steps to create facebook page tab are as follows.</strong><br />
<br />
<strong>Step 1:</strong> Login to facebook account.<br />
<strong>Step 2:</strong> Open url https://developers.facebook.com/apps in browser.<br />
<strong>Step 3:</strong> In right hand section, find “create new app” button and click it.<br />
Add display name, namespace is optional and select agree checkbox.<br />
<strong>Step 4:</strong> 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. <br />
<strong>Step 5:</strong> Now open url in another tab http://www.facebook.com/pages/ and click on create page button and create page.<br />
<strong>Step 6:</strong> Adding an App/ page tab to a Page.<br />
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<br />
“YOUR_APP_ID” with application id copied in step 4 and “YOUR_URL” with “application url” used in step 4.<br />
Format : http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL<br />
Sample URL : http://www.facebook.com/dialog/pagetab?app_id=214247878655791&next=http://172.20.150.166/sampalApp/<br />
If you follow all the steps correctly it should add page tab in newly
newly created page. Just refresh/ reload page thats all !!.</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4381574072031162308.post-69688581753781479952012-01-05T23:50:00.000+05:302012-01-05T23:50:24.053+05:30Best jQuery grid plugins<div dir="ltr" style="text-align: left;" trbidi="on">
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<br />
<ul>
<li>Flexigrid: <a href="http://flexigrid.info/" rel="nofollow">http://flexigrid.info/</a>
: 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.</li>
<li>jQuery Grid: <a href="http://www.trirand.com/blog/" rel="nofollow">http://www.trirand.com/blog/</a> :</li>
<li>jqGridView: <a href="http://plugins.jquery.com/project/jqGridView" rel="nofollow">http://plugins.jquery.com/project/jqGridView</a> <strong><em>jqGrid</em></strong> is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web.</li>
<li>Ingrid: <a href="http://reconstrukt.com/ingrid/" rel="nofollow">http://reconstrukt.com/ingrid/</a>
:Ingrid is an unobtrusive jQuery component that adds datagrid behaviors
(column resizing, paging, sorting, row and column styling, and more) to
your tables.</li>
<li>DataTable : <a href="http://www.datatables.net/index" rel="nofollow">http://www.datatables.net/index</a>
: 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.</li>
<li>Slickgrid : <a href="http://code.google.com/p/slickgrid/" rel="nofollow">http://code.google.com/p/slickgrid/</a></li>
<li>TableSorter: <a href="http://tablesorter.com/" rel="nofollow">http://tablesorter.com/</a>: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.</li>
<li>dhtmlxGrid: <a href="http://www.dhtmlx.com/docs/products/dhtmlxGrid/" rel="nofollow">http://www.dhtmlx.com/docs/products/dhtmlxGrid/</a></li>
<li>Sigma Grid: <a href="http://www.sigmawidgets.com/products/sigma_grid2/" rel="nofollow">http://www.sigmawidgets.com/products/sigma_grid2/</a></li>
</ul>
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4381574072031162308.post-91162838367940674892012-01-05T23:42:00.003+05:302012-01-05T23:42:59.201+05:30jQuery feed menus tutorial<div dir="ltr" style="text-align: left;" trbidi="on">
There are many way to get or promote your site <em>become popular</em>. One of the <em>popular</em> method is by submiting your site to rss <em>feed. </em>When feeds became popular, it worked to have one icon on your site to point your readers in one location.<br />
<b><a data-mce-href="http://www.komodomedia.com/mint/pepper/orderedlist/downloads/download.php?file=http%3A//www.komodomedia.com/samples/feed_menu/jquery_feed_menu.zip" href="http://www.komodomedia.com/mint/pepper/orderedlist/downloads/download.php?file=http%3A//www.komodomedia.com/samples/feed_menu/jquery_feed_menu.zip" target="_blank">Demo</a></b></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4381574072031162308.post-63831814024098504682012-01-05T23:42:00.000+05:302012-01-05T23:42:11.891+05:30jQuery UI 1.8 features<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<em>jQuery UI 1.8</em> just released. The biggest changes are, of course, the <em>new</em> widgets themselves.<br />
<ul>
<li><strong>Core</strong> – the core of jQuery UI, required for all interactions and widgets</li>
<li><strong>Widget</strong> – the widget factory, base for all widgets</li>
<li><strong>Mouse</strong> – the mouse widget, a base class for all interactions and widgets with heavy mouse interaction</li>
<li><strong>Position</strong> – a utility plugin for positioning elements relative to other elements</li>
</ul>
<h3>
The Position Utility</h3>
With this, you can position any element relative to any other, or even relative to the parent window or your mouse.<br />
<h3>
The Button Widget</h3>
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.<br />
<h3>
The Autocomplete Widget</h3>
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.<br />
<br />
jQuery UI 1.8 you can download from:<br />
<ul>
<li>Minimized version: <a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js" target="_blank">http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js</a></li>
<li>Full Version with comments: <a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js" target="_blank">http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js</a></li>
</ul>
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4381574072031162308.post-23562439138862944922012-01-05T23:40:00.001+05:302012-01-05T23:40:14.259+05:30jquery 3d carousel<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<a href="http://jqueryexample.com/wp-content/uploads/2011/12/3d-carousel-jquery1.jpg"><img alt="3d carousel jquery" class="size-full wp-image-564" height="120" src="http://jqueryexample.com/wp-content/uploads/2011/12/3d-carousel-jquery1.jpg" title="3d-carousel-jquery" width="190" /></a><em> </em></div>
<em>3D Carousel</em> is a powerful jQuery plugin enabling you to create <em>3D carousel</em> with great features. It can be fully customizable controlled by mouse. jQueryCarousel uses JSON as source data provider.<br />
<b><a href="http://jquery-ui.googlecode.com/svn/%21svn/bc/3147/branches/labs/index.html" target="_blank">Demo</a></b></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4381574072031162308.post-9441293611458899662012-01-05T23:39:00.001+05:302012-01-05T23:39:10.677+05:30jquery jcarousel tutorial<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<a href="http://jqueryexample.com/wp-content/uploads/2011/12/jcarousel-jquery-plugin.jpg"><img alt="jquery jcarousel tutorial" class="size-full wp-image-574" height="122" src="http://jqueryexample.com/wp-content/uploads/2011/12/jcarousel-jquery-plugin.jpg" title="jcarousel-jquery-plugin" width="300" /></a> </div>
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.<br />
<code><script src="jquery.min.js" type="text/javascript">
</script><br />
<script src="jquery.jcarousel.min.js" type="text/javascript">
</script><br />
<link href="skin.css" rel="stylesheet" type="text/css"></link><br />
<script type="text/javascript">
<br>
$(document).ready(function() {<br>
$('#mycarousel').jcarousel({<br>
// Configuration goes here<br>
});<br>
});<br>
</script></code><br />
<b><a href="http://sorgalla.com/projects/jcarousel/examples/static_simple.html" target="_blank">Demo</a></b></div>Unknownnoreply@blogger.com0