Okay
  Public Ticket #1264808
Text not showing up on slider
Closed

Comments

  • Daniel started the conversation

    Hi there, 

    I created a simple slider and insert it into my one page site. It consists of nothing but text and 3 images. The only thing that’s showing in the slider are the images, no text.

    I checked system status and it didn’t tell me anything. I’m running LayerSlider 6.4.0 bundled with my theme called North which also includes Visual Composer. My theme is up to date, WordPress is up to date version 4.8, Visual Composer up to date version 5.2.

    To debug I disabled all my plugins except Visual Composer which is needed for the layout and I got the same result, no text. I tested on Chrome, Firefox and Safari with the same result. All browsers are up to date. I’m running Mac OS 10.9.5. I also cleared my cache which had no effect. 

    Also, I have the slider set to "start only in viewport" but upon investigation (I can see the images animate), the slider actually starts when the page loads, not when it becomes visible on the viewport. 

    You can see the problem here: http://neptunemedia.net/NM-test-site/

    The slider I made is the second section down, white background, after the home/top slider. As you can see, only images appear.

    Thanks for your help!

  • Daniel replied

    This is the correct ticket/issue. You can delete my other one.

    Thanks for your help. 

  • [deleted] replied

    Hello Daniel,

    The problem is that you have selected the P layer type but also wrapped the inner content in <p> tags. The plugin generates these tags and wraps the elements automatically when you choose a certain layer type, you do not have to add them again, otherwise it could generate problems like this unfortunately. To solve this you will have to delete the tags from the field and only use the text itself.

  • Daniel replied

    Hi,

    I don't understand. All I did was choose the <p> type for the text and typed the text into the text window. I did not manually insert any <p> tags anywhere, there would be no reason for me to do that. It would seem to me that these <p> tags are manually inserted by either LayerSlider or Visual Composer or my theme. 

    The only place where I can see these additional <p> tags is when I "view source" in Chrome.  I do see what appear to be additional <p> tags wrapping all my LayerSlider text and those <p> tags have no styling. I'm assuming these are the tags you're talking about? 

    How or where do I take these <p> tags out? And how do I prevent this from happening in the future since I didn't manually insert these when I created my Slider? I can't find any place to access these <p> tags whether in Visual Composer or LayerSlider.

    Thanks!

  • [deleted] replied

    That is strange, in this case it's possible that your theme is applying these additional tags on the slider and its content.

    Please try to select the HTML layer type and add only the text into it. It will wrap the content in a DIV so the additional P tags shouldn't be a problem. 

    Let us know if this did the trick.

  • -o-ZEPHYROS-o- replied

    Hi there,

    Your suggestion to select HTML as the text type instead of TEXT worked perfectly. Thanks for that. 

    I still have two outstanding issues:

    1) Right under the main heading "About Neptune Media" is a paragraph that begins "NEPTUNE MEDIA IS THE WEB DEVELOPMENT AND...." I have inserted break tags to break the paragraph as follows:

    NEPTUNE MEDIA IS THE WEB DEVELOPMENT AND</br>
    VISUAL & PRINT DESIGN STUDIO OF DANIEL WHITTAKER</br>
    SPECIALIZING IN INNOVATIVE ONLINE USER EXPERIENCE AND UNIQUE PRINT DESIGN

    As you can see on my website, this paragraph isn't breaking at those spots, it just ends at the right margin of the slider. It doesn't even recognize that it's in a text block DIV 900px wide. If I turn WordWrap on the paragraph wraps like a normal word wrap but not where I want it, it just wraps at the last word on each line. I want it to break where I insert the break tags. 

    2) I have the slider set to "start only in viewport" but it's actually starting when the page loads, not when it becomes visible on the viewport. So, when you scroll down to the About Neptune Media section, everything has already animated. Any ideas on why this is happening?

    Thanks!



  • [deleted] replied

    1. You will need to use the Word-wrap option. The line breaking is turned off by default so you have to enable it on the required layers. This setting is located in the Styles tab.

    2. Unfortunately it is caused by the preloader solution that is applied on your whole site. The website only takes up it's actual scrollable size when everything is preloaded. But in the meantime the slider in the background detects that is is already in viewport, as there is no scrollable content due to the preloader.

  • Daniel replied

    Thanks for your reply, I have been on vacation.

    1. As I stated in my last message, I did turn on WordWrap and it doesn't wrap... the text stays on one line and as such doesn't display all the text, it just cuts off at the end of the first line even though I have inserted break tags. Please look at my website to see this. I should be able to break this text wherever there is a break tag. 

    2. This doesn't make sense to me. Every website uses pre-loading for speed optimization. There are also pre-loaders built into every browser. There is no setting in my theme to control pre-loading, this preloading is coming from LayerSlider. From a post by another user on January 19th you specifically say:  "The lazy load and preload options have been removed in version 6 (they are enabled by default now), that is why you can no longer find them in the settings." 

    There is a definitive viewport on every site defined by the user's visible area of a web page, separate from what is pre-loaded. I have visited many sites that are one page sites where animation doesn't happen until those animated objects hit the viewport. Can you please give me a solution to work around this since the problem is coming from pre-loading defined by LayerSlider? 

    Thank you!

  • [deleted] replied

    1. Please set up a temporary WP login for us, so we can investigate this problem further from the back-end. Make sure the reply that contains the credentials is private, so others can't see it.

    2. Unfortunately there is not much we can do about this error from our end. As I've explained, your theme's preloading is causing the slider to not detect the viewport correctly, resulting in this issue. There is difference between preloader and preloader, and the one that your theme uses was built this way, sadly it's interfering with our plugin. The error is not related to LayerSlider, it is caused by your theme's custom preload method that it applies on the whole site.
    I'd recommend to contact your theme author with this case, to see if they can provide you with an option or workaround, that you can use to prevent their preloading applied on the slider.

  •   Daniel replied privately
  • Daniel replied

    1. Any word on why I can't get text to break with <br> tags?

    2. Good news. The developers of my North theme disabled the preloading and the slider now animates only in the viewport. Problem fixed. 

    Thanks!

  • Daniel replied

    Oops. Sorry. It appears that disabling the pre-loader also fixed the text not breaking issue. 

    All problems fixed. 

    Thanks!

  • [deleted] replied

    Thank you for the feedback, glad the problem has been resolved. 

    If you need further assistance please let us know.