I just want a simple count up from date on my website in JS
tried to use this: http://keith-wood.name/countdown.html - count up -
and just pasted count up code in script part of that example page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Countdown</title>
<link rel="stylesheet" href="css/jquery.countdown.css">
<style type="text/css">
#defaultCountdown { width: 240px; height: 45px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/jquery.plugin.min.js"></script>
<script src="js/jquery.countdown.js"></script>
<script>
$('#sinceCountdown').countdown({since: startYear,
format: 'YOWDHMS', description: 'Since New Year'});
</script>
</head>
<body>
<h1>jQuery Countdown Basics</h1>
<p>This page demonstrates the very basics of the
jQuery Countdown plugin.
It contains the minimum requirements for using the plugin and
can be used as the basis for your own experimentation.</p>
<p>For more detail see the documentation reference page.</p>
<p>Counting down to 26 January <span id="year">2014</span>.</p>
<div id="defaultCountdown"></div>
<dl>
<dt>Github</dt><dd>https://github.com/kbwood/countdown</dd>
<dt>Bower</dt><dd>kbw-countdown</dd>
</dl>
</body>
</html>
but it's not working. I'm a total beginner. What can I do next?
Related
I have a text file and I want that text into my <p id="top_ten"></p> I have not used jQuery before, but I was hoping I could give it try. Based on other sources, I feel like I am close, but I must be missing a detail or step somewhere.
This is what I currently have:
<!DOCTYPE html>
<html lang="en">
<head>
<title>S&P 500 Top Performers</title>
<meta name="description" content="Gather top performers from S&P 500"/>
<link rel="stylesheet" href="../static/css/styles.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.get("../Todays_Top_Ten.txt", function(data) {
document.getElementById("top_ten").src=data;
})
});
</script>
</head>
<body>
<h1>S&P 500 Top Performers</h1>
<div class="sec" id ="sec_1">
<p id="top_ten"></p>
</div>
Top Ten
</body>
</html>
I am using select2 in my project. As per design, I am removed the search box in selectbox2, but after removed search box, keyboard select option not works. Could any one help me to fix this. - Thanks
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Select2 Template</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css">
</head>
<style>
body {
margin: 0;
padding: 0;
}
</style>
<body>
<div>Skills</div>
<select id="skills" style="width: 200px">
<option>html</option>
<option>css</option>
<option>js</option>
</select>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<script>
$(document).ready(function() {
$('#skills').select2({
minimumResultsForSearch: Infinity
});
});
</script>
</body>
</html>
JS Bin: http://jsbin.com/kipuzet/edit?html,output
Instead of
$('#skills').select2()
use
$('#skills').select()
That should work.
I am a beginner to javascript. I am currently learning it.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Using Javascript</title>
<meta http-equiv="author" content="#infinity">
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h1>Elderflower</h1>
<script src="javascript.js"></script>
<div id="content">
<h2>Custom Signage</h2>
<div id="cost">Cost: $5 per tile</div>
</div>
</body>
</html>
Javascript:
var number;
var costOne;
var totalCost;
number=5;
costOne=2;
totalCost=number*costOne;
var el=document.getElementById('cost');
el.textContent=totalCost;
Now I think that this should work, but its not working. The text of the <div id="cost"> remains same.
Please help.
Most likely you are trying to update the DOM even before it is loaded - you can make sure the javascript is executed after the DOM is loaded by keeping JS at the end of the body tag like below -
<!DOCTYPE html>
<html>
<head>
<title>Using Javascript</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h1>Elderflower</h1>
<div id="content">
<h2>Custom Signage</h2>
<div id="cost">Cost: $5 per tile</div>
</div>
<script>
var number;
var costOne;
var totalCost;
number=5;
costOne=2;
totalCost=number*costOne;
var el=document.getElementById('cost');
el.textContent=totalCost;
</scirpt>
</body>
</html>
Start reading from here about Window load vs DOM load events
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
I tried putting the exact .html and .js codes online and hosting it myself.
I want to replicate this example: http://www.codecademy.com/courses/javascript-intermediate-en-txGOj/0/2?curriculum_id=50ecb9bedc5e3250c40000c6
You can view my code at www[dot]whatsgucci[dot]com/cloudstalk.html
Here's thee code I used:
HTML:
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stalkstyle.css"/>
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script src="stalkscript.js"></script>
</head>
<body>
<ul id="results">
</ul>
</body>
</html>
CSS:
#results {
color: #000000;
font-weight: bold;
font-family: cursive;
}
JS:
SC.initialize({
client_id: '5e3fe3759c70fe637cb15bab22e238e0'
});
$(document).ready(function() {
SC.get('/tracks', { genres: 'festival trap' }, function(tracks) {
$(tracks).each(function(index, track) {
$('#results').append($('<li></li>').html(track.title + ' - ' + track.genre));
});
});
});
But nothing ends up appearing
Where exactly did you add
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
your example is currently broken with out adding jquery. you have to add jquery above the soundcloud sdk import like this:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link type="text/css" rel="stylesheet" href="stalkstyle.css"/>
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script src="stalkscript.js"></script>
</head>
<body>
<ul id="results">
</ul>
</body>
</html>
you can see your working example here:
http://runnable.com/UzetnvwmO3pX9Eiq/code-academy-how-to-make-this-soundcloud-api-example-to-work-irl
Include Jquery library in your code
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>