TECH | PRO

Wednesday 20 February 2019

HOW TO POP WITH TOGGLE BUTTON HTML5 CSS3 JAVASCRIPT

POP MENU LIKE NOTIFICATION IN HTML5 CSS3 WITH JAVASCRIPY

When you click on Click on " Click me to Pop Up! ", Menu will appear with some text ,
as "Hello Mr Who ! How are You Feeling today " You can edit the text and can recreate the Edit Text

CODE FOR THIS SCRIPT

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}

@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
</style>
</head>
<body style="text-align:center">

<h2>Popup</h2>

<div class="popup" onclick="myFunction()">Click me to Pop Up!
<span class="popuptext" id="myPopup">Hello Mr Who ! How are You Feeling today</span>
</div>

<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>

</body>
</html>

MAKE SHADED BOX FOR TEXT HTML5 CSS3

UMER MUKHTAR WEB DEVELOPMENT ,

To make a blockquote without a box, you simply type your text, then highlight it, then click on the Quote Mark button. If you look at your Edit HTML tab, you’ll see the HTML for a blockquote is <blockquote>This is some quoted text.</blockquote>

To spice up your quote you may want to add a shaded box so it stands out on your page more. To do that, copy and paste this code into your Edit HTML tab (not your Compose tab).

<style="border: 2px solid #666; padding: 10px; background-color: #ccc;">
 This is some quoted text.

BOX MODEL APPEAR CLICK ON BUTTON HTML5 CSS BOOSTRAP

UMER MUKHTAR WEB DEVELOPMENT ,

BOX MODEL MENU APPEAR CLICK ON BUTTON

When You Click on Button and it appears Bootstrap Model . Model contain Some Type of Information. This is made in Bootstap in HTML5 Source .

It Look Like this.

When You Click On View Announcement Button , Following Menu will be Pop Up

Source Code For This Bootstrape

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Bootstrap Example</title>

  <meta charset="utf-4">

  <meta name="viewport" content="width=device-width, initial-scale=3">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

</head>

<body>



<div class="container">

  <h2>
Filterable Table</h2>
<p>
Type something in the input field to search the table for first names, last names or emails:</p>
<input class="form-control" id="myInput" type="text" placeholder="Search..">

  <br>

  <table class="table table-bordered table-striped">

    <thead>
<tr>

        <th>Firstname</th>

        <th>Lastname</th>

        <th>Email</th>

      </tr>
</thead>

    <tbody id="myTable">
<tr>

        <td>John</td>

        <td>Doe</td>

        <td>john@example.com</td>

      </tr>
<tr>

        <td>Mary</td>

        <td>Moe</td>

        <td>mary@mail.com</td>

      </tr>
<tr>

        <td>July</td>

        <td>Dooley</td>

        <td>july@greatstuff.com</td>

      </tr>
<tr>

        <td>Anja</td>

        <td>Ravendale</td>

        <td>a_r@test.com</td>

      </tr>
</tbody>

  </table>
<p>
Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
<script>

$(document).ready(function(){

  $("#myInput").on("keyup", function() {

    var value = $(this).val().toLowerCase();

    $("#myTable tr").filter(function() {

      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

    });

  });

});

</script>



</body>

</html>

You Can Edit Code Easily and Add Your Desire type Text .

FILTER TABLE DATA HTML5 CSS3

UMER MUKHTAR WEB DEVELOPMENT ,

SEARCH LARGE TABLE WITH KEYWORDS

Sometimes we have Table , Which contains Data of Different Persons with His Name , Father Name

CNIC and some other relevent data . Table will Look like we made in Excel . When You make such Table in HTML5 CSS3 and Display it on web and you are looking for your Data , Si if Data is about of 1k-10K People , so it will take time to find your Information as you will just scroll and Scroll.

So Here we have a Filter Search Option in HTML5 which make it easy for finding information in a

long Table with huge Information.

Here We Will look into Example

In Above Picture , you are seeing Table and their Having Search Bar and Below are some Information of Different People with Their Correponding Name , Last Name and Email.When You write your Name , Last Name or Email Result of that record will be singly Displayed. If Multiple record of a single Name or Exist , then Multiple record of that Name will be Displayed If your search keywords are Same in other Rows.

SOURCE CODE FOR THIS FILTER TABLE

<html lang="en">

<head>

  <title>Bootstrap Example</title>

  <meta charset="utf-4">

  <meta name="viewport" content="width=device-width, initial-scale=3">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

</head>

<body>



<div class="container">

  <h2>Filterable Table</h2>

  <p>Type something in the input field to search the table for first names, last names or emails:</p>  

  <input class="form-control" id="myInput" type="text" placeholder="Search..">

  <br>

  <table class="table table-bordered table-striped">

    <thead>

      <tr>

        <th>Firstname</th>

        <th>Lastname</th>

        <th>Email</th>

      </tr>

    </thead>

    <tbody id="myTable">

      <tr>

        <td>John</td>

        <td>Doe</td>

        <td>john@example.com</td>

      </tr>

      <tr>

        <td>Mary</td>

        <td>Moe</td>

        <td>mary@mail.com</td>

      </tr>

      <tr>

        <td>July</td>

        <td>Dooley</td>

        <td>july@greatstuff.com</td>

      </tr>

      <tr>

        <td>Anja</td>

        <td>Ravendale</td>

        <td>a_r@test.com</td>

      </tr>

      

      

    </tbody>

  </table>

  

  <p>Note that we start the search in tbody, to prevent filtering the table headers.</p>

</div>



<script>

$(document).ready(function(){

  $("#myInput").on("keyup", function() {

    var value = $(this).val().toLowerCase();

    $("#myTable tr").filter(function() {

      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

    });

  });

});

</script>



</body>

</html>

Code can Be Edit and You can Add Multiple Rows , Columns or any other Information.

STUDENT EXAM RESULT DATABASE SEARCH PHP MYSQL WITH SOURCE CODE

UMER MUKHTAR PHP MYSQL PROJECT ,

STUDENT EXAM RESULT PHP MYSQL WITH SOURCE CODE
This Project is about Student Result Database . It Works as You can Search All Papers Result of Student just by his Roll No , Name ,CNIC and It will Display His All Papers Marks .
This Project Works under PHP MYSQL Server . You can Simply Host it in your own website or You can Check the Project Performance on your Local Xamp or Wamp Server .

Following is the ScreenShot of that Database Search Platform. This is Open Search Project , Like
it does not require Student Registration , or any type Account or Password.

Look in the below Picture , There is Simple Search BarJust Enter Your ID or Roll No and Select Your Exam Session or ClassHit Enter and It will Display your Result

When You Enter Your Roll No, it will Display your Result Like This

HOW TO SETUP THIS PROJECT DATABASE

Follow The Steps

1. Extract The Downloaded Zip

2. Copy The Folder into your Xamp OR Wamp Server " htdocs"

3. Open http://localhost/phpmyadmin in Browser

4. Create Database with name " Result "

5. Import Result(1).sql

6. Load the URL http://localhost/results/

7. You can Enter Student Result Data in Database Corresponding Table

Download it From Below Link

File Information

Zip File is Password Protected . Enter the Following Password During Extracting

Password : www.umertech4you.blogspot.com
File Name: results.zip

Size : 1.38 MB

TUTORIALS REGARDING HTML5 CSS3 COMING SOON

UMER MUKHTAR WEB DEVELOPMENT ,

TUTORIALS WILL BE UPLOADED EACH DAY ABOUT HTML5. WAIT AND VISIT REGULARLY

HOW TO SELECT RAM AND SSD FOR YOUR PC

UMER MUKHTAR HOW , PC SOFTWARE

Crucial System Scanner

Downloading and running the Crucial System Scanner is easy.

First, agree to the terms and conditions.

Click the "download the scanner" button, and choose "Save File" when prompted.

Save the file to your desktop, or anywhere you prefer.

Navigate to this saved CrucialScan.exe file and open. If you get a security warning, click "Run" to allow the download.

It will take several moments while your browser is updated with your scan results.

The Crucial System Scanner is a tool that helps you find guaranteed-compatible memory and storage upgrades for your system. Crucial explains how the System Scanner automatically analyzes your system's specs and suggests upgrades that are designed to work best.

Wednesday 20 February 2019

HOW TO POP WITH TOGGLE BUTTON HTML5 CSS3 JAVASCRIPT

POP MENU LIKE NOTIFICATION IN HTML5 CSS3 WITH JAVASCRIPY

CODE FOR THIS SCRIPT

Thursday 14 February 2019

MAKE SHADED BOX FOR TEXT HTML5 CSS3

BOX MODEL APPEAR CLICK ON BUTTON HTML5 CSS BOOSTRAP

BOX MODEL MENU APPEAR CLICK ON BUTTON

It Look Like this.

When You Click On View Announcement Button , Following Menu will be Pop Up

Wednesday 13 February 2019

FILTER TABLE DATA HTML5 CSS3

SEARCH LARGE TABLE WITH KEYWORDS

SOURCE CODE FOR THIS FILTER TABLE

STUDENT EXAM RESULT DATABASE SEARCH PHP MYSQL WITH SOURCE CODE

Look in the below Picture , There is Simple Search BarJust Enter Your ID or Roll No and Select Your Exam Session or ClassHit Enter and It will Display your Result

When You Enter Your Roll No, it will Display your Result Like This

HOW TO SETUP THIS PROJECT DATABASE

Follow The Steps

Download it From Below Link

File Information

TUTORIALS REGARDING HTML5 CSS3 COMING SOON

Friday 8 February 2019

HOW TO SELECT RAM AND SSD FOR YOUR PC

Crucial System Scanner

Follow Us

Recent

Featured post

FILTER TABLE DATA HTML5 CSS3

Blog Archive

BLOGS CONNECT

NAVIGATE

Get TO Know Us

Wednesday 20 February 2019

POP MENU LIKE NOTIFICATION IN HTML5 CSS3 WITH JAVASCRIPY

CODE FOR THIS SCRIPT

Thursday 14 February 2019

BOX MODEL MENU APPEAR CLICK ON BUTTON

It Look Like this.

When You Click On View Announcement Button , Following Menu will be Pop Up

Wednesday 13 February 2019

SEARCH LARGE TABLE WITH KEYWORDS

SOURCE CODE FOR THIS FILTER TABLE

Look in the below Picture , There is Simple Search BarJust Enter Your ID or Roll No and Select Your Exam Session or ClassHit Enter and It will Display your Result

When You Enter Your Roll No, it will Display your Result Like This

HOW TO SETUP THIS PROJECT DATABASE

Follow The Steps

Download it From Below Link

File Information

Friday 8 February 2019

Crucial System Scanner

Follow Us

Recent

Featured post

Blog Archive

BLOGS CONNECT

NAVIGATE

Get TO Know Us

Total Pageviews