I have this simple html file with little bit of jQuery in it but click event is not triggered here:
I am not getting any error and neither the console.log statement that I expect to print when click event is triggered.
Did I miss out on something?
<!doctype html>
<html>
<head>
<title>My WebPage</title>
<link rel="stylesheet" type="text/css" href="Day.css"/>
<link rel="stylesheet" type="text/css" href="Night.css"/>
</head>
<body>
<h1> My website </h1>
<button>Day</button>
<button>Night</button>
<script src="jquery.js"/>
<script>
(function(){
console.log('Inside func');
$('button').click(function() {
console.log('button was clicked');
});
})();
</script>
</body>
</html>
<script src="jquery.js"/>
should become:
<script src="jquery.js"></script>
You can read more about self-closing script tags here: Why don't self-closing script tags work?
I would just use the JQuery CDN in the head section.
Here's a demo
Related
Im trying to code a simple Javascript exercise where I have to place different text at different part of the page but it keeps throwing me a
TypeError:sal[0] is undefined
Here is the javascript code.
function sals(a,b,c,d,e,id)
{
var sal = document.getElementsByClassName(id);
sal[0].style.top=a;
sal[0].style.left=b;
sal[0].style.color=c;
sal[0].style.fontsize=d;
sal[0].style.zindex=e;
}
sals('5%','50%','yellow','250px','20','GB');
What am I doing wrong?
For further reference, here is my HTML code aswell
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1 class="GB"> Holla</h1>
<script src="main.js"></script>
</body>
</html>
Your JavaScript is running before the page (DOM) has fully loaded.
the simplest way to make sure the DOM is loaded before your JS runs, is to add 'defer' to the script tag thus;-
<head>
<title>Hello</title>
<link rel="stylesheet" href="main.css">
<script src="main.js" defer></script>
</head>
<body>
<h1 class="GB"> Holla</h1>
</body>
</html>
Im creating a signup page for my website but it is not responding to a click. I have the jQuery in a seperate file called signup.js. I know it is linked properly because an alert works.
Any help would be apreciated. Thanks
html:
<html>
<head>
<title>Sign Up</title>
<script src="JS/jquery-3.1.1.min.js"></script>
<script src="JS/signup.js"></script>
<link rel="stylesheet" href="CSS/signup.css">
<link rel="stylesheet" href="CSS/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<button id="signup-button">Sign Up</button>
</div>
</div>
</body>
</html>
jQuery:
$("#signup-button").click(function() {
alert("clicked");
});
You are trying to get the element before loading the DOM element so it won't get attach the handler to the element since it's not present at that point. To make it works wrap it using document ready handler or move the script tag after the element in the markup.
$(document).ready(function(){
$("#signup-button").click(function() {
alert("clicked");
});
});
Since the latest jquery update, everything is pointed on .on so .click is no longer valid, use
$('#signup-button').on('click', function(){//code here})
instead, and make sure you put it in a DOM ready
Make sure your code is executed on document ready.
$(function(){
$("#signup-button").click(function() {
alert("clicked");
});
});
I recommend you just put your jquery in the head, and the other javascript in the end of your body, because your js file is probably be "read" before your jquery file.
<html>
<head>
<title>Sign Up</title>
<script src="JS/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="CSS/signup.css">
<link rel="stylesheet" href="CSS/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<button id="signup-button">Sign Up</button>
</div>
</div>
<script src="JS/signup.js"></script>
</body>
</html>
and change your js file to:
$(function(){
$("#signup-button").click(function() {
alert("clicked");
});
});
because the $(function(){}); waits until the DOM is load and can be manipulated.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme/myjquerystyle.css">
</head>
<body>
<iframe>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="plugin/myjquerystyle.css">
</head>
<body>
My Plugins page
</body>
</html>
</iframe>
</body>
</html>
As you can see above code i have create a html page inside the html page.
My problem is that theme/myjquerystyle.css override my plugin/myjquerystyle.css
How can I give a priority to my plugin/jquerystyle.css file apply to my page.
Any solution
I believe we cannot define inside iframe (never tried so) however we can acheive this via Javascript where we can append styles to iframe section via:
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .myclass{display:none;} </style>"));
});
Else you can also try by adding styles to individual elements inside
iframe as:
iframe.$('mydiv').addClassName('Tablewithborder');
Hope it helps.
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">
I'm encountering a problem where my body onload="constructor()" is not being run. It works fine for me in firefox but I don't understand why it's not working for me in chrome. Here's the code I'm working with, I made a separate file and deleted everything to the bare minium to try figure out what was going wrong:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Personality Font</title>
<link rel="stylesheet" type="text/css" href="p1.css" />
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript">
//<![CDATA[
function constructor(which)
{
console.log("IN CONSTRUCTOR"); //In Constructor
var text = document.createElement('p');
text.appendChild(document.createTextNode("BLAH"));
document.getElementsByTagName('body')[0].appendChild(text);
}
//]]>
</script>
</head>
<body onload = "constructor();">
<h1>Personal Fonts: Find the Typeface that Matches Your Personality</h1>
<form>
</form>
</body>
</html>
Chrome has a built-in function with the name constructor. Call the function something else.