I am trying to use the JQuery Hide and show script to display text on top an image when the div tag is clicked.
The JQuery code I am using is bellow, I have created a JSFiddle to show 2 examples, a before and after with my current result.
UPDATE: I have managed to get the toggle to work and changed some of the CSS. But need div tag hidden until click.
Any help or feedback would be great thanks (Y)
Im sorry about the prev link;
$(".card-options").click(function () {
$(".card-list").toggle();
});
[JSfiddle][1]
[1] http://jsfiddle.net/jinghming/u4epkev4/
Instead Of using
$("#div").click(function(){
$(".box").hide();
});
$("#div").click(function(){
$(".box").show();
});
I used toggle function;
$("#div").click(function () {
$(".box").toggle();
});
*Still working out how to have .box hidden until #div is clicked. But currently does switch between hide and show.
From what I understand, when the little black box is clicked, the list should appear and disappear - I can't see the link to your updated fiddle so here is the update I made to your JS:
$(".card .card-options").click(function () {
$(this).parents('.card').find('.card-list').toggleClass('active');
});
I've also added a display: none; to your .card-list CSS declaration and added the following:
.card-list.active {display: block;}
If you want that bottom bar to be at the bottom of the box then you'd have to do some absolute positioning.
See the updated fiddle here:
http://jsfiddle.net/u4epkev4/4/
You just need to do toggle and you forgot to go into card-text:
$(".card-list").hide(); // Hides the card list at the start
$(".card .card-text .card-options").click(function () {
// Toggle the card-list for the clicked card
$(this).parent().parent().find(".card-list").toggle();
});
Example
Related
Here is a link to the site in progress -- http://barret.co/resources/testsite12345/
There is almost nothing on the site yet as I am working on the skeleton, so inspecting element should be very easy to pinpoint what's wrong.
I'm working on a slide out menu from scratch but am fairly new to jQuery. Basically, what I have now is working, but not exactly how I'd like it to be. as you can see, when you click the menu button in top left, it slides the panel left and back to the right. I'd like for this panel to initially be hidden upon viewing the page, and then slide out when menu is clicked.
Also, is there an easy way to close this panel if a user clicks onto the main page? The only way it closes now is if the menu button is clicked again.
Any help is very much appreciated.
Thanks in advance!
I think you simply had a mixup with the classes.
Add this to your #left-menu css:
right: 300px;
and then use this:
jQuery(document).ready(function($) {
$('#menu-container #right-menu').click(function(){
var hidden = $('#left-menu');
if (! hidden.hasClass('visible')){
hidden.animate({"right":"0px"}, "slow").addClass('visible');
} else {
hidden.animate({"right":"300px"}, "slow").removeClass('visible');
}
});
}); // end
Add the following: $(".logo").hide() to the $(document).ready(function () {});
I have a menu that is hidden from view (for mobile) using CSS:
#filter-column {
position:absolute;
left:-400px;
}
When the user clicks a link I want to hide everything else except that menu which will slide in from the left. I want the reverse to happen when the layer is closed.
I have the following jQuery:
// Show/hide filters on mobile //
$("#openMobileFilters").click(function(){
$("#filter-column").animate({left:'0'},600).css('position', 'relative');
$('#results-container, #footer').addClass('hidden-xs');
});
$(".closeFilters").click(function(){
$("#filter-column").animate({left:'-400px'},600).css('position', 'absolute');
$('#results-container, #footer').removeClass('hidden-xs');
});
The problem is when I click to hide the menu the content shows before it is actually hidden. Is there a better way of doing this?
Without seeing this in action in a fiddle, I can only suggest you move the removal of the hidden class to the complete function of animate
$(".closeFilters").click(function(){
$("#filter-column").animate({left:'-400px'}, 600, function() {
$('#results-container, #footer').removeClass('hidden-xs');
}).css('position', 'absolute');
});
Currently, you are showing the content while the animation is going on which is why you see the content right away.
you have to put the code you want to be executed after the animation in the complete callback .. for example:
$("#filter-column").animate({
left:'-400px',
complete: function() {$('#results-container, #footer').removeClass('hidden-xs');}
}, 600)
I've been stuck on this particular problem. I would like to use a toggle menu for mobile widths on a website that I'm working on. Basically, it works nicely as I can show you on this CodePen.
The code for showing/hiding the menu via a toggle button with JavaScript works below.
$(document).ready(function() {
//Menu Open Seasame Action
$('.site-nav-btn').click(function() {
$('.site-nav ul').slideToggle('fast');
$(this).find('span:hidden').show().siblings().hide();
});
//Hide site-nav content.
$(".site-nav ul").hide();
});
My problem is that I would like to hide the toggle button and the toggle function when the width exceeds say, 480 pixels wide but keep the site-nav ul visible. I've been trying to do this via this code combined with the one above, and somehow it just doesn't work.
$(function() {
if ($(window).width() > 480) {
$('.site-nav-btn').css('display','none');
$('.site-nav ul').show();
}
else {
$('.site-nav-btn').css('display','block');
$('.site-nav ul').hide();
}
});
I'm not really that proficient in JavaScript so if anyone could point out why it didn't work alongside the solutions that would really be helpful.
Attach your checking function to $(window).resize() and fix the selectors. See this fork of your CodePen.
I can add a delay to the normal bootstrap3 dropdown menu, but in this instance I only want the delay on the submenu I've created (which isn't out the bootstrap box) - however the jquery used should still work. I need the delay so users can move the cursor to it easily without it closing (because the cursor may drift outside the a:hover element).
Take a look at this bootply - http://bootply.com/101522 and please help or advise why this isnt working!
jQuery('li.dropdown-submenu').hover(function () {
jQuery(this).find('ul.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function () {
jQuery(this).find('ul.dropdown-menu').stop(true, true).delay(200).fadeOut();
});
You need to remove (from your CSS):
.dropdown-submenu:hover > .dropdown-menu{
display:block;
}
This is causing it to show up instantly. I tried it in your bootply and it works perfectly.
Good Luck!
I have a flex slider with prev/next arrows, pretty standard. I hide the arrows on the page load and only want them to appear when the user hovers over the carousel info.
Here's my code:
$(".flex-container.home ul.flex-direction-nav").hide();
$(".flex-container.home .flexslider").hover(
function(){
$(".flex-container.home ul.flex-direction-nav").fadeIn();
},
function(){
$(".flex-container.home ul.flex-direction-nav").fadeOut();
}
)
The problem now is that when the user actually hovers over the arrow itself, it fades out, since technically I'm asking it to do so. I've tried to add some !important css to the ul.flex-direction-nav css styles but it doesn't stop the fade out from happening.
Change your code to the following. I've modified your selectors and used fadeToggle() to save you writing extra code.
Here is the new version, which works how you specified you would like:
$(document).ready(function () {
$(".flex-container.home ul.flex-direction-nav").hide();
$(".flex-container.home").hover(function () {
$(" ul.flex-direction-nav").fadeToggle();
});
});
Here is a working jsFiddle.
pauseOnHover:true, //this option working good
below css solved the issue for me-
.big-slider .flex-direction-nav {opacity: 0 !important;}
.big-slider .flex-direction-nav:hover {opacity: 1 !important;}