File DirectoryI'd like to understand why can't VS code follow the absolute path in this script tag. Here is the file directory and the code that I am using. I am using JavaScript's history API in order to create a single page application. Is there a better method than using the history API?
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grand Buffet</title>
<link rel="stylesheet" href="static/css/grandbuffet.css">
</head>
<body>
<header>
<nav>
<img class="grandbuffet" src="static/css/assets/GrandBuffet2.png" alt="GrandBuffet">
<ul class="tabs">
<li class="tab is-active">
<a href="/" data-link>Home</a>
</li>
<li class="tab">
<a href="/aboutus" data-link>About Us</a>
</li>
<li class="tab">
<a href="/menu" data-link>Menu</a>
</li>
<li class="tab">
<a href="/locations" data-link>Locations</a>
</li>
<li class="order-now">
<a href="/ordernow" data-link>Order Now</a>
</li>
</ul>
</nav>
</header>
<div class="main-section">
Hi
</div>
<div id="app"></div>
<footer>
<div class="footer-content">
<p>2022 Grand Buffet All rights reserved</p>
<div class="social-media">
<img src="static/css/assets/insta_blk.png" class="instagram" alt="Instagram">
<img src="static/css/assets/twit_blk.png" class="twitter" alt="Twitter">
<img src="static/css/assets/youtube_blk.png" class="youtube" alt="YouTube">
</div>
</div>
</footer>
<script type="module" src="/static/js/index.js"> </script>
</body>
</html>`
Try removing the first "/", VS code may be trying to find the file starting from the root directory of the project, not from where index.html is located. Or, use "./" (Notice the period at the start, is important) that way your specefying the actual directory where index.html is.
Related
I have an <input> with type Search and class as SearchBox. I want this input to toggle when I click an img of class Search. I've connected my html page to jQuery 1.11.1 available from ajax.googleapis.com and this is my .js file:
$(document).ready(function () {
$(".Search").click(function () {
$("input.SearchBox").toggle();
});
});
I've hidden the SearchBox using CSS, like this:
.SearchBox {
display: none;
}
But it does not work. Can anyone help? Thanks in advance.
the html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="Connet, connect, consultation online">
<meta name="description" content="Website of Connet.">
<meta name="author" content="Connet Developement Team">
<meta http-equiv="content-language" content="en-US">
<title> Connet. Connect. Through the internet. </title>
<link rel="favicon" href="favicon.ico" />
<link rel="stylesheet" href="/page_files/css/Main.style.css" type="text/css"/>
<script src="/page_files/js/Default.interactivity.js"></script>
<script src="/page_files/js/Default.proccessing.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--<script src="/page_files/js/jQuery3.0.0.js"></script>-->
<script src="/page_files/data/Default.data.js" ></script>
<script id="roughScript">
</script>
<noscript>
We're sorry, but looks like we can't
access our scripts. Refreshing might fix it.
Check yor internet connection. If it's our
fault we'll usually have something about it
in our blogs. Contact us if problem persists.
</noscript>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="Wrapper">
<nav>
<img src="bf" alt="tbf"/>
<ul class="NavClass">
<li>
<a class="NavLink" onclick="location.reload();">
<img class="NavImg" src="/page_files/media/home-icon.png" alt="Home" />
</a>
</li>
<li>
<a class="NavLink" onclick="open('Contact.html');">
<img class="NavImg" src="/page_files/media/contact-icon.png" alt="Contact" />
</a>
</li>
<li>
<a class="NavLink" onclick="open('Careers.html');">
<img class="NavImg" src="/page_files/media/careers-icon.png" alt="Careers" />
</a>
</li>
<li>
<a class="NavLink" onclick="open('Conroot.html');">
<img class="NavImg" src="/page_files/media/consult-icon.png" alt="Enter Consulation" />
</a>
</li>
<li>
<a class="NavLink" onclick="open('Loginpage.html');">
<img class="NavImg" src="/page_files/media/myspace-icon.png" alt="Login" />
</a>
</li>
<li>
<img class="Search" src="/page_files/media/search-icon.png" alt="Search" />
</li>
<li>
<input class="SearchBox" type="search" />
</li>
</ul>
</nav>
<header>
</header>
<div class="Sections">
<section class="TopSec">
</section>
<section class="MidSec">
</section>
<section class="LowSec">
</section>
<section class="SignIn">
</section>
</div>
<footer>
</footer>
</div>
</body>
</html>
I have an html page with a header, main and footer (I use materialize and angularJS). I always want the header and footer to remain the same, but when I press links in the sidenav I want the main element to be another html page. Let's say I press the info link in the sidenav, I want the header and footer to remain, but I move from the main part of the html to another page. This is what I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title>MyPage</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body ng-app="myPage" ng-controller="mainCtrl">
<header>
<ul id="sidenav" class="side-nav fixed light-blue lighten-1">
<li><a id="page" class="white-text text-accent-1" href="#">Home</a> </li>
<br/><br/>
<li><a id="page1" class="white-text text-accent-1" href="#"><b>Info</b></a></li>
<li><a id="page2" class="white-text text-accent-1" href="#"><b>Another page</b></a></li>
<li><a id="page3" class="white-text text-accent-1" href="#"><b>Even one more page</b></a></li>
</ul>
</header>
<main>
<div id="main">
<p> Some text for main page here </p>
</div>
</main>
<footer class="page-footer orange">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">About</h5>
<p class="grey-text text-lighten-4">
About my company.
</p>
</div>
</div>
</div>
</footer>
<!-- Scripts-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="controllers/mainCtrl.js"></script>
</body>
</html>
This might be really easy, but I haven't found out how to be able to switch back and forth, and also keep the header and footer. I tried to just link the new html page into , but then I have to copy over the header and footer, which is not ideal. I don't want to have possibly 10-15 html pages I have to edit if I want to change the sidenav for example.
You have to set up a router and put a ng-view directive on some of your html elements:
...
</header>
<div ng-view>
<main>
...
</main>
</div>
<footer class="page-footer orange">
...
simple routing example:
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'homeCtrl',
);
}]);
If you than use your sidebar link
<a id="page" class="white-text text-accent-1" href="#/home">Home</a>
The routeProvider will load your home.html and homeCtrl between the defined element with the ng-view directive
Hi saw that there was another post with the same title "https://stackoverflow.com/questions/27645823/referenceerror-handlebars-is-not-defined" as this but the problem does not look to be the same. I'm trying to build a single page app but I keep getting the "Uncaught ReferenceError: handlebars is not defined" error in the console. The network tab on the console looks to show that the handlebars.min.js is being loaded.
You are invoking handlebars before it is getting loaded. Move your script that compiles handlebars to body like below.
<!DOCTYPE html>
<html>
<head>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="bower_components/materialize/bin/materialize.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="style.css" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<script type="text/x-handlebars-template" id="main-template">
<h1>Loaded main template</h1>
</script>
<button class="clear-screen">Click Me</button>
<nav>
<div class="nav-wrapper" id="nav-color">
Logo
<i class="mdi-navigation-menu"></i>
<ul class="side-nav" id="mobile-demo">
<li><i class="mdi-action-home left"></i>Home</li>
<li><i class="mdi-content-add left"></i>Add Card</li>
<li><i class="mdi-navigation-close left"></i>Remove Card</li>
<li><i class="mdi-action-stars left"></i>Get Premium</li>
<li><i class="mdi-action-settings left"></i>Settings</li>
</ul>
</div>
</nav>
<ul class="collapsible popout" data-collapsible="accordion">
<li>
<div class="collapsible-header" id="flybuys"><span id="flybuys-text">FlyBuys</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
<li>
<div class="collapsible-header" id="airpoints"><span id="airpoints-text">Airpoints</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
<li>
<div class="collapsible-header" id="onecard"><span id="airpoints-text">OneCard</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
<li>
<div class="collapsible-header" id="summitclub"><span id="summit-text">Kathmandu Summit Club</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
<li>
<div class="collapsible-header" id="clubcard"><span id="new-world-text">New World ClubCard</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
</ul>
<!-- Modal Trigger -->
<a id="btn-color" class="waves-effect waves-light btn modal-trigger" href="#modal1">Add More</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Get Premium</h4>
<p>To have more than 5 card you need Premium, this gives you the ability to have unlimited card! Get it now for only $1.</p>
</div>
<div class="modal-footer">
Not now
Get Premium
</div>
</div>
<div class="content">
init content
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js">
</script>
<script type="text/javascript" src="bower_components/handlebars/handlebars.min.js"></script>
<script type="text/javascript" src="bower_components/materialize/bin/materialize.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
var template = handlebars.compile( $('#main-template').html() );
$(document).on('click','.clear-screen', function(){
$('.content').html( template() );
});
</script>
</body>
</html>
I have a code where I am including jquery files and bootstrap files in the header.php. I am running into issues where if I include the jquery file before bootstrap.js file, it messes up the other tabs on my webpage and basically even if i click on the other tabs it does not navigate me.
I think there is a conflict between jquery and bootstrap. I am pasting my header.php file below for more reference.
header.php
<?php require_once "essentials.php";
//error_reporting(~0);
//ini_set('display_errors', 1);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--<style>{height:150px; width:1300px;}</style>-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="Public">
<title><?php echo $page_title?></title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="script_dbafactory.js?<?php echo rand(0,511);?>"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<!--<link href="css/style_header.css" rel="stylesheet">-->
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-4 column">
<img alt="logo" src="./images/source.png">
</div>
<div class="col-md-8 column dbf">
<h2>
DBA Factory
</h2>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="tabbable" id="tabs-775712">
<ul class="nav nav-tabs">
<li>
Home
</li>
<li>
Submit a project
</li>
<li>
All Projects
</li>
<li>
Innovative Ideas
</li>
<li>
Matchmaker
</li>
<li>
Meet the Team
</li>
<div class="dropdown">
<?php include "userlogin.php"; ?>
</div>
</ul>
</div>
</div>
</div>
</div>
</body>
<!--<script type="text/javascript">
//Script to implement tabs
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
</script>-->
<script>
$.noConflict();
$(document).ready(function (){
$('.dropdown-toggle').dropdown();
$('#userlogin').dropdown('toggle');
});
</script>
Can someone please let me know how do i solve this issue? and how should i load all the js and css files to avoid any issues with the webpage.
Thanks
data-toggle="tab" for bootstrap means there has to have a [tab panel] for it, however, you only use it as nav, and it caused the problem.
Please read: http://getbootstrap.com/javascript/#tabs
Also, use js closure can more easier to avoid js conflict issue:
(function($){
....
})(jQuery);
Please check the code below, you can use WinMerge to compare the code with your own:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--<style>{height:150px; width:1300px;}</style>-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="Public">
<title><?php echo $page_title ?></title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<!--<link href="css/style_header.css" rel="stylesheet">-->
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-4 column">
</div>
<div class="col-md-8 column dbf">
<h2>
DBA Factory
</h2>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="tabbable" id="tabs-775712">
<ul class="nav nav-tabs">
<li>
Home
</li>
<li>
Submit a project
</li>
<li>
All Projects
</li>
<li>
Innovative Ideas
</li>
<li>
Matchmaker
</li>
<li>
Meet the Team
</li>
<li class="dropdown">
<a id="userlogin" role="button" data-toggle="dropdown" href="#">rdesai<span class="caret"</span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="userlogin">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Settings</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script>
(function($){
$(document).ready(function (){
$('.dropdown-toggle').dropdown();
$('#userlogin').dropdown('toggle');
});
})(jQuery);
</script>
</body>
</html>
Usually when i run into jquery and bootstrap conflicts, i just add this as the first line of my php file:
<script>jQuery.noConflict();</script>
This is to avoid conflicts with other libraries.
You can read more here: https://api.jquery.com/jQuery.noConflict/
Edit:
Or use
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
instead of 1.10.3
Can't seem to get my lightbox to work. Any ideas?
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<title>WildFire</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.pack.js"></script>
<script type="text/javascript">
$(function() {
// Use this example, or...
$('a[#rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
});
</script>
</head>
<body>
<div id="wrapper">
<div id="body">
<img src="images/tempbar.png">
<div id="text">
<img class="logo" src="images/logo.png">
<ul class="info">
<li>Hours: </li>
<p>
<li> Lunch 11am - 3pm </li>
<li> Dinner 5pm - 10pm </li>
<p>
<li>Phone: </li>
<p>
<li>(607) 277-9143</li>
<p>
<li>Address: </li>
<p>
<li> 106 S Cayuga St </li>
<li>Ithaca, NY 14850 </li>
</ul>
<p class="linkouts">
<a rel="lightbox" "href="images/lunch.png">
<img src="images/lunchlink.png">
</a>
<p>
<img src="images/dinnerlink.png">
</div>
</div>
<div id="footer">
For Lounge Events Find Us On
<a href="http://www.facebook.com/pages/Ithaca-NY/WildFire-Lounge/144229581885?ref=ts" target="_blank">
<img class ="fb" src="images/loungefb.png">
</a>
Come Visit
<a href="http://www.madelines-restaurant.com/" target="_blank">
<img class="mad" src="images/madelineslogo.png">
</a>
And Our Friend
<a href="http://www.stateofithaca.com/" target="_blank">
<img class="state" src="images/stlogo.png"
</a>
</div>
</div>
</body>
</html>
Your selector is incorrect, the "#" is no longer used (deprecated, LOL I couldn't think of the word without my morning caffiene). Try this instead:
$(function() {
$('a[rel="lightbox"]').lightBox();
});
Without testing anything else or looking closely at the problem, have you tried removing the incorrectly-placed quote mark from before the href attribute?
<a rel="lightbox" href="images/lunch.png">
<img src="images/lunchlink.png">
</a>