I have php function calling 2 variables for controlling active links. I don't know is it written correctly and how to call it in my other script.
My function is in functions.php and my navigation is in nav.php. I includ both in index.php.
Function:
function active_links() {
// stranice = Active //
if (isset($_GET['poslovni_korisnici'])) {
$active1 = 'class="active"';
} else {
$active1 = '';
}
if (isset($_GET['korisnici'])) {
$active2 = 'class="active"';
} else {
$active2 = '';
}
}
nav.php
<body>
<!-- start body -->
<nav class="navbar navbar-default">
<!-- start nav -->
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="index.php">POSLOVNA STATISTIKA</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li ' . $active . '>Poslovni korisnici <span class="sr-only">(current)</span>
</li>
<li ' . $active . '>Korisnici
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
index.php:
<?php
require_once 'functions.php';
$dbh = connect_to_database();
$active = active_links();
include 'includes/head.php';
include 'includes/nav.php';
end active_links() with
return(array($active1,$active2));
then
$active = active_links();
$active will be an array with 2 variables to use:
$active[0] and $active[1]
Related
I have a nav bar that contains another page of my site, the page listed in the nav bar has a drop down list that is going to be linked to an accordion on the specific page. I'm having trouble implementing it, that if one of the drop down list items is click, then you will be taken to the page and the particular accordion linked to the item will be open.
For testing purposes I only have the nav bar list item "Monitoring" accordion linked right now; when I click "Monitoring" it takes me to the right page, but the accordion is still closed.
Here's my nav bar:
<nav class="navbar navbar-inverse navbar-fixed-top" style="background-color: #6F9824; text-align:center ">
<div class="navbar-header" align="center">
<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" style="color:white;" align="center"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="color:white;" align="center">
<li>
<a asp-page="/Index" style="color:white;">Home</a>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" style="color:white;">
Centrify
<span class="caret"></span>
<ul class="dropdown-menu">
<li>Centrify Home</li>
<li>Monitoring</li>
<li>Patching</li>
<li>Onboarding</li>
<li>Disaster Recovery</li>
<li>Reporting</li>
</ul>
</li>
</div>
</nav>
Accordion I'm trying to open:
<div id="Accordion1" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="2">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Vault Status
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="2">
<div class="card-block">
<div class="form-group">
<label for="exampleFormControlSelect2">Select Environment</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>RTP</option>
<option>OMA</option>
<option>BGI</option>
<option>BG2</option>
<option>CLD</option>
<option>WRKSTN</option>
<option>QA</option>
</select><br />
<button>Submit</button>
</div>
</div>
</div>
</div>
JavaScript:
$(function() {
$("#Accordion1").accordion();
});
function getParam(name) {
var query = location.search.substring(1);
if (query.length) {
var parts = query.split('&');
for (var i = 0; i < parts.length; i++) {
var pos = parts[i].indexOf('=');
if (parts[i].substring(0, pos) == name) {
return parts[i].substring(pos + 1);
}
}
}
return 0;
}
$(function() {
var defaultPanel = parseInt(getParam('panel'));
$("#Accordion1").accordion({
active: defaultPanel
});
});
I don't know if that's what's causing the problem, but the end of you'r <ul> and first <li> is missing on you'r first HTML code
How do you expect your accordion to work if there are no headers? According to jQuery UI documentation, your HTML should look something like
<div id="accordion">
<h3>First header</h3>
<div>First content panel</div>
<h3>Second header</h3>
<div>Second content panel</div>
</div>
but it does not. You need pairs header-content in order for it to work.
I wan't to add modal dialog as information box for how to use website. I have done code, it works, but my problem is that, I have multiple tabs in my browser, and my modal dialog is in default tab. When I change tabs and again come back to the default tab, the modal dialog is shown again. I want to show modal dialog only once when opening website.
<body onload="mumbai();">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span><img style="height:20px;width:20px;"src="http://cdn.9appsdownloading.com/group1/M01/35/1C/poYBAFcpqU-AFa5CAAAMm35WLrc217.png"></span><h3 style="display:inline;color:white">Urban Growth of Indian Cities</h3></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Mumbai</li>
<li class="divider"></li>
<li>Delhi</li>
<li class="divider"></li>
<li>Bengaluru</li>
<li class="divider"></li>
<li>Chennai</li>
<li class="divider"></li>
<li>Kolkata</li>
<li class="divider"></li>
<li>Hyderabad</li>
</ul>
</div>
</div>
</nav>
<div class="modal fade" id="memberModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<!--<h4 class="modal-title" id="memberModalLabel">Thank you for signing in!</h4>-->
</div>
<div class="modal-body">
<img src="images/Webmap_info_25_8_2017.png"></img>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('#memberModal').modal('show');
});
</script>
Finally solved problem.
$(document).ready(function() {
var yetVisited =sessionStorage['visited'];
if (!yetVisited) {
$("#Modal").modal("show").on("shown", function () {
window.setTimeout(function () {
$("#Modal").modal("hide");
}, 20000);
});
// open popup
sessionStorage['visited'] ="yes";
}
});
Thanks Patrick and ProEvilz.
You can use sessionStorage to identify that the user just visited your first site:
$(document).ready(function() {
var firstSite = sessionStorage['firstSite'];
if (!firstSite) { // or firstSite != "visited"
// some code here if the user is new to the site
$('#memberModal').modal('show');
sessionStorage['firstSite'] = "visited";
}
});
sessionStorage maintains a separate storage area for each given origin
that's available for the duration of the page session (as long as the
browser is open, including page reloads and restores)
Here's a jsFiddle to show how it works.
Try:
<script>
var visited = false;
$(document).ready(function () {
if (visited == false) {
$('#memberModal').modal('show');
visited = true;
}
});
</script>
I am creating a small homepage. Depending on the Navbar style (with or without hamburger menu) I want to display the span with id=actualPage. How can I achieve that (JQuery, JavaScript or even with CSS)? - I read a lot about collapse etc but I am not sure if this is the right approach and I have not found any easy solution.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<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 active" href="index.php?p=home">MyPage
<span id="actualPage">- <?= $pages[$activePage] ?></span></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
...
</ul>
</div>
</div>
</nav>
Thanks for your help!
Well, if memory serves, Bootstraps Nav collapses to a hamburger at 1200px.
If all you want is for the span to only be visible when uncollapsed just use css with something like:
.mySpan{ display: inline-block;}
#media (min-width: 1200px) { .mySpan{display: none;}}
If you need that ID for some kind of computation and want to to not EXIST then you'd have to use JS to add / remove the ID based on the screen being <1200px
EDIT:
For a JS solution it would be something like:
window.onresize = function() {
if (window.innerwidth<1200px){
document.getElementById("small").id = "big";
}
else{
document.getElementByID("big").id = "small";
}
};
I solved the given problem, by using the hidden classes. - It does not actually solve the question but the origin problem.
In Bootstrap 3:
<a class="navbar-brand active">Test<span id="actualPage" class="hidden-xl hidden-lg hidden-md hidden-sm">- <?= $pages[$activePage] ?></span></a>
In Bootstrap 4:
<a class="navbar-brand active">Test<span id="actualPage" class="hidden-sm-up">- <?= $pages[$activePage] ?></span></a>
Check the following link: Hidden-md-down is not working
Can't get my bottom div to show.
tried all the suggestions in SO from this year. Added a variable to $scope, tried $scope.apply(); , etc.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" ng-controller="navController">
<div class="navbar-header" >
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-collapse" ng-click="navCollapse()">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/#!/">Exampe</a>
</div>
<div class="cart-summary">
<a href="/#!/cart">
<image src="/example/source" />
<div class="cart-info">
<div class="item-count"><p>{{ ngCart.getTotalItems() }} <ng-pluralize count="ngCart.getTotalItems()" when="{1: 'item', 'other':'items'}"></ng-pluralize><p></div>
<div class="total-cost"><p>{{ ngCart.totalCost() | currency }}<p></div>
</div>
</a>
</div>
</nav>
<div ng-show="vm.open" class="half-menu" id="side-menu" >
<ul>
<li><button>Cart</button></li>
</ul>
</div>
In my navController:
console.log('navController up!');
$scope.vm = { open: false};
$scope.navCollapse = function(){
console.log('before click', $scope.vm.open);
$scope.vm.open = !$scope.vm.open;
// $scope.vm.open = ($scope.vm.open == false) ? true : false;
console.log('after click', $scope.vm.open);
//open up menu
};
I know the controller is loaded because the console log shows up.
You div seems to be outside of controller's scope. try wrapping whole thing in another div like this:
<div ng-controller="navController">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" >
<div class="navbar-header" >
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-collapse" ng-click="navCollapse()">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/#!/">Exampe</a>
</div>
<div class="cart-summary">
<a href="/#!/cart">
<image src="/example/source" />
<div class="cart-info">
<div class="item-count"><p>{{ ngCart.getTotalItems() }} <ng-pluralize count="ngCart.getTotalItems()" when="{1: 'item', 'other':'items'}"></ng-pluralize><p></div>
<div class="total-cost"><p>{{ ngCart.totalCost() | currency }}<p></div>
</div>
</a>
</div>
</nav>
<div ng-show="vm.open" class="half-menu" id="side-menu" >
<ul>
<li><button>Cart</button></li>
</ul>
</div>
</div>
Ofc, sometimes placing navigation menu and components, that are controlled by the menu into a single wrapper is not an option. In this case you may use services and $broadcast/$emit to communicate the changes.
https://plnkr.co/edit/xwQkUYrDu9WL9dC46MOY?p=preview
I am using twitters bootstrap to create a responsive site. I have a dropdown with quite a few links, when i'm in mobile view instead of making the nav collapse area bigger it creates a scrolling effect. Is there a way to make to the dropdown force the collapse nav div to increase in size or push my content down?
Here is the code i'm currently using.
<div class="row">
<div class="col-md-12">
<nav id="menu1" class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div id="logo" class="pull-left hidden-md hidden-lg">
<div class="logo-small">
<img src="<?php bloginfo('template_directory');?>/images/logo-xs.png" alt="small-logo" class="img-responsive"/>
<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>
</div>
</div>
</div>
<?php wp_nav_menu( array( 'theme_location' => 'main-menu',
'depth' => 2,
'container_class' => 'collapse navbar-collapse',
'menu_class' => 'nav nav-pills nav-justified',
'walker' => new wp_bootstrap_navwalker() )); ?>
</nav>
</div>
</div>
Try adding the following to your css.
.navbar-collapse{
max-height:auto;
}