jQuery Archives - TECHNIG https://www.technig.com/tag/jquery/ Gateway for IT Experts and Tech Geeks Wed, 01 Jun 2016 17:24:03 +0000 en-US hourly 1 https://wordpress.org/?v=6.6.2 https://www.technig.com/wp-content/uploads/2020/04/32x32.png jQuery Archives - TECHNIG https://www.technig.com/tag/jquery/ 32 32 162720667 jQuery UI Sortable Drag and Drop https://www.technig.com/jquery-ui-sortable-drag-drop/ https://www.technig.com/jquery-ui-sortable-drag-drop/#respond Wed, 01 Jun 2016 17:24:03 +0000 https://www.technig.com/?p=7617

jQuery ui has an amazing plugin that will help you make drag and drop web application in a very easy and simple way. We will use jQuery ui sortable plugin to make a simple sortable drag and drop list. jQuery ui really made it easy to make an amazing drag and drop applications. Here is […]

The post jQuery UI Sortable Drag and Drop appeared first on TECHNIG.

]]>

jQuery ui has an amazing plugin that will help you make drag and drop web application in a very easy and simple way. We will use jQuery ui sortable plugin to make a simple sortable drag and drop list. jQuery ui really made it easy to make an amazing drag and drop applications. Here is what we are going to make from scratch.

[codepen_embed height=”357″ theme_id=”dark” slug_hash=”RRNbbO” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/RRNbbO/’>jQuery ui Sortabl plugin</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

How to Use jQuery UI Sortable?

As like every other jQuery ui plugins, using sortable plugin is also the same and easy. All you need is to add jQuery and jQuery ui. You can download them from jQuery site.

Let’s add some html and css to start designing our sortable list. here the basic html markup(Of course you can customize it).

<ul id="sortable">  
    <li class="item-1">Item 1</li>  
    <li class="item-2">Item 2</li>  
    <li class="item-3">Item 3</li>  
    <li class="item-4">Item 4</li>  
</ul>

and Here some CSS for styling.

@import url(https://fonts.googleapis.com/css?family=Lato);

body {
  margin: 0px;
  padding: 0px;
  background: #303030;
  font-family: 'Lato', sans-serif;
}

h1 {
  color: #fff;
  text-align: center;
  margin-top: 2em;
}

ul {
  list-style: none;
  margin-top: 2em;
}

ul li {
  color: #fff;
  padding: 20px;
  width: 500px;
  margin: 0px auto;
  cursor: pointer;
}

ul li.item-1 {
  background: #5BC0EB
}

ul li.item-2 {
  background: #9BC53D
}

ul li.item-3 {
  background: #E55934
}

ul li.item-4 {
  background: #FA7921
}

Coming to JavaScript part, it’s pretty simple. If you have not yet link to jQuery and jQuery ui, you can link them through cdn.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

I assume you have a added them at the bottom of your page. Now let’s write our JavaScript code to preform the action.

 $(function() {
   $("#sortable").sortable();
 });

We used jQuery to select the  sortable id and than we applied th sortable function to it. Now, our list will be sortable. We can change the order the way we want.

Conclusion

It was how jQuery ui sortable plugin works. You can use it in any project you want in the same way. We hope it has been informative for you. If you have any questions related to this content, feel free to comment it bellow. 🙂

 

The post jQuery UI Sortable Drag and Drop appeared first on TECHNIG.

]]> https://www.technig.com/jquery-ui-sortable-drag-drop/feed/ 0 7617 How to Use FancyBox jQuery Plugin? https://www.technig.com/use-fancybox-jquery-plugin/ https://www.technig.com/use-fancybox-jquery-plugin/#respond Thu, 19 May 2016 16:30:00 +0000 https://www.technig.com/?p=7480

FancyBox is an amazing jQuery plugin that will let you open any image in the webpage like lightbox modal. When you click on the image, unlike opening on new tab or refreshing the page, it will open it in the same page with a nice modal dialog box. This tutorial will teach you how to […]

The post How to Use FancyBox jQuery Plugin? appeared first on TECHNIG.

]]>

FancyBox is an amazing jQuery plugin that will let you open any image in the webpage like lightbox modal. When you click on the image, unlike opening on new tab or refreshing the page, it will open it in the same page with a nice modal dialog box. This tutorial will teach you how to configure and use fancybox jquery plugin.

Configurations

For configuration, all you need is to download this plugin form fancyapps.com. After you download the plugin, unzip the file, now you will see some files and folders inside. The folder we need is source folder. Copy that folder to your project. There are some helper files inside helpers folder that you might want to use, but they are optional. We are not going to use them.

Include Fancybox to Your Project

Inside source folder, you have one CSS file and two files for JavaScript. Simply, both JavaScript files  are the same, just the one which has suffix of pack.js is compress version for production. For testing, feel free to use either of them.

Now let’s create a html file with a simple template files.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>How to use Fancybox jquery plugin</title>
	<link rel="stylesheet" href="source/jquery.fancybox.css">
</head>
<body>
	

	<!-- images goes there -->

	<script src="source/jquery.js"></script>
	<script src="source/jquery.fancybox.js"></script>
</body>
</html>

To use fancybox jquery plugin, you need to include jquery as well.

How to Use fancybox jQuery plugin?

Now you have configured the fancybox. It’s time to use fancybox jquery pluign and apply it on you images. Every image need to be in <a> tag, and the href attribute must refer to image image path. And one more thing, it must have a class, you can name it anything you wish.

	<div class="gallery">
		<a href="img/1.jpg" class="teching">
			<img src="img/1.jpg" alt="first">
		</a>
		<a href="img/2.jpg" class="teching">
			<img src="img/2.jpg" alt="first">
		</a>
		<a href="img/3.jpg" class="teching">
			<img src="img/3.jpg" alt="first">
		</a>
		<a href="img/4.jpg" class="teching">
			<img src="img/4.jpg" alt="first">
		</a>
	</div>

Apply a little style at top of the page to align them.

<style>
	.gallery{
		display: flex;
	}
	img{
		width: 100%;
		display: inline-block;
	}
</style>

Finally, at the bottom of the page add one line of jquery to apply the script to the images.

<script>
	$(".teching").fancybox();
</script>

It was that easy to use fancybox jquery plugin. It will apply to all elements that have the class of technig.

Here is live example.

[codepen_embed height=”539″ theme_id=”dark” slug_hash=”VaJjvX” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/VaJjvX/’>VaJjvX</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Conclusion

It was all about how to use fancybox jquery plugin. If you have any questions or problem, feel free to comment it bellow. 🙂

The post How to Use FancyBox jQuery Plugin? appeared first on TECHNIG.

]]> https://www.technig.com/use-fancybox-jquery-plugin/feed/ 0 7480