We Keep Coding

Javascript Multiple menu. If i click on one ul i want the other to close. (toogle). It keeps being open, how to fix?

Hopefully you can help me out with my problem.
Been annoying be for quite some time now.
Trying to make my menu work.
When i click on a block i want it to open, and close the other tab "if" another one is open.
Best regards jfb
HERE IS JSFIDDLE
http://jsfiddle.net/3ZWZu/
INCLUDES HTML, CSS, JS(jQuery)
$(document).ready(function() {
$('.ac-menu .topLevel').click(function(e) {
e.preventDefault();
if($('.ac-menu .topLevel ul').hasClass('open') === true){
$('.ac-menu .topLevel ul').removeClass('open');
$('.ac-menu .topLevel ul').addClass('closed');
$('.ac-menu .topLevel ul').slideUp(300);
}
if($(this).next('ul').hasClass('closed') === true){
$(this).next('ul').removeClass('closed');
$(this).next('ul').slideDown(300);
$(this).next('ul').addClass('open');
}
});
});

Presuming you use JQuery, try this one:
$(document).ready(function() {
$('.ac-menu .topLevel').click(function(e) {
e.preventDefault();
$('.ac-menu ul.open').removeClass('open').addClass('closed').slideUp(300);
$(this).next('ul.closed').removeClass('closed').slideDown(300).addClass('open');
});
});
Basically the idea behind this is that with ul.open or ul.closed selector you will only select the uls which have that specific class set. If there are none - then JQuery will return an empty set and will not apply those operations to anything - that is the way JQuery works. Furthermore, it allows you to chain your commands, like shown in my example.

I think you need that jsfiddle
i add topLevel class to li instead of a href
$(document).ready(function() {
$('.ac-menu li.topLevel').click(function(e) {
e.preventDefault();
var isClosed = $(this).find('ul').hasClass('closed');
$('.ac-menu li.topLevel ul').removeClass('open').addClass('closed').slideUp(300);
if( isClosed){
$(this).find('ul').addClass('open').removeClass('closed').slideDown(300);
}
});
});

jQUery .slideToggle() & .text replace

I've got the following problem (test version available http://jsfiddle.net/qmP8R/2/):
I have two <div> containing two versions of text and a third <div> used as a "container".
On load the container is populated with the shorten text. On the click of a button I want to change the short version for the long version with some animation (sliding up/down animation) and vice versa (swap short for long and long for short - basically toggle).
In the test version it works quite as expected, but I am not able to solve the following problems:
animation on 1st click does not work (but the text is changed to the long version)
on second click the whole container is slided up - not reverting to initial state
Basically what I waht to achieve is a kind of toggle behaviour, but connected with .text replacement rather than display: show/hide.
P.S.: AJAX content replacement is not available as a solution in my case.

How about sliding the text up, then changing it, and sliding it back down:
$(document).ready(function(){
$("#popis").text($("#popis_short").text());
var toggle_sw = true;
$("#popis_switch").click(function(){
var full = $("#popis_full").text(),
short = $("#popis_short").text();
if ( toggle_sw == true )
{
$("#popis").slideUp('slow', function () {
$(this).text(full).slideDown('slow');
});
toggle_sw = false;
}
else
{
$("#popis").slideUp('slow', function () {
$(this).text(short).slideDown('slow');
});
toggle_sw = true;
}
});
});
Here is a demo: http://jsfiddle.net/qmP8R/11/
Update
Since the text does not change, you can optimize your code a bit by selecting the text of the elements when the document is ready rather than doing so every-time the click event handler is called:
$(function(){
var $popis = $('#popis'),
toggle_sw = true,
full = $("#popis_full").text(),
short = $("#popis_short").text();
$popis.text(short);
$("#popis_switch").click(function(){
if ( toggle_sw ) {
$popis.slideUp('slow', function () {
$(this).text(full).slideDown('slow');
});
toggle_sw = false;
} else {
$popis.slideUp('slow', function () {
$(this).text(short).slideDown('slow');
});
toggle_sw = true;
}
});
});
Here is a demo of the optimized version: http://jsfiddle.net/qmP8R/13/
This example caches everything it can so no calculations have to happen that don't need to in the click event handler.

Check out JSFiddle. I've basically removed all the logic you had with changing the text.
There is a short div and a long div. The short div contains the first part and the long div contains the REST. Then all you need to do is slide up and down on the long div without changing any of the text.

This best way to do it in my opinion is to hide only the part of the text that should only be shown when you want the full text. This will save on the size of data required as well.
See my example here: http://jsfiddle.net/qmP8R/19/
The javascript is much simpler, and there is less html too:
$(document).ready(function(){
$("#popis_switch").on( 'click', function(){
if ( $("#popis_full").is(':visible') )
{
$("#popis_full").slideUp('slow');
}
else
{
$("#popis_full").slideDown('slow');
}
});
});

The sliding animation is hiding the toggle. I've edited the script to remove the animation and it shows the toggle working as intended. How you had it, the initial state is there but is hidden by the slide up.
$(document).ready(function(){
$("#popis").text($("#popis_short").text());
var toggle_sw = true;
$("#popis_switch").click(function(){
var full = $("#popis_full").text();
var short = $("#popis_short").text();
if ( toggle_sw == true )
$("#popis").text(full).slideDown('slow');
else
$("#popis").text(short).slideUp('slow').slideDown('slow');
toggle_sw = !toggle_sw;
});
});
EDIT:
Changing the order in the jquery chain, I was able to get a smooth animation:
$(document).ready(function(){
$("#popis").text($("#popis_short").text());
var toggle_sw = true;
$("#popis_switch").click(function(){
var full = $("#popis_full").text();
var short = $("#popis_short").text();
if ( toggle_sw == true )
$("#popis").slideUp('slow').text(full).slideDown('slow');
else
$("#popis").slideUp('slow').text(short).slideDown('slow');
toggle_sw = !toggle_sw;
});
});
Or : http://jsfiddle.net/qmP8R/24/

How to call a function with jQuery blur UNLESS clicking on a link?

I have a small jQuery script:
$('.field').blur(function() {
$(this).next().children().hide();
});
The children that is hidden contains some links. This makes it impossible to click the links (because they get hidden). What is an appropriate solution to this?
This is as close as I have got:
$('.field').blur(function() {
$('*').not('.adress').click(function(e) {
foo = $(this).data('events').click;
if(foo.length <= 1) {
// $(this).next('.spacer').children().removeClass("visible");
}
$(this).unbind(e);
});
});
The uncommented line is suppose to refer to the field that is blurred, but it doesn't seem to work. Any suggestions?

You can give it a slight delay, like this:
$('.field').blur(function() {
var kids = $(this).next().children();
setTimeout(function() { kids.hide(); }, 10);
});
This gives you time to click before those child links go away.

This is how I ended up doing it:
var curFocus;
$(document).delegate('*','mousedown', function(){
if ((this != curFocus) && // don't bother if this was the previous active element
($(curFocus).is('.field')) && // if it was a .field that was blurred
!($(this).is('.adress'))
) {
$('.' + $(curFocus).attr("id")).removeClass("visible"); // take action based on the blurred element
}
curFocus = this; // log the newly focussed element for the next event
});

I believe you can use .not('a') in this situation:
$('.field').not('a').blur(function() {
$(this).next().children().hide();
});
This isn't tested, so I am not sure if this will work or not.

jscrollpane block scrolling parent

Can i make jscrollpne such that parent pane doesnot scroll even when child scroll has reached its bottom. Now when child scrolling reaches bottom scrolling of parent occurs. I want parent to scroll only when mouse is out of child scrollpane.

The behaviour you describe is by design. This is how the native browser scrollbars behave on an element which has overflow: auto. I wouldn't recommend changing it. However, if you wish to then Borgenk's answer is correct, you can use this code:
$('.scroll-pane')
.jScrollPane()
.bind(
'mousewheel',
function(e)
{
e.preventDefault();
}
);
See an example here (you may need to shrink your window so the parent has any need to scroll): http://jsfiddle.net/VYcDZ/51/

You could use event.preventDefault()
$('.selector').mousewheel(function(event) {
event.preventDefault();
});

Ran into this problem tonight... saw no one had the answer so i wrote it up
var blockScrollTarget;
$('.jscroll').mousewheel(blockScroll);
......
function blockScroll(e) {
blockScrollTarget = blockScrollTarget || $(e.currentTarget);
var d = blockScrollTarget.data('jsp');
if(d.getPercentScrolledY() == 1 || d.getPercentScrolledY() == 0) {
return true;
}
if(d.getIsScrollableV()) {
e.preventDefault();
}
}

The above answers didn't work for me. If you are comfortable with editing the plugin source, you can expose the relevant internal methods to the public api:
// Public API
$.extend(
jsp,
{
...
initMousewheel : function(){
initMousewheel();
},
removeMousewheel : function(){
removeMousewheel();
}
}
);
Now you can conditionally and pragmatically eanable/disable the scrolling of any jscrollpane:
api = $('#full-page-container').data('jsp');
api.removeMousewheel(); // disable
api.initMousewheel(); // enable

jquery conditional logic for currentpage

I'm using jQuery for a vertical site navigation menu, all links within site. I have the basic functionality working, but am at a loss as to the correct if-else to accomplish the following:
As the code stands, the submenu items are always initially hidden, but I want them to start shown if the user-selected li or one of its child lis is assigned the class currentpage.
The code as it stands is:
(function(){
$('li:has(ul)')
.click(function(event){
if (this == event.target || $(event.target).parent()[0] == this) {
if ($(this).children('ul').is(':hidden')) {
$(this)
.css('list-style-image','url(minus.gif)')
.children('ul').slideDown();
}
else {
$(this)
.css('list-style-image','url(plus.gif)')
.children('ul').slideUp();
}
}
})
.css({
cursor:'pointer',
'list-style-image':'url(plus.gif)'
})
.children('ul').hide();
$('li:not(:has(ul))').css({
cursor: 'default',
'list-style-image':'none'
});
});
Hopefully someone can put me on the right track.
Bob McLeod

I want them to start shown if the user-selected li or one of its child lis is assigned the class currentpage.
How about afterwards doing:
$('.currentpage').parents('ul').show();

I would make a showMenuItem() function and call it in both places where you want to show a menu item.
$(function() { $('.currentpage').each(function() {
if ($(this).parents().filter('ul').is(":hidden")) {
showMenuItem($(this).parents().filter('ul'));
} else {
showMenuItem(this);
}
}});