Marquee is one of the most important tags in HTML …
javascript
javascript
Showing 9 Result(s)
Jquery responsive table example
Tutori<table id=”responsive-table-example” class=”table table-bordered table-striped table-condensed”> <thead> <tr> <th>Date</th> <th>Parties/Caption</th> …
HTML program to display the capital of a state
Hello guys, in this tutorials you’ll learn how to code a HTML program to display the capital of a state, it is very easy, just peak these code and paste in your daily code editor as well in text editor keep it separate html, css and javascript file.
HTML Code
<html> <head> <meta charset="utf-8"> <title>viewtechindia.com</title> </head> <body> <form class="form" name="myform" id="myForm"> <lable class="label">Select Country:</lable> <select class="select" name="state" id="countySel" size="1"> <option value="" selected="selected">Select Country</option> </select> <br> <br> <lable class="label">Select State:</lable> <select class="select" name="countrya" id="stateSel" size="1"> <option class="option" value="" selected="selected">Please select Country first</option> </select> <br> <br> <lable class="label">Select District: </lable><select class="select" name="district" id="districtSel" size="1"> <option value="" selected="selected">Please select State first</option> </select><br> <input class="submit-button" type="submit"> </form> </body> </html>
CSS Code
body {
font-family: system-ui;
background: #f06d06;
color: white;
text-align: center;
}
.form {
border:solid 1px #ffffff;
padding:40px;
text-align:left;
display:block;
margin:65px auto 0px auto;
max-width:400px;
border-radius:5px; background:rbga(256,256,256, 0.5);
}
.select {
height:35px;
border-radius:5px;
min-width:250px;
padding:7px 7px;
}
.label {
min-width:130px;
display:inline-block;
}
.submit-button {
height:35px;
border-radius:5px;
min-width:250px;
padding:7px 7px;
border:none;
background:#f2f2f2;
margin-left:130px;
margin-top:25px
}
JavaScript
var stateObject = {
"India": { "Delhi": ["new Delhi", "North Delhi"],
"Kerala": ["Thiruvananthapuram", "Palakkad"],
"Goa": ["North Goa", "South Goa"],
},
"Australia": {
"South Australia": ["Dunstan", "Mitchell"],
"Victoria": ["Altona", "Euroa"]
}, "Canada": {
"Alberta": ["Acadia", "Bighorn"],
"Columbia": ["Washington", ""]
},
}
window.onload = function () {
var countySel = document.getElementById("countySel"),
stateSel = document.getElementById("stateSel"),
districtSel = document.getElementById("districtSel");
for (var country in stateObject) {
countySel.options[countySel.options.length] = new Option(country, country);
}
countySel.onchange = function () {
stateSel.length = 1; // remove all options bar first
districtSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
for (var state in stateObject[this.value]) {
stateSel.options[stateSel.options.length] = new Option(state, state);
}
}
countySel.onchange(); // reset in case page is reloaded
stateSel.onchange = function () {
districtSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
var district = stateObject[countySel.value][this.value];
for (var i = 0; i < district.length; i++) {
districtSel.options[districtSel.options.length] = new Option(district[i], district[i]);
}
}
}
View Result
Responsive mega menu without bootstrap and with bootstrap
Mega menus are a type of drop-down, which seeks to overcome some of the usability drawbacks of traditional drop-downs. Hierarchy of your navigation is made visible all at once and the amount of clicking, searching, and navigating is reduced.
This module allows you to build mega menus by leveraging jQuery and the prevailing Bootstrap menu system. Megamenu takes a menu that is 3 levels deep, and converts it into a categorized 3-level mega menu, which is placed into your site as a block.
Responsive and Mega menu
See the Pen
Responsive and Mega menu by Arjun Amgain (@arjunamgain)
on CodePen.
Responsive Mega Menu – Navigation
See the Pen
Responsive Mega Menu – Navigation by samir alley (@samiralley)
on CodePen.
Mega Menu Dropdowns with Foundation 5
See the Pen
Mega Menu Dropdowns with Foundation 5 by SitePoint (@SitePoint)
on CodePen.
Responsive Bootstrap mega menu with various content
See the Pen
Responsive Bootstrap mega menu by Martin Stanek (@skywalkapps)
on CodePen.
How to make datepicker responsive?
In this tutorial, learn how to add datepicker to input field using Bootstrap. The short answer is to use the bootstrap-datepicker.js to create a text box with the date picker. The input box if contains the date picker will display the date picker when the user clicks on it.
The date picker adds the date picker to the input box which contains days, month and year to select. When you select the date from the date picker, it adds the selected date to the input box.
So, let’s start creating a date picker input box using Bootstrap with the below methods.
Simple Bootstrap datepicker example
See the Pen
Simple Bootstrap datepicker example by Luís Cruz (@milz)
on CodePen.
Home Bootstrap Datepicker with popup
See the Pen
Bootstrap datepicker in modal by Sinetheta (@Sinetheta)
on CodePen.
CodePen Home Bootstrap Datepicker Demo
See the Pen
Bootstrap Datepicker Demo by Ryan Mulligan (@hexagoncircle)
on CodePen.
Bootstrap Datepicker – Inline
See the Pen
Bootstrap Datepicker – Inline by alenii (@alenii)
on CodePen.
Date Picker Untuk Jadwal Penerbangan Travel Website
See the Pen
Date Picker Untuk Jadwal Penerbangan Travel Website by Desain 360 (@desain360)
on CodePen.
28+ Best CSS/Java Script Graph/Chart with Examples
Now day Graph/Chart is growing fast in web industries, it …
10+ Best CSS/Java Script Tabs with Examples
Learn how to create tabs view with CSS and JavaScript? …
35+ Completely CSS HTML Login Page Design Tutorials
Dear learner, In this collection you’ll learn login page design …
26+ beautiful css/js progress bar for designers or developers
You can find 26+ Beautiful progress bar all progress bar …