So I have been building a new website recently and experimenting a lot with jQuery.
Unfortunately I seem to be having a massive problem getting my jquery file to actually work in the website.
Here is the html code. As you can see, I have jquery added by CDN and the javascript is in a totally separate file. I added an alert into the primary function just to check if it's even reading what I have put and I am stuck.
<html>
<head>
<!--Browser Data-->
<meta charset="utf-8">
<!--Meta Data -->
<title>website</title>
<meta name="description" content="The Official Page of website">
<meta name="Keywords" content="some website stuff">
<meta name="author" content="me">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS File Locations -->
<link rel="stylesheet" href="css/main.css">
<!-- Javascript File Locations -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<!-- Fonts used -->
<link href="https://fonts.googleapis.com/css?family=Germania+One" rel="stylesheet">
</head>
<body>
<!-- A logo will go here but here is some text for now -->
<H1 ID="Logo">website</H1>
<!-- The menu bar -->
<ul class="menu" ID="Menu_Bar">
<li Class="Menu_Item" ID="Home">
<a Class="Menu_Link" href="index.html">Home</a>
</li>
<li Class="Menu_Item" ID="About_Us">
<a Class="Menu_Link" href="about.html">About Us</a>
</li>
<li Class="Menu_Item" ID="Events">
<a Class="Menu_Link" href="events.html">Events</a>
</li>
<li Class="Menu_Item" ID="Contact">
<a Class="Menu_Link" href="contact.html">Contact Us</a>
</li>
</ul>
<!-- An image of the stuff-->
<img ID="theGang" src="assets/thegang.png"/>
</body>
</html>
Here is the JQuery.
$(document).ready(function(){
$("button").click(function(){
$("#theGang").fadeIn(3000);
alert("it worked");
});
});
I'm just not sure why it's not working.
By the way the javascript file is in a sub folder called js and called main.js and the html is called index.html
Based on your comments it looks like all you needed to do was remove the event handler for the nonexistent button element. This enables the fadeIn and alert.
$(document).ready(function(){
$("#theGang").fadeIn(3000);
//alert("it worked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- A logo will go here but here is some text for now -->
<H1 ID="Logo">website</H1>
<!-- The menu bar -->
<ul class="menu" ID="Menu_Bar">
<li Class="Menu_Item" ID="Home">
<a Class="Menu_Link" href="index.html">Home</a>
</li>
<li Class="Menu_Item" ID="About_Us">
<a Class="Menu_Link" href="about.html">About Us</a>
</li>
<li Class="Menu_Item" ID="Events">
<a Class="Menu_Link" href="events.html">Events</a>
</li>
<li Class="Menu_Item" ID="Contact">
<a Class="Menu_Link" href="contact.html">Contact Us</a>
</li>
</ul>
<!-- An image of the stuff-->
<img ID="theGang" src="https://image.freepik.com/free-photo/cute-cat-picture_1122-449.jpg" style="display: none;"/>
Related
I'm trying to add a dropdown menu in my nav bar using materialise, but it's not working. I'm adding the code snippet. In addition to this, I have imported materialise CSS and icons in the head, as well as the JS and JQuery in the body.
Can someone help me with where I'm going wrong? This is the documentation https://materializecss.com/navbar.html#!
<ul id="dropdown1" class="dropdown-content">
<li>Bollywood Music</li>
<li>OTT TV Series</li>
<li>Academic Literature</li>
<li>YA Fiction</li>
</ul>
<nav class="nav-wraper #362b32">
<div class="container">
<ul class= "right hide-on-med-and-down">
<li>Home</li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Articles<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!--JQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".dropdown-trigger").dropdown();
})
</script>
Check that the class names are correct. The class nav-wraper in the <nav> should be nav-wrapper, not nav-wraper.
As for the dropdown, the code is initializing the dropdown for the class dropdown-trigger, but the HTML uses dropdown-button. Change class="dropdown-button" to class="dropdown-trigger".
The documentation also states that the correct attribute for specifying the ID of the dropdown target is data-target, but the HTML uses data-activates, so change that.
Finally, JQuery should be loaded before Materialize, so that Materialize can register the .dropdown() function with JQuery.
Try this:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
</head>
<body>
<ul id="dropdown1" class="dropdown-content">
<li>Bollywood Music</li>
<li>OTT TV Series</li>
<li>Academic Literature</li>
<li>YA Fiction</li>
</ul>
<nav class="nav-wrapper">
<div class="container">
<ul class="right">
<li>Home</li>
<li>
<a class="dropdown-trigger" href="#" data-target="dropdown1">
Articles<i class="material-icons right">arrow_drop_down</i>
</a>
</li>
</ul>
</div>
</nav>
<!--JQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function() {
$(".dropdown-trigger").dropdown();
});
</script>
</body>
</html>
I am currently working on a little project, that I cannot get to run properly.
This is my page.html, which I use as a template.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title data-template="config:app-title">App Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta data-template="config:app-meta"/>
<link rel="shortcut icon" href="$shared/resources/images/exist_icon_16x16.ico"/>
<link rel="stylesheet" type="text/css" href="$app-root/resources/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="$app-root/resources/css/style.css"/>
<script type="text/javascript" src="$app-root/resources/scripts/jquery/jquery-3.4.1.js"/>
<script type="text/javascript" src="$app-root/resources/scripts/bootstrap.min.js"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css"/>
<script type="text/javascript" href="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
</head>
<body id="body">
<div class="container">
<div class="jumbotron">
<h1>Title</h1>
<hr/>
<p>A Digital Edition</p>
</div>
<ul class="nav nav-tabs py-0 my-0" style="text-align:center;">
<li class="nav-item">
<a class="nav-link" href="./index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./around.html">Around the World</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./table.html">Content</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./methods.html">Methods?</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./aboutme.html">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./#">What else?</a>
</li>
</ul>
</div>
<div id="content" class="container"/>
<hr class="hr-style"/>
<footer style="text-align:center;">
Contact
</footer>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('.slider').slick({
setting-name: setting-value
});
});
</script>
</html>
My typical page looks a little like the following:
<div xmlns="http://www.w3.org/1999/xhtml" data-template="templates:surround" data-template-with="templates/page.html" data-template-at="content">
<head>
<title>How it is supposed to look</title>
</head>
<body>
<div class="slider">
<div data-template="app:XMLtoHTML-forAll"/>
</div>
</body>
</div>
And I cannot get any javascript to run (as an example there is slick in it, which I copied from here). All my XML which is transformed to HTML, using xslt, is correctly transformed and displayed. However, I do not get a slider but only the <div> that are created using the xslt.
This happens, no matter where I include the javascript for slick.
I've tried it in the <head> (of page.html, as well as in the specific page), in the <body> at the end, and even after </body>.
When I use exemplary <div>test-content</div> and several similar files, the same happens to them, as there obviously is no JS running, no matter where I put the script!
Any hints for that?
Here's the promised edit:
Source-Map-Fehler: Error: request failed with status 404
Ressourcen-Adresse: http://localhost:8080/exist/apps/BookOfOrders/pages/$app-root/resources/js/bootstrap.min.js
Source-Map-Adresse: bootstrap.min.js.map
Here's the second edit, mentioned in comments:
my file structure:
the errors:
and my
I have index.php, page1.php, page2.php, page3.php and I wanted to load their content in the index.php page within the div with #output but I don't want them to reload/refresh every time the navbar is clicked. Also, I want the active page has the active class in the active <li>.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php">Main</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page1.php">Page 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page2.php">Page 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page3.php">Page 3</a>
</li>
</ul>
</nav>
<br>
<div class="container-fluid" id="output">
THE CONTENT FROM ANOTHER PAGE THAT'LL LOAD HERE
</div>
</div>
</body>
</html>
Thank you
Consider this example:
HTML:
<ul class="nav nav-tabs tabs-up" id="friends">
<li> Contacts </li>
<li> Friends list</li>
<li>Awaiting request</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="contacts">
</div>
<div class="tab-pane" id="friends_list">
</div>
<div class="tab-pane urlbox span8" id="awaiting_request">
</div>
</div>
Javascript:
$('[data-toggle="tabajax"]').click(function(e) {
var $this = $(this),
loadurl = $this.attr('href'),
targ = $this.attr('data-target');
$.get(loadurl, function(data) {
$(targ).html(data);
});
$this.tab('show');
return false;
});
Live demo: http://jsfiddle.net/BoWw/77dyfbwd/
You can adjust this to what you posted.
I would like to built a basic website.
Βelow I have the nav.html document where I have designed a basic dropdown menu. When I open the nav.html with the browser the toggle button works fine, when I click on it,dropdown menu collapses and
when I click on it again drop-down disappears.
The problem appears when I include nav.html in a home.php file.
When I click on the toggle button, dropdown-menu collapses, but when I click on it again dropdown-menu remains open and doesn't disappear.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox#3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox#3.5.7/dist/jquery.fancybox.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<meta charset="utf-8">
</style>
</head>
<body>
<nav class="navbar navbar-light bg-lignt">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#collapsingNavbar2">
<span class="navbar-toggler-icon my-toggler"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
home.php
<html>
<title>Home</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox#3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox#3.5.7/dist/jquery.fancybox.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<?php include('./nav.html'); ?>
</body>
</html>
You are including HTML in HTML and this is not supported. As you are including nav.html into home.php, you want to remove tags body, html and completly head.
<nav class="navbar navbar-light bg-lignt">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#collapsingNavbar2">
<span class="navbar-toggler-icon my-toggler"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
PHP and HTML are completly different languages. With PHP you are generating HTML content. You are not including "the result" of nav.html, but the code.
My sideNav is not working on a page using materializeCSS
here is my html:
```html
<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"/>
<meta charset="UTF-8">
<title>Dutch Fork Running | Contact</title>
<!-- CSS -->
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="../includes/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="../includes/css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="../includes/css/fullcalendar.css" rel="stylesheet" />
<link href="../includes/css/fullcalendar.print.css" rel="stylesheet" media="print" />
<link href="../includes/css/font-awesome.css" rel="stylesheet" />
<!-- Scripts -->
<script src="../includes/js/jquery.min.js"></script>
<script src="../includes/js/materialize.js" async defer></script>
<script src="../includes/js/moment.min.js"></script>
<script src="../includes/js/jquery.min.js"></script>
<script src="../includes/js/fullcalendar.js"></script>
<script src="../includes/js/ical.js"></script>
<script src="../includes/js/ical_events.js"></script>
<script src="../includes/js/ical_fullcalendar.js"></script>
<script src="../includes/js/gcal.js"></script>
<script src="../includes/js/init.js"></script>
<script type="text/javascript">var rootdir = "../";</script>
</head>
<body>
<!-- <div class="navbar-fixed"> -->
<header>
<nav class="green">
<div class="nav-wrapper">
<a href="../#" class="center brand-logo">
<img height="54px" src="../images/cc-arrow-green.png" alt="logo">
</a>
<i class="material-icons">menu</i>
<ul class="side-nav" id="mobile-menu">
<li class="">
<a href="../">
Home
</a>
</li>
<li class="">
<a href="../Calendar">
Calendar
</a>
</li>
<li class="">
<a href="../Records">
Records
</a>
</li>
<li class="">
<a href="../Archives">
Archives
</a>
</li>
<li class="">
<a href="../Handbook">
Handbook
</a>
</li>
<li class="">
<a href="../Join">
Join
</a>
</li>
<li class="">
<a href="../Misc">
Misc Info
</a>
</li>
<li class="">
<a href="../Contact">
Contact
</a>
</li>
<li class="">
<a href="../BoosterClub">
Booster Club
</a>
</li>
<li class="">
<a href="../SFTR">
Silver Fox Trail Run
</a>
</li>
</ul>
</div>
</nav>
</header>
```
It says sideNav function not defined on that page. Works on others, no difference in pasted part between pages.
Here is the traceback:
jQuery.Deferred exception: undefined is not a function (evaluating '$('.button-collapse').sideNav()') (2)
(anonymous function) — init.js:3
j — jquery.min.js:2:58607
(anonymous function) — jquery.min.js:2:88441
undefined
I call it using $('.button-collapse').sideNav();
Resolved: Called at end of materialize javascript file
I resolved this issue by adding $('.button-collapse').sideNav(); to the bottom of the materialize.js file.