Solved

"Jumpy" text caused by slider

Posted on 2013-02-03
17
477 Views
Last Modified: 2013-02-11
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
Comment
Question by:Adam
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
  • 2
  • +2
17 Comments
 
LVL 16

Expert Comment

by:HagayMandel
ID: 38848982
In style.css line#618, try removing line-height: 1.5;
0
 
LVL 1

Author Comment

by:Adam
ID: 38849031
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
 
LVL 16

Expert Comment

by:HagayMandel
ID: 38849066
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!

 
LVL 1

Author Comment

by:Adam
ID: 38849086
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
 
LVL 30

Expert Comment

by:LZ1
ID: 38862436
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
 
LVL 13

Expert Comment

by:joomla_php
ID: 38862459
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
 
LVL 13

Expert Comment

by:joomla_php
ID: 38862473
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38862490
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
 
LVL 1

Author Comment

by:Adam
ID: 38863331
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
 
LVL 1

Author Comment

by:Adam
ID: 38863363
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38863625
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
 
LVL 1

Author Comment

by:Adam
ID: 38865400
Thanks for the help tommyBoy but I am still seeing the issue in the footer.
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 38865568
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
 
LVL 1

Author Closing Comment

by:Adam
ID: 38875723
Thanks for the help. It didn't quite fix my problem completely but should be good enough for my purposes.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38875888
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn how to count occurrences of each item in an array.

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question