I am using accessible slick slider which functions the same as regular slick slider but has some additional fields
I cannot for the life of me work out what is going on. Everything works perfectly, but when I add breakpoints, the arrows just stop working entirely, including on page refresh.
I tried adding
mobileFirst:true
and while the arrows started working again, it reverted back to the original slides to show and slides to scroll.
Note - I have called the buttons outside of the container so they can be positioned how I want.
Any help would be greatly appreciated
( function( $ ) {
class SlickCarousel {
constructor() {
this.initiateCarousel();
}
initiateCarousel() {
$( '.log-book-carousel' ).slick( {
autoplay: false,
slidesToShow: 2,
slidesToScroll: 1,
arrows: false,
dots: false,
regionLabel: 'Latest news stories',
instructionsText: 'Changing the slide of this carousel will scroll through each news story item one by one. You can click each one to read more.',
responsive: [
{
breakpoint: 1100,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
}
]
});
$('.slide-prev').click(function(e){
//e.preventDefault();
$('.log-book-carousel').slick('slickPrev');
} );
$('.slide-next').click(function(e){
//e.preventDefault();
$('.log-book-carousel').slick('slickNext');
} );
}
}
new SlickCarousel();
} )( jQuery );
edit: Adding mobile first makes the buttons work on mobile but NOT desktop
Related
I have create a simple CKEditor widget that highlights the elements that have the class "pink".
I have also added a "Pinkify" button to the toolbar, which replaces the HTML of the selected element with some other elements that have the class "pink".
What I observe when I click the button is that widgets are not created for the freshly inserted elements. However, when I toggle between Source mode and WYSISYG mode, the widgets get created.
See the jsfiddle and its code:
CKEDITOR.replace('ck', {
allowedContent: true,
extraPlugins: 'pink'
});
CKEDITOR.plugins.add('pink', {
requires: 'widget',
init: function(editor) {
editor.widgets.add('pinkwidget', {
upcast: function(element) {
return element.hasClass('pink');
}
});
editor.addCommand('pinkify', {
editorFocus: 1,
exec: function(editor) {
var selection = editor.getSelection(),
selectedElement = selection.getStartElement();
if (selectedElement) {
selectedElement.setHtml("Let's have some <span class=\"pink\">pink</span> widget here!");
editor.widgets.checkWidgets(); // needed?
}
}
});
editor.ui.addButton('pinkify', {
label: 'Pinkify',
command: 'pinkify'
});
},
onLoad: function() {
CKEDITOR.addCss('.cke_widget_pinkwidget { background: pink; }');
}
});
I am aware of this question on Stackoverflow, but I can't get it to work with setHtml called on an element. Can you suggest how to modify the code so that widgets get created as soon as the HTML is updated?
According to the CKEditor team, it is normal that CKEDITOR.dom.element.setHtml does not instanciate widgets (see Widgets not initialised after calling setHtml on an element).
So the workaround they gave me was to rewrite the code that insert HTML in place of the selected element to:
if (selectedElement) {
selectedElement.setHtml("");
editor.insertHtml("Let's have some <span class=\"pink\">pink</span> widget here!");
}
For those like me who didn't know, editor.insertHTML inserts HTML code into the currently selected position in the editor in WYSIWYG mode.
Updated jsFiddle here.
I have a website where I am using several lightboxes on it. It works everywhere really good, also in IE7 :), but in mobile it doesn't show the close button.
My code is the following:
$(".fancybox").fancybox({
beforeShow:function(){
$('html, body').unbind("mousewheel", horizontalScroll);
},
'arrows':true,
'overlayShow': true,
'autoScale': true,
'autoDimensions': false,
'modal': true,
'autoSize' : false,
'width' : '90%',
'showCloseButton' : true,
'hideOnOverlayClick':true,
'keys': {
"next": [13, 32, 34, 39], // enter, space, page down, right arrow, down arrow
"prev": [8, 33, 37] // backspace, page up, left arrow, up arrow
},
afterShow : function() {
$('.fancybox-skin').append('<a title="Close" class="fancybox-item fancybox-close" href="javascript:jQuery.fancybox.close();"></a>');
},
afterClose : function() {
$('html, body').bind("mousewheel", horizontalScroll);
}
});
The website is: http://ahnenwand.hiltl.ch but not all of the pictures are linked to a lightbox. Click on the plus sign, from topleft go 3 to the right and 8 down and there is a image that opens a lightbox to test it.
I don't have any JS mistake and the sprite is also loading. On the topright corner of the lightbox (on mobile) is the area where I can click to close it, but the close button doesn't show up.
Here is a little fiddle, also here the close button doesn't show up on mobile (it works only once then it must be reloaded - sorry)
http://jsfiddle.net/bauralex/f2sx36gz/16/
I hope anyone has an Idea what could be wrong here
Thank you very much
Alex
I have the same problem with a nonmodal box (V 2.1.5). As I found out, the code for the close button is missing in the mobile context, and referencing the background-image doesn't work. My solution was to make the changes via the afterLoad callback:
afterLoad:function(curr, prev) {
if(!jQuery('a.fancybox-close').length) {
jQuery('.fancybox-outer').after('<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>');
jQuery('.fancybox-close').css('background-image','url(/js/fancybox2/fancybox_sprite.png)');
}
}
Make sure to adjust path to the fancybox_sprite.png in your environment.
exactly copying source code from Pnotify project page, and put in in my page.
all links to jqueryUi and Pnotiy and other relative files were done and correct.
but when hovering on element for showing tooltip, toltip box goes to top-right of page;it's fixed and do not care of cursor position !
can ya help ?
$('span.required').bind({
mouseenter: function() {
var ttText = $(this).siblings('.required').html();
var ttTitle = "it's required";
tooltip = $.pnotify({
pnotify_title: ttTitle,
pnotify_text: ttText,
pnotify_hide: false,
pnotify_closer: false,
pnotify_history: false,
pnotify_animate_speed: 100,
pnotify_opacity: .9,
pnotify_notice_icon: "ui-icon ui-icon-comment",
pnotify_stack: false,
pnotify_after_init: function(pnotify){
pnotify.mouseout(function(){
pnotify.pnotify_remove();
});
},
pnotify_before_open: function(pnotify){
pnotify.pnotify({
pnotify_before_open: null
});
return false;
}
});
tooltip.pnotify_display();
},
mouseleave: function() {
tooltip.pnotify_remove();
}
});
Stacks are how you change the positioning.
Browse to http://pines.sourceforge.net/pnotify/.
Scroll down to "Advanced Demos".
Examine "Examples of custom stacks" bit. Click the buttons there.
View Source on the page to get to the code.
The tooltips do not use stacks like all the other notifications do. Instead you need to set up the position through CSS.
tooltip.get().css({
'top': event.clientY + 12,
'left': event.clientX + 12
});
I'm having some issues when trying to renew the nivoslider when loading dynamic content. What I need to do is update the slider when I load new content in through an AJAX call.
So basically I have a div that gets new data in from a function AJAX call and after the load I would need the slider to reinitialize.
What I do right now is this:
if ($('#imageSlider').find('div.nivo-slice').length > 0) {
$('#imageSlider').data('nivoslider').stop();
$('#imageSlider').removeData('nivo:vars');
$('#imageSlider').removeData('nivoslider');
$('#imageSlider').attr("class","");
$('#imageSlider').attr("style","");
}
$('#imageSlider').html(newImages);
and then a call to $('#imageSlider').nivoSlider();
It kinda works but the rotation gets stuck on one picture only and sometimes it just doesn't load. Any help on this would be greatly appreciated.
I found a solution for that . Instead of replacing only images inside I replaced html inside . So like made new nivoslider content and it works for me. Then initlize again nivoslider with all parameters
After ajax response -
j('.slider-wrapper').html('');
j('.slider-wrapper').html(request);
j('#slider').nivoSlider({
effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 5, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
directionNavHide: true, // Only show on hover
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
controlNavThumbsFromRel: false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav: true, // Use left & right arrows
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
captionOpacity: 0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
Im going to MVC route with Sencha. I have a Viewport panel initialized much like the twitter example:
/**
* #author Jeff Blake
*/
Ext.regApplication('App', {
defaultTarget: 'viewport',
defaultUrl : 'Viewport/index',
name : 'App',
icon : "mobile/public/resources/images/icon.png",
phoneStartupScreen : "mobile/public/resources/images/phone_startup.png",
//useHistory : false,
//useLoadMask : true,
launch: function() {
Ext.Viewport.init();
Ext.Viewport.onOrientationChange();
this.viewport = new App.Viewport({
application: this
});
Ext.dispatch({
controller: 'User',
action : 'index'
});
}
});
/**
* #class App.Viewport
* #extends Ext.Panel
* This is a default generated class which would usually be used to initialize your application's
* main viewport. By default this is simply a welcome screen that tells you that the app was
* generated correctly.
*/
App.Viewport = Ext.extend(Ext.Panel, {
id : 'viewport',
layout : 'card',
fullscreen: true,
cardSwitchAnimation: 'slide',
initComponent: function() {
Ext.apply(this, {
dockedItems: [
{
// Top Bar
dock : 'top',
xtype : 'toolbar',
title : 'Whats Good',
items: [
{
text: 'About'
},
]
}
]
});
App.Viewport.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('App.Viewport', App.Viewport);
New Code:
if (!App.viewport.getDockedComponent(homeBar)) {
var homeBar = new App.HomeBar();
App.viewport.addDocked(homeBar);
}
I want to be able to conditionally apply DockedItems (toolbars) based on which Type of panel is currently rendered in the Viewport. EG: one for Login, Home screen, detail screen, etc.
I've tried using Ext.apply(App.Viewport, { dockedItems: [App.LoginBar]});
But that doesn't work. Currently it works to add the toolbar to the currently rendered Panel and setting it to fullscreen, but unfortunately transitions and things behave weirdly as the structure is
Panel
Toolbar
Panel
Toolbar
/end Panel
/end Panel
Does anyone have a suggestion?
To programmatically add a docked item, I would recommend using
viewport.addDocked(loginBar);
Methods like this are far better than trying to update the original configuration of the component.
Then there is also a .removeDocked() method to take it off again.
Also make sure you are dealing with instances of the components, not trying to update their class.
To get the reference to your application's viewport, you can come in through the 'App' namespace, which is automatically created by the name property of the regApplication config.
So you could make your toolbar button do this for example:
{
text: 'About',
handler: function() {
App.viewport.getDockedItems()[0].setTitle('Pressed!');
}
},
Which would make the title change when you press the button.
But now I better understand what it is you are trying to do, I recommend you don't dock a single, dynamically-changed toolbar to the outer viewport, but add individual toolbars to each of the (card) panels in it. That way they get to slide nicely too ;-)