Someon knows a plug-in to get a floating widget with a form/html like this website
http://teambox.com/
When you scroll down a "form sign up floating bar" appears.
Thanks in advance!
For this use a div, position fixed and top: 0px and place whatever you want inside. Have the div hidden and use something as the following to show after a certain height.
$(document).scroll(function (e) {
if (document.body.scrollTop >= 300) {
$('#your-div').fadeIn(200);
} else {
$('#your-div').fadeOut(200);
}
});
No reason for a plugin.
Related
When modal is shown I add a class with overflow: hodden to body tag. So content behind the modal is not scrolling. Everything is good.
BUT
If the original page is big enough to have a scrollbar, then I can see ugly shift of the page to the right, when I open the modal. I find out the reason of such behavior. Overflow: hidden causes scrollbar to dissapear, so that's why it is ~10px shift to the right.
My question is how to fix this. In fact, I need to apply overflow:hidden but still have scrollbar shown.
(function() {
let _scrollPosition;
function preventScroll(e) {
e.preventDefault();
window.scroll(..._scrollPosition);
}
function lock() {
_scrollPosition = [window.pageXOffset, window.pageYOffset];
$(window).on('scroll touchmove', preventScroll);
}
function unlock() {
$(window).off('scroll touchmove', preventScroll);
}
return {
lock,
unlock
};
})();
You can just lock the scrolling position as soon as you open the modal with this code.
I have a very similar question to this user, but wasn't able to solve my problem.
I also referred to Chris Coyier's tutorial and used his :before pseudo-element approach. However I cannot get the top of the <section> element to reflect the same top as it's :before child.
Here is some sample code:
HTML
<section id="about">
CSS
#about:before {
display: block;
content: " ";
margin-top: -180px;
height: 180px;
visibility: hidden;
}
Here is the website I am working on so you can check it out live.
The reason I am wanting to do this is because my nav bar is fixed and whenever clicking on hash tag links from the nave bar it nearly cuts off the section title. I would just like to offset the stopping point of the scroll to add just a bit more padding between the title and nav bar.
Thanks in advance!!
It would seem that the padding-top on your section element is what is causing the problem. If you remove the padding it will work, however, all your spacing would need to be fixed.
I think the easiest thing for you to do would be to offset your scroll function... In agency.js add - 70 after scrollTop: $($anchor.attr('href')).offset().top on line 12:
// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top -70
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
Is it possible to make DIV bigger when content of the page is scrolled? I have chatbox with position:fixed on the right side of my page. My CSS for the chat box is height:100% right:0 bottom:0 top:50px. The top:50px is because I don't want it to hide the navigation bar on top of my page. Now the problem is, that when I start scrolling the page, the navigation bar obviously disappear from sight and there is 50px high blank space on top of my chatbox. What I want is that when I start scrolling the page, the chatbox should take the whole 100% of the screen, so that there is no blank space on top of it.
you may do this:
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.chat_box').css({top:'0px'});
}
else {
$('.chat_box').css({top:'10px'});
}
});
});
http://jsfiddle.net/5tnygmrz/1/
demo - http://jsfiddle.net/victor_007/cq1e8c1t/
i think you will need javascript
window.onscroll = function (e) {
var topscroll = window.scrollY
if (topscroll > 50) {
document.getElementById('fixed').style.top = 0
} else {
document.getElementById('fixed').style.top = 50 + 'px'
}
}
I'm using <a href> element along with :target css selector to show a <div> which by default is set to display:none. Problem is, that when I click on the link to show that <div>, it is automatically scrolling down my site towards that <div>.
Is there a way to stop the screen movement?
Unfortunately I am not yet proficient in anything besides CSS and HTML.
You can use event.preventDefault() to avoid this. Something like this:
$('a.yourclass').click(function(e)
{
//your code
e.preventDefault();
});
OR:
link
in the link enter:
Link here
You'll need JS anyway:
// (in jQuery)
$el.on('click', function(e) {
// find current scroll position
var pos = document.body.scrollTop || document.documentElement.scrollTop;
// let normal action propagate etc
// in the next available frame (async, hence setTimeout), reset scroll posiion
setTimeout(function() {
window.scrollTo(0, pos);
}, 1);
})
I don't know if this will flicker the screen. It might. It's a horrible hack either way.
In my Chrome, there's no flicker: http://jsfiddle.net/rudiedirkx/LEwNd/1/show/
There are two ways to tell the browser we don't want it to act:
The main way is to use the event object. There's a method
event.preventDefault().
If the handler is assigned using on (not by
addEventListener), then we can just return false from it.
Example:
Click here
or
here
This is a bit of a hack but you could use a basic css work around:
CSS only Example
#div1 {
height: 0;
overflow:hidden;
}
#div1:target {
height: auto;
margin-top: -110px;
padding-top: 110px;
}
#div2 {
background:red;
}
Click to show
<div id="div1">
<div id="div2">Content</div>
</div>
If you need it to be a little more flexible you can add some js...
More Flexible Example with JS
$('a').click(function () {
$('#div1').css({
'margin-top': 0 - $('#div1').position().top + $(window).scrollTop(),
'padding-top': $('#div1').position().top - $(window).scrollTop()
});
});
Basically you're pulling the top of div1 up with the negative margin and then pushing div2 back down with the padding, so that the top of div1 rests at the top of the window... Like I said its a hack but it does the trick.
Those links are anchor-links and by default made for those jumps :) You could use JS to prevent the default behaviour in some way. For example using jQuery:
$('a').click(function(e){e.preventDefault();});
or by default add return false; to the links
Avoid using :target all together and just use onclick event.
function myFunction()
{
document.getElementById('hiddenDiv').style.display = 'block';
return false;
}
Is there a way to scroll the content of an element that has an overflow of hidden to the top?
Example use case:
Container element has a max height of 200px, starting position is at 60px.
User clicks "show more", the height expands to 200px.
Since there is more content than 200px allows, the user can scroll to the bottom of the list.
When the user clicks "show less", the height lowers to 60px.
Problem arises, in that the list is no longer at the top and not scrollable.
Any ideas here would be great.
I believe it is not possible with CSS.
You can try to look at element.scrollIntoView.
Searching for scrollIntoView I found this question on SO where the answer suggests using jQuery's scrollTop.
Do you mean something like that?
http://jsfiddle.net/8pvjf/
It has to do with jquery indeed
$(document).ready(function(){
$('.background').css('font-size',($(window).width()*0.1));
$(".blow").each(function(){
});
$('.blow').on('click', function(event){
var element = $(this);
if(element.attr('data-blow') == 'true'){
element.animate({ width:'24%', height:'20%' , opacity:0.6 }, 1000).attr('data-blow', 'false')
$(this).addClass('blow')
$(this).removeClass('overflow')
} else {
element.animate({ width:'100%', height:'100%' , opacity:0.95 }, 1000, function(){
$('body').animate({ scrollTop: element.offset().top });
}).attr('data-blow', 'true').addClass('overflow').removeClass('blow');
}
});
$(window).resize(function(){
$('.background').css('font-size',($(window).width()*0.1));
});
Have fun toying with those codes as much as you want.
Of course, this is based on some previous work of mine and you'll need to change your classes and styles accordingly to your needs. :)