Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

"Jumpy" text caused by slider

Posted on 2013-02-03
17
Medium Priority
?
490 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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 1000 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

Tech or Treat! - Giveaway

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
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 …

610 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