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!
Related
I am struggling to use Js and Jquery to change the href of a button depending on whether a class is active or not. I am still new to Javascript so I'm not sure if this is the best way to go about this but any advice on how to get my current code working properly would be awesome.
Here is my code..
if ($("#carousel-item-1").hasClass('active')) {
$("#portfolio-btn").attr("href", "https...");
}
if ($("#carousel-item-2").hasClass('active')) {
$("#portfolio-btn").attr("href", "https...");
}
if ($("#carousel-item-3").hasClass('active')) {
$("#portfolio-btn").attr("href", "https...");
}
The code works for carousel-item-1. It sucessfully changes the buttons empty href attribute to the desired website address. But what can I do to get the other two working? The active class DOES change on the other carousel items so that's not the problem but my button doesn't change the href depending on which carousel item is active. It just stays at the first carousel items link. Thanks for any help
Without seeing the rest of your code, it's hard to advise, but basically you need to apply your if statement logic when a new slide is presented. At that time, the slide will be active and you can apply the attribute.
If you're using the jQuery carousel there is a event called slid.bs.carousel that is fired when a new slide transitions in. For example....
$("#myCarousel").on('slid.bs.carousel', function () {
// The carousel has finished sliding from one item to another
checkForActive()
});
function checkForActive() {
if ($("#carousel-item-1").hasClass('active')) {
$("#portfolio-btn").attr("href", "https...");
}
if ($("#carousel-item-2").hasClass('active')) {
$("#portfolio-btn").attr("href", "https...");
}
if ($("#carousel-item-3").hasClass('active')) {
$("#portfolio-btn").attr("href", "https...");
}
}
I'm having a few problems with a hide/show function in jQuery that I can't seem to figure out. I have a if/else statement which is checking against a data attribute in my HTML, it's then hiding/showing the element based on the results of it. I've been able to log the entire function and it's triggering the correct statements when they are supposed to, but the problem I'm having is getting the content to reappear again after it was hidden. It hides properly, but never comes back. Here is the code:
var bar = $("#alert");
if (!supressed) {
bar.animate({height:0});
bar.parent().animate({height:0}, function() {
$(this).hide()
});
}
if (supressed) {
console.log("Supressing");
bar.replaceWith(newBar);
bar.parent().animate({height: "45px"}, function() {
$(this).show()
});
bar.animate({height: "45px"});
}
The problem is occuring where the console.log("Supressing"); statement is. It logs it to the console so I know it's working, but for some reason the bar is not appearing at all.
If I do an inspect element I can still see that the parent of #alert still has style="height: 0px; display: none;" on it.
Where am I going wrong?
The problem is you're using the replaceWith function (first line after the else statement). Then you call bar.parent() after the element has been removed from the DOM.
Maybe you meant to say
newBar.parent().animate({height: "45px"}, function() {
$(this).show()
});
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');
}
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.
Back from this issue
Multiple Dialog
I was able to solve the issue but now problem is that it removes the div so when I access that Div it give error. It gives error because when I open dialog it works fine after removing on close it gives e.rror
I don't want to removed jQuery('#divPopup') If there is only one div present. If multiple jQuery('#divPopup') are there remove() should be working fine.
jQuery('.register_button_class').live('click',function () {
var iFrameobj = createIframe('',iframeUrl);
jQuery('#divPopup').html(iFrameobj);
createDialogWithClose(url,'#bodyId');
return false;
});
Dummy Div for Dialog Popup, This get removed, when Click on Close Jquery Ui Popup.
So when I say
jQuery('#divPopup').html(iFrameobj);
It gives error.
<div id="divPopup"></div>
I'm assuming that your function:
createDialogWithClose(url, '#bodyId');
removes the div id="divPopup" each from the DOM when you close it.
I would suggest not initially including that div in your markup and change your function to create the div and append it to the DOM when it runs. Then remove like you're already doing.
jQuery('.register_button_class').live('click',function () {
var iFrameobj = createIframe('',iframeUrl);
jQuery("body").append("<div id='divPopup' />").html(iFrameobj);
createDialogWithClose(url,'#bodyId');
return false;
});
It's hard to tell what other issues you may be running into with this bit of code that you posted, however, jQuery("body").append("<div id='divPopup' />").html(iFrameobj); will create the divPopup each time the function runs. So, when you close it and it gets removed it will just get created again the next time that button is clicked.
EDIT: How to check if a Div exists -
if ($("#divPopup").length > 0){
// do something here
}
I solved like this
var length = jQuery('#divPopup').length;
if(length>1)
{
jQuery('#divPopup').dialog('destroy').remove();
}else
{
jQuery('#divPopup').dialog('destroy');
}