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.
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 have a small issue with Micah Godbolt's Responsive Multi-level Navigation with active parent links. It works great, except if the page loads slowly and you are hovering over the global nav, it can sometimes show two dropdowns. I'm guessing this is cause the javascript is not loading quick enough. Was wondering if anybody knew of an easy fix.
Here is the site I am using it on : http://library.buffalo.edu
If you refresh the page and hover over the links before the page fully loads, you see the problem screenshot of issue
I assume you are hiding your dropdowns with javascript so you could add style="display: none" on your divs or css and use hover function.
you havent post your html but here's example
$(".parent").mouseover(function() {
$(this).next("ul").show();
});
$(".parent").mouseleave(function() {
$(this).next("ul").hide();
})
or you can replace those with one click function and use jQuery toggleClass to toggle a class that have display: block on it
Below function will work. Try this
$(".nav-global li").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
This was working fine:
http://jsfiddle.net/musicformellons/ef76gud7/
Now I would like to use MDBootstrap instead of Bootstrap and so I have to alter this jQuery code:
$(document).ready(function () {
$('#navbar').on('show.bs.collapse', function () {
$('#nav-icon4').addClass('open');
});
$('#navbar').on('hide.bs.collapse', function () {
$('#nav-icon4').removeClass('open');
});
});
to work with this side-nav (using my own animated hamburger, see fiddle):
http://mdbootstrap.com/javascript/sidenav/
I can trigger the side-nav with my hamburger by adding these to my hamburger button:
data-activates="slide-out"
class="button-collapse"
But then I loose the animation, since obviously the bootstrap navbar collapse is no longer shown.
How can I have my hamburger animation together with the new side-nav? Probably the cited jQuery code needs to be adjusted completely?!
So following is needed: (1) trigger MD bootstrap sidenav from another CSS button then its default one (2) the hamburger animation should stay 'in sync' with the sidenav. For instance: just using toggle it would probably loose sync as I had similar experiences before: Bootstrap navbar toggle not in sync with dropdown menu
You could use this fiddle as a starting point:
http://jsfiddle.net/musicformellons/rto14vzp/2/
Comments regarding the fiddle:
ignore the JS and CSS resource panel message; i tried adding
mdbootstrap via the resource panel and it did not work whereas
current approach does.
the reference to mdbootstrap (via CDN url) refers to the free part
of mdbootstrap (the side-nav is part of the free package).
The most direct answer to your question is that you need to chain the button animation and sideNav() opening triggers together with one jQuery statement. If you add .nav-icon-line to your spans, that would look like this:
$("#nav-icon4, .nav-icon-line").click(function() {
$("#nav-icon4").addClass('open');
$(".button-collapse").sideNav();
});
There is a lot more going on here that I can't really get into because the source of sideNav() isn't freely available with the framework you are using.
Something else to consider:
You'd need to reset the hamburger animation in the same way by using removeClass(). I'm not really sure how that would work because sideNav() is a black box. From what I can see, sideNav() seems to hide the sidebar when you click outside of it; figure out what function controls that and put $("#nav-icon4").removeClass('open'); into the function.
Codepen example (not fully functional yet, depends on figuing out what's happening inside of sideNav).
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({...});
In given below link when we refresh our page it briefly shows the expanded version before it collapses on its own. Is there a way to have it immediately be collapsed?
http://new.cgwealth.com/staff
Below are JS Code links:
http://new.cgwealth.com/pages/js/jquery-1.7.2.min.js
http://new.cgwealth.com/pages/js/accordion-jquery-ui.min.js
<script type="text/Javascript">
$(document).ready(function () {
$(".accordion").accordion({
autoHeight: false,
navigation: false,
collapsible: true,
clearStyle: true
});
});
</script>
CSS link: http://new.cgwealth.com/pages/pages/css/accordion.css
So i want to hide all the data until my accordion functionality works.
Thanks in advance
i had the same question in my last project, but i have no idea about that. Then i use a very ugly method to fix this. When i load data from my server, i add class named 'hidden'(css:display:none), and it had a effort that all data, just like text or images, all hide. And after all data loaded, i call jquery function accordion and remove class 'hidden'.
So i use this method to fix. Maybe it is valid for you.
You have to hide the content through css, and then enable the content to be show via javascript. Here is one working copy
http://jsfiddle.net/aneeshrajvj/FcHEC/