Skip to content

Instantly share code, notes, and snippets.

@ravidaram

ravidaram/addclass

Created August 15, 2013 23:54
Show Gist options
  • Save ravidaram/6246049 to your computer and use it in GitHub Desktop.
Save ravidaram/6246049 to your computer and use it in GitHub Desktop.
Download ZIP
methods-jquery
Raw
addclass
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: blue;
}
.highlight {
background: yellow;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>
$( "p" ).last().addClass( "selected" );
$( "p" ).last().removeClass( "selected" ).addClass("p").addClass("selected");
</script>
</body>
</html>
Raw
focus
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>focus demo</title>
<style>
.focused {
background: #abcdef;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id="content">
<input tabIndex="1">
<input tabIndex="2">
<select tabIndex="3">
<option>select menu</option>
</select>
<div tabIndex="4">
a div
</div>
</div>
<script>
$( "#content" ).delegate( "*", "focus blur", function( event ) {
var elem = $( this );
setTimeout(function() {
elem.toggleClass( "focused", elem.is( ":focus" ) );
}, 0);
});
</script>
</body>
</html>
Raw
scrollleft
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>scrollLeft demo</title>
<style>
div.demo {
background:# #01DFA5 repeat scroll 0 0;
border:3px solid #666666;
margin:5px;
padding:5px;
position:relative;
width:200px;
height:100px;
overflow:auto;
}
p { margin:10px;padding:5px;border:2px solid #666;width:1000px;height:1000px; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="demo">
<h1>My Image</h1>
<img src="img03.jpg">
<p>Hello</p>
</div>
<script>$("div.demo").scrollLeft(1000);
</script>
</body>
</html>
Raw
toggle
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggle demo</title>
<style>
p { background:#dad;
font-weight:bold;
font-size:16px; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<button>Show or Hide My Image</button>
<P> My Image </P>
<img src="img03.jpg">
<script>
$("button").click(function () {
$("p").toggle("slow");
$("img").toggle("slow");
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment