Back-to-top is not working anymore in Bootstrap 4 - javascript

I am trying to implement a back-to-top button with js in bootstrap 4 using the fontawesome icon-set. A week ago it worked perfectly, but ever since I changed a few other things on the site it stopped working. It is probably a simple error, but I am new to js and don't know how to fix this...
This is my code:
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-to-top').click(function() {
$('body,html').animate({
scrollTop: 0
}, 400);
return false;
});
});
.back-to-top {
position: fixed;
bottom: 25px;
right: 25px;
display: none;
}
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:100rem;">test</div>
<a id="back-to-top" href="#" class="mr-m2b btn btn-primary btn-lg back-to-top" role="button">TOP<i class="fas fa-chevron-up"></i></a>
it used to work perfectly, yet I broke it somehow and I am not sure how...
The javascript seems to be the problem as it does pretty much nothing, the question is why? And why did it use to work before, but doesn't now, when I did not touch the function at all?!
edit:
I recently deleted a custom scrollbar
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
body::-webkit-scrollbar-thumb {
background-color: #A1394F;
outline: 1px solid slategrey;
}
but copying that back in doesn't help either. The exact same, copy-pasted js code works in the code snippet here, but not on my html page... What am I missing?

its work in example, if your code is not working in your project try this.
// body only instead "body, html" or create id and put in body <body id="top">
then edit js into document.querySelector('#top').scrollIntoView({ behavior: 'smooth' });
or try this super smooth http://iamdustan.com/smoothscroll/
JS
// Go to Top
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 800) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
// scroll to top
document.querySelector('.back-to-top').addEventListener('click', function(e) {
e.preventDefault();
document.querySelector('body').scrollIntoView({ behavior: 'smooth' });
});
});

I managed to fix it by copying the js script and pasting it again at the end of the body section. The problem was caused by a wrong import order and not a code or version error. Jquery 3.3, 3.4 and 3.5 all work fine if the import order is correct.
It feels dumb to say it out loud, but a script that requires jquery can obviously not work if it is added before jquery is imported ...
So my scripts now look like this:
<script src="{% static 'jquery-3.5.1.min.js' %}"></script>
<script src="{% static 'popper1.16.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-to-top').click(function() {
$('body,html').animate({
scrollTop: 0
}, 400);
return false;
});
});
</script>

Related

jquery .animate works in jsfidle, will not work in website [duplicate]

This question already has answers here:
Code working in jsFiddle but not in browser
(2 answers)
Closed 9 years ago.
I am trying to implement this simple jquery code into my website, I can not make it work!
Here is whole html code (everything is the same as in the WORKING jsfiddle version, however it will not work):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="js/jquery-1.9.0.min.js"></script>
<style>
div#test {
background: #b977d1;
margin: 3px;
width: 150px;
height: 20px;
float: right;
display: none;
overflow:hidden;
}
button#aa {
float: right;
}
</style>
</head>
<body>
<script type="text/javascript">
$("#aa").click(function () {
$("div#test").animate({
width: 'toggle'
});;
});
</script>
<div id="test">TEST das das dsa</div>
<button id="aa">Toggle</button>
</body>
</html>
I am getting very frustrated with this :P
If anyone can help me with this, I will be more than thankful! :)
Include your jquery inside $(document).ready() jsfiddle do this automatically
try this:
$(document).ready(funciton(){
$("#aa").click(function () {
$("div#test").animate({
width: 'toggle'
});;
});
});
You need to set your jQuery code in callback of the ready function.
$(function() {
// when the document is ready
// here, your code
});
You need to wrap your code inside DOM ready handler to make sure that Document Object Model (DOM) is ready for JavaScript code to execute.
This step has been done automatically by jsFiddle when you include jQuery library.
$(function(){
$("#aa").click(function () {
$("div#test").animate({
width: 'toggle'
});;
});
});
If you want to run your code once the entire page (images or iframes), not just the DOM, is ready, put your code inside $(window).load(function() { ... })
$(window).load(function() {
$("#aa").click(function () {
$("div#test").animate({
width: 'toggle'
});;
});
})

Issue with jQuery : Click event & Switching between "active" elements

OK, here's my issue and I bet it'll be super-easy for you (I guess it wasn't... lol).
So, let's say I'm having several divs. Once the user clicks on one of them, I want to highlight just this one. In a few words : a) remove (if exists) a specific class from all divs, b) add it to the div being clicked.
And here's the full code...
index.html
<!DOCTYPE html>
<html style='min-height:0px;'>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile.min.css" />
<link rel="stylesheet" href="custom.css" />
<script src="jquery.min.js"></script>
<script src="jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
</div>
<script src="custom.js"></script>
</body>
</html>
custom.js
$(function() {
$("div").click( function() {
$("div").removeClass("msp-selected");
$(this).addClass("msp-selected");
});
});
custom.css
media screen and (orientation: portrait) {
.ui-mobile, .ui-mobile .ui-page {
min-height: 420px;
}
}
media screen and (orientation: landscape) {
.ui-mobile, .ui-mobile .ui-page {
min-height: 300px;
}
}
div {
outline:0;
}
div:hover {
outline-width:1px;
outline-color:red;
outline-style: dotted;
overflow:hidden;
}
.msp-selected {
outline-width:1px;
outline-color:red;
outline-style: solid;
}
P.S.
The situation may not be as simple as it initially seemed. I'm using jQuery 1.8.2 and jQuery Mobile 1.3.2. And the actual page is running inside a Webview, itself inside a Cocoa/OS X app. Quite complicated, huh? lol
I can't see any error (not easy to have access to a console that... doesn't exist...). The only thing that I noticed is that when I remove the removeClass part, it does work. Adding it, seems to make the whole thing a mess.
$(function() {
$('div').on( "click", function() {
$(this).addClass('msp-selected');
$(this).siblings().removeClass('msp-selected');
})
Try something like:
$(".box").click( function() {
if($(".activeBox").length > 0) { //check if there is an activeBox element
$(".activeBox").removeClass("activeBox"); //if there is, remove it
}
$(this).addClass("activeBox"); //make the clicked div the activeBox
});
.box and .activeBox classes to be replaced by your own inactive and active selectors as you want.
Here's a jsFiddle example
Update:
With the new HTML, I got this working as a jsFiddle
Here's the code:
HTML within jsFiddle's existing head/body tags:
<div data-role="page">
</div>
CSS from OP:
div {
outline:0;
}
div:hover {
outline-width:1px;
outline-color:red;
outline-style: dotted;
overflow:hidden;
}
.msp-selected {
outline-width:1px;
outline-color:red;
outline-style: solid;
}
jQuery:
$("div").click( function() {
if($(".msp-selected").length > 0) {
$(".msp-selected").removeClass("msp-selected");
}
$(this).addClass("msp-selected");
});
I tested this with the various versions of jQuery available back to 1.7.2 and mobile 1.1.1, with the class being added on click each time. My only suggestion if this still doesn't work is to encase the whole thing in $(document).ready( function() { //click function }); or switch to $("div").on("click", function() {});

HTML5 full-screen doesn't work when set inside a timer

I am trying this code. It is supposed to generate an image and set its container div to full-screen when the p is clicked.
<html>
<head>
<style>
img { height: 643px; width: 860px; }
img:-moz-full-screen { height: 643px; width: 860px; }
div:-moz-full-screen { background: white; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
$("p").click(function() {
setTimeout(function() {
$("body").prepend("<div><img src = 'http://i.stack.imgur.com/lBZKC.jpg?s=128&g=1' /></div>");
$("div").get(0).mozRequestFullScreen();
},5000);
});
});
</script>
</head>
<body>
<p>Foo</p>
</body>
What it does is wiat for 5 seconds and prepend the image all right, but it is not set to full-screen. However, if you remove the timer and do it normally:
$("p").click(function() {
$("body").prepend("<div><img src = 'http://i.stack.imgur.com/lBZKC.jpg?s=128&g=1' /></div>");
$("div").get(0).mozRequestFullScreen();
});
it works fine, it prepends the image and immediately sets it to full-screen.
Is this intentional, or a bug? Either way, is there any way to make it work?
The method has to be called in response to a user input event (ie. keypress, mouseevent).

Smooth Div Scroll not correctly displaying

I am trying to implement smooth div scroll, the "Clickable Logo Parade" in particular: http://www.smoothdivscroll.com/clickableLogoParade.html
And I got it working in a blank page perfectly exactly the way I want it to, but when I insert it in my current layout it doesnt work properly.. I am assuming something is interfering with it?
Any help?
This is what I added into my css:
#logoParade
{
width: 628px;
height: 75px;
position: relative;
}
#logoParade div.scrollableArea a
{
display: block;
float: left;
padding-left: 10px;
}
This is the jQuery I have added:
<script type="text/javascript">
$(document).ready(function() {
$("#logoParade").smoothDivScroll({
autoScrollingMode: "always",
autoScrollingDirection: "endlessLoopRight",
autoScrollingStep: 1,
autoScrollingInterval: 25
});
// Logo parade event handlers
$("#logoParade").bind("mouseover", function() {
$(this).smoothDivScroll("stopAutoScrolling");
}).bind("mouseout", function() {
$(this).smoothDivScroll("startAutoScrolling");
});
});
</script>
And these documents im including:
<script src="js/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
<!-- Latest version (3.0.6) of jQuery Mouse Wheel by Brandon Aaron
You will find it here: http://brandonaaron.net/code/mousewheel/demos -->
<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>
<!-- jQuery Kinectic (1.5) used for touch scrolling -->
<script src="js/jquery.kinetic.js" type="text/javascript"></script>
<!-- Smooth Div Scroll 1.3 minified-->
<script src="js/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>
As well as of course actual jquery..
I uploaded me trying to implement it here you can have a look:
http://www.mintystudios.co.uk/clients/naghmeh/
And here is working version in a blank page..:
http://www.mintystudios.co.uk/clients/naghmeh/1/
Anyone know why it isnt working in the implemented version?
This should solve your problem; replace it with your script.
<SCRIPT type="text/javascript">
jQuery(function ($) {
$("#logoParade").smoothDivScroll({
autoScrollingMode: "always",
autoScrollingDirection: "endlessLoopRight",
autoScrollingStep: 1,
autoScrollingInterval: 25
});
// Logo parade event handlers
$("#logoParade").bind("mouseover", function() {
$(this).smoothDivScroll("stopAutoScrolling");
}).bind("mouseout", function() {
$(this).smoothDivScroll("startAutoScrolling");
});
});
</SCRIPT>

Why isnt my javascript working?

All my code seems to work except my javascript am I doing something wrong?
Thanks Im only a beginner!
I am trying to make the background change when the mouse goes over the 'Tags' tab but it wont do it? What is going on?
HTML:
<html>
<head>
<script language="JavaScript" type="text/javascript">
// This changes color on mouseover, leaves existing color box.
$('.tab-item').mouseover(function() {
$(this).addClass("tab-mouseover");
}).mouseout(function() {
$(this).removeClass("tab-mouseover");
});
// This changes color when clicked, removed old color box.
$('.tab-item').click(function() {
$('.tab-item').removeClass("tab-selected");
$(this).addClass("tab-selected");
});-->
</script>
<link href="arg.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="tab-item tab-selected" id="search-box">
Search
</div>
<div class="tab-item" id="tag-box">
Tags
</div>
</body>
</html>
CSS:
.tab-item {
-moz-border-radius: 10px;
border-radius: 10px;
font: 14px helvetica;
color: #000;
height: 20px;
float: left;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
position: relative;
width: 75px;
}
.tab-mouseover {
background: #bdbdbd;
}
.tab-selected {
background: #c0c0c0;
}
Thanks!
James
You're using jQuery but haven't included it.
You also need to put your jquery code into the jquery ready event:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
// This changes color on mouseover, leaves existing color box.
$(function(){
$('.tab-item').mouseover(function() {
$(this).addClass("tab-mouseover");
}).mouseout(function() {
$(this).removeClass("tab-mouseover");
});
// This changes color when clicked, removed old color box.
$('.tab-item').click(function() {
$('.tab-item').removeClass("tab-selected");
$(this).addClass("tab-selected");
});
});
-->
</script>
You haven't added your library (jQuery, I think) as a source here.
Add it like this:
<script src='http://foo.com/bar/library.js'></script>
If you are, indeed using jQuery, you can directly add the following code to make it work:
<script src='http://code.jquery.com/jquery-1.6.4.js'></script>
Note that the above means you are depending on the availability of the jQuery website and not your own.
As per James' comment on this, yes, you can scrap the jQuery completely, but I'd recommend you to learn JavaScript yourself instead of copying code from a website. If you want to change the background color of the field onmouseover, use code like this:
<div onmouseover="this.style.backgroundColor='#bdbdbd';" onmouseout="this.style.backgroundColor='white';">Search</div>
Or
<div onmouseover='this.className="tab-mouseover"' onmouseout='this.className=""'>Search</div>
Or without JavaScript and just simple CSS:
<style>
.tab-mouseover:hover{
background: #bdbdbd;
}
</style>
<div class='tab-mouseover'>Search</div>
I can't answer the latter part, because I don't understand the use of deleting and then adding the same class to an element onclick.
Well, first, you haven't included a link to the jQuery library in your code. As a result, your code won't work, wherever you put it.
Second, since your code is in a script element at the head of the document, it will execute before the body of the document has been rendered. You need to put it in a
$(document).ready(function() {
/*
* Your code here
*/
});
block.
Try this:
$('.tab-item').hover(
function() {
$(this).addClass('tab-mouseover');
},
function() {
$(this).removeClass('tab-mouseover');
}
);
$('.tab-item').click(function() {
$('.tab-selected').removeClass('tab-selected');
$(this).addClass('tab-selected');
});
http://jsfiddle.net/7dDTv/1/

Categories

Resources