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.
Related
On the site I'm working on, there's a bar that appears:
1. When the user hovers over a link
$("#navbar-nav-list-element-left").hover(function() {
$('.bar-left').toggleClass('bar-active');
});
$("#navbar-nav-list-element-middle").hover(function() {
$('.bar-middle').toggleClass('bar-active');
});
$("#navbar-nav-list-element-right").hover(function() {
$('.bar-right').toggleClass('bar-active');
});
2. When the user is visiting that link's particular content
$(function(){
if (/(about.html)/.test(window.location.href)) {
$('.bar-middle').addClass('bar-active-scroll');
} else {
$('.bar-middle').removeClass('bar-active-scroll');
}
});
$(function(){
if (/(work.html)/.test(window.location.href)) {
$('.bar-left').addClass('bar-active-scroll');
} else {
$('.bar-left').removeClass('bar-active-scroll');
}
});
$(function(){
if (/(contact.html)/.test(window.location.href)) {
$('.bar-right').addClass('bar-active-scroll');
} else {
$('.bar-right').removeClass('bar-active-scroll');
}
});
3. When the user scrolls down to a specific point on the homepage
$(function(){
var stickyTop = $('#section2').offset().top;
$(window).on( 'scroll', function(){
if ($(window).scrollTop() >= stickyTop) {
$('.bar-left').addClass('bar-active-scroll');
} else {
$('.bar-left').removeClass('bar-active-scroll');
}
});
});
My site is a single page application & I'm using barba.js to handle AJAX. Taking that into consideration:
These functions run every time the DOM is loaded/refreshed (via .js file included in 'scripts' at bottom of the index page (and only there, since other 'pages' are added via AJAX))
$(function(){
var stickyTop = $('#section2').offset().top;
$(window).on( 'scroll', function(){
if ($(window).scrollTop() >= stickyTop) {
$('.bar-left').addClass('bar-active-scroll');
} else {
$('.bar-left').removeClass('bar-active-scroll');
}
});
});
$("#navbar-nav-list-element-left").hover(function() {
$('.bar-left').toggleClass('bar-active');
});
$("#navbar-nav-list-element-middle").hover(function() {
$('.bar-middle').toggleClass('bar-active');
});
$("#navbar-nav-list-element-right").hover(function() {
$('.bar-right').toggleClass('bar-active');
});
...and these functions run every time barba.js updates content
$(function(){
if (/(about.html)/.test(window.location.href)) {
$('.bar-middle').addClass('bar-active-scroll');
} else {
$('.bar-middle').removeClass('bar-active-scroll');
}
});
$(function(){
if (/(work.html)/.test(window.location.href)) {
$('.bar-left').addClass('bar-active-scroll');
} else {
$('.bar-left').removeClass('bar-active-scroll');
}
});
$(function(){
if (/(contact.html)/.test(window.location.href)) {
$('.bar-right').addClass('bar-active-scroll');
} else {
$('.bar-right').removeClass('bar-active-scroll');
}
});
$(function(){
var stickyTop = $('#section2').offset().top;
$(window).on( 'scroll', function(){
if ($(window).scrollTop() >= stickyTop) {
$('.bar-left').addClass('bar-active-scroll');
} else {
$('.bar-left').removeClass('bar-active-scroll');
}
});
});
My Problem: If I navigate to another page (triggering barba.js) and return to my homepage, then scroll until I trigger the bar, the bar remains active after I scroll back to the top.
I'm pretty sure I need to use '.off' on .bar-left, .bar-middle & .bar-right when pages refresh, but I'm unsure how to implement this correctly.
Any advice/constructive criticism/suggestions are much appreciated!
Here's the full block of code that runs when barba.js is triggered
document.addEventListener("DOMContentLoaded", function() {
if (!('webkitClipPath' in document.body.style)) {
alert('Sorry, this demo is available just with webkitClipPath. Try with
Chrome/Safari.');
}
Barba.Pjax.init();
Barba.Prefetch.init();
var FadeTransition = Barba.BaseTransition.extend({
start: function() {
/**
* This function is automatically called as soon the Transition starts
* this.newContainerLoading is a Promise for the loading of the new
container
* (Barba.js also comes with an handy Promise polyfill!)
*/
// As soon the loading is finished and the old page is faded out, let's
fade the new page
Promise
.all([this.newContainerLoading, this.fadeOut()])
.then(this.fadeIn.bind(this));
},
fadeOut: function() {
/**
* this.oldContainer is the HTMLElement of the old Container
*/
return $(this.oldContainer).animate({ opacity: 0 }).promise();
},
fadeIn: function() {
/**
* this.newContainer is the HTMLElement of the new Container
* At this stage newContainer is on the DOM (inside our #barba-
container and with visibility: hidden)
* Please note, newContainer is available just after
newContainerLoading is resolved!
*/
document.body.scrollTop = 0;
var _this = this;
var $el = $(this.newContainer);
$(this.oldContainer).hide();
$el.css({
visibility : 'visible',
opacity : 0
});
initFullpagePlugin($el);
$(function(){
if (/(about.html)/.test(window.location.href)) {
$('.bar-middle').addClass('bar-active-scroll');
} else {
$('.bar-middle').removeClass('bar-active-scroll');
}
});
$(function(){
if (/(work.html)/.test(window.location.href)) {
$('.bar-left').addClass('bar-active-scroll');
} else {
$('.bar-left').removeClass('bar-active-scroll');
}
});
$(function(){
if (/(contact.html)/.test(window.location.href)) {
$('.bar-right').addClass('bar-active-scroll');
} else {
$('.bar-right').removeClass('bar-active-scroll');
}
});
$(function(){
var stickyTop = $('#section2').offset().top;
$(window).on( 'scroll', function(){
if ($(window).scrollTop() >= stickyTop) {
$('.bar-left').addClass('bar-active-scroll');
} else {
$('.bar-left').removeClass('bar-active-scroll');
}
});
});
$el.animate({ opacity: 1 }, 400, function() {
/**
* Do not forget to call .done() as soon your transition is finished!
* .done() will automatically remove from the DOM the old Container
*/
_this.done();
});
}
});
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
I have this website: http://wearewebstars.dk/poc/index.html
If you click the top menu, then it makes an Ajax request to another page. And if you click again, a new request to another page and so on...
However, it seems, that If I click the top navigation once, then it loads the new page, and then if I click on another link in the top navigation, then it seems that it loads the page twice or something? I cant quite figure out why it does this?
If you start by clicking "Omgivelserne", and after that click "Skriv dig op", then the page "Skriv dig op", seems to be loading twice, judging from the fade transitions?
My JS for the Ajax and Transitions (Edited to only show relevant code):
var DIS = DIS || {};
// create a timeline
var tl = new TimelineMax();
(function($, DIS, window) {
var graphic = $("div.page-transition");
DIS.PageTransitionStart = {
start: function(url) {
$this = $(this);
var pageTransitionStart = new TimelineMax({
onComplete: DIS.loadPage,
onCompleteParams: [url, $this]
});
pageTransitionStart.add(TweenMax.set($("body"), {
className: "animating"
}));
pageTransitionStart.to(graphic, 0.3, {
css: {
scale: 50,
opacity: 0.5,
force3D: true
},
ease: Power1.easeOut
});
pageTransitionStart.to(graphic, 0.5, {
css: {
scale: 130,
opacity: 1,
force3D: true
},
ease: Power1.easeOut
});
//tl.add(pageTransitionStart);
},
toggleSelectedClass: function(el) {
$("#mainmenu").find("a").removeClass("selected");
el.addClass("selected");
}
};
DIS.PageTransitionEnd = {
end: function(el, url) {
var pageTransitionEnd = new TimelineMax();
pageTransitionEnd.add(TweenMax.to(el, 0.3, {
css: {
scale: 1,
opacity: 1
},
ease: Power4.easeOut
}));
pageTransitionEnd.add(TweenMax.to(el, 0.1, {
onComplete: function() {
TweenMax.set($("body"), {
className: ""
}); // then only replace with blue div with new height and width
}
}));
//tl.add(pageTransitionEnd);
}
};
DIS.TopNavigation = function() {
$(".nav a").click(function(event) {
event.preventDefault();
$url = $(this).attr("href");
DIS.PageTransitionStart.start($url);
});
};
DIS.loadPage = function(url, el) {
var div = url + "#pages-container .content";
//var title = el.attr("title").replace(/\s/g, ''); //Remove spaces from Title
$(".content").load(div, function(response, status, xhr) {
if (status == "success") {
//alert("test");
//window.location.hash = title; // Adds a hash to the URL
console.log(xhr.status);
DIS.PageTransitionEnd.end(graphic, $url);
DIS.PageTransitionStart.toggleSelectedClass(el);
DIS.init();
} else if (status == "error") {
alert("Vi kunne desværre ikke hente siden - Kontakt venligst Living Homes");
console.log(xhr.status);
console.log(xhr.responseText);
console.log(response);
return;
}
});
};
DIS.init = function() {
DIS.TopNavigation();
if ($(window).width() > 768) {
DIS.pageNavigation();
}
DIS.TextEffects();
DIS.slider();
};
}(jQuery, DIS, window));
$(function() {
DIS.init();
});
If you change the following, I assume there would be no more "double clicks". This will make sure that TopNavigation() is only fired once, and not binding two click-events to the menu links.
DIS.init = function() {
//DIS.TopNavigation();
if ($(window).width() > 768) {
DIS.pageNavigation();
}
DIS.TextEffects();
DIS.slider();
};
and
$(function() {
DIS.TopNavigation();
DIS.init();
});
Not the best thought out solution, but it's a way to confirm where the problem lies.
Edit: Once confirmed that this is indeed the problem, the next step would be to make sure that DIS.init() is only used to reset states/variables, and that it doesn't create a lot of double bindings or conflicting events.
You can handle this by adding a...
$(".nav a").unbind("click");
But if there is no specific reason to unbind & rebind, it's better to just leave it be and fix the structure instead.
Ok, So I finally figured out the problem. It seems that there was a problem with some naming conventions. I was trying to load .content into .content, and that was caused the problem. I changed the class name on the div I was loading .content into, and that solved the problem.
i want to popup full php file in javascript function...
i have javascript function like this...
(function() {
tinymce.create('tinymce.plugins.wpc', {
init : function(ed, url) {
ed.addButton('wpc', {
title : 'Add Contact Us form',
image : url+'/dd_note.gif',
onclick : function() {
** here i want to popup php(mixed with html tags) file**
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('wpc', tinymce.plugins.wpc);
})();
can anybody suggest me how to do it?
Thanks in advance
You might want to use the dialog extension from jQueryUI.
(function () {
tinymce.create('tinymce.plugins.wpc', {
init: function (ed, url) {
ed.addButton('wpc', {
title: 'Add Contact Us form',
image: url + '/dd_note.gif',
onclick: function () {
$(document.body).append('<div id="myPopUpBox"></div>');
$("#myPopUpBox").dialog({
open: function (event, ui) {
$('#myPopUpBox').load('my.PHP.file.php');
}
});
}
});
},
createControl: function (n, cm) {
return null;
},
});
tinymce.PluginManager.add('wpc', tinymce.plugins.wpc);
})();
Hope this helps..
Another option is to use Bootstrap (developed by Twitter).
You can then use their Modal system.
you can use jquery popup plugins like color-box. just add its function code into onclick section of your function. You can download and read documentation for color-box from here:
http://www.jacklmoore.com/colorbox/
I hope this code can help you.
// leanModal v1.1 by Ray Stone - http://finelysliced.com.au
// Dual licensed under the MIT and GPL
(function($) {
$.fn.extend({leanModal: function(options) {
var defaults = {top: 100, overlay: 0.5, closeButton: null};
var overlay = $("<div id='lean_overlay'></div>");
$("body").append(overlay);
options = $.extend(defaults, options);
return this.each(function() {
var o = options;
$(this).click(function(e) {
var modal_id = $(this).attr("href");
$("#lean_overlay").click(function() {
close_modal(modal_id)
});>
$(o.closeButton).click(function() {
close_modal(modal_id)
});
var modal_height = $(modal_id).outerHeight();
var modal_width = $(modal_id).outerWidth();
$("#lean_overlay").css({"display": "block", opacity: 0});
$("#lean_overlay").fadeTo(200, o.overlay);
$(modal_id).css({"display": "block", "position": "fixed", "opacity": 0, "z-index": 11000, "left": 50 + "%", "margin-left": -(modal_width / 2) + "px", "top": o.top + "px"});
$(modal_id).fadeTo(200, 1);
e.preventDefault()
})
});
function close_modal(modal_id)
{
$("#lean_overlay").fadeOut(200);
$(modal_id).css({"display": "none"})
}
}
})
})(jQuery);
Here's the JS i have:
jQuery(function ($) {
var OSX = {
container: null,
init: function () {
$("input.osx, a.osx").click(function (e) {
e.preventDefault();
$("#osx-modal-content").modal({
overlayId: 'osx-overlay',
containerId: 'osx-container',
closeHTML: null,
minHeight: 80,
opacity: 65,
position: ['0',],
overlayClose: true,
onOpen: OSX.open,
onClose: OSX.close
});
});
},
open: function (d) {
var self = this;
self.container = d.container[0];
d.overlay.fadeIn('slow', function () {
$("#osx-modal-content", self.container).show();
var title = $("#osx-modal-title", self.container);
title.show();
d.container.slideDown('slow', function () {
setTimeout(function () {
var h = $("#osx-modal-data", self.container).height()
+ title.height()
+ 20; // padding
d.container.animate(
{height: h},
200,
function () {
$("div.close", self.container).show();
$("#osx-modal-data", self.container).show();
}
);
}, 300);
});
})
},
close: function (d) {
var self = this; // this = SimpleModal object
d.container.animate(
{top:"-" + (d.container.height() + 20)},
500,
function () {
self.close(); // or $.modal.close();
}
);
}
};
OSX.init();
});
I'm using this lightbox script for survey and the html includes form,
and this code make the lightbox open by clicking on button, all i need is to use the same lightbox and make it automatically open upon opening the page.
Thanks in advance
You can just trigger click() programatically on a button that shows the popup after page loads.
Example:
$(function () {
$('your_button').click();
})