• 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

    • It's become a central place at my workplace. I use it for meetings, general chatting between employees, and the teams for storing of files to share between people at work. 
    • It's a Dell color laser printer. Back when Microsoft kept having these security flaws with the print spooler and recommending you disable it I just got in the habit of it, and I use it so rarely now I just leave it disabled in case another flaw pops up.
    • KDE makes progress toward full Wayland session restore in Plasma 6.5 by David Uzondu In the latest issue of This Week in Plasma, the development team, as usual, brings news of ongoing work for the desktop environment. While KDE continues to polish the recently released Plasma 6.4, work has already taken off on the next major version of Plasma, 6.5. A significant step forward is being made on Wayland session restoration; the xx-session-management-v1 restore protocol has been implemented in Qt 6.10, which means KDE applications and Plasma itself can soon start using it to finally bring proper session restore to Wayland. For more immediate user-facing changes in Plasma 6.5, the Welcome Center application now teaches you about the many available keyboard shortcuts, as well as "what the heck the 'Meta' key is." For those who frequently work remotely, Plasma's built-in RDP server now supports syncing clipboard text between the client and server. The clipboard also received another useful feature, letting you copy the QR code for an item, not just view it. The team is also addressing smaller usability issues across the desktop, including fixes that will land in point releases for Plasma 6.4. Spectacle, for example, will no longer show a ghostly semi-transparent version of its menus in screenshots. The New! badge, which was introduced in Plasma 6.4 is now easier to read with better colors. Other notable UI improvements include: A new button on the "missed notifications" pop-up that lets you view what you actually missed. The Networks widget is now much better at telling you what it is doing, like when it is "looking for wireless networks". Inertial scrolling with touchpads is now active in all QtQuick-based KDE software. As always, the KDE team spent the week squashing bugs across various versions of Plasma and related software. Plasma 6.4.1, which went live this Tuesday, addressed several crashes in the desktop portal implementations and patched the open/save dialog, where apps could insert extra UI elements in the wrong places. It also resolved a recent performance regression affecting some games and fixed a strange issue with drawing tablets where the pointer could disappear when two were connected in different modes. 6.4.1 tackled a particularly odd hardware-specific problem with Samsung Odyssey G5 monitors endlessly turning on and off because of a faulty DDC implementation. KDE responded by blacklisting the device. In addition to that, the update fixed an accessibility regression in Discover, corrected an issue where deleting a favorited app left behind a ghost item you couldn't un-favorite, and restored the Window List widget's ability to minimize windows. As for fixes planned for 6.4.2, here's the full list as outlined by the Plasma team: Fixed a case where System Settings' Flatpak App Permissions page could cause the whole app to crash. Fixed an issue that could sometimes cause Plasma to go back to sleep again right after waking up, when the "Sleep then hibernate" setting is in use. The appearance of text labels in Folder View pop-ups is once again correct. You're no longer erroneously prompted to authenticate for a Wireguard VPN whose credentials are already stored in KWallet, and the wallet is set up to automatically open at login. Fixed an issue in the KDE desktop portal's screenshot implementation that prevented the delay setting from taking effect. Missing app backends listed in Discover's Settings page once again show the correct names. The brightness level shown on System Settings' Display & Monitor page now matches the one shown in Plasma. Fixed an issue that caused the panel to have too much space in it until restarting Plasma if you stop displaying the date on a horizontally-laid-out Digital Clock widget. The older Plasma 6.3.6 fixed video stuttering on variable-refresh-rate screens and patched the Weather Report widget after Environment Canada changed its data format. You can check out the full update on the official KDE Blog.
    • I'm happy with my setup. I have a raid 1 two drive Synology setup that I backup with Time Machine to every so often. What is your setup at home? 
    • Enterprise support (ex. Premier Support) is a bit different cup of coffee. I am not saying it is great, but they have SLAs and I have received solution within hours and even patches within 3 days.
  • Recent Achievements

    • One Year In
      TsunadeMama earned a badge
      One Year In
    • Week One Done
      shaheen earned a badge
      Week One Done
    • Dedicated
      Cole Multipass earned a badge
      Dedicated
    • Week One Done
      Alexander 001 earned a badge
      Week One Done
    • Week One Done
      icecreamconesleeves earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      569
    2. 2
      ATLien_0
      187
    3. 3
      +FloatingFatMan
      184
    4. 4
      Skyfrog
      112
    5. 5
      Som
      108
  • Tell a friend

    Love Neowin? Tell a friend!