I am trying to slide the div in jquery when checked the check box. but not working
how can i do this?
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".filter").prop('checked')(function(){
$("p").slideToggle();
});
});
</script>
</head>
<body>
<input type="checkbox" name="checkd" class="filter">
<p>Slider div</p>
</body>
</html>
$(".filter").on('change', function () {
if ($(this).is(':checked'))
$("p").slideToggle();
});
$(".filter").on('change', function () {
$("p").slideToggle();
});
jsfiddle DEMO
Hope this is what you looking for
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".filter").on('change', function () {
$("p").slideToggle();
});
});
</script>
</head>
<body>
<input type="checkbox" name="checkd" class="filter">
<p style="display:none;">Slider div</p>
</body>
</html>
Related
i have two files index.html and index2.html
when i perform some function in index.html file that should effect index2.html file
index.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('p button').click(function(){
$('#ajax-messagebox').removeClass('ajax-modal');
});
});
</script>
</head>
<body>
<p><button >Click ME</button></p>
<div class="xyz">This is div 1</div>
</body>
</html>
index2.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="ajax-messagebox" class="ajax-modal abc">This is div2 </div>
</body>
</html>
My question is when i click on the "click me" button in index.html page i want "ajax-modal" class to be removed in index2.html
You can handle this scenario by using cookie.
Try this
index.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> //Cookie library
<script>
$(document).ready(function(){
$('p button').click(function(){
$.cookie("index_button_trigger", "yes"); // Set cookie
});
});
</script>
</head>
<body>
<p><button >Click ME</button></p>
<div class="xyz">This is div 1</div>
</body>
</html>
index2.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> //Cookie library
<script>
$(document).ready(function(){
setInterval(function() {
if ($("#ajax-messagebox").hasClass("ajax-modal")) {
if($.cookie("index_button_trigger")){
$('#ajax-messagebox').removeClass('ajax-modal');
}
}
}, 1000);
});
</script>
</head>
<body>
<div id="ajax-messagebox" class="ajax-modal abc">This is div2 </div>
</body>
</html>
I'm trying to do following with jQuery:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('#test').hover(function(){
alert('sub');
});
</script>
</head>
Thanks.
I'm assuming that HTML DOM element with id="test" exists.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function() {
$('#test').hover(function() {
alert('sub');
});
});
</script>
</head>
By the way, CodeIgniter has nothing to do with your issue.
Seems like you are accessing an element which does not exists.
Try this:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#test').hover(function() {
alert('sub');
});
});
</script>
</head>
I want to load an HTML page called Introduction.html( in the same folder as x.html) inside div1. But does not load. Here is the code snippet for x.html
x.html
<!DOCTYPE html>
<html>
<head >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("Introduction.html");
});
});
</script>
</head>
<body>
<div id="div1"></div>
<button> 1.1 User</button>
<div id="cat" >
</div>
</body>
</html>
`
Below is sample code to load any file in div element in HTML.
Sample.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#page1").click(function(){
$('#result').load('page1.html');
//alert("Thanks for visiting!");
});
});
</script>
</head>
<body>
<input type='button' value='Load Page1' id="page1">
<div id="result" style="clear:both;">
</div>
</body>
</html>
page1.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Content of page1</h1>
</body>
</html>
After clicking Load Page, it will load content of page1.html
Hope this helps!
You need to give width and height to this div in order to see some content i guess.
#div1
{
height:200px;
width:200px;
}
Sample code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
span {display:none;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("span").fadeIn(3000);
});
});
</script>
</head>
<body>
<button>Fade in</button>
<span>This is some text.</span>
</body>
</html>
It doesn't work in IE8 and probably older versions. Any solution?
I think because the span tag is an inline element, it has no layout, unlike block level elements like DIVs.
Swap it to a div and it works, alternatively, this approach (assign block layout to your span, then hide with Jquery) will retain your markup as is and function as desired under IE8:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
span {display:block;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").hide();
$("button").click(function(){
$("span").fadeIn(3000);
});
});
</script>
</head>
<body>
<button>Fade in</button>
<span>This is some text.</span>
</body>
</html>
Should you need to retain your text display inline, change your CSS for the span to 'display:inline-block', the following code shows this working with text before and after:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
span {display:inline-block;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").hide();
$("button").click(function(){
$("span").fadeIn(3000);
});
});
</script>
</head>
<body>
<button>Fade in</button>
Previous text <span>This is some text.</span> Following text.
</body>
</html>
I have a text box for searching. For some reason, .blur() will not work on my computer. I created a test file to test it, and it still won't work:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$('#search').blur(function() {
alert('hello');
});
</script>
</head>
<body>
<input id="search" value="hello" type="text" />
</body>
</html>
Like Dave said, try this:
$(document).ready(function() {
$('#search').blur(function() {
alert('hello');
});
});
Maybe just use a non-jquery way of doing things?
document.getElementById("search").addEventListener('blur',function(){
document.getElementById("search").value = "DEFAULT_VALUE";
});