I have created a function that uses scrolling sliding effect when I click on a link it slides down and takes to that div but i also placed another library for sliding navigation bar when we click on menu it slides form right to left and navigation menu opens but the problem is that both are not working when both are active if i remove the slide menu library the page sliding effect is working fine but when I add slide menu library it stops how can I make both to run ??
//main.js which is using sliding page effect pparallax we say i beleive them
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
Here is my footer where I have placed the libraries
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/BootSideMenu.js"></script>//if this is removed everything is working fine
<script src="//maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/main.js"></script>
<script>
$(document).ready(function(){
$('#navigation').BootSideMenu({side:"right"});
});
</script>
Please can anyone help me out my english is a bit bad so sorry for incorrect tenses :)
Thank You
Related
I added IDs and the smooth scroll effect won't work. It doesn't even scroll up to the ID that I assign it. I tested it in a test HTML file and it worked. I thought it was because some of my responsive elements didn't have fixed heights, but when I gave them fixed heights, it still did not work.
I tried to copy and paste my code. However, it said I have formatting problems no matter what I did. So I created a pastebin link: https://pastebin.com/raw/dfQS9RUA
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
alert("SCROLL CODE RUNNING");
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
Click Me to Smooth Scroll to Section 1 Above
I found that I get this error in the console:
index.html:30 Uncaught TypeError: $(...).animate is not a function
at HTMLAnchorElement.<anonymous> (index.html:30)
at HTMLAnchorElement.dispatch (jquery-3.4.1.slim.min.js:2)
at HTMLAnchorElement.v.handle (jquery-3.4.1.slim.min.js:2)
This implies that I do not have the right version of JQuery installed, but when I make the CDN the uncompressed version or the slim version, it still does not work.
This is the CDN of JQuery I am using:
<script
src="https://code.jquery.com/jquery-3.5.0.min.js"
integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
crossorigin="anonymous"></script>
https://codepen.io/tmoses/pen/zYvzZmo
https://code.jquery.com/jquery-3.4.1.min.js
Change the above in your bootstrap scripts, and remove the other. For some reason the slim version didn't load the animate function, but it works with just the minified version. It also appears the "integrity" attribute was causing it not to load properly. Try not to combine several versions of jQuery in one document.
I have index.php which has different sections like top,service,aboutus andcontactus .I have my header.php in includes folder and I include it to each and every files separately.I added jquery for smooth scroll for sections.
Now I have gallery.php which has the same header.Now I want to call each and every section from gallery to index/section. So I changed the href="#service" to href=index.php#service.Now it works from both index and gallery pages.
Problem:
The smooth scroll on works if I call the section from index.php. When I call a section from gallery.php it just load the upper part of index.php and suddenly moves to the called section.I want it to move smoothly.How can I make it happen?
$(document).ready(function(){
$("a").on('click', function(event) {
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
Your code look good but you have to make footer.php and call function from footer.php so that your problem will reslove.
As i use we have to call all jquery related things from footer but its depend on your requirements so in that case you can call from footer.php
WARNING: I'm new to JavaScript.
I am developing a site for a family member and I've stumbled upon a problem. I am using Bootstrap 4 for the site, and therefor their navbar framework. The navbar is fixed to the top, and uses ScrollSpy to highlight the active section.
I am using this code from W3 to have my Nav links slowly scroll down the page to a section.
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
No luck. My nav links nolonger work, and I get these nasty console errors
master.js:15 Uncaught TypeError: $(...).animate is not a function
at HTMLAnchorElement.<anonymous> (master.js:15)
at HTMLAnchorElement.dispatch (jquery-3.2.1.slim.min.js:3)
at HTMLAnchorElement.q.handle (jquery-3.2.1.slim.min.js:3)
I know what you're thinking, master.js is sourced before jQuery. Nope!
I would appreciate any help I can get on this.
See the answer here: jquery : $().animate() is not a function
You appear to be using the slim build of jQuery 3.2.1, which doesn't
include most of the library. Instead, you should be using the full
version.
https://code.jquery.com/jquery-3.2.1.js
I have a couple jQuery functions that are working properly - A fadeIn of a fixed logo and navigation menu bound to a page scroll, as well as a lightbox and scrollbar fix for Firefox tied to (document).ready.
I'm trying to add the ability to hide and/or show a couple of div's tied to a click.
As a stand-alone function, I have it working properly as a fiddle...
Working JSFiddle Here
The problem is I'm a learning my way through jQuery as I go and I'm not sure of what the proper order is to call the functions in my script at the bottom of my page.
My logic tells me to include it under the (document).ready piece, but when I insert the working script from the fiddle, it not only doesn't work but also screws up the rest of my functions.
Current working script without hide/show function (Updated per comments):
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$(".main-links").fadeIn();
$(".header-logo").fadeIn();
} else {
$(".main-links").hide();
$(".header-logo").hide();
}
});
$(document).ready(function(){
$('.lightbox').nivoLightbox();
$('.scroll-pane').jScrollPane();
$('.scroll-pane2').jScrollPane();
});
</script>
The way I've tried inserting the additional function is like this:
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$(".main-links").fadeIn();
$(".header-logo").fadeIn();
} else {
$(".main-links").hide();
$(".header-logo").hide();
}
});
$(document).ready(function(){
$('.lightbox').nivoLightbox();
$('.scroll-pane').jScrollPane();
$('.scroll-pane2').jScrollPane();
$('#menu-switch1').on('click', function(event) {
$('#main-tasting-menu').toggle('show');
$('#dessert-tasting-menu').toggle('hide');
});
$('#menu-switch2').on('click', function(event) {
$('#main-tasting-menu').toggle('hide');
$('#dessert-tasting-menu').toggle('show');
});
</script>
When I do this, the toggle doesn't work like it does in my fiddle, it kills my scroll-pane2 and adds a horizontal scroll that shouldn't be there on .scroll-pane1.
Is there something obvious that I'm overlooking because of my shitty knowledge of jQuery?
HTML Section (inventory of scripts?):
<script src="js/nivo-lightbox.min.js"></script>
<link href="css/nivo-lightbox.css" rel="stylesheet" type="text/css" media="screen">
<link href="themes/default/default.css" rel="stylesheet" type="text/css" media="screen">
<!-- jScrollPane CSS for Firefox scrollbar fix (applied to all browsers) -->
<link href="css/jquery.jscrollpane.css" rel="stylesheet" type="text/css" media="screen">
<!-- Mousewheel support for jScrollPane scrollbar fix for FireFox and IE -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
Firstly, there is a syntax error in your example when you added the click handlers for #menu-switch. You need to close the function and the call to live, like below. Notice the extra }) closing each call to live().
$(document).ready(function(){
$('.lightbox').nivoLightbox();
$('.scroll-pane').jScrollPane();
$('.scroll-pane2').jScrollPane();
$('#menu-switch1').live('click', function(event) {
$('#main-tasting-menu').toggle('show');
$('#dessert-tasting-menu').toggle('hide');
});
$('#menu-switch2').live('click', function(event) {
$('#main-tasting-menu').toggle('hide');
$('#dessert-tasting-menu').toggle('show');
});
});
And there are a couple more things you might want to consider. You will want to wrap everything inside the $(document).ready() call, because that will ensure that jQuery and the DOM are ready for action. And as charlietfl mentioned in a comment above, the live() method was deprecated in version 1.7. If you are using a version > 1.7, then you'll want to use on() instead. Here's an updated version of the whole thing.
$(document).ready(function(){
// Cache the items you need to use inside different functions.
// This is so that you don't have to call the jQuery method
// on every user action.
var $mainLinks = $('.main-links');
var $headerLogo = $('.header-logo');
var $mainTastingMenu = $('#main-tasting-menu');
var $dessertTastingMenu = $('#dessertTastingMenu');
var $menuSwitch_1 = $('#menu-switch1');
var $menuSwitch_2 = $('#menu-switch2');
// Setup your plugins
$('.lightbox').nivoLightbox();
$('.scroll-pane').jScrollPane();
$('.scroll-pane2').jScrollPane();
// Setup your event handlers
$menuSwitch_1.on('click', function(event) {
$mainTastingMenu.toggle('show');
$dessertTastingMenu.toggle('hide');
});
$menuSwitch_2.on('click', function(event) {
$mainTastingMenu.toggle('hide');
$dessertTastingMenu.toggle('show');
});
// I made this handler match the ones above for consistency
$(window).on('scroll', function(event) {
if ($(this).scrollTop() > 200) {
$mainLinks.fadeIn();
$headerLogo.fadeIn();
} else {
$mainLinks.hide();
$headerLogo.hide();
}
});
});
on this site, I have 2 uses of jquery, one for "anything slider" and another for a toggle for hide show.
http://www.worklightrpo.com/
If I remove the toggle's link to jquery, the slider works, but the toggle doesn't... this is the link for the toggle's jquery.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
Does anyone know how I can get them BOTH to work and play nicely?
Thanks
The full portion of code is this:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
$(document).ready(function() {
$('.nav-toggle').click(function(){
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){
toggle_switch.html('Learn More');//change the button label to be 'Show'
}else{
toggle_switch.html('Condense');//change the button label to be 'Hide'
}
});
});
});
</script>
Don’t load two different javascript library versions, only one is ever needed.