I try to load different pages using an ajax call. But the pages are not appearing on the main page.
This is the file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>News Headlines</title>
<script src="Scripts/jquery.min.js"></script>
<link href="Content/site.css" rel="stylesheet">
<style>
#newslinks li {
display: inline-block;
margin-right: 20px;
}
#newslinks li a {
padding: 5px 10px;
background-color: white;
color: black !important;
text-decoration: none;
}
#newslinks li a:hover {
background-color: rgb(110,138,195);
color: white !important;
}
#headlines #newsItem {
margin-top: 10px;
padding: 20px;
border: 1px solid white;
}
</style>
<script>
$(document).ready(function() {
$('#newslinks a').click(function () {
var url = $(this).attr('href');
$('#healines').load(url + ' #newsItem');
//evt.pr.preventDefault();
return false;
});
}); // end ready
</script>
</head>
<body>
<div class="wrapper">
<header>
JAVASCRIPT <span class="amp">&</span> jQUERY: THE MISSING MANUAL
</header>
<div class="content">
<div class="main">
<h1>News Headlines</h1>
<ul id="newslinks">
<li>Today’s News</li>
<li>Yesterday’s News</li>
<li>Last Week’s News</li>
</ul>
<div id="headlines"></div>
</div>
</div>
<footer>
<p>JavaScript & jQuery: The Missing Manual, 3rd Edition, by David McFarland. Published by O'Reilly Media, Inc.</p>
</footer>
</div>
</body>
</html>
So you see three links. But if you click on one of the links nothing happens. I am using IIS. And yes it is enabled.
Thank you
Misspelled headlines in $('#healines').load(url + ' #newsItem');.
Related
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel = "stylesheet" href = "style.css"/>
<meta charset="UTF-8">
<title>Book Fair</title>
</head>
<body>
<div class= "page">
<header class="header">
<div class="name">
<button class="sidebarbtn" onclick="Menu()">
→
</button>
Book Fair
</div>
<div class="left-side">
Cart
SignIn
</div>
</header>
<!-- Side bar -->
<aside class = "sidebarcon">
<h3>Book Categories</h3>
<ul>
<li>Action</li>
<li>Romance</li>
</ul>
</aside>
</main>
</div>
<!-- JS -->
<script>
function Menu(){
document.querySelector(".sidebarbtn").classList.add(".sidebarcon.open");
}
</script>
</body>
</html>
CSS code
.sidebarbtn{
font-size: 30px;
border: none;
color: brown;
padding: 10px;
background: none;
}
.sidebarcon{
position: fixed;
transform: translateX(-10rem);
width: 10rem;
}
.sidebarcon.open{
transform: translateX(0);
}
I have create a navbar, from that I wanted to create a sidebar. I suspect there is a problem with my JS script but I am unable to find the fault. I am trying to use the classList.add() method here. I have searched everywhere and tried all possibility.
Unlike querying a selector, when you add a style class to an element using classList.add() you do not include the leading .. Additionally, in this case, you want to add the opening style class to the sidebar, not the button.
Try something like this:
.sidebarbtn{
font-size: 30px;
border: none;
color: brown;
padding: 10px;
background-color: blue;
}
.sidebarcon{
position: fixed;
transform: translateX(-10rem);
width: 10rem;
background-color: red;
}
.openSidebar{
transform: translateX(0);
}
ML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel = "stylesheet" href = "style.css"/>
<meta charset="UTF-8">
<title>Book Fair</title>
</head>
<body>
<div class= "page">
<header class="header">
<div class="name">
<button class="sidebarbtn" onclick="Menu()">
→
</button>
Book Fair
</div>
<div class="left-side">
Cart
SignIn
</div>
</header>
<!-- Side bar -->
<aside class = "sidebarcon">
<h3>Book Categories</h3>
<ul>
<li>Action</li>
<li>Romance</li>
</ul>
</aside>
</div>
<!-- JS -->
<script>
function Menu(){
document.querySelector(".sidebarcon").classList.add("openSidebar");
}
</script>
</body>
</html>
Here is a jsbin link to my code. As you can see, the drop down closes as soon as I hover away from the trigger thus making the navigation useless.
Any simple solutions would be very welcome. Thanks in advance.
html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<header>
<p>Menu</p>
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</header>
</body>
</html>
SASS
*
margin: 0
header
padding: 20px
background-color: tomato
p
display: inline
padding: 5px 10px
background-color: blue
color: white
&:hover
cursor: pointer
ul
padding: 10px
background-color: blue
list-style: none
color: white
width: 60px
display: none
JS
$(function(){
$("p").hover(function(){
$("ul").slideToggle();
});
});
$(function(){
$("p").hover(function(){
$("ul").show();
});
$("ul").hover(function(){}, function(){
$(this).hide();
});
});
You don't need JS for this. Use :hover in your css:
header:hover ul {
display:block;
}
http://jsfiddle.net/wfw1f9to/3/
I am creating a website on github pages using bootstrap, but the drop-down does not seem to be working on the nav bar (sometimes works, sometimes not). I am using $("#nav").load("url");
to load the nav bar so I can change it and have the changes apply to many pages. The drop-downs work on the page that I am loading if I go there directly. The web page is http://scratchos.github.io/index2.html
/resorces/navbar.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--bootstrap-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--main.css, i do not know if it is used on the page, i think not-->
<link rel="stylesheet" href="http://scratchos.github.io/stylesheets/main2.css">
<!--meta-->
<meta charset="utf-8">
<!--get url parameters for adding classes to set items to make it applicable to all pages-->
<script>
function getParameter(theParameter) {
var params = window.location.search.substr(1).split('&');
for (var i = 0; i < params.length; i++) {
var p=params[i].split('=');
if (p[0] == theParameter) {
return decodeURIComponent(p[1]);
}
}
return false;
}
</script>
<!--bootstrap dropdown code-->
<script>
$(document).ready = function () {
$('.dropdown-toggle').dropdown();
};
</script>
</head>
<body>
<!--bootstrap nav bar-->
<div class="nav nav-tabs">
<li id="home">Home</li>
<li id="projects">My Projects</li>
<li id="hfb">
<!--JQuery-->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Hungry-For-Blocks<span class="caret"></span></button>
<ul class="dropdown-menu">
<li id="hfb-home">Home</li>
<li id="hfb-about">About</li>
<li id="hfb-doc">Documentation</li>
<li id="hfb-ins">Instalation</li>
</ul>
</div>
</li>
<li id="tut">Tutorials</li>
</div>
<!--script to apply the classes based on url params once page has loaded; it is done in this way because github does not support php:(-->
<script>
window.onload = function () {
$("#" + getParameter("active")).addClass("active");
if (getParameter("dis") !== false) {
$("#" + getParameter("dis")).addClass("disabled");
};
};
</script>
</body>
</html>
/stylesheets/main2.css
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.jumbotron {
height: 500px;
background-repeat: no-repeat;
background-size: cover;
color: #ff6600;
}
.jumbotron .container {
position: relative;
top: 100px;
}
.jumbotron h1 {
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.jumbotronm p {
font-size: 20px;
}
.learn-more {
background-color: #f7f7f7;
}
.learn-more h3 {
font-family: 'Shift', sans-serif;
font-size: 18px;
font-weight: bold;
}
.learn-more a {
color: #00b0ff;
}
.forum {
padding: 20px;
}
/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!--JQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--rendering script in css and jquery for the site, not relevent i think?-->
<link rel="stylesheet" href="//scratchos.github.io/ScratchBlocks/scratchblocks2.css">
<script src="//scratchos.github.io/ScratchBlocks/scratchblocks2.js"></script>
<script>
$(document).ready(function() {
scratchblocks2.parse();
});
</script>
<!--bootstrap-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--main.css custom page css i don't think it is needed in this, because everything it formats has been omitted from this code?-->
<link rel="stylesheet" href="http://scratchos.github.io/stylesheets/main2.css">
<!--set jubmotron background, probably an inefficient way of doing it?-->
<style>.jumbotron{background-image:url('https://scratchos.github.io/images/jumbotron.png');}</style>
<!--bootstrap metas-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--title-->
<title>-ScratchOs|Home</title>
<!--loading the nav bar-->
<script>
$(function(){
$("#nav").load("http://scratchos.github.io/resorces/navbar.html");
});
</script>
<!--bootstrap dropdown code-->
<script>
$('#hfb a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
</script>
</head>
<body>
<!--nav bar-->
<div id="nav"></div>
<!--the rest of the page is not included-->
</body>
</html>
If you can fix the dropdowns it would be excellent. Thanks :)
I would consider using a script.js file instead of embedding it. If you go to http://scratchos.github.io/resorces/navbar.html it works just fine, the problem is that you're defaulting to your index.html (as you should), but it's not getting the code that you put straight into your navbar.html. Making a script file that both pages reference should fix your issue.
Just remove the plugins that are common in both the pages and that will fix it.
I am making a Tizen web app and want to use jQuery mobile's "taphold" listener.
I downloaded the latest .js from the jQuery mobile site, but when I try to include it, it doesn't work.
Am I meant to use it with jQuery or by itself? both product errors.
Without including jQuery I get the error:
js/jquery.mobile-1.4.2.min.js (26) :TypeError: 'undefined' is not an object (evaluating '$.mobile = {}')"
But if I do include jQuery when going to that page the screen is completely black and I can not do anything.
You should post your code. JQuery Mobile works with Tizen, you can even add it to project from IDE.
Below is index.html for TizenWeb version of JQuery tutorial on taphold event. All is working. You can use it as template for your solution.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="A single-page template generated by Tizen Web IDE"/>
<title>Tizen Web IDE - Tizen - jQuery Mobile - tapHold listener</title>
<link rel="stylesheet" href="./css/jquery.mobile-1.2.0.css"/>
<script type="text/javascript" src="./js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.2.0.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
<link rel="stylesheet" href="./css/style.css" />
<style>
<!--
based on http://api.jquerymobile.com/taphold/
-->
html, body { padding: 0; margin: 0; }
html, .ui-mobile, .ui-mobile body {
height: 85px;
}
.ui-mobile, .ui-mobile .ui-page {
min-height: 85px;
}
#nav {
font-size: 200%;
width:17.1875em;
margin:17px auto 0 auto;
}
#nav a {
color: #777;
border: 2px solid #777;
background-color: #ccc;
padding: 0.2em 0.6em;
text-decoration: none;
float: left;
margin-right: 0.3em;
}
#nav a:hover {
color: #999;
border-color: #999;
background: #eee;
}
#nav a.selected,
#nav a.selected:hover {
color: #0a0;
border-color: #0a0;
background: #afa;
}
div.box {
width: 3em;
height: 3em;
background-color: #108040;
}
div.box.taphold {
background-color: #7ACEF4;
}
</style>
</head>
<body>
<!--
based on http://api.jquerymobile.com/taphold/
-->
<div data-role="page" >
<div data-role="header" data-position="fixed" >
<h1>Single-Page Application </h1>
</div><!-- /header -->
<div data-role="content" >
<p>This is a single page boilerplate template that you can copy to build your first jQuery Mobile page.</p>
<h3>Long press the square for 750 milliseconds to see the above code applied:</h3>
<div class="box"></div>
<script>
$(function(){
$( "div.box" ).bind( "taphold", tapholdHandler );
function tapholdHandler( event ) {
$( event.target ).addClass( "taphold" );
}
});
</script>
</div><!-- /page -->
</body>
</html>
I'm a newbie to web development. And so, I've just created a sample webpage. It contains an html page, a css file and a JavaScript file. But whenever this JavaScript is linked to the html page, the css formattings are removed. This happens only after linking the JS file. If the same link is removed, css works fine. could u tell me the problem. i'm using windows xp sp3 and google chrome latest. is it the problem with the browser.
Here are my codes
HTML
<!doctype html>
<html>
<head>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" type="text/css" href="Style.css" media="all">
</head>
<body
<div>
<ul id="nav">
<li id="click" Contact</li>
<li Blog</li>
<li Work</li>
<li About</li>
<li Home</li>
</ul>
</div>
</body>
</html>
JS
var list = document.getElementById("nav")
list.addEventListener("click", function(event) {
switch(event.target.id) {
case "click":
document.title="I changed the document title";
break;
}, false);
CSS
body {
margin: 0;
}
#nav {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav li {
width: 20%;
float: left;
text-align: center;
display: inline;
}
#nav li a {
line-height: 40px;
display: block;
padding: 0.5em 5px;
text-decoration: none;
font-weight: bold;
color: #F2F2F2;
-webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
}
#nav a:link, #nav a:visited {
background-color: #071726;
}
#nav a:hover, #nav a:active, #nav a:focus {
background-color: #326773;
}
First of all you are not closing your link tag, it should be:
<link rel="stylesheet" type="text/css" href="Style.css" media="all" />
Now regarding your issue. I think you have a problem with the your JavaScript source. Ensure in development tools that your <script type="text/javascript" src="JavaScript.js"></script> actually returns a script - ensure that srs points to the correct location of the script
Made this an answer, since after testing in JSFiddle and comparing it to a fixed version, I suspect it's the source of your problems:
I'd recommend fixing your <body> and <li> opening tags - currently they are being shown as <body and <li respectively, missing their ending braces (>).
This is what your HTML should look like after you fix the problem:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" type="text/css" href="Style.css" media="all">
</head>
<body>
<div>
<ul id="nav">
<li id="click">Contact</li>
<li>Blog</li>
<li>Work</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
</body>
</html>