I have a nav bar and a a div on a website right now. The div is slightly covering the nav bar, however when I resize my window it completely covers the nav bar. I would like it to always somewhat cover the nav bar but not completely.
HTML
<body>
<div id="wrapper">
<ul>
<li class="nav">Home</li>
<li class="nav">About Me</li>
<li class="nav">Projects</li>
<li class="nav">Resume</li>
<li class="nav">Contact</li>
</ul>
<div id="bod">
<h1 class="title">Home</h1>
</div>
</div>
</body>
CSS
#bod {
height: 100%;
width: 86%;
background-color: #F4F3EE;
position: absolute;
top: 0px;
right: 0px;
box-shadow: -1px 0px 10px 1px #999;
-moz-box-shadow: -1px 0px 10px 1px #999;
-webkit-box-shadow: -1px 0px 10px 1px #999;}
.nav {
border: 1px solid #F4F3EE;
width:20%;
height:100px;
color: #F4F3EE;
margin: 2px 0px 0px 10px;
text-align: left;
font-family: Tahoma, Geneva, sans-serif;
font-size: 30px;
padding: 0px 0px 5px 0px;
list-style-type: none;
border-radius: 5px;
box-shadow: -1px 0px 10px 1px #999;
-moz-box-shadow: -1px 0px 10px 1px #999;
-webkit-box-shadow: -1px 0px 10px 1px #999;
box-shadow: inset 1px 2px 4px #F4F3EE;
-moz-box-shadow: inset 1px 2px 4px #F4F3EE;
-webkit-box-shadow: inset 1px 2px 4px #F4F3EE;
background: #b58aa5;
background: -moz-linear-gradient(top, #ad8599 1%, #b58aa5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ad8599), color-stop(100%,#b58aa5));
background: -webkit-linear-gradient(top, #ad8599 1%,#b58aa5 100%);
background: -o-linear-gradient(top, #ad8599 1%,#b58aa5 100%);
background: -ms-linear-gradient(top, #ad8599 1%,#b58aa5 100%);
background: linear-gradient(to bottom, #ad8599 1%,#b58aa5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ad8599', endColorstr='#b58aa5',GradientType=0 );
JavaScript
$(document).ready(function() {
$('.nav').mouseenter(function() {
$(this).animate({marginLeft: '-=20px'}, 100);
$(this).addClass('.nav1');
});
$('.nav').mouseleave(function() {
$(this).animate({marginLeft: '+=20px'}, 100);
});
});
I can't for the life of me figure out what to do make sure the user can still see the nav when the window is resized.
Set left: 200px; on #bod, that will fix it. Then you can get rid of the width: 86%; which is set on #bod as well. You are absolutely positioning #bod, this means that #bod is taken out of the regular flow and turned into it's own thing. Now you can set top, left, bottom and right to specify the space between the sides of the web page and #bod. If you set bottom: 0px; on #bod you won't need height: 100%; on #bod either.
Related
https://jsfiddle.net/1exbczjy/
<body>
<section class="main">
<form class="search" action="">
<input type="search" id ="searchit" placeholder="search.." />
<ul class="results" id="searchlist">
</ul>
</form>
</section>
</body>
This is a demo of the code that I am trying to run , my original code contains js file which is dynamically populating my ul class using the innerHTML function but the output is same as the dummy list data I have provided.
I am not able to understand why my list tag does not work . I have tried to resolve it using other answers provided on this site , checking for z index and absolute and relative position of a and li tag.
The reason is because on click, the input loses its :focus (as pointed out by shaochuancs) and the content is hidden before the click on the anchor is registered. A click event consists of mousedown and mouseup event. The loss of focus is triggered on mousedown anywhere on the page. So just prevent the loss of :focus on mousedown on the anchor tags. The rest of the code would function as expected, because the anchor tag click is triggered on mouseup.
So the issue can be dealt with some basic javascript/jQuery, by simply preventDefault() on mousedown on the anchor tags.
$("a").mousedown(function(ev) {
ev.preventDefault();
}
Note that in this code snippet the link doesn't load because it is blocked by the frame. But you can see in the console that the link is clicked.
$("a").mousedown(function(ev) {
ev.preventDefault();
console.log($(this).attr("href"));
console.log("Click triggered");
});
/* * Copyright (c) 2012 Thibaut Courouble
* Licensed under the MIT License
================================================== */
body {
background: #f7f7f7;
color: #404040;
font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 20px;
}
a {
color: #1e7ad3;
text-decoration: none;
}
a:hover {
text-decoration: underline
}
.container,
.main {
width: 640px;
margin-left: auto;
margin-right: auto;
height: 300px;
}
.main {
margin-top: 50px
}
input {
font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
color: #555860;
}
.search {
position: relative;
margin: 0 auto;
width: 300px;
}
.search input {
height: 26px;
width: 100%;
padding: 0 12px 0 25px;
border-width: 1px;
border-style: solid;
border-color: #a8acbc #babdcc #c0c3d2;
border-radius: 13px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
}
.search input:focus {
outline: none;
border-color: #66b1ee;
-webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
}
.search input:focus+.results {
display: block
}
.search .results {
display: none;
position: absolute;
top: 35px;
left: 0;
right: 0;
z-index: 10000;
padding: 0;
margin: 0;
border-width: 1px;
border-style: solid;
border-color: #cbcfe2 #c8cee7 #c4c7d7;
border-radius: 3px;
background-color: #fdfdfd;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
background-image: linear-gradient(top, #fdfdfd, #eceef4);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.search .results li {
display: block
}
.search .results li:first-child {
margin-top: -1px
}
.search .results li:first-child:before,
.search .results li:first-child:after {
display: block;
content: '';
width: 0;
height: 0;
position: absolute;
left: 50%;
margin-left: -5px;
border: 5px outset transparent;
}
.search .results li:first-child:before {
border-bottom: 5px solid #c4c7d7;
top: -11px;
}
.search .results li:first-child:after {
border-bottom: 5px solid #fdfdfd;
top: -10px;
}
.search .results li:first-child:hover:before,
.search .results li:first-child:hover:after {
display: none
}
.search .results li:last-child {
margin-bottom: -1px
}
.search .results li a {
display: block;
position: relative;
margin: 0 -1px;
padding: 6px 40px 6px 10px;
color: #808394;
font-weight: 500;
text-shadow: 0 1px #fff;
border: 1px solid transparent;
border-radius: 3px;
}
.search .results li a span {
font-weight: 200
}
.search .results li a:before {
content: '';
width: 18px;
height: 18px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -9px;
}
.search .results li a:hover {
text-decoration: none;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
border-color: #2380dd #2179d5 #1a60aa;
background-color: #338cdf;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
background-image: linear-gradient(top, #59aaf4, #338cdf);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}
:-moz-placeholder {
color: #a7aabc;
font-weight: 200;
}
::-webkit-input-placeholder {
color: #a7aabc;
font-weight: 200;
}
.search li {
padding: 0px;
}
.search li a {
margin: 0px;
display: block;
width: 100%;
height: 100%;
}
.lt-ie9 .search input {
line-height: 26px
}
/*adding effect when the mouse is hovered over list item*/
/*adding effect when the mouse is hovered over list item*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Input Autocomplete Suggestions Demo</title>
<link rel="shortcut icon" href="http://designshack.net/favicon.ico">
<link rel="icon" href="http://designshack.net/favicon.ico">
<body>
<section class="main">
<form class="search" action="">
<input type="search" id="searchit" placeholder="search.." />
<ul class="results" id="searchlist">
<li>Tag A</li>
<li>Tag B</li>
</ul>
</form>
</section>
</body>
The root cause is: when anchor tag is clicked, .search input lose its :focus status, which makes .search input:focus + .results { display: block } disabled and .search .results's display as none again -- As the <a> tag does not exist on page anymore, nothing happens. It has nothing to do with ul or li.
Here is a simplified example: https://jsfiddle.net/cshao/rtonLr4z/, the <a> won't work as in the question.
There is also another possibility. If you set the decoration of the Anchor to none and change the background of the li on hovering the Achor link only works when you are hovering on the text of the Anchor but what you want is that the Anchor activates on the whole surface of the li, but how you can make that work is another thing.
I have created a tooltip in my html file like this:
<span title="" class="duedate-warning-msg"></span>
And I set the CSS property like this:
.duedate-warning-msg{
background: url("/static/img/error.png") no-repeat scroll 14px 12px white;
border-color: #f5c7c7;
padding: .5em 0.25em 0.5em 2.5em;
title:"my tooltip";
color: #D11006;
}
span:hover{
position:relative;
}
span[title]:hover:after {
content: "This statement is past due.";
padding: 4px 8px;
color: white;
font-size:16px;
font-family: "open_sansregular";
background: #0679ca;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
The above style created tooltip perfectly. Only problem which I am facing is that I want background color of tooltip is blue. But it always shows gray. Why it is happening so?
Remove the background-image and add background, like so:
span[title]:hover:after {
content: "This statement is past due.";
padding: 4px 8px;
color: white;
font-size:16px;
font-family: "open_sansregular";
background: #0679ca;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background: #00F;
}
Easy, in background-image property replace #cccccc with a color of your choice, assuming that you want to keep the fade-to-almost-white (#eeeeee) gradient.
Remove the background image from span[title]:hover:after
Here is the working Demo
I have a local html resource loading in a UIWebView. One button is styled with CSS that when pressed, presents an unwanted keyboard and allows typing on the button
In my local html file
<style>
.button {
border: 0px solid #ed1717;
background: #e01414;
background: -webkit-gradient(linear, left top, left bottom, from(#e01414), to(#e01414));
background: -webkit-linear-gradient(top, #e01414, #e01414);
background: -moz-linear-gradient(top, #e01414, #e01414);
background: -ms-linear-gradient(top, #e01414, #e01414);
background: -o-linear-gradient(top, #e01414, #e01414);
background-image: -ms-linear-gradient(top, #e01414 0%, #e01414 100%);
padding: 14px 28px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
color: #ffffff;
font-size: 17px;
font-family: helvetica, serif;
text-decoration: none;
vertical-align: middle;
}
</style>
html button local resource
align=center ><INPUT onclick=calculate(this.form) class=button value="Press" name=calculate_button>
Try setting the type="button" attribute to the input element. This should do the trick :)
I'm having a lot of trouble getting this to work properly. I just want to make .accordion-content stay upon unhover. I've tried several approaches to this and now I'm pretty much at a total loss. Here is the code I'm working with:
HTML
<ul class="accordion-thing">
<li>
<a>How do I setup my Chem+Nect Drum?<span>Learn More</span></a>
<ul class="accordion-content">
<li><em>01</em></li>
</ul>
</li>
CSS
.accordion-thing,
.accordion-thing ul,
.accordion-thing li,
.accordion-thing a,
.accordion-thing span {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.accordion-thing li {
list-style: none !important;
}
.accordion-thing li > a {
display: block;
position: relative;
min-width: 910px;
min-height: 46px;
padding: 0 10px 0 40px;
vertical-align: middle !important;
color: #fdfdfd;
font: bold 16px/42px Arial, sans-serif !important;
text-decoration: none;
text-shadow: 0px 1px 0px rgba(0,0,0, .35) !important;
background: #6c6e74;
background: -moz-linear-gradient(top, #6c6e74 0%, #4b4d51 100%) !important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51)) !important;
background: -webkit-linear-gradient(top, #6c6e74 0%, #4b4d51 100%) !important;
background: -o-linear-gradient(top, #6c6e74 0%, #4b4d51 100%) !important;
background: -ms-linear-gradient(top, #6c6e74 0%, #4b4d51 100%) !important;
background: linear-gradient(top, #6c6e74 0%, #4b4d51 100%) !important;
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
.accordion-thing li > a span {
display: block;
position: absolute;
top: 12px;
right: 0px;
padding: 0 10px;
margin-right: 10px;
font: normal bold 14px/18px Arial, sans-serif !important;
background: #404247;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}
.accordion-content li a {
color: #797979;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);
background: #e5e5e5;
border-bottom: 1px solid #c9c9c9;
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
.accordion-content li:last-child a { border: none; }
.accordion-content li > a span {
color: #797979;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);
background: transparent;
border: 1px solid #c9c9c9;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.accordion-content {
position: absolute;
top: o;
left: 0
margin-left: 14px;
color: #a6a6a6;
font: normal 10px/32px Arial, sans-serif !important;
}
.accordion-thing > li:hover > a,
.accordion-thing > li:target > a {
color: #00334c;
text-shadow: 1px 1px 1px rgba(255,255,255, .2);
background: #0679b9 !important;
background: -moz-linear-gradient(top, #0679b9 0%, #3b59e2 100%) !important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0679b9), color-stop(100%,#3b59e2)) !important;
background: -webkit-linear-gradient(top, #0679b9 0%,#3b59e2 100%) !important;
background: -o-linear-gradient(top #0679b9 0%,#3b59e2 100%) !important;
background: -ms-linear-gradient(top #0679b9 0%,#3b59e2 100%) !important;
background: linear-gradient(top #0679b9 0%,#3b59e2 100%) !important;
}
.accordion-thing > li:hover > a span,
.accordion-thing > li:target > a span {
color: #fdfdfd !important;
text-shadow: 0px 1px 0px rgba(0,0,0, .35);
background: #00334c;
}
.accordion-content li:hover a { background: #efefef; }
.accordion-thing li > .accordion-content {
height: 0;
overflow: hidden;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all .2s ease-in-out;
}
.accordion-thing li:hover > .accordion-content {
height: 98px;
}
Is there some Javascript I can add to make this work properly?
If you want to have the hover style applied permanently after the first hover until the page refreshes, you will have to use javascript:
var accordion = document.getElementsByClassName('accordion-thing')[0];
accordion.addEventListener('mouseenter', function () {
this.classList.add('hovered');
});
then in your css, anywhere that you have .accordion-thing li:hover {}, you can change that to .accordion-thing.hovered li {}
Here is a simple example to show this concept.
I have this wireframe I am working from: http://problemio.com/wireframe.pdf
I am trying to make the tabbed items that read like "ongoing discussion | suggested solutions | solution history... " to look tabbed as they are on the wireframe.
So far I am able to use JavaScript to show/hide the correct elements, but what I am not sure how to do is highlight the tab that is active, and how to draw the lines surrounding the tab.
Here is an example of what I have so far:
http://www.problemio.com/problems/problem.php?problem_id=179
Even if I make each link a div, how do I toggle between the styling of those divs?
Thanks!!
If you already have the showing and hiding down and are looking for a non-jQuery option you could try something like this:
http://jsfiddle.net/wqEdj/
It's a basic styling of straight anchor elements.
You're easiest bet will be using jQueryUI Tabs. Example here http://jqueryui.com/demos/tabs/
Here is a CSS/JS solution that you can run here to see it in action. JQuery is used, but could easily be replaced with standard JS. No images required.
The source of this solution:
https://css-tricks.com/better-tabs-with-round-out-borders/
Another related example with the tabs under the line can be found here: http://codepen.io/chriscoyier/pen/JozNqX
$(function() {
$("li").click(function(e) {
e.preventDefault();
$("li").removeClass("selected");
$(this).addClass("selected");
});
});
.tabrow {
text-align: center;
list-style: none;
margin: 20px 0 20px;
padding: 0;
line-height: 24px;
height: 26px;
overflow: hidden;
font-size: 12px;
font-family: verdana;
position: relative;
}
.tabrow li {
border: 1px solid #AAA;
background: #D1D1D1;
background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
display: inline-block;
position: relative;
z-index: 0;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
text-shadow: 0 1px #FFF;
margin: 0 -5px;
padding: 0 20px;
}
.tabrow a {
color: #555;
text-decoration: none;
}
.tabrow li.selected {
background: #FFF;
color: #333;
z-index: 2;
border-bottom-color: #FFF;
}
.tabrow:before {
position: absolute;
content: " ";
width: 100%;
bottom: 0;
left: 0;
border-bottom: 1px solid #AAA;
z-index: 1;
}
.tabrow li:before,
.tabrow li:after {
border: 1px solid #AAA;
position: absolute;
bottom: -1px;
width: 5px;
height: 5px;
content: " ";
}
.tabrow li:before {
left: -6px;
border-bottom-right-radius: 6px;
border-width: 0 1px 1px 0;
box-shadow: 2px 2px 0 #D1D1D1;
}
.tabrow li:after {
right: -6px;
border-bottom-left-radius: 6px;
border-width: 0 0 1px 1px;
box-shadow: -2px 2px 0 #D1D1D1;
}
.tabrow li.selected:before {
box-shadow: 2px 2px 0 #FFF;
}
.tabrow li.selected:after {
box-shadow: -2px 2px 0 #FFF;
}
<ul class="tabrow">
<li>Lorem</li>
<li>Ipsum</li>
<li class="selected">Sit amet</li>
<li>Consectetur adipisicing</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>