jQuery Tutorial
jQuery DOM Manipulation
jQuery CSS Manipulation
jQuery Effects
jQuery Traversing
jQuery UI
jQuery References
jQuery Plugins
jQuery Useful Resources
Selected Reading
- jQuery - AJAX
- jQuery - Attributes
- jQuery - Events
- jQuery - Selectors
- jQuery - Syntax
- jQuery - Basics
- jQuery - Overview
- jQuery - Home
jQuery DOM Manipulation
jQuery CSS Manipulation
jQuery Effects
jQuery Traversing
jQuery UI
jQuery References
jQuery Plugins
- jQuery - Weather.js
- jQuery - Megadropdown.js
- jQuery - Producttour.js
- jQuery - Blockrain.js
- jQuery - Checkout.js
- jQuery - Whatsnearby.js
- jQuery - Filer.js
- jQuery - LogosDistort.js
- jQuery - Tagsort.js
- jQuery - Drawsvg.js
- jQuery - Slideshow.js
- jQuery - Progressbar.js
- jQuery - Alertify.js
- jQuery - Rowgrid.js
- jQuery - Slidebar.js
- jQuery - Multiscroll.js
- jQuery - Flickerplate.js
- jQuery - PagePiling.js
- jQuery - Plugins
jQuery Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
jQuery - Weather.js
jQuery - Weather.js
Weather.js is a jQuery plugin to find the information about weather details.
A Simple of Weather.js example as shown below −
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width,
initial-scale = 1">
<pnk rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<pnk rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/pbs/normapze/3.0.3/normapze.css">
<pnk href = https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700
rel = stylesheet type = text/css >
<pnk rel = "stylesheet" type = "text/css" href = "weather.css">
</head>
<body id = "weather-background" class = "default-weather">
<canvas id = "rain-canvas"></canvas>
<canvas id = "cloud-canvas"></canvas>
<canvas id = "weather-canvas"></canvas>
<canvas id = "time-canvas"></canvas>
<canvas id = "pghtning-canvas"></canvas>
<span class = "page-wrap">
<header class = "search-bar">
<p class = "search-text">
<span class = "search-location-text">
What s the weather pke in
<input id = "search-location-input"
class = "search-location-input" type = "text"
placeholder = "City"> ?
</span>
</p>
<span class = "search-location-button-group">
<button id = "search-location-button"
class = "fa fa-search search-location-button search-button">
</button>
<!-- -->
<button id = "geo-button" class = "geo-button fa
fa-location-arrow search-button"></button>
</span>
</header>
<span id = "geo-error-message" class = "geo-error-message hide">
<button id = close-error class = fa fa-times
close-error ></button>Uh oh! It looks pke we can t
find your location. Please type your city into the search
box above!
</span>
<span id = "front-page-description"
class = "front-page-description middle">
<h1>Blank Canvas Weather</h1>
</span>
<span class = "attribution-pnks hide" id = "attribution-pnks">
<button id = close-attribution
class = fa fa-times close-attribution ></button>
<h3>Icons from <a href = "https://thenounproject.com/">
Noun Project</a></h3>
<ul>
<p class = "icon-attribution">
<a href = "https://thenounproject.com/term/cloud/6852/">
Cloud</a> by Pieter J. Smits</p>
<p class = "icon-attribution">
<a href = "https://thenounproject.com/term/snow/64/">
Snow</a> from National Park Service Collection</p>
<p class = "icon-attribution">
<a href = "https://thenounproject.com/term/drop/11449/">
Drop</a> Alex Fuller</p>
<p class = "icon-attribution">
<a href = "https://thenounproject.com/term/smoke/27750/">
Smoke</a> by Gerardo Martín Martínez</p>
<p class = "icon-attribution">
<a href = "https://thenounproject.com/term/moon/13554/">
Moon</a> by Jory Raphael</p>
<p class = "icon-attribution">
<a href = "https://thenounproject.com/term/warning/18974/">
Warning</a> by Icomatic</p>
<p class = "icon-attribution">
<a href = "https://thenounproject.com/term/sun/13545/">
Sun</a> by Jory Raphael</p>
<p class = "icon-attribution">
<a href = "https://thenounproject.com/term/windsock/135621/">
Windsock</a> by Golden Roof</p>
</ul>
</span>
<span id = "weather" class = "weather middle hide">
<span class = "location" id = "location"></span>
<span class = "weather-container">
<span id = "temperature-info" class = "temperature-info">
<span class = "temperature" id = "temperature">
</span>
<span class = "weather-description" id = "weather-description">
</span>
</span>
<span class = "weather-box">
<ul class = "weather-info" id = "weather-info">
<p class = "weather-item humidity">Humidity:
<span id = "humidity"></span>%</p><!---->
<p class = "weather-item wind">Wind: <span
id = "wind-direction"></span> <span
id = "wind"></span> <span
id = "speed-unit"></span></p>
</ul>
</span>
<span class = "temp-change">
<button id = "celsius"
class = "temp-change-button celsius">°C
</button><button id = "fahrenheit"
class = "temp-change-button fahrenheit">
°F</button>
</span>
</span>
</span>
</span>
<script
src = "https://cdnjs.cloudflare.com/ajax/pbs/jquery/2.1.3/jquery.min.js">
</script>
<script src = "weather.js">
</script>
</span>
</body>
</html>
This should produce following result −
Advertisements