We Keep Coding

Fullpage JS, execute on different pages

I'm developing a project in AngularJS and I am using the Fullpage.js to scroll the page. So far so good, the problem is as follows:
As I have inside pages, must also use the scroll script these pages.
But even creating the function as Scope to work on all pages or creating it with different name and starting in each of the FullPage returns the following error:
FullPage: Fullpage.js can only be initialized once and you are doing it multiple times !
Does anyone know how can I do so that when I start the function of another page, I cancel the function of FullPage the previous page and start another function of the current controller again?
Follows function I'm using:
vm.rolagem_home = function(){
$timeout(function(){
$('#site').fullpage({
//Navigation
menu: '#menu',
lockAnchors: false,
//anchors:['firstPage', 'secondPage', 'trespage'],
navigation: false,
navigationPosition: 'right',
//navigationTooltips: ['firstSlide', 'secondSlide'],
showActiveTooltip: false,
slidesNavigation: true,
slidesNavPosition: 'bottom',
//Scrolling
css3: true,
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: true,
fitToSectionDelay: 1000,
scrollBar: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
continuousVertical: false,
//normalScrollElements: '#element1, .element2',
scrollOverflow: false,
scrollOverflowOptions: null,
touchSensitivity: 15,
normalScrollElementTouchThreshold: 5,
//Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: true,
//Design
controlArrows: true,
verticalCentered: true,
// sectionsColor : ['#ccc', '#fff'],
paddingTop: '0em',
paddingBottom: '0px',
fixedElements: '#header, .footer',
responsiveWidth: 0,
responsiveHeight: 0,
//Custom selectors
sectionSelector: '.section',
slideSelector: '.slide',
//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){
$(window).load(function() {
$('#loading').hide();
});
},
afterResize: function(){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
console.log(slideIndex);
if(slideIndex > 0){
$('.fp-prev').show();
}else{
$('.fp-prev').hide();
}
if(slideIndex == 6){
$('.fp-next').hide();
}else{
$('.fp-next').show();
}
},
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){
}
});
}, 1000);
}

Yes, you should call the same DIV and destroy the FullPage, so you managed to call in another div again.
if($('#agencia').fullpage() != ''){
$('#agencia').fullpage.destroy('all');
}
Working - https://codepen.io/alvarotrigo/pen/bdxBzv

How to set crop box in jquery cropper

I'm using cropper, it's a jquery plugin I found at cropper web site.
I have an image size full hd 1920w on 1080h, and I need to give the user ability to crop in fixed box size 675*1080, my question is how do I set the options of this plugin ?
I've tried to do the follow with no success:
var c1 = $('.cropper-example-1 img').cropper({
//aspectRatio: 10 / 16,
strict: true,
background:false,
guides: false,
highlight: false,
dragCrop: false,
movable: false,
resizable: false,
mouseWheelZoom: false,
touchDragZomm:false,
built: function () {
//alert(1);
// $(this).cropper('setData', 0, 0, 675, 1080,90);
// $(this).cropper('setCropBoxData', 0, 0, 1920, 1080);
}
});

After soo many trials this worked for me... i needed to set the initial width and height to 240px by 607px and this is my code.
var cropper;
var imgx;
$(function(){
var imgx = $('#cpdiv').find('img');
cropper = new Cropper(imgx[0], {
//aspectRatio: 1/2,
autoCropArea: 0,
strict: false,
guides: false,
highlight: true,
dragCrop: false,
//cropBoxMovable: false,
cropBoxResizable: false,
data:{
width: 240,
height: 607,
},
crop(event) {
console.log(event.detail.width);
console.log(event.detail.height);
},
});
});
i tried using the setCropBoxData({}) function which didnt work.. but this approach worked for me.

Try like this add autoCropArea: 0.5, and changes the built method
var $image=$('.cropper-example-1 img');
$image.cropper({
//aspectRatio: 10 / 16,
strict: true,
background:false,
guides: false,
highlight: false,
dragCrop: false,
movable: false,
resizable: false,
mouseWheelZoom: false,
touchDragZomm:false,
autoCropArea: 0.5,
built: function () {
//alert(1);
// $(this).cropper('setData', 0, 0, 675, 1080,90);
// $(this).cropper('setCropBoxData', 0, 0, 1920, 1080);
$image.cropper('setCanvasData', 0, 0, 1920, 1080));
$image.cropper('setCropBoxData', 0, 0, 675, 1080);
}
});

built: function () {
//$image.cropper('setCropBoxData', 0, 0, 675, 1080);
$image.cropper("setCropBoxData", { width: 160, height: 80 });
or
$image.cropper("setCropBoxData", { left: 0, top: 0, width: 160, height: 80 });
}

If you want to make CropBox selection fit to Canvas use this
autoCropArea: 1,
To make CropBox selection has margin 50% from the Canvas
autoCropArea: 0.5,

try to limit its height and width on cropper.js.. not the best option but it fixed my problem. When user try to minimize the cropbox, it will stop at the set size creating a not so bad solution for now..:')
minCropBoxWidth: 350,
minCropBoxHeight: 350

Working code to set crop box. I am using jQuery Cropper v1.0.0
var $image = $(".image-crop > img");
var init_data = { x: parseFloat($("#event_crop_x").val()), y: parseFloat($("#event_crop_y").val()), width: parseFloat($("#event_crop_w").val()), height: parseFloat($("#event_crop_h").val()) };
$($image).cropper({
zoomable: false,
aspectRatio: 2 / 1,
preview: ".img-preview",
crop: function(event) {
$("#event_crop_x").val(event.detail.x);
$("#event_crop_y").val(event.detail.y);
$("#event_crop_w").val(event.detail.width);
$("#event_crop_h").val(event.detail.height);
},
data: init_data
});

Lof JSliderNews jQuery - how to pause on hover?

jQuery(function($) {
var buttons = {
previous: jQuery('#lofslidecontent45 .lof-previous'),
next: jQuery('#lofslidecontent45 .lof-next')
};
window.setTimeout(function(){
$obj = jQuery('#lofslidecontent45').lofJSidernews({
interval: 4000,
direction: 'opacitys',
easing: 'easeInOutExpo',
duration: 1200,
auto: true,
maxItemDisplay: 3,
navPosition: 'horizontal', // horizontal
navigatorHeight: 40,
navigatorWidth: 70,
mainWidth: 1000,
buttons: buttons,
isPreloaded:false
});
},500);
});
How to configure pause on hover?
is there any reference for this slider?
or is there any option like hover: stop?

there is no such config like hover: "stop".
But if you look in the actual .js file, you will find
$( obj ).hover(function(){
self.stop();
$buttonControl.addClass("action-start").removeClass("action-stop").addClass("hover-stop");
}, function(){
if( $buttonControl.hasClass("hover-stop") ){
if( self.settings.auto ){
$buttonControl.removeClass("action-start").removeClass("hover-stop").addClass("action-stop");
self.play( self.settings.interval,'next', true );
}
}
} );
That means, hover stop functionality is default there.

jquery bookshelf Slider modifications

I am creating book shelf using jquery bookshelf Slider. Its Working good but i need some modifications in my book self.
Our Book self demo link
Book shelf demo
Our modifications are given below :
Default load time title and icons are hide.
if we need to click title or icons. show the title or icon.
Our Script is given below
<script type="text/javascript">
jQuery(document).ready(function() {
//define custom parameters
$.bookshelfSlider('#bookshelf_slider', {
'item_width': '100%', //responsive design > resize window to see working
'item_height': 320,
'products_box_margin_left': 30,
'product_title_textcolor': '#ffffff',
'product_title_bgcolor': '#c33b4e',
'product_margin': 20,
'product_show_title': true,
'show_title_in_popup': true,
'show_selected_title': true,
'show_icons': true,
'buttons_margin': 15,
'buttons_align': 'center', // left, center, right
'slide_duration': 800,
'slide_easing': 'easeOutQuart',
'arrow_duration': 800,
'arrow_easing': 'easeInOutQuart',
'video_width_height': [500,290],
'iframe_width_height': [500,330]
}
);
});//ready
</script>
We are already try to change the 'product_show_title': true, to
'product_show_title': false,
But its not working for me. so please advise..

Set the opacity of the title and icons properly after plugin initialization.
//define custom parameters
$.bookshelfSlider('#bookshelf_slider', {
'item_width': 605,
'item_height': 720,
'products_box_margin_left': 30,
'product_title_textcolor': '#ffffff',
'product_title_bgcolor': '#c33b4e',
'product_margin': 30,
'product_show_title': true,
'show_title_in_popup': true,
'show_selected_title': true,
'show_icons': true,
'buttons_margin': 15,
'buttons_align': 'center', // left, center, right
'slide_duration': 800,
'slide_easing': 'easeInOutExpo',
'arrow_duration': 800,
'arrow_easing': 'easeInOutExpo',
'video_width_height': [600,600],
'iframe_width_height': [600,600]
}
);
$(".show_hide_titles, .show_hide_icons").css('opacity','0.5');
$(".product_title, .icons_sprite").css('opacity','0');
DEMO

Merging two "(document).ready(function()"s

I have two jquery/javascript codes but I couldn't merge them. Everytime one of the functions was disable. How can I merge the codes. Please help me, thanks.
First file:
jQuery.noConflict();
jQuery(function(){
jQuery('ul.menu-primary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
});
jQuery(function(){
jQuery('ul.menu-secondary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
});
//first ready function
jQuery(document).ready(function() {
jQuery('.fp-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
});
});
second file:
function checkCopyRight(/*string*/url){
var copyrightLinks = $("a[href='" + url + "']");
return copyrightLinks.length > 0;
}
// second ready function
$().ready(function(){
if(!(checkCopyRight("http://e1.com")&&
checkCopyRight("http://e2.com")&&
checkCopyRight("http://e3.com"))){
alert("...");
}
});
I get a "Your post does not have much context to explain the code sections; please explain your scenario more clearly." message. There any character limit?

You actually have 3 Ready functions and one wannabe ready function. I've rewritten your code as it should be in one ready call. Give it a try:
function checkCopyRight(/*string*/url){
var copyrightLinks = jQuery("a[href='" + url + "']");
return copyrightLinks.length > 0;
}
jQuery.noConflict();
jQuery(function() {
jQuery('.menu-primary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
jQuery('.menu-secondary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
jQuery('.fp-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
});
if(!(checkCopyRight("http://e1.com") && checkCopyRight("http://e2.com") && checkCopyRight("http://e3.com"))) {
alert("...");
}
})
$().ready(handler) (this is not recommended) [1]
Also, keep in mind, You dont really need noConflict unless you are using another JavaScript Library like MooTools or Prototype. A Plugin like Superfish is not relly a reason to call no Conflict. If there is no conflict, you can use $ as shorthand for jQuery instead of constantly rewriting jQuery.
$(document).ready is the same as JavaScript's .load function and since jQuery 1.0 you can use the shorthand version jQuery(function() { /* do work */ }) or $(function() { /* do work */ })
For more information:
.ready() (also info on noConflict)
.noConflict() (API Page)
My Blog on using jQuery (needs work, hoping to edit it this weekend, sorry)

jQuery(document).ready(function() {
jQuery('.fp-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
});
if(!(checkCopyRight("http://e1.com")&&
checkCopyRight("http://e2.com")&&
checkCopyRight("http://e3.com"))){
alert("...");
}
});
You need to import the second file first since the first file uses a function inside second file.