• 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

    • Is it though?  I built a new rig a few months ago and it was literally impossible to get one without RGB, but within 10 minutes of setting it up, I turned all that crap off.  It was REALLY distracting, and who needs additional heat INSIDE a PC? It's popular on YouTube for sure, it's neat looking and whatnot, but it's about as practical as a coffee cup with a hole in it. As for the price, a non-enthusiast would just see something priced way above what they can get from a retailer brand new...
    • RollBack Rx Pro 12.9 Build 2710971022 by Razvan Serea RollBack Rx is a robust system restore utility that enables home users and IT professionals to easily restore a PC to a time before certain events occurred. In essence, it turns your PC into a Instant Time Machine. Regardless of what happens to your PC your can quickly and easily restore your PC to a previous time. Making it easy to rescue you from any PC disaster - saving time, money and PC trouble. Windows System Restore only restores Windows system files and some program files. In addition, if Windows crashes to a point were Windows itself can not boot up (ie. BSOD*) you would not be able to access your Windows System Restore points. In contrast, the RollBack Rx technology works at the sector level of the hard drive and restores everything! - right down to the last byte of data. It sits below Windows. So even if Windows crashes, there’s a sub-console (mini OS) that boots prior to windows. This allows you to access Rollback Rx and go back to a point in time when your system was working trouble-free. Key Features Go back to any previous point in time within seconds. Go back minutes, hours, days, weeks, or even months to any previous snapshot. Does not affect computer performance, uses minimal system resources. Supports unlimited snapshots. Creates a complete system snapshot without having to restart the system. Reverse any system crash within seconds (even if Windows cannot startup). Back out of any failed program, OS updates, and botched updates. Recover from any malware or virus attack within seconds. Works with VMWare and Virtual Machines, both as a host or within the virtual machine as a client. Supports Multi-boot, Multi OS workstations. Lock snapshots to prevent deletion. Intuitive GUI based snapshot manager. Explore, browse, and retrieve files and folders from any snapshot. Drag and drop them into your active system. Roll backwards as well as forwards to any available system snapshot. Allows users to safely test any software. Fast, 100% complete uninstaller. Retrieve files from a crashed PC, even if Windows cannot boot. Access control – manage levels of multiple user and administrative privileges. Automatically schedule snapshots to be taken on a fixed schedule or upon execution of specific files (ie. setup.exe) as well as manually. 256 bit AES snapshot encryption. Prevent unauthorized data theft in case of a stolen laptop. Group Management and Enterprise Network Administration Control (FREE utility). Comes with Stealth Mode where you can hide the RollBack Rx tray icon and splash screen (seen during bootup) Change the startup hotkey for sub-console access (default is HOME). Built-in snapshot defragmenter which will optimize system resources and recover free space. Option to keep files and folders unchanged when you roll-back. Advanced setup configuration wizard for system administrators which will set deployment options and predefined RollBack Rx settings. Offers detailed program operation logging. Supports all industry-standard deployment options including silent installations and pre-installation configuration. Explore RollBack Rx Pro with a 14-day trial, fully functional on Windows 11, 10, 8, and Windows 7 SP1** (32 and 64-bit). RollBack Rx Pro 12.9 Build 2710971022 changelog: General Add PnpLockdown in shieldm.inf Fix registry exclusion problem in Windows 11 24H2 release Add detailed logging for file filter driver Add detailed logging for Windows update Add time stamp to kernel drivers Change kernel driver and Win32 IRP structure Other small bug fixes / typos reported through tech support Endpoint Manager Add client report dashboard Add sound effect when receiving a EPM message. Keep EPM message history Fix bug that oversized Windows symbol files cannot be downloaded Download: RollBack Rx Pro 12.9 | 61.0 MB (Shareware) View: RollBack Rx Home Page Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Universal Media Server 14.12.1 by Razvan Serea Universal Media Server is a DLNA-compliant UPnP Media Server. UMS was started by SubJunk, an official developer of PMS, in order to ensure greater stability and file-compatibility. The program streams or transcodes many different media formats with little or no configuration. It is powered by MEncoder, FFmpeg, tsMuxeR, AviSynth, MediaInfo and more, which combine to offer support for a wide range of media formats. Because it is written in Java, Universal Media Server supports all major operating systems, with versions for Windows, Linux and Mac OS X. To see a comparison of popular media servers, click here. Universal Media Server 14.12.1 changelog: General Added status page to readme Fixed videos not being marked as fully played (#5373) (thanks, @Fredo1650!) Fixed adding YouTube channels from handle URLs (URLs with @ in them) Fixed handling special characters on Linux (#5100) (thanks, @LaTeteDansLesEtoiles!) Fixed directory browsing crash (#5189) (thanks, @jt-gilkeson!) Fixed FFmpeg on Linux x86_64 and arm64 (#5465) (thanks, @KanjiMonster!) Fixed logspam like "Could not hydrate device or its services from descriptor" (#5292) (thanks, MTOakey!) Fixed broken YouTube video playback Fixed web interface E2E testing on CI using outdated code because of overeager caching Fixed broken video playback when burning subtitles to H.265 via FFmpeg (#5486) Improved logging Translation updates via Crowdin Chinese (Simplified) (59%) (thanks, 無情天!) Dutch (41%) (thanks, Matthias!) Hungarian (86%) (thanks, Zoltán Rózsa!) Japanese (69%) (thanks, Yukihuru!) Download: Universal Media Server 14.12.1 | 203.0 MB (Open Source) Download: Other operating systems View: Universal Media Server Website | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • You sign your rights to reddit when you write on their platform. Free labour for them to make money. The AI companies should also take advantage of that free labour.
    • Brave 1.79.123 by Razvan Serea Brave Browser is a lightning-fast, secure web browser that stands out from the competition with its focus on privacy, security, and speed. With features like HTTPS Everywhere and built-in tracker blocking, Brave keeps your online activities safe from prying eyes. Brave is one of the safest browsers on the market today. It blocks third-party data storage. It protects from browser fingerprinting. And it does all this by default. Speed - Brave is built on Chromium, the same technology that powers Google Chrome, and is optimized for speed, providing a fast and responsive browsing experience. Brave Browser also features Brave Rewards, a system that rewards users with Basic Attention Tokens (BAT) for viewing opt-in ads. This innovative system provides an alternative revenue model for content creators and a way to support the Brave community. Brave 1.79.123 changelog: Leo Improved citation UI. (#45761) General [Security] Fixed missing DDNS navigation throttle for subframes as reported on HackerOne by newfunction. (#46703) Fixed crash which occurred when clicking on the “View site information” icon in the address bar while having “Don’t allow sites to scroll and zoom shared tabs” enabled. (#46566) Fixed crash which occurred with the “Save autofill” prompt in certain cases. (#45546) Upgraded Chromium to 137.0.7151.104. (#46712) (Changelog for 137.0.7151.104) Download: Brave Browser 64-bit | 1.2 MB (Freeware) Download: Brave Browser 32-bit View: Brave Homepage | Offline Installers | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
  • Recent Achievements

    • Apprentice
      Adrian Williams went up a rank
      Apprentice
    • Reacting Well
      BashOrgRu earned a badge
      Reacting Well
    • Collaborator
      CHUNWEI earned a badge
      Collaborator
    • Apprentice
      Cole Multipass went up a rank
      Apprentice
    • Posting Machine
      David Uzondu earned a badge
      Posting Machine
  • Popular Contributors

    1. 1
      +primortal
      518
    2. 2
      ATLien_0
      260
    3. 3
      +Edouard
      191
    4. 4
      +FloatingFatMan
      175
    5. 5
      snowy owl
      133
  • Tell a friend

    Love Neowin? Tell a friend!