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.
Related
I am working on a webapp for a school project that uses JQuery, along with some of my own JS code. There seems to be a strange tendancy across the site for the browser (regardless of if I use firefox or chrome) to be redirected back to the main page (index.html).
For example, I have a page called create.html which includes JQuery and has a button defined as follows:
<button onclick="addEmail()"type="create" class="button button-block"/>+</button>
the addEmail function does not include any code to redirect or otherwise change the page. Even when the onclick attribute is removed entirely the browser ends up back on the index.html page once the button is clicked. The index.html page also does not render correctly when it is loaded in this manner. We have the following includes in the create.html file:
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="js/create.js"></script>
The files are hosted on an apache server as well.
Thanks,
Ryan
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');
}
I am very new to web design and trying to build a responsive page using Bootstrap. Everything works except my linked JS. I am sure the path is right but neverthelast I tried to put my JS on server and indicated the full path through http:// but still not working. I even put all my scripts in the head section just in case but still not working. Start getting frustrated anyone please can help me guys :) The JS is in the 'scripts' folder which is in the same folder with my 'index.html'.
This is my html in the head section:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="scripts/script.js"></script>
And here is my external JS:
$(document).ready(function(){
$("#menu").slideUp("slow");
});
Your problem is loading in the jQuery. It's trying to load your first script from a relative path. Try replacing the first script with <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
In the header of my website, I want to add the script for a slider. If I dont close the script, the slider works, but if i close it it stops working
it works if i let the script:
<script type="text/javascript" src="js/html5slider.js">
if I close it the slider stops working:
<script type="text/javascript" src="js/html5slider.js"></script>
What could be the error?
Leaving out the end script tag causes the browser to ignore the script tag right after that one.
For example,
<script src="a.js">
<script src="b.js"></script>
b.js will not be loaded because the browser interprets its end tag to belong to a.js.
In other words, you have an error in the next script that's causing all scripts on the page to halt, including the slider. Look in the error console to figure out where the problem is.
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>