How can I create a Pjax that can have multiple containers? I tried this Pjax on this link:
https://github.com/defunkt/jquery-pjax/blob/master/README.md
and this is my code:
$(document).pjax('a', '#pjax-container, #pjax-navbar');
but it doesn't work.
then I tried this code:
$(document).pjax('a', '#pjax-container');
$(document).pjax('a', '#pjax-navbar');
and it doesn't work either. It just loads the last one.
How do I make it work?
this is my HTML
<div class="wrap">
<nav id="w0" class="navbar-inverse navbar-fixed-top navbar" role="navigation" id="pjax-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w0-collapse"><span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span></button><a class="navbar-brand" href="/josh/cms_template/backend/web/">My Company</a></div>
<div id="w0-collapse" class="collapse navbar-collapse">
<ul id="w1" class="navbar-nav navbar-right nav">
<li class="active">Home</li>
<li>Logout</li>
</ul>
</div>
</div>
</nav>
<div class="container" id="pjax-container">
<div class="site-index">
this is my content
</div>
</div>
</div>
all i want is when i go to another page, only pjax-container will changing.
i already make it. but the navigation bar is not changing.
Pjax doesn't have multiple containers.
To copy the same response to other pjax container, you can use pjax complete event handler like this.
Remove/disable existing pjax code from your page:
//Remove Code
//$(document).pjax('a', '#pjax-container');
//$(document).pjax('a', '#pjax-navbar')
//$(document).pjax('a', '#pjax-container, #pjax-navbar');
// Add this Code
$(document).on('pjax:complete', function(event) {
//This code will copy #pjax-container container's response
// to #pjax-navbar when event is completed.
$('#pjax-navbar').html( $('#pjax-container').html() );
});
You could add two links with same href but different id.
And attach pjax to each of them:
$(document).pjax('a#pjax-link-container', '#pjax-container');
$(document).pjax('a#pjax-link-navbar', '#pjax-navbar');
$(document).pjax('a', '#pjax-container');
$(document).on('pjax:clicked', function(options) {
$.pjax.reload('#pjax-container', {
fragment: '#pjax-container',
timeout: 5000,
scrollTo: false
})
});
Related
I've got a problem with my Laravel site.
It doesn't load any JS. The Collapse of my navbar and the auto-scroll function don't work at all. It's like it doesn't load the JS at all. But I don't get any errors and the hyperlinks are fine. I can load the files in my Browser without any problem. Only the functionality doesn't work.
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<div class="wrapper" id="wrapper">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
#include('layouts.nav')
</nav>
the Navbar file
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-main">
<span class="sr-only">Navigation ein-/ausblenden</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Dr. Geiger</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-main">
<ul class="nav navbar-nav navbar-right">
<li>Welcome</li>
<li>Öffnungszeiten</li>
<li>Unsere Schwerpunkte</li>
<li>Unsere Arztpraxis</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</div>
</div>
And the smoothscroll.js file
$(document).ready(function() {
// Add scrollspy to <body>
$('body').scrollspy({
target: ".navbar",
offset: 50
});
// Add smooth scrolling on all links inside the navbar
$("#navbar-collapse-main 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
});
});
Any value I set to data-offset for scrollspy does not work at all.
Here are the relevant html, css, and js code:
HTML
<nav class="navbar navbar-fixed-top navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><strong>YOUNG'S PORTFOLIO</strong></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right enlargeItem">
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
CSS
body {
background-color: gray;
padding-top: 110px;
data-spy='scroll';
data-target='.navbar';
data-offset='';
position: relative;
}
JS
$('body').scrollspy();
When I scroll to target area where a tag is defined (#aboutBox, #portfolioBox, #contactBox), it does highlight the appropriate list item.
However, it is off a bit, so I wanted to change the offset by changing the data-offset but changing the data-offset does not do anything.
Here is the link to the codepen if someone wants to take a look at the whole thing
Argh. Couple things wrong with my code.
I was trying to set attributes using CSS! WOW rookie mistake. I need some sleep.
I was using navbar-fixed-top class. So I had to manually offset by 150px.
I applied this to my javascript:
$("body").attr({
"data-spy": "scroll",
"data-target": ".navbar"
}).scrollspy({
offset: 150
});
Come across this thread as i am looking to find out if you can have a negative value on data-offset.
In response to this post You don't have to add any extra JS or CSS for scrollspy to work it's all bundled with bootstrap, you would just add the attributes to the body tag. ref: https://www.w3schools.com/bootstrap4/bootstrap_scrollspy.asp
<body data-spy="scroll" data-target=".navbar" data-offset="150">
Try this code :
$(document).ready(function () {
offset = 10; // get extra padding
nav_top = $("#tsnav"); // get the top navbar hieght
side_nav = $("#cve_info") // target nav
nav_height = nav_top.outerHeight() + offset; // actual height from top where content go and fixed
side_nav.find("a").on('click', function () {
let $el = $(this);
id = $el.attr("href");
$('html, body').scrollTop( $(id).offset().top - nav_height);
return false;
})
});
There are two search-containers:
<div id="navbarSearch" class="navbar-collapse collapse np-mobile-menu"></div>
<div id="navbarMenu" class="navbar-collapse collapse np-mobile-menu"></div>
The buttons to collapse this containers:
<button class="b1" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarSearch" </button>
<button class="b1" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarMenu" </button>
Is it possible (and how) as to hide one menu (if is open) when the other menu is clicked - and so open the second menu?
Currently when the navbarMenu is open and i'm gonna open the other menu all two menus are open... You know what I mean?
Thank you :)
I think that toggleClass() triggered by a click() event is what you are after.
https://api.jquery.com/click/
http://api.jquery.com/toggleclass/
$( document ).ready(function() {
$( ".navbarSearch_button" ).click(function() {
//alert( "Handler for button_1 called." );
$( "#navbarSearch" ).toggleClass("navbar-collapse collapse")
});
$( ".navbarMenu_button" ).click(function() {
//alert( "Handler for navbarMenu_button called." );
$( "#navbarMenu" ).toggleClass("navbar-collapse collapse")
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbarSearch" class="navbar-collapse collapse np-mobile-menu">lala</div>
<div id="navbarMenu" class="navbar-collapse collapse np-mobile-menu">mama</div>
<button class="b1 navbarSearch_button">navbarSearch</button>
<button class="b1 navbarMenu_button" >navbarMenu</button>
You need to differentiate the data-target attribute with a unique class or id for your dropdown menus like so:
For your first menu
<a class="btn btn-navbar" data-toggle="collapse" data-target="#first">
For your second menu:
<a class="btn btn-navbar" data-toggle="collapse" data-target="#second">
Then you can add that unique id to your nav collapse container:
First
<div id="first" class="nav-collapse"> ... </div>
Second
<div id="second" class="nav-collapse"> ... </div>
You can use the method .collapse() already available in Bootstrap to hide the menu not involved.
Update the html code to this:
<div id="navbarSearch" class="navbar-collapse collapse np-mobile-menu"></div>
<div id="navbarMenu" class="navbar-collapse collapse np-mobile-menu"></div>
<button id="navbarSearchButton" class="b1" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarSearch"></button>
<button id="navbarMenuButton" class="b1" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarMenu"></button>
Then add the js code in separate file:
$(function()
{
$('#navbarSearchButton').on ('click', function() { $('#navbarMenu').collapse('hide'); });
$('#navbarMenuButton').on ('click', function() { $('#navbarSearch').collapse('hide'); });
});
I have a Bootstrap navbar that collapses when shrunk and drops down as a menu when the toggle button is tapped/clicked. However, once open, it stays open until one clicks the toggle button again. Is there any way to close it automatically when the user A) clicks outside the menu area, and B) scrolls the page up or down on the mobile device? Here's what the navbar looks like when collapsed:
And this is the dropdown:
I need the dropdown to collapse when the yellow area or any menu item is clicked (except the search box). So far, my JS looks like this:
// prevent search box from vanishing upon click in responsive mode
$('input.form-control').click(function(e) { e.stopPropagation(); });
// re-collapse nav dropdown menu after selection (in responsive mode)
$('.navbar-fixed-top').click('li', function() {
$('.navbar-collapse').collapse('hide');
});
// close drop-down nav when user clicks outside
$(document).ready(function () {
function CloseNav() {
$(".navbar-collapse").stop().css({ 'height': '1px' }).removeClass('in').addClass("collapse");
$(".navbar-toggle").stop().removeClass('collapsed');
}
$('html').click(function (event) {
var clickover = $(event.target);
var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
if (_opened === true && !clickover.hasClass("navbar-toggle")) {
CloseNav();
}
});
});
And here's the relevant HTML snippet:
<!-- Nav bar -->
<div class="navbar navbar-default navbar-fixed-top top-nav" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="bootstrap/img/gray_logo.png" class="site-logo"><span class="site-name-first">Always</span><span class="site-name-second">Spanish</span></a>
</div>
<!-- Navbar links -->
<div class="collapse navbar-collapse" ng-controller="HeaderController">
<!-- Search box start -->
<form class="navbar-form navbar-right search-box" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
<!-- Search box start -->
<ul class="nav navbar-nav pull-right">
<li ng-class="{ active: isActive('/about')}">About</li>
<li ng-class="{ active: isActive('/blog')}">Blog</li>
<li>Premium</li>
<li>Books</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Of the 3 JS scripts, the first two seem to work fine. It's just the last one that doesn't. Also, I don't yet know how to field the scroll event at all. I am sure I'm doing something very silly here. Please help!
listen for all clicks on window and check if there is no parents here with class of navbar. you can use closest for that
https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
Polyfill: https://github.com/jonathantneal/closest
I've made a sticky/fixed-to-top navbar with Bootstrap. It's responsive so the nav options turn into a hamburger menu when the screen is below a set size. I've also added JavaScript from a tutorial so that it scrolls nicely.
It is working fine except in tablet/phone mode when the navbar stops being fixed to the top and becomes static instead. See here for the differences/what it should be like. I'm not sure what I've done wrong.
I've tried many versions/tutorials, sometimes I get it to be sticky in both situations but without the hamburger menu expanding etc. This is the best I've got it so far basically. Below is the HTML:
<div class="header">
<div class="container">
<nav class="navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Company
</div>
<!--/.navbar-header-->
<div id="main-nav" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Contact</li>
<li>About</li>
<li>Testimonials</li>
</ul>
</div>
<!--/#main-nav.navbar-collapse-->
</nav>
<!--/.navbar-->
</div>
<!--/.container-->
and the javascript:
<script type="text/javascript">
$(document).ready(function() {
// navigation click actions
$('.scroll-link').on('click', function(event){
event.preventDefault();
var sectionID = $(this).attr("data-id");
scrollToID('#' + sectionID, 750);
});
// scroll to top action
$('.scroll-top').on('click', function(event) {
event.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
// mobile nav toggle
$('#nav-toggle').on('click', function (event) {
event.preventDefault();
$('#main-nav').toggleClass("open");
});
});
// scroll function
function scrollToID(id, speed){
var offSet = 50;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
$('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
mainNav.css("height", "1px").removeClass("in").addClass("collapse");
mainNav.removeClass("open");
}
}
if (typeof console === "undefined") {
console = {
log: function() { }
};
}
Sorry if I've explained anything badly. I attempted the navbar about a month ago and then gave up, so hopefully I've not forgotten anything.
Include 'navbar-fixed-top' class to the nav tag ie
<nav class="navbar-default navbar-fixed-top" role="navigation">
It will work fine.