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();
Related
In my page I have 2 scrolls.
One is apparent in the page ( They are not loaded with ajax or something.)
The other one is inside an accordion.
I want these scroll to be always at the top. They have same class names.
With the snipets I can achieve my first goal, scrolling to top in apparent scroll
$('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);
As well as with this one
var messageBody = document.querySelector('.m-messenger__messages');
messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;
However, the scroll inside the accordion menu is not affected by this change.
If I open the accordion and run this snippets it scrolls to top.
So that either
I need to find a way to run this snippet not only to apperent but also all scrolls in the page or
when I click the accordion this javascript code needs to be executed.
I would like to solve this problem with the first solution.
I tried this and I couldn't succeed as well. If I put alert() rather than scrolltop inside this function, I got the alertbox.
$(".m-accordion__item").click(function() {
$('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);
});
How can I achieve this goal?
This solved my problem. BTW this is bootstrap4. So that it may apply to any of bootstrap 4 templates.
$('.collapse').on('shown.bs.collapse', function(e) {
$('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);
});
I have some basic custom tabs setup that function using click events that show/hide DIVs.
FullCalendar isn't showing up on one of those tabs despite using the render function (docs).
$(".tabs .tab").click (e) ->
...
$("#calendar").fullCalendar "render"
The #calendar DIV is initially hidden, but from my understanding, the render function should force the calendar to render with each click. All of the other tabs work properly, so I know that it's not a problem with the show/hide functionality at all.
Does anyone know what might be going wrong here?
The problem ended up being related to the way I was showing/hiding DIVs-
The CSS selector that I was using to hide DIVs was too broad and ended up assigning display: none; to the calendar DIV (which was a child of the tab content DIVs).
The solution was to change:
$("#tab-contents div").hide()
To:
$("#tab-contents").children().hide
In the HTML the calendar was shown like this (in HAML):
#tab-contents
#tab-calendar
#calendar
#tab-other
...
Thanks for the help and suggestions, and I should have posted more code in the beginning.
There usually are problems with some scripts no being able to work correctly on hidden DIV's.
I usually load page with everything visible, and after about 200ms I hide everything, that needs to be hidden.
For bootstrap tabs, I set every tab container "active" class and for tabs menu, I use this trigger script.
setTimeout(function() {
$('.my-tabs-control a').first().click();
}, 200);
You could try this solution for your own script.
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
Basically I want to see if a user has a hold of a scrollbar on my site. is there a Jquery function I can use to return a Boolean based on weather the user has a hold of the scrollbar or not?
Edit: adding my site so you can see the problem. When you try to scroll the scrollbar up the timed event to set the scrollbar to the bottom kicks in and sends it to the bottom. I need it to not do that while focus is on the chatbox/chatbox scrollbar, but it's not working: http://exvs.us/
If you really need to accomplish this, one way would be to hide the default scrollbar and create your own in javascript. You can then handle click events on your scrollbar. However, this won't work well for users that have javascript disabled by default.
Use scroll method of the Jquery object :
more information there => http://api.jquery.com/scroll/
sample :
$(window).scroll( function () {
console.log('pretty easy no ?');
});
First of all, here is the site I am working on.
I am trying to get a modal window to pop-up when elements in the Flash are clicked on. Which at this point I have about 90% working when you click on the warrior image. Below is a list of issues I am still trying to solve that I hope you can help me with...
The modal background doesn't fill up
the whole page like it should.
I cannot get the close button to work
I need to set the vidname variable in
both the Flash and Java to load in a
dynamic HTML file. Depending on which
image is clicked on. My naming
convention will probably be something
like vid-1.html, vid-2.html, etc.
If you need to look at the .js file you can view it at /cmsjs/jquery.ha.js
Below is the ActionScript I currently have...
var vidname = "modal.html";
peeps.vid1.onRelease = function() {
getURL('javascript:loadVid(\'' + vidname + '\');');
};
Well I have one for you.
Your current close code is
$('#modalBG, #modalClose').click(function(){
closeModal();
});
If you click the background after a video loads you'll see that the modal does close. The reason your close button does not work is because #modalClose does not exist in the DOM when you are binding to the click function.
You need to either rebind the modalClose element when you modify the DOM or use live. If you use live you just need to change your click code to this:
$('#modalBG, #modalClose').live("click", (function(){
closeModal();
});