I'm trying to have a button in my navbar that will make my sidebar come out when it's clicked.
I've already created the sidebar and its functional, but I want to link the sidebar to a button that is in the navigation menu.
You can Toggle the sidebar element on the navbar button click
For example, this is your navbar
<nav>
<button id="main"> Side</button>
</nav>
And this is your Sidebar
<div id="sidebar" style="display:none;">
</div>
The JS code
<script type="text/javascript">
$(document).ready(function () {
$("#main").click(function () {
$("#sidebar").toggle();
});
});
</script>
Related
I am using an iframe to display a php page. I used a script within the iframe that sizes it to the documents height. This allows the user to scroll the main window without having dual scroll bars on the page. I am using a bootstrap modal within the iframe to display an image. The issue is that when clicked the modal popup is displayed at the top center of the iframe. However if the user had to scroll down the list prior to clicking the 'show image' button, they wont find the popup unless they know to scroll all the way back to the top.
I have searched relentlessly for a solution to this within this site and google with no clear understandable answer. Hoping one of you experts can enlighten me.
Here is my modal code:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<img id="img" src="" width="100%" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Here is the script:
<script>
$(document).on('click', '.getinfoBtn', function(e){
var image=$(this).attr('data-image');
$('#img').attr('src', image);
return false;
});
</script>
Here is the iframe script used to get height of content to be displayed:
<iframe id="form-iframe" src="rooz/on-tap.php" style="margin-top:20px; width:100%; height:150px; border:none; overflow:hidden;" scrolling="no" onload="AdjustIframeHeightOnLoad()"></iframe>
<script type="text/javascript">
function AdjustIframeHeightOnLoad() { document.getElementById("form-iframe").style.height = document.getElementById("form-iframe").contentWindow.document.body.scrollHeight + "px"; }
function AdjustIframeHeight(i) { document.getElementById("form-iframe").style.height = parseInt(i) + "px"; }
</script>
As stated previously, this code works but pops up the image at the top center of the iframe. I would really like it to either pop up near the button clicked or at least visible.
In my case, using Bootstrap 3.4, what I could make is to catch the show.bs.modal event and setup its position according the click. To avoid the glitch effect, I hide the modal and show it after move it.
I didn't find the way to parametrize the modal in its creation to set it up, instead of enforce it.
$('#theModalDiv').on('show.bs.modal', function (event) {
const modalWidth = 600; // Because #attendeesModal has no lg nor sm size
// and by default, bootstrap modals has 600px width
const target = $(event.relatedTarget);
let newLeft = (document.getElementById('iframe-content-body').offsetWidth/2) - (modalWidth); // Centering the modal
const modal = $(this); // Getting modal instance
modal.css('opacity', '0'); // Hidding modal
// After some time...
setTimeout(() => {
modal.offset({
// ...setting new modal position
...target.offset(),
left: newLeft,
});
// ...setting same top position as the click
$('.modal-dialog').css('margin-top', 0);
// ...displaying again the modal
modal.css('opacity', '1');
}, 500); // This value was taken with rule of thumb
});
I hope someone can find this usefull.
I am using bootstrap modal dialog. I need to change it so that the modal appears quickly without any animation. But when it closes, it should fade out slowly. so, that the animation is visible.
Below is my html code for the popup.
<div class="modal" id="pleaseWaitPopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body text-center">
<p><i class="fa fa-spinner fa-5x fa-spin fa-pulse" aria-hidden="true"></i></p>
<p class="light-gray-pop"> Processing Your Request.</p>
<h3> PLEASE WAIT</h3>
</div>
</div>
</div>
</div>
and below is the js for showing the modal dialog.
$('#pleaseWaitPopup').modal({
backdrop: 'static',
keyboard: false
});
You can try adding/removing the class="fade" for the bootstrap modal. Remove the fade animation right before the modal is shown and then add it back once the modal is displayed:
// Remove the fade animation for the modal before the modal is shown
$('#pleaseWaitPopup').on('show.bs.modal', function () {
$(this).removeClass('fade');
})
// Add the fade animation for the modal once the modal is shown
$('#pleaseWaitPopup').on('shown.bs.modal', function () {
$(this).addClass('fade');
})
$('#pleaseWaitPopup').modal({
backdrop: 'static',
keyboard: false
});
Here is a bootply
http://www.bootply.com/USl2vMXKCj
I added temporary close and open buttons to be able to toggle the modal but feel free to remove them as needed/
I´m using bootstrap3 and I´m trying to create a fixed menu for mobile devices. This menu can have submenu´s and submenu´s can have a lot of content in it. So when you watch the site on mobile phone´s (320x480 eg) and the menu is very long then you can´t scroll in the inner/submenu. In other words if your screen height is too short you can´t see all the menu items because the menu bar is sticked at the top of the screen.
I´ve read a lot of post from github and here + Bootstrap's page, but can´t seem to get it to work. I think that position fixed is the problem?!
I'll try to explain with a fiddle and here below
EDIT: You can view an example here -> example (resize browser and try to hit brands)
HTML
<div id="main-nav-container">
<div class="container">
<div class="row">
<div class="col-md-12 clearfix">
<nav id="main-nav">
<div id="responsive-nav">
<div id="responsive-nav-button">
Menu <span id="responsive-nav-button-icon"></span>
</div><!-- responsive-nav-button -->
<ul class="clearfix responsive-nav">
<li><i class="fa fa-home"></i></li>
<li><span class="menu-button"></span><a title="Camera" href="http://www.webshop.com/nl/camera/">Camera</a>
<ul>
<li><a title="Canon" href="http://www.webshop.com/nl/camera/canon/">Canon</a></li>
<li> like 40 li items more for example </li>
</ul>
</li>
etc...
JQUERY
$(function() {
var sticky_navigation_offset_top = $('#main-nav-container').offset().top;
// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
// if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
if (scroll_top > sticky_navigation_offset_top) {
$('#main-nav-container').css({ 'position': 'fixed', 'top':0, 'left':0 });
} else {
$('#main-nav-container').css({ 'position': 'relative' });
}
};
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
});
So how can I make the menu so that the with the li items is scrollable so that on smaller screens the whole submenu can be viewed?
I have a dropdown menu:
<div class="buttons">
<div class="dropdown">
<span class="label">File</span><span class="toggle"></span>
<div class="dropdown-slider">
<span class="label">New</span>
<span class="label">Save</span>
</div> <!-- /.dropdown-slider -->
</div> <!-- /.dropdown -->
</div>
And here is js code:
<script>
$(document).ready(function() {
// Toggle the dropdown menu's
$(".dropdown .button, .dropdown button").click(function () {
$(this).parent().find('.dropdown-slider').slideToggle('fast');
$(this).find('span.toggle').toggleClass('active');
return false;
});
});
// Close open dropdown slider by clicking elsewhwere on page
$(document).bind('click', function (e) {
if (e.target.id != $('.dropdown').attr('class')) {
$('.dropdown-slider').slideUp();
$('span.toggle').removeClass('active');
}
});
</script>
If I put the two menus (one above other) I'll get popup menu below the second menu line.
How can I fix it?
Adding z-index:999; to div.dropdown-slider should fix your problem pretty quickly.
I'm using several WordPress loops and jQuery UI Tabs that result in the Main tabs and entry-content div markup below. The WordPress loops generate the "entry-post" markup in each tab div, but I'm not showing the php, as the resulting html markup in each tab div is the important part.
I'm also using a bit of jQuery to independently expand/collapse each entry-content div:
$(".entry-content").hide();
$(".entry-title").click(function() {
$(this).parent().children(".entry-content").slideToggle(500); });
What I've found is that each of the entry-content divs keeps their expanded state when switching tabs, i.e. if some of the entry-content divs are expanded in tabone and I switch to tabtwo and then back to tabone, they're still expanded in tabone.
What I need to do is collapse all the entry-content divs in a tab when a tab is changed. Below is the tab init and also the fx to change the tabs.
What do I need to add to this function to collapse all the entry-content divs when a tab is changed?
$(document).ready(function(){
var $tabs= $("#tabs").tabs();
});
$(function() {
$('#tabs').tabs({
fx: { opacity:'toggle' }
});
});
Main tabs and entry-content div markup:
<div id="tabs">
<ul>
<li>tabone</li>
<li>tabtwo</li>
<li>tabthree</li>
</ul>
<div id="tabone">
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
</div>
<div id="tabtwo">
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
</div>
<div id="tabthree">
....
</div></div>
The following code should collapse all .entry-content divs whenever a new tab is selected:
$(document).ready(function() {
var $tabs= $("#tabs").tabs({
fx : {
opacity: 'toggle'
},
select : function(event, ui) {
$(".entry-content").hide();
}
});
});
$("div.post [name^="entry-title"]").hide();
should do what you're wanting when attached next to your fx.
or:
$("#tabs a").click(function () {
$("div.post [name^="entry-title"]").hide();
});
I'm not sure i understand you're question completely. But if you wan't to check whether the tab is triggered or not, try use this:
$( ".selector" ).tabs({
show: function(event, ui) { ... }
});
Simplified how you could collapse all divs with class "entry-post", whenever the tab is showed:
$(document).ready(function(){
var $tabs = $("#tabs").tabs({
show: function(){
$('.entry-post').hide();
}
});
});
I'm not a jQuery expert, so here's straight javascript. Might at least help solve the problem...
Since you don't care what tab a div is on (since all divs should be hidden when a tab is changed) you could simply hide all divs on the page every time a tab is changed, regardless of what tab it's on.
var divList = document.getElementsByClassName("entry-content");
for(var divitem in divList){
divitem.style.display = "none";
}
I wish my jQuery was stronger so I could give it in that, but it may help...
Edit:
Just looking at what your example code, I guess something like this in jQuery:
$("#tabs a").click(function() { $(".entry-content").hide(); });
Something that closes all entry-content class divs when any tab is clicked.
You may want to make use of the existing jquery UI tabs library and this will solve a lot of your problems.
http://jqueryui.com/demos/tabs/
Using this will allow you to make a better association between your list items and the divs they are controlling. Add the reference in your header
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
or download it and remove what you don't need. Add the following to your CSS
.ui-tabs .ui-tabs-hide {
display: none !important;
}
and change your references so they are in keeping with the jqueryUI specification
<div id="tabs">
<ul>
<li>tabone</li>
and then the div ids to match
<div id="tabs-1">
<div class="entry-post">
this should make the association. You can then add the controlling behaviour so it should read
$(document).ready(function(){
$(function() {
$('#tabs').tabs();
});
and that will do away with the need to store the array of divs
you can then bind a function to the tabselect event which will hide the divs you want to collapse
$('#tabs').bind('tabsselect', function(event, ui) {
$('#tabs').children().not(ui.panel).children().children(".entry-content").hide();
});
your code should then read:
<head>
<title>Collapse Divs</title>
<style type="text/css">
.ui-tabs .ui-tabs-hide {
display: none !important;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$('#tabs').tabs();
});
$('#tabs').bind('tabsselect', function(event, ui) {
$('#tabs').children().not(ui.panel).children().children(".entry-content").hide();
});
$(".entry-content").hide();
$(".entry-title").click(function() {
$(this).parent().children(".entry-content").slideToggle(500);
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>tabone</li>
<li>tabtwo</li>
<li>tabthree</li>
</ul>
<div id="tabs-1">
<div class="entry-post">
...
<h1 class="entry-title">Title 3.3</h1>
<div class="entry-content">Lorem ipsum...</div>
</div>
</div>
</body>