Develop Reference

How to change this flipbook?

Hello to all who want to help me.
I have a flipbook made with different javascript libraries, in this case they are these:
<script type="text/javascript" src="extras/jquery.min.1.7.js"></script>
<script type="text/javascript" src="extras/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="extras/modernizr.2.5.3.min.js"></script>
<script type="text/javascript" src="lib/hash.js"></script>
Well, to be honest I haven't handled any of these libraries and I don't know much about Jquery, the flipbook is built like this:
<div id="canvas">
<div class="zoom-icon zoom-icon-in"></div>
<div class="magazine-viewport">
<div class="container">
<div class="magazine">
<!-- Next button -->
<div ignore="1" class="next-button"></div>
<!-- Previous button -->
<div ignore="1" class="previous-button"></div>
</div>
</div>
<div class="bottom">
<div id="slider-bar" class="turnjs-slider">
<div id="slider"></div>
</div>
</div>
</div>
<script type="text/javascript">
function loadApp() {
$('#canvas').fadeIn(1000);
var flipbook = $('.magazine');
// Check if the CSS was already loaded
if (flipbook.width()==0 || flipbook.height()==0) {
setTimeout(loadApp, 10);
return;
}
// Create the flipbook
flipbook.turn({
// Magazine width
width: 922,
// Magazine height
height: 600,
// Duration in millisecond
duration: 1000,
// Enables gradients
gradients: true,
// Auto center this flipbook
autoCenter: true,
// Elevation from the edge of the flipbook when turning a page
elevation: 50,
// The number of pages
pages: 20,
// Events
when: {
turning: function(event, page, view) {
var book = $(this),
currentPage = book.turn('page'),
pages = book.turn('pages');
// Update the current URI
Hash.go('page/' + page).update();
// Show and hide navigation buttons
disableControls(page);
},
turned: function(event, page, view) {
disableControls(page);
$(this).turn('center');
$('#slider').slider('value', getViewNumber($(this), page));
if (page==1) {
$(this).turn('peel', 'br');
}
},
missing: function (event, pages) {
// Add pages that aren't in the magazine
for (var i = 0; i < pages.length; i++)
addPage(pages[i], $(this));
}
}
});
// Zoom.js
$('.magazine-viewport').zoom({
flipbook: $('.magazine'),
max: function() {
return largeMagazineWidth()/$('.magazine').width();
},
when: {
swipeLeft: function() {
$(this).zoom('flipbook').turn('next');
},
swipeRight: function() {
$(this).zoom('flipbook').turn('previous');
},
resize: function(event, scale, page, pageElement) {
if (scale==1)
loadSmallPage(page, pageElement);
else
loadLargePage(page, pageElement);
},
zoomIn: function () {
$('#slider-bar').hide();
$('.made').hide();
$('.magazine').removeClass('animated').addClass('zoom-in');
$('.zoom-icon').removeClass('zoom-icon-in').addClass('zoom-icon-out');
if (!window.escTip && !$.isTouch) {
escTip = true;
$('<div />', {'class': 'exit-message'}).
html('<div>Press ESC to exit</div>').
appendTo($('body')).
delay(2000).
animate({opacity:0}, 500, function() {
$(this).remove();
});
}
},
zoomOut: function () {
$('#slider-bar').fadeIn();
$('.exit-message').hide();
$('.made').fadeIn();
$('.zoom-icon').removeClass('zoom-icon-out').addClass('zoom-icon-in');
setTimeout(function(){
$('.magazine').addClass('animated').removeClass('zoom-in');
resizeViewport();
}, 0);
}
}
});
// Zoom event
if ($.isTouch)
$('.magazine-viewport').bind('zoom.doubleTap', zoomTo);
else
$('.magazine-viewport').bind('zoom.tap', zoomTo);
// Using arrow keys to turn the page
$(document).keydown(function(e){
var previous = 37, next = 39, esc = 27;
switch (e.keyCode) {
case previous:
// left arrow
$('.magazine').turn('previous');
e.preventDefault();
break;
case next:
//right arrow
$('.magazine').turn('next');
e.preventDefault();
break;
case esc:
$('.magazine-viewport').zoom('zoomOut');
e.preventDefault();
break;
}
});
// URIs - Format #/page/1
Hash.on('^page\/([0-9]*)$', {
yep: function(path, parts) {
var page = parts[1];
if (page!==undefined) {
if ($('.magazine').turn('is'))
$('.magazine').turn('page', page);
}
},
nop: function(path) {
if ($('.magazine').turn('is'))
$('.magazine').turn('page', 1);
}
});
$(window).resize(function() {
resizeViewport();
}).bind('orientationchange', function() {
resizeViewport();
});
// Regions
if ($.isTouch) {
$('.magazine').bind('touchstart', regionClick);
} else {
$('.magazine').click(regionClick);
}
// Events for the next button
$('.next-button').bind($.mouseEvents.over, function() {
$(this).addClass('next-button-hover');
}).bind($.mouseEvents.out, function() {
$(this).removeClass('next-button-hover');
}).bind($.mouseEvents.down, function() {
$(this).addClass('next-button-down');
}).bind($.mouseEvents.up, function() {
$(this).removeClass('next-button-down');
}).click(function() {
$('.magazine').turn('next');
});
// Events for the next button
$('.previous-button').bind($.mouseEvents.over, function() {
$(this).addClass('previous-button-hover');
}).bind($.mouseEvents.out, function() {
$(this).removeClass('previous-button-hover');
}).bind($.mouseEvents.down, function() {
$(this).addClass('previous-button-down');
}).bind($.mouseEvents.up, function() {
$(this).removeClass('previous-button-down');
}).click(function() {
$('.magazine').turn('previous');
});
// Slider
$( "#slider" ).slider({
min: 1,
max: numberOfViews(flipbook),
start: function(event, ui) {
if (!window._thumbPreview) {
_thumbPreview = $('<div />', {'class': 'thumbnail'}).html('<div></div>');
setPreview(ui.value);
_thumbPreview.appendTo($(ui.handle));
} else
setPreview(ui.value);
moveBar(false);
},
slide: function(event, ui) {
setPreview(ui.value);
},
stop: function() {
if (window._thumbPreview)
_thumbPreview.removeClass('show');
$('.magazine').turn('page', Math.max(1, $(this).slider('value')*2 - 2));
}
});
resizeViewport();
$('.magazine').addClass('animated');
}
// Zoom icon
$('.zoom-icon').bind('mouseover', function() {
if ($(this).hasClass('zoom-icon-in'))
$(this).addClass('zoom-icon-in-hover');
if ($(this).hasClass('zoom-icon-out'))
$(this).addClass('zoom-icon-out-hover');
}).bind('mouseout', function() {
if ($(this).hasClass('zoom-icon-in'))
$(this).removeClass('zoom-icon-in-hover');
if ($(this).hasClass('zoom-icon-out'))
$(this).removeClass('zoom-icon-out-hover');
}).bind('click', function() {
if ($(this).hasClass('zoom-icon-in'))
$('.magazine-viewport').zoom('zoomIn');
else if ($(this).hasClass('zoom-icon-out'))
$('.magazine-viewport').zoom('zoomOut');
});
$('#canvas').hide();
// Load the HTML4 version if there's not CSS transform
yepnope({
test : Modernizr.csstransforms,
yep: ['lib/turn.min.js'],
nope: ['lib/turn.html4.min.js', 'css/jquery.ui.html4.css'],
both: ['lib/zoom.min.js', 'css/jquery.ui.css', 'js/magazine.js', 'css/magazine.css'],
complete: loadApp
});
</script>
This is a flipbook that was passed to me to be able to modify it but I don't know how to do it, the only thing I can change is the number of pages that are going to be shown.
But what I really need help with is if I can change the flipbook to a single page and have them display from page to page (if possible with the same animation when changing the page) and also change the arrows to turn the pages.
I hope you understand me
Thanks in advance

I think you are missing the part of the code where the flipbook is loaded, this is a turn.js library, so the images or the pdf loading is in the magazine.js file in the loadLargePage and loadSmallPage functions.
In any case a better alternative would be using https://heyzine.com where you can convert the PDF to flipbook and download the code which will look pretty similar but with an easier customization.

How do I get fullcalendar to display calendar on initial render?

When I initially load my calendar, it loads the calendar with all of the headings/buttons, but not the actual calendar itself. I have to press the "today" button for it to load the calendar on today's week. Any idea how to get it to do this on initial load? If it helps, here's the code I'm using. I'm pretty clueless as to what's happening here, I inherited this piece of work off someone else, this is my first time looking at this fullcalender addon.
function calendar() {
//gets saved events
var sourceFullView = { url: '/Calendar/GetDiaryEvents/' };
var sourceSummaryView = { url: '/Calendar/GetDiarySummary/' };
var CalLoading = true;
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
editable: true,
allDaySlot: false,
selectable: true,
slotMinutes: 15,
events: '/Calendar/GetDiaryEvents/',
eventClick:
function(calEvent) {
//modal located at the bottom of the page
var modalElementId = $("#modal");
//url located in the Calendar controller. CalEvent Id referes to event id
var url = GetUrlPath() + '/Calendar/OpenDetailsModal?id=' + calEvent.id;
var appointmentId = calEvent.id;
//These are defined at the top of the page
$('#DiaryEventID').val(appointmentId);
$('#DiaryEventID').val("");
var viewModel = new CalenderViewModel(appointmentId);
showEditModal(null, viewModel, url, modalElementId);
$('.modal-backdrop').removeClass('modal-backdrop');
},
eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc) {
if (confirm("Confirm move?")) {
UpdateEvent(event.id, event.start);
} else {
revertFunc();
}
},
eventResize: function(event, dayDelta, minuteDelta, revertFunc) {
if (confirm("Confirm change appointment length?")) {
UpdateEvent(event.id, event.start, event.end);
} else {
revertFunc();
}
},
dayClick: function(date, allDay, jsEvent, view) {
$('#eventTitle').val("");
setTimeout(ShowClientEventModal(), 100);
for (i = 0; i < 2; i++) {
if (date != "") {
$('#eventClientDate').val($.fullCalendar.formatDate(date, 'dd/MM/yyyy'));
$('#eventClientTime').val($.fullCalendar.formatDate(date, 'HH:mm'));
$("#eventClientDate").datepicker({ dateFormat: 'dd/mm/yy' });
}
}
},
viewRender: function(view, element) {
if (!CalLoading) {
if (view.name == 'month') {
$('#calendar').fullCalendar('removeEventSource', sourceFullView);
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', sourceSummaryView);
} else {
$('#calendar').fullCalendar('removeEventSource', sourceSummaryView);
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', sourceFullView);
}
}
}
});
CalLoading = false;
}
Bit more info, this is strange, but when I press F12 on the browser to go into developer tools, then calendar suddenly renders as if I pressed the today button. But when I go into the calendar page with the debugger already open, it renders the headers without the calendar content. What the hell is going on?

I would suggest you try removing all code related to CalLoading, so remove the variable assignment from the top, remove the entire viewRender function, and remove the variable assignment to false at the bottom. It looks like some type of function for not displaying the events until they are all loaded, or something like that, and my guess is its not working properly.
Edit: It looks like the function swaps out event sources to sourceSummaryView on month view, and sourceFullView on any other, so removing this will still have the calendar default to the sourceFullView, but I do not know the difference of the two so you will just need to try and see how it works.
var CalLoading = true;
viewRender: function(view, element) {
if (!CalLoading) {
if (view.name == 'month') {
$('#calendar').fullCalendar('removeEventSource', sourceFullView);
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', sourceSummaryView);
} else {
$('#calendar').fullCalendar('removeEventSource', sourceSummaryView);
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', sourceFullView);
}
}
}
CalLoading = false;

Stop infinite scroll from jumping to end of page when loading content

I have implemented infinite scroll with isotope on my website and I am having a problem with loading posts. The posts load fine, but lets say I scroll down to load more posts but I am still viewing the posts already there, infinite scroll jumps to the bottom of the page whenever new posts are loaded. How can I stop this behavior and maintain the position on the page even when more posts are loaded?
My script --
$(function () {
var selectChoice, updatePageState, updateFiltersFromObject,
$container = $('.isotope');
////////////////////////////////////////////////////////////////////////////////////
/// EVENT HANDLERS
////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////
// Mark filtering element as active/inactive and trigger filters update
$('.js-filter').on( 'click', '[data-filter]', function (event) {
event.preventDefault();
selectChoice($(this), {click: true});
$container.trigger('filter-update');
});
//////////////////////////////////////////////////////
// Sort filtered (or not) elements
$('.js-sort').on('click', '[data-sort]', function (event) {
event.preventDefault();
selectChoice($(this), {click: true});
$container.trigger('filter-update');
});
//////////////////////////////////////////////////////
// Listen to filters update event and update Isotope filters based on the marked elements
$container.on('filter-update', function (event, opts) {
var filters, sorting, push;
opts = opts || {};
filters = $('.js-filter li.active a:not([data-filter="all"])').map(function () {
return $(this).data('filter');
}).toArray();
sorting = $('.js-sort li.active a').map(function () {
return $(this).data('sort');
}).toArray();
if (typeof opts.pushState == 'undefined' || opts.pushState) {
updatePageState(filters, sorting);
}
$container.isotope({
filter: filters.join(''),
sortBy: sorting
});
});
//////////////////////////////////////////////////////
// Set a handler for history state change
History.Adapter.bind(window, 'statechange', function () {
var state = History.getState();
updateFiltersFromObject(state.data);
$container.trigger('filter-update', {pushState: false});
});
////////////////////////////////////////////////////////////////////////////////////
/// HELPERS FUNCTIONS
////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////
// Build an URI to get the query string to update the page history state
updatePageState = function (filters, sorting) {
var uri = new URI('');
$.each(filters, function (idx, filter) {
var match = /^\.([^-]+)-(.*)$/.exec(filter);
if (match && match.length == 3) {
uri.addSearch(match[1], match[2]);
}
});
$.each(sorting, function (idx, sort) {
uri.addSearch('sort', sort);
});
History.pushState(uri.search(true), null, uri.search() || '?');
};
//////////////////////////////////////////////////////
// Select the clicked (or from URL) choice in the dropdown menu
selectChoice = function ($link, opts) {
var $group = $link.closest('.btn-group'),
$li = $link.closest('li'),
mediumFilter = $group.length == 0;
if (mediumFilter) {
$group = $link.closest('.js-filter');
}
if (opts.click) {
$li.toggleClass('active');
} else {
$li.addClass('active');
}
$group.find('.active').not($li).removeClass('active');
if (!mediumFilter) {
if ($group.find('li.active').length == 0) {
$group.find('li:first-child').addClass('active');
}
$group.find('.selection').html($group.find('li.active a').first().html());
}
};
//////////////////////////////////////////////////////
// Update filters by the values in the current URL
updateFiltersFromObject = function (values) {
if ($.isEmptyObject(values)) {
$('.js-filter').each(function () {
selectChoice($(this).find('li').first(), {click: false});
});
selectChoice($('.js-sort').find('li').first(), {click: false});
} else {
$.each(values, function (key, val) {
val = typeof val == 'string' ? [val] : val;
$.each(val, function (idx, v) {
var $filter = $('[data-filter=".' + key + '-' + v + '"]'),
$sort = $('[data-sort="' + v + '"]');
if ($filter.length > 0) {
selectChoice($filter, {click: false});
} else if ($sort.length > 0) {
selectChoice($sort, {click: false});
}
});
});
}
};
////////////////////////////////////////////////////////////////////////////////////
/// Initialization
////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////
// Initialize Isotope
$container.imagesLoaded( function(){
$container.isotope({
masonry: { resizesContainer: true },
itemSelector: '.item',
getSortData: {
date: function ( itemElem ) {
var date = $( itemElem ).find('.thedate').text();
return parseInt( date.replace( /[\(\)]/g, '') );
},
area: function( itemElem ) { // function
var area = $( itemElem ).find('.thearea').text();
return parseInt( area.replace( /[\(\)]/g, '') );
},
price: function( itemElem ) { // function
var price = $( itemElem ).find('.theprice').text();
return parseInt( price.replace( /[\(\)]/g, '') );
}
}
});
var total = $(".next a:last").html();
var pgCount = 1;
var numPg = total;
// jQuery InfiniteScroll Plugin.
$container.infinitescroll({
contentSelector : '.isotope',
speed : 'fast',
behavior: 'simplyrecipes',
navSelector : '#pagi', // selector for the paged navigation
nextSelector : '#pagi a.next', // selector for the NEXT link (to page 2)
itemSelector : '.item', // selector for all items you'll retrieve
animate: true,
debug: true,
loading: {
selector: '#infscr-loading',
finishedMsg: 'No more content to load.'
}
},
// Trigger Masonry as a callback.
function( newElements ) {
pgCount++;
if(pgCount == numPg) {
$(window).unbind('.infscr');
$container.isotope('reload');
$container.append( newElements ).isotope( 'appended', newElements, true );
$('#infscr-loading').find('em').text('No more content to load.');
$('#infscr-loading').animate({
opacity: 1
}, 200);
setTimeout(function() {
$('#infscr-loading').animate({
opacity: 0
}, 300);
});
} else {
loadPosts(newElements);
}
});
});
function loadPosts(newElements) {
// Hide new posts while they are still loading.
var newElems = $( newElements ).css({ opacity: 0 });
// Ensure that images load before adding to masonry layout.
newElems.imagesLoaded(function() {
// Show new elements now that they're loaded.
newElems.animate({ opacity: 1 });
$container.isotope( 'appended', newElems, true );
});
}
//////////////////////////////////////////////////////
// Initialize counters
$('.stat-count').each(function () {
var $count = $(this),
filter = $count.closest('[data-filter]').data('filter');
$count.html($(filter).length);
});
//////////////////////////////////////////////////////
// Set initial filters from URL
updateFiltersFromObject(new URI().search(true));
$container.trigger('filter-update', {pushState: false});
});
});

You can start by overriding the default animate property of infinite-scroll
$container.infinitescroll({
animate:false, //this does just that
});
And about your dublicate entry for every request (or perhaps some requests ),
It has something to do with your backend i.e the way you are offseting the data
Infinite Scroll works great with page numbers i.e it
Sends 2,3,4,5,6 ... So For every request its sends that request.
I think you are using page offset instead , and you will probably end up with duplicate entries .
If you are using php as your receiving end ... this might help
//In your Controller
$temp = ( $page_offset * $per_page );
$offset = $temp - $per_page ;
//In your model
$this->db->query("SELECT * FROM GALLERY OFFSET $offset limit 10");
This is just a rough idea , I hope it helps.
If it does , Care to Check out Sticky Bubble ? - A game available for free on Google Play .
Cheers :)

Accordion with single scrollbar for all its sub tabs

I need to create a jquery based UI, in which I will have the below html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<style type="text/css">
div .content
{
border: 2px solid black;
background-color: White;
}
div.content::-webkit-scrollbar{
display:none;
}
#container::-webkit-scrollbar{
display:none;
}
</style>
</head>
<body>
<button type="button" id="btnPopup">
Show Popup</button>
<div id="container" style="display: none; border: 2px solid green; background-color: Blue;">
<h3>
DISTRIBUTION</h3>
<div class="content">
<p>
Using jQuery UI Resizable I'm trying to prevent resizing based on various rules.
The built-in containment feature doesn't seem to work properly with absolutely positioned
elements, and I would need something more flexible than that anyway. Having something
like this: Using jQuery UI Resizable I'm trying to prevent resizing based on various
rules. The built-in containment feature doesn't seem to work properly with absolutely
positioned elements, and I would need something more flexible than that anyway.
Having something like this: Using jQuery UI Resizable I'm trying to prevent resizing
based on various rules. The built-in containment feature doesn't seem to work properly
with absolutely positioned elements, and I would need something more flexible than
that anyway. Having something like this: Using jQuery UI Resizable I'm trying to
prevent resizing based on various rules. The built-in containment feature doesn't
seem to work properly with absolutely positioned elements, and I would need something
more flexible than that anyway. Having something like this: Using jQuery UI Resizable
I'm trying to prevent resizing based on various rules. The built-in containment
feature doesn't seem to work properly with absolutely positioned elements, and I
would need something more flexible than that anyway. Having something like this:
Using jQuery UI Resizable I'm trying to prevent resizing based on various rules.
The built-in containment feature doesn't seem to work properly with absolutely positioned
elements, and I would need something more flexible than that anyway. Having something
like this: Using jQuery UI Resizable I'm trying to prevent resizing based on various
rules. The built-in containment feature doesn't seem to work properly with absolutely
positioned elements, and I would need something more flexible than that anyway.
Having something like this: Using jQuery UI Resizable I'm trying to prevent resizing
based on various rules. The built-in containment feature doesn't seem to work properly
with absolutely positioned elements, and I would need something more flexible than
that anyway. Having something like this:
</p>
</div>
<h3>
EXCEPTION</h3>
<div class="content">
<p>
Using jQuery UI Resizable I'm trying to prevent resizing based on various rules.
The built-in containment feature doesn't seem to work properly with absolutely positioned
elements, and I would need something more flexible than that anyway. Having something
like this:</p>
<p>
Using jQuery UI Resizable I'm trying to prevent resizing based on various rules.
The built-in containment feature doesn't seem to work properly with absolutely positioned
elements, and I would need something more flexible than that anyway. Having something
like this:</p>
</div>
<h3>
ERROR</h3>
<div class="content">
<p>
Using jQuery UI Resizable I'm trying to prevent resizing based on various rules.
The built-in containment feature doesn't seem to work properly with absolutely positioned
elements, and I would need something more flexible than that anyway. Having something
like this:</p>
</div>
<h3>
MY NOTES</h3>
<div class="content">
<p>
Using jQuery UI Resizable I'm trying to prevent resizing based on various rules.
The built-in containment feature doesn't seem to work properly with absolutely positioned
elements, and I would need something more flexible than that anyway. Having something
like this:</p>
</div>
</div>
</body>
<script type="text/javascript">
$("#container").accordion({
collapsible: true,
heightStyle: "content",
beforeActivate: function (event, ui) {
// The accordion believes a panel is being opened
if (ui.newHeader[0]) {
var currHeader = ui.newHeader;
var currContent = currHeader.next('.ui-accordion-content');
// The accordion believes a panel is being closed
} else {
var currHeader = ui.oldHeader;
var currContent = currHeader.next('.ui-accordion-content');
}
// Since we've changed the default behavior, this detects the actual status
var isPanelSelected = currHeader.attr('aria-selected') == 'true';
// Toggle the panel's header
currHeader.toggleClass('ui-corner-all', isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top', !
isPanelSelected).attr('aria-selected', ((!isPanelSelected).toString()));
// Toggle the panel's icon
currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e', isPanelSelected).toggleClass('ui-icon-triangle-1-s', !isPanelSelected);
// Toggle the panel's content
currContent.toggleClass('accordion-content-active', !isPanelSelected)
if (isPanelSelected) { currContent.slideUp(); } else { currContent.slideDown(); }
return false; // Cancel the default action
}
});
$(document).ready(function () {
$(".content").css('max-height', $("#container").height() - 150);
});
$(document).delegate("#btnPopup", "click", function () {
$("#container").dialog({
title: "jQuery Modal Dialog Popup",
resizable: false,
width: 800,
maxHeight: 800
//minHeight: 250,
//minWidth: 500,
//resize: function (event, ui) {
// $(".content").css('max-height', ($("#container").height() - 250));
//}
});
return false;
});
// $(document).bind('wheel mousewheel', function (e) {
//
// if (e.originalEvent.wheelDelta > 0) {
//
// }
// else {
// k = h = 0;
// $("div.content").each(function () {
// if ($(this).is(":focus")) {
// h = k;
// }
// k++;
// });
// if ($('.content')[h] != undefined && h != (k - 1)) {
// if ($('#container').children('div.content').eq(h).scrollTop() + $('#container').children('div.content').eq(h).innerHeight() >=
//$('.content')[h].scrollHeight) {
//
// if (!($('div.content').eq(h + 1).prev('h3').hasClass('ui-state-active'))) {
// var totalDiv = $('div.content').length;
// var h3Height = $('h3').height();
//
// $("#container").accordion({ active: h + 1 });
// var f = $('h3.ui-state-active').length;
// //if (f != 1) {
// $('div.content').each(function () {
// if ($(this).css('display') == 'block')
// $(this).css('max-height', ((parseInt($('#container').css('max-height')) / f) - (h3Height * (totalDiv + 1))));
// });
// $('div.content').eq(h + 1).focus();
//
// }
// }
// }
//
// }
// });
(function ($) {
$.fn.hasScrollBar = function () {
return this.get(0).scrollHeight > this.height();
}
})(jQuery);
// $(function () {
// $(".content").bind('scroll', function () {
// if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
// //alert('end reached');
// $(this).next('h3').click();
// $(this).next('div.content').focus();
// }
// });
// })
$('div.content').bind('mousewheel', function (e) {
if (e.originalEvent.wheelDelta / 120 > 0) {
// $(this).text('scrolling up !');
}
else {
// if ($('div.content').hasScrollBar()) {
// if ($('div.content').scrollTop() == ($('div.content p').height() - $('div.content').height())) {
// alert('end!');
// }
// }
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
//alert('end reached');
$(this).next('h3').click();
$(this).prev('h3').click()
// $(this).next('div.content').attr('display', 'block');
$(this).blur();
$(this).next('div.content').focus();
}
}
});
// $('.content').bind('mousewheel', function (e) {
// if ($('div.content').hasScrollBar()) {
// $(this).delegate(".content", "scroll", function () {
// if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
// //alert('end reached');
// $(this).next('h3').click();
// $(this).next('div.content').focus();
// }
// });
// }
// else {
// $(this).next('h3').click();
// $(this).next('div.content').focus();
// }
// });
$(document).delegate("h3", "click", function () {
var totalDiv = $('div.content').length;
var h3Height = $('h3').height();
var f = $('h3.ui-state-active').length;
// if (!($(this).hasClass('ui-state-active'))) {
if (f != 1) {
$('div.content').each(function () {
if ($(this).css('display') == 'block')
$(this).css('max-height', ((parseInt($('#container').css('max-height')) / f) - (h3Height * (totalDiv + 1))));
});
}
});
</script>
</html>
The above html displays an accordion.
What I need to do us have a single scrollbar for the entire accordion content which will work like follows:
When 1st div scrolling is reached till end, second div will open up, on completion of second div scroll(if no scroll is present then too the same thing will happen), 3rd div will open up.
Now, this goes with scrolling downwards, the same should work when user scrolls upwards.
Please let me know the solution which has to be applied to implement the above type of functionality.

$("#container").accordion({
collapsible: true,
heightStyle: "content",
beforeActivate: function (event, ui) {
// The accordion believes a panel is being opened
var currHeader ;
var currContent;
if (ui.newHeader[0]) {
currHeader = ui.newHeader;
currContent = currHeader.next('.ui-accordion-content');
// The accordion believes a panel is being closed
} else {
currHeader = ui.oldHeader;
currContent = currHeader.next('.ui-accordion-content');
}
// Since we've changed the default behavior, this detects the actual status
var isPanelSelected = currHeader.attr('aria-selected') == 'true';
// Toggle the panel's header
currHeader.toggleClass('ui-corner-all', isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top', !
isPanelSelected).attr('aria-selected', ((!isPanelSelected).toString()));
// Toggle the panel's icon
currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e', isPanelSelected).toggleClass('ui-icon-triangle-1-s', !isPanelSelected);
// Toggle the panel's content
currContent.toggleClass('accordion-content-active', !isPanelSelected);
if (isPanelSelected) { currContent.slideUp(); } else { currContent.slideDown(); }
return false; // Cancel the default action
}
});
$(document).ready(function () {
$(".content").css('max-height', $("#container").height() - 150);
});
$(document).delegate("#btnPopup", "click", function () {
$("#container").dialog({
title: "jQuery Modal Dialog Popup",
resizable: false,
width: 800,
maxHeight: 800
//minHeight: 250,
//minWidth: 500,
//resize: function (event, ui) {
// $(".content").css('max-height', ($("#container").height() - 250));
//}
});
return false;
});
// $(document).bind('wheel mousewheel', function (e) {
//
// if (e.originalEvent.wheelDelta > 0) {
//
// }
// else {
// k = h = 0;
// $("div.content").each(function () {
// if ($(this).is(":focus")) {
// h = k;
// }
// k++;
// });
// if ($('.content')[h] != undefined && h != (k - 1)) {
// if ($('#container').children('div.content').eq(h).scrollTop() + $('#container').children('div.content').eq(h).innerHeight() >=
//$('.content')[h].scrollHeight) {
//
// if (!($('div.content').eq(h + 1).prev('h3').hasClass('ui-state-active'))) {
// var totalDiv = $('div.content').length;
// var h3Height = $('h3').height();
//
// $("#container").accordion({ active: h + 1 });
// var f = $('h3.ui-state-active').length;
// //if (f != 1) {
// $('div.content').each(function () {
// if ($(this).css('display') == 'block')
// $(this).css('max-height', ((parseInt($('#container').css('max-height')) / f) - (h3Height * (totalDiv + 1))));
// });
// $('div.content').eq(h + 1).focus();
//
// }
// }
// }
//
// }
// });
(function ($) {
$.fn.hasScrollBar = function () {
return this.get(0).scrollHeight > this.height();
};
})(jQuery);
// $(function () {
// $(".content").bind('scroll', function () {
// if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
// //alert('end reached');
// $(this).next('h3').click();
// $(this).next('div.content').focus();
// }
// });
// })
$('div.content').bind('mousewheel', function (e) {
if (e.originalEvent.wheelDelta == 120) {
// $(this).text('scrolling up !');
//alert("up scrolling");
try{
var x=$(this).prev('h3');
var y=x.prev('div.content');
$('.content').attr('display', 'none');
$(this).prev('div.content').focus();
if ( $(this).innerHeight() >= $(this)[0].scrollHeight) {
y.prev('h3').click();
x.click();
}
x.prev('div.content').attr('display', 'block');
}catch(err){alert(err.message);}
}
else {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
//alert('end reached');
$(this).next('h3').click();
$(this).prev('h3').click();
// $(this).next('div.content').attr('display', 'block');
$(this).blur();
$(this).next('div.content').focus();
}
}
});
// $('.content').bind('mousewheel', function (e) {
// if ($('div.content').hasScrollBar()) {
// $(this).delegate(".content", "scroll", function () {
// if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
// //alert('end reached');
// $(this).next('h3').click();
// $(this).next('div.content').focus();
// }
// });
// }
// else {
// $(this).next('h3').click();
// $(this).next('div.content').focus();
// }
// });
$(document).delegate("h3", "click", function () {
var totalDiv = $('div.content').length;
var h3Height = $('h3').height();
var f = $('h3.ui-state-active').length;
// if (!($(this).hasClass('ui-state-active'))) {
if (f != 1) {
$('div.content').each(function () {
if ($(this).css('display') == 'block')
$(this).css('max-height', ((parseInt($('#container').css('max-height')) / f) - (h3Height * (totalDiv + 1))));
});
}
});
Here is the updated javascript which will also work when you scroll up i.e it will close the current pane and open the previous pane. Here is the working JSBIN demo http://jsbin.com/viwojelico/2/edit?html,js

jQuery UI Tooltip - Return Position Values

I'm trying to do what seems to be a simple task that would, in theory, return the "my" and "at" values of the position method for the tooltip based on the parent of the hovered element that initializes the tooltip but I'm not sure exactly how to do this.
var s,
TooltipController = {
settings: {
tooltips: '[data-tooltip]'
},
init: function () {
s = this.settings;
this.bind_ui_actions();
},
bind_ui_actions: function () {
$(s.tooltips).tooltip({
content: function () {
// Only return a tooltip if the content is truncated
return ((this.offsetWidth < this.scrollWidth) ? $(this).data('tooltip') : false);
},
items: '[data-tooltip]',
open: function (event, ui) {
// If tooltip resides in a <th /> then use animations else dontuse animations
var parent = TooltipController.get_tooltip_parent($(this));
return ((parent == 'TH') ? ui.tooltip.animate({ top: ui.tooltip.position().top + -10 }, "fast") : false);
},
position: function(event, ui) {
var parent = TooltipController.get_tooltip_parent($(this));
var top_pos = ((parent == 'TH') ? '+10' : '');
return { my: 'center bottom', at: 'center top' + top_pos };
},
show: { duration: 0 },
tooltipClass: 'tooltip'
});
},
get_tooltip_parent: function ($this) {
return $this[0].nodeName;
}
}
If I add console.logs to each of the methods I can see that the position method doesn't even get hit and I'm not exactly sure why. I'm sure this is a simple noob mistake but I'm just not understanding whats happening. Thanks in advance!