Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Posted by mm4
mm4
8,600 Points

Flexslider problems

One of my flexslider arrows is hiding beneath the image in my slideshow. I know it's there because I see it for a split second but then it disappears. The other arrow, however, is perfectly fine - I can see it and it's perfectly functional. That's why I thought the problem couldn't be z-indexing but I tried that anyway - didn't work. Has anyone come across this problem? I only began facing it when I removed scripts and CSS links from the head tags and move everything to functions.php. Now I'm confused as to how exactly I might solve this...

2 Answers

Sander de Wijs
PLUS
Sander de Wijs
Courses Plus Student 22,267 Points
Sander de Wijs
Sander de Wijs
Courses Plus Student 22,267 Points

It could have something to do with the way your script is loaded on the page. You say you removed the code from the head of your original HTML page. Does Wordpress load your flexslider script in the footer or header?

mm4
mm4
8,600 Points

So I have $in_footer set as false because when I set it to true, there was this weird lag time between when the dots beneath the flexslider switched and when the slide itself changed. The weird thing is, I realized I was missing <footer> tags in footer.php and when I added those, the other arrow appeared again. So there must be some dependence I'm missing here...

mm4
mm4
8,600 Points

Actually I lied. The problem's back, even though all I did was add some code in between the <footer> tags.

mm4
mm4
8,600 Points
mm4
mm4
8,600 Points

Hello,

Unfortunately I'm still having this problem. Gonna resort to posting code now since nothing I've done so far is working.

    // Load the Theme CSS
function theme_styles() {
    wp_enqueue_style( 'normalize', get_template_directory_uri() . '/css/normalize.css' );   
    wp_enqueue_style( 'grid', get_template_directory_uri() . '/css/grid.css' ); 
    wp_enqueue_style( 'googlefonts', 'http://fonts.googleapis.com/css?family=Lato:300|Open+Sans' ); 
    wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css' );

    wp_register_style( 'flexslider', get_template_directory_uri() . '/css/flexslider.css' );
    if( is_front_page() ) {
        wp_enqueue_style( 'flexslider' );
    }
}

// To avoid jQuery conflicts and ensure it doesn't load multiple times for different plugins (I found this on http://digwp.com/2009/06/use-google-hosted-javascript-libraries-still-the-right-way/)
if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
   wp_deregister_script('jquery');
   wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js", false, null);
   wp_enqueue_script('jquery');
}

// Load the Theme JS
function theme_js() {
    //ignore the comment I made earlier about lag time; doesn't appear anymore
    wp_register_script( 'flexslider', get_template_directory_uri() . '/js/flexslider.js', array('jquery'), '', true);
    if( is_front_page() ) {
        wp_enqueue_script( 'flexslider' );
    }   
    wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery'), '', true );
}

add_action( 'wp_enqueue_scripts', 'theme_styles' );
add_action( 'wp_enqueue_scripts', 'theme_js' );

Is there something obvious I overlooked? I just want my slider to work properly :(