Develop Reference

Disable click in other divs if one has been clicked already

This is my jsfiddle : https://jsfiddle.net/2ajo5jdx/
If you click on link-b a div fade-in,now if you click on link-c another div fadeIn too.I don't want more than one div at the same time.I want to disable click on link-c if link-b has been clicked already.
Is there a simple way?Thank you.
$('.b').on("click", function(e) {
e.preventDefault();
$('.a-div').fadeOut( 400, function(){
$('.b-div').addClass('active');
$('.b-div').fadeIn(400);
});
});
$('.c').on("click", function(e) {
e.preventDefault();
$('.a-div').fadeOut( 400, function(){
$('.c-div').addClass('active');
$('.c-div').fadeIn(400);
});
});

To add almost nothing to your code, you could use a flag, set it to true on each click in a link and to false on close
var some_link_opened = false;
$('.b').on("click", function(e) {
if (some_link_opened) return;
some_link_opened = true;
e.preventDefault();
$('.a-div').fadeOut( 400, function(){
$('.b-div').addClass('active');
$('.b-div').fadeIn(400);
});
});
$('.x').on("click", function(e) {
some_link_opened = false;
e.preventDefault();
$('.active').fadeOut( 400, function(){
$('this').removeClass('active');
$('.a-div').fadeIn(400);
});
});

I'm not sure if that what you mean, but if you want to show just one div every time you can use the following solutio based on active class.
Hope this helps.
$('.b').on("click", function(e) {
e.preventDefault();
$('.active').fadeOut( 400, function(){
$('.active').removeClass('active');
$('.b-div').addClass('active');
$('.b-div').fadeIn(400);
});
});
$('.c').on("click", function(e) {
e.preventDefault();
$('.active').fadeOut( 400, function(){
$('.active').removeClass('active');
$('.c-div').addClass('active');
$('.c-div').fadeIn(400);
});
});
$('.x').on("click", function(e) {
e.preventDefault();
$('.active').fadeOut( 400, function(){
$('this').removeClass('active');
$('.a-div').fadeIn(400);
});
});
.b-div,.c-div{
display:none;
}
.x {
color:red;
}
.b,.c,.x{
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="b">link-b</a>
<a class="c">link-c</a>
<a class="x">x</a>
<div class="a-div active">aaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="b-div">bbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
<div class="c-div">ccccccccccccccccccccccccccc</div>

Prevent stack animation

I'm a javascript/jquery rookie, but I try to put in place a an interactive page containing multiple divs. These Divs enlight when we pass the mouse over and turn back to normal when mouse leaves the div. The div enlarges when clicked, and a "back" button" must turn back the div to "normal" state. My problem is the behavior of the div when click the back button, and it starts to get back to normal but enlarges again afterward. I know I could resolve the problem by moving the "button" out of the div, but is there any other solution ?
Also, how to "stop" the opacity change when enlarging the DIV ? Tried the stop() function in various scenarios but without success so far...
Thanks for the help.
Here is the HTML code :
<div id='container'>
<div id='back_button'>BACK</div>
</div>
And here is for the jQuery
$(document).ready(function () {
$('#container').hover(function () {
$(this).fadeTo('fast', 1);
}, function () {
$(this).fadeTo('fast', 0.8);
}).click(function () {
$(this).stop().animate({
width: "600px",
height: "600px",
opacity: 1
});
$('#back_button').fadeTo('fast', 1);
});
$('#back_button').click(function () {
$(this).stop( true, true ).parent().animate({
width: "200px",
height: "100px"
});
});
});
I also created an example on jsfiddle

Stop the click on the back button from propagating up to the parent, and you can use a class to disable the hover events when the element is enlarged.
$(document).ready(function () {
$('#container').hover(function () {
if ( ! $(this).hasClass('large') ) $(this).fadeTo('fast', 1);
}, function () {
if ( ! $(this).hasClass('large') ) $(this).fadeTo('fast', 0.8);
}).click(function () {
$(this).animate({
width: "600px",
height: "600px",
opacity: 1
}).addClass('large');
$('#back_button').fadeTo('fast', 1);
});
$('#back_button').click(function (e) {
e.stopPropagation();
$(this).parent().animate({
width: "200px",
height: "100px"
}).removeClass('large');
});
});
FIDDLE

please use this updated code
$(document).ready(function () {
$('#container').hover(function () {
$(this).stop().fadeTo('fast', 1);
}, function () {
$(this).stop().fadeTo('fast', 0.8);
}).click(function (e) {
if(e.target.id=="back_button" || $(this).width()>200){
return;
}
$(this).stop().animate({
width: "600px",
height: "600px",
opacity: 1
});
$('#back_button').fadeTo('fast', 1);
});
$('#back_button').click(function () {
$('#container').animate({
width: "200px",
height: "100px",
});
});
});

Make jCarousel slider slide continously

I have a jCarousel, with autoscrolling, like: http://sorgalla.com/projects/jcarousel/examples/static_auto.html
Is it possible to make it slide continously, smoothly? instead of scrolling few items at a time?
<script type="text/javascript">
function mycarousel_initCallback(carousel) {
carousel.buttonNext.bind('click', function() { carousel.startAuto(0); });
carousel.buttonPrev.bind('click', function() { carousel.startAuto(0); });
carousel.clip.hover(function() { carousel.stopAuto(); }, function() { carousel.startAuto(); }); };
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({ auto: 1, wrap: 'circular', animation: 'fast', scroll: 1, initCallback: mycarousel_initCallback });
});
</script>
<ul id="mycarousel" class="jcarousel-skin-tango">
<!-- My slides here -->
</ul>
Also, can I do something to keep the autoscroll after I click on the navigation arrows, and the mouse is not hover the slider?
I haven't found nothing related in their documentation: http://sorgalla.com/projects/jcarousel/

Delete that line so your hover mouse will not stop animation:
carousel.clip.hover(function() { carousel.stopAuto(); }, function() { carousel.startAuto(); }); };
and try delete this:
carousel.buttonNext.bind('click', function() { carousel.startAuto(0); });
carousel.buttonPrev.bind('click', function() { carousel.startAuto(0); });
it may help you to get not starting all the time from (0) element. but first please check it.
so as you see you can delete whole function callback.

I have found what I was looking for. So my code look like:
<script type="text/javascript">
function mycarousel_initCallback(carousel) {
carousel.buttonNext.bind('click', function() { carousel.startAuto(); });
carousel.buttonPrev.bind('click', function() { carousel.startAuto(); });
carousel.clip.hover(function() { carousel.stopAuto(); }, function() { carousel.startAuto(); }); };
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({ auto: .01, wrap: 'circular', animation: 2000, scroll: 1, easing: 'linear', initCallback: mycarousel_initCallback });
});
</script>
It looks like these two settings combined "animation: 2000, easing: 'linear'" , are doing what I needed.

How can I close / dismiss Bootstrap Popover when clicking the popover trigger element?

jsFiddle: http://jsfiddle.net/kAYyR/
Screenshot:
Here's what works:
Open popover on button click
Close popover on click outside popover
Close popover on click of .close button
BUT... I cannot get the popover to close when you click the original button again. Instead the popover flashes off and on again.
Duplicate it yourself here.
How can I accomplish this?
HTML:
<button id="popoverId" class="popoverThis btn btn-large btn-danger">Click to toggle popover</button>
<div id="popoverContent" class="hide">This <em>rich</em> <pre>html</pre> content goes inside popover</div>
JS:
$('#popoverId').popover({
html: true,
title: "Popover Title",
content: function () {
return $('#popoverContent').html();
}
});
var isVisible = false;
var clickedAway = false;
$('.popoverThis').popover({
html: true,
trigger: 'manual'
}).click(function (e) {
$(this).popover('show');
$('.popover-content').append('<a class="close" style="position: absolute; top: 0; right: 6px;">×</a>');
clickedAway = false
isVisible = true
e.preventDefault()
});
$(document).click(function (e) {
if (isVisible & clickedAway) {
$('.popoverThis').popover('hide')
isVisible = clickedAway = false
} else {
clickedAway = true
}
});

Do you want work like this ?
http://jsfiddle.net/kAYyR/3/
$('#popoverId').popover({
html: true,
title: 'Popover Title<a class="close" href="#");">×</a>',
content: $('#popoverContent').html(),
});
$('#popoverId').click(function (e) {
e.stopPropagation();
});
$(document).click(function (e) {
if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
$('#popoverId').popover('hide');
}
});

I use this:
$('[data-toggle="popover"]').popover({html: true, container: 'body'});
$('[data-toggle="popover"]').click(function (e) {
e.preventDefault();
$('[data-toggle="popover"]').not(this).popover('hide');
$(this).popover('toggle');
});
$(document).click(function (e) {
if ($(e.target).parent().find('[data-toggle="popover"]').length > 0) {
$('[data-toggle="popover"]').popover('hide');
}
});

it can simply done by using this code
<div id='content'>something here</div>
$('[data-toggle=popover]').popover({
html: true,
content: function () {
return $('#content').html();
}
}).click(function (e) {
$('[data-toggle=popover]').not(this).popover('hide');
});

This simple code will hide all popovers on the page
$('.popover').popover('hide');

.animate() to add margin

I am using the code to add margin to a div on click. It works perfectly, but I want to make it "animate" when it is adding margin for a sliding effect. How would I use .animate() to accomplish this?
<script type='text/javascript'>
$(document).ready(function () {
$('.menub').click(function() {
if ($('.content').css('margin-left') == '300px')
{
$('.content').css('margin-left', '0px');
}
else {
$('.content').css('margin-left', '300px');
}
});
$('.navigation a li').click(function() {
$('.content').css('margin-left', '0px');
});
});
</script>

Do this:
​$('.content').animate({marginLeft: 300}, 1000);​​​​​
where 300 is the left margin width and 1000 is the number of milliseconds to animate. Apply same logic to do the reverse animation. See http://api.jquery.com/animate/ for more info.

<script type='text/javascript'>
$(document).ready(function () {
$('.menub').click(function() {
if ($('.content').css('margin-left') == '300px')
{
$('.content').animate({'margin-left', '0px'},5000);
}
else {
$('.content').animate({'margin-left', '300px'},5000);
}
});
$('.navigation a li').click(function() {
$('.content').animate({'margin-left', '0px'},5000);
});
});
</script>
Refrence: http://api.jquery.com/animate/

Like this: (the key is to use the JavaScript property "marginLeft")
$('.content').animate({
marginLeft: '+=50'
}, 5000, function() {
});