When I click the button it support to fade in and out the red button, but it doesn't so what is the problem ?
My code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
${"button").click(function(){
$("div").fadeToggle();
});
});
</script>
</head>
<body>
<button>Click Here To FadeToggle</button><br><br>
<div style="width:80px;height:80px;background-color:red;"></div>
</body>
</html>
Change:
${"button")
^---------------
To:
$("button")
^---------------
$(document).ready(function(){
$("button").click(function(){
$("div").fadeToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>Click Here To FadeToggle</button><br><br>
<div style="width:80px;height:80px;background-color:red;"></div>
Related
Does anyone know why my jquery won't run? I've tried running on button click or page load but it isn't working. Thanks
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<iframe style="width:100%;height:700px;" id="frame" src="bing.com">
<script>
$(document).ready(function() {
alert("working");
});
</script>
</body>
You need to close your iframe tag and put in the complete url like this:
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<iframe style="width:100%;height:700px;" id="frame" src="http://bing.com"></iframe>
<script>
$(document).ready(function() {
alert("working");
});
</script>
</body>
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>
In the code below the tooltip appears upon hovering the mouse onto the text "hover your mouse".
<!DOCTYPE html>
<html>
<body>
<p title="this is tooltip">hover your mouse</p>
</body>
Is there any way using JavaScript to appear the tooltip without hovering the mouse? Say upon the page gets loaded we want to display the tooltip of a button for 5 sec and then hiding the tooltip again.
This is what I tried (based on answers below) to at least display the tooltip without mouse hover, but does not do anything to tooltip
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<p title="this is tooltip" id="my-hover">hover your mouse</p>
<script>
setTimeout(function () {
$('#my-hover').trigger('mouseover');
}, 1000);
</script>
</body>
</html>
<p title="this is tooltip" id="my-hover">hover your mouse</p>
setTimeout(function () {
$('#my-hover').trigger('mouseover');
}, 10);
$('#my-hover').mouseover(function () {
setTimeout(function () {
$('#my-hover').show();}, 500);
});
This code will automatic fire a mouseover event.
try this
$('element').trigger('mouseover');
this based on Script
You can use jquery UI Tooltip
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/vendor/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.4.custom.min.css" />
<title>Test</title>
</head>
<body>
<p title="this is tooltip" id="tooltip">hover your mouse</p>
<script type="text/javascript">
$( "#tooltip" ).tooltip({ content: "this is tooltip" }).tooltip("open");
setTimeout(function () { $("#tooltip").tooltip("close");}, 5000);
</script>
</body>
</html>
Does the below js function automatically being called when the html loads?
How can I manually call it? (using event or click)
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#divId").load("http://google.com");
});
</script>
</head>
<body>
<div id="divId" style="display:none;"></div>
</body>
</html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$('#btn').on('click', function() {
$("#divId").load("http://google.com", function() {
$(this).show(); // it's display:none ?
});
});
});
</script>
</head>
<body>
<button id="btn">click to load</button>
<div id="divId" style="display:none;"></div>
</body>
</html>
Note that loading Google won't work due to the same origin policy and Google's headers.
When document is ready:
<head>
<script>
$(document).ready(function () {
$("#divId").load("http://google.com"); <!-- I don't know what you are trying to do here? -->
});
</script>
</head>
<body>
<div id="divId" style="display:none;"></div>
</body>
On a click
<head>
<script>
$(document).ready(function() {
$(".button a").click(function(e) {
e.preventDefault();
$("#divId").load("http://google.com"); <!-- Load Google won't work -->
});
});
</script>
</head>
<body>
<li class="button">Load</li>
<div id="divId" style="display:none;"></div>
</body>
It is working
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Toggle between slide up and slide down for a p element</button>
</body>
</html>
But when i move
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
Before <body> tag is it is not working, because i want Put JavaScript at bottom, but i can't put document.ready part after jquery library, what will be solution.
One: your code MUST come after the jquery library.
Two: If your moving the code to the bottom of the page, you don't need $(document).ready(....
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>This is a paragraph.</p>
<button>Toggle between slide up and slide down for a p element</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$("button").click(function(){
$("p").slideToggle();
});
</script>
</body>
</html>
If you absolutely must have your page specific code above the jquery library, you'll likely need a queue system so that when jquery is available, the queue will be processed. Below is an example
<!DOCTYPE html>
<html>
<head>
<!-- this would need to be part of the CMS header -->
<script>
window.initQueue = [];
</script>
<!-- here's your page specific js -->
<script>
window.initQueue.push(function(){
$("button").click(function() {
$("p").slideToggle();
});
})
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Toggle between slide up and slide down for a p element</button>
<!-- cms footer -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$.each(window.initQueue,function(i,fn){
fn();
})
</script>
</body>
</html>
<script>
window.onload = function() {
$("button").click(function() {
$("p").slideToggle();
});
}
</script>