After opening popup, want to disable the background in jquery reveal modal. Please look at the following fiddle. In this fiddle it is working, but it has taking the whole screen. I want to set it as inside the particular div.
$(function () {
$(document).foundation();
$('ul.f-dropdown li a').on('click', function (event) {
console.log('Dropdown clicked', event.target);
$('.reveal-modal').foundation('dropdown', 'closeall');
});
});
.generation .reveal-modal {
background-color: red;
}
.generation{
width:700px;
height:400px;
background:lightgreen;
}
Click Me For A Wonky Modal
<div class='generation'>
<div id="myModal" class="reveal-modal" data-reveal>
<h2>Wonky Dropdown Dialog</h2>
Has Dropdown
<ul id="drop1" class="f-dropdown" data-dropdown-content>
<li>This is a link
</li>
<li>This is another
</li>
<li>Yet another
</li>
</ul> <a class="close-reveal-modal">×</a>
</div>
</div><!-- / .generation -->
<hr/>
Click Me For A Working Modal
<div id="myWorkingModal" class="reveal-modal" data-reveal>
<h2>Working Dropdown Dialog</h2>
Has Dropdown
<ul id="drop1" class="f-dropdown" data-dropdown-content>
<li>This is a link
</li>
<li>This is another
</li>
<li>Yet another
</li>
</ul> <a class="close-reveal-modal">×</a>
</div>
Please check this fiddle and help me for do this.
I don't believe a modal dialog is the appropriate element to use in this situation. A modal dialog is normally used to grab the user's attention and have them perform a global action, such as a confirmation message for deleting something. I'm not sure what you are trying to accomplish with your modal, but I would suggest going for more of a simple show/hide section. This way, it can be placed within the context of your content block. Foundation's modals are always going to be positioned relative to the viewport, not to a specific container.
Check out this article on how modals and overlays are best used: https://www.nngroup.com/articles/overuse-of-overlays/
Related
I have a side-menu on my bootstrap webpage which is open by default.
If the screen is too small there is a button placed behind it to open the menu again.
When a user clicks on a link I would like the menu to close automatically.
The button I already have opens the menu perfectly, but I have no way of closing it?
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand"><img src="/content/img/AAA.png" width="27px" />Menu</li>
<li data-ng-hide="!authentication.isAuth">Welcome {{authentication.userName}}</li>
<li data-ng-hide="!authentication.isAuth">Page1</li>
<li data-ng-hide="!authentication.isAuth">Logout</li>
<li data-ng-hide="authentication.isAuth"><span class="glyphicon glyphicon-user"></span> Login</li>
<li data-ng-hide="authentication.isAuth"><span class="glyphicon glyphicon-log-in"></span> Sign Up</li>
</ul>
</div>
</div>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">
Menu
</a>
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
You could add in another event handler for the a elements.
$(".sidebar-nav li a").click(function() {
$("#wrapper").removeClass("toggled");
});
Here are a few things that you could do:
You could use hide/show with jQuery(I can see you are already using it).
Instead of makeing a "toggled" class, Bootstrap has a built in "hidden" class that you could use.
You could also toggle it's css "display" value.
You could use the "animate" class to slide the menu on and off the screen.
You could have a variable to store the state of the menu("true" for out, "false" for in), and change it when the toggle button is clicked.
I had a similar issue, and I placed a close button on the menu, and added a seperate click handler that would close the menu. The close button would then hide with the menu, leaving just the button to open the menu again.
I want my dropdown menu header to both open the related menu and show directly the content of the first element of the submenu which is actually an anchor link in the page.
Here is the HTML code of the Dropdown Menu:
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
Menu
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li>submenu1</li>
<li>submenu2</li>
</ul>
</li>
</ul>
</div>
This is the HTML code of the anchored link:
<div id="myNavbar" class="tab-content">
<div class="tab-pane fade" id="submenu1">
<p>submenu1</p>
</div>
</div>
And this is the JS code I'm trying to use with no success. It works if I write a whole URL like "www.google.com" but not with "#submenu1".
$(document).ready(function() {
$('.dropdown').on('click', function () {
window.location="#submenu1";
});
});
you can try with
location.hash=anchorname
location.hash = "Submenu15";
var x = "The anchor " + location.hash;
document.getElementById("demo").innerHTML = x;
fiddle link http://jsfiddle.net/420rL0h2/
Try using the window.location.hash instead?
window.location.hash=anchorname;
Edit
You're using Twitter bootstrap right? The tabs won't be visible until the active class is added, and since you have a fade class too, I think you'll also need the 'in' class... Try this JS:
$('.dropdown').on('click', function () {
// Remove any active classes from the tabs
$('.tab-pane').removeClass('active in');
// Set the specific #submenu1 to be active
$('#submenu1').addClass('active in');
// Scroll the window down to the tabs that are now visible
window.location.href="#submenu1";
});
I'm not entirely sure what you're trying to achieve though, the links in the dropdown should do the displaying for you... but if you're just trying to force a specific tab to be open when you first click the nav dropdown, then this should do the trick.
Is there a way to do the following
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
<div class="tab-pane" id='extra'> .... </div>
</div>
so there is another tab pane called #extra, but I don't want it to have a link as a tab, but I do want it to be toggleable by some other event
as bootstrap tabs.js works from trigger a tab('show') on a link and not on the pane itself, how do I trigger a tab pane without working on a tab?
note: I aware that the basic operation it does it doing a show() and hide() on the tab pane, but I feel that doing all this manually inhibits me from using callbacks, etc
You could add the tab for extras and then just hide it
Add this to your nav-tabs:
<li class="hidden"><a href="#extra" role="tab" data-toggle="tab" >Extra</a></li>
Then activate from somewhere else with JavaScript:
$("#launchExtra").click(function() {
$('#myTab a[href="#extra"]').tab('show')
});
Working demo in jsFiddle
Alternatively, you could just handle the whole thing yourself. The only thing .tab('show') does is remove the active class from all the other nav-tabs and tab-content elements. And then add back the .active class on the appropriate elements.
So first remove all the active elements and then add back the active class:
$("#launchExtra").click(function() {
$(".nav-tabs .active, .tab-content .active").removeClass("active");
$("#extra").addClass("active");
});
Working demo in jsFiddle
Create a link in memory and call the tab function on it.
$('<a data-toggle="tab" data-target="#some-id"></a>').tab("show")
an anchor link is used when you want to navigate. If you dont want to navigate, use a button. But style it like a link.
<ul class="nav nav-tabs">
<li role="presentation" class="active">
<button class="btn btn-sm btn-link">Tab1</button>
</li>
</ul>
nows its a button and will not navigate. Just add any javascript you want to it.
But I recommend to use the anchor. Javascript tabs dont support history back in the browser. And its often tricky to start with ex. tab number 4 selected. I often let every tabpage be an own page. With its own route
I am using simpelmodal to create dialog in jquery, but now the issue is in one of my html page i am adding
li elements dynamically , and when on a click of a button i try to fire $("attachment-modal-content").modal() dialog box doesnt appear until i again tap over a screen or move the screen. as soon as i move the screen it appears.
notable things is that if i dont load any li elements in the page , it popups normally.
here is the example page , initially attachment-modal-content is set to display:none
<div>
<a href="#" id="openDialog" />
<ul id="mylist">
</ul>
<div id="attachment-modal-content">
<h3>Attachment</h3>
<ul class="attachment">
<li id="imageBtn" class="green"><em><i class="fa fa-camera"></i></em><span>Image</span></li>
<li id="audioBtn" class="red"><em><i class="fa fa-volume-up"></i></em><span>Audio</span></li>
<li id="videoBtn" class="yellow"><em><i class="fa fa-video-camera"></i></em><span>Video</span></li>
<li id="linkBtn" class="blue"><em><i class="fa fa-link"></i></em><span>Link</span></li>
</ul>
<ul class="attachList">
</ul>
</div>
</div>
</div>
button code
$("#openDialog").on('click',function(){
$("#attachment-modal-content").modal();
});
once i load the date using $('#mylist').append('<li><li>') , dialog wont appear on a first button click , it appears
when i move the screen.
I am working on jquery. I have 4 tabs within the <li> tags. I have used jquery 1.9.1.js for my project. my <li> looks like the one below. I got a solution to use http://www.asual.com/jquery/address/docs/#api-reference. But the fact is that I have used and imported this external lib but it doesn't seem to work. The thing which i am trying to attain is when ever I select the specific <li> item and press f5 the page by default loads the first <li> item. But the thing which I am looking for is , it has to load the same selected <li> item and its contents when refreshed. any help would be appreciated.
Here is my HTML code:
<div class="container">
<div class="coolbar">
<div class="cool-inner">
<ul id="mybar" class="nav cool-tabs">
<li class="Coke">
Coke <span class="dashboard-bottom"></span>
</li>
<li class="Fanta">
Fanta<span class="Pricing-bottom"></span>
</li>
<li class="Pepsi">
Pepsi<span class="Promotion-bottom"></span>
</li>
<li class="Limca">
Limca<span class="Product-bottom"></span>
</li>
</ul>
</div>
</div>
</div>.
<div id="login">
<button type="button" id="submit" value="Login" class="btn">Click me for cool drinks</button>
</div>
And my jquery code for page refresh:
$(function() {
$('#submit').click(function() {
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
Thanks in advance.
when activating the tab you may want to set the tabs position/value in the cookie and when the page loads, check if tabs position/value exist in the cookie, then accordingly activate that tab or trigger click event on that tab.
may this help