Associate toggle with another function - javascript

I have a problem combining a toggle function with another function involving a change of the css 'position' attribute.
I have a starting page with a menu at the top and columns of pictures beneath it.
Some columns are higher than the window and they can be scrolled down together with the menu (both in position: absolute).
When you click on an item from the menu however, the columns hide and another set of pictures appears (triggered by a click+toggle function). This new set is horizontal and this time I need the menu not to scroll with it.
So what I'm trying to do is to change the position of the menu from absolute to fixed, according to the state of the toggle.
At first I tried including an if/else statement inside my click function but the 'else' part never worked. Now I'm trying to use the callback property of the toggle, but I can't seem to make it work either... The best I can do is get the menu's position switched to fixed, but then it stays that way.
one of the uneffective try-outs:
function fixMenu(){
('.menu').css('position','fixed')};
function freeMenu(){
('.menu').css('position','absolute')};
$("#menu_item").click(function(){
$("#horizontal_set").toggle(1000,fixMenu);
$(".column").toggle(1000,freeMenu);
});
I have no idea whether my problem is in the syntax or if I need a completely different solution. Please enlighten me :-)
Many thanks
PS: I made two little sketches but it appears I'm not allowed to share them :-( I hope my problem remains understandable.

Try this:
It checks via an if-statement if horizontal_set or column is visible. and invokes the correct function as a result.
function fixMenu(){
$('.menu').css('position','fixed')};
function freeMenu(){
$('.menu').css('position','absolute')};
$("#menu_item").click(function(){
$("#horizontal_set").toggle(1000);
$(".column").toggle(1000);
if ( $( "#horizontal_set" ).is( ":visible" ) && $( ".column" ).is( ":hidden" ) )
{
fixMenu();
}
else
{
freeMenu();
}
});

You forgot jQuery selectors in the function. Try:
function fixMenu() {
$('.menu').css('position','absolute');
}

Related

How to toggle jQuery element with a duration AND display?

When I want to toggle off a component I can use
$("#donkey").toggle(false);
and when I need it to be toggled during a certain time period I can use
$("#emailInvalid").toggle(700);
but now I'd like to combine those two. I want to ensure that the component is being toggled off (not only toggled back and forth) and I want to specify a duration of the process.
According to the jQuery API, I'm supposed to be able to specify an object with options, too. However, the following
$("#donkey").toggle({ duration: 700, display: false });
only toggles the donkey back and forth (during said time, though), whereas I'd like it to be toggled to invisibility. When I reviewed the options, I noticed that there's none that addresses display, so I fear that the above is treated by jQuery equivalently with
$("#donkey").toggle({ duration: 700, biteMe: "in the donkey" });
How can I make sure that the toggler is hiding the component (equivalent with the first line of code above) and that I can control the time for the process to be done (equivalent to the second line of code above)?
Apply toggle only when visible:
$('#donkey:visible').toggle(500);
Alternatively
var element=$('#donkey');
if(element.css('display') !== 'none'){
element.toggle(500);
}
Short answer - you can't.
Your options are to build something custom and carry out the logic in custom code. Alernatively, you might want to toggle between differen classes that have the look that you like. Check out toggleAss() for details.
For completeness I also give you a link to animate() as suggested by #DavidThomas, although I haven't used that one very much.
I think this is what you want -- if the element (#donkey) is visible it gets hidden, if it's hidden nothing happens.
$( '#button' ).click( function(){
if( $( '#donkey' ).css( 'display' ) === 'block' ) {
$("#donkey").toggle( 700 );
}
});
Codepen: http://s.codepen.io/SteveClason/debug/RRwpBd
This small plugin would allow you to combine the two:
(function ( $ ) {
$.fn.myToggle = function(show, options) {
return this.each(function() {
if ($(this).is(":hidden") ? show : !show) $(this).toggle(options);
});
};
}( jQuery ));
Simple example:
$("#donkey").myToggle(false, 700);

A (document).click function is causing a glitch in my dropdown menu

Codepen: http://codepen.io/JTBennett/pen/MKXjdO
Issue:
$(document).on('click', function (e) {
if($(e.target).closest('.treatments, .info').length == 0){
if($(".treatments, .info").is(":visible")) {
$(".treatments, .info").fadeOut("fast")
}
}
});
So, everything here is functioning how I want it to except when you click on the dropdown items (.treatments & .info), the submenu immediately disappears. This is due to the code above which is meant to tell the submenu to disappear when you've clicked anywhere in the document EXCEPT on the elements themselves, and ONLY if the elements are visible.
I'm going to try changing the order of the conditions of the function to see if I can get anywhere with that, but I'm running out of ideas with this one.
There is no $.slideOut() method. You're getting an error on the console. Change it to a $.slideUp and it works fine. http://codepen.io/anon/pen/yeEVjq
// $(".info").slidePut("fast");
$(".info").slideUp("fast");
Always check your console!

scrollTop not working automatically

I know there are a couple of questions to scrollTop already out there but I haven't really seen anything resembling my problem.
Using jquery 1.7.2 on an IE9 we have a page with three Tabs (JqueryUI).
The Data is connected and that resulted in us only having the current tab on the page. Changing tabs will remove the unseen one and reload the one we jump into.
The Scroll-Positions are stored correctly in variables on the base page but trying to set that position in the document-ready-function does not work.
An alert shows the correct number, so the function is actually called but the scrollbar does not move.
Calling the same function with a button on the page afterwards however works perfectly.
The document-ready-function on the tab's jsp is quite simple:
<script type="text/javascript">
jQuery(document).ready(function(){
setAhaScrollbar();
});
</script>
and the called function is quite simple as well:
function setAhaScrollbar() {
var scrollWert = $('#scrollbarAnhaengeartikel').val();
alert(scrollWert);
$('#anhaengeGridScrollable').scrollTop(scrollWert);
}
Called from document-ready it does nothing. Called from a button later on it works fine.
The div where the scroll position is supposed to be set is defined with overflow: auto and a fixed height
crollTop( value )
Description: Set the current vertical position of the scroll bar for each of the set of matched elements.
.scrollTop( value )
value
Type: Number
An integer indicating the new position to set the scroll bar to.
More Information
As the documentationsaid value should be number.
Try
var scrollWert = Number($('#scrollbarAnhaengeartikel').val());
or
var scrollWert = parseInt($('#scrollbarAnhaengeartikel').val());
Apparently it was primarily a timing problem. Maybe there were still things going on when document ready fired.
Changing that function to
jQuery(document).ready(function(){
setTimeout("setAhaScrollbar()", 500);
});
did the trick so my problem is solved.

jQuery slideToggle for multiple divs

What I am trying to do is have four links that each will display and hide a certain div when clicked. I am using slideToggle and I was able to get it to work with really sloppy and repetitive code. A friend of mine gave me a script he used and I tried it out and finally was able to get something to happen. However, all it does is hide the div and wont redisplay. Also it hides all the divs instead of just the specific one. Here is a jsfiddle I made. Hopefully you guys can understand what I am trying to do and help! Thanks alot.
Here is the script I'm using.
$(document).ready(function () {
$(".click_me").on('click', function () {
var $faq = $(this).next(".hide_div");
$faq.slideToggle();
$(".hide_div").not($faq).slideUp();
});
});
http://jsfiddle.net/uo15brz1/
Here's a link to a fiddle. http://jsfiddle.net/uo15brz1/7/
I changed your markup a little, adding id attributes to your divs. The jquery, gets the name attribute from the link that's clicked, adds a # to the front, hides the visible div, then toggles the respective div. I also added e.preventDefault to stop the browser from navigating due to the hash change. As an aside, javascript don't require the $ prefix.
$(document).ready(function () {
$(".click_me").on('click', function (e) {
e.preventDefault();
var name = $(this).attr('name');
var target = $("#" + name);
if(target.is(':visible')){
return false; //ignore the click if div is visible
}
target.insertBefore('.hide_div:eq(0)'); //put this item above other .hide_div elments, makes the animation prettier imo
$('.hide_div').slideUp(); //hide all divs on link click
target.slideDown(); // show the clicked one
});
});
Welcome to Stack Overflow!
Here's a fiddle:
http://jsfiddle.net/uo15brz1/2/
Basically, you need a way to point to the relevant content <div> based on the link that's clicked. It would be tricky to do that in a robust way with your current markup, so I've edited it. The examples in the jquery documentation are pretty good. Spend some time studying them, they are a great way to start out.

mCustomScrollbar scrollbar display on hidden div

I've seen answers on here on how to do this, but I just can't get it to work. Maybe another set of eyes will help. I'm trying to get the scrollbar to appear in a div that popups when an image is clicked. Here's the code for that:
('modalcs' is the name of the div that pops up)
And the function:
function update_scroll(theID)
{
document.getElementById(theID).style.display = 'block';
$(".scrollable").mCustomScrollbar("update");
}
In my $(document).ready(function() I have:
$(".scrollable").mCustomScrollbar({
theme:"dark-thick",
scrollButtons:{
enable:true,
advanced:{
updateOnBrowserResize:true,
updateOnContentResize:true
}
}
});
and I understand that on page load since the hidden div isn't seen, the scrollbar is unable to see its content.
TIA for any help!
The problem is that the "update" command does not operate on a collection, so if $(".scrollable") returns more than one element, it will update only the first one. Use $.each
$(".scrollable").each(function(){
$(this).mCustomScrollbar("update");
});
On the other hand, since you are operating on 1 element, you can just change your function:
function update_scroll(theID)
{
$('#' + theID).show().mCustomScrollbar("update");
}

Categories