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>
Related
I`m trying to use Jquery-Steps but this doesnt even like is working or loaded, it only shows the h1 and div blocks, only the html is been loaded
Here is the code that I took from them, I dont know if I need to do something else.
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<script type='text/javascript' src="jquery.js"></script>
<script type='text/javascript' src="jquery.steps.js"></script>
<script type='text/javascript' src="jquery.steps.min.js"></script>
</head>
<body>
<script>
$("#wizard").steps();
</script>
<div id="wizard">
<h1>First Step</h1>
<div>First Content</div>
<h1>Second Step</h1>
<div>Second Content</div>
</div>
</body>
</html>
Try now ?
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<script type='text/javascript' src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type='text/javascript' src="jquery.steps.min.js"></script>
</head>
<body>
<script>
$("#wizard").steps();
</script>
<div id="wizard">
<h1>First Step</h1>
<div>First Content</div>
<h1>Second Step</h1>
<div>Second Content</div>
</div>
<script>
// Initialize wizard
var wizard = $("#wizard").steps();
// Add step
wizard.steps("add", {
title: "HTML code",
content: "<strong>HTML code</strong>"
});
</script>
</body>
</html>
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>
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;
}
I've tried for several hours know to make this bit of jquery code work but I just can't find what I did wrong with it. The equivalent in normal javascript works just fine. What is the problem?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="ezcap.css">
<div class="container">
<div id="sidebar">
<div id="sbheader"></div>
<div id="button2"></div>
<div id="button3"></div>
<div id="button4"></div>
<div id="button5"></div>
</div>
<div id="header">lol</div>
<div id="footer">feg</div>
</div>
</body>
</html>
You can't put a script in a tag that has a src attribute. You need to call the jQuery library in one script tag and then put your actual script in another.
Try this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
Problem is here
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
//js code
</script>
Here in your script tag you are giving a source and some code also, You should write separate script tags for both, see bellow
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script>
//js code
</script>
Try this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="ezcap.css">
<div class="container">
<div id="sidebar">
<div id="sbheader"></div>
<div id="button2"></div>
<div id="button3"></div>
<div id="button4"></div>
<div id="button5"></div>
</div>
<div id="header">lol</div>
<div id="footer">feg</div>
</div>
</body>
</html>
You are trying to call the jQuery library while also implementing your code snippet here:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
You should be first loading the jQuery library and then implementing your code snippet like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event){
alert("HI");
});
});
</script>
The reasoning behind this is because you cannot call the script attribute to load a library and then define some code in the same tag, you need to:
Load the script
Declare your code
Hope that helps!
The JS script reference line of code should end and actual JQuery code should be enclosed under separate script tags.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
<script type="text/javascript">
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="ezcap.css">
<div class="container">
<div id="sidebar">
<div id="sbheader"></div>
<div id="button2"></div>
<div id="button3"></div>
<div id="button4"></div>
<div id="button5">abcd</div>
</div>
<div id="header">lol</div>
<div id="footer">feg</div>
</div>
</body>
</html>
Your problem was including your code in that script tag for jQuery.
Change to this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="ezcap.css">
</head>
<body>
<div class="container">
<div id="sidebar">
<div id="sbheader"></div>
<div id="button2"></div>
<div id="button3"></div>
<div id="button4"></div>
<div id="button5"></div>
</div>
<div id="header">lol</div>
<div id="footer">feg</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
</body>
</html>
Not a problem but you do not need the type="text/javasript". See: Do you need text/javascript specified in your <script> tags?
And it is better to have your scripts at the bottom so that your content can load faster. See: If I keep JavaScript at bottom or keep JavaScript in <head> inside document.ready, are both same thing?
Your <link> for CSS needed to be inside your <head>
I want to fade in the page upon load. I looked at other forms on here and somehow it just isnt working for me...
Javascript file:
window.onload = init;
function init() {
$('#container').fadeIn('slow');
}
One of the pages:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Apparel</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="effects.js"></script>
</head>
<body>
<div id="cart">
<img src="shopcart.jpg" height="30px">
</div>
<div id="container">
<div id="nav">
<p id="sb">Apparel</p>
<p id="about">HOME</p>
<p id="srv">OUTERWEAR</p>
<p id="srv">CLOTHING</p>
<p id="pjt">SHOES</p>
<p id="pjt">ACCESSORIES</p>
<p id="about">ABOUT</p>
<p id="cont">CONTACT</p>
</div>
<div id="imgcontainer">
<img src="homeimg.jpg">
</div>
</div>
</body>
</html>
Put
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
above
<script src="effects.js"></script>
This exposes the $ variable (aka the jQuery library) that you're using when you do $('#container')
You'd better replace the window.onload to $(function(){});
Here is the code:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//window.onload = init;
$(function(){
init()
});
</script>
Enjoy it : )