i have finished this code off but im stuck on teh last thing i have to do, when a item is added it auto scrolls to the bottom which is great but what i cannot work out how to do and im sure its simple is when i use the scroll bar i want to stop it jumping to the bottom until i stop using the scroll bar.
you will see in the example ive provided if you click on scrollbar and drag up it keeps jumping down when it adds a new item, i just need to pause that until i stop using the scroll bar if that makes sense.
it uses api.scrollToBottom(); to scroll to the bottom once the new item is added which is correct, but unsure on the condition for mouseover etc... to stop that when those are the conditions.
Hope someone can help me on this, many thanks in advance! :)
JSFiddle here: http://jsfiddle.net/GT7sV/2/
JS
var settings = {
showArrows: true,
verticalArrowPositions: 'os',
horizontalArrowPositions: 'os',
animateScroll: true
};
var pane = jQuery('.scroll-pane');
pane.jScrollPane(settings);
var api = pane.data('jsp');
var i = 1;
api.scrollToBottom();
setInterval(
function()
{
api.getContentPane().append("<li>testing this new item</li>").children(':last').hide().fadeIn(1000);
api.reinitialise();
api.scrollToBottom();
},
1000
);
});
Thanks!
I dont know if this is ok for you but you could try it in different direction. You could load new rows when user scrolls to the bottom:
conversationHeadersScrollPane = $('.scroll-pane').bind(
'jsp-scroll-y',
function(event, scrollPositionY, isAtTop, isAtBottom) {
if (isAtBottom) {
//add new rows for example with ajax call
}
});
edit: there is a function getPercentScrolledY()
so you could before calling scrollToBottom check if user is for example bellow 90%, if not let him read while he scrolls on his own to the bottom.
Related
I set the optioon triggerOnce to true, it work like a charm if i start srcolling from beginning (top of the page) and start scrolling down.
But if i refresh the page at the bottom of the page and start scrolling up, it wont trigger the above targeted element like it did when scrolling down from the top of the page.
here my code:
$('.anim').each(function(index, elHtml) {
var el = $(this);
// console.log($(this), el);
var _animation = el.data('animation'),
_duration = el.data('duration') ? el.data('duration') : 1000,
_offset = el.data('offset') ? el.data('offset') : 'bottom-in-view';
el.waypoint(function(direction){
el.velocity(_animation, _duration);
if(direction == 'up'){
el.velocity(_animation, _duration);
}
}, {
offset: _offset,
triggerOnce: true
});
});
Please let me know if you have the solution.
Thank you for your time :)
This is because when the page loads and Waypoints are added, they check to see if they have already been passed in the down direction and if they have, it triggers the waypoint. So in your case, you're hitting the waypoints in the down direction and they are being destroyed after the down trigger.
The "workaround" for your use case is to create them disabled using the enabled: false option. Then, after the page is done loading, call enable on the waypoints.
I have playing around with a steriotab system with the prototype.js library, everything works fine except the next DIV under the container of steriotabs is showing like a flash when turning to next tab.. I know its little bit difficult to understand.. here you can see it on their website http://stereointeractive.com/blog/code/prototype-tabs/
You can see that by changing the four tabs(features, setup, configuration, download) continuously three four times. The comment section will show up like a flash just below the navigation tabs(Features, Setup, Configuration, Download).
I think the issue was when it goes to next tab the current one is display:none and ofcourse there is nothing in the meantime(1 or 2 seconds) so the next block of html code is coming to the top just below the navigation..
this javascript may causing the issue..
activate: function(tab) {
var tabName = tab.id.replace(this.options.ids.tab,'');
this.currentPanel = this.options.ids.panel+tabName;
if (this.showPanel == this.currentPanel) {
return false;
}
if (this.showPanel) {
if (this.options.effects) {
new Effect.Fade(this.showPanel, {queue: 'front'});
} else {
$(this.currentPanel).hide();
}
}
if (this.options.effects) {
new Effect.Appear(this.currentPanel, {queue: 'end'});
} else {
$(this.showPanel).show();
}
this.tabs.invoke('removeClassName', this.options.classNames.tabActive);
tab.addClassName(this.options.classNames.tabActive);
this.showPanel = this.currentPanel;
}
you guys have any thought?
You're suspicion is correct, the reason you get the flash is the few milliseconds there is no container there holding back the content below the object. One option you could consider is while fading the container also sliding it up (look into parallel effects in scripty) that way it would not be nearly as jarring with the content disappears.
I am trying to make a text-slide-in effect on a web page. I am using the javascript slidesjs library because it seemed like the best fit. However, I cannot make it work when triggered by a web click.
I have a live example running at: http://107.22.173.10
Note that when you click the "GOTO" links nothing happens.
The basic code is as follows and it seems the page is supposed to automatically put '#' anchors in to trigger the slides. I can't make this work, or figure out how to debug this.
$(function(){
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
startSlide = window.location.hash.replace('#','');
}
// Initialize Slides
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
generatePagination: true,
//play: 5000,
//pause: 2500,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
});
Does anyone see what's going wrong here?
What is the best way to debug this problem?
Is there a better way or library I should be using?
Any advice is appreciated. Thanks!!
You're not following the example from slidesjs.com. See "Basic HTML structure". You're putting only one element in the #slides_container div, and assign all sorts of weird absolute positioning to it, which of course won't work with the animation code.
Copy paste the example first, then start adding your own tweaks concerning style.
I'm having a hard time describing exactly what the problem is.. but the link in question is: http://www.evolutionarycollective.com/events/
You'll notice that when you load the "Calendar" tab, the calendar doesn't show up. If you resize the window, or manipulate the page in some other way, then the calendar appears. The calendar loads fine when it's not within a tab. It's being called in the header with:
<script type='text/javascript'>
jQuery(document).ready(function() {
jQuery('#calendar').fullCalendar({
events: themeforce.events
});
});
</script>
EDIT:
I believe this is the section of the script library that handles the tabs and panes.. (I'm using this with a wordpress theme that calls the tabs via a shortcode)
// jQuery tool's tab creator is not shortcode friendly, transfer the titles to the correct tabs area
jQuery('.bfi_pane').each(function(i) {
var title = jQuery(this).attr('title');
jQuery(jQuery(this).siblings('.bfi_tabs,.bfi_tabs_slide,.bfi_tabs_fade')[0]).append('<div>'+title+'</div>');
});
// Custom slide effect for tabs. slide up then down
jQuery.tools.tabs.addEffect('slide-slide',function(i, done) {
this.getPanes().slideUp(400).eq(i).delay(400).slideDown(400, done);
});
// Custom slide effect for tabs. slide up and down simultaneously
jQuery.tools.tabs.addEffect("slide", function(i, done) {
this.getPanes().slideUp(400).eq(i).slideDown(400, done);
});
// IMPORTANT: SLIDEDOWN JQUERY FIX. we need to assign the correct heights
// so that the slidedown effect doesn't JUMP
jQuery(".bfi_accordion_pane").each(function(i) {
var heightTo = jQuery(this).height();
var paddingTop = parseInt(jQuery(this).css("padding-top").replace('px', ''));
var paddingBottom = parseInt(jQuery(this).css("padding-bottom").replace('px', ''));
var marginTop = parseInt(jQuery(this).css("margin-top").replace('px', ''));
var marginBottom = parseInt(jQuery(this).css("margin-bottom").replace('px', ''));
jQuery(this).css("height", heightTo + paddingTop + paddingBottom + marginTop + marginBottom);
});
// start jQuery tool tabs. we have to do this the long way so we can make
// initialIndex work properly
jQuery(".bfi_tabs_slide").each(function(i) {
var openTab = jQuery(this).attr('rel');
jQuery(this).tabs('> div.bfi_pane', {effect: 'slide-slide', initialIndex: parseInt(openTab, 10)});
});
jQuery(".bfi_tabs_fade").each(function(i) {
var openTab = jQuery(this).attr('rel');
jQuery(this).tabs('> div.bfi_pane', {effect: 'fade', initialIndex: parseInt(openTab, 10)});
});
Is there some way I can somehow refresh the script when that tab lis loaded.. or fire off another document.ready?
Thank you!
The probable explanation is that the full calendar can't figure out its height because when initially created that tab is hidden, which will make it have zero width and height.
Just make the call to .fullCalendar() in a tab switch event handler.
Alternatively use the "off-left" method of hiding tabs, as described in the last few paragraphs of http://jqueryui.com/demos/tabs/
I'm working on writing a drop-down menu with jQuery and I have a question. My menu is composed of two part span.menu_head (which is in the menu bar) and a ul.menu_body (which contains the drop-down items). I have the following jQuery code:
$("span.menu_head").hover(function(){
$(this).next().slideDown('medium');
}, function(){
});
$("ul.menu_body").hover(function(){
}, function(){
$(this).slideUp('medium');
});
So, when I hover over the span.menu_head, the ul.menu_body slides down and when I leave the ul.menu_body, it slide up. This is working as expected. However, there's one more piece I'm trying to add: When the mouse leaves the span.menu_head, I want the ul.menu_body to slideUp, UNLESS the mouse is over the ul.menu_body. Is there a way in jQuery to determine if the mouse is over a certain element? Or, is there a better way to acheive this effect?
Thanks,
Paul
I found a solution using hoverIntent (http://cherne.net/brian/resources/jquery.hoverIntent.html).
I set a flag when the mouse hovers over the ul.menu_body, so that I can check this flag before closing the menu.
var overBody = false;
function mnuOpen() {
$(this).next().slideDown('medium');
}
function mnuClose() {
if (!overBody) {
$(this).next().slideUp('medium');
}
}
var headConfig = {
over: mnuOpen,
timeout: 250,
out: mnuClose
}
$("span.menu_head").hoverIntent(config);
$("ul.menu_body").hover(function(){
overBody = true;
}, function(){
overBody = false;
$(this).slideUp('medium');
});
This is producing the desired behavior. There's one more thing I need to consider: if the mouse goes from the sub menu back to the header, we don't want to close and re-open, so this might involve setting another flag to detect this behavior.
Paul