Recommendation for Include in document <head>

Exporting & Previewing
1

Situation:

  1. jQuery has been added to the resource folder.
  2. Uncheck Include in document

Reason: When I export my Hype document, the destination is WordPress, and since WordPress already includes jQuery and other js scripts, I do not want my exported Hype document to contain this script et al.

However, I do want to preview my document in Hype which means I MUST check the Include in document box.

Recommendation: On export, could you provide the option of which resource files to exclude/include?

Thanks!

2 Likes
2

Hi Quint!


`File Menu > Advanced Export...`

Will offer you the option to refine your exported files. In my set-up in~excluding jQuery is an option.

But You already seem to reference this in your post - so maybe I am missing something. My preview still works fine, only at export do I uncheck it.

3

@JimScott,

Thank you for your reply. I have taken a look at Advance Export, however, most of my resources are dimmed out. For example, I cannot de-select the jquery script. In your snapshot, it would appear this would be the case as well?

It does seem as though this would be the place to customize the export content. Thank you again for your response!

4

If you look at slice-export-options section in the documentation.

You will see it says

If a resource checkbox is disabled that means it is referenced by an element or animation in one of the selected scenes.

I was going to say in the mean time add this to your head file.

 <script type="text/javascript">
	
 (function(){
	 console.log(window.location.host);
	  if (window.location.host  !=  "markosx.com") { 
	
 var head = document.getElementsByTagName("head")[0];
    var   script = document.createElement("script");
	  
	 script.type = 'text/javascript';
	   script.src = 'https://code.jquery.com/jquery-2.2.3.js';
	head.appendChild(script);
 }
	
	})();
	</script>

But because of timing you would also need to add a timeout around any js that also needed to load onload

i.e

 setTimeout(function(){ 
 
	 var text = $("#text").html();
     console.log(text);
	
	}, 90);

Also I have not tested this on wordpress. You would need to replace my host in the above script with your own host.

1 Like
5

Thanks for the comprehensive answer, Mark. I did not see that part of the documentation… which makes sense. Given that, I would want to override it in specific cases given that I know that the destination has already loaded scripts, ala jQuery and underscore in WordPress.

It’s just a recommendation with regard to workflow.

P.S. I’d probably appreciate your code even more if I were a developer instead of a hacker. :slight_smile:

6

@quint @MarkHunte

If a resource checkbox is disabled that means it is referenced by an element or animation in one of the selected scenes.

You can get around this "disabled" limitation - it requires a different setting in the "Advanced Export..." dialog (see attachment) - but the one item that is always checked is the jQuery resource. As Quint requested would be nice to cut this loose also.

Thanks Mark for the script.

Also quint - would using a CDN for jQuery instead be an option while You are developing your project? At export You could simply comment out or remove the code in the <head>. If it is not an option, why not? (Trying to learn here - thanks!)

Below: two scenes are selected at far left under Custom Slices; all Resources shown (at right) are used in these two scenes. All are deselectable - except for the jQuery.

Advanced Export - more.png847×454 69.9 KB

1 Like
7

Just use a CDN in your Head HTML as @JimScott has suggested.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.3.min.js"></script> <!-- latest stable release -->

Then delete it or comment it out when exporting

8

DBear,
Thanks for your recommendation. I understand and that procedure is spot on. However, I would like to set it once and not have to keep remembering that I have to delete it or comment it and others out every single time I export. I am exporting repeatedly because my Hype document and scripts are interfacing with the WordPress database. This cannot be done in Preview. And I am constantly testing changes to my code whose results culminate in WordPress. Anyway, it’s a big pain in the butt because I have to verify my changes work in Preview and then I have to, in this case, turn off/remove js resources, before I export, to then verify my changes worked in WordPress.

Every little timesaver helps. As I mentioned earlier, it’s a workflow preference.

P.S. I’d gladly put that in the backseat in exchange for kickbutt drawing tools whose output could be animated. :slight_smile:

9

I guess I understand the workflow point.

Can I ask though how you are placing the Hype output in to Wordpress. Because the head content is separate to the Hype document on export so effectively it will only be a problem if you are using the Hype html page that is outputted. If you just use the div with the call to the Hype generated script then it shouldn’t be a problem.

1 Like
10

@DBear,

I’m using one of my child theme’s templates, modifying it to include the Hype document after I’ve saved it as a PHP document. So, I’ve edited the original HTML document links using:

<?php echo get_stylesheet_directory_uri(); ?>

I would use @Benjamin’s Hype Animations plugin, but as far as I can tell, it does not copy over the statements contained in the Head; such as, the js script statements.

11

@quint not knowing your setup exactly I cannot be specific in my suggestions but have you tried linking to the .js file itself as this is essentially the Hype document. The html file is a container. Unless you have some really essential and important information contained within the Head (which can be added into the .js document if needed probably) I would try to include / point to just the .js document.

12

I just remembered that if you select the jquery file in the resources you will get an option below to include in document head.

Which means you can turn it of from there. This gives you the same function of off and on you are looking for in the advanced export.

13

Thanks, Mark; however, in order to Preview, the box for those js files must be checked. Then to export, the box must be unchecked if one doesn’t require them in the export.

14

To be honest I just realised you mention the check box in your first post.

But also you want an option to uncheck resources. This is it. It takes the same energy to click that one than one in any where else… :smiley:

15

Which gives me an idea. How about adding to the Advance Export facility the ability to create an export “profile”. For example, I would create one for WordPress, or whatever I needed customized. You remember, “Set it and forget it?” :slight_smile:

1 Like
16

I just had an idea (in the mean time) but it does involve some terminal unix commands and config to get it going.

The idea is to use the Built in OS X Web Server.

We first need to do some configuration to the file that helps control the server.

Using Terminal.app we will use some command line code to access and edit this file.
The way I am doing it is to do the minimum change I can.

So open /Applications/Utilities/Terminal.app

1, First we wil do a simple back up of the file.
Type :

sudo cp /etc/apache2/httpd.conf /etc/apache2/httpd.conf.BAK

Sudo is you asking permission to make a change as a superuser. your will be asked for an administrators password.

cp is the unix command to copy. cp [original ] [destinationCopy]

This all create a file named httpd.conf`.BAK which is a copy of the original.

2, Now we can open up the original file.

sudo nano /etc/apache2/httpd.conf

nano is a command line text editor.

This will open the file in an old style word processor.

You can use the arrow keys to scroll or move to you destination.

If at anytime you make a mistake you can exit with out saving by using the,

ctrl + x keys.

This will prompt you to save y/n.

Type:

n then hit the enter key

And start again.

If you are happy with what you have done the type :

y then hit the enter key

The normal location for the web server /site files are held in is ‘/Library/WebServer/Documents’

We will want to change the server directory to a sites folder in our home directory.

2, Still with the httpd.conf` file open in nano, hold down the ctrl and press w key.

This will show a search field at the bottom of the nano window.

Type :

WebServer

in the field and the hit the enter key. This will take you down to the lines you need to change.

Change the two lines:

DocumentRoot "/Library/WebServer/Documents" <Directory "/Library/WebServer/Documents">

to

DocumentRoot "/Users/YOUR_USERNAME/Sites" <Directory "/Users/YOUR_USERNAME/Sites">

YOUR_USERNAME being your user name.

3, Now while still in the config file we need to let the server know it has permission to access the files in the sites directory in your user home directory.

ctrl + w again and search for

_www

change the two lines:

User _www
Group _www

to

User YOUR_USERNAME Group staff

I have also enable PHP on mine so I can test projects with php scripts.

If you want to do this:

ctrl + w again and search for

LoadModule php

uncomment the line

LoadModule php5_module libexec/apache2/libphp5.so.

by removing the hash #

If you are happy with what you have done the save the changes using

ctrl + x keys.

then

y then hit the enter key

4, go to you home folder and add a new folder named sites . This will be where you your server files will be read from.

Inside the sites folder add another folder named scripts

Place your jQuery file inside that.

5, start the web server.

In Terminal.app

type:

sudo apachectl start

This will start the server. ( To stop the server sudo apachectl stop )

You website address should be http://localhost/

If you enter this in your browser you should get a web page that displays the Apache server test page with the text:

It works!.

Now you can simply add to the head.

<script type="text/javascript" src="http://localhost/scripts/jquery.min.js"></script>

and it should work when previewing from Hype or an exported project.

When you then put it in word press there will be an error : [Error] Failed to load resource: Could not connect to the server. (jquery.min.js, line 0)

But that should not stop anything from working as far as I am aware.

Warning disclaimer:

I have not played with the built in web server much so I cannot tell you about the pros and cons of having it running like this. ( safe/ unsafe ) But I suspect it is not an issue… but everything you do here goes with the usual “You Do at your own risk” and can be researched on the web to your hearts content.

As I have mentioned above the added bonus for me is I can add projects to the sites folder for which I want to test php or load files out side of the hype resource folder.

This allows me to do quick tests without having to load up to my real site.

I hope this helps.

1 Like
17

Doesn't seem like it would cause any major damage to have that local file referenced.

Only in very specific conditions would you run into issues if you had two different versions of jQuery loaded in the same document -- that's the only scenario that may cause an issue here.

If you have a JS function that you want to run within a Wordpress post, you can always just include that somewhere in the actual wordpress post content. So if you have a set of functions in your 'head' that you want to run on the same page as an embedded Hype document, just throw them in the post. I've done this myself. It's not yet clear what you're doing in the head that you can't do as an 'on scene load' function.

As @dbear & @JimScott suggest, using jQuery's CDN seems to be a great solution to your local testing issue.

The funny thing about using the jQuery CDN is that most of the time you're not downloading it. Your browser already has it in memory from the last 100 websites you visited. It's just being reminded that it needs to be reused. If you have downloaded this file recently, your browser won't try to redownload it until 31536000 seconds (1 year) has elapsed: https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js

18

Thanks @Daniel,

I have updated the Post above with how too.

Although I am think maybe it should be written out as a tip for testing projects rather than maybe lost in this thread…?