<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Practice!</title>
<link href="../_css/site.css" rel="stylesheet">
This is my source for jquery (which I got from my text book)
<script src="../_js/jquery-1.7.2.min.js">
</script>
<script src="javascript/hello.js">
</script>
<script src="javascript/fadeIn1.js">
</script>
<script src="javascript/igotit.js">
</script>
</head>
<body>
<div class="wrapper">
<div class="header">
<p class="logo">JavaScript <i>&</i> jQuery <i class="mm">The<br>
Missing<br>
Manual</i></p>
</div>
<div class="content">
<div class="main">
<h1>Fading In</h1>
<p>Here I come!!!</p>
</div>
<div class="aside"> </div>
</div>
<div class="footer">
<p>JavaScript & jQuery: The Missing Manual, by David McFarland. Published by O'Reilly Media, Inc.</p>
</div>
</div>
</body>
</html>
This is what my external javascript files look like. For my external files, would they just need to be the "<script>" part of the code or the whole entire "<DOCTYPE>" to "</html>"?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fade In</title>
<link href="../_css/site.css" rel="stylesheet">
<script src="../_js/jquery-1.7.2.min.js">
</script>
<script>
$(document).ready(function() {
$('body').hide().fadeIn(3000);
});
</script>
</head>
<body>
<div class="wrapper">
<div class="header">
<p class="logo">JavaScript <i>&</i> jQuery <i class="mm">The<br>
Missing<br>
Manual</i></p>
</div>
<div class="content">
<div class="main">
<h1>Fading In</h1>
<p>Here I come!!!</p>
</div>
<div class="aside"> </div>
</div>
<div class="footer">
<p>JavaScript & jQuery: The Missing Manual, by David McFarland. Published by O'Reilly Media, Inc.</p>
</div>
</div>
</body>
</html>
Sorry, I am new to this and am having troubles.
Your external files should only have JavaScript in them, so nothing that looks like
<this/>
should be in them. It looks like you just want:
$(document).ready(function() {
$('body').hide().fadeIn(3000);
});
...in your fadein1.js. Likewise for the other JS files.
When you have the document open in your browser, press F12 for some useful messages to paste here if it still isn't working.
Is Jquery file in the right location? If you are not sure just use this link for jquery:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
Related
I have a page that is using JavaScript to play mp3 files. The script has its own CSS which controls the look of that specific code. I have another CSS file that controls the look of the overall page. I need this script to fall in my container <div> to keep my pages looking consistent. The script's CSS is correctly altering the JavaScript and the global CSS is also impacting the overall page. The only problem is that the script code ignores the CSS which places it inside the container and content divs. Hence this script shows at the bottom when it should be inside the container before my footer.
How can I get this script to still follow the CSS from the overall page so all my pages are structured the same? When I take out the script code and just type some words, the text shows up in the correct place on the website.
HTML is something like this:
<html>
<head>
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="global.css" />
<link rel="stylesheet" type="text/css" href="plugin/css/style.css">
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="plugin/jquery-jplayer/jquery.jplayer.js"></script>
<script type="text/javascript" src="plugin/ttw-music-player-min.js"></script>
<script type="text/javascript" src="js/myplaylist.js"></script>
</head>
<body>
<div id="container">
<div id="header">
//header code
</div>
<div id="nav">
<ul>
//Navigation code
</ul>
</div>
<div id="content">
<script type="text/javascript">
$(document).ready(function(){
var description = 'Example text'
$('body').ttwMusicPlayer(myPlaylist, {
autoPlay:false,
description:description,
jPlayer:{
swfPath:'plugin/jquery-jplayer'
}
});
});
</script>
</div>
<div id="footer">
Copyright 2016
</div>
</div>
</body>
</html>
I think this is what you're looking for. Place the script tag somewhere other than the content (end of the file is usually good... or in a separate file... your choice) and attach the music player to the #content div:
<head>
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="global.css" />
<link rel="stylesheet" type="text/css" href="plugin/css/style.css">
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="plugin/jquery-jplayer/jquery.jplayer.js"></script>
<script type="text/javascript" src="plugin/ttw-music-player-min.js"></script>
<script type="text/javascript" src="js/myplaylist.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<!-- header code -->
</div>
<div id="nav">
<ul>
<!-- Navigation code -->
</ul>
</div>
<div id="content">
<!-- content goes here -->
</div>
<div id="footer">
Copyright 2016
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var description = 'Example text'
$('#content').ttwMusicPlayer(myPlaylist, {
autoPlay: false,
description: description,
jPlayer: {
swfPath: 'plugin/jquery-jplayer'
}
});
});
</script>
</body>
I´m trying to link jquery to an external js file, but I can´t get it to work. This is my full html. I have put jquery before the js file, as you can see. I also tryed to link both the jquery and js in the body after the div, but that didn't work either.
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css-teachers/lessons- teacher.css"/>
<script src="../jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../javascript-teachers/lessons-teacher.js"></script>
<meta charset="UTF-8">
<title>HOME</title>
</head>
<body>
<div id="box1"> <a href="page2.html"/></div>
<div id="box2"> <a href="page3.html"/></div>
<div id="box3"> <a href="#"/></div>
<div id="box4"> <a href="#"/></div>
<div id="box5"> <a href="#"/></div>
<div id="box6"> <a href="#"/></div>
</body>
</html>
My js works if I put it into the body like this
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css-teachers/lessons- teacher.css"/>
<meta charset="UTF-8">
<title>HOME</title>
</head>
<body>
<div id="box1"> <a href="page2.html"/></div>
<div id="box2"> <a href="page3.html"/></div>
<div id="box3"> <a href="#"/></div>
<div id="box4"> <a href="#"/></div>
<div id="box5"> <a href="#"/></div>
<div id="box6"> <a href="#"/></div>
<script src="../jquery-1.11.3.min.js"></script>
<script>
$("#box1").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
</script>
</body>
</html>
Any suggestions on what I should do?
Thanks in advance
Glad my comment above helped.
Just wanted to mention that, since you're using jQuery, you can also put the code in your external file in the following code block to prevent it from executing until all page elements are rendered:
$(document).ready(function() {
$("#box1").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
});
More info: https://learn.jquery.com/using-jquery-core/document-ready/
if you link your script inside the tag <head> </head> maybe you have to include the type:
<script type="text/javascript" src="../jquery-1.11.3.min.js"> </script>
like the same way you did with your home.js
I would like to start saying that I'm not that experienced with the technologies that I'm using, I'm doing this project to practice using them.
I just downloaded JetBrains Webstorm and created a Foundation Project.
I created a <textarea> and I want to bind it to a value I defined in my AngularJS controller. The controller code is very simple (it's in my main.js file):
var readerApp = angular.module("readerApp", []);
function ReaderCtrl = function($scope){
$scope.data = {
text = "Default text"
}
}
So I only have a simple text that I want to bind like this: ng-model="{{data.text}}"
Although when I do that, the <textarea> still doesn't show anything. I'll post the entire HTML page, maybe there's a small detail I'm missing, but it seems right to me
<!doctype html>
<html class="no-js" lang="en" ng-app="readerApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Speed Reader | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div>
<div class="row">
<div class="large-12 columns large-text-center">
<h1>Welcome to Speed Reader!</h1>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="panel" ng-controller="ReaderCtrl">
<h3>Insert your text here! </h3>
<textarea id="textarea" rows="25" ng-model="{{data.text}}"></textarea>
Start reading
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/main.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Code as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My God Man Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href="/Content/bootstrap/bootstrap.css" rel="stylesheet"/>
<link href="/Content/bootstrap/bootstrap-responsive.css" rel="stylesheet"/>
<link href="/Content/fontawesome/font-awesome.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="/Content/IE9FixScripts"></script>
;
<![endif]-->
</head>
<body>
<div id="wrap">
<div class="container">
<!-- Main content any sections which need to be filld in and then body -->
<div class="container">
<div class="jumbotron">
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h3>Home Page.</h3>
<h4> Welcome GodMan, if you click on the above link where it says [Needs Role] and if it works then you are good else you see a custom 401 message.</h4>
</hgroup>
</div>
</section>
<!-- footer section here needs customisation.-->
<div id="footer">
<footer>
<div class="row">
<div class="col-lg-12">
<ul class="list-unstyled">
<li class="pull-right">Back to top</li>
<li><a id="testingID" href="#"data-placement="left" data-toggle="tooltip" class="btn btn-default" type="button" data-original-title="Tooltip on left">Tool Tip Left</a></li>
<li>Tool Tip Right</li>
<li>Tool Tip Bottom</li>
<li>Tool Tip Top</li>
<li>PopOver</li>
<li>PopOver2</li>
</ul>
</div>
</div>
</footer>
</div>
<!-- footer ends-->
</div>
</div>
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script type="text/javascript">
$.ready(function () {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover({trigger: "hover"});
$('#testingID').tooltip('show');
//$().tooltip({
// selector: "[data-toggle=tooltip]",
// container: "body"
//})
});
</script>
</body>
</html>
Looked at the other link which [https://stackoverflow.com/questions/18410922/bootstrap-3-0-popovers-and-tooltips]
did what it says but ain't working.
what is the mistake what i am making.
am i forgetting to add a reference to something?
or my JQuery verion is not good should i go back?
Tried the fiddler example with JQ 2.X edge on the example above mentioned in post. and it works there.
but not for me. Strange. it may be some thing really small. but cant seem to get it.
Any help is appreciated.
I made a JS fiddle based on your code which can be found here - http://jsfiddle.net/w2gTy/
For the jQuery dependency I used 2.0.2, hopefully that isn't the difference. That said, you were missing 'document' in your $.ready declaration. Without it the tooltips never appeared.
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover({trigger: "hover"});
$('#testingID').tooltip('show');
//$().tooltip({
// selector: "[data-toggle=tooltip]",
// container: "body"
//})
});
That said, you could also even omit the $(document).ready() section and leave just the .tooltip initializers and that would work as well.
I apologize if you've already seen this. I'm still struggling a bit with this. I just need to modify the function to load only the colTwo div from the link selected on the menu instead of the entire page.
I see the code from the jquery website:
$('#result').load('ajax/test.html #container');
But I don't understand how to make the function do this.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Title</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript" src ='jquery-1.9.1.min.js'></script>
<script type="text/javascript">
$(function(){
$('#menu li a').on('click', function(e){
e.preventDefault();
var page_url=$(this).prop('href');
$('#colTwo').load(page_url);
});
});
</script>
<body>
<div id="header">
<h1>My Title</h1>
</div>
<div id="content">
<div id="colOne">
<div id="menu1">
<ul id="menu">
<li>Members</li>
<li>About</li>
</ul>
</div>
<div class="margin-news">
<h2>Recent Updates</h2>
<p><strong>None At This Time</strong> </p>
</div>
</div>
<div id="colTwo"><h2>Starting Text</h2></div>
<div style="clear: both;"> </div>
</div>
</body>
</html>
Kevin B is correct:
$('#colTwo').load(page_url + ' #colTwo');
Just add the selector as a string to the URL, and don't forget the space!