I would like to add a class to the root html tag at the top of the page when a button is pressed. The only code I have come across is for adding classes to div elements with ids.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="THIS IS WHERE I WANT THE CLASS TO BE ADDED" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
Start presentation
I have tried to adapt this code but nothing works ;
<script type="text/javascript">
$("#addClass").click(function () {
$('para1').addClass('presentation-started');
});
$("#removeClass").click(function () {
$('#para1').removeClass('highlight');
});
</script>
If I understand you correctly, you can use:
$('html').addClass("someclass")
to add a class and
$('html').removeClass("someclass")
to remove it.
If you have a button with id="mybutton" then you would use like this:
$('#mybutton').click(function(){
$('html').addClass("someclass")
});
If your code does not follow the button element on the page, you also need to wrap your jQuery in a DOM ready handler (otherwise the click handler will never be connected):
$(function(){
$('#mybutton').click(function(){
$('html').addClass("someclass")
});
});
This is just a handy shortcut version of $(document).ready(function(){...}):
Update using your new example
So, using your existing example, it would be:
<script type="text/javascript">
$(function(){
$("#addClass").click(function () {
$('html').addClass('presentation-started');
});
$("#removeClass").click(function () {
$('html').removeClass('highlight');
});
});
</script>
Related
hi i want to make these events one after another. That means when 1st event ends another events occur. But unable to do so. The 2nd image appears just after first event starts animating Please help me. my code is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#pin01").animate({left: '650px'});
$("#pin01").promise().done(function(x){
$("#pin02").animate({left: '350px'});
});
});
</script>
</head>
<body>
<img src="mission.gif" id="pin01" style=" position:absolute;top:300px;left:300px;transition:5s"/>
<img src="mission.gif" id="pin02" style=" position:absolute;top:300px;left:900px;transition:5s"/>
</body>
</html>
The animate functions has its own callback function. Use it like this:
$("#pin01").animate({left: '650px'}, 500, function() {
$("#pin02").animate({left: '350px'});
});
The 500, is the delay, after the completion of the first animation, you can set it to be 0 if you do not want any delay. And the delay is given in ms (milliseconds).
I need to be able to set, in javascript, all html page links to open in a new tab, how can I do that?
Can it be attributed to the div "links"?
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Negócios</title>
<script type="text/javascript">
</script>
</head>
<body>
<div id="links">
<p>MARINGÁ - NEGÓCIOS</p>
<p>MONTES CLAROS - NEGÓCIOS<br>
</p>
<p>Sucesso Empresarial</p>
</div>
</body>
</html>
I need to do that without using the target attribute in the HTML. I have too many links, also, I want to learn how to do that.
You can append the target to all of your links within the "links" div by doing this:
Javascript:
window.onload = function(){
var a = document.getElementById('links').getElementsByTagName('a');
for (var i=0; i<a.length; i++){
a[i].setAttribute('target', '_blank');
}
}
or jQuery:
$(document).ready(function(){
$('#links a').attr('target', '_blank');
});
You can achieve that without JS using base tag.
<base target="_blank">
By using the target property.
For example,
Sucesso Empresarial
See other options in here.
I have a site made up of various html pages in jQuery mobile. On one page I have a javascript function in the content. Upon going to another page, this function still exists. How can I remove it before displaying the next page?
I am using the following, which removes the dom elements on the previous page, but the javascript functions from the previous page are still available.
$('div').live('pageshow',function(event, ui) {
$(ui.prevPage).remove();
});
$('div').live('pagehide', function(event) {
$(event.target).remove();
});
Here's the full code of two pages. Upon clicking from page 1 to page 2, the function testContent which is only on page 1 still works.
Page 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Page 1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
$('div').live('pageshow',function(event, ui) {
$(ui.prevPage).remove();
doPageShow();
});
$('div').live('pagehide', function(event) {
$(event.target).remove();
});
</script>
</head>
<body>
<div data-role="page" data-cache="never">
<div data-role="content">
<h1>Page 1z</h1>
Page 2
<div id="test"></div><!-- this div should be removed upon going to the next page -->
<script>
function testContent() {
// this function still exists on the next page, how can it be removed?
alert("testContent");
}
function doPageShow() {
alert("Page 1");
alert($("#test").length); // shows 1 which is correct
testContent(); // function is on this page, so it works
}
</script>
</div><!--content-->
</div><!--page-->
</body>
</html>
Page 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Page 1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
$('div').live('pageshow',function(event, ui) {
$(ui.prevPage).remove();
doPageShow();
});
$('div').live('pagehide', function(event) {
$(event.target).remove();
});
</script>
</head>
<body>
<div data-role="page" data-cache="never">
<div data-role="content">
<h1>Page 2</h1>
Page 1
<script>
function doPageShow() {
alert("Page 2");
alert($("#test").length); // shows 0 which is correct
testContent(); // why does this still work???
}
</script>
</div><!--content-->
</div><!--page-->
</body>
</html>
Javascript objects live until the page refreshes. This is one of the advantages of jquery mobile, as parsing JS can take a long time on mobile devices, it is considered better to do it once.
If you really need to you could set the function to null.
I think I figured this out. Basically in JavaScript a function is just another object like:
doPageShow = function(){...}
Everything set in javascript persists on subsequent ajax loaded pages, so if I set a variable in one page, it will still have that value in another ajax loaded page, including functions.
Can anyone tell me why I keep getting a "displaymessage is not defined" error message with this code.. Thanks in advance :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST PAGE</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
function displaymessage() {
alert("Hello World!");
}
});
</script>
</head>
<body>
<p><input type="button" name="start" id="start" value="start" onclick="displaymessage()" /></p>
</body>
</html>
Scope. Your function is declared within the scope of the onload function so that is the only place you would be able to access it. To access it from other places, move it outside the $(document).ready function.
You define your displayMessage function in a DOM Ready callback - which means that it will be defined when ...well... the DOM is ready. And yet - you add it as a handler to a click of a DOM element - something that will be processed before the function is actually defined.
Move the definition out of $(document).ready(function(){...} and you'll be OK.
Additionally, the preferred way of binding handlers to various DOM events is programmatic, rather than declarative. Instead of adding an onclick attribute to your button you should rewrite the entire thing to something like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
...
<script type="text/javascript">
$(document).ready(function() {
function displaymessage() {
alert("Hello World!");
}
$('#start').on('click', displaymessage);
});
</script>
</head>
<body>
<p><input type="button" name="start" id="start" value="start"/></p>
</body>
</html>
why do you write inside the document ready function. Just write outside it should like this
<script type="text/javascript">
function displaymessage() {
alert("Hello World!");
}
</script>
i can't understand why this code works well
but the code below no.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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.5.2/jquery.min.js"></script>
<script type="text/javascript">
$('#enviar').click(function(){
alert ("casd");
});
</script>
</head>
<body>
<input type="submit" id="enviar" value="Registo" />
</body>
</html>
what is the reason?
The handler is being attached before the element even exists. Either switch to $.live() or run your code on document ready:
$(function(){
// attach click here
});
This will cause the code to wait until the document has loaded, and your #enviar element exists within the DOM. Until it exists, nothing can be attached to it.
When you attach the click event handler the document has not loaded yet. That is the < input > element is not available in that state.
The solution is to attach the handler after the document has loaded by using the jquery ready function like this:
$(document).ready(function(){
$('#enviar').click(function(){
alert ("casd");
});