I can't seem to understand what is wrong with the code.
I've added jquery and jquery UI still have the :
[objec object] has no method effect error.
Here is the html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="stylesheet.css" type="text/css"/>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
<script type="text/javascript" src = 'script.js'></script>
</head>
<body>
<div id = 'container'>
<div id ='one' class = 'inside'>1</div>
<div id ='two' class = 'inside'>2</div>
<div id ='three' class = 'inside'>3</div>
<div id ='four'class = 'inside'>4</div>
<div id ='five' class = 'inside'>5</div>
</div>
</body>
</html>
And the javascript code :
$(document).ready( function () {
alert('JQ on');
$('.inside').mouseover(function () {
$(this).fadeTo(1000,1);
});
$('.inside').mouseleave(function () {
$(this).fadeTo(500,0.2);
})
$('.inside').click(function () {
$(this).effect('explode');
})
})
Any ideas?
You've included the jQuery UI stylesheet, but not the JavaScript for it.
You need to add:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
(Or another URI that supplies it) after you include the jQuery JS.
I suppose you need to include jQuery UI
Related
I can't see why my page isn't loading what's in the <h1> tag in my index.js file. I'm trying to make a practice app with ReactJS but it won't even let me get started. I've tried many things to rectify this but fell short every single time hence why I'm here.
Here's my index.html
<!DOCTYPE html>
<html>
<title>Lamda</title>
<marquee>Welcome to Lamda!</marquee>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable = yes">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
</head>
<body>
<div id="LamdaPage"></div>
</body>
<script type="text/babel" src="index.js"></script>
</html>
Here's my index.js
var LamdaPage = React.createClass({
render: function () {
<div>
<h1>Why won't this show?</h1>
</div>
}
});
ReactDOM.render(<LamdaPage/>, document.getElementById("LamdaPage"));
You should note that a function must return value. In this case, render function must return value as HTML which you are putting as body of function
var LamdaPage = React.createClass({
render: function () {
return (<div>
<h1>Why won't this show?</h1>
</div>);
}
});
ReactDOM.render(<LamdaPage/>, document.getElementById("LamdaPage"));
<!DOCTYPE html>
<html>
<head>
<title>JavaScript and the DOM</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 id="myHeading">JavaScript and the DOM</h1>
<p>Making a web page interactive</p>
<script src="app.js"></script>
</body>
</html>
This is my html code and the js I have written is here
const myHeading = document.getElementById('myHeading');
myHeading.addEventListener('click', () => {
myHeading.style.color='blue';
});
It is very simple however for some reason the h1 tag does not seem to be turning blue on click event?
Maybe your dom is not ready when js executed. Try this
document.addEventListener("DOMContentLoaded", function() {
// your code
})
Im trying to dynamically update the CSS-Stylesheet of my page using jQuery and everything seems to be working fine in Chrome, but sadly in IE11 doesnt seems to do the trick.
The following code shows the HTML and JS Files:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="default-style" content="style-02">
<title>Stylesheet Switcher</title>
<!-- CSS -->
<link rel="stylesheet" href="style-01.css" title="style-01">
<link rel="stylesheet" href="style-02.css" title="style-02">
<link rel="stylesheet" href="style-03.css" title="style-03">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>Hello World</h1>
Change style
<select id="styleChanger">
<option value="style-01">style-01</option>
<option value="style-02">style-02</option>
<option value="style-03">style-03</option>
</select>
<br/>
<img src="icons.gif" alt="Smiley face">
</body>
</html>
And the JS File:
$(document).ready(function()
{
var theme = localStorage.getItem('style');
if (!theme) {
localStorage.setItem('style', 'style-01');
};
updateTheme();
$("#styleChanger").val(theme);
$("#styleChanger").change(function () {
var selectedText = $(this).find("option:selected").text();
var selectedValue = $(this).val();
localStorage.setItem('style', selectedValue);
updateTheme();
});
});
function updateTheme()
{
currentTheme = localStorage.getItem('style');
$('meta[http-equiv=default-style]')[0].content = currentTheme;
};
Does anybody knows, why after updating the "content" in the META tag IE doesnt loads the new CSS File?
Thanks for your help
So I have the following index.html:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project</title>
 <link href="public/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<script src="lib/jquery-1.11.3.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="public/js/main.js"></script>
</body>
main.js
(function($){
// Object declarations goes here
var FormLoanView = Backbone.View.extend({
tagName: 'div',
template: _.template('<p class="text-uppercase">Uppercased text.</p>'),
initialize: function(){
var data = this.$el.html(this.template())
$('body').html(data)
}
})
$(document).ready(function () {
var LoanView = new FormLoanView({
});
});
})(jQuery);
I am trying to create <p class="text-uppercase">Uppercased text.</p> and append it to the body in my index.html. It does return the p element, but the bootstrap styles don't kick in because "Uppercased text." does not return with uppercase letters. Anyone know why this is happening? Can bootstrap classes not be using in _.template?
It looks like your bootstrap.css isn't included properly. Try using the CDN or fixing the relative path of the css file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project</title>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="lib/jquery-1.11.3.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="public/js/main.js"></script>
</body>
Here's an example using only the CSS: https://jsfiddle.net/9nm5f0x9/
You don't need to include the bootstrap JS file as another commenter stated.
My options.html:
<!doctype html>
<html>
<head>
<title>Item Notifier v1.0.2</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="jquery.js"></script>
<script src="options.js"></script>
</head>
<body>
<h1>Cowboy's Item Notifyer</h1>
<label>Last updated hat:<h2 id='itemname'>[ loading... ]</h2></label>
</body>
</html>
Then my options.js:
$(document).ready(function() {
$('#itemname').html() = localStorage.mostRecentHat;
});
It's supposed to change the innerHTML from [ loading... ] to the value of mostRecentHat but it turns up the value as undefined and doesnt change the innerHTML.
You should pass the value as a parameter to html method.
$(document).ready(function() {
$('#itemname').html(localStorage.mostRecentHat);
// document.getElementById('itemname').innerHTML = localStorage.mostRecentHat;
});