I'm using jQuery Woodmark Plugin
to autocenter and fit list items to the browser window. I'm trying to use jQuery JScroll Plugin
to allow infinite scrolling, but the Woodmark breaks when I implement it.
I'm using Laravel, so this is my blade view
<ul class="list-grid">
<div class="scroller">
#foreach($activities as $activity)
<li>
#include('php_includes.activities.activity', ['route' => 'activity-global','user_id' => null])
</li>
#endforeach
{{ $activities->links() }}
</div>
</ul>
My JS that I'm using in my footer to make the Woodmark work is this:
<script type="text/javascript">
(function ($){
$(function() {
var $handler = $('.list-grid li');
$handler.wookmark({
// Prepare layout options.
align: 'center',
autoResize: true,
comparator: null,
container: $('html'),
direction: undefined,
ignoreInactiveItems: true,
itemWidth: 560,
fillEmptySpace: false,
flexibleWidth: true,
offset: 8,
onLayoutChanged: undefined,
outerOffset: 0,
possibleFilters: [],
resizeDelay: 50,
verticalOffset: undefined
});
});
})(jQuery);
</script>
This all works great, but when I try to add the JScroll, the appended items (?page=2) overlap the original items (?page=1) and the Woodmark for the ?page=2 items breaks.
My JS for the JScroll is this:
$(document).ready(function(){
//hides the default paginator
$('ul.pagination:visible:first').hide();
$('div.scroller').jscroll({
autoTrigger: true,
nextSelector: '.pagination li.active + li a',
contentSelector: 'div.scroller',
animate: true,
loadingHtml: '<div class="page-loading"><i class="uk-icon-spin uk-icon-spinner"></i></div>',
callback: function() {
//again hide the paginator from view
$('ul.pagination:visible:first').hide();
}
});
});
I'm very new to jQuery/JavaScript. Does anyone know why this is happening and how to fix?
Related
Opening and then closing a popup using Magnific Popup on a fullPage.js site seems to stop the autoScrolling: false, option working.
So once the pop up closes you can no longer scroll manually up and down the site. You can use the menu anchors to snap to sections but not scroll. Its normal again once refreshed but will happen again after opening a popup.
Any ideas why this happens and how to resolve it?
Magnific Popup
https://github.com/dimsemenov/Magnific-Popup
fullPage.js https://github.com/alvarotrigo/fullPage.js/
fullpage code:
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['section1','section2'],
navigation: false,
scrollOverflow:false,
showActiveTooltip:true,
slidesNavigation: false,
menu:'.menu',
fixedElements: '#header, #footer',
paddingTop:'140px',
autoScrolling: false,
scrollOverflow: false
});
</script>
Magnific Popup code
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
$('.media').magnificPopup({
removalDelay: 500, //delay removal by X to allow out-animation
gallery:{enabled:true},
image:{titleSrc: 'title'},
callbacks: {
beforeOpen: function() {
this.st.mainClass = this.st.el.attr('data-effect');
}
},
closeOnContentClick: true,
midClick: true
});
});
//]]>
</script>
MagnificPopup HTML
<img src="image.png" width="100%">
Add the plugin's initialization inside the afterRender callback as per fullPage.js FAQs:
My other plugins don't work when using fullPage.js
Short answer: initialize them in the afterRender callback of fullPage.js.
Explanation: if you are using options such as verticalCentered:true or overflowScroll:true of fullPage.js, your content will be wrapped inside other elements changing its position in the DOM structure of the site. This way, your content would be consider as "dynamically added content" and most plugins need the content to be originally on the site to perform their tasks. Using the afterRender callback to initialize your plugins, fullPage.js makes sure to initialize them only when fullPage.js has stopped changing the DOM structure of the site.
Like this:
$(document).ready(function () {
$('#fullpage').fullpage({
anchors: ['section1', 'section2'],
navigation: false,
scrollOverflow: false,
showActiveTooltip: true,
slidesNavigation: false,
menu: '.menu',
fixedElements: '#header, #footer',
paddingTop: '140px',
autoScrolling: false,
scrollOverflow: false,
afterRender: function () {
$('.media').magnificPopup({
removalDelay: 500, //delay removal by X to allow out-animation
gallery: {
enabled: true
},
image: {
titleSrc: 'title'
},
callbacks: {
beforeOpen: function () {
this.st.mainClass = this.st.el.attr('data-effect');
}
},
closeOnContentClick: true,
midClick: true
});
}
});
});
I have a dialogbox that shows the contents of an HTML file.
In this file there is a href link at the bottom.
Now everytime the dialog is shown, it automatically scrolls to that link and sets focus to it.
How can I set the scroll position back to the top after the dialog shows?
Here is the jquery code:
<script type="text/javascript">
$(function()
{
$('#faq1_pnM').dialog(
{
title: 'Frequently asked questions',
autoOpen: false,
modal: true,
show: 'puff',
hide: 'puff',
open: function() {
var e1 = $(this);
var scrollY = this.scrollHeight;
e1.scrollTop(scrollY);
e1.parent().queue(function(next) {
e1.scrollTop(scrollY);
next();
});
},
resizable: false,
closeOnEscape: true,
width: '650',
height: '500',
minWidth: '500',
minHeight: '500'
}).dialog('open');
});
</script>
As you can see, I tried with the open: function... stuff, but that doesn't do the trick.
Did I miss something?
Found the solution:
I removed the scrollY variable and replaced it for 0 (zero).
I would like to use smoothdivscroll (http://smoothdivscroll.com/index.html) for a scrolling block of images which users can open using the http://sachinchoolur.github.io/lightGallery/index.html lightbox. Unfortunately these scripts do not function when using the same selector.
<script type="text/javascript">
if (Modernizr.touch) {
$(".scroll-banner").smoothDivScroll({
hotSpotScrolling: false,
touchScrolling: true,
manualContinuousScrolling: true,
mousewheelScrolling: false
});
} else {
$(".scroll-banner").smoothDivScroll({
mousewheelScrolling: "horizontal",
mousewheelScrollingStep: -1,
easingAfterMouseWheelScrollingFunction: "easeOutCirc",
manualContinuousScrolling: true,
autoScrollingMode: "onStart",
scrollingHotSpotLeftClass: "prev",
scrollingHotSpotLeftVisibleClass: "prevVisible",
scrollingHotSpotRightClass: "next",
scrollingHotSpotRightVisibleClass: "nextVisible",
});
}
$(function() {
$(".scroll-banner").lightGallery({
loop:true,
auto:false,
pause:1000,
counter:true,
vimeoColor: "000000"
});
});
</script>
How do I get two plugins to use the same selector?
is it possible to use it this way:
$(document).ready(function() {
var scrollbanner = $(".scroll-banner");
scrollbanner.smoothDivScroll({
mousewheelScrolling: "horizontal",
mousewheelScrollingStep: -1,
easingAfterMouseWheelScrollingFunction: "easeOutCirc",
manualContinuousScrolling: true,
autoScrollingMode: "onStart",
scrollingHotSpotLeftClass: "prev",
scrollingHotSpotLeftVisibleClass: "prevVisible",
scrollingHotSpotRightClass: "next",
scrollingHotSpotRightVisibleClass: "nextVisible",
});
scrollbanner.lightGallery({
loop:true,
auto:false,
pause:1000,
counter:true,
vimeoColor: "000000"
});
});
In your code one of the functions is called when DOM is ready and the other is not. Does the behaviour/error change when changing the order of execution for adding the functionality to the divs?
I have a (royal)slider, I need to use the next/prev nav buttons to be out of the slider div.
Lets say I have the navigation nav buttons in my footer.
<div class="my-prev-button"></div>
<div class="my-next-button"></div>
Here is some documentation but I don't know how to use this!
http://dimsemenov.com/plugins/royal-slider/documentation/#api
How can I make these two buttons work with the slider (while it is outside)
<script id="addJS">
jQuery(document).ready(function($) {
$('#slider-with-blocks').royalSlider({
arrowsNav: true,
arrowsNavAutoHide: false,
fadeinLoadedSlide: false,
controlNavigationSpacing: 0,
controlNavigation: 'none',
imageScaleMod: 'none',
autoScaleSlider: false,
imageScalePadding: 0,
slidesSpacing: 0,
autoHeight: false,
blockLoop: true,
loop: true,
numImagesToPreload: 4,
transitionType: 'fade',
autoPlay: {
enabled: true,
pauseOnHover: false,
},
block: {
delay: 400
}
});
});
</script>
<div class="slider">
<div id="slider-with-blocks" class="royalSlider rsMinW">
<div class="rsContent" data-rsDelay="5000">
some div and img here..
</div>
</div>
</div>
Style your Next and Previous div's as per your need and use below code after initializing royal-slider:
// get hold of royal-slider object
var slider = $('#slider-with-blocks').data('royalSlider');
// previous button
$('.my-prev-button').on('click', function(){
slider.prev();
});
$('.my-next-button').on('click', function(){
slider.next();
});
You can find more API's here
http://dimsemenov.com/plugins/royal-slider/documentation/#api
here an example of the solution:
http://dimsemenov.com/plugins/royal-slider/slider-in-laptop/
Working on THIS Page:
newsite.702wedding.com/live/
Can't find where to remove the arrows at the bottom left, but keep the functioning slideshow obviously.
Here is what I think I/YouToo should be looking at:
(function ($, window) {
var
// ColorBox Default Settings.
// See http://colorpowered.com/colorbox for details.
defaults = {
transition: "elastic",
speed: 350,
width: false,
initialWidth: "662",
innerWidth: false,
maxWidth: false,
height: false,
initialHeight: "600",
innerHeight: false,
maxHeight: false,
scalePhotos: true,
scrolling: false,
inline: false,
html: false,
iframe: false,
photo: false,
href: false,
title: false,
rel: false,
opacity: 0.6,
preloading: true,
current: "image {current} of {total}",
previous: "previous",
next: "next",
close: "close",
open: false,
loop: true,
slideshow: true,
slideshowAuto: true,
slideshowSpeed: 3000,
slideshowStart: "Play",
slideshowStop: "Pause",
onOpen: false,
onLoad: false,
onComplete: false,
onCleanup: false,
onClosed: false,
overlayClose: true,
escKey: true,
arrowKey: false
},
Thanks for you help
There doesn't seem to be anything in the options that can help you. You will either have to modify the plugin source or find the elements that correspond to the arrows and hide them with JavaScript or CSS.
Inspecting with Chrome, it looks like the 2 arrow keys have IDs of cboxNext and cboxPrevious.
Try the following after the lightbox loads:
$("#cboxPrevious").hide();
$("#cboxNext").hide();
Or add to your CSS:
#cboxPrevious, #cboxNext{
display: none;
}
You actually can do this.
After you include colorbox.js and colorbox.css you have to initialize it. If you do it like below, you can have 3 separate options.
<script language="javascript">
$(document).ready(function(){
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".photo").colorbox({photo:true, slideshow:false, previous:false, next:false, arrowkey:false, loop:false});
$(".group1").colorbox({rel:'group1', slideshow:true});
});
</script>
class="iframe" can trigger an external page.
class="photo" can show single photo without arrow but just close button
class="group1" will display the gallery and all controls for the gallery.
Note that only group1 contains rel:group1
Others two are classes e.g. iframe and photo and they are called by iframe > true and photo > true instead of group1 that is called by rel > group1
Pay attention in the code and you will know
Go to page
<img src="image.jpg">
<img src="image1.jpg">
Best is to just set the config option rel to false. rel is a the function used to group related colorbox instances.
$(".target").colorbox({rel: false});
The simplest way to disable navigation links is by not defining the rel attribute in the HTML element and using a class selector. For example:
HTML:
<a href="photo-1.php" class="js-colorbox">
<a href="photo-2.php" class="js-colorbox">
Javascript:
$(".js-colorbox").colorbox({iframe:true});
By defining the rel attribute, colorbox will try to find all the related elements (elements that have the same rel value) and create a navigation through them.