I am using a JavaScript editor in www.sololearn.com/Codes/
when I put $ sign for a jQuery it says that $ is undefined.
How can I add a jQuery to my code so it will work but keep the code separated like in the editor: one slot for HTML, another slot for CSS, another for JavaScript.
HTML:
<!DOCTYPE html>
<html>
<head>
<Title>Sum To Coins - Dynamic Programming</Title>
</head>
<body>
<div id="mainScreen">
<p id="instructions">Insert a sum to turn it into coins</p>
<button class='Button' id="btn1">Button</button>
<button class='Button' id="btn2">Button</button>
<button class='Button' id="btn3">Button</button>
<br>
<p id="resultField">The coins are: </p>
<p id="matrixField"> </p>
</div>
<div id="pickCoinsScreen">
<script src="jquery-3.1.1.min.js"></script>
</div>
</body>
CSS:
.Button:active, .active {
background-color:red;
color: white;
}
JavaScript:
$('.Button').click(function(
$(this).toggleClass('active');
e.preventDefault();
});
Firstly, your Javascript code has few errors so i have solved that and also implemented some best practices of using jQuery's "DOMReady" function.
$(function(){
$('.Button').click(function(){
$(this).toggleClass('active');
});
});
within the <head> tag I have inserted the link to google hosted library of jQuery. Now your <head> element contains this code.
<head>
<Title>Sum To Coins - Dynamic Programming</Title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
Side note: I have removed e.preventdefault() because it's not necessary in this case.
I have tested it on solo-learn, it seems its working.
Related
[EDIT: I have possibly found another solution. Kooilnc's solution looks good. Is the solution at the bottom of this question better or worse than Kooilnc's?]
I have a div with associated javascript code. I would like to have the html for just this div and the associated javascript code all in one file, a kind of self contained 'module', eg
mydiv.html
<html>
<div id="Wibble" style="display: none;">
... loads of structure for just this div
</div>
<script type="text/javascript">
... loads of js functions just associated with this div
</script>
</html>
Then in my main page index.html I would like to include this 'module' in some way.
The only thing I have found is a Server Side Include:
index.html
<!DOCTYPE html>
<html>
<head>
... loads of stuff
</head>
<body>
... loads of other html structure
<!--#include FILE="mydiv.html" -->
... loads of other html structure and script tags
</body>
</html>
Question 1: Is there a better way of doing this?
Question 2: Should I have the html tag in mydiv.html as that will obviously put an html tag in index.html which is out of place?
Question 3: If that html tag in Q2 should not be there, how do I write the mydiv.html file so it has all the formatting and nice coloured structure in Visual Studio Code?
Edit:
Kooilnc's solution (below in the answers) looks good. Here is another solution I have found. It is working in my development environment Visual Studio Code. I need the javascript in my included html file in body's onload. Does anyone know if this solution will work on a server with my body onload requirement? Is it better or worse than Kooilnc's solution?
Jquery must be included with the normal <script> tag prior to this.
I insert this code within index.html
<!DOCTYPE html>
<html>
<head>
... loads of stuff
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</head>
<body>
... loads of other html structure
<div id="include_mydiv"></div>
<script>
$(function(){
$("#include_mydiv").load("mydiv.html");
});
</script>
... loads of other html structure and script tags
</body>
</html>
And mydiv.html did not have any <html> tags:
<div id="Wibble" style="display: none;">
... loads of structure for just this div
</div>
<script type="text/javascript">
... loads of js functions just associated with this div
</script>
You can try importing from template elements. Here is a simplified templating example that may be useful.
If you need to import from an external file, check this example I cooked up for you.
document.querySelectorAll(`[data-import]`).forEach( el => {
if (!el.dataset.imported) {
el.appendChild(document.querySelector(`#${el.dataset.import}`)
.content.cloneNode(true));
el.dataset.imported = `ok`;
}
});
<template id="someForm">
<script>
document.addEventListener(`click`, handle);
function handle(evt) {
if (evt.target.nodeName === `BUTTON`) {
alert(`Yes. I am handled`);
}
}
</script>
<button id="sub">Handle me!</button>
</template>
<template id="somethingElse">
<style type="text/css">
.red {color: red;}
</style>
<p class="red">I am appended too</p>
</template>
<div data-import="someForm"></div>
<div data-import="somethingElse"></div>
Use an Iframe
<iframe id="inlineFrameExample"
width="300"
height="200"
src="mydiv.html">
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
I am making a text-based game to test my knowledge of HTML, CSS, JavaScript and jQuery. I am trying to use the jQuery .appendTo() function to append a <p> element to div.defaultDisplay when the "Play Now!" button is clicked, but no matter what I do, it doesn't seem to work. I have tried using <span> instead of <p>, I've tried .append(), I've tried appending it to the input button using $("input[type='button']") and $("#playNow") with both .append() and .appendTo(), so I really don't know. It could be an error in the JS file or there could be something wrong with the HTML code. Everything else is displaying just fine, but the button isn't doing anything when clicked. Here is my code:
HTML (game.html):
<head>
<title>A Pretty Awesome Game</title>
<link href="game.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="game.js"></script>
</head>
<body>
<div class="defaultDisplay">
<h1>A Pretty Awesome Game</h1>
<input type="button" value="Play Now!" id="playNow">
</div>
</body>
</html>
CSS (game.css):
#import url(https://fonts.googleapis.com/css?family=Spectral);
body {
font-family: Spectral;
background-image: -webkit-linear-gradient(#FFF, #000);
background-size: cover;
background-repeat: no-repeat;
}
input, button {
font-family: Spectral;
}
JS (game.js):
function showPartOne() {
$("#playNow").click(function() {
$("<p>test</p>").appendTo(".defaultDisplay");
});
}
showPartOne();
Please help!
Edit: Thanks KevBot, it seems to be working when I run your code snippet but it still doesn't work on my webpage! I've updated my code in this answer as well.
Answer after question edit:
Your game.js has JS searching for HTML that does not yet exist (it reads and runs the JS before reading the HTML). You can quickly solve this by moving your script tag to just before the closing body tag:
You should end up with the following:
<!DOCTYPE html>
<html>
<head>
<title>A Pretty Awesome Game</title>
<link href="game.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="defaultDisplay">
<h1>A Pretty Awesome Game</h1>
<input type="button" value="Play Now!" id="playNow">
</div>
<script src="game.js"></script>
</body>
</html>
Original Answer:
You wrapped your code in a function that was never executed. Either put the jQuery event listener code outside of the function, or just call the function:
function showPartOne() {
$("#playNow").click(function() {
$("<p>test</p>").appendTo(".defaultDisplay");
});
}
showPartOne();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="defaultDisplay">
<h1>A Pretty Awesome Game</h1>
<input type="button" value="Play Now!" id="playNow">
</div>
Your syntax is absolutely file, It might be not triggering because showPartOne() is not getting called and hence click event is not getting bind.
Kindly call showPartOne() somewhere in the application.
Can you check this
function showPartOne() {
$("#playNow").click(function() {
$(".defaultDisplay").append("<p>test</p>");
});
}
Hey guys I'm trying to get the following to work...
demo_test.txt to load into the "div1" container
only have a href id "test" to trigger it
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("test").click(function() {
$("#div1").load("demo_test.txt");
});
});
</script>
</head>
<body>
<div id="div1">
<h2>Let jQuery AJAX Change This Text</h2>
</div>
<a id="test" href="#">Get External Content</a>
<br>
<a id="google" href="http://www.google.com/">Google</a>
</body>
</html>
Currently it doesn't run, but if I remove the Google line, it works. Is there something else I'm missing? Thanks!
Change your jQuery click handler to this:
$("#test").click(function() {
I've added a # in front of test to properly select your anchor tag.
I have been searching whole afternoon for a solution, but I didn't found it. I am writing a HTML5 webpage, using jquery and css. I'm trying to implement very simple drop down menu (I found tutorial here) but it does not work for me. I have copy paste this code from this article to a local html file and open it in browser and it works great, just as I want to implement menu, but when I try to implement the same code in my webpage it doesn't work.
I get in my console log displayed two errors:
(SyntaxError: function statement requires a name - jquery.js: row 2072) and then after this error i get
(ReferenceError: $ is not defined - index.html row 15, where the $ sign occurs).
I have been searching a lot, but I didn't found anything usefull which might help me. I have also checked number of times if I might have problem in jquery script declaration but It's ok. I don't have any idea why this simple code don't work in my application but in external code it works just fine. I have also try to insert language and text type on script tag, but I didn't work, neither if I leave script tag empty. I use latest Mozilla Firefox browser.
Here is my application code:
<!DOCTYPE html>
<html>
<head>
<title>Test title</title>
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/skin/default.css">
<script src="script/jquery.js" type="text/javascript"></script>
<script src="script/video.js" type="text/javascript"></script>
<script src="script/picture.js" type="text/javascript"></script>
<script src="script/ApplicationController.js" type="text/javascript"></script>
<script>
$("body").ready(function() {
$(".dropdown").hover(function() {
$(this).find(".sub_navigation").slideToggle();
});
});
</script>
</head>
<body onload="onApplicationLoad()">
<div id="header">
<img id="logo" src="images/logo.png" alt="Logo" width="200" height="38" />
<div id="verticalHeaderLine"></div>
<div id="headerMenu">
<ul id="navigation">
<li class="dropdown"> <button id="Login" class="button" title="Edit Login">Login</button>
<ul class="sub_navigation">
<li><button id="test" class="button" title="Edit Test">Test</button></li>
<li><button id="test1" class="button" title="Edit Test">Test 1</button></li>
<li><button id="test2" class="button" title="Edit Test">Test 2</button></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
and this is a css related to menu:
ul {
margin:0;
padding:0;
list-style-type:none;
min-width:200px;
}
ul#navigation {
float:left;
}
ul#navigation li {
float:left;
min-width:200px;
}
ul.sub_navigation {
position:absolute;
display:none;
}
ul.sub_navigation li {
clear:both;
}
I would be very happy if someone know what do I do wrong and if he could be so kind and tolk me what do I do wrong.
Regards,
Dahakka
$("body").ready(function() { should be $(document).ready(function() {
It's usually better to let Google host jQuery for you. See http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/ for a full explanation. Replace your reference to jQuery with
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
Also, at the end of your document, you have <body><html> instead of </body></html>
I think jquery is not being found. try adding this to your <head></head>.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
This is the google hosted jquery. If you have internet access it should at least solve your first problem
jQuery(document).ready(function($) {
$(".dropdown").hover(function() {
$(this).find(".sub_navigation").slideToggle();
});
});
Try this to see if there is a conflict or just jQuery isn't loaded at all.
It's a stupid question, I'll give you that. For the life of me I can't figure out how to align the text and my colorpicker. How do I get everything to be on one line, rather than the two lines it is now. See my fiddle. I've tried getting rid of display:block and clear:both but that didn't seem to work. Here's my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<script src="http://code.jquery.com/jquery-1.8.1.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link href="http://evoluteur.github.com/colorpicker/css/evol.colorpicker.css" rel="stylesheet" />
<script src="http://evoluteur.github.com/colorpicker/js/evol.colorpicker.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#color_picker").colorpicker();
});
</script>
</head>
<body>
<span>Select a color: <input id="color_picker" value="#92cddc"/></span>
</body>
</html>
Please see my fiddle for the css and js (I don't want to clutter everything up by posting everything here)
Try using this way: http://jsfiddle.net/C7hAY/6/
html:
<span style='display:block; width:320px;'>
Select a color: <input id="color_picker" value="#92cddc"/>
</span>
jquery:
$(document).ready(function(){
$("#color_picker").colorpicker();
$("#color_picker").parent().css('float','right');
});
Although i suggest you to do it with css.
What happened there:
When you bind the colorpicker to the input element jQuery wraps it with div so if you don't style that div it will always be in the second line and i styled it dynamically with use of jQuery, using .parent().
Here is the simplest solution:
$("span > div").css("display","inline-block");
Demo: http://jsfiddle.net/C7hAY/12/
The issue:
When you create the color picker, it wraps your <input> element inside a div. The generated code will look like this:
<span>Select a color:
<div style="width:181px;">
<input id="color_picker" value="#92cddc" class="colorPicker evo-cp0">
<div class="evo-colorind" style="background-color:#92cddc"></div>
</div>
</span>
That's why there is a newline in there.
Solution: Live Demo
Just set the style of the div to display:inline-block;.
Code:
$(document).ready(function(){
$("#color_picker").colorpicker();
$("#color_picker").parent().css("display", "inline-block");
});