Unable to slideUp div using jQuery - javascript

I have downloaded the 1.11.3.min.js file and placed it in the same file where I have kept the HTML and script files. Before writing this code I have practiced jQuery a lot and those time I have succeeded, but this time I can't run it.
HTML
<!DOCTYPE html>
<head>
<!---<script type="text/javascript" src="image.js"></script---->
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.js"></script>
<!---<link rel="stylesheet" type="text/css" href="image.css">---->
</head>
<body onload="slideimage()">
<img src="1.jpg" id="slide" width="400px" height="400px"/>
<div id="button">
`enter code here`<button onclick="change_image()" />1</button>
</div>
</body>
</html>
jQuery
$document.ready(function(){
$("#slide").click(function(){
$(this).slideUp(400);
});
});
I have downloaded the 1.11.3.min.js file and put in the same file where i have kept the HTML and script files.Before writing this code i have practiced jQuery a lot and those time i have succeeded.But this time i have failed to run it.

Just replace this line of code
$document.ready(function(){
with this line
$(document).ready(function(){
You did't add brackets around document

May be you want do this:
$(document).ready(function(){
$("#slide").click(function(){
$(this).slideUp(400);
});
});

First, I recommend using CDN's for jQuery (less loading time), it can be found here
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
then, you forgot to end your function, and you forgot () around document
your script should look like this:
$(document).ready(function() {
$("#slide").click(function() {
$(this).slideUp(400);
});
});

Related

Dynamically reading text file into page

I'm trying to load a .txt file into my simple html page. I'm very noobish and all the code i got is stolen from stackoverflow.
The text file is in the same folder as the html file and contains some text that I'd like to have shown in a div and not just loaded in at the start but dynamically updated (in a 1 sec interval).
The Page that results from the code is just empty.
I am using Chrome 73.
I only use the html file and the txt file. No other files are in the folder.
<html>
<head>
<script type="text/javascript">
setInterval(read,1000);
function read(){
jQuery.get('file.txt',function(data){$('#container').html(data);});
}
read();
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
I don't know what's wrong with this code. Am I missing libraries? If you came up with a completely new code that would be appreciated as well.
Yes, you are missing the jQuery library. Try it like this and let me know:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
function read(){
jQuery.get('file.txt',function(data){$('#container').html(data);});
setTimeout(function(){read() },1000);
}
read();
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
Reference:
https://stackoverflow.com/a/24320973/1447509
See note in italics at very bottom of this article
what about a simple jQuery Load ?
$("#container").load("file.txt");
http://api.jquery.com/load/

Loading jQuery and own JS

I've looked for some time on the internet to get the right awnser for my problem and asked some colleagues... I'm still at the same problem.
As follows:
(I'm new at using JS and jQuery)
I wanna load my own JS into my HTML (written in PHP).
<script src="standaard.js"></script>
and
<script src="test.js"></script>
standaard.js contains all of this: https://code.jquery.com/jquery-3.2.1.min.js
test.js
$(document).ready(function(){
$("button").click(function(){
$("p").fadeOut("slow");
});
});
and the <button> it refers to is in a PHP file:
<button id="button"> CLICK HERE!</button>
Now when I just load standaard.js and copy the contents of test.js in the PHP file between <script></script>, it works just as it should.
But when I load it from different files, it doesn't and when I inspect the page in Firefox console it gives me this:
SyntaxError: expected expression, got '}'
[More Info]
test.js:4:10
I hope someone could help me with this and that I didn't make a newbie mistake :)
Note: I suspect that it has something to do with time that both scripts need to load and that test.js goes first... but then again, I don't get the error that pops up.
EDIT:
Here is the trimmed PHP file:
<?php
echo '<!doctype html>
<html>
<head>
<title>Opdracht 4!</title>
<meta name="author" content="Danny">
<link rel = "stylesheet" href = "basis.css">
</head>
<body>
<h3>Naam</h3>
<p> Danny </p><br>
<h3>Geboortedatum</h3>
<p>a date</p><br>
<h3>Woonplaats</h3>
<p>A City</p>
<br><br><br>
<div class="footer">
<footer>
&#169 2017, Danny
</footer>
</div>
<script src="standaard.js"> </script>
<script src="test.js"></script>
</body>
</html>';
?>
right before the ending </body> tag, put your two scripts in this order:
<script id="jquery" src="standaard.js"></script>
and
<script src="test.js"></script>
You can remove id="jquery". That is not serving any purpose. You should probably just rename the file to be jquery.min.js. This is not causing you any real issue, but it makes more sense naming-wise.
in the test.js file, you can put your script:
$(document).ready(function(){
$("button").click(function(){
$("p").fadeOut("slow");
});
});
After many tries I've found the solution!
It seems quit simple and not very logic but i replaced all " to ' and it worked!?
like this:
$(document).ready(function(){
$('button').click(function(){
$('p').fadeOut('slow');
});
});
Thank you all for your response, with your help I knew what things to cross off that coulndn't be it.

Is my jQuery .load bloacked by the CMS?

I am using prettyPhoto inside a Movable Type CMS page. To make it work I have to use a
<p>
<mt:setvarblock name="html_head" append="1">
JS scripts here
</mt:include>
</p>
section. To make a gallery with 30-40 pictures, I have to add a block for each picture that looks something like this:
<a href="pathtoimage.jpg" rel="prettyPhoto[GalleryName]" title="Some title">
<img src="pathtothumbnail.jpg" alt="alt text" height="120" width="120" />
</a>
I want to generate these entries from a csv file using a (python) script and put into a separate file on the web server. Then I use this code to load these entries into the page:
<div id="divTestArea1"></div>
<script type="text/javascript">
$(function() {
$("#divTestArea1").load("output_en.txt");
});
</script>
When I load the page the thumbnails show up, but when I click them the pathtoimage.jpg is loaded instead of prettyphoto.
My question: Am I doing something wrong or is movable type blocking the execution for security reasons? How to debug this? I have firebug but no idea what to look for.
P.S: When pasting the entries directly into the page it works as expected.
Edit: full working code
<p>
<mt:setvarblock name="html_head" append="1">
<script src="../gallery/js/jquery-1.6.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="../gallery/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="../gallery/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
</mt:setvarblock>
<mt:include name="include/header.tmpl">
<div id="divTestArea1"></div>
<script type="text/javascript">
$(function() {
<!--$("#divTestArea1").load("../gallery/output_en.txt");-->
$("#divTestArea1").load("../gallery/output_en.txt", function() {
$("a[rel^='prettyPhoto']").prettyPhoto();
});
});
</script>
<script type="text/javascript" charset="utf-8">// <![CDATA[
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({social_tools: false});
});
// ]]></script>
</mt:include>
</p>
Try including the prettyPhoto() call after the AJAX has finished loading, because at the moment the plugin is being executed on page load, before the element it is targeting is available in the DOM.
<script type="text/javascript">
$(function() {
$("#divTestArea1").load("../gallery/output_en.txt", function() {
$("a[rel^='prettyPhoto']").prettyPhoto();
});
});
</script>

I want to add my jQuery file separate from my HTML

I want to write cleaner and readable code, so I wanted to implement my jQuery code in a separate file. I saved the file in the sam folder as the jQuery code I downloaded from jquery.com. In my HTML I put the reference in there, and it does not work, but if I leave the jQuery code in my HTML it works.
My HTML code is this:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>focusin demo</title>
</head>
<body>
<input type="text" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</body>
</html>
My jQuery code is in a separate file called test.js and follows:
$(':text').focusin(function() {
$(this).css('background-color', 'yellow');
});
But when I run it in my browser it doesn't work. I basically tried everything and decided I need professional help.
You may have a problem with relative links. Try changing this
<script type="text/javascript" src="js/jquery.js"></script>
to this:
<script type="text/javascript" src="/js/jquery.js"></script>
You need put your code in $(function() { ... });
Like this:
$(function() {
$(':text').focusin(function() {
$(this).css('background-color','yellow');
});
});
You need to add a ready handler for jQuery scripts, like
$(function() {
$('input[type=text]').focusin(function() {
$(this).css('background-color','yellow');
});
});
You can first confirm inclusion of a file by putting the alert() function in the test.js file. If included then you can try writing some jQuery code in the test.js file to check whether the jQuery file is included properly or not.

JQUERY won't work on local machine

I'm trying JQUERY on my machine, but for some reason, nothing seems to work. Here's the test file:
<html>
<head>
<script type="text/css" src="jquery.js">
</script>
<script type="text/javascript">
$("p").mouseover(function () {
$(this).css("color","black");
});
$(document).ready(function(){
$("body").css("background-color","black");
$("body").css("color","white");
});
</script>
</head>
<body>
<h1>This is a test</h1>
<p>Roll over me!</p>
</body>
</html>
Nothing in there works. Also, if anybody wants to know, accessing through my domain and through the local both don't work. I'm really confused, because I copied most of that code off the internet, just in case there was something wrong with my typing.
For some reason, firefox is throwing this error:
Code: Evaluate
$ is not defined
http://hussain.mooo.com/jq.html
Line: 6
$ is not defined
http://hussain.mooo.com/jq.html
Line: 6
New code (moved the p onmouseover handeler)
<script src="jquery.js" type="text/css">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseover(function () {
$(this).css("color","black");
});
$("body").css("background-color","black");
$("body").css("color","white");
});
</script>
Specify correct type for javascript file:
<script type="text/javascript" src="jquery.js"></script>
Update
You're currently using type="text/css" as content type for javascript file which is incorrect. Try to copy above code into your script.
Screenshot
removed dead ImageShack link
Install firebug and see what it tells you in the Console tab.
You should move the attachment of the mouseover handler into $(document).ready(...) because the paragraph won't necessarily exist until the document is ready and so no handler can be attached to it.
Download the latest version of jQuery "jquery-1.3.2.min.js" and link the file correctly. and try this,
<script type="text/javascript">
$(function(){
$("p").mouseover(function () {
$(this).css("color","black");
});
$("body").css("background-color","black");
$("body").css("color","white");
});
</script>

Categories

Resources