Two jQuery popup close functions - javascript

I am trying to make a jQuery popup close function. But I have two different popup lightbox area. Problem is first popup close function not working but second popup close function is working.
First jQuery click close link is not working:
$('.kapat').click(function(){
close_box();
});
$('.degistiralani').click(function(){
close_box();
});
Second jQuery click close link is working:
$('.pclose').click(function(){
close_box();
});
$('.cover_change_wrap').click(function(){
close_box();
});
All of my jQuery code is here:
$(document).ready(function() {
$('.d_button').click(function(){
$('.degistiralani, .box').animate({'opacity':'.50'}, 300, 'linear');
$('.alan').animate({'opacity':'1.00'}, 300, 'linear');
$('.degistiralani, .alan').css('display', 'block');
});
$('.kapat').click(function(){
close_box();
});
$('.degistiralani').click(function(){
close_box();
});
});
function close_box()
{
$('.degistiralani, .alan').animate({'opacity':'0'}, 300, 'linear', function(){
$('.degistiralani, .alan').css('display', 'none');
});
}
$(function(){
$('.b_c_d_button').click(function(){
$('.cover_change_wrap, .box').animate({'opacity':'.50'}, 300, 'linear');
$('.kapak_degistirme_alani').animate({'opacity':'1.00'}, 300, 'linear');
$('.cover_change_wrap, .kapak_degistirme_alani').css('display', 'block');
});
$('.pclose').click(function(){
close_box();
});
$('.cover_change_wrap').click(function(){
close_box();
});
});
function close_box()
{
$('.cover_change_wrap, .kapak_degistirme_alani').animate({'opacity':'0'}, 300, 'linear', function(){
$('.cover_change_wrap, .kapak_degistirme_alani').css('display', 'none');
});
}

You have close_box() defined twice. You're overwriting the first definition. Give them different names and it should work. I changed your first one to close_box1()
$('.kapat').click(function(){
close_box1();
});
$('.degistiralani').click(function(){
close_box1();
});
function close_box1()
{
$('.degistiralani, .alan').animate({'opacity':'0'}, 300, 'linear', function(){
$('.degistiralani, .alan').css('display', 'none');
});
}

Related

Following jQuery isn't working. Take a look

Code:
<div>
Back
<div class="outer"></div>
Next
</div>
<div>
Back
<div class="outer"></div>
Next
</div>
jQuery code:
$('.next').click(function() {
$('.next').prev().animate({
scrollLeft: '+=150'
}, 200);
});
$('.back').click(function() {
$('.back').next().animate({
scrollLeft: '-=150'
}, 200);
});
Error:
Basically I have more codes with the same classes as above and I want to scroll the code which is clicked. But the code written above scroll all the ".outer" on the page. Each set of the code is in different div. The inside material of the "outer" isn't provided which is scroll able.
You need to execute the code using current element context i.e. this. Also animate the siblings of parent element so traverse up using $(this).closest('div') then use .prev() or next()
$(function() {
$('.next').click(function() {
$(this).closest('div').prev().animate({
scrollLeft: '+=150'
}, 200);
});
$('.back').click(function() {
$(this).closest('div').next().animate({
scrollLeft: '-=150'
}, 200);
});
});
Simple Use $(this) for get current Object
$('.next').click(function () {
$(this).prev().animate({ scrollLeft: '+=150'}, 200);
});
$('.back').click(function () {
$(this).next().animate({ scrollLeft: '-=150'}, 200);
});
Don't forget to wrap your code in a document ready function.
<script>
$(document).ready(function() {
$('.next').click(function () {
$(this).prev().animate({ scrollLeft: '+=150'}, 200);
});
$('.back').click(function () {
$(this).next().animate({ scrollLeft: '-=150'}, 200);
});
});
</script>
Also using the on method is better for event binding, e.g.
<script>
$(document).ready(function() {
$('.next').on('click', function () {
$(this).prev().animate({ scrollLeft: '+=150'}, 200);
});
$('.back').on('click', function () {
$(this).next().animate({ scrollLeft: '-=150'}, 200);
});
});
</script>
Edit:
As #GuruprasadRao pointed out, I'm assuming you are already but make sure you're using a HTML5 doctype otherwise you'll need to add type="text/javascript" to your script tag.

How can i add jquery close function in my code

I have created this DEMO
As you can see there is a Show Div link. If you click the link then my jquery code making this:
$(document).ready(function() {
$('.click').click(function (e) {
e.preventDefault();
$('.popup').animate({'opacity':'.50'}, 300, 'linear');
$('.popup').css('display', 'block');
$(this).parent().next('.openingdiv').toggleClass('height');
$(this).toggleClass('zindex');
})
});
So when you click the Show Div link then you can see there is a close link in the .openingdiv. I want to add when the close button is clicked then .popup and .openingdiv closing.
You can add this click event on your code:
$('.closediv a').click(function (e) {
e.preventDefault();
$('.popup').animate({'opacity':'0'}, 300, 'linear');
$('.popup').css('display', 'none');
$(this).parents('.openingdiv').toggleClass('height');
})
If you want .opening div close before .popup div then you should wait 1s as .opening div transition and then execute the code for .popup. You can use a setTimeout. Try:
$('.closediv a').click(function (e) {
e.preventDefault();
$(this).parents('.openingdiv').toggleClass('height');
setTimeout(function(){
$('.popup').animate({'opacity':'0'}, 300, 'linear');
$('.popup').css('display', 'none');
}, 1000);
})
DEMO
You can add click handler for close button as shown below and there you need to remove height class
$('.closediv a').click(function(e){
e.preventDefault();
$('.popup').animate({'opacity':'1'}, 300, 'linear');
$('.popup').css('display', 'none');
$(this).closest('.openingdiv').removeClass('height');
});
DEMO

Condense Repetitive jQuery statements

I am pretty green when it comes to javascript, and programming in general. Can someone give me some direction on how to shorten the below code block. I built the front end with consistent naming so I know it can be done, but I'm unsure how.
$('#fd_button').on('click', function(){
$('#fd_content').fadeToggle("slow", "linear");
});
$('#fd_content #close_btn').on('click', function(){
$('#fd_content').fadeToggle("slow", "linear");
});
$('#fl_button').on('click', function(){
$('#fl_content').fadeToggle("slow", "linear");
});
$('#fl_content #close_btn').on('click', function(){
$('#fl_content').fadeToggle("slow", "linear");
});
$('#el_button').on('click', function(){
$('#el_content').fadeToggle("slow", "linear");
});
$('#el_content #close_btn').on('click', function(){
$('#el_content').fadeToggle("slow", "linear");
});
$('#fm_button').on('click', function(){
$('#fm_content').fadeToggle("slow", "linear");
});
$('#fm_content #close_btn').on('click', function(){
$('#fm_content').fadeToggle("slow", "linear");
});
$('#gf_button').on('click', function(){
$('#gf_content').fadeToggle("slow", "linear");
});
$('#gf_content #close_btn').on('click', function(){
$('#gf_content').fadeToggle("slow", "linear");
});
$('#fg_button').on('click', function(){
$('#fg_content').fadeToggle("slow", "linear");
});
$('#fg_content #close_btn').on('click', function(){
$('#fg_content').fadeToggle("slow", "linear");
});
$('#en_button').on('click', function(){
$('#en_content').fadeToggle("slow", "linear");
});
$('#en_content #close_btn').on('click', function(){
$('#en_content').fadeToggle("slow", "linear");
});
$('#fmn_button').on('click', function(){
$('#fmn_content').fadeToggle("slow", "linear");
});
$('#fmn_content #close_btn').on('click', function(){
$('#fmn_content').fadeToggle("slow", "linear");
});
$('#gfn_button').on('click', function(){
$('#gfn_content').fadeToggle("slow", "linear");
});
$('#gfn_content #close_btn').on('click', function(){
$('#gfn_content').fadeToggle("slow", "linear");
});
Add a data-toggle attribute to all elements that should toggle some other element when clicked. This attribute's value should be a reference to the element you want to fadeToggle():
Markup:
<div data-toggle="#fd_content">Some content</div>
<div data-toggle="#fm_content">Some more content</div>
<div data-toggle="#gfn_content">Even more content</div>
JS:
$("[data-toggle]").on("click", function() {
var elementToToggle = $(this).data("toggle");
$(elementToToggle).fadeToggle("slow", "linear");
});
See DEMO.
The answer is going to depend on your markup - if the markup for all these elements is similar, you might only need a single event handler. But taking the case where all of these things have radically different markup, you could do:
var selectors = [
['#fd_button', '#fd_content'],
['#fd_content #close_btn', '#fd_content'],
// ... etc
];
selectors.forEach(function(trigger, target) {
$(trigger).on('click', function(){
$(target).fadeToggle("slow", "linear");
});
});

Slide out division zooming

$(function () {
$("#clickme").click(function () {
if($(this).parent().hasClass("popped")){
$(this).parent().animate({right:'-280px'}, {queue: false, duration: 500}).removeClass("popped");
}else {
$(this).parent().animate({right: "0px" }, {queue: false, duration: 500}).addClass("popped");}
});
$(document).on('click',function(e){
if($('#slideout').hasClass("popped")){
$('#slideout').animate({right:'-280px'},{queue:false,duration: 500}).removeClass("popped");
}
});
$('#slideout').on('click',function(e){
e.stopPropagation();
});
});
<div id="slideout">
<div id="slidecontent">
Yar, there be dragonns herre!
</div>
<div id="clickme">
</div>
</div>
Its for slide out a div. But when i use this scripts, on zooming the website- the horizontal scroller not displayed. How can it solve?
Thanks.
You can try something like this:-
$(document).on('click',function(e){
if($('#slideout').hasClass("popped")){
$('#slideout').animate({right:'-280px'},{queue:false,duration: 500}).removeClass("popped");
}
});
JS FIDDLE
$(document).on('click',function(e){ /* Hide on Outside Click*/
if($('#slideout').hasClass("popped")){
$('#slideout').animate({right:'-280px'},{queue:false,duration: 500}).removeClass("popped");
}
});
$('#slideout').on('click',function(e){ /*Ignore 'Hide on Outside Click' on clicking #slideout element*/
e.stopPropagation();
});
This code should work
Your final code will be :
$(function () {
$("#clickme").click(function () {
if($(this).parent().hasClass("popped")){
$(this).parent().animate({right:'-280px'}, {queue: false, duration: 500}).removeClass("popped");
}else {
$(this).parent().animate({right: "0px" }, {queue: false, duration: 500}).addClass("popped");}
});
$(document).on('click',function(e){
if($('#slideout').hasClass("popped")){
$('#slideout').animate({right:'-280px'},{queue:false,duration: 500}).removeClass("popped");
}
});
$('#slideout').on('click',function(e){
e.stopPropagation();
});
});
JS FIDDLE

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.

Categories

Resources