Solved

"Jumpy" text caused by slider

Posted on 2013-02-03
17
471 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
  • 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
 
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
delete database record with modal 21 34
gif overlay 3 32
Login area of a page 4 20
Bootstrap input box width 2 16
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

762 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now