I am trying to built code player that shows result of html page including script in iframe. but something seems to be wrong here. it seems javascript not working every time i click button i see error in console.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="codemirror/lib/codemirror.css">
<link rel="stylesheet" href="codemirror/theme/solarized.css">
<script src="codemirror/lib/codemirror.js"></script>
<script src="codemirror/mode/xml/xml.js"></script>
<script src="codemirror/mode/htmlmixed/htmlmixed.js"></script>
</head> <style> .CodeMirror{border:1px solid black} </style>
<body>
<form>
<div id="editorContainer" style="width:50%">
<textarea id="code" name="code" class="CodeMirror">
<button id="btn" onclick="say()">hello</button>
<script>
function say(){
alert('test')
}
</script>
</textarea>
</div>
</form>
<button>click</button>
<iframe id="frame"></iframe>
<script type="text/javascript">
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "text/html",
lineNumbers: true
});
$("button").click(function(){
var code= editor.getValue();
$("iframe").contents().find("html").html(code);
})
</script>
</body>
</html
>
Related
I would like to make use of the wonderful looking chessboard available at chessboard.js. However, after downloading the folder and entering the code offered on the home page, it doesn't seem to be doing anything.
Is there something beyond the linking to the folders that is required?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ask A GM</title>
<link rel="stylesheet" type="text/css" href="css/chessboard-0.3.0.css">
<link rel="stylesheet" type="text/css" href="css/chessboard-0.3.0.min.css">
<script type="text/javascript" src="chessboard-0.3.0.js"></script>
<script type="text/javascript" src="chessboard-0.3.0.min.js"></script>
</head>
<body>
<div id="board2" style="width: 400px"></div>
<input type="button" id="startBtn" value="Start" />
<input type="button" id="clearBtn" value="Clear" />
<script>
var board2 = ChessBoard('board2', {
draggable: true,
dropOffBoard: 'trash',
sparePieces: true
});
$('#startBtn').on('click', board2.start);
$('#clearBtn').on('click', board2.clear);
</script>
</body>
</html>
You're missing jQuery and you should throw your javascript in a document ready function like so:
http://jsbin.com/mapenefesi/edit?html,css,js,output
$(function(){
var board2 = ChessBoard('board2', {
draggable: true,
dropOffBoard: 'trash',
sparePieces: true
});
$('#startBtn').on('click', board2.start);
$('#clearBtn').on('click', board2.clear);
});
I am not sure you want both .css and .min.css as well as .js and .min.js references of the same resources.
Also, since you're not referencing jQuery (as mentioned in some other answers), you'll need to change your javascript...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ask A GM</title>
<link rel="stylesheet" type="text/css" href="css/chessboard-0.3.0.min.css">
<script type="text/javascript" src="chessboard-0.3.0.min.js"></script>
</head>
<body>
<div id="board2" style="width: 400px"></div>
<input type="button" id="startBtn" value="Start" />
<input type="button" id="clearBtn" value="Clear" />
<script>
var board2 = ChessBoard('board2', {
draggable: true,
dropOffBoard: 'trash',
sparePieces: true
});
document.getElementById('startBtn').click = function() { board2.start; };
document.getElementById('clearBtn').click = function() { board2.clear; };
</script>
</body>
</html>
You appear to be using jQuery selectors (e.g. $('#startBtn')) without including the jQuery library https://jquery.com/. Try including...
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
The code so far:
<!DOCTYPE html>
<html>
<head>
<title>Project 506</title>
<script type="text/javascript" src="sweetalert.min.js"></script>
<script src="https://ajax.googlesapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="sweetalert.css" type="text/css" />
<style type="text/css">
body {
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#first").click(function () {
sweetAlert("Oops...", "Something went wrong!", "error");
});
});
</script>
</head>
<body>
<h1>Message Boxes</h1>
<input type="button" id="first" value="Just a Notification" />
<input type="button" id="second" value="Successfully Completed!" />
<input type="button" id="third" value="Something Went Wrong!" />
</body>
</html>
I'm not clear on why the sweetAlert animation still doesn't pop up when I click on the first button. I've tried moving the lines of <script> into different parts of the script, but it still doesn't work. So how can I solve this problem?
Check you jQuery url.
It should be:
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
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
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>
I have div and hidden span on it. I want to show it by button clicking. My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>register page</title>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<script type="text/javascript" src="/static/js/test.js"></script>
</head>
<body>
<form id="register-form">
<label>Username<span id="register-username-label" class="label label-important" style="visibility: hidden;">Username can't be empty</span></label>
<input id="register-username-input" type="text" placeholder="Type username..."/>
<button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button>
</form>
</div>
</body>
</html>
And my js file:
function show_element (id) {
document.getElementById(id).style.visibility = 'visible';
}
When i button clicked span does not show. Why? It shows very fast and than hidden again.
Chrome developer tools console doesn't show errors too.
Thank you.
Try adding return false to your button onClick() event.
Like this:
<button id="register-submit" onclick="show_element('register-username-label'); return false;" class="btn">Register</button>
You need to define your function before your first call to the function is being made. Normally it can be achieved by putting the function code inside a script tag nested inside the head of your HTML.
Like this:
<head>
<script type="text/javascript">
function show_element (id) {
document.getElementById(id).style.visibility = 'visible';
}
</script>
</head>
Sorry but this code works:
<html>
<head>
<script>
function show_element (id) {
document.getElementById(id).style.visibility = 'visible';
}
</script>
</head>
<body>
<div>
<span id="register-username-label" class="label label-important" style="visibility: hidden">Username can't be empty</span>
<button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button>
</div>
</body>
</html>
EDIT
I just read your edit. Btw i think your absolute path may causes problem.
Try this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>register page</title>
<link rel="stylesheet" href="./static/css/bootstrap.min.css">
<script type="text/javascript" src="./static/js/test.js"></script>
</head>
<body>
<form id="register-form">
<label>Username<span id="register-username-label" class="label label-important" style="visibility: hidden;">Username can't be empty</span></label>
<input id="register-username-input" type="text" placeholder="Type username..."/>
<button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button>
</form>
</div>
</body>
</html>