Develop Reference

jQuery loses ability to read HTML and CSS tags inside AJAX script after location hash change

I'm experiencing some issues regarding an AJAX script I'm working on.
The page loads perfectly well, and all needed scripts are loaded the same for basic page functionality inside AJAX script, but after hash change, jQuery behaves awkwardly.
Let's take this example.
The custom jQuery script writes an inline CSS propriety for a specific DIV at page loading:
Now, I load the login page for example:
I get back to the main page and inline style disappears as well as the basic loaded functionalities cease to exist after Ajax call:
*
Any experience on this? Does anyone have a clue why this happens? Or even near it... Seems the script unloads on page/hash change, which I don't believe. Or enters in double loop, therefore doubling the classes for HTML. I don't get it.
Already searched a lot and went trough the coding and is fine becasue it works fine alongside with basic HTML. Would appreciate some thoughts on this matter.
Thanks!

Javascript 1-2 second delay on page load, weird styling

I'm using Skrollr to animate & create parralax effects when scrolling the page, but there's a short lag which I guess is the Skrollr javascript/jQuery initialising.
Any ideas on how to avoid having the mess at the beginning?
The WP website in question is this one : http://hustynminepark.com
Thank You!

Unless I'm mistaken, the layout of your page entirely depends on the activation of the plugin. You can solve this problem by finetuning the CSS so that the initial page corresponds exactly to what you see after activation of the plugin.
Also, don't forget to minify (concatenate / uglify) your javascript files before loading them into the browser; this will speed up the loading of the page and the activation of the plugin.
Btw, the site looks pretty cool.

If I am correct you have a FOUC, you can use jQuery to detect when your DOM in ready then call init.
First of all you want to include the skrollr.min.js file at the bottom of your document (right before the closing ) and then call skrollr.init(). Or you can place it inside the if you want to, but make sure to call init() once the document has been loaded (e.g. jQuery's ready event or even window.onload).

.load() loads after scripts / in-page scripts do not work

Brief
Imagine your first website vastly growing in the amount of code, however particular parts you want to globally modify such as a menu seen on every page. So I've taken my header and added it to it's own file and load it using:
// Load Header
$(".Header").load("assets/HTML/header.html");
So I've got my header, added it to it's own place to allow a bit of CMS to my website.
What Makes It Tick?
Dependant Files:
jquery-1.11.0.min.js
jquery-migrate-1.2.1.min.js
jquery-ui-1.10.3.custom.min.js
jquery.ui.widget.js
jquery.ui.selectmenu.js
In page script for drop downs and whatnot
The Problem
The header is loading presumably after all my scripts have loaded regardless of the several places I've tried and tested adding to fetch the header code.
I'm HOPING this is enough to insight some help, some possible problems many encounter as posting my link, it is massively subject to change! Please specify how I could make this question anymore local to Stackoverflow, however for now my live version can be found here.

I don't think that is good implementation of jQuerys load() method.
Have you tried using this pattern instead of using jquerys .ready()?
$(window).load(function(){
# your code
$(".Header").html(yourContent);
});
From jQuery API:
"Code included inside $( window ).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready."
Just remember to put this statement outside of $(document).ready(function() { ... });.

why javascript is not functioning as expected after dividing the one html file into multiple files?

I am using the following theme. when the code for the following output is saved in a single file everything(dropdown menu's of top header and left navigation bar's accordion style) is working perfectly.
When I have separated and divided the code into multiple files as top_header.php, left-nav.php, index.php and footer.php and included all the four php files into index.php, then dropdown menu's were not working.
I have added the ".js" files into all the files, drop downs were working perfectly(even though adding of files is redundant which is not good in practice).
But left navigation's accordion menu's are not working.

first make sure that you are actually calling all js files correctly (i.e. using firebug).
which javascript functions are not working exactly?
is it a jquery function like $('').click() ?
in that case You need to use event delegation to attach events for dynamically loaded elements.
have you calles the function inside a Jquery function like this (which won't work):
$(document).ready(function() {function test()});
is there any Ajax in your code?
could you show us your code to get an better idea about your problem :)

Jquery.min.js conflict

My site has a problem when I use the following type function located in the header:
<script>
$(document).ready(function() {
$('#showVolunteer').click(function() {
$('.vol_info').slideToggle("fast");
});
});
</script>
I have to include the following line of code in order to get it to do what I want within the site:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
The above function, is used in the link "How to Volunteer..." on the main page and allows for the expanding and collapsing of data. However, when I call the jquery.min.js library as I have, it causes the featured content show to stop rotating pictures every six seconds. When I remove the line:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
the slide show refreshes normally and the "How to Volunteer..." link STOPS working. I cannot get them both working together.
I realize that wordpress includes a copy of jquery.js at the following location \wp-includes\js\jquery\jquery.js which is the non compressed version, but somehow my function above does not recognize what is in this library. It only recognizes jquery.min.js when called in the fashion above.
My question is, what do I need to do to get the expand and collapse data link working on the front page TOGETHER with the featured content rotator changing the picture every few seconds? In other words BOTH working at the same time.
Should I place all my functions (similar to the ones above) in a .js file that is already resident in wordpress?
thanks

This question has been resolved. Apparently, you're not suppose to use the $ symbol in Wordpress .js files, as it is used by other libraries and causes confusion within calls to jQuery. Instead, you have to use "jQuery" in place of the "$" symbol. Once this was done, everything worked as it should.
jQuery() NOT $() for Wordpress.