We Keep Coding

AngularJS - show preloader instead of ng-cloak

I have created a preloader which works fine when loading the page first time:
http://vivule.ee/1
However, when navigating inside the page, the loader does not work as intended. You can see this very well when using FF. Instead of the loader it just displays empty background. I'm using ng-cloak, without it, instead of empty background it would show the content loading tags {{}}.
My loader works as follows - display loader until content is loaded, then hide loader with ng-hide. Can I instead of using ng-hide, somehow listen for ng-cloak, like when ng-cloak is activated it shows the loader and when content is loaded it hides it, because right now ng-clock seems to load BEFORE ng-hide.
Sorry if too confusing question :/
PS! To navigate inside the page scroll down to similar games and click on one.

I wasn't able to solve the problem using ng-cloak, instead I did this - the loader is displayed by default on the page. When angular loads the data I send jquery command to hide the loader (this is done in the myapp.controller). When I navigate inside the page, I unhide the loader with jquery(code is again in the myapp.controller) - NOTE! I unhide it BEFORE the new page is loaded.
Hide and unhide is done with simple display:none and display:block (unhide is done using jquery click).
$(".single_similar_game_container").click(function(e) {
if (e.button == 0) {
$("#spinner_bg").css("display", "block");
}
});

Please note, you can overwrite Angular's CSS classes and use the ng-cloak class to display page elements. For example:
body div.wrap.ng-cloak div.preloader { display: block !important; }
body div.wrap.ng-cloak div:not(.preloader) { display: none!important; }

Opening a boostrap modal after closing another - unexpected behavior

I want to show a bootstrap modal immediately after user close another. So I use the following code trying to do this:
currentModal.modal('hide').on('hidden.bs.modal', function (){
nextModal.modal('show');
});
Everything happens normally. First modal closes and next modal appears.
However, the class="modal-open" should be in body element to scroll works properly, what is not happening. After second modal is shown, that class disappears from body.
Am I doing something wrong?

Am I doing something wrong?
I don't think so. The large number of issues on this topic suggests that this was either not well-designed, or not designed to support this. Relevant bugs would be
Multiple modals fix #5022, Multiple modals #11872 and
.modal-open is not applied to body when "switching" to another modal #11865 where it is explicitly said by #mdo:
Yup, we won't be supporting multiple modals.
So what to do about it?
A small timeout should definitely help:
currentModal.modal('hide').on('hidden.bs.modal', function (){
setTimeout(function() {
nextModal.modal('show');
}, 100);
});

Without seeing this in action, my guess is that there is some kind of callback handler that removes the class "modal-open". You can try manually adding it like this:
currentModal.modal('hide').on('hidden.bs.modal', function (){
nextModal.modal('show');
body.addClass('modal-open');
});
But instead of overriding Bootstrap, have you looked into data-dismiss and data-target?

Tab navigation with twitter bootstrap

I'm trying to create a navigation step by step from bootstrap nav. I would like that the user could only access the next tab by clicking the button at the bottom of each tab.
I've tried adding the class disabled and some JS but despite the change of style your content remains accessible. If any of you have done something similar or know another easier method (plug-in or other), please do not hesitate to respond.
My code example
Thanks in advance.

You can try one of the "wizard" plugins for this functionallity. I've tried the https://github.com/VinceG/twitter-bootstrap-wizard
You can set it up, in a way, that clicking on tabs will have no effect:
onTabClick: function (tab, navigation, index) {
return false;
}

Twitter Bootstrap Modal scrolling the page up on show

Clicking on a link which triggers a Twitter Bootstrap Modal to pop up is causing the browser to scroll up the page. This behavior is only occurring in Chrome.
Here is a demonstration page:
http://www.turizmburosu.com/test2.aspx
The page has 600 rows of links, causing the page body to exceed window height. If any of these links is clicked, it displays the modal dialog. When in Chrome, clicking any of the links below the initial view will cause the background page to scroll up (not always entirely to the top).
I am use the following function to trigger the display of the Modal:
function test(id, imp) {
$("#modalLabel").html("Header");
$("#modalBody").html("Body");
$("#myModal").modal("show");
}
and the links are of the form:
Test Link ###
I am seeing this behavior in Chrome 22.0.1229.94 m.
Any suggestions/ideas as to why this is happening and how to prevent it?
Additional Example
This can be recreated on the Twitter Bootstrap documentation page for the Modal plugin.
Once on the page, simply override the existing data-api to use the JavaScript api instead:
$('#modals a[data-toggle="modal"]').on('click',
function(e) {
$('#myModal').modal('toggle');
return false
});
Now, if the Launch Demo Modal button is clicked, the page will scroll up when the modal is shown.
Again, this is using Chrome.

Fixed (10/29/2012)
This issue has been fixed since Bootstrap v2.2.0. See commit e24b46... for details.
(original answer)
This is due to a bug in the implementation of the Twitter Bootstrap Modal (as of 2.1.1). The root of the problem is that the focus is set to the modal prior to it completing its transition. This will only occur under the condition that
the browser supports CSS transitions (and you are using bootstrap-transition.js);
the modal has the class fade; and
when focus is set to an element outside the current view, the browser will scroll to move it into view (e.g., Chrome, Safari).
It should be noted that this affects both the Data API (markup-based) and the Programmatic API (JS-based). However, the reason it is more noticeable when taking the programmatic approach is because, unlike the Data API, it does not automatically restore focus to the triggering element, and, hence, does not scroll the view back down when the modal is hidden.
More info is available on the Twitter Bootstrap repo under Issue #5336: Modal Scrolls Background Content.
A fix has been merged into the 2.1.2-wip branch, which should be up for release any day now.
Here is a demo using the patch bootstrap-modal.js:
JSFiddle

Same problem. It is caused by "#" in and the anchor is doing to scroll.
I fixed that by deleting the anchor tag and place this:
<span onclick="$('#umisteni_modal').modal('show');" style="cursor:pointer;">Změnit místo dodání</span>

I had a similar issue on my site, which was caused by another jquery plugin (sidr).
When the sidebar was present and I opened a modal window, I would be sent back to top.
In jquery.sidr.js I changed line 102-106 from:
// Prepare page if container is body
if($body.is('body')){
scrollTop = $html.scrollTop();
$html.css('overflow-x', 'hidden').scrollTop(scrollTop);
}
To:
// Prepare page if container is body
if($body.is('body') && !$('#modal').hasClass('in')){
scrollTop = $html.scrollTop();
$html.css('overflow-x', 'hidden').scrollTop(scrollTop);
}
If you are using this plugin along with twitter bootstrap's modal, maybe this can help you.

I had the same problem because of these lines of CSS which were thought to permantly display scrollbars in the browser. Removing the two lines solved the problem:
html,
body {
min-height: 100%;
height: 101%;
}

to bring the focus back on close
var triggerOffset=0;
$('.modal').on('show.bs.modal', function() {
triggerOffset=$(window).scrollTop();
});
$('.modal').on('hidden.bs.modal', function() {
var animationTime=1;
$('html, body').animate({
scrollTop: (triggerOffset)
}, animationTime);
});

I had been having this issue for so long but my solution was to remove href from the anchor tag
i.e.
<a onclick="test();return false;">Test Link ###</a>
I get no jump now
Hope this helps someone in the future

Jquery sticky footer that adjusts with dynamic content

I'm currently using the plugin here http://codedumper.com/jquerystickyfooter to create a sticker footer.
Take a look http://client.astam.co.uk. It works as you would expect.
The only problem is that, for example, if an error message comes up and the user clicks to remove, or toggled content is available the footer will jump up from the bottom of the browser until the window is resized and then it will sort itself out.
Is there a way for the plugin to know to re-position itself?

Better use $.stickyFooterPos() as a callback for other layout changing functions
like changing the close function in your app.js to
function close(){
$(this).attr('href', 'javascript:void(0)');
$(this).parent().fadeOut(200,function(){$.stickyFooterPos()});
}
P.S: as others suggested, position:fixed is a far more better choice considering the fact that the number of IE6 users are declining... (see http://www.w3schools.com/browsers/browsers_explorer.asp and also http://www.w3schools.com/browsers/browsers_stats.asp )

Are you supporting IE6? If not, then you can simply position the footer as "position: fixed" instead of using the jQuery plugin. Apart from that the JQ plugin positions the div only on window load, resize and scroll. The following code added for the alert close button will work -
$('#alert .close').click(
function() {
$.stickyFooterPos();
}
);
Just add that to your js file and the positioning will work when the close button is clicked.
EDIT - The previous code may not work if you are using fadeOut() for the close button. Rather you can change the code for the close button to -
$(this).attr('href', 'javascript:void(0)');
$(this).parent().fadeOut(200, function(){$.stickyFooterPos()});
$.stickyFooterPos();