How to make custom animated accordion using Pug, SASS and jQuery ?

custom-animated-accordion

 

Instead of using old and boring accordion you can use Custom animated accordion using pug, sass and jQuery. It will give an awesome user interface to the client. And the best part is that we can change the animation effect of the accordion by replacing the class name. To change the class simply go to the animate.css and choose the class which full fill your requirement and paste it in the jQuery code.

Technology used:-

  • Pug

  • SASS

  • jQuery

To see the demo and source code go to custom animated accordion

Advertisements

How to give animation on the button when it is clicked using SASS and jQuery ?

Hi guys in today’s post I’m going to show you guys how to give animation on the button when user click on it.
So I uploaded the live example on the codepen from where you can see and can edit the file and make some more awesome stuff.

Click here to visit the pen.

How to make fully responsive todo list using jQuery ?

Hello amazing people! Today I’m gonna share my todo list code here. Well this todo list is so basic there is no database connectivity its only the design but yeah you can add the items by clicking on the add button, edit them by clicking on the particular title and delete them by clicking on the trash icon which is in the right of all the titles.

Follow the link to see the output http://codepen.io/mukul6996/full/LNKoqx

Copy and paste the following code in one page and save it with the html extension.
And your output will look like this:-

mytodo

 

 

Click here to get Code

 

 

Instructions to use

To add items:- Click on the add button “+” on the top-right corner.

To edit items:- Click on the label/title and then start typing. Click any where on the screen to save the item you typed.

To delete  items:- Click on the delete button (looks like a trash icon) on the right corner of your particular item.

Share it if this is helpful ūüôā

On the web:- http://codepen.io/mukul6996/full/LNKoqx

How to change the background, text or a div color on real time with php, mysql, ajax and jQuery ?

Description:- Hello! In this lesson I’ll show you guys the logic with little example to how to change the background, text or a div color on real time with php, mysql, ajax and jQuery.
Maybe you guys have better logics to shorten my code. If you have then please comment below.

So for this lesson make the following files step by step:-
1. create database and name it “color”
2. create row in database(color) and name it colorname
3. Create 2 columns 
    (i) id
    (ii) colorcode
4. Download jQuery file
5. Create changebg.php
6. Create config.php
7. Create insertcolor.php

1. config.php

pdf of config file

2. changebg.php

pdf of changebg file

3. insertcolor.php

pdf of insertcolor file

*NOTE :- I’m providing you pdf files as my wordpress text editor is not working well copy and paste code and make the php files with the same name of files and then goto your browser after making database and then run the changebg.php file.
Live demo is available here

How to create dynamic, responsive image slider with PHP, mysqli, bootstrap and jQuery ?

Description :- In this lesson I’m gonna provide the code from which you guys can easily make fully Dynamic Carousel ¬†Silder from which you’ll fetch image name from database and images from your img folder.

Establishing Database:-
Now, I know that you all guys know how to create new database and name it slider after this create new table and name it images and make 2 rows
(i) id
(ii) img 
And then insert your image name with extension into the img row .

Now follow some simple steps for setting up everything which we need for this lesson:-
1. Download the bootstrap
2. Download jquery file from jquery.com
2. Create a new folder and rename it as img and put some images in it.
3. Create a new folder and rename it as css and make app.css in the css folder
4. Create an index.php file
5. Create config.php file (the connection file to our database)

1. config.php   (the connection file)

<?php
$con = mysqli_connect("localhost","root","","slider");
if(mysqli_errno($con))
{
 echo mysqli_error(); 
}
?>

2. index.php  (the file where your silder code lives with some jquery lines)

There are some problems with wordpress text editor so I’m providing pdf of index.php copy from pdf and make index.php
Copy code from this link

3. app.css   (lives in css folder)

.

a.carousel-control {
 opacity: 1;
 height: inherit;
 width: inherit;
 background: none;
 text-shadow: none;

}
.prevSlide
{
 color: #f5f5f5;
 font-size: 2em;
 position: absolute;
 top: 50%;
 left: 0;
 background-color:rgba(0,0,0,0.5);
 transform: translate(0,-50%);
 padding: 0 10px;
}
.prevSlide:hover
{
 color:rgba(247,148,30,1);
 background-color:rgba(0,0,0,0.8);
}
.nextSlide
{
 color: #f5f5f5;
 font-size: 2em;
 position: absolute;
 top: 50%;
 right: 0;
 background-color:rgba(0,0,0,0.5);
 transform: translate(0,-50%);
 padding: 0 10px;
}
.nextSlide:hover
{
 color:rgba(247,148,30,1);
 background-color:rgba(0,0,0,0.8);
}

*Note:- My final product screenshot is this except the images in the slider you will get the same result.

Thanks ūüôā

slider

index