-
Posts
-
Hi, im using a program called Help & Manual 7 for creating a manual for a software. It basically creates a small website thats a manual. Now they have a new feature called “embedded help” which lets embed this site on an existing site (x-theme!).
Anyway the instructions are for a “normal” website, not wordpress. Im wondering if i could have some help translating the instructions into x-theme.
Step 2: Add a reference to the embedded help script to the <head> section of your page
Open the page where you want to add the embedded help in an HTML or code editor. Locate the closing </head> tag and add the following script reference directly before it:
<script type=”text/javascript” src=”../myhelp/js/hmEmbedHelp.js”></script>
</head>Replace the highlighted ../myhelp/ path with the absolute or relative path to your WebHelp folder on the server. Leave the /js/ folder reference unchanged. That is a folder inside the WebHelp folder created by Help & Manual.
I tried adding this in the customizer -> javascript:
<script type=”text/javascript” src=”../myhelp/js/hmEmbedHelp.js”></script>
Should that be enough, or do i need to create a child theme?
Step 3: Add the CSS rules for the box that will contain your embedded help
Add the following CSS lines to the <head> section of your page (if you already have a style section there you can add the lines to that without the <style> tags):<style type=”text/css”>
div#helpwrapper {
display: none;
width: 100%;
min-width: 400px;
height: 500px;
background-color: #ffffff;
border: 3px solid #777777;
margin: 1em 0 0 0;
}
</style>If you want the help to be displayed when the page is opened you need to change display: none; to display: block;. Generally, however, it is best to hide embedded help on page open. If you leave the display: none; setting unchanged, the actual help will not be loaded until the user actively displays it.
You can change the other settings and add your own if you like. We recommend using 100% width or not much less. Otherwise the help will be difficult to navigate unless the user maximizes it.
I just added this in the customizer -> css. Should be enoough, right?
Step 4: Add the snippet for embedding the actual help
Add the following snippet of code in the location on the page where you want the embedded help to appear:<div id=”helpwrapper”>
<script>
initHmHelp(“../myhelp/”,”index.html”);
</script>
</div>This one im lost on. I created a page with the blank template, header no footer. Created a section and gave it the id “helpwrapper”. But how do i run the script?
Any help would be greatly appreciated. For now I have one site for the website and one for the manual, which really confuses users.
Hi there,
Thanks for writing.
Working with WordPress always requires absolute URL. The first thing should be uploading your files to your site through FTP.
Let’s say you upload your help/manual files at /public_html/myhelp/ or /public_html/wp-content/myhelp/
It’s up to you where you wish to upload it and what folder. /myhelp/ is a sample folder name too, and you should name it according to the folder generated by your Help & Manual 7.
Let’s finalize it, let say your help files are located at /public_html/wp-content/myhelp/ hence the absolute URL will be http://domain.com/wp-content/myhelp/ (again domain.com is just a sample, please change it according to your site). In fact all of these are the just sample, you should change these according to your setup.
Then add this code to your child theme’s functions.php with your absolute URL.
add_action('wp_footer', 'myhelp_embed', 9999); function myhelp_embed () { ?> <style type="text/css"> div#helpwrapper { display: none; width: 100%; min-width: 400px; height: 500px; background-color: #ffffff; border: 3px solid #777777; margin: 1em 0 0 0; } </style> <script type="text/javascript" src="http://domain.com/wp-content/myhelp/js/hmEmbedHelp.js"></script> <?php }Then add this to your page content,
<div id="helpwrapper"> <script> initHmHelp("http://domain.com/wp-content/myhelp/","index.html"); </script> </div>If you’re within cornerstone, simply add it with text or raw element.
Cheers!
Thanks, I almost got it to work. Now I get this problem in console:
“Uncaught TypeError: Cannot read property ‘ajaxPrefilter’ of undefined”
Since this is a reference to the js-file from Help & Manual i asked them. Their response was:
However, looking at the error message my guess is that if you have set up everything correctly, what is happening here is that you have jQuery on your WordPress site, but it is an old version that does not support everything necessary for embedded help.
To avoid having two copies of jQuery running in parallel, the embedded help script first checks if jQuery is already present and active on the page. If it is, it uses that one. If not, it uses the version included with the skin itself, referencing it from the skin source folder. You couldn’t get the error message you are seeing if jQuery had not been found, so it is possible that it is the wrong version. Check for the jQuery reference in the header of your WordPress page and try replacing it with this:
CODE: SELECT ALL
<script src=”//code.jquery.com/jquery-2.2.1.min.js”></scriptIt’s possible that WordPress still wants to support poisonous old versions of IE. If it does, you may have to use this instead:
CODE: SELECT ALL
<script src=”//code.jquery.com/jquery-1.12.1.min.js”></script>When I check my wordpress site i see this:
<script type=’text/javascript’ src=’http://www.hittakursvinnare.info/wp-includes/js/jquery/jquery.js?ver=1.11.3′></script>
<script type=’text/javascript’ src=’http://www.hittakursvinnare.info/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1′></script>Would it be safe to replace this to the new version, or would i mess something else up? How would i go about doing it?
Hi there,
Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:
– Link to your site
– WordPress Admin username / password
– FTP credentialsDon’t forget to select Set as private reply. This ensures your information is only visible to our staff.
This reply has been marked as private.Hi there,
Thanks, but this isn’t about jQuery version. It’s about the embed code not being compatible with WordPress.
Two ways to call jQuery, it’s either jQuery() or $(), but in WordPress, it should be jQuery() since using $() could cause conflict to other javascript that uses same name.
Check this video,
https://www.dropbox.com/s/8g41nu152wlr1j1/bandicam%202016-02-28%2004-51-20-508.mp4?dl=0
Another thing is, your script is loaded even before the jQuery is being loaded. I provided the code with this
add_action('wp_footer', 'myhelp_embed', 9999);So your code would only load after the jQuery. But you change it to wp_head which load it before other libraries.
Thanks.
This reply has been marked as private.Hey there
We’re sorry but, further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.
