We Keep Coding

Event that triggers once an element is made visible

I have multiple bootbox dialog boxes in my project and I want all of them to appear at the center of the screen, I cannot individually go and calculate the height of each box and position it at the center when the modal shows. Is there a common way to do this. Is there a way to trigger an event when the bootbox is made visible, I tried 'DOMNodeInserted', but this gives recursive error also tried livequery but this did not work. Can anyone tell me how to trigger an event when a dialog box is made visible at a common point.
jQuery(document).on('DOMNodeInserted', function(e) {
if(jQuery(e.target).hasClass('modal')) {
setTimeout(function(){
if(jQuery(e.target).height()/2 > 1){
var topPos = ((jQuery(window).height() - 30)/2) - jQuery(e.target).find('.modal-dialog').height()/2;
jQuery('.modal-content').css('top', topPos);
}
},200);
}
});
Regards,
Neha

try this code
.on("shown.bs.modal", function(e) {
alert("bootbox is visible");
});
DEMO
updated
align bootbox at center
.on("shown.bs.modal", function(e) {
$('.modal-content').css({
'transition':'margin-top 1s linear',
'margin-top': function (){
var w = $( window ).height();
var b = $(".modal-dialog").height();
var h = (w-b)/2;
return h+"px";
}
});
});
DEMO

Bad idea: Responsive menu with resize()?

Is it a bad idea to use jquery's resize() event to toggle an responsive menu?
Okay it's actually not an menu but the idea is almost the same:
I have an sidebar with 4 boxes with different informations. Below a specific device-width I move the sidebar to another place. Now each box is hidden and a <selection> shows up. When the selection changes it'll show the selected box.
$("#my_selection").change(function () {
$.each(all, function () { // "all" are just my boxes
$(this).hide();
});
var val = "#my_box_" + $(this).val();
$(val).show();
});
I hope the concept is clear so far.
So but what happens when the user resizes the window? (aka changing orientation on mobile devices) Right:
Reducing width: Hide boxes
Increasing width again: Boxes are still missing
So.. that sucks. That's my solution:
$(window).resize(function () {
currentDisplay = $('#my_selection').css('display');
if (currentDisplay == lastDisplay)
return;
lastDisplay = currentDisplay;
if (currentDisplay == "none") {
$.each(all, function () {
$(this).show();
})
} else {
$.each(all, function () {
$(this).hide();
})
}
});
But I kinda have the feeling that this is a bit hacky, no? So - are there better solutions for this problem?
Here a simple sketch showing the design I've tried to explain.

Dreaded 100% Sidebar Height - jQuery Fix, but another issue arises

So I'm currently coding a UI and it's responsive so the sidebar has to be position: absolute to get 100% height.
I used jQuery to fix the height issue for pages extending further then the original 100% of the page.
Here is the jQuery:
<script>
if (document.documentElement.clientWidth > 959) {
$(document).ready(function () {
$(window).resize(function () {
var bodyheight = $(document).height();
$(".site-sidebar").height(bodyheight);
});
$(window).ready(function () {
var bodyheight = $(document).height();
$(".site-sidebar").height(bodyheight);
});
});
}
</script>
Now.. The issue is with a page that has tabs and the last tab is longer then the "active" tab so the height isn't be adjusted correctly.. So when you click the last tab theres a white space below the sidebar.
Heres a screenshot of what I mean: https://www.dropbox.com/s/i64vm9pf15kqlo1/Screenshot%202015-02-17%2016.20.46.png?dl=0
I think I need to adjust the code so that when a tab is clicked, it will "reload" that script. However, my jQuery is limited and don't know how to go about it. Please help :) I will love you forever.

<script>
function resizeSidebar() {
if (document.documentElement.clientWidth > 959) {
var bodyHeight = $(document).height();
$(".site-sidebar").height(bodyHeight);
}
}
$(document).ready(function() {
resizeSidebar();
}
</script>
If you're using jQuery UI's tabs, add this:
$( ".selector" ).on( "tabsactivate", function( event, ui ) { resizeSidebar(); } );
Replacing .selector with what's appropriate for your HTML. Otherwise, you'll need to bind resizeSidebar to the click event of your tabs.

On click add/remove overflow hidden

I'm trying to add/remove .css('overflow-y','hidden') onclick, Which I did. The problem appears when I try to remove that css, also onclick. But this time, user needs to click on another element.
Idea is to have modal (twitter bootstrap 2.3) window where there is some data and when user click on modal button (triggers) the css applies to html element in order to prevent scrolling of the website. And now when I click anywhere on modal (modal shuts down) but there is still overflow-y styling and because of it I can't scroll my page.
So this is what I've made, but I have been stuck here and don't know where I am making mistake. Could anyone help me with this one, and if is possible give me some advice so I could take care in future.
Thanks!
<script type="text/javascript">
$('#myModal').modal('hide') // initializes and invokes show immediately</p>
$('.note').delay(10000).fadeOut('slow');
$(document).ready(function() {
var $html = $('html');
var $button = $('.container > .btn-primary');
var $modal = $('.modal-backdrop');
$button.on('click', function(e) {
$html.css('overflow-y', 'hidden');
if ($html.attr('style')) {
alert('WORKS!');
}
else {
$modal.onclick( function() {
$html.css('overflow-y','scroll');
});
};
});
});
</script>

Put your css in a class and use jquery's .toggleClass() to show/hide the overflow.
Here's a simplified example: http://jsbin.com/towiyaqa/1/

You can use like this:
$button.on('click', function(e) {
$html.css('overflow-y','hidden' ? 'scroll' : 'hidden');
e.preventDefault();
})

Here is solution for problem:
$(document).ready(function() {
var $html = $('html');
var $button = $('.container > .btn-primary');
var $modal = $('.modal-backdrop');
$button.on('click', function(e) {
$('.note').delay(10000).fadeOut('slow');
$html.css('overflow-y', 'hidden');
if ($html.attr('style')) {
console.log("overflow-y: hidden added");
}
});
$('#myModal').on('hidden.bs.modal', function () {
// do something…
console.log("fires myModal");
$html.css('overflow-y','scroll');
});
});
</script>

Bootstrap: scrollspy doesn't work after I've added smooth scrolling

I'm building a site using Twitter Bootstrap, and I got the scrollspy to work, using the below javascript:
$('body').scrollspy({ target: '.navbar' })
But it stopped working for me, after I add the script to enable smooth scrolling:
<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();
$('#bs-example-navbar-collapse-1').toggleClass("open");
});
});
// scroll function
function scrollToID(id, speed){
var offSet = 70;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#bs-example-navbar-collapse-1');
$('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() { }
};
}
</script>
I'm thinking I must have added the scrollspy in an incorrect position. I have very little knowledge of javascript. If someone can point me the way to inserting it in the correct order/space/line, that would be great!
Thanks in advance!

You may want to use a third party plugin such as jquery.localScroll (which relies on jquery.scrollTo). It provides great smooth scrolling and is easy to implement. A lot easier than reimplementing the wheel.
https://github.com/flesler/jquery.localScroll