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

PHP

Posted by Sergio Alen
Sergio Alen
26,726 Points

Including JQuery in PHP page.

Hi guys I recently made an HTML website and after that I converted it to PHP, but some JQuery scripts are not loading, is there a different way to include them?

ixrevo
ixrevo
32,051 Points

Should be the same. Could you show your code where you load jQuery and scripts?

Sergio Alen
Sergio Alen
26,726 Points 
<!DOCTYPE html>
<html leng="en-AU">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?php echo $pageTitle; ?></title>
    <meta name="description" content="Freelance Web Designer in Perth. I design simple, modern &amp; affordable Websites that do your business justice, all at a fraction of the cost of an agency.">
    <meta name="keywords" content="Web designer, UI designer, App desigbner, Front-end web develeper", "Perth">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsiveslides.css">
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,600,700' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="scripts/modernizr.custom.45133.js"></script>
    <script src="scripts/responsiveslides.min.js"></script> 
    <!-- jQuery library (served from Google) -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <!-- bxSlider Javascript file -->
    <script src="scripts/jquery.bxslider.min.js"></script>
    <!-- bxSlider CSS file -->
    <link href="css/jquery.bxslider.css" rel="stylesheet"/>

    <script>
      $(function() {
        $(".rslides").responsiveSlides();
      });
    </script>

</head>
Sergio Alen
Sergio Alen
26,726 Points

thanks Alexander, I have both copies the html version and the php. html works fine but no php... :/ been googling a lot but can't find anything

2 Answers

ixrevo
ixrevo
32,051 Points

  1. Do you use both bxslider and responsive slides sliders? Theoretically, they can conflict with each other.

  2. responsiveslides.min.js uses jQuery, so it is good idea to link this script after jQuery, not before.

  3. When you put all you JavaScript into header you get two downsides:

  4. Your js can be render blocking: https://developers.google.com/speed/docs/insights/BlockingJS

  5. If you don't use document ready style:

jQuery(document).ready(function ($) {
  // Your code goes here
});

your code can fire before the DOM of the page was loaded and rendered and therefore you code won't work. I think it's your case.

Try to move all you JS scripts, I mean <scripts> tags, just before closing <body> tag after all you content, except for the jQuery.

Sergio Alen
Sergio Alen
26,726 Points
Sergio Alen
Sergio Alen
26,726 Points

Thank you so much Alex! It's working now :) I'm using both sliders yes.. I should just use one i guess but at the moment I'm testing out..