Disable prettyPhoto specific link by detecting a class - javascript

Looking into solution of how to completely disable prettyPhoto poup overlay in case the clicked link has a specific class. So far, no matter what it keeps ignoring my if condition.
Here is the code:
(function(){
var targetLink = $('.popup');
targetLink.click(function(){
if($(this).hasClass('mobile')){
//do my stuff and then
} else {
$("a[rel^='prettyPhoto']").prettyPhoto({
deeplinking:false,
social_tools:false
});
}
return false;
});
})();
Any idead would be apreciated.
thak you.

This should stop prettyPhoto being applied to links where the element has a class of mobile.
$("a[rel^='prettyPhoto']:not(.mobile)").prettyPhoto({
deeplinking:false,
social_tools:false
});

Related

jquery, how to avoid hide menu when i click on it

I am trying to do the following code which works fine:
/*
** SHOW OR HIDE A MENU DEPENDING IF I CLICK OUTSIDE OR INSIDE
*/
function showBasket(){
var $basket=$('#basket');
var nstyle=$basket.css("display");
if (nstyle=='none'){
$basket.fadeIn(false,function(){//showing the basket
$('html').bind("click",function(){
$basket.fadeOut();//hidding the basket
$("html").unbind("click");
});
});
}
}
Is there possible to avoid that the layer 'basket' doesn't hide when i click on it? My problem is that when i click in the html documen,t it hides, and i want that, but i also dont want to include the layer 'basket' in that event, because i have controls to use in the layer.
I would appreciate any help or idea,
thank you in advance!!
try this
function showBasket(){
var $basket=$('#basket');
var nstyle=$basket.css("display");
$basket.on('click',function(e){
e.stopPropagation();
return false;
}
if (nstyle=='none'){
$basket.fadeIn(false,function(){//showing the basket
$('html').bind("click",function(){
$basket.fadeOut();//hidding the basket
$("html").unbind("click");
});
});
}
}

Ajax content loading issues

Following is my code which I am using to load contents dynamically. The issues which I am facing are the following:
Following code has now disabled CTRL+CLICK shortcode to open a url in a new tab. The new CSS and JS are not applying if they are not already exist in the previous page. Kindly let me know how can I resolve above mentioned issues?
$(document.body).on("click", "nav a", function () {
topen = $(this).attr("href");
window.location.hash = $(this).attr("href");
$("#main_wrapper").load( topen +" #main_wrapper > *");
return false;
});
What you want to do is modify the handler to use prevent default instead of returning false. Then you can check how the user activated the button and can act accordingly.
$(document).ready(function() {
$('a').on('click', function(e) {
if(e.ctrlKey || e.button === 1) {
return;
}
e.preventDefault();
// Do the stuff when the anchor is just clicked.
});
});
You can examine the Fiddle
In terms of the JS and CSS not applying we would need a working example of this to be of more assistance.

Jquery Toggle & Offclick

I'm kind of a newbie when it comes to jquery so I wondered if someone could help me.
I've made a toggle function. When you click on the user_button the user_info shows, when you offclick the user_info disapears. But now I want to let the user_info disapear also when you click again on user_info (so when it is open it closes).
This is the jquery I have. Thanks in advance!
$(document).ready(function(){
$("#user_button").click(function(){
$("#user_button").addClass("active")
$("#user_box").toggle();
});
$("#user_box").mouseup(function(){
return false;
});
$(this).mouseup(function() {
$("#user_button").removeClass("active");
$("#user_box").hide();
});
});
Could you post a testable example on for example jsfiddle.net? This allows other to "play" with the actual code.
Try to take look at methods suchas show, hide, toggle toggleClass etc.
Take your code => http://jsfiddle.net/3Nxz2/3/
$(document).ready(function(){
$("#user_button").click(function(){
//alert("click");
$("#user_button").addClass("active")
$("#user_box").toggle();
});
$("#user_box").mouseup(function(){
//return false;
});
$(this).mouseup(function() {
$("#user_button").removeClass("active");
//$("#user_box").hide();
});
});

How to exclude JQuery/Javascript fade in & out function on certain links?

I'm using this fade in and out JQuery/Javascript effect on my site to have each page fade in and out when a link is clicked. It's working great when the link that is clicked leads to a different page, but it is causing problems when the link leads to a different part of the page (such as my back to top link), when a mailto link is clicked, and when a link that is suppose to open up in a new page or tab is clicked. When these type of links are clicked they just lead to a blank white page because they don't lead to a new page. Here is the script:
$(document).ready(function() {
//Fades body
$("body").fadeIn(1500);
//Applies to every link
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
//Redirects page
function redirectPage() {
window.location = linkLocation;
}
});
Because of this I'm trying to figure out if there is a way where I can exclude this fade in/out function from certain links (such as the back to top link), but I don't know how to do it. I know that rather than set all the links to fade in/out I can set the fade in/out effect to a specific class that way it doesn't effect every link. However because the site is rather large, it would be extremely tedious and difficult to add that class to every link. So rather than do that I'm wondering if theres a way to define a no-fade class that would exclude this fade in/out function? That way I could apply that class to these few links that are having problems and make those links behave normally.
It seems like a simple thing to do, but because I'm still not very fluent in javascript/jquery I don't know how to do it. Any help would be much appreciated!
*EDIT: Here is the solution incase anybody else has a similar issue. Thanks to David for the missing piece!
$(document).ready(function() {
//Fades body
$("body").fadeIn(1500);
//Applies to every link EXCEPT .no-fade class
$("a").not(".no-fade").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
//Redirects page
function redirectPage() {
window.location = linkLocation;
}
});
Yup, you could indeed define a class that when applied to an anchor would exclude it from performaing your fade out and redirect.
So if you had an anchor you wanted your default fade-out behaviour to apply to then simply leave it as is.If you didn't want this behaviour then you could apply a class (we'll call it *no-fade") to the anchor.
HTML
Another page
Back to top
jQuery
<script type="text/javascript>
$(document).ready(function() {
$("body").fadeIn(1500);
$("a").not(".no-fade").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
// Redirects page
function redirectPage() {
window.location = linkLocation;
}
});
</script>
The only thing I've edited from your code is the selection of the anchors which I changed from:
$("a")
to
$("a").not(".no-fade")
The unobtrusive way would be to look for the hash symbol (#) or mailto:, etc. to prevent those types of links from fading out:
working fiddle
$("a").click(function (event) {
event.preventDefault();
linkLocation = $(this).attr('href');
if(linkLocation.indexOf('#') != -1 || linkLocation.indexOf('mailto:') != -1)
{redirectPage();}
else if($(this).attr('target') && $(this).attr('target').indexOf('_') != -1) window.open(linkLocation);
else $("body").fadeOut(1000, redirectPage);
});
Also, linkLocation = this.href should be linkLocation = $(this).attr('href')

close previous opened div if a div is already opened

Will try to explain what i mean :)
I have two hidden divs that opens with jquery, they both works quite good... when I'm using them separated... But if I open the div when the other one is open, the first one keeps being open in the background... I would like that one to close.
Is there an if else function i can use ?
This is what i have so far.
$(document).ready(function(){
$(".contactDiv").hide();
$(".show_hide_contact").show();
$('.show_hide_contact').click(function(){
$(".contactDiv").slideToggle();
});
});
$(document).ready(function(){
$(".loginDiv").hide();
$(".show_hide_login").show();
$('.show_hide_login').click(function(){
$(".loginDiv").slideToggle();
});
});
I have created a jsfiddle to show some more.
http://jsfiddle.net/h2Hfg/
Just slide the other div too:
$('.show_hide_contact').click(function() {
$(".contactDiv").slideToggle();
$(".loginDiv").slideUp();
});
$('.show_hide_login').click(function(){
$(".loginDiv").slideToggle();
$(".contactDiv").slideUp();
});
Very nice of you to include the jsFiddle :)
I am not sure there is a function exactly that does that but you can do it manually. Check it out
$(document).ready(function(){
$(".contactDiv").hide();
$(".loginDiv").hide();
$(".show_hide_contact").show();
$(".show_hide_login").show();
$('.show_hide_contact').click(function(){
$(".loginDiv").hide();
$(".contactDiv").slideToggle();
});
$('.show_hide_login').click(function(){
$(".contactDiv").hide();
$(".loginDiv").slideToggle();
});
});
Found out how to.
I just added the hide function to the divs.
$('.show_hide_contact').click(function(){
$(".contactDiv").slideToggle();
$(".loginDiv").hide(); /* there is hiding prev opened tag*/
});

Categories