• 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

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

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

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 this for Black people only? You'd definitely think so from the ad.
    • I have it as an icon in the Start Menu. Close enough for when I need it.
    • Windows 11 Pro with a copy of Office 2021 Pro drops to all-time low price by Steven Parker Today's highlighted deal comes via our Apps + Software section of the Neowin Deals store, where you can save 86% on Windows 11 Pro (for 2 devices) + Microsoft Office Pro 2021. Upgrade your computing experience with Windows 11 Pro. This cutting-edge operating system boasts a sleek new design and advanced tools to help you work faster and smarter. From creative projects to gaming and beyond, Windows 11 delivers the power and flexibility you need to achieve your goals. With a focus on productivity, the new features are easy to learn and use, enhancing your workflow and efficiency. Whether you're a student, professional, gamer, or creative, Windows 11 Home has everything you need to take your productivity to the next level. New interface. easier on the eyes & easier to use Biometrics login*.Encrypted authentication & advanced antivirus defenses DirectX 12 Ultimate. Play the latest games with graphics that rival reality. DirectX 12 Ultimate comes ready to maximize your hardware* Screen space. Snap layouts, desktops & seamless redocking Widgets. Stay up-to-date with the content you love & the new you care about Microsoft Teams. Stay in touch with friends and family with Microsoft Teams, which can be seamlessly integrated into your taskbar** Wake & lock. Automatically wake up when you approach and lock when you leave Smart App Control. Provides a layer of security by only permitting apps with good reputations to be installed Windows Studio Effects. Designed with Background Blur, Eye Contact, Voice Focus, & Automatic Framing Touchscreen. For a true mouse-less or keyboard-less experience TPM 2.0. Helps prevent unwanted tampering Windows 11 Pro also includes a number of productivity-focused features, such as the ability to snap multiple windows together and create custom layouts, improved voice typing, and a new, more powerful search experience. Personal and professional users will enjoy a modern and secure computing experience, with improved performance and productivity features to help users get more done. Only on Windows 11 Pro If you require enterprise-oriented features for your daily professional tasks, then Windows 11 Pro is a better option. Set up with a local account (only when set up for work or school) Join Active Directory/Azure AD Hyper-V Windows Sandbox Microsoft Remote Desktop BitLocker device encryption Windows Information Protection Mobile device management (MDM) Group Policy Enterprise State Roaming with Azure Assigned Access Dynamic Provisioning Windows Update for Business Kiosk mode Maximum RAM: 2TB Maximum no. of CPUs: 2 Maximum no. of CPU cores: 128 Good to know: Length of access: lifetime Redemption deadline: redeem your code within 30 days of purchase Access options: desktop Max number of device(s): 2 (Use one activation key for up to 2 devices) Version: Windows 11 Pro Updates included Click here to verify Microsoft partnership For Windows 10 or Newer! Get All Essential Microsoft Apps for Your PC with This One-Time Purchase This is intended for families and small businesses who want classic Office apps and email. It includes Word, Excel, PowerPoint, Outlook, Teams, and OneNote. A one-time purchase installed on 1 Windows PC for use at home or work. Lifetime license for MS Word, Excel, PowerPoint, Outlook, Teams, & OneNote One-time purchase installed on 1 Windows PC for use at home or work Instant Delivery & Download – access your software license keys and download links instantly Free customer service – only the best support! Microsoft Office Professional 2021 (for Windows) includes: Microsoft Office Word Microsoft Office Excel Microsoft Office PowerPoint Microsoft Office Outlook Microsoft Office Teams Microsoft Office OneNote Microsoft Office Publisher Microsoft Office Access Good to know: ONE-TIME PURCHASE INSTALLED ON 1 DEVICE Redemption deadline: redeem your code within 30 days of purchase Access options: desktop Full versions No subscriptions – no monthly/annual fees Version: 2021 Updates included Here's the deal: This Microsoft Office Pro 2021 + Windows 11 Pro normally costs $438, but this deal can be yours from just $54.97, that's a saving of $383. For full terms, specifications, and license info please click the link below. Use MSO5 when checking out for additional $5 off. Coupon Expires June 29. Get Microsoft Office Pro 2021 + Windows 11 Pro for just $49.97, or learn more Although priced in U.S. dollars, this deal is available for digital purchase worldwide. We post these because we earn commission on each sale so as not to rely solely on advertising, which many of our readers block. It all helps toward paying staff reporters, servers and hosting costs. Other ways to support Neowin Whitelist Neowin by not blocking our ads Create a free member account to see fewer ads Make a donation to support our day to day running costs Subscribe to Neowin - for $14 a year, or $28 a year for an ad-free experience Disclosure: Neowin benefits from revenue of each sale made through our branded deals site powered by StackCommerce.
    • I'm not a fan of the HP "Smart" app either, but it does work. I just wish I didn't have to log in to use it. HP Color LaserJet Pro MFP 4301
    • FocusOn Image Viewer 1.32 by Razvan Serea FocusOn Image Viewer is a fast, lightweight, and user-friendly photo viewer for Windows. It supports various image formats, offers basic editing tools, EXIF data display, and batch renaming. With a clean interface, slideshow mode, and easy navigation, it’s ideal for quickly viewing and organizing photos without unnecessary complexity or system resource usage. FocusOn Image Viewer key features: Auto Organize: Automatically sorts photos by date using your chosen template. Explorer View: Browse and manage images with thumbnails; includes basic edits like resize and rotate. Photo Editing: Crop, apply filters, correct colors, add borders or text. Non-Destructive Edits: Original images remain untouched. Photo Sharing: Post directly to blogs, Twitter, and Facebook. Email Support: Send selected images via email. Print Options: Print to fit paper size, preserve aspect ratio, or fit multiple images per page. Slideshow: View selected photos in a slideshow. EXIF Tools: View or remove EXIF data. Scanning: Import from TWAIN or WIA-compatible scanners. Set as Background: Quickly set any image as desktop wallpaper. Batch Rename: Rename images in bulk using templates. Resize Images: Resize with optimized or custom resampling methods, including multi-step resizing. Thumbnail Sizes: Choose from thumbnail sizes between 32–256 pixels. Format Support: Compatible with over 100 image formats. FocusOn Image Viewer 1.32 changelog: Added Ghostscript(AI, PDF) DPI option Fixed transparency issue when saving PDF document as image Other improvements and bug fixes Download: FocusOn Image Viewer 64-bit | Portable 64-bit | ~7.0 MB (Freeware) Download: FocusOn Image Viewer 32-bit | Portable 32-bit View: FocusOn Image Viewer Website | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
  • Recent Achievements

    • First Post
      Johnny Mrkvička earned a badge
      First Post
    • Week One Done
      viraltui earned a badge
      Week One Done
    • One Month Later
      serfegyed earned a badge
      One Month Later
    • Dedicated
      firey earned a badge
      Dedicated
    • Dedicated
      fettermanj earned a badge
      Dedicated
  • Popular Contributors

    1. 1
      +primortal
      658
    2. 2
      ATLien_0
      224
    3. 3
      Michael Scrip
      224
    4. 4
      Xenon
      146
    5. 5
      +FloatingFatMan
      144
  • Tell a friend

    Love Neowin? Tell a friend!