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>
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.
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 ASP.NET MVC 5. Here, when i click on the search bar it calls the java script function, and when i provide the searchString value to the form, and click SUBMIT, it doesn't submit anything. Why is that?
<script>
$(function () {
$('a[href="#search"]').on('click', function (event) {
event.preventDefault();
$('#search').addClass('open');
$('#search > form > input[type="search"]').focus();
});
$('#search, #search button.close').on('click keyup', function (event) {
if (event.target == this || event.target.className == 'close' || event.keyCode == 27) {
$(this).removeClass('open');
}
});
});
</script>
View:
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#if (Request.IsAuthenticated)
{
#Html.ActionLink("TimeEntry", "Index", "TimeEntry", null, new {#class = "navbar-brand"})
}
else
{
#Html.ActionLink("TimeEntry", "Login", "User", null, new {#class = "navbar-brand"})
}
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Clock In/Out(WIP)", "Index", "TimeEntry")</li>
<li>#Html.ActionLink("Time Summary", "BackEnd", "TimeEntry")</li>
<li>#Html.ActionLink("Users", "Index", "User")</li>
<li>Search</li>
</ul>
<ul class="nav navbar-nav navbar-right">
#if (Request.IsAuthenticated)
{
<li> #Html.ActionLink("Log Out", "Logout", "User")</li>
}
</ul>
</div>
</div>
</div>
<div id="search">
<button type="button" class="close" style="padding-top: 35px">x</button>
#using (Html.BeginForm("Search", "User", FormMethod.Get))
{
#Html.TextBox("searchString","", new {#placeholder = "Search by First Name"})
<button type="button" class="btn btn-primary">Search Rando</button>
}
</div>
<div class="container body-content">
#RenderBody()
<hr/>
<footer>
<p>© #DateTime.Now.Year - My TimeClock Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
This line is cancelling the default event action. Take it out to allow the form to submit.
event.preventDefault();
This will allow the form to submit. Although the other two lines in that function will no longer serve any purpose, since they are modifying the state of the document, but the browser will navigate away from the document as soon as the form submission happens.
<button type="button" class="btn btn-primary">Search Rando</button>
should be changed to
<button type="submit" class="btn btn-primary">Search Rando</button>
by altering the type to submit
I have made a collapsed navbar on the outside clicking navbar element using bootstrap, and it worked
but when I megganti navbar element with input form, this is not the way I want
because when I would fill out the form navbar automatically collapse before I finished it
This is the code that I created: http://jsfiddle.net/acile/3cbje867/
HTML code:
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a 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>
</a>
<a class="navbar-brand" href="/">Application</a>
</div>
<div class="navbar-collapse collapse navbar-search">
<ul class="navbar-nav nav menu menu-main-menu">
<li>
<div class="input-group">
<input id="search-input" class="form-control" type="text" placeholder="Search" tabindex="1" autocomplete="off">
<div class="input-group-btn">
<button id="search-button" class="btn btn-primary" tabindex="2"><span class="glyphicon glyphicon-search"></span></button>
</div>
</input>
</div>
</li>
</ul>
</div>
</div>
javascript code:
$(document).click(function (event) {
var $navsearch = $(".navbar-search");
var _opened = $navsearch.hasClass("in");
if (_opened === true) {
$navsearch.collapse('hide');
}
});
help me please, how can i fix it ?
You need to determine whether you are clicking inside of the element or not.
Use $(e.target).closest($navsearch).length to check whether the click event occurs inside of $('.navbar-collapse.navbar-search').
Updated Example
$(document).on('click', function(e) {
var $navsearch = $('.navbar-collapse.navbar-search');
if(!$(e.target).closest($navsearch).length && $navsearch.is(':visible')) {
$navsearch.collapse('hide')
}
})
Bootstrap's navigation has already the collapsed functionality in-built so you don't have to re-write it. You could manually hide the search bit using some jQuery:
http://jsfiddle.net/1p8p0dnf/5/
$('#search-button').on('click', function() {
// Remove collapsed class
$('#search-nav').removeClass('in');
// Clear search input text
$('#search-input').val('');
});
Using this thread I carried out my header into the individual html file
header.html:
<div class="navbar navbar-default navbar-fixed-top" id="top" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" 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 class="navbar-collapse collapse" role="navigation" style="height: auto;">
<ul class="nav navbar-nav">
<li>Page1</li>
<li>Page2</li>
</ul>
</div>
</div>
</div>
and included it in my index.html.
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){
$("#navbar-header").load("header.html");
$("#footer").load("footer.html");
});
</script>
and
<div id="navbar-header"></div>
My question is, how to apply 'active' class on selected page (page1 and page2)?
<li class="active">Equator Server</li>
You can call a jQuery Click() event on target element by adding a click event listener on source element (an element which should activate a link on another html).
$('.icon-bar-1').on('click', function(){
$('.page-1').click(function(){/* code to perform on targetted click listener */});
});
It is possible to use jQuery's .addClass(), using specific class in the html,
for example
HTML-file to add menu
<div class="class1" id="navbar-header"></div>
separate file with header
$(document).ready(function () {
if ($( "#navbar-header" ).hasClass( "class1" )) {
$("#id-to-add").addClass("active");
}
});