I'm using Fb.ui() to post an update to user's wall but the dialog always appears in the same spot in my browser (center middle if scrolled up). The problem is that I'm opening the dialog from the bottom of the screen. Is there a way to get the dialog to show for the user's current scroll location?
The FB.ui() dialog should already be positionned relative to the place the user scroll currently is.
If not, you can simply position your #fb-root in CSS :
#fb-root { position:fixed; top:10%; }
That way, the pop-in will always be on the scroll position of the user and also follow it if he continue to scroll up or down the page.
I'm using this piece of code to set the dialog position to the top of the page, but you can use it to set the position anywhere you want. This code uses the jQuery library
setInterval(function(){
var dialog = $('.fb_dialog');
for(var i = 0; i < dialog.length; i++)
{
var d = $(dialog[i]);
if(parseInt(d.css('top')) > 0 && parseInt(d.css('top')) != 195)
{
d.css('top', '195px')
}
}
}, 500);
The facebook write the dialog html code to the <div class="fb-root"></div> so if you surround it with a <div style="position: absolute;"></div> the dialog appears where you put this code.
For example:
<div style="position: absolute">
<div class="fb-root"></div>
</div>
Related
I have a fixed piece of text and I'm trying to add a different class each time the text enters a div on scroll. I've got it working no problem. But if I add an offset amount to the fixed text e.g.
top: 400px
I need to counter this offset in the JS. But I can't seem to figure it out. I've tried using:
.offset().top 400);
But it's not working. Here's a code i'm currently using:
HTML
<p class="text">TEXT HERE</p>
<div class="section1"></div>
<div class="section2"></div>
<div class="section3"></div>
<div class="section4"></div>
JS
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
$('.text').toggleClass('blue',
scroll >= $('.section1').offset().top
);
$('.text').toggleClass('magenta',
scroll >= $('.section2').offset().top
);
$('.text').toggleClass('green',
scroll >= $('.section3').offset().top
);
$('.text').toggleClass('orange',
scroll >= $('.section4').offset().top
);
});
//trigger the scroll
$(window).scroll();//ensure if you're in current position when page is refreshed
The text needs to add class as soon as it enters the relevant div.
Here's a working fiddle: http://jsfiddle.net/6PrQW/334/
So you did most everything right, but I think where you went wrong is here: var scroll = $(window).scrollTop();
You don't want to calculate using the window offset, rather you want to use the offset of your sticky text. So instead use: var scroll = $('.text').offset().top;
Let me know if that helps.
edit,
and here is your fiddle with the edits.
Note that I edited your line for setting the blue class since you don't want to match the sticky offset against itself.
To find out when something is within your window, you've gotta use something like...
if($(elem).offset().top - $(window).scrollTop < $(window).height()){
//stuff
}
That should trigger as soon as elem is visible on the page! You can check it against $(window).height()/2, for example, if you want it to trigger in the center of the page instead. Hope this helps!
I am trying to scroll to the bottom of a div #chat-feed with overflow set to auto and stay there unless a user scrolls that div's content up. If they scroll back down, the div should lock to the bottom and new content will be displayed at the bottom.
Known issues: I have tried implementing this answer with my code but I do not know Javascript well enough yet to get it working. If content from chat-feed.php is taller than the container then the scroll stays at the top. It also seems like the answer given does not respect content loaded from an external file.
Key things: new content should show at the bottom and the div should scroll to the bottom when new content loads UNLESS the users has already scrolled up a bit. If the user scrolls back down, then it should lock to the bottom and new content be displayed at the bottom and be visible.
<div id="chat-feed" style="height: 200px; width: 300px; overflow: auto;"></div>
<script>
$(document).ready(function(){
setInterval(function(){
$('#chat-feed').load("chat-feed.php").fadeIn("slow");
}, 1000);
});
</script>
Demo link
On question you linked to, there is a better implementation https://stackoverflow.com/a/21067431/1544886.
I've reworked that author's code below:
$(document).ready(function() {
var out = document.getElementById("chat-feed"); // outer container of messages
var c = 0; // used only to make the fake messages different
// generate some chatter every second
setInterval(function() {
//check current scroll position BEFORE message is appended to the container
var isScrolledToBottom = checkIfScrolledBottom();
// append new mesage here
$('#chat-feed').append("<div>Some new chat..." + c++ + "</div>").fadeIn("slow");
// scroll to bottom if scroll position had been at bottom prior
scrollToBottom(isScrolledToBottom);
}, 1000);
function checkIfScrolledBottom() {
// allow for 1px inaccuracy by adding 1
return out.scrollHeight - out.clientHeight <= out.scrollTop + 1;
}
function scrollToBottom(scrollDown) {
if (scrollDown)
out.scrollTop = out.scrollHeight - out.clientHeight;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chat-feed" style="height: 150px; width: 300px; overflow: auto;"></div>
UPDATE
JQuery's .load() function deletes the associated element (chat-feed) and re-adds. This means that the out variable points to the old deleted element, not the new. The solution is update the out variable after executing a .load():
$('#chat-feed').load("chat-feed.php").fadeIn("slow");
out = document.getElementById("chat-feed"); // outer container of messages
I've recently taken over work on a friend's website, here. I want to get the small logo above the description box to only show up once the user has scrolled past (and subsequently hidden) the large header at top, and disappear again if the user scrolls back up past it. I've tried the methods recommended in these other posts here and here, which seem like the same basic idea but I can't get any of them to work.
I'm new to anything and everything scripting (which I'm entirely sure is the biggest problem here, I know.) So any help is appreciated as what I'm apparently doing wrong.
Start by giving the <div class="fixeddiv"> a style="display: none". Then add the following (since you're already using jQuery):
$(document).ready(function () {
var contentOffset = getOffset();
function getOffset() {
var allOffsets = $("div#content").offset();
return allOffsets.top;
}
$(window).resize(function () {
contentOffset = getOffset();
});
$(window).scroll(function () {
var windowTop = $(window).scrollTop();
if (windowTop > contentOffset) {
$("div.fixeddiv").show();
} else {
$("div.fixeddiv").hide();
}
});
});
Here's what this code does. When the document is done loading, it gets the number of pixels that the "content" div is from the top of the document (offset). It does this again any time the window is resized. Then, when someone scrolls up or down, it gets the number of pixels that are already hidden above the scroll (scrollTop). If the number of hidden pixels is greater than the offset of the #content div from the top of the window, that means we've scrolled past the top of the content div and should show the icon. Otherwise, we should hide the icon.
I am working on a mobile hybrid application.
In my html page, I have 3 tabs. When clicking a tab, the content of the scrollable div gets changed. My problem is when I scroll down the content of div (view) and click another tab, the content disappears (but the content is there). Please help me so I can reset the div scroll position when clicking any tab.
Please give me suggestions only with JavaScript or CSS, not with JQuery as I am not using the JQuery library.
Without seeing code, i can just guess.
If you want to reset the scroll position you can simply use
window.scrollTo(0,0);
add this code to your each tab click functions so that when ever you click any tab, it resets to top.
If you have any specific div that has overflow property
var myDiv = document.getElementById('specificDiv');
myDiv.scrollTop = 0;
It is easy
<div id="test" style="height:150px; width:600px;overflow-y:auto;background-color:gray;">
<div style="width:150px;height:500px; background-color:green;"></div>
</div>
document.getElementById('test').scrollTop =0;
Finally this worked for me
function resetScrollPos(selector) {
var divs = document.querySelectorAll(selector);
for (var p = 0; p < divs.length; p++) {
if (Boolean(divs[p].style.transform)) { //for IE(10) and firefox
divs[p].style.transform = 'translate3d(0px, 0px, 0px)';
} else { //for chrome and safari
divs[p].style['-webkit-transform'] = 'translate3d(0px, 0px, 0px)';
}
}
}
resetScrollPos('.mblScrollableViewContainer');
Calling this function after transition between view ,will reset my scroll position.
i used this on my inverted comments section and it worked.
instead of id i had class.
i needed for scrollbar to be at the bottom each time user adds comment.
so i put this on submit button.
const myDiv = document.getElementsByClassName('comments-container');
myDiv[0].scrollTop = 0;
I would like a div to appear and slide down once you scroll pass the header.
Here's what it should look like:
http://www.space.com/11425-photos-supernovas-star-explosions.html
Here's what I got so far but it's not working.
http://jsfiddle.net/nHnrd/
You'll need to find out the height of the header and its position on the page then just show or hide the div depending on the scrollTop value using jquery.
For example:
// Get the headers position from the top of the page, plus its own height
var startY = $('header').position().top + $('header').outerHeight();
$(window).scroll(function(){
checkY();
});
function checkY(){
if( $(window).scrollTop() > startY ){
$('.fixedDiv').slideDown();
}else{
$('.fixedDiv').slideUp();
}
}
// Do this on load just in case the user starts half way down the page
checkY();
Then you'll just need to set the .fixedDiv to position:fixed: top: 0; left: 0;
Edit: I've added a checkY() function that you can call whenever the page loads as well as on scroll. To hide it initially though, just use CSS.
You might want to just show and hide your div rather than pseudo class AND hide and show
initially:
$("#mydiv").hide();
then (on scroll):
$("#mydiv").show();
set what you want your div to look like i.e. 0,0 and fixed
Use the Keep It Simple method!
I've updated your jsfiddle with something you can try.
Try this:
http://jsfiddle.net/nHnrd/10/
Also, this article was helpful:
http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/