We Keep Coding

Show all hidden elements when a page loads with override?

I have a page that forces some JS to load on a page that I need to override. I can load a separate JS file to do this. I want to have the page do the .show for any of the .below-the-folds on the page. I guess the best way to say it is, I want all the "more" things on the page to be expanded when the page loads, rather than making a person click more to see what's below the fold on all these.
This is the JS I need to override, I can't change it since it's loaded by the app automatically. There can be more than one of the lists hidden, I'm not sure how much harder that makes things.
function MoreFacets($more_facets_div) {
this.$more_facets_div = $more_facets_div;
this.bind_events();
};
MoreFacets.prototype.bind_events = function() {
var self = this;
self.$more_facets_div.find('.more').on('click', function (e) {
$(this).siblings('.below-the-fold').show();
$(this).hide();
});
self.$more_facets_div.find('.less').on('click', function (e) {
$(this).parent().hide();
$(this).parent().parent().find('.more').show();
});
};
$(function() {
$('.more-facets').each(function() {
new MoreFacets($(this));
});
});
It's loaded on the page and the HTML looks like this:
<h3>Additional filters: </h3>
<dl id="facets">
<dt>Collecting Area</dt>
<dd> Here's Something in the list</dd>
<dd> Here's the last in the list</dd>
<div class="more-facets">
<span class="more btn">∨ more</span>
<div class="below-the-fold">
<dd>Something That's hidden is here</dd>
<dd>Something more in this hidden list</dd>
So when the ∨ more is clicked is when the others below-the-fold appear, and that's what I want to load when the page loads. There's usually a few different lists like this on the page.
So I'm thinking what I need to do is something like run the ('.below-the-fold').show() for all the lists when the page loads?
Update A note to clarify: when the page loads now they're all hidden. I'd like them to all show when the page is loaded so no one has to click anything to have everything showing.
Another note based on another question below... It's loaded in a separate file, and I can load my file before that one. I do know that I can override other JS on the page, so I assume I can override this as well.

Based on your last edit, it sounds like you're already onto the fastest solution to your problem.
Please note, this will only work if the script is not loaded asynchronously, but if you have control of the order the scripts are loaded in, you can insert your script between the problem script and jQuery.
Your script can be something as easy as redefining the function it's using to something like this:
MoreFacets.prototype.bind_events = function() {
var self = this;
//Autostart in our open state without completely disabling the functionality
self.$more_facets_div.find('.below-the-fold').show();
self.$more_facets_div.find('.more').hide();
self.$more_facets_div.find('.more').on('click', function (e) {
$(this).siblings('.below-the-fold').show();
$(this).hide();
});
self.$more_facets_div.find('.less').on('click', function (e) {
$(this).parent().hide();
$(this).parent().parent().find('.more').show();
});
};
Now, that won't work if you don't have control over the script loading, but you might have hope even in that case, because document ready functions in jQuery are invoked in the order they're registered, so if you can't really control where your script is you might play with an alternative
$(function() {
$('.more-facets').each(function() {
$(this).find('.below-the-fold').show();
$(this).find('.more').hide();
});
});
The first will be cleaner, but the second is a fallback for more restrictive situations, and both should achieve your desired effect without completely removing the functionality, just changing the default state on load.

Reload foundation all or partially

In my website, the main index.php have a drop-down menu, and if I click on an item, an Ajax loader work and writes in the main div of the main index.
But if this import use foundation function (reveal, callout, tabs..), this import doesn't work.
If in web explorer console I insert again this command '$(document).foundation();', import works but I receive in the log a warning
Tried to initialize drill down on an element that already has a Foundation plugin.
foundation.min.js:65 Tried to initialize dropdown-menu on an element that already has a Foundation plugin.foundation.min.js:65
Tried to initialize off-canvas on an element that already has a Foundation plugin.foundation.min.js:65
Tried to initialize responsive-toggle on an element that already has a Foundation plugin.foundation.min.js:65
Tried to initialize reveal on an element that already has a Foundation plugin.
Can somebody help me to find a clean solution to reload foundation?

In Foundation 6.2.3,
$(document).foundation()
will call
reflow: function(this, plugins)
with plugins undefined, so every plugin will be checked: The function will look at each child of $(document) with a [data-plugin_name] attribute and show this warning if that element already has been initialized:
if ($el.data('zfPlugin')) {
console.warn("Tried to initialize " + name + " on an element that already has a Foundation plugin.");
return;
}
So you can either call foundation() directly on the new element after your ajax request :
$('#your_element').foundation();
or call reflow with a specified plugin (eg. reveal)
Foundation.reflow($('document'), 'reveal')
provided you don't already have an initialized 'reveal' element in your DOM
Mixed: (best solution I think)
Foundation.reflow($('#your_element'), 'reveal');

Firstly, do not call $(document).foundation(); more than once.
If you've updated an element already initialized with a plugin, you'll need to use reInit.
If you've added or completely replaced an element with a new element you'll need to use $(element).foundation();
I use the following technique:
First, when foundation is initialized I store a global:
$(document).foundation();
__foundationRun = true;
Then, no matter when, the following util will handle initialization of new/updated elements:
function foundationUpdate(el) {
if (__foundationRun) {
if (el.data('zfPlugin'))
// existing element already has a plugin - update
Foundation.reInit(el);
else
// new element - initialize
el.foundation();
}
// else leave for foundation to init
}
So you could use like this:
$(".accordion").append("<li>Item</li>");
foundationUpdate($(".accordion"));
or
var newAccordion = $("<ul class='vertical menu accordion-menu'"
+ " data-accordion-menu><li>Item</li></ul>");
$(".container").append(newAccordion);
foundationUpdate(newAccordion);

jQuery slideshow plugin with .load()

I'm trying to make an auto slideshow with pics from other .php file and to achieve that i've decided i will use http://responsiveslides.com/ jQuery plugin. The problem is that this plugin doesn't want to work with my photos by "loading" them from other file.
$('.first-option').click(function(){
$('.inner-box').load('file.php .rslides');
});
$(function() {
$("file.php .rslides").responsiveSlides();
});
*CSS/HTML are exactly the same way written like the author wrote in his "Usage".

try this:
$('.first-option').click(function(){
$('.inner-box').load('file.php .rslides', function callback () {
$('.rslides').responsiveSlides();
});
});
I've not used the plugin before, but it appears that you need to apply the bootstrap method to the element that contains the slides you load into your page. So what you're doing in your code is attaching the load method to the click handler, while attaching the responsive slides to an empty selector when the DOM is ready. What I've provided above loads the content, and then using a callback function (when the content has successfully been loaded into the DOM), then calls the bootstrap method onto the original selector.
Edited the code to use the '.rslides' selector.

Capture event for YUI light box close

I have a light box (YUI) in my application. Upon closing of this lightbox by making use of the 'x' at the upper right side, I need to perform a set of actions. For this I need to capture the event that gets triggered when the lightbox is closed. Can some one please help?
Note - I did some research online and even went through the YUI js files but could not figure out a solution.

Unfortunately the Lightbox module in the YUI Gallery is very much outdated and it's no using any of the YUI components that would let you react to the lightbox being closed. I'd recommend that you use AUI's ImageViewer component which is pretty similar to a Lightbox. It allows you to listen to an event that signals the closing of the viewer like this:
YUI().use('aui-image-viewer', function(Y) {
var imageViewer = new Y.ImageViewer({
links: '#gallery a'
});
imageViewer.render();
imageViewer.on('visibleChange', function (Y) {
// if e.newVal is false, then the image viewer is being hidden
if (!e.newVal) {
}
});
});

It might be possible to do something like this:
Y.one('#buttonNavClose').on('click', doSomething);
buttonNavClose being the id of the close button node.

nyroModal is not working

I m using nyroModal in one of my project and to add new entry when i click the anchor with class nyroModal it take me to that particular page (Not poping up the nyroModal).
I have used all necessary files like
nyroModal.css
JQuery
jquery.nyroModal.js
jquery.nyromodal-ie6.js (For IE6 )
Even i m not getting the desired result.

In version 2 of nyroModal, you have to bind by yourself the nyroModal links.
To do so, simply add:
$(function() {
$('.nyroModal').nyroModal();
});