Are there any problems putting the Javascript includes before CSS includes in a PHP site?

Community Expert ,
Jul 13, 2022 Jul 13, 2022

Copy link to clipboard

Copied

I am finally redoing my business website. It is all PHP, database driven. Everything is working correctly but if I put the javascript Include after the CSS Include in the header Live View will not reflect any changes in the images in the style sheets if they are driven by Javascript.

 

Here's the example, not working in Live view is the first block of code:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Home Page</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <!-- CSS -->
	<?php include('mstrIncludes/css.php') ?>
	  
	 <!-- Js -->
	<?php include('mstrIncludes/js.php') ?>
    
	 
  </head>

If I reverse the order like this Live View works.

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Home Page</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
	  
	 <!-- Js -->
	<?php include('mstrIncludes/js.php') ?>
    
    <!-- CSS -->
	<?php include('mstrIncludes/css.php') ?>
    
	 
  </head>

The PHP include files look like this:

 // The css.php File   

    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/ionicons.min.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/responsive.css">

// the js.php File

    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/min/waypoints.min.js"></script>
    <script src="js/jquery.counterup.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>

 

If I use Opt + F12 to preview the page in a browser there are no problems with having the <?php include('mstrIncludes/js.php') ?> file after the linked css file, which is more standard.

 

I think this is just a bug in the way Dreamweaver calculates the Live panel inside the app. There is no problem if I replace the <?php include code with the actual script files. For some reason, Dreamweaver is rendering the scripts before it looks at the CSS. The only other thing I can think of is that the order in which the javascript is read by Dreamweaver may be causing the problem. 

 

Anyway, it's annoying and it only took me about 4 hours to figure out why Live would not work in Dreamweaver but worked fine in my local testing server and on the web.

 

Thank you.

 

TOPICS
Bootstrap , Code , Interface , Server side applications

Views

76

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 13, 2022 Jul 13, 2022

Copy link to clipboard

Copied

In most cases, I defer JS until the document is fully loaded by placing it above the closing </body> tag instead of the <head>.  

 

Defering scripts is recommended as it typically improves page load speed. 

 

Nancy O'Shea, Product User & Community Expert
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 13, 2022 Jul 13, 2022

Copy link to clipboard

Copied

Putting the JS at the bottom prevents image changes in the Live view in Dreamweaver with PHP but does not affect the browser preview. 

 

If I close the PHP page and open it again a couple of times, sometimes the preview will show the edited images. Most of the time it won't. I think it is a preview bug. 

 

I'll just keep it above CSS until I have finished editing the CSS and the scripts, then move it to the bottom before I publish.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 13, 2022 Jul 13, 2022

Copy link to clipboard

Copied

quote

Putting the JS at the bottom prevents image changes in the Live view...


By @Rick Gerard

==========

Are you saving PHP document & refreshing the screen with F5?

 

 

Nancy O'Shea, Product User & Community Expert
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 13, 2022 Jul 13, 2022

Copy link to clipboard

Copied

The whole site is PHP, and F5 does nothing to refresh background images that have been edited when they are used by Javascript. The only fix for the Dreamweaver live view, which is very valuable for editing, is to close the file and re-open it. Sometimes it takes three or four cycles. Everything is fine if I put the PHP Include for the scripts on the site before CSS. If a script does not manipulate an image, there is no problem. 

 

My browser does not care. Only Dreamweaver is affected when a script animates an image. Dreamweaver does not catch the edited image. Even changing the image name does not help. It's a bizarre bug.

 

M1 Macbook Pro, loaded, 12.3 and Dreamweaver 21.3. 

 

When I get some time, I'll roll back a couple of builds and see if the problem is there too.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 14, 2022 Jul 14, 2022

Copy link to clipboard

Copied

I don't put background images in JavaScript so have never experienced that problem.  Did you recreate the site cache?  Site > Advanced...

 

 

Nancy O'Shea, Product User & Community Expert
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 15, 2022 Jul 15, 2022

Copy link to clipboard

Copied

LATEST

I have a script that animates a background image into position while it scales up and fades it in. That is the script that is causing the problem. So far, the only solution that works without closing the page in Dreamweaver and opening it again is to put the javascript above the CSS that controls the DIV that holds the background image. The problem only exists on the Home page because that is the only one with a fancy animated background.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 13, 2022 Jul 13, 2022

Copy link to clipboard

Copied

Top tip:
Never code a site to a design preview mode in an app/CMS which renders extra stuff to make that design mode function. The source of truth is always in the browsers your application or website is targeting.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 13, 2022 Jul 13, 2022

Copy link to clipboard

Copied

My local server is Wamp.  It parses includes in Live view no matter where they appear in the document.  I'm not using quite as much script salad as you.  Since Bootstrap 5, I've stopped using jQuery & JQ plugins except on legacy sites.  These days, plain vanilla JS is preferable.

 

When I first launch Wamp, I sometimes have to toggle between Design & Live view to get it to display.  Keyboard shortcut Ctrl/Cmd + Shift + F11.  Ultimately, it works.

 

I never use Real-Time Preview.  I disabled RTP in Preferences, it doesn't play nice with my local server.

 

Nancy O'Shea, Product User & Community Expert
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines