This is the jQuery code written on the php file of the plugin. IT is working fine now but i want it to close when some one clicks outside of the panel.
Here is the javascript code :
<script type="text/javascript">
jQuery(document).ready(function($) {
/* SideOffer Sidebar Functionality */
$("#sideoffer").toggle(
function() { $(this).animate({ "right": "<?php echo get_option('hd_sideoffer_out'); ?>px" }, "slow"); },
function() { $(this).animate({ "right": "<?php echo get_option('hd_sideoffer_in'); ?>px" }, "slow"); }
);
/* SideOffer .hd-sideoffer click function */
$(".sideoffer").click(function(){ $("#sideoffer").click(); });
/* SideOffer aLlow clicks on content box */
$("#sideoffer .box").click(function(event){ event.stopPropagation(); });
});</script>
Kindly help.
What you'll want to do is add this into the ready function
What it does is adding a delegated event on the document to trigger when anything that is not #sideoffer is cclicked and then hide #sideoffer.
$(document).on('click', ':not(#sideoffer)', function(){
$('#sideoffer').hide()
});
You'll need to capture the click event for everything other than your original click, which I guess is #sideoffer?
$('body').click(function(event) {
if (!$(event.target).closest('#sideoffer').length) {
$('#sideoffer').animate({ "right": "<?php echo get_option('hd_sideoffer_in'); ?>px" }, "slow");
};
});
try to use javascript
$('body').click(function(event) {
var target = event.target;
/* do something when getting element you are currently click on*/
}
Here is example, http://api.jquery.com/event.target/
Related
How can I call jQuery Lightbox2 with AJAX.
I am using this function for my project.
$(document).ready(function() {
$(".paylasimi-goster").click(function() {
event.preventDefault();
var id = $(this).data("id");
$.ajax({
url: "gonderiyi_goster.php?msg_id=" + id,
type: 'get',
beforeSend: function() {
$("#loader").fadeIn(100);
},
}).done(function(data) {
$("#loader").fadeOut(100);
$(".sidebar").fadeIn().find(".sidebar-content").animate({
"right": 0
}, 200).html(data);
imgResize(jQuery, 'smartresize');
});
});
$(".sidebar").click(function() {
$(".sidebar-content").animate({
"right": "-565px"
}, 200, function() {
$(".sidebar").fadeOut();
})
});
$(".sidebar-content").click(function(e) {
e.stopPropagation();
});
});
Also I have created this DEMO from jsfiddle. In this jsfiddle you can see there white div. Click any white div then see the right sidebar. So in the sidebar have one image. The problem is here : Lightbox2 does not work when you click on the image.
How can I call Lightbox2 with ajax.
The issue here is the e. stopPropagation() on the .sidebar-content click event which is preventing the lightbox from triggering. You can remove that altogether and inside the .sidebar click event instead call:
$(".sidebar").click(function(e){
var preventClick = $(".sidebar-content");
if (!preventClick.is(e.target) && preventClick.has(e.target).length === 0){
//run the hide animate function + callback
$(".sidebar-content").animate({"right":"-200px"},200,function(){
$(".sidebar").fadeOut();
});
};
});
FIDDLE
I'm trying to make a toggle button, so when you click once on #mbtn, it must be set to top:0px and when you click a second time, it must be set to top:-110px.
Here is the code I'm using but it seems like it's not working, where am I wrong?
<script>
$(document).ready(function() {
$('#mbtn').toggle(
function() {
$('.menu').animate({
top: "0px"
}, 500);
},
function() {
$('.menu').animate({
top: "-110px"
}, 500);
}
);
});
</script>
Per jQuery API, you have to use toggle with an action, such as click. For example:
$( "#mbtn" ).click(function() {
$( ".menu" ).toggle( "slow", function() {
// Animation complete.
});
});
JSfiddle
I assume you were trying to hide the menu bar? if so, take a look at .slideToggle() instead. Here is the JSfiddle example.
I am new to jQuery and am trying to gracefully submit a form using AJAX rather than the traditional post method. So far I do the following to hide the form and prevent it from submitting:
$(document).ready( function() {
$("#contact_me").submit( function(event) {
event.preventDefault();
});
$('input#submit').click( function() {
$('#contact_me').fadeOut( 1000, function() {
$('#contact_me').hide();
$('#contact_me').after( '<p class="submission_text">Thank you for contacting me. I will contact you shortly.</p>' );
} );
});
});
However, ideally, I would like the p.submission_text to fade in after the form has been hidden. However, if I append the following after the call to .after, the text does not fade in, it just appears:
$('.submission_text').fadeIn( 600 );
How can I get the behaviour I want?
.submission_text needs to be hidden in the first place in order to fade in. Try this:
$(document).ready( function() {
$("#contact_me").submit( function(event) {
event.preventDefault();
});
$('input#submit').click( function() {
$('#contact_me').fadeOut( 1000, function() {
var $p = $('<p class="submission_text" style="display:none">Thank you for contacting me. I will contact you shortly.</p>');
$('#contact_me').hide();
$('#contact_me').after( $p );
$p.fadeIn( 600 );
} );
});
});
Because you are appending p tag with class 'submission_text' dynamically using jquery so,use event delegation as shown :
$(document).on('click','input#submit',function(){
$('.submission_text').fadeIn( 600 );
});
Add the p.submission element as a hidden element initially with .hide() as follows:
$('input#submit').click( function() {
$('#contact_me').fadeOut( 1000, function() {
$('#contact_me').after( '<p class="submission_text">TEXT</p>')
.hide()
.fadeIn(600);
} );
});
i want to activate a function on click on a div ... actually this animation starts #page load... and i want to click on a div to activate this animation.
this was my first Question: Question
How is this possible?
var $a = $(".a"),
$b = $(".b"),
$c = $(".c");
function anim1() {
$b.animate({width: 395}, {duration: 500, complete: anim2});
}
function anim2() {
$a.animate({top:"0px"}, {duration: 500});
}
anim1();
Here is the fiddle: FIDDLE DEMO
Try this:
$(".example").click(function() {
anim1();
});
JSFiddle
Well I don't know correct word for this so I wrote three of them, hope you wont mind...
Now, my question.
I have javascript that is running on pageload as it's usual... The script hide specified id's and reveal them on click. Let's call this script "hide on load".
My problem here is, that another javascript, let's call it "news" is running as well on page load and I can see it only 1 second, until another script hide div id's.
Once I click on specified div that should run reveal "news", nothing happends. I can see that "hide on load" running fading (fadein) but nothing is being revealed.
Hide on Load script:
$(window).load(function(){
var activeElement;
function activateElement( eltSuffix ) {
if( activeElement ) {
activeElement.fadeOut( 500, function() {
activeElement = $('#content-reveal-'+eltSuffix);
activeElement.fadeIn( 500 );
} );
} else {
activeElement = $('#content-reveal-'+eltSuffix);
activeElement.fadeIn( 500 );
}
}
$(document).ready( function() {
$('#content div').hide();
$('#info a').click( function() {
activateElement('info');
} );
$('#search a').click( function() {
activateElement('search');
} );
$('#music a').click( function() {
activateElement('music');
} );
$('#socials a').click( function() {
activateElement('socials');
} );
} );
});
News script:
$(document).ready(function () {
$('#newsticker_1').newsticker({
'style': 'fade',
'showControls': false,
'autoStart': true,
'fadeOutSpeed': 'slow',
'fadeInSpeed': 'slow',
'transitionSpeed': '4000',
'pauseOnHover': true
});
})(jQuery);
Thank you!
You can use onclick html on the div so....
<div id="whatyouwanttoclickon" onclick="news()"></div>
But you would have to name the function news like this.
function news(){
$('#newsticker_1').newsticker({
'style': 'fade',
'showControls': false,
'autoStart': true,
'fadeOutSpeed': 'slow',
'fadeInSpeed': 'slow',
'transitionSpeed': '4000',
'pauseOnHover': true
});
Or you could use jquery like this....
$('#divyouwanttoclickon').click(function(){//putyourfunctioninhere});