I'm new to jQuery programming and want to solve page changes after fading effect.
I heard that using callback method. but don't know how to use please give me some advice!!!
"Scene2.html" is where I want to move.
enter code here
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function(){
$("#first").fadeOut(1500);
});
</script>
</head>
<body>
<img id="first" src="images/Logop.jpg"/>
</body>
</html>
You'd do it this way:
jQuery(function(){
$("#first").fadeOut(1500, function() {
window.location.href = 'Scene2.html';
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="first" src="http://cdn.hark.com/images/000/003/249/3249/original.jpg">
Related
I am trying to access this url via javascript to loaf a function in my js page:
url which contains a function
Then I will easily call the function and load some info.
I have the following code:
document.write('<SCRIPT LANGUAGE=JavaScript SRC="https://oasc12.247realmedia.com/RealMedia/ads/adstream_mjx.ads"></SCRIPT>');
OAS_RICH('UNKNOWN');
and my html is:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div id="mobile-ad">
<div class="sidebox advertisement">
<script type="text/javascript" src="/test/ads.js"></script>
</div>
</div>
Now my problem when I run it I get "Uncaught ReferenceError: OAS_RICH is not defined" which means that the function loading does not work via
Can anyone help why it is not working ? Am I missing anything?
why you are not putting your script balise directly in the head of the html page.
Then at the end of the body you add a script that call your function.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://oasc12.247realmedia.com/RealMedia/ads/adstream_mjx.ads"></script>
</head>
<body>
<div id="mobile-ad">
<div class="sidebox advertisement">
<script type="text/javascript" src="/test/ads.js"></script>
</div>
<script>
OAS_RICH('UNKNOWN');
</script>
</div>
</body>
You need this:
<script id="adscript"></script>
<script>
var adScript = document.getElementById("adscript");
adScript.addEventListener("load", function () {
OAS_RICH('UNKNOWN');
});
adScript.src = "https://oasc12.247realmedia.com/RealMedia/ads/adstream_mjx.ads";
</script>
I am very new to web development. I am trying to use jquery to show slider on the web-page. However, I am not able to see the silder on the web-page. I tried debugging the code via. firebug. However, I don't see any error over there. Can somebody please tell me on what I am missing possibly?
I am using Linux - Fedora core 16 and Firefox- 38.0.5 to run this code
index.html
<!DOCTYPE html>
<html>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
<head> "Hello Jquery"</head>
<body>
<div id="slider"> </div>
</body>
</html>
Here is the jqueryTutorial.js file.
(function() {
$("#slider").slider();
})();
There are no errors in the firebug console.
Here is the screen shot.
Finally, I did the following from the source - jquery slider
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
Now, I see the following error on the firebug.
ReferenceError: $ is not defined
$(function() {
index.html (line 11, col 2)
Try this:
jQuery(document).ready(function () {
(function() {
$("#slider").slider();
})();
});
EDITED:
Ok , the issue comes from the tags.
You wrote this:
<!DOCTYPE html>
<html>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
<head> "Hello Jquery"</head>
<body>
<div id="slider"> </div>
</body>
</html>
And you HAVE to write this:
<!DOCTYPE html>
<html>
<head>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
</head>
<body>
<div id="slider"> </div>
</body>
</html>
;-)
EDITED AGAIN
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
jQuery(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
Include your <script> tags before closing body tag </body>. Moreover you have some mistakes in your markup, like the <title> should be inside <head> tag( for heading use <h1> upto <h7> tags ). Like this:
<!DOCTYPE html>
<html>
<head>
<title>"My Page"</title>
</head>
<body>
<h1>hello jQuery</h1>
<div id="slider"></div>
<!-- load scripts -->
<script src="jquery-2.1.4.min.js">
</script>
<script src="js/jquery-ui.js">
</script>
<script src="js/jqueryTutorial.js">
</script>
</body>
</html>
And your javascript will simply be:
$('#slider').slider();
if that doesn't works try:
$(document).ready( function () {
$('#slider').slider();
}
Because if you include them at beginning, whole HTML document will not be completely loaded at the time the scripts get executed, so the script won't be able to find elements.
And I don't think .slider() gives you what you want. I suggest you learn more first. Try www.codecademy.com
I am trying to implement galleria.js in my webpage. I have followed the documentation and have created index.html accordingly. All I am getting is the compilation of the images one after another, but not the galleria view.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>my photo</title>
</head>
<body>
<div class="gallery">
<img src="galleria/im/out1.jpg">
<img src="galleria/im/out2.jpg">
<img src="galleria/im/out3.jpg">
</div>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="galleria/galleria-1.4.2.min.js"></script>
<script src="galleria/themes/classic/galleria.classic.min.js"></script>
<script>
$(document).ready(function() {
$('#gallery').galleria({
transition: 'fadeslide',
width:800,
height:600
});
});
</script>
</body>
</html>
I checked the docs of galleria.js but I think the issue is basically the selector in your code. You are getting an element with id "gallery" and you dont have any element with that id,just an element with that class :)
$('#gallery').galleria({
ans I think it should be
$('.gallery').galleria({
After several attempts the following works fine with me. I have missed to put https:// before the jquery address.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>my photo</title>
</head>
<body>
<div id="gallery">
<img src="galleria/im/out.jpg">
<img src="galleria/im/out1.jpg">
<img src="galleria/im/out3.jpg">
</div>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="galleria/galleria-1.4.2.min.js"></script>
<script src="galleria/themes/classic/galleria.classic.min.js"></script>
<script>
$(document).ready(function() {
$('#gallery').galleria({
transition: 'fadeslide',
width:1450,
height:740
});
});
</script>
</body>
</html>
I am not sure why this code does not work. What I am trying to achieve is I would like to click the button and highlight some text.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript"
src="/jquery/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#button").click(function(){
$(".target").effect( "highlight",
{color:"#ffff00"}, 30000 );
});
});
</script>
</head>
<body>
<button id="button">Take Hint</button>
<p><span class="target">this text needs to highlight
</span></p>
</body>
</html>
Please suggest me how I show the loader in-between button click function to background image fully loading time.
Thanks
<html >
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('button').click(function() {
//want a loader till the background images loads
$('#load').show();
$('#mybody').css('background-image', 'url(http://vpnhotlist.com/wp-content/uploads/2014/03/image.jpg)');
//hide loader after the background images loads
$('#load').hide();
});
});
</script>
</head>
<body id="mybody" >
<button >Hello</button>
<div style="display:none" id='load'>loading......</div>
</body>
</html>
If you want to show the #load div until window is fully loaded, then you can use this following code. Also you placed jQuery library file wrong.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body{background-image: url(http://vpnhotlist.com/wp-content/uploads/2014/03/image.jpg);}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script>
$(window).load(function() {
$('#load').hide();
});
</script>
</head>
<body>
<div id='load'>loading......</div>
</body>
</html>