jQuery: scrollspy() and scrollTop() not functioning - javascript

I have some scripts under <script> tag, but nothing seems to be functional. What am I doing wrong? Here is the link of CodePen: https://codepen.io/msrumon/pen/EJyYxP. Thanks in advance.

You should replace bootstrap and jquery cdn with following cdn there is something wrong with your cdn thats why it is giving error
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

So, I did some tweaking, and found that removing all the min and slim texts from URLs was what I needed. So this is my final contents inside <head> tag:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Chris Dortch</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.js"></script>
Thanks to all who advised me something. And kudos to #Arfeo for helping me as well.

Related

Why sometimes my javascript doesn't get applied on my php

I have a lot of scripts and styles in head tag and sometimes they don't load properly. Here's how my head looks like:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="w3.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#48,500,1,0" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">-->
<script src="index.js"></script>
<title>NCA</title>
</head>
However when I reload my page, everything works properly and my js gets applied on my php exactly the way I want...
Can you tell what's going on and why the first time I load my page, my js doesn't work properly?
Note that: I can't do $(document).ready(function () { ... }); as there are many functions in my index.js file and also I want to force the body load after head is loaded... Is there any way to do it?
It is a good practice to put the script tags after the body tag, to ensure that the body its the first thing to load, it doesn't work that way with the css because you want the css to load first
I had a similar problem tha I solved using defer after the script src, example:
<script src="demo_defer.js" defer></script>
https://www.w3schools.com/tags/att_script_defer.asp

How to make this Toast message work on my Wordpresss Site on a click event

I am struggling to use toast message on my website which may be visible on the click of a button. here is the code below.
<html>
<head>
<link rel="stylesheet" href="https//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Snackbar / Toast</h2>
<button onclick="updateit()">Show Snackbar</button>
<script src="https//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script src="https//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function updateit(){
toastr.success('button clicked');
}
</script>
</body>
</html>
Even adding event listener calling in function script did not work for me.
I am using the below library which suggested me to use external scripts and style as have been used in the code above.
https://codeseven.github.io/toastr/
I am a novice, please help me out with this.
Also, if you can help me out figuring out how can I directly get it done on WordPress, it would be highly appreciable.
Try This code... There are some small mistakes.. I fixed... Check this..
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Snackbar Toast</h2>
<button onclick="updateit()">Show Snackbar</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script>
function updateit(){
toastr.success('button clicked');
}
</script>
</body>
</html>

FullCalendar Not Displaying Calendar

I'm working on a simple cms app but I can't get the Full Calendar plugin to display the calendar. I've followed the steps that I found online and nothing has worked. I've been trying to solve this problem for a week and can't figure it out. I've checked the console for errors and it looks good.
So I wanted to reach out. My app is built in PHP, my code is included below. I've linked to everything and the jquery is working.
The code for the calendar I've included in the head section.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="css/admin-main.css">
<title>CMS</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
weekends: true
});
});
</script>
</head>
In the HTML on the calendar page I have this included.
<div id="calendar"></div>
Any help would be greatly appreciated! Thanks!
I know this question is old and you may have already found the solution, however, i will give my answer to help anyone else that may be running into the same issue.
I found that when the console is giving you the error that fullcalendar is not a function and your code seems to be correct, its for the following reason.
If you are using bootstrap, you need to remove the Jquery link provided in the bootstrap starter template. You have already loaded jquery in the header, by doing it again in the body, it is creating the error.. I hope it helps!
You have an extra ) on .fullCalendar(), should be:
$('#calendar').fullCalendar({
//options
});
Example below:
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
weekends: true
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<div id="calendar"></div>

Uncaught TypeError: $(...).stellar is not a function

I am trying to implement the stellar plugin and far as I can see, I have included all the necessary js. However, in the dev tools console I keep getting the 'Uncaught TypeError: $(...).stellar is not a function'.
This is what I have in the head tags:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UFT-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>QE | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/stuff.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="js/jquery.stellar.js"></script>
<script src="js/scrip.js"></script>
<script src="js/jquery.nicescroll.js"></script>
And this is is the scrip.js file that the error is referring to:
$(document).ready(function() {
$(window).stellar();
});
$(document).ready(
function() {
$("html").niceScroll({
cursorcolor:"rgba(30,30,30,.5)",
zindex:999,
scrollspeed:100,
mousescrollstep:50,
cursorborder:"0px solid #fff",
});
});
Please help me
I have found out that the problem was with js/vendor/jquery.js which was I forgotten that had placed that at the bottom of the index.html file. When I removed it, the stellar function worked. Not sure why that affects stellar.js though.
Add javascript links to the Layout Page.
Remove script links from the inner page

Trouble with loading external html elements

So I thought it'd be really nice to have all my page elements like navbar, carousel, footer etc externalized and then load them through jQuery into parent page. I'm using Brackets which has live preview that showed all elements and all worked properly there. The problems began when I tested it in real browsers.
I tested in Chrome, Opera and Firefox and only Firefox would show the content loaded through jQuery.
Here's what parent page looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="navLoader"></div>
<div id="carouselLoader"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
And this is jQuery that loads elements:
$(document).ready( function() {
$("#navLoader").load("components/navbar.html");
$("#carouselLoader").load("components/carousel.html");
});
Loading troubles aside, is this a good practice to keep page elements separate? It feels much tidier and easier to work with, but that doesn't mean that it is necessarily good from a technical standpoint.
Thanks in advance.

Categories

Resources