Starting a new site and can't get any jquery to fire. I've tried just executing some in the console in browser to test, moved from external jquery to inside the <head> and can't get anything. It isn't even seeing that first function as existing. I've a feeling it's something so stupidly simple I'm overlooking, but I'm just exhausted from looking over the same <100 lines. One of the errors I try when manually getting the width is this.
Failed to execute 'querySelector' on 'Document': '[object Window]' is not a valid selector."
Suggestions?
<!DOCTYPE HTML>
<html>
<head>
<script href="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script href="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<title>Daniel Jenkins</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:700' rel='stylesheet' type='text/css'>
<script>
function set_container_sizes(){
console.log("Setting div sizes");
var window_width = $(window).width();
console.log("Window is "+window_width+"px wide");
var window_height = $(window).height();
console.log("Window is "+window_height+"px tall");
$('#outer_container').css('max-height',window_height+'px');
$('#outer_container').css('max-width',window_width+'px');
}
$( document ).ready(function(){
console.log("Document now ready");
set_container_sizes();
});
$( window ).resize(function(){
console.log("Window resized");
set_container_sizes();
});
</script>
</head>
<body>
<div id="outer_container">
<div id="inner_top">
<div id="top_head">
Daniel L. Jenkins
</div>
</div>Hello there <div id="inner_bottom">
</div>
</div>
</body>
</html>
The issue is that you are using "href" inside the script tag instead of "src".
I think it should be <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
Related
When I load this page the script is not loading for some reason. What am I doing wrong here?
<html>
<head>
<title>hi</title>
<script language="JScript.Compact">
var script = document.createElement('script');
script.onload = function() {
alert("Script loaded and ready");
};
script.src = "http://192.168.1.106/js/min.js";
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
</html>
I think it is working but the alert doesn't get triggered because the script you refer to isn't loaded. Try it like this:
<!DOCTYPE html>
<html>
<head>
<link media="screen" href="style.css">
</head>
<body>
<p>…</p>
<img src="file.jpg" alt="" />
<script src="responsive-nav.min.js">
<script>
window.onload = function () {
console.log('Document loaded.');
function init();
function dosomething();
}
</script>
</body>
</html>
<script language="JScript.Compact">
The language attribute is obsolete, but browsers still support it.
Since you set it to an unrecognised language, browsers don't know how to execute it, so they ignore it.
Remove the language attribute.
I'm trying to print output to console when a document is loaded. Below is the code I have written. But there's no output displayed.
var div = document.querySelector('#red');
document.addEventListener('DOMContentLoaded',function (){
console.log('event triggered...');
});
Output is displayed correctly when I use below code. Can you please explain me the reason for this behavior?
var div = document.querySelector('#red');
window.addEventListener('load',function (){
console.log('event triggered...');
});
My simple HTML:
<html>
<head>
<title>enlitle</title>
<link href='styleSheet.css' type='text/css' rel='stylesheet' id='linkElement' />
<script async type='text/javascript' src='scripts.js'></script>
</head>
<body>
<div id='blue'>
<div id='red'>
</div>
</div>
</body>
</html>
This is really bugging me, can't seem to get this to work and I figure it's got to be some small little thing I'm overlooking. I am getting this error: Uncaught TypeError: undefined is not a functiontest-index.html:16 (anonymous function)
Here's code to reproduce, first the element:
<link rel="import" href="bower_components/polymer/polymer.html">
<polymer-element name="test-element" >
<template>
<div>YOOOOO</div>
</template>
<script>
Polymer({
loaderup: function(event, detail, sender) {
alert("WAT?")
}
});
</script>
</polymer-element>
And here's the page that's trying to load it:
<!doctype html>
<html>
<head>
<title>MyApp</title>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="test-element.html">
</head>
<body unresolved>
<test-element id="test-el"></test-element>
<script>
var x = document.querySelector("#test-el");
console.log(x);
x.loaderup();
</script>
</body>
</html>
But it gives the error I posted about on x.loaderup(). Any ideas?
You need to wait for the polymer-ready event, because the Polymer element upgrade is performed asynchronously:
<script>
window.addEventListener('polymer-ready', function() {
var x = document.querySelector("#test-el");
console.log(x);
x.loaderup();
});
</script>
I am trying to fire an event whenever a user clicks / declicks a radio button
Searching on stack overflow and trying out my own example on jsfiddle works.
However the same thing in a MOzilla Browser version 31 or Google chrome it fails - not sure why
I am using JQuery 2.1.1
<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>formDemo.html</title>
<meta charset = "UTF-8" />
<script src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
</head>
<body>
<input id='r1' type='radio' class='rg' name="asdf"/>
<input id='r2' type='radio' class='rg' name="asdf"/>
<input id='r3' type='radio' class='rg' name="asdf"/>
<input id='r4' type='radio' class='rg' name="asdf"/>
</body>
<script>
alert("1");
$(".rg").change(function () {
alert("yahoo");
});
alert("2");
$("#r1").change(function () {
alert("yahoo");
});
</script>
</html>
May be your jquery-2.1.1.min.js path is wrong, check you path and include it. If you don't know the path or you have not downloaded the library then you can include like this :
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
Also put your jQuery code inside ready function like this :
$(document).ready(function(){
$(".rg").change(function () {
alert("yahoo");
});
$("#r1").change(function () {
alert("yahoo");
});
});
You are not making function in a proper way. Make it this way.
$(function(){
$(".rg").change(function () {
alert("yahoo");
});
})
$(function(){
$("#r1").change(function () {
alert("yahoo");
});
})
Do you got any error in your console ?
If there is any error in your browser console post here
Try to put your code in $(document).ready();
Change the script src and link href to following it will work fine:-
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"</script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
Please have a look on code written below. I am trying to have a multiple timer on one page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="jquery.countdown.css" media="all" type="text/css" />
<style type="text/css">
#defaultCountdown { width: 240px; height: 40px; }
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.countdown.js"></script>
<script language="javascript" type="text/javascript">
function LoadText()
{
document.getElementById('dd').innerHTML = '<div id=\"defaultCountdown\" class=\"countdown\" rel=\"87401\">hjhg</div><br/><div id=\"defaultCountdown\" class=\"countdown\" rel=\"60\">hjgj</div><br/><div id=\"defaultCountdown\" class=\"countdown\" rel=\"1800\">hjhg</div><br/>';
}
</script>
</head>
<body>
<div id="dd">
</div>
<script type="text/javascript">
// Initialization
$(document).ready(function()
{
var date = new Date();
$('div.#defaultCountdown').each(function()
{
$(this).countdown
({
until:parseInt($(this).attr("rel"),10),
format:"DHMS",
expiryText:"Expired"
})
})
});
</script>
</body>
</html>
My code works fine when I create Divs Hardcoded. But when I load it through Ajax (For understanding of code, for the time being I am creating Divs using Function LoadText()), I am not able to get it displayed. Please help me out.
For one, you have this:
div.#defaultCountdown
which should be:
div#defaultCountdown
I don't see you calling your LoadText function anywhere
ID's are required to be unique within a document, and your LoadText function does not respect that rule
Unrelated, but you don't need to escape those double quotes inside of your single quoted string in LoadText
You should be using a class or unique IDs for the #defaultCountdown div.
Also this would confuse the selector engine since you are telling it to look for a class with a # sign in it:
$('div.#defaultCountdown').each(function()
Try changing it to a class and use:
$('div.defaultCountdown').each(function()
Update: Ok, the reason why your code isn't working is because the LoadText() function is never called. If you update your script to look like this, it will work (demo):
$(document).ready(function() {
// This is needed to simulate the ajax call
LoadText();
// set up countdown timers
var date = new Date();
$('div.countdown').each(function() {
$(this).countdown({
until: parseInt($(this).attr("rel"), 10),
format: "DHMS",
expiryText: "Expired"
});
});
});
sounds like a timing issue. your jQuery code runs when the data is rendered to the page not after your ajax query completes. Make that a function rather than something to run on ready and call it after the ajax finishes.
Your $('div.#defaultCountdown').each(function() loop runs once when the document is ready - if you subsequently add new divs using Ajax then you need to make sure you re-run your $('div.#defaultCountdown').each(function() code again now that new divs have been added.
The jQuery live() function is good for this.
The working Code if I am not using Ajax Response Text or JavaScript innerHTML. Any solution in this direction will be appriciated. Please find below the modified code that is working. In this code I have created the divs hardcoded. Both the codes can be tested by copying this codes and saving it to html file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Count Down Timer</title>
<link rel="stylesheet" href="jquery.countdown.css" media="all" type="text/css" />
<style type="text/css">
#defaultCountdown { width: 240px; height: 40px; }
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.countdown.js"></script>
<script language="javascript" type="text/javascript">
**//function LoadText()
// {
// document.getElementById('divo').innerHTML='<div id="defaultCountdown" class="countdown" rel="87401">aaa</div><br/><div id="defaultCountdown" class="countdown" rel="60">bbb</div><br/><div id="defaultCountdown" class="countdown" rel="1800">ccc</div><br/>';
// }**
// Initialization
$(document).ready(function()
{
var date = new Date();
$('div.countdown').each(function()
{
$(this).countdown
({
until:parseInt($(this).attr("rel"),10),
format:"DHMS",
expiryText:"Expired"
})
})
});
</script>
</head>
<body>
<div id="divo">
<div id="defaultCountdown" class="countdown" rel="87401">aaa</div><br/><div id="defaultCountdown" class="countdown" rel="60">bbb</div><br/><div id="defaultCountdown" class="countdown" rel="1800">ccc</div><br/>
</div>
</body>
</html>