jQuery - have different events if element is on the same row - javascript

I have a page with a row of boxes that are responsive........
so the smaller you resize the window the amount of boxes on each row lessens
heres a fiddle to show you whats going on
http://jsfiddle.net/abtPH/6/
Right now the behavior is......if you click on a box then a div appears under it.....if you click on the next box the div slides up a bit then slides down revealing the new content...
I want it so that if the box is on the same row and the user clicks the next one it does not slide up then down but fades the content in
I only want it to slide up when the box is on a different row...like underneath
heres my jquery so far
$('li').on('click', function(e){
$(this).siblings('.active').toggleClass('active', 400).find('.outer').slideToggle();
$(this).find('.outer').slideToggle();
$(this).toggleClass('active', 400);
});

The trick is detecting what is on the same line. For that I think the position() function is what you need. When a list item is clicked, check to see if there is an active one already, if so, check to see if the current and active items have the same top value. If they do crossfade otherwise toggle.
$('li').on('click', function(e){
var active = $(this).siblings('.active');
var posTop = ($(this).position()).top;
if (active.length > 0) {
var activeTop = (active.position()).top;
if (activeTop == posTop) {
active.toggleClass('active', 400).find('.outer').fadeOut('slow');
$(this).find('.outer').fadeIn('slow');
} else {
$(this).siblings('.active').toggleClass('active', 400).find('.outer').slideToggle();
$(this).find('.outer').slideToggle();
}
} else {
$(this).find('.outer').slideToggle();
}
$(this).toggleClass('active', 400);
});
jsFiddle

Related

What is wrong with this code, trying a click menu?

So there is a left side vertical menu. And it has a small options button. When clicked, it should open a div which will have various filter options. Now, i need it to appear when clicked, and disappear when either the options button is clicked again, or the user clicks anywhere outside the div.
So i have the following code.
//options filter menu animation
$('#optionsmenu').hide(); //hides the menu
$('.optionsfilters').click(function(e){
var $this = $('#optionsmenu');
$this.show();
var left = $('#sidebar').css('width'),
top = $(this).offset().top;
$this.css('top', top);
$this.css('left', left);
});
$(':not(.optionsfilters)').click(function(e){
$('#optionsmenu').hide();
});
The HTML is
<div id="sidebartitle">
<h2>Organisation</h2>
<a id="optionsfilters" class="optionsfilters">Options</a>
</div>
<div id="optionsmenu" class="optionsfilters">
<h3>Add New</h3>
<ul>
<label>Year</label>
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
</select>
</ul>
</div>
Its not working together, i.e. the two javascript functions, the first one works alone, when the second one is commented out. The second one works, if i comment out the hide part, and add an alert message. But together, they don't work.
Whats the conflict?
Ok there are a few things you will want to do:
1) If you want the original button to close the menu you will want to use .toggle() rather than .show()
2) You will want to detect a click on the document, to hide the options menu. Which will not be called if it is the options menu that is clicked due to the e.stopPropagation(); (point 4 below).
$(document).click(function() {
$('#optionsmenu').hide();
});
3) You also want to check (as both have the same class) that the .optionsfilters that was clicked was not the filters themselves (otherwise this will stop you clicking an option).
if( e.target !== this ) {
return;
}
4) Use e.stopPropagation(); to stop the event bubbling up to the parents (or document).
This should be what you are looking for:
$('#optionsmenu').hide(); //hides the menu
$('.optionsfilters').click(function(e){
e.stopPropagation();
if( e.target !== this ) {
return;
}
var $this = $('#optionsmenu');
$this.toggle();
var left = $('#sidebar').css('width'),
top = $(this).offset().top;
$this.css('top', top);
$this.css('left', left);
});
$(document).click(function() {
$('#optionsmenu').hide();
});
Here is the working fiddle: http://jsfiddle.net/lee_gladding/pny4vq26/
Here you go
//options filter menu animation
var filters = $('.optionsfilters');
var options = $('#optionsmenu');
options.hide(); //hides the menu
filters.click(function(e){
$('#optionsmenu').toggle();
var left = $('#sidebar').css('width'),
top = $(this).offset().top;
_this.css('top', top);
_this.css('left', left);
});
$(document).click(function(e) {
if (!filters.is(e.target) && filters.has(e.target).length === 0) {
options.hide();
}
});
http://jsfiddle.net/6e86hdwc/
a classic demonstration of stopPropagation in jQuery (http://api.jquery.com/event.stoppropagation/)
here is a fiddle that simplify this: http://jsfiddle.net/ymzrocks/98082xk7/1/
in short:
$('.optionsfilters').click(function(e)
{
e.stopPropagation(); // or elese it will fire the parent event
var $this = $('#optionsmenu');
$this.show();
var left = $('#sidebar').css('width'),
top = $(this).offset().top;
$this.css('top', top);
$this.css('left', left);
});
The problem is mainly that both your click handlers run and one shows the menu then the other one hides it.
Why? Because that's not a good selector. Until you reach the element with the class .optionsfilters your click goes through body, #sidebartitle and then it reaches the element a. And since the parents of that element don't have the class .optionsfilters, it will hide the menu.
So I changed the code a little. First of all don't use the class as a click handler. Use the IDs
$('#optionsfilters').click(function (e) { // ID of options
var $this = $('#optionsmenu');
$this.toggle(); // toggle show/hide when click on it
var left = $('#sidebar').css('width'),
top = $(this).offset().top;
$this.css('top', top);
$this.css('left', left);
});
The you need to check when you click outside of the #optionsmenu. For that you attach a click handler on document and check the e.target
$(document).click(function (e) {
if (!$(e.target).closest('.optionsfilters').length)
$('#optionsmenu').hide();
});
If the e.target itself is not .optionsfilters and is not a child of a parent with that class then you hide the menu.
Working example below.
//options filter menu animation
$('#optionsmenu').hide(); //hides the menu
$('#optionsfilters').click(function (e) {
var $this = $('#optionsmenu');
$this.toggle();
var left = $('#sidebar').css('width'),
top = $(this).offset().top;
$this.css('top', top);
$this.css('left', left);
});
$(document).click(function (e) {
if (!$(e.target).closest('.optionsfilters').length) $('#optionsmenu').hide();
});
#optionsmenu{
background:lightblue;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sidebartitle">
<h2>Organisation</h2>
<a id="optionsfilters" class="optionsfilters">Options</a>
</div>
<div id="optionsmenu" class="optionsfilters">
<h3>Add New</h3>
<ul>
<label>Year</label>
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
</select>
</ul>
</div>
Be careful using :not for any other elements, because if - for example - you click the dropdown, the sidebar hides again, which I doubt you want to happen.
It'd be better to define areas you want to make the sidebar hide when clicked, like the main content area.
Also since you use the class .optionsfilters on your sidebar menu, when you click in there the sidebar will hide again.
Try this
JS Fiddle.
I can't understand, but if your menu is hide (first instruction in your js), how can you click on it for show it?
EDIT: Didn't noticed the class attriute on previous div. My fault.

JQuery div display, collapse

I am not a jquery specialist but I have managed to make this script working on my website:
<script>
$(document).ready(function() {
$('#open_#div_hidden_1').click(function() {
if ($('#div_hidden_1').is(':hidden')) {
$('#div_hidden_1').show(500);
$('#div_hidden_1').hide(500);
} else {
$('#div_hidden_1').hide(500);
}
});
});
</script>
Basicly it displays and collapses a div (distinguished by id), I have many divs on my wbesite that are displayed this way(its an inline code, for each div separate code) What I would like to do with it is to close all other divs (e.g. from the same class) when I open another one. Could please someone help me to modify this code so that it will collapse all other divs form the same class?
If you have multiple DIVs and class like below,
<div class="divClass">A</div>
<div class="divClass">B</div>
<div class="divClass">C</div>
then, you need to use like,
$(".divClass").click(function(){
$(".divClass").hide(500); //hiding all the element with divClass
$(this).show(500); // showing up the clicked element.
});
This might be able to you
Reference
Just a part of code
$(".header").click(function () {
$(".header").not(this).text('Expand').next().slideUp();
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function () {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});

How to stop fast clicking animation happening jQuery

I'm working on an image slide show. There will be a set of images on the left and user can click the up or down image to see the rest of the image. I am showing only 3 Images at a time.
The way I did it is I slide up the first one, move it to the bottom. At the same time, sliding the 4th one up to show it.
Here is my jQuery code:
$("#goup").click(function(e) {
$("#imgslide > img:first")
.slideUp(500,function(e){
$(this).appendTo("#imgslide");
});
$("#imgslide > img:eq(3)").slideToggle({direction:"up"},500);
// move the paragraph with the image index sync
$("#product_description > div:first")
.appendTo("#product_description");
});
I don't have any id or class on those images ( Gonna use ajax to produce these <img> tag )
It worked when I click slowly. If I double click fast, the 3rd image is gone.
Is there any way I can stop user from fast clicking or can it wait for the last action finish to go to the next one?
$("#goup").click(function(e) {
$("#imgslide > img:first")
.slideUp(500,function(e){
$(this).appendTo("#imgslide");
});
$("#imgslide > img:eq(3)").slideToggle({direction:"up"},500);
// move the paragraph with the image index sync
$("#product_description > div:first")
.appendTo("#product_description");
return false;
});
Put a variable boolean in your click function to check whether imgslide in transition/animation mode. if clicked is true return "donothing" once slidetoggle completed set the it to false.
var clicked = false;
$("#goup").click(function(e) {
if(clicked) return;
clicked= true;
$("#imgslide > img:first")
.slideUp(500,function(e){
$(this).appendTo("#imgslide");
});
$("#imgslide > img:eq(3)").slideToggle({direction:"up",complete:function(){
clicked= false;
}},500);
// move the paragraph with the image index sync
$("#product_description > div:first")
.appendTo("#product_description");
return false;
});
OK, You can disable the double click event on the element ,So the element will not respond to the double click event.
$("#goup").dblclick(function(e) {
e.preventDefault();
}

more concise jquery for multi button controlling visibility of same div

I have 3 buttons that control the visibility of 1 div.
we want to do following to div:
show the first time any of three buttons are clicked
show if button clicked is different to previously button click
hide if button clicked is the same as previous clicked and if div is currently visible
show if button clicked is the same as previous clicked and if div is currently invisible
currently I have this:
//$('#alert_area') = target div
$button = $('.button')
if ($button.attr('id') != $('#alert_area').attr('showing')){
$('#alert_area').show()
}else{
if ($('#alert_area').is(":visible")){
$('#alert_area').hide();
}else{
$('#alert_area').show();
}
}
$('#alert_area').attr('showing', $button.attr('id'))
It's only a slight improvement, but you can replace your else block with toggle. You can also cache your selector to neaten things up.
var $button = $('.button'), $alertArea = $("#alert_area");
if ($button.attr('id') != $alertArea.attr('showing')) {
$alertArea.show()
} else {
$alertArea.toggle();
}
$alertArea.attr('showing', $button.attr('id'));

Jquery menu slide up from from bottom of screen on hover

I want to only show the menu phrases "music, newsletter, contact" fixed at the bottom of the screen. On hover I want them to slide up and reveal hidden content. here's exactly what I mean:
http://sorendahljeppesen.dk/
See the bottom of the screen. Anyone know how this would be accomplished? Thank you.
P.S. also, would anyone know what type of MP3 player that is?
Put your hidden content into a div such as;
<div class="hiddenContent">...</div>
Then give your links at the bottom of the page a class such as;
Music
Then tell the Jquery to show the hidden content when you hover over the link;
$('.bottomLink').hover(
function () {
// Show hidden content IF it is not already showing
if($('.hiddenContent').css('display') == 'none') {
$('.hiddenContent').slideUp('slow');
}
},
function () {
// Do nothing when mouse leaves the link
$.noop(); // Do Nothing
}
);
// Close menu when mouse leaves Hidden Content
$('.hiddenContent').mouseleave(function () {
$('.hiddenContent').slideDown('slow');
});
Try this code:
ASPX section,
<div id="categories-menu" class="hover-menu">
<h2>Categories</h2>
<ul class="actions no-style" style="display: none">
<li>//Place your content here that should show up on mouse over</li>
</ul>
</div>
JQuery section,
<script type="text/javascript">
$(document).ready(function() {
function show() {
var menu = $(this);
menu.children(".actions").slideUp();
}
function hide() {
var menu = $(this);
menu.children(".actions").slideDown();
}
$(".hover-menu").hoverIntent({
sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)
interval: 50, // number = milliseconds for onMouseOver polling interval
over: show, // function = onMouseOver callback (required)
timeout: 300, // number = milliseconds delay before onMouseOut
out: hide // function = onMouseOut callback (required)
});
});
</script>
Hope this helps...
I have found this great article with live demo and source code to download, the article show how to make a slide out menu from bottom.

Categories