I am having trouble getting the Javascript to work. All three are in the same folder. Also Chrome takes a while to open, but Firefox is instant. Thanks.
My HTML:
<html>
<head>
<title></title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type='text/javascript' src='script.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
<body>
<div>Hover Over Me!</div>
</body>
</html>
My CSS:
div {
height: 100px;
background-color: #ABCDEF;
font-family: Verdana, Arial, Sans-Serif;
font-size: 1em;
text-align: center;
}
My Javascript:
$(document).ready(function(){
$('div').mouseenter(function(){
$(this).fadeTo(1000, 1);
});
$('div').mouseleave(function(){
$(this).fadeTo(1000, .25);
});
Order of script files: Since your script file is using jQuery it should be included after the jQuery library.
Please have a look at the browser console to see whether there is any error as the first step of debugging client side script issues
<html>
<head>
<title></title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div>Hover Over Me!</div>
</body>
</html>
Also you are missing closing brackets at the bottom of script
$(document).ready(function () {
$('div').mouseenter(function () {
$(this).fadeTo(1000, 1);
});
$('div').mouseleave(function () {
$(this).fadeTo(1000, .25);
});
});
Demo: Plunker
Related
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>Prueba</title>
</head>
<body>
<div class="prueba"></div>
</body>
</html>
CSS:
.prueba {
height: 100px;
width: 100px;
background-color: green;
}
JS (Edited):
var main = function() {
$('.prueba').click(function() {
$(this).removeClass('.prueba');
});
};
$(document).ready(main);
It (still) doesn't work. Can someone help me?
To select class, you should preface class name with a dot:
$('.prueba')
JQuery docs you may want to review.
I have tried to add the fullCalendar jquery to a view in my MVC 4 project. When I try to laod the page there are no errors but the calendar does not appear on the page. I am not sure why it isn't appearing and I have looked at the documentation and it looks like I got everything covered.
Here is my HTML:
#{
ViewBag.Title = "Calendar";
}
<h2>Calendar</h2>
<html>
<head>
<title>Calendar</title>
<link href="#Url.Content("~/Content/fullcalendar.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/fullcalendar.print.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="#Url.Content("/Scripts/moment.min.js")"></script>
<script type="text/javascript" src="#Url.Content("/Scripts/jquery.min.js")"></script>
<script type="text/javascript" src="#Url.Content("/Scripts/jquery-ui.custom.min.js")"></script>
<script type="text/javascript" src="#Url.Content("/Scripts/fullcalendar.min.js")"></script>
<script type="text/javascript">
$("#calendar").fullCalendar({
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
HERE IS MY CSS:
#calendar {
width: 900px;
margin: 40px auto;
}
Add refs to the libs you want to use;
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='fullcalendar/lib/jquery.min.js'></script>
<script src='fullcalendar/lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
<script type='text/javascript'>
I've been asked to create a page with a header and sidebar where the sidebar is 100% the height of the page minus the heading height, without a vertical scrollbar. The following works in FF, Chrome, and IE9+, but the polyfill doesn't do anything in IE8.
I've tried the following 2 polyfill calc libraries in IE8, and neither work. Am I doing something wrong, or do the libraries not work in the given scenario? I've tried loading the script using Modernizr as per the example, as well as loading the script directly at the end of the page without effect.
https://github.com/CJKay/PolyCalc
https://github.com/closingtag/calc-polyfill
Code Example:
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="modernizr.custom.js"></script>
<style>
body,html{
height: 100%;
color: white;
margin:0;
padding: 0;
}
.heading{
background:red;
height: 100px;
}
.box{
background: blue;
width:200px;
height: 100%;
height: calc(100% - 100px);
}
</style>
</head>
<body>
<div class="heading">Heading</div>
<div class="box">Sidebar</div>
<!--MUST be placed after styles have loaded-->
<!--<script type="text/javascript" src="./calc.min.js"></script>-->
<!--<script type="text/javascript" src="./polycalc.js"></script>-->
<script>
jQuery(document).ready(function() {
});
Modernizr.load({
test: Modernizr.csscalc,
// nope: 'calc.js'
nope: 'polycalc.js'
});
</script>
</body>
</html>
The CSSParser library is required for the CJKay Polycalc to work. This works in IE7+.
<!--CSSParser required for CJKay Polycalc
https://github.com/Schepp/CSS-Filters-Polyfill
copy following files to: js/css_parser
- contentloaded.js
- css-filters-polyfill-parser.js
- css-filters-polyfill.js
- cssParser.js
-->
<script>
var polyfilter_scriptpath = "js/css_parser/";
</script>
<script type="text/javascript" src="js/css_parser/cssParser.js"></script>
<!--
CJKay Polycalc
https://codeload.github.com/CJKay/PolyCalc/zip/master
-->
<script type="text/javascript" src="js/polyfill/cjkay-polycalc.js"></script>
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>
I'm studying Jquery, and I was trying to do a simple SlideShow, but nothing happens...
Here's my HTML
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/Style.css">
<meta charset="UTF-8">
<title>SlideShow</title>
</head>
<body>
<div id="slides">
<img src="imgs/1.jpg">
<img src="imgs/2.jpg">
<img src="imgs/3.jpg">
</div>
<script type="text/javascript">
$(function(){
$("#slides").cycle({
fx: 'fade',
speed:2000,
timeout:4000,
});
})
</script>
<script type="text/javascript" src="js/Jquery.js"></script>
<script type="text/javascript" src="js/Cycle.js"></script>
</body>
</html>
My Css:
*{
margin: 0;
padding: 0;
}
#slides{
width: 1024px;
height: 768px;
margin: 0 auto;
overflow: hidden;
}
I also tried to change, this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
for this:
<script src="js/jquery-1.11.0.js"></script>
Nothing...
You need to include jQuery before your Cycle plugin, so reverse the order of your scripts here:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/Cycle.js"></script>
Also, it's better to include CSS before Javascript as well as putting your Javascript at the bottom of your page before closing </body> tag.