This is the code in the script.js:
$(document).ready(function() {
$('#mainobject').fadeOut('slow');
});
And this is the code in the index.html:
<!DOCTYPE html>
<html>
<head>
<title>Hitler Map</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"></link>
<script type="text/javascript" src="script.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id="header">
<h1 id="title">
Content
</h1>
</div>
<div id="footer">
</div>
<div id="mainobject">content1
<div id="aides">subcontent
<ul id="list1">
<li class="items">nananana batman</li>
<li class="items">woohoo</li>
</ul>
</div>
<div id="family">Family
<ul id="list2">
<li class="items">spoder-man</li>
<li class="items">dolan</li>
</ul>
</div>
</div>
</body>
</html>
The stylesheet works fine, but the Javascript is working neither locally nor on a server. Please help? It is a simple enough code.
You are not including Jquery
Add the following line inside head tag:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
Also close ul tag
<ul>
<li id="mainobject">some content</li>
</ul>
Assuming you added Jquery plugin to your document.
And
Wrong html
<ul>
<div id="mainobject">some content
<ul>
should be
<ul>
<li id="mainobject">some content </li> //seems here li.Div not allowed
</ul>
jQuery
$(document).ready(function() {
$('#mainobject').fadeOut('slow');
});
HTML
- Changed <div> to li, since div isn't allowed inside an <ul></ul> unordered list.
Always make sure you close all elements that need to be closed in HTML. In your sourcecode you forgot to close the <div> on which you wanted to use jQuery.
<head>
<title>some content</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"></link>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="header">
<h1 id="title">
Some more content
</h1>
</div>
<div id="footer">
</div>
<ul>
<li id="mainobject">some content</li>
<ul>
In case that your script.js is not the jQuery lib, add into the <head> tag
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
you must include your external script AFTER jQuery
Put script.js below the jquery, because it depend on jquery
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="script.js"></script>
Note: use minified version of jquery spped up the webpage
use <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> instead of <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
Also use Jquery migrate plugin for deprecated function works
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
Related
I watched a tutorial on a simple lightbox, and I am trying to figure out why it is not working for me. I am using http://lokeshdhakar.com/ version of the lightbox.
I do not know what the issue is. When I type it through the text editor I am using it just opens up the image in a new window. But just now in the code.io , it opened it up as the proper lightbox. I am so confused on what is happening.
Here is my code.
<head>
<meta charset="utf-8">
<title> Fine Art</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles5.css" rel="stylesheet" type="text/css">
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
<link href="fineart.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?
family=Roboto:400,100,400italic,500,900,300,500italic,900italic"
rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/lightbox.min.js"></script>
</head>
<body>
<h1 class="fineart"> B & W Photo </h1>
<div id="page"><!--beginning of sidebar-->
<div id="sidebar">
<div><img id="logo" src="img/logo.png"/>
</div>
<div>
<ul class="sb">
<li > Home </li>
<li > About </li>
<li > Works </li>
<li > Resume </li>
</ul>
</div>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</div><!--end of sidebar-->
<div class="container-a4">
<ul class="caption-style-4">
<li>
<img src="http://i68.tinypic.com/2re64y0.jpg" alt="blur">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1><a href="http://i63.tinypic.com/9lhaj9.jpg" data-
lightbox="photos">Blur</a></h1>
<p> Photo Series </p>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
(here's the rest)
http://codepen.io/kasiariele/pen/jbjVgr
Like I said, I'm not sure why its working in the site editor, but when I save and refresh onto the browser it opens the image on a new page instead of the lightbox. Please help!
You need to order your javascript libraries correctly.
You are loading lightbox.min.js before loading jquery.min.js (which is a dependency for how you are using lightbox).
Here is a direct quote from the lightbox website.
If you already use jQuery on your page, make sure it is loaded before lightbox.js. jQuery 1.7 or greater is required.
You should also load all of your scripts together right before your </body> closing tag, like so:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="js/lightbox.min.js"></script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
I am new to both html and javascript
I copied the these codes from codecademy, but they are not working well. I hope someone can explain to me why isn't the javascript working in my html. Thank you so much!
index.html
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<link href='style.css' rel='stylesheet'>
</head>
<body>
<div class="menu">
<!-- Menu icon -->
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<!-- Menu -->
<ul>
<li>About</li>
<li>Blog</li>
<li>Help</li>
<li>Contact</li>
</ul>
</div>
<!-- Main body -->
<div class="jumbotron">
<div class="icon-menu">
<i class="fa fa-bars"></i>
Menu
</div>
</div>
<script src="app.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</body>
</html>
app.js
var main=function(){
$('.icon-menu').click(function(){
$('.menu').animate({left:'0px'},200);
$('body').animate({left:'285px'},200);
});
$('.icon-close').click(function(){
$('.menu').animate({left:'-285px'},200);
$('body').animate({left:'0px'},200);
});
};
$(document).ready(main);
Change
<script src="app.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
To
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
The code you have there in app.js is written using jQuery.
Even though you need jQuery, the $, i your app.js you have included your script tag for including jQuery after app.js.
Therefore when your app.js loads, you still do not have jQuery so your script fails.
The solution is to include jQuery first and then including your app.js.
I'm relatively new to javascript and jQuery. I'm working on a web application where I have jQuery tabs in a markdown document. To keep things clean I've kept my javascript in a separate document and not in the markdown. Here is my javascript which is in tabs.js:
$(document).ready(function() {
$( "div.tabs" ).tabs();
});
Here is the markdown with embedded html and javascript
<html lang="en">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="/stylesheets/docs.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<script src="/javascripts/tabs.js"></script>
{% include resources.html %}
Requirements
------------------
<body>
<div class="tabs">
<ul>
<li>C#</li>
<li>Javascript</li>
</ul>
<div id="tabs-1">
<pre class="prettyprint">Some C# code</pre>
</div>
<div id="tabs-2">
<pre class="prettyprint">Some Javascript Code</pre>
</div>
</div>
</body>
When I run this code on the localhost everything works perfectly fine but when I deploy it I get an Uncaught TypeError: undefined is not a function error right after this line: $( "div.tabs" ).tabs();
Any ideas why this is happening? Any help would be greatly appreciated.
My code as follows does not work. I;ve tried including the js files, also the custom js to activate each tab individually but it does not work.
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.min.css">
<title>Bootstrap Page Layout - Sample Demo</title>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
</body>
Can anyone point what am I doing wrong?
Check your link to the bootstrap.js file. It appears you are using the minified css... you probably want the minified js file too.
<script type="text/javascript" src="js/bootstrap.min.js"></script>
Depending on your browser, check for any errors in your web developer tools. In Chrome, this link will help: https://developers.google.com/chrome-developer-tools/
EDIT
It appears jQuery is missing from your file. Include this link in the head (although I recommend loading JS in the footer for progressive enhancement / improved loading):
<script src="//code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
Bootstrap You need to download and add jquery in your script. Something like this
<script type="text/javascript" src="/script/jquery-1.7.2.min.js" />
see here for your reference i added jquery v 1.7.2
I have implemented a Phone Gap application using jQuery Mobile and java script for iPhone and android.
My app is almost completed.
Till now I used single index.html file for all the pages.
Now I need to use different html files for different pages.
So I have created multiple external html files for different pages, linked the references and added them in to www folder.
in that the i have a list view its css not visable
Main Page:- See page2 and page3 ref in index.html file
<div data-role="content">
<ul data-role="listview" data-theme="e" data-header-theme="a" data-dividertheme="a" id="List view">
<li data-role='list-divider' ><big>Lis view</big></li>
<li><a href='#page1' id='Page1' data-panel='main'>Page1 Information</a></li>
<li><a href='page2.html' rel="external" id='pagetwoid' data-panel='main'>Go to Page 2</a></li>
<li><a href='page3.html' rel="external" id='pagethreeid' data-panel='main'>Go to Page 3</a></li> </ul>
</div>
Page2:-
<!DOCTYPE html>
<html>
<head>
<title>Multiple htmls</title>
<meta id="viewport" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<!--
<link rel="stylesheet" href="inc/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" href="inc/jquery.mobile.splitview.css" />
<link rel="stylesheet" href="inc/jquery.mobile.grids.collapsible.css" />
<link rel="stylesheet" href="inc/jquery.mobile.structure-1.0.1.min.css" />
-->
<link rel="stylesheet" href="inc/jquery.alerts.css" />
<link rel="stylesheet" href="inc/jquery.mobile.datebox.css" />
<script charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript" src="inc/jquery-1.7.1.js"></script>
<script type="text/javascript" src="inc/jquery.mobile.splitview.js"></script>
<script type="text/javascript" src="inc/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="inc/jquery.alerts.js"></script>
<script type="text/javascript" src="inc/iscroll-wrapper.js"></script>
<script type="text/javascript" src="inc/iscroll-lite.js"></script>
<script type="text/javascript">
alert('js Loadfed');
</script>
<style>
alert();
alert('css loaded');
</style>
</head>
<body>
<!--============= Page2 ===============--->
<div data-role="page" id="siteContacts" data-theme="e" >
<div data-role="header">
<h1>Page 2 </h1>
<a href="page2.html" id="EditButton" data-role="button" data-icon="gear" class="ui-btn-right" data-theme="e" >Edit</a>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" class="ui-listview" data-dividertheme="a">
<li data-role="list-divider"> <!--list Header --->
<div class="ui-grid-c"> <!--Section Headers Grid--->
<div class="ui-block-a" ><big> aaaa</big> </div>
<div class="ui-block-b" ><big> bbbb</big> </div>
<div class="ui-block-c" ><big> ccc</big> </div>
<div class="ui-block-d" ><big> e-sss</big> </div>
</div>
</li>
</ul>
</div>
</body>
</html>
Maybe I'm reading your code wrong, but it looks like the links to the jquery mobile stylesheets are commented out. You definitely need to have them defined in the HTML to get the styles applied.
Are you loading them someplace else that it not apparent from the code you posted?
PhoneGap requires you to manually set/allow aspects of your app in your "config.xml" file in the root directory.
The solution you are looking for, I believe, is this line:
<access origin="http://code.jquery.com" subdomains="true" />
You are allowing access to the external resource of "http://code.jquery.com" and allowing all of its subdomains. This means that you have just unlocked jquery mobile, which is what you are going for, as seen by your script tags:
<script type="text/javascript" src="inc/jquery-1.7.1.js"></script>
<script type="text/javascript" src="inc/jquery.mobile.splitview.js"></script>
These "src" attributes are now seen as "subdomains" of http://code.jquery.com, which you have just successfully allowed!