I have a website here.
I have this script that calls the appropriate functions for the Sticky Notes to work...
//Functionality for Sticky Notes
$(function() {
$("#content").stickynote({
size : 'large',
containment : 'content',
event : 'dblclick',
color : '#de5900'
});
$("#newsticky").stickynote({
size : 'large',
containment : 'content',
color : '#de5900'
});
});
It's not a repetitive piece of javascript, but I'm trying to place all these head scripts in one file. You can see that I already have a few there. You can view the file here.
When I load the file onto the index page here, the scripts are called appropriately (jquery menu and two different sliders).
When I call the same file on the Sticky Notes page, I am not able to, in addition to the jquery menu not working properly.
I'm calling the same script at the bottom of the page (before the </body> tag...
<!-- All DOM Ready Scripts -->
<script type="text/javascript" src="js/scripts.js"></script>
Not sure what I'm doing wrong.
Try taking the code block out of $(function() { });
Additionally, if the DOM is ready (i.e. if you are including the script at the bottom of the file, and all nodes are in the DOM by then) - then you don't need to place your bannerRotators in the $(document).ready(function() {});
Your code should become somethinglike this:
$("#rotator1").bannerRotator({...});
$("#rotator2").bannerRotator({...});
$("#content").stickynote({...});
$("#newsticky").stickynote({...});
Related
I am loading in the content of my sidebar navigation with jquery from a nav-content.html file so I don't have to update it on every page each time it updates.
What I am trying to do is when on a specific page, the sidebar nav with uncollapse based on what category that page is on.
I am trying to target elements in that loaded nav to be active when on certain pages and it only works when the nav is hard coded into the page's html but it doesn't work when I load it in from the nav-content.html file with jquery.
I did noticed when i view the source code on browser it doesn't actually paste in the html but still displays it which I think is the disconnect but I am not 100%. Not sure if I should look into different way to load it in or if my jquery is the issue.
Any insight would be greatly appreciated.
HTML:
<nav>
<div id="sidebar">
<div id="sidebar-content">
<!-- nav loads here from nav-content.html -->
</div>
</div>
</nav>
Jquery:
/*Loads the Nav */`
window.onload = function(){
$.get("nav-content.html", function(data){
$("#sidebar-content").html(data);
})
}
/* changes classes within the loaded nav based on what page it's on */
$(document).ready(function() {
$('ul#devSubmenu').removeClass('collapse'),
$('ul#appStackSubmenu').removeClass('collapse'),
$('a[href^="#devSubmenu"]').attr("aria-expanded","true"),
$('a[href^="#appStackSubmenu"]').attr("aria-expanded","true");
});
I asked this a few days ago but this is a rephrased/re-explained of deleted post.
Two things to get you on the right path.
1) jQuery's get() does not load an HTML file. You might mean to use load() to get your sidebar content: https://api.jquery.com/load/
2) $(document).ready fires before window.onload. See: window.onload vs $(document).ready()
In order to ensure that your content is loaded before modifying the classes, you can make your modifications in the callback from load() (the function passed as the second parameter to load()).
Something like [untested]:
$(function() {
$( "#sidebar-content" ).load( "nav-content.html", function() {
$('ul#devSubmenu').removeClass('collapse'),
$('ul#appStackSubmenu').removeClass('collapse'),
$('a[href^="#devSubmenu"]').attr("aria-expanded","true"),
$('a[href^="#appStackSubmenu"]').attr("aria-expanded","true");
});
});
The wrapping $(function() { ... }) is just jQuery shorthand for $(document).ready();
I recently used accordion jquery to help me expand/collapse content ( like a drop-down menu )..I used this script and placed it in the <body>
Script:
jQuery(document).ready(function($)
{
$("#accordions-727.accordions").accordion({
active: "",
event: "click",
collapsible: true,
heightStyle: "content",
animated: "swing",
})
})
The script is working fine but the page is not loading correctly..When I view or refresh the page, all the contents inside the drop-down menu becomes visible but once the page finishes loading everything becomes fine..Now how can I fix this?..Should I place the script in the <head>?
This is using jQueryUI accordion implicitly #Stew.
You have a wrong attribute in your accordion setup code, use the animate in place of animated.
Take a look in this API documentation: http://api.jqueryui.com/accordion
And it's the original component demonstration: http://jqueryui.com/accordion/
I suggest you to take a look in your jQuery files too, if they are OK and in the correct order (in <header> section).
Another point is to put your JavaScript in <header> section of your HTML and be sure you have no conflict or using older jQuery files versions than the component needs.
Hope it helps.
I'm using HTML templates (Jekyll) and occasionally want to include scripts in the content of the template. For example, my page template looks like this
<body>
{{ content }}
<script src="some_library.js"></script>
<script>
// general setup stuff
</script>
</body>
Where {{ content }} can sometimes include
<script>
// page-specific code relying on some_library.js and general page setup stuff
</script>
I could just move the template scripts into the head of template, but I've read many times how important it is to put <script> at the end of the document. Can I reliably ensure that the page-specific code runs last even though it appears first?
I'm using jQuery, but if I include jQuery in the template, then it won't be available in the content script. I tried adding a $(window).load function around the content script, but I get $ is not defined.
You could directly work with the window load event instead of $(window).load - no need for jQuery!
The simplest way:
window.onload= yourFunction;
A cleaner way would be to rely on the attachEvent/addEventListener methods:
window.addEventListener ?
window.addEventListener("load",yourFunction,false) :
window.attachEvent && window.attachEvent("onload",yourFunction);
(attachEvent is for older IE versions)
Use jQuery's .ready() function.
From the documentation:
While JavaScript provides the load event for executing code when a
page is rendered, this event does not get triggered until all assets
such as images have been completely received.
Also from the docs:
$(function() {
// Handler for .ready() called.
});
I have JQuery based tab navigation that only works if it is placed after the html for the menu. It works if it's placed at the end too, but breaks when I put the same script in $(document).ready ath the top.
I thought that this (placed at the top of the page):
<script type="text/javascript">
$(document).ready(function(){
mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", true);
});
</script>
would be the same as this:
<script type="text/javascript">
mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", true);
</script>
</html>
Which is placed at the bottom of the page and works. How would I be able to put the function at the top or even include it from a separate file?
I had this problem and I had used this in the head after the jquery include link:
$(document).ready(myfunction());
This failed due to objects not being loaded. I should have wrapped my call in a function:
$(document).ready(function () {
myfunction();
});
This worked as expected only after the document was properly loaded.
The reason it is recommended to place the script at the end of the page , is so that the HTML elements are loaded onto the page before you try to access them..
No matter where you place the code it is better to wrap in DOM ready event which makes sure the complete HTML document is properly loaded before you try to access the elements in the page..
Maybe in your case
<script type="text/javascript">
mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", true);
</script>
seems to be working when not encased in DOM ready is the function is not accessible as it's scope is being blocked by DOM ready
One of the scripts added in between the <head> element kills my other javascript. Is their a way to isolate it or not to interfere with other scripts? I need this only for one page, not for the whole site ,etc. frontpage.php. Tried to add the script only to this page, but it dont work, as it seems what it only works than I put in between <head></head> elements.
This is the killer script:
<script type="text/javascript">
$(document).ready(function() {
$.noConflict();
<!-- THE ACTIVATION OF THE MINI IMAGE SLIDER PLUGIN -->
jQuery('#first_mini_slider').minislides(
{
width:980,
height:320,
slides:5,
padding:30,
ease:'easeOutQuint',
speed:400,
hidetoolbar:2000,
animtype:1,
mousewheel:'on'
})
<!-- THE ACTIVATION OF THE LIGHTBOX PLUGIN -->
jQuery('.freshlightbox').fhboxer({})
jQuery('.freshlightbox_round').fhboxer({
hover_round:"true"
})
});
</script>
The script you posted puts jQuery into "noConflict" mode, which means that the $ used to refer to jQuery will no longer work. You can still refer to jQuery with jQuery i.e. these two are equivilent:
$('.freshlightbox')
jQuery('.freshlightbox')
If this is what is causing problems with your other scripts you can do one of the following:
don't put jQuery into noConflict mode
change your other scripts to use jQuery instead of $
put the following code around your other scripts:
(function($){
// your code goes here
})(jQuery);
more detail on the last here: https://stackoverflow.com/a/4484317/12744