I have a script that works on one link on jsfiddle.
I have two links. Link one is "Link one" the other one is "Link two" you can see the code on jsfiddle = http://jsfiddle.net/lamberta/7qGEJ/4/
It works to show and hide but i cant make it show one and other. It shows everything.
If i press Link one I want to show ".open-container-One"
And if I press Link two i just want to show "open-container-Two"
Hope you understand my issue.
jsCode:
$(document).ready(function() {
var $div = $('.test');
var height = $div.height();
$div.hide().css({
height: 0
});
$('a').click(function() {
if ($div.is(':visible')) {
$div.animate({
height: 0
}, {
duration: 500,
complete: function() {
$div.hide();
}
});
} else {
$div.show().animate({
height: height
}, {
duration: 500
});
}
return false;
});
});
Get the index from the clicked anchor, in this case that would have to be the wrapping li, and then use that index to select the right one in the collection of .test elements. No need to recreate the slideUp/Down already built into jQuery.
$(function() {
var elems = $('.test').hide();
$('a').click(function(e) {
e.preventDefault();
var selEl = elems.eq($(this).closest('li').index());
selEl.slideToggle(600);
elems.not(selEl).slideUp(600);
});
});
FIDDLE
Although I like #adeneo's answer, I prefer this method using selectors rather than elements :
$(".test").hide();
$('.list a').each(function(i) {
$(this).on("click", function() {
$(".test").slideUp(0).eq(i).slideDown(400, function() {
$(".close a").on("click", function() {
$(".test").slideUp();
}); // on click close
}); // after slideDown (shown div)
}); // on click link
}); // each
The only condition is that there should be the same number of links (list items) as the number of div to be shown and in the same order.
See JSFIDDLE
Give class to the anchor tag,
Link 01
Link 02
give the appropriate class as id to the div tag as
<div id="link1" class="test">
...
...
</div>
<div id="link2" class="test">
...
...
</div>
Do the below change in your javascript function
$('a').click(function() {
$('div.test').hide();
var showDivClass = $(this).attr("class");
$("#" + showDivClass).show().animate({
height: height
}, {
duration: 500
});
$('div.test').not("#" + showDivClass).hide().animate({
height: 0
}, {
duration: 500
});
});
Update and test.
Please provide the id to anchor tag which will be same as the class you need to show/hide.
and replace the $div with the id tag
Related
I have the following peice of code which binds click events to multiple anchor tags present in a div.
I want to determine which link was clicked (1st link or 2nd link or nth link) so that I can pass it to myFunction.
function bindClickEvent(){
$.each($("#links > li > a"), function(index, element){
$(element).click(function(event){
myFunction(linkID);
});
});
}
The reason I use the above type of function is because the anchor tags created in links div are dynamically created. i.e building html using other function
try something like this: http://jsfiddle.net/wo3o55yL/1/
<div>
One
Two
Three
Four
</div>
<script type="text/javascript">
$('a').on('click', function(e){
e.preventDefault();
myFunction($('a').index(this));
});
function myFunction(id) {
alert('my function - ' + id);
}
</script>
First point will be indexed with zero so thats why one is 0 and two is 1 and so on...
You should use event delegation to achieve this goal, like this:
Given HTML:
<div id="links" >
</div>
JavaScript:
$(function() {
// Just a simulation for dynamic links
setTimeout(function() {
var as = [];
for(var i = 0 ; i < 5 ; ++i) {
as.push('Element-' + (i+1) + '');
}
$('#links').html(as.join('<br />'));
}, 2000);
// Event delegation
$('#links').on('click', 'a', function(e){
e.preventDefault();
myFunction($('a').index(this));
});
function myFunction(id) {
alert('my function - ' + id);
}
});
You can do this way also, see working demo http://jsfiddle.net/g8k1csz9/
<ul id="links">
<li>Something1</li>
<li>Something2</li>
<li>Something3</li>
<li>Something4</li>
</ul>
$( "#links li a" ).click(function() {
var index = $('#links li a').index(this);
myfunction(index);
});
function myfunction(index){
alert(index);
}
I'm trying to assign two actions to a button in jQuery. The button is supposed to:
open a hidden div, and...
scroll down to get said div into view.
While both actions are working on the button, they currently require 2 clicks. On the first click the div appears, but to scroll it into view I need to click the button a second time.
Any suggestions how I am going wrong?
jQuery
$(document).ready(function () {
"use strict";
$('.footer a').click(function (event) {
event.preventDefault();
$('.impr-text').hide(); // hide previous popup div
var id = $(this).data("id"); // get the div id which to show
$('#' + id).fadeIn(function () { // show cuurent click link's popup
$(this).css({
'display': 'block'
});
});
$.scrollTo( '#impressum-footer', 800, {easing:'elasout'} );
});
});
HTML
<div id="impressum-footer">
<div class="footer">
<div class="inner-wrap-imp">
<ul class="impressum-links">
<li>Impressum</li>
<li>|</li>
<li>Datenschutz</li>
<li class="impressum-button" ></li>
</ul>
</div>
</div>
<div id="impr-text" class="impr-text">
<div class="inner-wrap"> ...
You need to put the scrollTo in the fadeIn completion callback handler. That way callTo is performed on completion of the fadeIn rather than, essentially, at the same time. Currently you seem to also be placing a callback function where another parameter is to go (either duration or options object depending on which method signature you are using). Not sure why you have the css change there at all.
Try something like this:
$(document).ready(function () {
"use strict";
$('.footer a').click(function (event) {
event.preventDefault();
$('.impr-text').hide(); // hide previous popup div
var id = $(this).data("id"); // get the div id which to show
$('#' + id).fadeIn({
duration: 100, // or whatever duration you want to use
complete: function() {
$.scrollTo( '#impressum-footer', 800, {easing:'elasout'} );
}
});
});
});
if you want to assign 2 different actions on one button, set it 2 different classes (or IDs), lets say
<div class="action1 action2">
After, in jQuery you will be able to do:
$('.action1').on('click', function (e) { console.log('#1'); ... });
$('.action2').on('click', function (e) { console.log('#2'); ... });
JsFiddle: http://jsfiddle.net/g2wdd2cb/
I have now managed to get it going. The approach as explained by #euvl was the one...
I changed my code (the scrolling part) after I realized it wasn't working. The final (working) code now looks like this:
jQuery:
$(document).ready(function () {
"use strict";
$('.footer-action-1 a').click(function (event) {
event.preventDefault();
$('.impr-text').hide(); // hide previous popup div
var id = $(this).data("id"); // get the div id which to show
$('#' + id).fadeIn(function () { // show cuurent click link's popup
$(this).css({
'display': 'block'
});
});
});
});
$(document).on('click','.footer-action-2 a', function(event) {
event.preventDefault();
var target = "#" + this.getAttribute('data-target');
$('html, body').animate({
scrollTop: $(target).offset().top
}, 2000);
});
HTML:
<div id="impressum-footer">
<div class="footer footer-action-1 footer-action-2">
<div class="inner-wrap-imp">
<ul class="impressum-links">
<li>Impressum</li>
<li>|</li>
<li>Datenschutz</li>
<li class="impressum-button" ></li>
</ul>
</div>
</div>
<div id="impr-text" class="impr-text">
<div class="inner-wrap">
The only problem now is that it scrolls a little too far. The moment I add an offset it stops working.
At the moment I'm trying to add a mouse click event listener on a h3 tag, when this tag is clicked it will slidetoggle a div.
Here is my HTML
<div class="gallery-wrapper">
<h3 class="visible-toogle"> >> Hide gallery</h3>
<div class="galleria">
<img src="../Images/spherefactor_001.png" data-title="Sphere factor image 1" data-description="Sphere factor">
<img src="../Images/spherefactor_002.png" data-title="Sphere factor image 2" data-description="Sphere factor">
<img src="../Images/spherefactor_003.png" data-title="Sphere factor image 3" data-description="Sphere factor">
</div>
</div>
and here is my javascript
$( document ).ready(function() {
$(".visible-toogle").click(function ()
{
var result = $(this).text();
if(result == " >> Show gallery")
{
$(this).text(" >> Hide gallery");
}
else
{
$(this).text(" >> Show gallery");
}
$(this).closest(".galleria").slideToggle( "slow", function()
{
});
});
});
What am I doing wrong?
Using next in jQuery might help you
$(this).next("div").slideToggle("slow", function () { });
Closest must be a parent. You need to use siblings there.
Use "first instead of closest:
$(this).first(".galleria").slideToggle("slow", function () {
jsfiddle
$(document).ready(function () {
$(".visible-toogle").click(function () {
var result = $(this).text();
var hText = result.indexOf("Hide") > -1 ? ">> Show gallery" : ">> Hide gallery";
$(this).text(hText);
//slide toggle.
$('.gallery-wrapper').find(".galleria").slideToggle(500, function () {
});
});
});
Fiddle Demo
Hi ive got this piece of code to deal with mouseenter and leave on 2 superposed div
When a user mouseenter the main div the sub div is showed, and if the user get in the subdiv the subdiv must remain, but if the user get out the maindiv and is not in the subdiv the subdiv must be hidden, try with my jsfiddle http://jsfiddle.net/rgkcp/
but the timer is not run in my piece of code
$(".bulleHome").each(function () {
var subDiv = $(this).find(".mupHome");
$(this).mouseenter(function () {
$(this).find(".mupHome").css("visibility", "visible");
$(this).find(".mupHome").animate({
marginTop: '-23px'
});
});
$(this, subDiv).mouseleave(function () {
// this is not run
timer = setTimeout(function () {
$(this).find(".mupHome").css("visibility", "hidden");
$(this).find(".mupHome").animate({
marginTop: '+23px'
})
}, 50);
});
$(this, subDiv).mouseenter(function () {
clearTimeout(timer);
});
});
And the html :
<div class="bulleHome ombreV">
<a href="http://preprod.mupiz.com/georges-barret" style="font-size:0.7em;text-decoration:none;" pid="13200">
<img src="http://www.mupiz.com/images/img-membres/images_4958C.jpg" alt="Georges profil" height="100px"><br>
</a>
<div class="mupHome" style="visibility: visible; margin-top: -23px;">
<img src="http://www.mupiz.com/images/mupitR.png" alt="Mup It!" id="bouton-ajout-ami13200" onclick="alert('ok')" style="cursor: pointer;"><span class="tMupHome">Mup it!</span>
</div>
</div>
And the linked css :
.mupHome{position:absolute;color:#fff;background: rgb(0, 0, 0) transparent;background: rgba(0, 0, 0, 0.8);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";width:100px;visibility:hidden;height:19px;}
.tMupHome{position:relative;top:-8px;left:5px}
Any ideas ?
Js Fiddle : http://jsfiddle.net/rgkcp/
Thanks!
I suggest you to create a var X and set it to false. Then if your mouse go over the SubDiv , you set it to true :
$(".mupHome").mouseenter(function () {
ondiv = true;
});
After this, you just have to verify if the var X is set to true when you leave the first div, if yes, you do nothing. if it still set to false, you hide the SubDiv :
$(this, subDiv).mouseleave(function () {
if(ondiv === false)
{
$(".mupHome").animate({
marginTop: '23px'
},function() {
$(".mupHome").css("visibility", "hidden");
});
}
});
Here's the jsFiddle.
I am guessing that you want the div to move back out of the way and disappear when the mouse leaves the sub div. If that is the case this should work fine. If it is not we could definitely use some clarification. You were changing the visibility before the animation, so the animation would not be visible. There were a couple missing quotes in the fiddle as well.
$(".bulleHome").each(function () {
var subDiv = $(this).find(".mupHome");
$(this).mouseenter(function () {
$(this).find(".mupHome").css("visibility", "visible");
$(this).find(".mupHome").animate({
marginTop: '-23px'
});
});
});
// Added Code
$('div.mupHome').on({
mouseleave: function() {
$(this).animate({marginTop: '+0px'}, 1000, function(){$(this).css('visibility', 'hidden');});}
});
Also on the mupHome div the style was not closed out correctly, not sure if this is true in your real code or not
<div class="mupHome" style="visibility: visible;>
Should be
<div class="mupHome" style="visibility: visible;">
I currently have a bootstrap popover holding a button. The popover shows only when the mouse is over a table's tr.
What I want to do is to be able to access the elements for that row, is this possible.
Popover code:
$('.popup').popover(
{
placement: 'top',
trigger: 'manual',
delay: { show: 350, hide: 100 },
html: true,
content: $('#shortcuts').html(),
title: "Quick Tasks"
}
).parent().delegate('#quickDeleteBtn', 'click', function() {
alert($(this).closest('tr').children('td').text()); // ???
});
var timer,
popover_parent;
function hidePopover(elem) {
$(elem).popover('hide');
}
$('.popup').hover(
function() {
var self = this;
clearTimeout(timer);
$('.popover').hide(); //Hide any open popovers on other elements.
popover_parent = self
//$('.popup').attr("data-content","WOOHOOOO!");
$(self).popover('show');
},
function() {
var self = this;
timer = setTimeout(function(){hidePopover(self)},250);
});
$(document).on({
mouseenter: function() {
clearTimeout(timer);
},
mouseleave: function() {
var self = this;
timer = setTimeout(function(){hidePopover(popover_parent)},250);
}
}, '.popover');
HTML:
<div class="hide" id="shortcuts">
Delete
</div>
javascript that implements popover on row:
rows += '<tr class="popup datarow" rel="popover">';
Does anyone know what I'm doing wrong here and how I am supposed to access the child elements of the tr I'm hovering over?
JSFiddle: http://jsfiddle.net/C5BjY/8/
For some reason I couldn't get closest() to work as it should. Using parent().parent() to get to the containing .popover divider, then using prev() to get the previous tr element seems to do the trick however.
Just change:
alert($(this).closest('tr').children('td').text());
To:
alert($(this).parent().parent().prev('tr').children('td').text());
JSFiddle example.
As a side note, as your Fiddle uses jQuery 1.10.1 you should change delegate() to on():
on('click', '#quickDeleteBtn', function(index) { ... });
Here I have fixed it.
You just have to pass the container option in which the popover element is added for the popover
$('.popup').each(function (index) {
console.log(index + ": " + $(this).text());
$(this).popover({
placement: 'top',
trigger: 'manual',
delay: {
show: 350,
hide: 100
},
html: true,
content: $('#shortcuts').html(),
title: "Quick Tasks",
container: '#' + this.id
});
});
In your button click alert, $(this) refers to the button itself. In the DOM hierarchy, the popover html is nowhere near your hovered tr.
Add a handler to the list item to store itself in a global variable and access that from the click event. See the forked fiddle here.
First we declare a global (at the very top):
var hovered;
Then we add a mouseover handler to the list item. Note that using 'on' means every newly generated list item will also receive this handler:
$('body').on('mouseover', '.popup', function() {
hovered = $(this);
});
Then we can alert the needed data from within the button click event:
alert(hovered.text());
See here JS Fiddle
by removing the delegate and using the id to find the button and attaching it to a click handler by making the popover makes it easier to track it
$(self).popover('show');
$('#quickDeleteBtn').click(function(){
alert($(self).text());
});
also note
$('#shortcuts').remove();
because you were using the button in the popover with the same ID in the #shortcuts we couldn't select it first, now we remove it we can
You already have the correct element in your code. Just reuse the popover_parent variable and you are all set :) FIDDLE
alert($(popover_parent).text());
Or you could do something around like this :
$('.popup').hover(
function () {
var self = this;
clearTimeout(timer);
$('.popover').hide(); //Hide any open popovers on other elements.
$('#quickDeleteBtn').data('target', '');
popover_parent = self;
//$('.popup').attr("data-content","WOOHOOOO!");
$('#quickDeleteBtn').data('target', $(self));
$(self).popover('show');
},
function () {
var self = this;
timer = setTimeout(function () {
$('#quickDeleteBtn').data('target', '');
hidePopover(self)
}, 250);
});
$(document).on({
mouseenter: function () {
clearTimeout(timer);
},
mouseleave: function () {
var self = this;
timer = setTimeout(function () {
$('#quickDeleteBtn').data('target', '');
hidePopover(popover_parent)
}, 250);
}
}, '.popover');
I just store the element clicked in your #quickDeleteBtn then use the link.
FIDDLE HERE