Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 491
  • Last Modified:

"Jumpy" text caused by slider

Hi,

I have a Wordpress site with a responsive slider on the homepage. Ever since adding the slider, I am noticing the main content on the page (just below the slider) very subtly moves up and down as each slide transitions.

I've removed the slider and the issue stops so I know its something related, just not sure what. You can check out the site here: http://bit.ly/WJTPff. Anyway help would be greatly appreciated. Thanks!
0
Adam
Asked:
Adam
  • 6
  • 4
  • 2
  • +2
1 Solution
 
HagayMandelCommented:
In style.css line#618, try removing line-height: 1.5;
0
 
AdamAuthor Commented:
Thanks HagayMandel. I removed the line-height but if you look really closely, something strange is still happening with the text during the slide transition. The font weight appears to decrease by a small amount. Any other ideas?
0
 
HagayMandelCommented:
Sorry, I fail to see it.
Must be my old eyes.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
AdamAuthor Commented:
I'm using the latest version of Chrome. Not sure if its different between browsers.

It's very subtle but I can still notice it (and I know my client has already mentioned it). I've attached a screenshot if it helps. The lower block of text looks like its a bit of a lighter grey then the first. Like I said, very subtle.

Anyway, any other ideas would be great.

Text effect during slide transition
0
 
LZ1Commented:
I'm using the latest Chrome, FF and Safari as well. I checked in all browsers and I never saw any jumpy text.

Do you still have the offending slider in there?
0
 
joomla_phpCommented:
I see it. Did you know the scripts are at the end of the body just before /body and /html?

Can you move them to the head? Dunno if that's it...

There are ul li tags in the script that probably are printing invisibly due to css (I'm guessing). Does the slider have an options file or interface?
0
 
joomla_phpCommented:
If you can get rid of the call that places this:

flex-direction-nav in responsive-slider.js

(d.vars.directionNav is true so a ul of class flex-direction-nav is drawn)

I think you'll get rid of it.

Or set its container overflow to hidden, or set an absolute position on the jumpy text.
0
 
Tom BeckCommented:
I can see it very clearly in Chrome on a Mac. Not at all in Firefox in the same machine.

If you remove color: #565656; from the body definition the problem goes away. Chrome seems to be toggling between #565656 and a darker gray with each slider move. I have no explanation for it though.

body {
    color: #565656;
    font-family: 'Open Sans',sans-serif;
    font-size: 100%;
}

UPDATE:
The above comment only fixes the color change. To fix the jumpy text you need to remove position:relative from this definition.

media="all"
style.css:61@media only screen and (min-width: 768px)
.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol {
position: relative;
float: left;
margin-left: 2.762430939%;
}
0
 
AdamAuthor Commented:
Thanks for everyones suggestions. I really appreciate the help.

Just to clarify a few things:
I'm using the plugin Responsive Slider so I unfortunately don't have control over where the scripts are placed
If I can avoid it, I would much rather not edit any of the code from the plugin itself
The "jumpy" text is actually also happening to some text in my footer (see the copyright text on the left as well as the contact details on the right). So there is obviously a bigger issue that is not necessarily specific to the text right after the slider

I'm hoping the solution is just a matter of editing some of the CSS for the slider itself but I haven't quite pin-pointed the problem. I'm definitely still open to any suggestions you guys can think of. Thanks everyone!
0
 
AdamAuthor Commented:
If it helps, here is what the plugin settings page looks like. I just changed the transition setting to "fade" instead of "slide" (the only two options) and no more jumpy text! I would still prefer to go with the slide effect but hopefully that helps to narrow a few things down.

Slider plugin settings
0
 
Tom BeckCommented:
Ok, here's the only CSS change you need to make. Remove position:relative from this definition.

.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol {
position: relative;
float: left;
margin-left: 2.762430939%;
}

Tested in Chrome, Firefox and IE8 with no visual change in the page's appearance. Layout in IE8 is falling apart anyway but removing that css doesn't appear to make it worse.
0
 
AdamAuthor Commented:
Thanks for the help tommyBoy but I am still seeing the issue in the footer.
0
 
Tom BeckCommented:
Still seeing it in the three boxes section too.

To fix the footer, change from max-width:960px to width:960px in .wrap:

.wrap {
  width: 960px;
}

You have conflicting css for .inner-footer between styles.css and base.css. In any case, remove position:relative and add width:975px to #inner-footer:

#inner-footer {
-webkit-box-shadow: 0px 10px 30px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0px 10px 30px 5px rgba(0, 0, 0, 0.2);
color: #c0d0ed;
font-size: 0.85em;
padding: 20px 30px 0;
/*position: relative;*/
text-align: center;
width: 975px;
}

I don't have a fix yet for the three boxes section. I also don't have time right now to do a cross browser check on the above fix. I'm just using Developer Tools in Chrome and manipulating the css until I find the rules that affect the problem. Maybe I can take another look later today.
0
 
AdamAuthor Commented:
Thanks for the help. It didn't quite fix my problem completely but should be good enough for my purposes.
0
 
Tom BeckCommented:
I actually spent another hour looking for the root cause of the problem but did not come with it. Using a different slider plug-in would likely solve the problem.

Thanks for the points.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 4
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now