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.
Related
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
When I navigate from page A to page B, I want to slide in the page B from the bottom upwards.
How can I do this in Ionic 3?
I have now
this.navCtrl.push(PageB,
{session: this.session},
{animate: true,
animation: 'transition',
duration: 500,
direction: 'forward'}
);
I tried to change the 'forward' in 'up' but that does not do anything.
Currently I am testing in Chrome browser.
Thanks
I think the navController is the wrong choice for this.
Mostly, the use case for sliding a page from bottom to top is when you want to show modal page. This can be done with the ModalController:
constructor(private modalCtrl: ModalController) {
}
showModal(): void {
let modal = this.modalCtrl.create(PageB, options);
modal.present();
}
I'm using the Cytoscape Qtip extension to display qtips when you click nodes.
Usually you can prevent qtips from hiding when with the hide: false option. When this is used, you can still hide the qtips if it has a button.
However, when using cytoscape, this appears to not work. When clicking else where, a hide event will be triggered.
cy.elements().qtip({
content: function(event, api){
api.set('content.button', true);
return 'Example qTip on ele ' + this.id();
},
position: {
my: 'top center',
at: 'bottom center'
},
hide: false,
style: {
classes: 'qtip-bootstrap',
tip: {
width: 16,
height: 8
}
}
events: {
hide: function(event, api){
console.log(event);
}
}
});
I can prevent the hide event from following through with event.preventDefault(), but this will also stop the the close button from hiding the event, which is a bit messy.
Any idea while it's behaving this way?
Here's the quick and dirty to make this work (closes on button close only) if you need it:
events:{
hide: function(event, api){
if(event.originalEvent.target.parentElement.parentElement.id != this[0].id){
event.preventDefault();
}
}
Explanation:
Any mouse clicks will trigger a hide event all visible qtips.
We look at target of that mouse click (event.originalEvent.target.parentElement.parentElement.id) to see it close box of the qtip that is currently try to close. If it's not then we preventDefault().
This is potentially pretty bed performance wise, because it run these preventDefault() for every open qtip on every mouse click.
Remember that because this wraps Qtip on non-DOM elements, bindings to Cytoscape graph elements must be made. These bindings are outside of the DOM and outside of Qtip's control (for example, the hide case).
Did you try setting the hide event to the empty string ""?
Cleanest solution I've found is to give a garbage event for the hide event.
Using null, false or "" all don't seem to work.
hide: {
event: "asdf" //garbage event to allow hiding on close button click only
},
New to firefox development and trying my best to figure this out.
Say I want to call a function in tap_browser.js that will modify the DOM when the user clicks on the toolbar widget, how would I do this?
This is the code I have so far
require("toolbarwidget").ToolbarWidget({
toolbarID: "nav-bar", // <-- Place widget on Navigation bar
id: "tap-icon",
label: "Tap",
contentURL: data.url("favicon.png"),
contentScriptFile: [data.url("tap_browser.js")]
});
I'm currently using a library to create the toolbar widget here: https://github.com/Rob--W/toolbarwidget-jplib
I don't know too much SDK but I helped someone with something that does. Check this out:
var my_wid = widgets.Widget({
id: "my-widget",
label: "CLIIIICK",
content: "CLICK ME",
width: 100,
onClick: function()
{
require('sdk/window/utils').getMostRecentBrowserWindow().gBrowser.contentDocument.documentElement.innerHTML = 'hi';
}
});
what this does is it shows a panel with 0 width and height, you can put stuff in there, and when it shows it executes the onShow function to change the html of the current document. its not recommended to use innerHTML, addons arent accepted. Im just showing you a quick and dirty copy paste example. One that is different from the sdk doc page "Modifying the Page Hosted by a Tab"
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
});