[url=]Crhttps://www.skptricks.com/2018/05/create-dropdown-using-reactjs.htmlate A Dropdown Menu Using ReactJS[/url]

https://www.skptricks.com/2018/05/create-dropdown-using-reactjs.html

Today, In this tutorial we are are going to discuss how to create simple drop down menu in ReactJS and we have tried our best to make this tutorial as simple as possible. Here we are going to design CSS Dropdown menu with the help of ReactJS and also with the help of onClick Event, we are showing and hiding the drop down menu content.

Dropdown Examples with ReactJS

React dropdown menu tutorial
Lets see the below source code, which help you to build more understanding:

Project Structure :
Lets see the project structure :
Create a Dropdown Menu in ReactJS


Dropdown.js
This is a Dropdown component class, which help us to render the dropdown menu content. When user click on the dropdown menu, then this component class render the updated dropdown menu list in browser.

showDropdownMenu : This method helps to display the dropdown menu content.
hideDropdownMenu : This method helps to hide the dropdown menu content.

import React from 'react';
import './style.css';


class Dropdown extends React.Component {
constructor(){
super();

this.state = {
displayMenu: false,
};

this.showDropdownMenu = this.showDropdownMenu.bind(this);
this.hideDropdownMenu = this.hideDropdownMenu.bind(this);

};

showDropdownMenu(event) {
event.preventDefault();
this.setState({ displayMenu: true }, () => {
document.addEventListener('click', this.hideDropdownMenu);
});
}

hideDropdownMenu() {
this.setState({ displayMenu: false }, () => {
document.removeEventListener('click', this.hideDropdownMenu);
});

}

render() {
return (
<div className="dropdown" style = {{background:"red",width:"200px"}} >
<div className="button" onClick={this.showDropdownMenu}> My Setting </div>

{ this.state.displayMenu ? (
<ul>
<li><a className="active" href="#Create Page">Create Page</a></li>
<li><a href="#Manage Pages">Manage Pages</a></li>
<li><a href="#Create Ads">Create Ads</a></li>
<li><a href="#Manage Ads">Manage Ads</a></li>
<li><a href="#Activity Logs">Activity Logs</a></li>
<li><a href="#Setting">Setting</a></li>
<li><a href="#Log Out">Log Out</a></li>
</ul>
):
(
null
)
}

</div>

);
}
}

export default Dropdown;

style.css
This is a style sheet design for the drop-down menu.
.dropdown {
position: relative;
display: inline-block;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
top:45px;
right:0px;
width: 200px;
background-color: white;
font-weight:bold;
position: absolute;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
li a {
color: #000;
text-decoration: none;
}
li {
padding: 8px 16px;
border-bottom: 1px solid #e5e5e5;
}
li:last-child {
border-bottom: none;
}
li:hover {
background-color: #e5e5e5;
color: white;
}
.button{
width:178px;
height:18px;
background-color:#ff3232 ;
padding:12px;
border-radius:5px;
font-weight:bold;
color:white;
}
.button:before{
content:"";
position:absolute;
width:0px;
height:0px;
border: 10px solid;
border-color: white transparent transparent transparent;
right:6px;
top:18px;
}


index.js
This is a main component which helps to display the dropdown menu. Here we are appending the dropdowm menu list in div tag whose ID value is "root"
Example :
ReactDOM.render(displayDropdown, document.getElementById('root'));

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import Dropdown from './dropdownmenu/Dropdown';


var displayDropdown = (
<div style={{display: 'flex', justifyContent: 'center'}} >
<Dropdown />
</div>
);

ReactDOM.render(displayDropdown, document.getElementById('root'));

registerServiceWorker();

Hope you like this simple example for dropdown menu design.




Download Link :
https://github.com/skptricks/react/tree/master/dropdown%20menu%20design%20in%20reactjs

[quote author=kudaisi post=67708846]The dropdown menu would have been better off as a presentational (stateless) component. I understand that you tried to make it simple, but the menu should have been passed props from a container component hence making it reusable as would be expected in the react world.[/quot

Without state can you handile hide and display dropdown menu ??

Create a Dropdown Menu using ReactJS

Today, In this tutorial we are are going to discuss how to create simple drop down menu in ReactJS and we have tried our best to make this tutorial as simple as possible. Here we are going to design CSS Dropdown menu with the help of ReactJS and also with the help of onClick Event, we are showing and hiding the drop down menu content.

React dropdown menu tutorial
Lets see the below source code, which help you to build more understanding:

https://www.skptricks.com/2018/05/create-dropdown-using-reactjs.html

Post Link : How to unzip or extract zip file using PHP


https://www.youtube.com/watch?v=7z13B7Y_DsI

How to unzip or extract zip file using PHP

Post Link : How to create a zip file using PHP


https://www.youtube.com/watch?v=RK3jWmEUWOM


How to create a zip file using PHP

Post Link : How to create a zip file using PHP


https://www.youtube.com/watch?v=RK3jWmEUWOM


How to create a zip file using PHP

Post Link : How to create a zip file using PHP


https://www.youtube.com/watch?v=RK3jWmEUWOM


How to create a zip file using PHP

https://www.skptricks.com/2018/04/free-php-html-css-javascript-ide.html


Lets check out this Codelobster IDE. It may help you while doing coding activities for PHP, HTML, CSS, JavaScript Languages and it may make your work bit faster.

Codelobster IDE has been a top of the line software tool to edit web languages for a long time now
and has a lot of fans. In this article, we will tell you everything you need to know in order to get
adequately familiarized with it.


With Codelobster, you can edit PHP, HTML, CSS and JavaScript files with ease. The syntax
highlighting feature along with the hints for functions, their parameters and tags make the coding
experience efficient. If your file has mixed content then too you don’t have to worry because the
tool deals with such files easily as well. For example, if you add PHP code to a HTML template,
then Codelobster will accurately highlight both the functions written in PHP and the tags of HTML
separately, allowing you to differentiate between them. The same is applicable to CSS or JavaScript
code that is often contained within HTML files.
The tool also comes with the auto-completion feature which makes your code error-prone and also
speeds up the programming process.

By downloading the latest documentation from the official websites, Codelobster offers contextual
help related to all supported programming languages. So, if you are working with a new JavaScript
or PHP function or a HTML tag or a CSS attribute, then you can know more details about them by
just pressing the F1 key.
Users can execute PHP scripts step by step by sequentially traversing the code lines with the default
PHP debugger that comes built-in with Codelobster. Viewing the loop work process, observing the
variable values and assigning check points is all possible.

The built-in template viewer allows you to view HTML templates from within the editor; you can
highlight any element you want on the page or go through the associated CSS styles. The HTML
and CSS inspector contains all the features of the famous FireBug debugging tool.

Other beneficial functions and features of the editor:
1. Tags and parentheses get highlighted automatically by the editor and you will never have to
count quotation marks or parentheses again.
2. Other highlighting including that of block, selection and code snippet collapsing is
supported. The use of bookmarks to make navigation easier and the establishment of the
complete PHP project structure make life easier for a developer.
3. The tool supports 17 user interface languages including English, Russian, Spanish, German
and French.
4. Codelobster works on all Windows versions: Windows XP, Windows Vista, Windows 7,
Windows 8 and Windows 10.

Now that we have talked about the free version of Codelobster, let’s take a look at the professional
version, which provides even more features to developers:
The first of the many additional features is the ability to use the built-in FTP client to work on
projects via files present on a remote server. Not only can you edit the files, you can also preview
results and send the changes to the remotely present files.
The SQL editor that comes built-in with Codelobster has code highlighting and auto completion
features. In addition to SQL query execution and data export from your database, the SQL
component of Codelobster also allows you to perform all fundamental CRUD operations: creation,
reading, updating and deleting database rows.

In addition you get a huge set of plugins with the professional version:
1. Full support for all the famous JavaScript libraries and frameworks including jQuery,
Node.js, BackboneJS, MeteorJS and AngularJS.
2. You can work with many famous PHP frameworks like CodeIgniter, CakePHP, Phalcon,
Smarty, Symfony, Twig, Yii and Laravel etc.
3. Plugins for famous CMSs like Joomla, WordPress, Magento and Drupal are also available.

To summarize, after years of work, our team hasn’t had any complaints against Codelobster. It has
full support for Unicode, never hangs, is super-fast and allows working with large scale PHP
projects.

Codelobster IDE can be downloaded from the official website here: http://codelobster.com.

Let us know you thoughts about this tool in comment box below.

If you are interested to learn about new programming languages, Then you can visit this site :
we have covered below technologies :

1. HTML
2.JAVA
3. MYSQL
4. ANDROID
5. JQUERY
6. PHP
7. SELENIUM

Link for website : http://www.skptricks.com/

check this out ....

demo Link : Display online/offline connection status in JavaScript using Offline.js

In this tutorial we are going to learn how to display offline/online connection status in Javascript using Offline.js. Offline.js is a library to automatically alert your users when they've lost internet connectivity, like Gmail,Facebook.

The best part is that it captures AJAX requests which were made while the connection was down, and remakes them when it's back up, so your app reacts perfectly.


https://www.youtube.com/watch?v=QEE3uZcGgEg

Post Link : Simple Drop Down Menu With Jquery And CSS


https://www.youtube.com/watch?v=oLea4Qbs9vo

Get more details : Get current page URL in PHP

In this tutorial, we are going to discuss how to get current page URL using PHP. $_SERVER is a super global variable, which is always available in all scopes. We will use $_SERVER variable to get the current page URL. It is an array contains various information such as, headers, document path, script location, request method etc.


Explanation about some useful $_SERVER variable :
$_SERVER['HTTP_HOST'] : Contents of the Host header from the current request, if there is one.
$_SERVER['PHP_SELF'] : The filename of the currently executing script, relative to the document root. For instance, $_SERVER['PHP_SELF'] in a script at the address http://skptricks.com/post/php-tutorial.php would be /post/php-tutorial.php.
$_SERVER['QUERY_STRING'] : If a page is accessed via any query string, $_SERVER['QUERY_STRING'] fetches that query string.This is a actual URL http://localhost/skptricks/check current page url/currentPageURL.php?jj=kkkk after the $_SERVER['QUERY_STRING'] operation would be jj=kkkk .

[b]Post Link :[/b]http://www.skptricks.com/2018/02/facebook-style-drop-down-menu-design-using-css.html


Now a days drop down menus are becoming more and more popular. so today, we are going to discuss how to create Facebook style drop down menu design using CSS. Here we haven't used jQuery script to Hide or display the drop down list, all the things are designed with the help of HTML and CSS only.
When user hover over setting icons, then it will display the drop down menu list.

Create a Facebook like drop down menu, Facebook Style Drop Down Menu Design Using CSS

Facebook-style Drop down Menu
Lets see the complete example for Drop down menu design using css. Here we have combined the HTML and CSS source code in one HTML file, hope you would not face any difficulties. Apart from this we have provided the proper comments for the drop down menu design, it helps you during the identification of source code.

[b]Post Link :[/b]http://www.skptricks.com/2018/02/facebook-style-drop-down-menu-design-using-css.html


https://www.youtube.com/watch?v=dsDcW7Tu1Qc

http://www.skptricks.com/2018/02/facebook-style-chat-box-popup-layout-design.html

Today we are going to discuss how to create facebook style chat box popup box using HTML and CSS. Here we have implemented and provided simple example for facebook style chat box popup and layout design for the chat box is way more easier and simple. You can easily use and integrate this example in your websites.
We have used Fixed position property of css to display the chat box one after another, by this way it will not effect the other css layout design.

facebook style chat box popup using javascript and css, facebook style chat box popup using jquery and css, facebook style chat box popup

Feature for this chat box popup :
With the help of this you can perform multi user chat in single web page.
You can close the chat session whenever required.
You can minimize the chat pop-up box.
The Latest chat box, should be displayed at right most corner.

Facebook Style Chat Box Popup Example :

http://www.skptricks.com/2018/02/facebook-style-chat-box-popup-layout-design.html


https://www.youtube.com/watch?v=ufqESJShA60

http://www.skptricks.com/2018/02/facebook-style-chat-box-popup-layout-design.html

Today we are going to discuss how to create facebook style chat box popup box using HTML and CSS. Here we have implemented and provided simple example for facebook style chat box popup and layout design for the chat box is way more easier and simple. You can easily use and integrate this example in your websites.
We have used Fixed position property of css to display the chat box one after another, by this way it will not effect the other css layout design.

facebook style chat box popup using javascript and css, facebook style chat box popup using jquery and css, facebook style chat box popup

Feature for this chat box popup :
With the help of this you can perform multi user chat in single web page.
You can close the chat session whenever required.
You can minimize the chat pop-up box.
The Latest chat box, should be displayed at right most corner.

Facebook Style Chat Box Popup Example :

http://www.skptricks.com/2018/02/facebook-style-chat-box-popup-layout-design.html


https://www.youtube.com/watch?v=ufqESJShA60

Creating an arrow box like chat application using css : http://www.skptricks.com/2018/02/creating-an-arrow-box-like-chat-application-using-css.html

Today, we are going to learn How to make a box with arrow in CSS like chat application. If you have used Facebook and Google chat applications, you may have been observed arrow pointed head at left and right of the div. Lets check the below screenshot, in case you haven't observed.

How to make a box with arrow in CSS,Creating an arrow box like chat application using css,Learn How to make a box with arrow in CSS like chat application,build more understanding on arrow chat head design

Learn How to make a box with arrow in CSS like chat application:
Lets see the complete source code that helps to build more understanding on arrow chat head design. Here we are using border and border-color property of the css to design arrow pointed head. Below CSS style-sheet design helps us to design left side pointed chat box head :

.div-left:before{
content:"";
position:absolute;
width:0px;
height:0px;
border: 10px solid;
border-color: transparent #87CEFA transparent transparent;
left:-20px;
top:10px;
}

chat arrow design.html
Add the below HTML and CSS code, that helps you to design arrow box like chat application using css.

<style>
.div-left{
position:relative;
background:#87CEFA;
width:300px;
padding:10px;
border-radius:5px;
margin:10px;
}
.div-left:before{
content:"";
position:absolute;
width:0px;
height:0px;
border: 10px solid;
border-color: transparent #87CEFA transparent transparent;
left:-20px;
top:10px;
}
.div-right{
position:relative;
background:#87CEFA;
width:300px;
padding:10px;
border-radius:5px;
}
.div-right:before{
content:"";
position:absolute;
width:0px;
height:0px;
border: 10px solid;
border-color: transparent transparent transparent #87CEFA ;
right:-20px;
top:10px;
}

</style>

<div style="width:500px;margin:40px auto;">
<div class="div-left">
Hello everyone!!!
</div>

<div class="div-right">
Hello everyone!!!
</div>
</div>

Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/Creating%20an%20arrow%20box%20like%20chat%20application%20using%20css

Demo Link :
https://skptricks.github.io/learncoding/design%20arrow%20box%20like%20chat%20application%20using%20css/chat%20arrow%20design.html

This is all about Creating box having pointed arrow using CSS. Hope you like this simple example. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.

Create Clickable Comment Link in PHP :

This tutorial explain how to create clickable link using HTML Comment Box. You May have been observed different links, while posting comments in various blogs and via. these links (Clickable links) you can easily redirect to another page. If the links displayed as a text, then no one will observe you comments and will not get attention from different blogger.

So, Here we are going to provide you a example how to display clickable hyperlink using HTML comment Box.



Check out our blog archive on the topic if you’re looking to learn about Convert URL To Clickable Link Using PHP.
Lets see the complete source code :

index.php
Below code display the comment box and consists of validation code for comment box.
When the comment box is empty and user try to submit the comment then it will display the error message.
When any URL provided as input in comment box and user try to submit the comment then it will display clickable link .


http://www.skptricks.com/2018/01/create-clickable-comment-link-in-php.html


https://www.youtube.com/watch?v=9I2mK4UQ_N8&feature=youtu.be

http://www.skptricks.com/2018/01/jquery-pulsate-animation-effect.html

This post explain how to create JQuery Pulsate Animation Effect. With the help of jquerypulsate library you can create a pulsating effect that's useful for focussing attention to a certain part of your webpage in a subtle way. This pulsate animation is created by Kilian Valkhof.

jQuery.pulsate.js

Adds a pulsating effect to elements by following below steps:
1. Include the Jquery Library File.
2. Include pulsate Library file.
3. Mention the below code to display pulsate animation effect to particular element :

Works in Chrome, Safari and Firefox only.

Let see the complete source code to build more understanding on JQuery Pulsate Animation Effect.
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.pulsate.js"></script>
<style>
.button {
width:260px;
background-color: #00BFFF ;
border-color: #3ac162;
font-weight: bold;
padding: 12px 15px;
color: #ffffff;
margin : 40px;
float:left ;
text-align:center;
}

</style>
<script>
$(function () {
$(".pulse".pulsate();
$(".pulse1".pulsate({glow:false});
$(".pulse2".pulsate({color:"#800000"});
$(".pulse3".pulsate({reach:100});
$(".pulse4".pulsate({speed:2500});
$(".pulse5".pulsate({pause:1000});
$(".pulse6".pulsate({onHover:true});
$(".pulse7".pulsate({
color:"#FFC300",reach:50
});
});


</script>
</head>
<body>

<div class="button pulse"> $(".pulse".pulsate()</div>
<div class="button pulse1"> $(".pulse1".pulsate({glow:false}) </div>
<div class="button pulse2"> $(".pulse2".pulsate({color:"#800000"}) </div>
<div class="button pulse3"> $(".pulse3".pulsate({reach:100}) </div>
<div class="button pulse4"> $(".pulse4".pulsate({speed:2500}) </div>
<div class="button pulse5"> $(".pulse5".pulsate({pause:1000}) </div>
<div class="button pulse6"> $(".pulse6".pulsate({onHover:true}) </div>
<div class="button pulse7"> Click Me </div>
</body>
</html>

Output :

This is all about Jquery pulsate animation effect. In case of any queries please do comments in comment box below.

Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/JQuery%20Pulsate%20Animation%20Effect

http://www.skptricks.com/2018/01/jquery-pulsate-animation-effect.html

Post Link : http://www.skptricks.com/2018/01/simple-form-validation-in-jquery-using-regular-expression.html

In this tutorial we are going to share some idea how to validate simple form using Jquery with the help of regular expression. As we know a regular expression is a special sequence of characters that helps you match or find other strings or sets of strings, using a specialized syntax held in a pattern.

Here we have created user registration form with the help of html and performing form validation using Jquery with the help of regular expression. We have covered below validation :
1. Username validation using regular expression.
2. Email Id Validation using regular expression.
3. Mobile Number Validation using regular expression.
4. Website URL Validation using regular expression.
5. Password Validation using regular expression.

In Case you want to build more understanding on Regular Expression Validation, Check out our blog archive below :

Build Basic Understanding About Regular Expression.
User Defined Function to validate Regular Expression

Post Link : http://www.skptricks.com/2018/01/simple-form-validation-in-jquery-using-regular-expression.html


https://www.youtube.com/watch?v=xECdlwvBhLE

http://www.skptricks.com/2018/02/design-html-button-using-css.html
Design HTML Button Using CSS
by sumit kumar pradhan on February 06, 2018 February 06, 2018 in CSS, html, html5, web development
This post explains How to create CSS buttons with the help of HTML. Lets see the complete examples for square, rounded, oval button etc.


https://www.youtube.com/watch?v=0yMW-l1eGgw

CSS Button Examples :
Example :1

<html>
<head>
<style>
/* Material style */
button {
border: none;
cursor: pointer;
color: white;
padding: 10px 30px;
border-radius: 2px;
font-size: 22px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, .4);

}
.button1 {
background: #ff4040;
}
.button2 {
background: #ffa96b;
}
.button3 {
background: #2196F3;
}
.button4 {
background: #5cd38c;
}


/* Ripple magic */
button{
position: relative;
overflow: hidden;
margin :10px;
}

button:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background: rgba(255, 255, 255, .5);
opacity: 0;
border-radius: 100%;
transform: scale(1, 1) translate(-50%);
transform-origin: 50% 50%;
}

@keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1;
}
20% {
transform: scale(25, 25);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(40, 40);
}
}

button:focus:not(:active)::after {
animation: ripple 1s ease-out;
}


</style>
</head>

<body>

<button class="button1" >Click Me...</button>
<button class="button2" > Click Me...</button>
<button class="button3"> Click Me...</button>
<button class="button4"> Click Me...</button>

</body>
</html>

http://www.skptricks.com/2018/01/circle-scale-in-and-out-animation-effect-using-css3.html

This post explain how to create circle scale in and out animation effect using css3. Here we are using CSS keyframe property to perform scale in and scale out animation effect. All the animation effect is controlled by Keyframes Rule and it provides very smooth animation effect.
CSS Scale Circle


Lets see the complete example for scale in and scale out animation effect.

http://www.skptricks.com/2018/01/circle-scale-in-and-out-animation-effect-using-css3.html

Post link : http://www.skptricks.com/2018/01/create-circle-loader-animation-using-css3.html

This tutorial explain how to create circle loader animation using CSS3. Similarly like our previous tutorial we are using here CSS keyframe attribute to perform circle loading animation effect. This is also called as Spinner Circle Loading. All the animation effect is controlled Keyframes Rule and it provides very smooth animation effect.

border-radius property of css helps to transforms the loader into a circle.
transform : rotate(0deg) or rotate(360deg) property of css helps to create circle loading animation effect using Keyframes Rule.
border-top property where we set the color of border to blue and controlling the spinning effect using Keyframes Rule.
Keyframe Animation :
.loader {
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
border: 3px solid #ddd;
border-top: 3px solid #42a5f5;
border-radius: 50%;
height: 75px;
width: 75px;
}

@keyframes spin {
to {
border-top-color: #FF0000;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}


Let see the complete source code to perform circle loading animation effect using CSS3.

Post link : http://www.skptricks.com/2018/01/create-circle-loader-animation-using-css3.html


https://www.youtube.com/watch?v=ZHVupGqO60I

Post Link : http://www.skptricks.com/2018/01/regular-expression-validation-using-jquery.html
A Regular expressions is a powerful tool in any language. In this tutorial we will be discussing how to use regular expression using Jquery and javascript. A regular expression is an object that describes a pattern of characters.
Regular expression validation using JQuery

In another word Regular expressions are used to perform pattern-matching and "search-and-replace" functions on text. We have created few function which covers different type of validation in HTML Form.

These Function return true and false during the function call.
True - When it is comply with validation expression
False - When it is not comply with validation expression

Complete details to follow post :
http://www.skptricks.com/2018/01/regular-expression-validation-using-jquery.html

http://www.skptricks.com/2018/01/php-limit-data-selections-from-mysql.html

in this tutorial we will explain how Limit Data Selections From a MySQL Database. This technique helps to fetch large number data one by one without any performance issue and by this we can limit the number of records to be returned from MySQL database.


http://www.skptricks.com/2018/01/php-limit-data-selections-from-mysql.html


https://www.youtube.com/watch?v=HKpEl8rNAIQ

http://www.skptricks.com/2018/01/jquery-date-picker-with-example.html

In this tutorial we are going to discuss Jquery UI Datepicker. This is a smallest and powerful jQuery UI datepicker, which provide lots of functionalities and very easy to use and integrate in web based application.

Lets get started and follow the below steps :
Make sure to insert the JQuery library file.
Make sure to insert the datedropper JS file and datedropper CSS stylesheet file.
Make sure to insert input tag and set "text" to the "type" property.
Last step to Initialize datedropper script.
JQuery Date Picker

Lets see the complete example to select date from date picker.

http://www.skptricks.com/2018/01/jquery-date-picker-with-example.html


https://www.youtube.com/watch?v=5UCiUiLw05Y



https://www.youtube.com/watch?v=6wYUeIPi37A