I'm working on a Wordpress site that was built using Visual Composer. I'm trying to embed a Hubspot form, which is something I have done numerous times but never using VC. I figured it would be as simple as adding a "raw html" block in VC and adding the form embed script.
This does indeed load the form, however it is displayed on the bottom left of the screen instead of the right column where it was set. However, if the page is refreshed, it displays as it should, no problems. This makes me think the script is loaded after the rest of the page is loaded.
I have tried creating a shortcode for the script and inserting in the VC section. Does not work.
You can see the issue here:
http://yourveininstitute.com/leg-swelling/
( form loads at the bottom of page and loads correctly on refresh )
The HS embed code looks like this ( portal and id redacted ):
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
css: '',
portalId: '######',
formId: '#################'
});
</script>
I could really use some help on this one. I'm spinning my wheels.
I'm seeing a hubspot form loading correctly in the sidebar, even on the first load. Are you still experiencing the problem? If so, I might try enqueueing the external script call, and only putting the hbspt.forms.create stuff in the VC block.
Try adding this to your functions.php file:
add_action('wp_enqueue_scripts', 'add_hubspot');
function add_hubspot() {
wp_enqueue_script('hubspot', '//js.hsforms.net/forms/v2.js');
}
Related
I have a WordPress site that is using Advanced Custom Fields to render content. One such field allows users to add third party form code.
Recently users have been using HubSpot forms and this is hurting page load times.
One such example is the code below.
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "8142945",
formId: "xxxx-xxxx-xxxx-xxxx-xxxx"
});
</script>
The users enters this and it is rendered in place like so:
Is there a way that the user can copy the embed code and then I can defer it, or at least load it last?
I was thinking of just adding defer and then wrapping the form creation call in an onload event, but that would then mean that the user would need to wrap everything they past in correctly.
Has anyone dealt with a similar situation?
One solution could be to make them enter the form ID only and then I add or remove script as necessary?
This is probably super simple answer, but I just can't figure this out.
Basically, I've got a php page only starting with opening <?php tag.
I've got a jquery script that I need to call on this page.
<script type="text/javascript">
$('input[name="_manage_item"]').click(function() {
$('input[name="_item"]')[this.checked ? "show" : "hide"]();
});
</script>
From what I researched, I need to load the script by placing
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
into the <head> tags of the page.
But my page doesn't have the html <head> or <body> tags. Where do I call the script then ?
I tried to place it in front of the opening <?php tag, but that broke the page.
What is the correct way of doing this ?
You can place your javascript outside the php tags at the bottom of you page. But when you use the php in a web page, you should add the html and head and body tags. A simple php page could look like this:
<html>
<head>
<!-- stylesheets and javascript -->
</head>
<body>
<?php
//You php-code
?>
<!-- scripts at the end of the page to let the side load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$('input[name="_manage_item"]').click(function() {
$('input[name="_item"]')[this.checked ? "show" : "hide"]();
});
</script>
</body>
</html>
Relying on your wordpress tag, I suggest you to read this article. There are described all details concerning javascript usage within wordpress. Probably the most common way is to use wp_register_script() function.
The safe and recommended method of adding JavaScript to a WordPress generated page, and WordPress Theme or Plugin, is by using wp_enqueue_script().
I would also advise you to merge your code to a distinct file, and load it straight after jquery library. It is a good practice, because in such a way browser can cache your script and would not download it on every page request. You should also wrap it into a $( document ).ready() function, to be sure that it will be executed only only when document is in ready state.
I wanted to use the loading page from here http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/
because the personal website I was making is very poorly optimized and loads quite slowly
The loading page works fine if I make it a seperate page and then redirect to my home page like so:
http://matthewpiatetsky.com/cs103/demo/demo.html
However, I have also tried adding this same animation when I go directly to the page, and it does not work. I think this is because of the other js files present in the document.
http://matthewpiatetsky.com/cs103/
In the redirecting page the script is located here and it works.
http://matthewpiatetsky.com/cs103/demo/js/script.js
In the actual page the script is located here and it doesn't work.
http://matthewpiatetsky.com/cs103/js/matthew.js
The script declarations in the actual page look like this, so this script is called last. Calling it first breaks the page, so I'm guessing the 5-grid js is the problem.
<script src="js/jquery-1.9.1.min.js"></script>
<script src="css/5grid/init.js?use=mobile,desktop"></script>
<script src="js/jquery.formerize-1.1.js"></script>
<script src="js/init.js"></script>
<script src="path/to/file/jquery.queryloader2.js" type="text/javascript"></script>
<script type="text/javascript" src="js/matthew.js"></script>
It looks like you are missing a plugin. Your code tries to use the QueryLoader2 plugin on line 19 of Matthew.js, but you don't have this plugin included on your page.
I'm just starting to playing around on a Mac for the first time and I have created a very simple HTML page that uses jQuery to do a simple text swap when an h1 tag is clicked.
When I don't view the page through the webserver and just open it directly in Safari (file:///Applications/xampp/xamppfiles/htdocs/test/mypage.html) it works as expected. However, when I try to view through Apache (http://localhost/test/mypage.html) it doesn't work.
Here's the code:
<html>
<head>
<title>My Awesome Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8">
function sayHello()
{ $('#foo').text('Hi there!');
}
</script>
</head>
<body>
<h1 id="foo" onclick="sayHello()">Click me!</h1>
</body>
</html>
Am I missing something on the Mac? Wouldn't be an Apache setting since its client-side code.. right?
I should probably also mention that I loaded XAMPP to run Apache and MySQL. I have tested Apache to ensure its working using a simple PHP file.
Steve
Use Firebug and access the page. One things that might be a culprit is that the web server cannot open jquery.js file because of file permission. Firebug will show if the jquery loaded in page, even you can add the jQuery code on-the-fly in the Console tab.
If you access it using Safari, use Web Inspector and see the if any error showed in Console tab.
One last thing, make a habit to avoid onclick, do this instead:
<script type="text/javascript" charset="utf-8">
function sayHello()
{
$('#foo').text('Hi there!');
}
//wait DOM loaded
jQuery(function($){
$('#foo').click(function(){
sayHello();
});
});
</script>
Also, it's better to put the js code near the page end, before </body>, so it would not block concurrent page element's loading.
I used a image gallery engine called prettyPhoto.js in a WordPress site that I was creating. However, for some strange reason the image gallery seems to have completely stopped working and I can't for the life of me find out how to rectify this problem (without explicitly going through the entire site and stripping out the rel="prettyphoto" tags embedded in all the image anchor links.
I am wondering if the javascript or the CSS is not being output to the browser properly, but taking a look at the "Net" panel in firebug, it seems to be loading these files without a problem. I tried having a look at the <a> link referencing the images to be opened, and they all had the required "prettyPhoto" attribute.
The page in question is
http://instant-wine-cellar.co.uk/products/microcellar and try clicking on any of the microcellar pictures.
Another is the "Watch Microcellar Video" link on the front page.
For those who do not know. This image gallery script, same with a lot of others, works by:
1. putting the prettyPhoto javascript file in your server.
2. putting the prettyPhoto css file in your server.
3. referencing the path to the above files into the head (or footer) of your html file.
4. triggering the process by putting some bespoke script into your HTML file to find the <a> tags in your file with a certain rel attribute and opening the link it references, into the prettyPhoto modal box.
At first include jquery.js then plugin.
Find:
<script src="http://instant-wine-cellar.co.uk/wp-content/themes/Wineconcepts/js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
Replace:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://instant-wine-cellar.co.uk/wp-content/themes/Wineconcepts/js/jquery.prettyPhoto.js" type="text/javascript"></script>