First of all I've searched for the solution but couldn't find any..
I'm new at this so I lack experience to solve this, hopefully somebody can help me :)
The Problem:
I use flexslider on my woocommerce product pages. I am having problems only when a product page is opened in mobile browser and when the slides different heights. The first slide is aprox. half the height of the rest of the slides. When opening the product page the last slide lays underneath the first slide and covers the text partially I have beneath it. (so the first picture and the bottom of the last slide are showing). When the animation loop is complete and the slider starts over again the problem is gone? This only happens on mobile views, desktop has no problems.
I have this in functions.php:
add_filter( 'woocommerce_single_product_carousel_options', 'sf_update_woo_flexslider_options' );
function sf_update_woo_flexslider_options( $options ) {
$options['animation'] = 'fade';
$options['slideshow'] = true;
$options['smoothHeight'] = true;
$options['fadeFirstSlide'] = true;
$options['slideshowSpeed'] = 8000;
$options['animationSpeed'] = 3500;
$options['animationLoop'] = true;
$options['randomize'] = false;
$options['pauseOnAction'] = true;
$options['pauseOnHover'] = true;
$options['startAt'] = 0;
$options['easing'] = "swing";
return $options;
}
I have tried several things allready like disabling smoothheight. But I cant figure out whats wrong.
I would really appreciate some help here ;)
(I'm not an experienced coder, not at all..)
One of the pages where this occurs: https://www.littleleloo.com/shop/large-contemporary-abstract-painting-angels-vs-demons/
Thanks and have a lovely day!
Best wishes,
Jessica
Related
Update: I used HtmlView and yes, the height is dynamic with the content,
but it seems like not support <img />
I'm currently using WebView to render the markdown content as below
<WebView :src="marked_content" height="1200px" margin="20dp" />
The result is fixed at 1200px with scrollBar as expected, but what I actually want to do is to render the whole markdown content with various height and without scrollBar.
Anyone may help, please?
PS: Any other methods which may render markdown content is welcome! Thank you!
Do you have control over the website, if Yes you can do this
https://discourse.nativescript.org/t/dynamic-webview-height/4215/2?u=manojdcoder
I have worked out how to do this without plugins.
There is a solution above which appends the URL with a hash containing the page height. It didn't work for me because I'm adding HTML code directly.
For example
src="<p>blah blah</p>"
This is a plain JS solution, so you'll have to rework it to get it working in Vue / Typescript.
Give your WebView an id, do not set the height, and add the "loaded" and "loadFinished" handlers.
For the loaded handler.
platformModule = require("tns-core-modules/platform");
var webViewSrcObj = {};
exports.webViewLoaded = function(webargs){
if(platformModule.isAndroid){console.log("IS ANDROID!!!"); return false;}
webview = webargs.object;
if(webview.height == "auto"){
webViewSrcObj[webview.id] = webview.src;
webview.src += '<script>function getPageHeight(){if(document.documentElement.clientHeight>document.body.clientHeight){height = document.documentElement.clientHeight}else{height = document.body.clientHeight}; ph = document.getElementById("pageHeight"); window.location = "pageHeight.html?height="+height;} setTimeout(getPageHeight, 1);</script>';
}
}
It checks the platform, and returns false if it is Android (Android works fine already).
Then it checks if the height is set to "auto" (which is default).
if it is set to auto, it will copy the HTML content. I'll explain more about this later. It then appends the html with some JavaScript code that calculates the view height, and then redirects to an empty page. It does this in order to use the query string for the page height. Make sure that page exists in your app folder to avoid any page not found errors!
Then for the onLoadeFinished handler...
exports.webViewLoadFinished = function(webargs){
if(platformModule.isAndroid){
console.log("IS ANDROID!!!"); return false;
}
webview = webargs.object;
if(webargs.url.indexOf("?height") > -1){
height = (webargs.url).split("?height=");
height = height[1].substr(0, height[1].length)/1;
webview.height = height; webview.src = webViewSrcObj[webview.id];
}
}
This will check to see if the query string height value exists.
If so it uses the height value to set the height of the webview.
And finally it adds the HTML content that was copied in the onLoaded handler.
My initial testing works well even with multiple webviews in a page.
I haven’t done extensive testing, but it might help to increase the setTimeout time if you experience any problems.
If anyone is able to improve this solution, please share your results.
EDIT: reason for this request. This edit has been added when the solution has been found for the sake of describing my needs. I had a Carousel that showed a logical sequence step 1, step 2, step 3.. That carousel is not a top of page, so I want it to stay stopped / paused until the user sees it and when it will see it, as first, I want the user to see the first slide, step 1. Nevertheless, some users (and they are not few, believe me) don't know about carousels and sliders, so I don't wanna miss their view on the subsequent slides. This is the reason for what follow.
I'm wondering about this
I have a bootstrap 3.1 carousel that is not at top of the home page.
Instead you "reach it" when scrolling down some "bootstrap' rows".
Well I'd like it to keep the carousel stopped / paused until the user will scroll the page down to where the carousel is placed (let's say the carousel height is 500 pixel, when at least the first top 150 pixels are entered in the viewable area)
when those 150 pixel have been scrolled in, the pause / stop should turn to "play" and so, if the pause between each slide is 5000 msec, after 5000 msec the next slide should turn.
According with this solution it is matter of javascript but it is not what I'm seeking for also excuse me but currently I'm not so strong with javascript and jquery, so thank you for any hint with some explanation.
EDIT 01
This script looks to be the correct and also a great solution :-), especially reading the comments at bottom of that page, but as stated above, I miss the knowledge to properly take advantage of it, thank you for any hint.
Here's a method using Intersection Observer API; it will fail silently for IE and other unsupported browsers.
setTimeout(function() {
if (IntersectionObserver === undefined) return;
const carousels = $(".carousel");
if (carousels.length === 0) return;
const RATIO = 0;
// You can set a intersection percentage, such as 0.25 for 25% visible, but
// if you want pixels, I'm using `rootMargin` in the options below
var observer = new IntersectionObserver(function (entries, observer) {
entries.forEach(function(entry) {
jQuery(entry.target).carousel(entry.intersectionRatio < RATIO ? 'pause' : 'cycle');
});
}, {
root: null,
rootMargin: '-150px 0px', // 150px visible on top or bottom of viewport
threshold: RATIO
});
carousels.each(function () {
observer.observe(this);
});
}
});
I went for the long path, self answered myself.
I've tried several plugins, but they were not effective or either they were breaking the Carousel engine.
Researching so much, finally I've landed on this jQuery plugin
http://www.jqueryscript.net/other/jQuery-Plugin-To-Determine-If-An-Element-Is-In-the-Viewport-Viewport-Checker.html
It works pretty fine, straight and as expected and there is a bonus included: the offset I was seeking for!!! (yeeeh!)
Pretty easy to implement
<script src="viewportchecker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.carousel').carousel('pause'); /** load page with carousel paused
$('.carousel').viewportChecker({
offset: 200, /** wait for the first 200 pixel of the element
to enter in the viewport
callbackFunction: function(elem){
setTimeout(function(){
$('.carousel').carousel(''); /** remove pause
},500);
}
});
});
</script>
"thank you" to myself :-)
I suppose this would also help the problem when the viewport cuts the carousel in half. ie: With a carousel at the top of the page and you scroll down, forcing the top of browser window to show only the bottom half of carousel.
Currently, when the carousel cycles, the carousel images load to the top of the viewport, not the top of the carousel container.
When you scroll back up, the carousel only displays half the image and the top half is grey. This is very annoying. Will try this to see if it fixes.
I'm trying to create functionality very similar to most websites these days.
The concept is 3 sections the size of the browser, the background images are supposed to be fixed positioned and revealed by the div scrolling up and down.
We need this to function as beautifully on mobile as it does on desktop, and it looks like Famous/angular is the solution.
Here is a pen.
http://codepen.io/LAzzam2/pen/XJrwbo
I'm using famous' Scroll.sync, firing javascript that positions the background image on every start / update / end.
scrollObject.sync.on("update", function (event) {
console.log('update');
test(event);
});
here is the function positioning the backgrounds.
function test(data){
var scroller = document.getElementsByClassName('famous-group');
styles = window.getComputedStyle(scroller[0], null);
tr = styles.getPropertyValue("-webkit-transform").replace('matrix(1, 0, 0, 1, 0,','').replace(')','');
var distanceTop = -(parseInt(tr));
var sections = document.getElementsByClassName('section');
sections[3].style.backgroundPosition="50% "+distanceTop+"px";
sections[4].style.backgroundPosition="50% "+(-(window.innerHeight)+distanceTop)+"px";
sections[5].style.backgroundPosition="50% "+(-(window.innerHeight*2)+distanceTop)+"px";
};
Any input / suggestions / advice would be wonderful, really just looking for a proof of concept with these 3 background images scrolling nicely.
That jittery-ness is unfortunate, I can't tell what would be causing the issue, except maybe the order in which events are fired?
**There are known issues, only works in -webkit browsers as of now
I think your idea to use Famous is good, but probably what I would do, would be taking a different approach to the problem.
You are solving this by touching the DOM, that is exactly what both Angular and Famous are meant to avoid.
If I had to face the same goal, I would probably use a Famous surface for the background instead of changing the property of the main one and synchronize its position with the scrolling view.
So, in your code, it would be something like this:
function test(data){
var scrollViewPosition = scrollObject.getAbsolutePosition();
var newBackgroundPosition = // Calculate the new background position
var newForegroundPosition = // Calculate the new foreground position
var backgroundSurface = backgroundSurface.position.set(newBackgroundPosition);
var foregroundSurface = foregroundSurface.position.set(newForegroundPosition);
};
I am trying to create a slider in codename one, but for some reason the slider isn't drawn, other components however, are. The code I have so far
public void start()
{
if (current != null)
{
current.show();
return;
}
mainForm = new Form("Slider and buttons");
c = mainForm.getContentPane();
c.setLayout(new FlowLayout());
Slider jSlider = new Slider();
jSlider.setMaxValue(360);
jSlider.setMinValue(0);
jSlider.setProgress(50);
jSlider.setEditable(true);
jSlider.setPreferredSize(new Dimension(300,50));
c.addComponent(jSlider);
c.repaint();
c.invalidate();
c.revalidate();
mainForm.show();
}
I'm not sure what I could have forgotten, probably just overlooking something..
Thanks in advance
EDIT: It actually does draw the slider if I choose the iPhone skin, but it doesn't do so under "lumia", anyone know why that is?
Its just missing styles under the default Windows Phone theme. Just define the style SliderFull & Slider for both selected/unselected states. We fixed this for the next update.
I've set up a flexslider as a product carousel for a fluid width site. The product items disappear sometimes when the browser window is opened up to a certain width. Details below:
Dev Site / Demo
This is regarding the center box called "Popular Products." Here's how to replicate the issue I am experiencing, in all browsers that I have tested (FF, IE, Chrome, Safari)
Close your browser window down until only 4 or 5 items show
Click the right arrow until the last product is showing (currently it's the pro-mate black sleeves)
Now, resize your browser window wider, and the products disappear at a certain point. Go smaller again and they reappear.
Notes that may help:
If you are NOT at the last item in the carousel and resize, it works fine and things stretch as needed
If the browser is wide and the max 6 products are showing and you go to the last item in the carousel, then resize small and big again, it works fine as well (so it only breaks when you go to last item when carousel is small in width, then goes big)
For the slider config, I have set a minItems of 4 and maxItems of 6.
All of the demos for flexslider are images only...I haven't seen anyone using it to display html inside each item like I have, nor do I know if it was even designed to allow this. Hopefully if other people are also doing html/multi-items insde flexslider, this will be something they've seen, or this could help them if we solve it.
Thanks for any assistance
Lauren's fix is detailed and complete, (aside from the deprecated $.broswer) but I've found that simply resetting the the carousel to slide 0 on resize is simple and elegant for responsive designs. It's easy to focus on resize events when building the site because testing, but in the real world people aren't constantly resizing their browsers while looking at a page, and those that are are a very small edge case. So this is my solution:
$(window).bind("resize", function(){
$('#flexslider').flexslider(0);
});
This seems to work in the latest Chrome, Safari, Firefox, and IE, but it's messy (mostly because I got it working in Chrome, Safari, and Firefox, and then realized IE9 was still making elements disappear) :
/*
* Flexslider BUG FIX:
* Summary: on window resize, ensure team scrollbar members are all visible
* Dependency: Flexslider v2.1 and its dependencies
*/
$(window).bind("resize", function(){
//doesnt work well in IEs, so detect these browsers
//var isIE9 = ($.browser.version == "9.0") && ($.browser.msie == true);
var isIE = $.browser.msie == true;
var tmpCurrentItem = $('#team').flexslider().data().flexslider.currentItem;
// if current item isnt the 1st one, then resizing may mean that images will disappear
if (tmpCurrentItem != 0) {
// sometimes passing a number into flexslider doesn't work and returns nothing
// in these instances, move to 0
//if NOT IE
if (isIE != true) {
var tmpFlexValue = $('#team').flexslider(tmpCurrentItem);
if (tmpFlexValue == undefined) {
$('#team').flexslider(0);
}
}
var tmpCurrentSlide = $('#team').flexslider().data().flexslider.currentSlide;
var tmpPages = $('#team').flexslider().data().flexslider.pagingCount;
//if IE
//slide number (not item number) should ALWAYS be less than paging Count
//otherwise, it needs to be reset to 0
if (isIE == true){
if (tmpCurrentSlide >= tmpPages) {
$('#team').flexslider(0); //this triggers another resize event
}
}
}
});
/* end flexslider bug fix
*/