jQuery fade effects in IE(8) - javascript

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>

Related

Why is my Javascript and JQuery scripting not working?

I was looking at another question and saw that they had been told, when their Javascript was not working, to put a function that started on loading of the page.
I was trying to use this code:(well, not exactly this code, but something like it)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function doThisWhenLoaded(){
var code = document.getElementsByTagName("body");
code.append("<p>Yes it did.</p>");
}
</script>
</head>
<body onload="doThisWhenLoaded">
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
And nothing happened. All that it did was show the h1 code that I put in there.
Since you are already including jQuery try this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var code = $("body");
code.append("<p>Yes it did.</p>");
});
</script>
</head>
<body >
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
You forgot to include the parenthesis to call the function in the body element's onload attribute:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function doThisWhenLoaded() {
//Modified the two lines below slightly
var code = document.querySelector("body");
code.innerHTML += "<p>Yes it did.</p>";
}
</script>
</head>
<body onload="doThisWhenLoaded()">
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
A better/cleaner way to achieve the same thing would be to use addEventListener and DOMContentLoaded event. Something like below:
document.addEventListener("DOMContentLoaded", appendHtml.call(null, {
selector: 'body',
html: '<p>Yes it did.</p>'
}));
function appendHtml(config) {
document.querySelector(config.selector).innerHTML += config.html;
}
<h1 style="font-family:sans-serif;">Did it work?</h1>
Two reason why it doesn't work:
To select the body you have to use document.body or $("body") (in jQuery)
And you forgot to add parentheses to your function call doThisWhenLoaded()
Here is the code corrected:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function doThisWhenLoaded(){
$("body").append("<p>Yes it did.</p>");
}
</script>
</head>
<body onload="doThisWhenLoaded()">
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>

how to remove class using jquery from two different document

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>

How to add a class on an HTML tag

I am trying to apply a class on HTML tag, if the tag exists.
I have tried this code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>index</title>
<style>
.black
{
background:#000;
color:white;
}
</style>
<script type="text/javascript">
$(window).load(function () {
$('textarea').addClass('black');
});
</script>
</head>
<body>
<div>
<textarea>content</textarea>
</div>
<script src="jquery.js"></script>
</body>
</html>
What I want: If the HTML body contains a textarea tag then the .black class will apply it automatically.
Try moving <script src="jquery.js"></script> before <script></script> containing call to $(window).load() for jQuery() to be defined when called
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>index</title>
<style>
.black {
background: #000;
color: white;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script type="text/javascript">
$(window).load(function() {
$('textarea').addClass('black');
});
</script>
</head>
<body>
<div>
<textarea>content</textarea>
</div>
</body>
</html>
If you want to apply style to HTML tags create style with Tag names Link here
For your case
textarea
{
background:yellow;
color:red;
}
this shall apply to all the text area tag on the document.
here is a JSFiddle i created from your source
https://jsfiddle.net/sumeetkumar001/sxxkjbh2/
You don't need $(window).load(function () {});, simply leave this line:
$('textarea').addClass('black');
Here is demo.
$('textarea').addClass('black');
.black {
background:#000;
color:white;
}
<div>
<textarea>content</textarea>
</div>

display an html page in a div tag using AJAX

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;
}

Set background color

I'm trying to set background color to blue using javascript ran with Sublime Text 3. What command should I be using. Thank you
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<backgroundColor="blue>;
</backgroundColor="blue">
</body>
</html>
<style> tag is used to declare CSS properties in the same HTML document.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.blueDiv
{
background-color: blue;
}
</style>
</head>
<body>
<div class="blueDiv">
Background color of this div is blue.
</div>
</body>
</html>
You can use inline style with div to set background color:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.bg-blue{background-color:blue;}
</style>
</head>
<body>
<div class="bg-blue">
</div>
</body>
</html>
Thank you guys, until now I tried this - in vain:
<!DOCTYPE>
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>DropDown</title>
<script language="javascript">
fuction()
$("select").change(function() {
$(this).css("background-color", ($(this).attr("data-correctVal") ==
$(this).val()) ? "green" : "red");
});
</script>
</head>
<body>
<select name="Armaturen">
<option value="1">Ölvorwärmung</option>
<option value="2">Kesselthermostat</option>
<option value="3">Ölpumpe</option>
<option></option>
</select>
</body>
</html>
Now I will try yours - patience please ... and thanks a lot!!!

Categories