jQuery slideDown script not working in simple code example - javascript

<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style>
</style>
<script type="text/javascript">
$(document).ready(function {
$('img').slideDown('slow');
});
</script>
</head>
<body>
<img src="images\sjmak-music-logo.jpeg"/>
</body>
</html>
The simple code example above is not working; I am attempting to simply make the image slide down from the top of the screen but it stays static. I also attempted to use 'display: none' on the image, but the image remains hidden instead of sliding down from the top.

You need to include jQuery library file to use jQuery methods.
In the below sample a jquery cdn version is added. Also to slide down an image it has to be hidden first
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style>
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('img').slideDown('slow');
});
</script>
</head>
<body>
<img src="images\sjmak-music-logo.jpeg" style="display: none"/>
</body>
</html>
Demo: Fiddle

Related

How to include the CSS for a div you are loading from another page

I am attempting to load content from a div on one page of my site to another page on my site on page-load.
The following (example) code seems to achieve that effectively.
However... how would I also include all of the CSS associated with the content?
Any help would be greatly appreciated.
SOURCE PAGE
<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" href="exampleStylesheet.css">
</head>
<body>
<div>SOURCE CONTENT HERE</div>
</body>
</html>
LANDING PAGE
<!DOCTYPE html>
<html>
<head lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div id="loadedContent"></div>
<script>
$('#loadedContent').load("contentToLoad.html"); <!-- loads other page's content -->
</script>
</body>
</html>
EXAMPLE CSS
body {
margin: 0;
background-color: blue;
}

jQuery templates not working (jQuery 3.4.1)

I am not sure what is wrong with my code. When I open it in Firefox, it doesn't do anything.
However, copying it into fsfiddle it works
Am I missing a JavaScript file for jQuery templates but I thought this was added to jQuery in 1.5
why
<!DOCTYPE html>
<html>
<head>
<script src="scripts/jquery-3.4.1.js"></script>
<script src="scripts/main.js"></script>
<meta charset="UTF-8">
<title>Exam Random Generator</title>
</head>
<body>
<div id ="mainContainer"> </div>
<script id="questionTemplate" type="text/x-jQuery-tmpl">
<div class="questionContainer">
<p class="question">${sQuestionText}</p>
</div>
<br/>
</script>
<script type="text/javascript">
// Render the books using the template
$("#questionTemplate").tmpl(oQuestions).appendTo("#mainContainer");
</script>
</body>
</html>

jQuery click event not working on HTML page

I am having a lot of trouble trying to add text to an existing <p> element using jQuery. I have tried many different methods but nothing has worked so far. Here is the code for the html file:
<!doctype html>
<html>
<head>
<script src="index1.js"></script>
<title>Drinking Game</title>
</head>
<body>
<button id="creategame" >Create game</button>
<p id="demo">Hello</p>
<script>
$(document).ready(function(){
$('#creategame').click(function(){
$("#demo").append("Test");
});
});
</script>
</body>
</html>
My guess is you don't load jQuery file, and the console has
$ is not defined
error. Simply, add
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
to <head> tag
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="index1.js"></script>
<title>Drinking Game</title>
</head>
You are missing the jQuery file. Add this code <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> to your file above the <script src="index1.js"></script>. Make sure it's above it because if it's not then you can't call the jQuery functions in the your index1.js file.
try using the .html() function:
$("#demo").html("Test");
The following worked for me.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id='createGame' class="btn btn-default">Click</button>
<p id="demo">Hello</p>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$(document).ready(function() {
$("#createGame").click(function(){
$("#demo").append("Test");
});
});
</script>
</body>
</html>
You need to reference jQuery in a <script> tag somewhere.

JQuery UI Tooltip - wrong placement of tooltip (on the left side of page instead around button)

I have this piece of code:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function(){
$(".has-tooltip").each(function(){
$(this).tooltip({content: "test", items: "button"});
});
});
</script>
</HEAD>
<BODY>
<BUTTON class="has-tooltip" style="margin-left: 100px;">First</BUTTON>
<BUTTON class="has-tooltip" style="margin-left: 200px;">Second</BUTTON>
</BODY>
</HTML>
And something is completely wrong with tooltip - it should appear with styles from jQuery UI but it doesn't, and is wrong placed - it appears, even for button with bigger margin, on the left side of screen (and as I said without any styling, it looks like plain text), even with ,,track" property set to ,,true" it doesn't follow cursor exactly, but still appears on the left side of page and move a little when I move cursor.
I think this is pretty simple example (that code is simplified problem that occurred at my work) and I can't see what am I doing wrong. I will be happy if anybody helps me - thank you in advance.
P.S. Snippet, this is exactly the same behavior as I got in my browser:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function(){
$(".has-tooltip").each(function(){
$(this).tooltip({content: "test", items: "button"});
});
});
</script>
</HEAD>
<BODY>
<BUTTON class="has-tooltip" style="margin-left: 100px;">First</BUTTON>
<BUTTON class="has-tooltip" style="margin-left: 200px;">Second</BUTTON>
</BODY>
</HTML>
You aren't linking to the css file correctly.
Replace:
<link rel="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
With:
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

Make image appears when user scroll

I have a very long html page, with a lot of things.
I want that an image in a div appears when user scroll down the page and reach the div.
The appartition will be managed whith the css property transition:opacity
But I don't understand how to trigger the effect.
exemple
CSS
.imageToAppear{display:none;opacity:0}
HTML
<div id="wantedonscroll"></div>
<div id="imageToAppear"><img src="/01.png"></div>
JQUERY
$( "#wantedonscroll" ).scroll(function() {
$("#imageToAppear").fadeIn();
});
you can costumize the fade in event here is documentation Jquery Fadein
thank your for your answer :)
But it just don't work in my html page...
this is my file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
#imageToAppear{display:none;opacity:0}
</style>
</head>
<body>
<div>
<p>Lorem ispum .... and a lot of things in order to have something to scroll</p>
</div>
<div id="wantedonscroll"></div>
<div id="imageToAppear"><img src="test.png"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("#wantedonscroll").scroll(function() {
$("#imageToAppear").fadeIn();
});
</script>
</body>
</html>
what is wrong with it?

Categories