We Keep Coding

Scrolling to top inside an accordion

In my page I have 2 scrolls.
One is apparent in the page ( They are not loaded with ajax or something.)
The other one is inside an accordion.
I want these scroll to be always at the top. They have same class names.
With the snipets I can achieve my first goal, scrolling to top in apparent scroll
$('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);
As well as with this one
var messageBody = document.querySelector('.m-messenger__messages');
messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;
However, the scroll inside the accordion menu is not affected by this change.
If I open the accordion and run this snippets it scrolls to top.
So that either
I need to find a way to run this snippet not only to apperent but also all scrolls in the page or
when I click the accordion this javascript code needs to be executed.
I would like to solve this problem with the first solution.
I tried this and I couldn't succeed as well. If I put alert() rather than scrolltop inside this function, I got the alertbox.
$(".m-accordion__item").click(function() {
$('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);
});
How can I achieve this goal?

This solved my problem. BTW this is bootstrap4. So that it may apply to any of bootstrap 4 templates.
$('.collapse').on('shown.bs.collapse', function(e) {
$('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);
});

How can I Detect when a Firefox WebPanel is closed?

I am interested in opening a webPanel on the right side of the Firefox window. Based on an MDN article, I determined that this could be done by setting the browser element's direction style. However, I wish to clear out this setting after the webPanel is closed. Is there a way I can detect this? Thus far, the only way I can think of is to poll sidebarWindow.location.href (to detect if the sidebar is changed) and sidebarHidden (to detect if the sidebar is closed).
var browser = document.getElementById('browser');
browser.style.direction = "rtl";
var sidebarWindow = document.getElementById("sidebar").contentWindow;
var sidebarBox = document.getElementById('sidebar-box');
var sidebarHidden = sidebarBox.collapsed || sidebarBox.hidden;
sidebarWindow.addEventListener("unload", function (event) {
alert("1"); //This code fires when the web panel is opened
//but not when it is closed.
});
sidebarBox.addEventListener("unload", function (event) {
alert("2"); //This code does not fire.
});
sidebarWindow.addEventListener("close", function (event) {
alert("3"); //This code does not fire.
});
sidebarBox.addEventListener("close", function (event) {
alert("4"); //This code does not fire.
});
openWebPanel('Test', 'http://www.google.com');

IIRC there are essentially three ways a sidebar can be "closed":
The user closes it using the GUI (X-box) or keyboard shortcut. In this case, the web panel will not necessarily get unloaded, so there is no unload event.
Another document is loaded into the web panel. In this case you might get an unload.
The user opens another panel. There is not necessarily an unload.
Should you go forward with your implementation, you need to make sure your code handles all three correctly.
and 3. should be observable by the <broadcaster id="viewWebPanelsSidebar"> changing the checked attribute (see the implementation of toggleSidebar()), so you could have another element observing and acting on onbroadcast.
should listen for unload and act accordingly.
To get proper unload events, I think the following should do the trick:
sidebar.contentDocument.getElementById("web-panels-browser")).
addEventListener("unload", ...);
But my memory there is a bit wonky, so you might need to fiddle with that a bit. (The sizebar has a <xul:browser id="web-panels-browser"> which displays the actual content...)
After having said all that: I think it is a bad idea to mess with the sidebar like this.
The MDN wiki(!) has bad advice in this case.
The sidebar was not designed to be messed with like this.
There are other add-ons "competing" with yours when it comes to messing with the sidebar.
The sidebar code is, for the most part, pretty archaic and under-maintained. Getting things like your requirement to work correctly is pretty hard. There still might be other code (in add-ons) that could dismiss the sidebar that you and I didn't think of.
The sidebar might not be the best place to display your content in the first place (what that content would be you didn't say). If it's something like context-help, dictionary/definition lookup results, login forms, then it won't be a good fit.
Some users might not like that their always-on bookmarks/history sidebar gets replaced by yours. You could handle this by re-opening the previous one, but that will only complicate matters further.
You might be better off using some other way to display information - e.g. a new tab, a panel, a new sidebar like the social sidebar... E.g the social sidebar is not only on the right, it actually is a standalone sidebar not part of the "main" sidebar.

jQuery Accordion nav issue

So finally, I was able to create a simple accordion nav but it's making me nuts that when a user goes from second nav to third one( Future Generations to Israel Overseas) it doesn't work properly. The animation happens twice, sometimes even three times based on how fast you mouse is moved. Moreover, when a nav is open and if you exit the div and come back the animation happens again.
A) Is there a way to fix the issue with going from second to third navigation
B) how do I write a conditional statement so that if a user is with in a section lets say Future Generation and goes outsize the div and comes back it doesn't repeat the close and opening thing again.
CODES at
http://jsfiddle.net/rexonms/Hj9my/1/
Note: I cannot use a different jQuery beside 1.2.6 and sorry for the messy HTML code, wanted to make sure it worked on the site, when it works here.

Fixed your accordion , had to lose some of you html as it was a bit confusing .
updated fiddle:
http://jsfiddle.net/Hj9my/3/
The code :
$(function() {
$(".menu").hover(function() {
$('.dropdown').removeClass('current').addClass('notcurrent');
$(this).find('.dropdown').removeClass('notcurrent').addClass('current');
$('.notcurrent').slideUp();
$('.current').slideDown();
}, function() {
});
});

jQuery click detection outside of specified area problem

Hey guys, ok, so, I have a jPlayer jQuery plugin playlist hidden on my home page (http://www.marioplanet.com).
Now, it is hidden by default and is only supposed to be activated upon clicking the image labeled "Music" in the upper-right-hand-corner of my header <div>.
This works great, and once an end-user clicks the image, a nice, slick slideToggle action occurs on the <div id="player"> element and it is revealed.
Now, everything holds.
Until, the end-user clicks anywhere except the Music image again, the <div id="player"> element will slideToggle yet again, vanishing.
The only problem, is when the end-user clicks upon the Music image again, because, as far as I know, it slideToggles twice!
That is definitely not what we want.
So, here is the code which was adapted by Magnar's helpful post:
$('#text_music').click(function() {
$('#jplayer').slideToggle(500, function() {
$("body").click(function (event) {
var outside = $(event.originalTarget).parents("#popup").length === 0;
if (outside) {
$("#jplayer").slideToggle(500);
$("body").unbind("click");
}
});
});
});
#text_music is my image reading "Music"
#jplayer is my <div> containing my jPlayer plugin
So, what I want to try and do is declare a variable, just like how var outside is declared in the above code, which handles with the clicking of the #text_music image once the #jplayer <div> is already visible.
However, I need a little assistance in understanding the meaning of this variable.
Anyone want to offer any words of wisdom?
:) Thanks!

Have a look at jQuery outside events plugin to detect events outside of the specific element.

How to prevent page's scroll position reset after DOM manipulation?

I've got two JS functions, one that is adding options to a select box
function addOption(selectId, text, value) {
var selectbox = document.getElementById(selectId);
var optNew = document.createElement('option');
optNew.text = text;
optNew.value = value;
try {
selectbox.add(optNew, null); //page position resets after this
}
catch(ex) {
selectbox.add(optNew);
}
}
and another that is doing a document.getElementById(formId).appendChild(newHiddenInput) in a similarly simple function.
They both work, elements are added as expected. However, upon calling either of them, the page resets its scroll position to the top of the page in both IE6 and FF. There is no postback, this is purely clientside manipulation. I've set breakpoints in Firebug, and it occurs immediately after the element.appendChild or select.add gets executed. I know I can use JS to manually set a scroll position, but I didn't think it was necessary when the page isn't being re-rendered.
I'm no expert with JS or the DOM, so I may very well be missing something, but I've looked here and ran through their examples with the Try it Here options and I can't replicate the problem, indicating the codebase I'm working with is the culprit.
Any ideas why the scroll position is being reset? jQuery is available to me as well, if it provides a better alternative.

If the functions are being called from a link you might have an internal anchor in your link:
http://www.website.com/page.html#
This is causing said behavior. The default behavior is that if an anchor does not exist, the page scroll position jumps to the top (scrollTop = 0).
If this happens on every function call regardless of the source, then this can be crossed off the list.

What is activating the event?
If it's an anchor then on the click event you need to "return false;" after the call to your jQuery/Ajax/jScript code.
If it's a button you may need to do the same.
I had this issue yesterday and this was the resolution.
So My link