• 0

WordPress/jQuery fade out link


Question

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!

Link to comment
https://www.neowin.net/forum/topic/1167549-wordpressjquery-fade-out-link/
Share on other sites

14 answers to this question

Recommended Posts

  • 0

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]);
    }
});
  • 0

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();
        }
    });
  • 0
  On 29/07/2013 at 19:23, threetonesun said:

 

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?

  • 0
  On 29/07/2013 at 19:54, ACTIONpack said:

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.

  • 0
  On 29/07/2013 at 19:58, threetonesun said:

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.

  • 0
  On 29/07/2013 at 20:01, ACTIONpack said:

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.

  • 0
  On 29/07/2013 at 20:09, threetonesun said:

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?

  • 0
  On 29/07/2013 at 20:23, ACTIONpack said:

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

  • 0
  On 29/07/2013 at 20:30, threetonesun said:

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?

  • 0
  On 29/07/2013 at 20:49, ACTIONpack said:

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.

  • 0

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();
})
  • 0

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.

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • I've got a basic black and white laser printer that's connected via USB and doesn't do wifi etc. I think I'm going to be just fine.
    • Edge 138 is out with AI-powered history search and other changes by Taras Buria Microsoft has released Edge 138, the latest major update for the browser. Version 138.0.3351.55 introduces some interesting changes and new features, such as AI-powered history search. There are also several bug fixes and security patches. For regular users, the biggest and most important change in Edge 138 is AI-powered history search. This feature allows you to find sites in your history using synonyms, phrases, or misspelled words. Microsoft uses an on-device model, which does not send your data anywhere. Note that this feature is rolling out gradually, which means it might take a few days or weeks to show up on your system. Another useful change is new performance notifications. Performance and Extensions Detector notifications may appear in the main menu when the browser detects performance dips to help users learn about available performance-optimization tools. Autofill settings received a new consent toggle, which allows Microsoft to improve the autofill capabilities by collecting field names as you browse. This only applies to field names, such as "First Name, "Email," etc. It does not send the data you enter or autofill to Microsoft. Other changes include the following: Use the Primary work profile as the default profile to open external links. With this feature, for Windows, Edge checks if the Primary Work Profile exists and makes it the default profile for opening external links if available. Microsoft 365 Copilot Chat Summarization in Microsoft Edge Context Menu. This feature helps users quickly unpack and ask questions about their open page. Copilot on the Microsoft Edge New Tab Page (NTP). Users may see suggested work and productivity-related Copilot prompts in their search box on the NTP page. Adding support for viewing Sensitivity labels applied to a Microsoft Information Protection (MIP) Protected PDF. Enterprise customers can view sensitivity labels applied to MIP protected PDF to be well informed of the data classification to enable them to handle such sensitive documents. And here is what was fixed: Fixed an issue that caused WebDriver automation to fail in Microsoft Edge versions 133 and later. Fixed an issue where re-enabled textarea elements remained non-editable. This issue affected activating a role assignment in Privileged Identity Management. Finally, Edge 138 patches six security vulnerabilities, three of which were Microsoft Edge-specific, and the remaining three originated from Chromium. You can find details about those fixes here. The next Microsoft Edge update, version 139, is expected in the week of August 7, 2025.
    • “Never trust any statistics that you didn't forge yourself.”
    • Per the linked article: "Based on testing performed by Microsoft in December 2024 using Geekbench 6 Multi-core score comparing a selection of Windows 10 PCs with Intel Core 6th, 8th, and 10th generation processors and Windows 11 PCs with Intel Core 12th and 13th generation processors." I get that this is just advertising and all, but damn, I can smell the BS all the way over here. How about benchmarking 10 vs 11 on that same 13th gen processor? Apples and oranges make a lovely fruit salad but a terrible comparison. I mean shoot, my Windows 10 PC running a Ryzen 7 is faster than a Core2Duo running Windows 7, so Windows 10 is clearly faster. 🙄
    • KB5060829 installed in a test VM and the option isn't even there under "Taskbar behaviours". Installed it on a second VM, same. Installed it on metal... same. Typical quality of Nadella's Microsoft. If i doesn't shrink the taskbar vertical height down as @seeprime is implying, what's the point?
  • Recent Achievements

    • Week One Done
      suprememobiles earned a badge
      Week One Done
    • Week One Done
      Marites earned a badge
      Week One Done
    • One Year In
      runge100 earned a badge
      One Year In
    • One Month Later
      runge100 earned a badge
      One Month Later
    • One Month Later
      jfam earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      563
    2. 2
      +FloatingFatMan
      177
    3. 3
      ATLien_0
      168
    4. 4
      Michael Scrip
      125
    5. 5
      Xenon
      121
  • Tell a friend

    Love Neowin? Tell a friend!