WordPress/jQuery fade out link

[OP ACTIONpack 259]

http://www.romabio.com/products/biocalce-a/

 

Above is a link to the example. There are two links one is MSDS and the other is TDS. Those link are PDF documents so that the painters/user can get to keep it if they don't want to go back to the website. I have it working fine in WordPress. The only problem is that my boss does not have all the files yet to be uploaded. I want to fade out or hide the link so that users can't link on it or show that it's not available at this time. I know it can be down with jQuery which see if there is an PDF file to show it and if not then hide it. Can anyone help me with it. Thanks!

[threetonesun 1,205]

With PHP you could read all of the filenames from a directory, then compare them to an array of files you've saved (the final, total accumulation of files). If the PDF has yet to be uploaded, you could add a class and then style that with CSS.

 

In the browser, using buttons, you can just do this:

$('#linkId')
    .addClass('deactivated')
    .click(function(e){
        if($(this).hasClass('deactivated')){
            e.preventDefault();
        }
    });

[OP ACTIONpack 259]

 

With PHP you could read all of the filenames from a directory, then compare them to an array of files you've saved (the final, total accumulation of files). If the PDF has yet to be uploaded, you could add a class and then style that with CSS.

 

In the browser, using buttons, you can just do this:

$('#linkId')
    .addClass('deactivated')
    .click(function(e){
        if($(this).hasClass('deactivated')){
            e.preventDefault();
        }
    });

 

Not really good at jQuery coding yet. Is there a way to tell jQuery that when it does not see an PDF file to add a class?

[threetonesun 1,205]

Not really good at jQuery coding yet. Is there a way to tell jQuery that when it does not see an PDF file to add a class?

 

Not easily, no. You're asking it to load the page, load the script, then check for a file on the server, then report back and modify a page element. It can be done (via ajax, in jQuery), but whether or not it's worth it when you already know if the file exists or doesn't exist is a different question.

[OP ACTIONpack 259]

Not easily, no. You're asking it to load the page, load the script, then check for a file on the server, then report back and modify a page element. It can be done (via ajax, in jQuery), but whether or not it's worth it when you already know if the file exists or doesn't exist is a different question.

 

http://stackoverflow.com/questions/15879130/jquery-add-class-to-href-if-link-contains-specific-text

 

The link above is something I want it to do but instead of adding a class when seeing the .pd. I want to add a class when no .pdf file is there.

[threetonesun 1,205]

http://stackoverflow.com/questions/15879130/jquery-add-class-to-href-if-link-contains-specific-text

 

The link above is something I want it to do but instead of adding a class when seeing the .pd. I want to add a class when no .pdf file is there.

 

Well, you can have a link that points nowhere (a href="" or a href="placeholder") then check for an empty string, and for any link that matches, add a class.

[OP ACTIONpack 259]

Well, you can have a link that points nowhere (a href="" or a href="placeholder") then check for an empty string, and for any link that matches, add a class.

 

Would it be easier to add a class when it see a PDF and I can't make it visible instead of when there is no PDF to add a Class?

[threetonesun 1,205]

Would it be easier to add a class when it see a PDF and I can't make it visible instead of when there is no PDF to add a Class?

 

No :laugh:

 

You're talking about two situations here, I think. If you have something like this:

<a href="/pdfs/pdfthatexists.pdf">Click here for PDF!</a>
<a href="nowhere">Don't click here, there's no PDF!</a>

Then it's relatively trivial to add a class to any of these links, just by selecting through the href attribute. If you have this:

<a href="/pdfs/pdfthatexists1.pdf">Click here for PDF!</a>

<a href="/pdfs/pdfthatexists2.pdf">This PDF may or may not be on the server!</a>
<a href="/pdfs/pdfthatexists3.pdf">This PDF may or may not be on the server!</a>

Then it would be easier to check for the file and add a class via PHP. Otherwise you have to resort to ajax/http requests in javascript.

 

It's possible we're misunderstanding each other, though, just let me know. :D

[OP ACTIONpack 259]

No :laugh:

 

You're talking about two situations here, I think. If you have something like this:

<a href="/pdfs/pdfthatexists.pdf">Click here for PDF!</a>
<a href="nowhere">Don't click here, there's no PDF!</a>

Then it's relatively trivial to add a class to any of these links, just by selecting through the href attribute. If you have this:

<a href="/pdfs/pdfthatexists1.pdf">Click here for PDF!</a>

<a href="/pdfs/pdfthatexists2.pdf">This PDF may or may not be on the server!</a>
<a href="/pdfs/pdfthatexists3.pdf">This PDF may or may not be on the server!</a>

Then it would be easier to check for the file and add a class via PHP. Otherwise you have to resort to ajax/http requests in javascript.

 

It's possible we're misunderstanding each other, though, just let me know. :D

 

Yea, forget about me using PHP/WordPress. Lets say that I'm doing it in HTML, CSS3 and jQuery only. Is there a way that I can tell jQuery if there is a PDF file or any general file on the link to add a class to it?

[threetonesun 1,205]

Yea, forget about me using PHP/WordPress. Lets say that I'm doing it in HTML, CSS3 and jQuery only. Is there a way that I can tell jQuery if there is a PDF file or any general file on the link to add a class to it?

 

Like this: http://jsfiddle.net/pNRfk/

 

Again, if you need to create the links first, and then check if the file actually exists on the server only using jQuery, it gets trickier.

[OP ACTIONpack 259]

She this work?

$(".download-Wrap a").each(function(){
    var match = this.href.match(/\.([a-zA-Z0-9]{2,4})([#;\?]|$)/);
    console.log(match);
    if(match){
        $(this).addClass("linkIcon" + match[1]);
    }
});

[threetonesun 1,205]

This might be clearer: http://jsfiddle.net/pNRfk/3/

var $links = $('a');
$links.each(function(){
    var link = $(this).attr('href');
    var css = link.indexOf('.pdf') > -1 ? 'active' : 'notActive';
    $(this).children('button').addClass(css);
});

$('.notActive').on('click',function(e){
    e.preventDefault();
})

[lunamonkey 95]

shorter syntax: no?

$("a[href*=pdf]")

.children("button")

.addClass("active")

.end().click(function(e){e.preventDefault();});

[threetonesun 1,205]

shorter syntax: no? $("a[href*=pdf]") .children("button") .addClass("active") .end().click(function(e){e.preventDefault();});

 

That does not appear to do the same thing, no.

[OP ACTIONpack 259]

The last post I provided jQuery code and it does work find. I just have to make the class look non active and when it does see a .pdf file, I just active the linkIconpdf. Have to add the pdf to the end of linIcon if I'm going to get the code to work.

 

Thanks everyone for helping me out.