I think the problem is transform property. Caniuse says safari on IOS have partial support, only with vendor prefix -webkit-, but in ows script i see a code for adding vendor prefixes, so i can't get the problem with this carousel.
initializing plugin code:
$(".owl-carousel-beer").owlCarousel({
items: 2,
nav: true,
center: true,
loop: true,
dots: false,
mouseDrag: true,
stagePadding: 50,
responsiveClass:true,
responsive:{
0:{
items:1,
stagePadding: 0,
},
480:{
items:1,
stagePadding: 0,
},
768:{
items:2,
},
1024:{
items:2,
},
1380:{
items:3,
},
1580:{
items:4,
}
}
});
On ipad owl carousel looks like this.
http://i.stack.imgur.com/Q6yET.jpg
On android it looks like this perfect carousel
http://i.stack.imgur.com/gvwdF.png
Bug was fixed by putting initialization code into script in the html page.
Related
I'm needing some help with Swiper.js
I have a site I'm working on https://www.paradev.co.uk/ee-live/home-alt/ and what I want to happen is after the last slide the user can continue to scroll down to rest of the page and then on scrolling up the slider works again with the mousewheel.
I've had to add the 'slide Down' text and arrow to allow the jump to the next section. This isn't ideal and will get deleted once it's working correctly.
I've managed to get what I want by adding the function slideChangeTransitionEnd and disabling the mousweheel. This does what I want for scrolling down and past the container but I can't find a way to reverse it for scrolling back up.
var swiper = new Swiper(".mySwiper", {
direction: "vertical",
slidesPerView: 1,
direction: "vertical",
slidesPerView: 1,
speed: 1000,
spaceBetween: 0,
roundLengths: true,
centeredSlides: true,
mousewheel: {
forceToAxis: true,
sensitivity: 1,
releaseOnEdges: true,
},
mousewheel: true,
pagination: {
el: ".swiper-pagination",
clickable: false,
},
});
swiper.on('slideChangeTransitionEnd', function () {
swiper.mousewheel.disable();
});
Any ideas?
Thanks.
NOTE
The swiper is in a section with the ID of 'slider'
The section below has an ID of 'festivals'. If this offers an alternative way
I think, It's too rate to fix your issue.
I was dealing with same problem as you today.
But, finally I solved that problem.
try romove below option.
mousewheel: true,
and just leave below options.
"mousewheel: {
forceToAxis: true,
sensitivity: 1,
releaseOnEdges: true,
},"
That's how I handled the problem.
I hope it will be helpful.
Ramy's answer above worked for me, but just to add if you're using react you can add the params as below
<Swiper
className="mySwiper max-h-[400px] w-full max-w-[100vw] overflow-hidden "
direction={'vertical'}
slidesPerView={1}
spaceBetween={30}
mousewheel={{
forceToAxis: true,
sensitivity: 1,
releaseOnEdges: true,
}}
modules={[Mousewheel]}
>
I'm using html2pdf that creates pdf from html code. It uses html2canvas and jsPDF. The result is very good but slightly different from the original: the font-size and line-height are a little bit different so that the end of the page is not correct. I really need a copy if the div (that has fixed aspect to be correctly rendered on A4 pages).
Is there a way to influence the fonts in the final rendering? The way I produce pdf now is:
savePdf () {
this.pdfDialog = true
let opt = {
// if set firefox will not be able to print as pdf!...
// margin: 0,
filename: 'cv.pdf',
enableLinks: true,
image: { type: 'jpeg', quality: 0.98 },
html2canvas: {
scale: 8,
useCORS: true,
width: 310,
letterRendering: true,
},
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
}
html2pdf().set(opt).from(document.getElementById('printable-cv')).save()]
},
The solution is to add inline styles to the elements. In my case, working in vuejs I ended up with this code:
<div class="presentazione" v-html="presentation" :style="presentationFont"></div>
I would like to insert a "slider" in my hybrid app.
I need each slide to contain an image and some text. And I would like it not to be a full page slider but a partly hidden in-page slider, like on the Amazon app:
Which is the best Jquery Mobile + Phonegap friendly slider ?
(I've heard of Photoswipe, Swiper, Flexslider, ...)
Thanks
I chose Flexslider V2 and it seems to work fine : http://www.woothemes.com/flexslider/
$(document).on('pageshow','#result-page', function(){
var suggestionSlider = $('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
//slideshow: false,
itemWidth: 70,
//itemMargin: 5,
pausePlay: false,
touch: true,
//useCSS : false,
pauseOnAction: true
});
var slider = $('.flexslider').data('flexslider');
for (i = 0; i < matched.length; ++i) {
slider.addSlide('<li><a class="suggestPro" proId="'+matched[i]['id']+'" href="#"><span><img src="images/boards/'+matched[i]['imageName']+'" /></span>'
+'<p class="flex-caption">'+matched[i]['model']+'</p></a></li>'
);
}
$('.flexslider').resize();
});
However V2.2 doesn't scroll well on Android phones (touch horizontal scroll), any hint would be apreciated.
My problem is that tooltips are not hiding after the cursor is moved away from the text with tooltip. You can check this page for an example of this problem:
http://federationgenealogie.qc.ca/nous-contacter (which is an simple com_contacts page)
But the problem persists throughout the website.
I've tried to the a template override of the com_contacts and to change the way tool-tips are handled using: http://docs.joomla.org/How_to_add_tooltips_to_your_Joomla!_website
$toolTipArray = array('className' => 'mytooltipclass', 'showDelay'=>'500',
'hideDelay'=>'500', 'fixed'=>true,
'onShow'=>"function(tip) {tip.effect('opacity',
{duration: 500, wait: false}).start(0,1)}",
'onHide'=>"function(tip) {tip.effect('opacity',
{duration: 500, wait: false}).start(1,0)}");
JHTML::_('behavior.tooltip', '.hasTip', $toolTipArray); ?>
Only the 'fixed'=>true parameter works, so I get a feeling this kind of works. But since all other parameters are not working, this is not a solution.
I've also tried to make my own tooltip.js file containing:
window.addEvent('domready', function(){
//do your tips stuff in here...
var zoomTip = new Tips($$('.hasTip'), {
className: 'mytooltipclass', //this is the prefix for the CSS class
offsets: {
'x': 20, //default is 16
'y': 30 //default is 16
},
initialize:function(){
this.fx = new Fx.Style(this.toolTip, 'opacity',
{duration: 1000, wait: false}).set(0);
},
onShow: function(toolTip) {
this.fx.start(0,.8);
},
onHide: function(toolTip) {
this.fx.start(.8,0);
}
});
});
But I only get a tooltip that looks like an html alt, and changing my css files with according class names does not work.
Using a tooltip extension is not the solution because I need the default registration and contact page of joomla to work. And they both use class="hasTip"and changing this would require me to do some hacking which I can not do for durability reasons.
Using firebug and chrome, it does not seems like there is a conflict between javascripts.
Any ideas?
I'm having a strange problem with the jquery dialog popup that I'm hoping someone here can help. The pop up codes looks like below. It works fine except for one thing. When the pop-up is displayed, it will sometimes push the background content down by about the height of the the dialog window. Is there a way to prevent this from happenning?
$("#searchPopUp").dialog({
modal: true,
bgiframe: false,
autoOpen: false,
resizable: true,
position:{ my: "center", at: "center", of: window },
title: 'Choose one search criteria and<br/>populate the corresponding field below:',
width: 400,
close: function( event, ui ) {},
buttons: {
"Search": function() {
$("#viewDevicesSearchForm\\:searchCommandLink").click();
},
"Close": function() {
$( this ).dialog( "close" );
}
}
});
This is because jquery sets position to relative, and then moves the popup to the right place using top and left. I found two ways to fix the problem:
1) The easier of the two: set margin-bottom of the dialog container to negative its height.
popup.dialog({
...other options...,
open : function() {
popup.css('margin-bottom', 0 - popup.height());
},
});
2) For the dialog container, set the position to absolute and adjust the top and left. To put it in the right place, add the offset position of where it is getting placed to the top value that jquery set. The calculation is similar for left.This should do it, but different parameters to the dialog may require different calculations.