Unfortunately I cannot force my tabs to switch.
I've used the code once and it worked, I used the same versions of jQuery and Bootstrap.
I cannot find the conflict here. There are no identical ids in my code and as far as I can see my CSS does not overwrite the bootstrap CSS.
I use jQuery 2.1.4 and Bootstrap 3.3.4.
The code:
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">
Tutorial Point Home</a></li>
<li>iOS</li>
<li>jmeter</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>tab1 text</p>
</div>
<div class="tab-pane fade" id="ios">
<p>tab2 text</p>
</div>
<div class="tab-pane fade" id="jmeter">
<p>tab3 text</p>
</div>
</div>
<script>
$(function(){
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// Get the name of active tab
var activeTab = $(e.target).text();
// Get the name of previous tab
var previousTab = $(e.relatedTarget).text();
$(".active-tab span").html(activeTab);
$(".previous-tab span").html(previousTab);
});
});
</script>
EDIT
I've found the code which is in conflict with the tabs, it's responsible for smooth scrolling:
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 700);
return false;
}
}
});
});
</script>
Is there any way to make them both work? Can I change # for something else?
The return false in the animate function is causing the problem because it the never returns to allow the Bootstrap tab toggle to work. Change it to this..
$(function(){
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// Get the name of active tab
var activeTab = $(e.target).text();
// Get the name of previous tab
var previousTab = $(e.relatedTarget).text();
$(".active-tab span").html(activeTab);
$(".previous-tab span").html(previousTab);
});
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 700);
}
}
});
});
Demo: http://codeply.com/go/R4VRTQcx46
Related
I am working on a project which I started building on bootstrap 4.3.1.
I'm crazy about this one Javascript and html coding.
<a class="dropdown-item" href="{{ route('user.panel') }}">
User panel
</a>
I get this error in console.
SyntaxError: 'http://localhost:8000/user/panel' is not a valid selector
bootstrap.min.js:6 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'http://localhost:8000/user/panel' is not a valid selector.
at Object.getSelectorFromElement (http://localhost:8000/themes/js/bootstrap.min.js:6:1466)
at http://localhost:8000/themes/js/bootstrap.min.js:6:46766
at Array.map ()
at n.t.refresh (http://localhost:8000/themes/js/bootstrap.min.js:6:46740)
at new n (http://localhost:8000/themes/js/bootstrap.min.js:6:46381)
I figured out that it occur due to the dropdown because of this error the dropdown does not work. I also checked, that if I am using href="javascript:void(0);", href="#!" the error occur but if i use anchor tag without href or href="#" then it is working fine.
Note: I need the solution with href="javascript:void(0); as href="# in the address link does not look pretty and page scrolls up to the top .
<ul class="navbar-nav">
#guest
<li class="navbar-item dropdown">
Register/Login<i class="fas fa-sort-down"></i>
<div class="dropdown-menu text-right m-2 position-absolute" style="width:300px;left:-111px;">
Login
<span class="m-3">Are you new user?Login</span>
</div>
</li>
#else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->first_name }} {{ Auth::user()->last_name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-left" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('user.panel') }}">
User Panel
</a>
<a class="dropdown-item" href="#" id="logout-button">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
</div>
</li>
#endguest
</ul>
The error comes in the following line.
$('body').scrollspy({
target: '#mainNav',
offset: 50
});
script.js
(function($) {
"use strict"; // Start of use strict
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: (target.offset().top - 54)
}, 1000, "easeInOutExpo");
return false;
}
}
});
// Closes responsive menu when a scroll trigger link is clicked
$('.js-scroll-trigger').click(function() {
$('.navbar-collapse').collapse('hide');
});
// Activate scrollspy to add active class to navbar items on scroll
$('body').scrollspy({
target: '#mainNav',
offset: 50
});
})(jQuery); // End of use strict
AOS.init({
easing: 'ease-in-out-sine'
});
$('#logout-button').on('click', function(e) {
e.preventDefault();
$('#logout-form').submit();
});
$('#select').change(function() {
var $selected = $(this).find(':selected');
$('#description').html($selected.data('description'));
}).trigger('change');
$("#select").change(function() {
var color = $(this).val();
if (color == "laptop_repair") {
$(".box").not(".laptop_repair").hide();
$(".laptop_repair").show();
} else if (color == "install_windows") {
$(".box").not(".install_windows").hide();
$(".install_windows").show();
} else if (color == "backup") {
$(".box").not(".backup").hide();
$(".backup").show();
} else if (color == "antivirus") {
$(".box").not(".antivirus").hide();
$(".antivirus").show();
} else if (color == "magenta") {
$(".box").not(".magenta").hide();
$(".magenta").show();
} else {
$(".box").hide();
}
});
getSelectorFromElement: function getSelectorFromElement(element) {
var selector = element.getAttribute('data-target');
if (!selector || selector === '#') {
var hrefAttr = element.getAttribute('href');
selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';
}
return selector && document.querySelector(selector) ? selector : null;
}
The error comes from Bootstrap's scrollspy component, that clearly states:
Anchors () are required and must point to an element with that id.
or
Navbar links must have resolvable id targets. For example, a home must correspond to something in the DOM like
<div id="home">.
You have couple of solutions:
Change the scrollspy tartget from #mainNav to something more narrow which does not include .navbar-nav
In case you wanna track/spy the links inside the .navbar-nav, than you need either to hack scrollspy source, or to use some other component
Keep everything as is, but use valid local links in anchors.
I'm not really a jquery expert so please bear with me. I have "googled" but couldn't find any solution.
Here is the code:
<div id="navbarResponsive" class="collapse navbar-collapse col-auto">
<ul id="primary-menu" class="navbar-nav text-uppercase">
<li id="menu-item-1725" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1725 nav-item">Home</li>
<li id="menu-item-1739" class="nav-item menu-item menu-item-type-custom menu-item-object-custom menu-item-1739"><a rel="nav-link js-scroll-trigger" href="#services" class="nav-link js-scroll-trigger">Services</a></li>
<li id="menu-item-1735" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1735 nav-item">Portfolio</li>
<li id="menu-item-1736" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1736 nav-item">About</li>
</ul>
Here is the portion of the script/snippet:
(function($) {
"use strict"; // Start of use strict
$('a.nav-link.js-scroll-trigger').click(function(e) {
console.log(e);
});
$('.js-scroll-trigger').on('click', 'a', function(e) {
console.log(e);
});
$('li').find('a.js-scroll-trigger').click(function(e) {
console.log(e);
});
$('a').click(function(e) {
console.log(e);
});
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(e) {
if (location.pathname.replace(/^\//, '') ==
this.pathname.replace(/^\//, '') && location.hostname ==
this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +
']');
if (target.length) {
$('html, body').animate({
scrollTop: (target.offset().top - 54)
}, 1000, "easeInOutExpo");
return false;
}
}
});
The problem is that it only triggers $('a') and ignores the rest of the selectors.
I have tried checking it on the browser:
console - https://www.screencast.com/t/sikIcYY1J
sources using debugger -- https://www.screencast.com/t/TgbNhIb1usy
It appears that it was targeting the correct selectors but fails to trigger the condition as shown above. My smooth scrolling won't work anymore unless I place $('a') as the only condition. It used to work few days before, I dunno what happened. Something must have triggered it not to work. Could someone please enlighten me? Answers would really be appreciated, many thanks...
change target.length to $(target).length
add e.preventDefault();
fix var target = this.hash;
but, why do you need this for? if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
All you need is this:
$(function() {
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(e) {
e.preventDefault();
var target = this.hash;
if ($(target).length) {
$('html, body').animate({
scrollTop: ($(target).offset().top - 54)
}, 1000, "easeInOutExpo");
return;
}
});
});
Anyway, here is the fix to your script.
$(function() {
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(e) {
e.preventDefault();
if (location.pathname.replace(/^\//, '') ==
this.pathname.replace(/^\//, '') && location.hostname ==
this.hostname) {
var target = this.hash;
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if ($(target).length) {
$('html, body').animate({
scrollTop: ($(target).offset().top - 54)
}, 1000, "easeInOutExpo");
console.log(target);
return;
}
}
});
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="navbarResponsive" class="collapse navbar-collapse col-auto">
<ul id="primary-menu" class="navbar-nav text-uppercase">
<li id="menu-item-1725" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1725 nav-item">Home</li>
<li id="menu-item-1739" class="nav-item menu-item menu-item-type-custom menu-item-object-custom menu-item-1739"><a rel="nav-link js-scroll-trigger" href="#services" class="nav-link js-scroll-trigger">Services</a></li>
<li id="menu-item-1735" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1735 nav-item">Portfolio</li>
<li id="menu-item-1736" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1736 nav-item">About</li>
</ul>
</div>
<p>ggwgsgwg</p>
<p> </p>
<p>ggwgsgwg</p>
<p>ggwgsgwg</p>
<p> </p>
<p> </p>
<p> </p>
<p>ggwgsgwg</p>
<p> </p>
<p> </p>
<p> </p>
<p id="services">ggwgsgwg</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>ggwgsgwg</p>
<p> </p>
<p>ggwgsgwg</p>
<p>ggwgsgwg</p>
<p> </p>
<p>ggwgsgwg</p>
<p>ggwgsgwgv</p>
Change your JS "(function($) {" to this:
$(document).ready(function() {
With this, the events work for me.
It is a syntax error.
(function($) {
should need to change
$(function() {
DEMO
I have another script which I made that adds classes to make the smooth scrolling work. It was called AFTER the script above, so I moved it BEFORE inside the functions.php (Wordpress). The scripts started to work again. Silly of me not to notice that. Sorry for the trouble, & thank you, guys...
I need to correct something in a PHP project.
I have two pages, home.php and page1.php.
I have separately a header.php which is rendered in both pages (home.php and page1.php).
The problem is that when I am in page1.PHP, the links from the header are not working. It should go to the home page and scroll to clicked section.
Can you please help me how to make it work in javascript or jquery if I click on a navigation button to take me to a home page.
In home page if I click on a navigation button, it will scroll to desired section. This problem is resolved like this in 'header.php':
jQuery('a[href^="#"]').on('click', function (e) {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = jQuery(this.hash);
target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
var calculatedHeight = jQuery(".tip-top.fixed").length ? 120 : 230;
if (target.length) {
jQuery('html,body').animate({
scrollTop: target.offset().top - calculatedHeight
}, 700);
return false;
}
}
});
These are the sections:
<ul class="nav list-inline visible-lg visible-md clearfix pull-right nav-pills main-menu">
<li>Clients</li>
<li>Case studies</li>
<li>Capabilities</li>
<li>Team</li>
<li>Contact</li>
</ul>
When I am in the page1.php and I click on a navigation link, in the URL appears the section name where it should take me:
http://localhost/ppi/teszt/#panel-nine
Can you please help me how to achieve this?
I need some help how to keep keep current anchor link active after refresh the page. Practically, I have this vertical navbar menu (http://prntscr.com/fz9yct), by default I added class active to the <a href="#home"> so when we open the page, navbar looks like as you see on screenshot.
When I scroll, or click on any other navbar list item , everything works good , smooth scroll to the appropriate section and remove class active from from the previous anchor link and add to the appropriate.
Issue is when I refresh the page class active the class active does not remain where it should be, but it is assigned to the #home anchor link, although the content stays where it was before refresh. Can you help me how to fix that ?
I tried some solution with $(window).on('beforeunload', function() { but does not work
<div class="main-menu-container">
<nav class="main-menu" id="navbar" aria-label="Main Menu">
<ul role="menubar" class="center">
<li class="menubar__item">
<a href="#home" class="active block" title="Home">
<span class="menubar__item--icon block">
SVG ICON HERE
</span>
<span class="menubar__item--text">Home</span>
</a>
</li>
<li class="menubar__item">
<a href="#about" class="block" title="About">
<span class="menubar__item--icon block">
SVG ICON HERE
</span>
<span class="menubar__item--text">About</span>
</a>
</li>
<li class="menubar__item">
<a href="#experience" class="block" title="My Experience">
<span class="menubar__item--icon block">
SVG ICON HERE
</span>
<span class="menubar__item--text">Experience</span>
</a>
</li>
<li class="menubar__item">
<a href="#services" class="block" title="What I provide">
<span class="menubar__item--icon block">
SVG ICON HERE
</span>
<span class="menubar__item--text">Services</span>
</a>
</li>
<li class="menubar__item">
<a href="#contact" class="block" title="Get in touch">
<span class="menubar__item--icon block">
SVG ICON HERE
</span>
<span class="text">Contact</span>
</a>
</li>
</ul>
<!-- /.menubar end -->
</nav>
<!-- /.main-menu end -->
</div>
<!-- / .main-menu-container end -->
$(document).ready(function() {
$(document).on("scroll", onScroll);
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length && $(this).attr("href") == '#home') {
$("html, body").animate({
scrollTop: target.offset().top
}, 1000);
} else {
$("html, body").animate({
scrollTop: target.offset().top + 2
}, 1000);
}
return false;
}
});
});
function onScroll(event) {
var scrollPos = $(document).scrollTop();
$('#navbar a').each(function() {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.offset().top <= scrollPos && refElement.offset().top + refElement.height() > scrollPos) {
$('#navbar ul li a').removeClass("active");
currLink.addClass("active");
} else {
currLink.removeClass("active");
}
});
}
Looks like you use that answer and forget to remove class when click.
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
Note: I'm new to webdev and i'm building this site with bootstrap
I'm building a one page site and the navbar at the top directs the user to the relevant id. the problem i'm having is that i want it to scroll to the id when clicked (see http://www.blastprocessor.co.uk/). I also want to set the class as active when the user scrolls past a specific id.
I have no idea where to start but i'll post my html code here.
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="34">
<div class="container">
<div class="navbar-collapse collapse navbar-responsive-collapse" id="main-menu">
<ul class="nav navbar-nav">
<li class="active">What We Are</li>
<li class="">Why Us</li>
<li class="">What We Offer</li>
<li class="">Contact Us</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li>Right Link</li>
</ul>
</div>
</div>
</nav>
You can use the following function to make your scroll animation. Regarding adding a class 'active' to the past id actually you can follow the answer of #ahb. For your need i just added a var reduce in the function which will help you reduce 50px from the actuall offset.
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
var reduce = 50;
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - reduce
}, 1000);
return false;
}
}
});
});
ORIGINAL SOURCE
DEMO
Using JQuery:
See here to scroll and animate to your ID.
To add your class after scrolling past your ID use:
//assign the window and all the contents into variables
//instead of going and grabbing it from the DOM on every scroll
var $window = $(window),
$content = $('.content');
$window.scroll(function () {
$content.each(function () {
//for each element that has a class of content
//check its position and add SomeClass
if ($window.scrollTop() >= $(this).position().top) {
$(this).addClass('SomeClass');
} else if ($window.scrollTop() <= $(this).position().top) {
//if window position is less then remove it
$(this).removeClass('SomeClass');
}
});
});