I have a script for showing the footer menu on scroll on the bottom of the page fixed and it works, but when opening the page or reload in the beginning the footer menu is visible. And after scrolling it reacts the way i want. It properly is quite simple but my head doesn't function at the moment.
$(window).scroll(function() {
if ($(this).scrollTop() > 20) {
$( 'footer').slideDown(300);
} else {
console.log('there');
$('footer').slideUp(300);
}});
Here is the Fiddle
Solved it my self i was thinking to difficult i forgot to set display: none; on the footer.
I changed one line in your css code below:
footer {
position: fixed;
background-color: white;
bottom: 0;
/* just make the footer display:none when page loading */
display: none;
z-index: 300;
}
And here is a link fork your demo: http://jsfiddle.net/abruzzi/afgp3ctg/3/
Related
I want to close CKEditor if I click outside its window.
Stopping propagation on a div enclosing the textarea being replaced by ckeditor, like so
$('#resumo_div').click(function (event) {
event.stopPropagation();
});
and then detecting the click this seems to mostly work.
The exception are clicks on ckeditor widgets like the Link widget which are being detected as being outside. Is there a standard way to doing this?
Your problem is that the event handler is going to start with the widgets as they are the top-most elements that were clicked. By the time the event gets to your encompassing div, the widget will have been enacted. Instead of enclosing the ckeditor in a div (overlay for my example that when clicked will close the ckeditor). Move the ckeditor outside of the div (overlay).
<div class="overlay"></div>
<div id="ckeditor-container"></div>
<style>
.overlay {
position: fixed;
width: 100%;
height: 100%;
}
#ckeditor-container {
position: fixed;
top: 50%;
height: 200px;
margin: -100px auto 0 auto; /* center the container */
}
</style>
After discovering How to hide ckeditor when we click outside of the editor? I was able to improve the solution posted there that satisfied my needs by intercepting clicks in widgets
$('body').click(function(event){
if($(event.target).parents('#articleEditor').length <= 0 && $(event.target).parents('.cke_dialog').length <= 0)
$('#articleEditor').hide();
})
I have a problem with my new website. I have a div used as a "button to the top of the page".
When i scroll down with the wheel mouse, the div appears BUT changes its position to the right (and a scrollbar appears). I have this problem only with ie 11...
Weird... or not, idon't know, I have been searching a few days now and i have found nothing.
My css:
#btn_up
{
display: block;
width: 100px;
height: 100px;
background-image: url(../img/pagetop.svg); background-repeat: no-repeat;
position: fixed;
bottom: 15px;
right: 25px;
z-index: 1000;
cursor: pointer;
display:none;
}
And my javascript:
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('#btn_up').fadeIn();
} else {
$('#btn_up').fadeOut();
}
});
$('#btn_up').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
What do i miss???
I've used your code to create a quick jsFiddle to reproduce the issue, but all seems to be OK in IE11/win7 as well as in FF and Chrome. Could you check your issue using my code, and maybe update the source if something is missing to see the issue?
I've replaced only this part:
background-image: url(../img/pagetop.svg); background-repeat: no-repeat;
with:
background-color:red;
Can you explain what you mean by saying 'div changes its position to the right'?
As far I can tell - div shows up on the right side of the page due to "right: 25px;" specified inside the "#btn_up" selector. I guess it's not your main issue, is it?
I am writing a simple HTML5 application for iPad and I am looking for a simple jquery solution for page transition. I know you would recommend jQueryMobile but problem with that it uses ajax to loads next page in current page and then kicks off transition so css of the page that I m trying to load is getting disturbed see my question. I also tried this and this plugin was the thing that I was looking for but problem with this is that it is not working with iPad and also page flickers a lot while transition so I dropped this option. Another option I found is jQTouch but as far as I know jQTouch only works for transition effects to div, not sure how to use it for page transition.
What I want is that on click of Transition link in Transition index.html should get displayed with transition effects without flickering and css disturbance of index.html page.
Could someone please recommend me some plugins using which I can achieve page transitions without disturbing CSS while transitions.
Hopefully this works for you... the below solution worked for me although jQuery is needed:
First right after the body tag add this:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
Then add the style class for the div and image to your css:
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
And finally add this javascript to your page (preferably at the end of your page, before closing body tag of course):
<script language="javascript" type="text/javascript">
$(window).load(function() {
$('#loading').hide(); });
</script>
Then adjust the position of the loading image and the background color of the loading div via the style class.
This is it, works just fine. But of course you have to have an ajax-loader.gif somewhere.
Try AJAXLoad They have some great animated GIF's there.. :)
I have a fixed footer on my site here: http://starprovisions.com/dev/bacchanalia.html On my 1360x768 screen I can only see the top of the footer and when I try to scroll it either does not scroll or if it does, the footer does not scroll with the whole site, staying below the content. Is there a way to fix this so that the whole webpage scrolls up and down so we can see the footer?
You have to set its position to relative, so it will be below your main content. This way it will allow you to scroll down
#footer {
height: 75px;
background:
white;
margin: auto;
position: relative; /*Added this*/
width: 100%;
}
And also for your html css, you should remove the
overflow-y: scroll;
If you dont want to constantly show the scrollbar on the side of the window.
I use Twitter Bootstrap in one of my projects, but I have the problem that my content goes out of the browser view. Normally you see the scrollbar on the right side of the screen, but not in my case. I searched in bootstrap css file after overflow: hidden; or something like that and deleted it, but that didn't solve the problem.
Does someone know how to enable scrollbar in bootstrap css? (without bootstrap css the bars are showed)
edit:
I have find out that the problem the navbar-fixed in the black navbar which you can add. Without postition: fixed it works fine.
Make sure all the <div> from the navbar are closed. If not, the fixed property is inherited by the descending tags and the scroll bars disappears.
I found removing the "position: fixed" for the navbar resolved this problem for me:
.navbar-fixed-top, .navbar-fixed-bottom {
/*position: fixed;*/
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
}
This guy also has some more useful info: http://davidlains.com/strange-twitter-bootstrap-scrolling-issue
Override it with your last stylesheet.
( Probably your own theme stylesheet. )
html, body {
overflow: visible;
}
<style type="text/css">
body, html {
height: 100%;
overflow: hidden;
}
.navbar-inner {
height: 40px;
}
.scrollable {
height: 100%;
overflow: auto;
}
.max-height {
height: 100%;
}
.no-overflow {
overflow: hidden;
}
.pad40-top {
padding-top: 40px;
}
</style>
Hope this is what you are looking for
You are missing a closing </div> in your HTML code. For every <div class="foobar"> you must have a closing </div>. This (scrolling issue) can happen when using twitter bootstrap and not closing your divs.