• 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

    • Arlo Essential 2K Indoor Camera: Unpacking the features and value of this home security cam by Paul Hill Are you in the UK and looking for internal cameras to keep an eye on your pets or property? If so, the Arlo Essential 2K indoor security camera (2-pack) is now discounted by 26% from its £159.99 RRP to just £119.00. As usual, the product is available with free delivery and free returns, which is helpful if the product turns out to be defective. In addition to the discounted product, the listing also notes there’s a £10-off voucher available until Monday and a £10 Morrisons on Amazon voucher. Arlo is a reputable brand for home security cameras so this deal marks a great opportunity if you’ve been looking for this type of device. Do note that it is a wired camera so it’ll have to be plugged in somewhere. Deep dive into camera features and capabilities The Arlo Essential 2K indoor security camera comes with a very good 2K (up to 2,560x1,440) resolution that provides you with clear, detailed video, great if you want to keep an eye on smaller pets such as kittens. Not only is the camera high-quality, but the camera is equipped with black and white night vision (it can see up to 7 metres), so you can see any events that occur at night. This Arlo security cam features two-way audio with noise reduction and echo cancellation allowing you to chat with anyone coming to feed your pets. There’s also an automatic privacy lens cover that physically blocks the lens when disarmed, providing you with more privacy when at home. There is also passive infrared motion detection that has a range of 7 metres. You can use motion detection in combination with the 80 dB smart siren to scare away intruders. The siren can also be activated manually. The Arlo Essential 2K features a 130-degree wide-angle diagonal view, which is sufficient for most rooms, to capture more of what’s going on in the room and there is 12x digital zoom to take a closer look at objects. It’s compatible with pretty much all Wi-Fi devices with its 2.4GHz Wi-Fi support and it integrates with your smart home via Amazon Alexa, Google Assistant, and IFTTT. Leveraging the Arlo Secure subscription for enhanced security When you buy the Arlo Essential 2K, you get a 30-day free trial of the Arlo Secure subscription, and if you want to continue it, it costs from £11.99 per month or £119.90 per year. This subscription isn’t necessary for basic functionality, but it does unlock the full potential of the camera. When you subscribe you get secure cloud storage for video history (30 to 60 days depending on plan); AI-powered identification of people, animals, vehicles, and packages, reducing false alerts; custom activity zones that let you define areas for motion detection, minimising unwanted notifications; and interactive notifications that can be interacted with from the lock screen like view animated previews, activate siren, and call emergency services. My biggest issue with this camera is that there is no local storage for recordings, necessitating the need to buy the subscription if you want to save any footage. If you’re thinking of using this camera to protect your home from theft and want footage to give to the police, you’ll need a subscription. An alternative to a subscription is buying the Arlo SmartHub (VMB5000) which is compatible with the Arlo Essential 2K indoor camera, according to Arlo’s website. The savings on this camera twin-pack are significant and it’s the lowest price they’ve been at on Amazon UK so they’re definitely worth considering for your home. If you don’t mind the subscription or have the Arlo SmartHub already, then this camera makes sense. If not, then you may be better off with a camera that comes with an SD card slot and recording capabilities. Arlo Essential 2K Indoor Pet Security Camera (2-pack): £119 + £10-off voucher + £10 for Morrisons on Amazon (Amazon UK) / MSRP £159.99 This Amazon deal is U.K. specific, and not available in other regions unless specified. If you don't like it or want to look at more options, check out the Amazon UK deals page here. Get Prime, Prime Video, Music Unlimited, Audible or Kindle Unlimited, free for the first 30 days As an Amazon Associate we earn from qualifying purchases.
    • The Nokia Lumias? Or the third-party HTC One8's? I had HTC's hardware cuz it was slick and reliable... but, yeah, the software left me wanting more and I just couldn't allocate personal time to develop all of the software I would have wanted to see (overworked in other capacities @ MSFT at the time, heh).
    • Microsoft's mobile strategy had great future vision and UX research, but mediocre engineering and inadequate support (third-party and internal business alike). The death knell for WinMo was Google's (mostly YouTube's) incessant API blocking and purposeful release of buggy WinMo builds to force consumers to stay away -- and this was conducted via sabotage of whatever partnerships they were supposed to play nice in. I still yearn for that UI on a modern smartphone...
    • Linux has always been an option but never adopted by the masses despite being free. The reasons are limited usability and features. Despite everything we all complaint about with MS , the overall experience for the general public is much better than what Linux can deliver.
    • If nothing works automatically for you, I'd say pick a better/different distro. Granted, it's trickier with laptops because they use all kinds of weird hardware, but still. I actually just did a fresh Arch Linux install on my netbook, and given that Arch is certainly not an "automagical" distro, I had to do very little manual tweaking, everything but the audio worked out of the box (including plasma and Wayland) and the audio was simply an issue of installing an additional firmware package that wasn't included in the default selection. Which is equivalent of installing additional drivers in Windows. Surely a more user-oriented distro would be even less troublesome (but granted, I haven't used/tested anything outside of Arch for quite some time). And let's not forget that a fair bit of issues that get blamed on Linux (though it also applies to Windows issues) are actually caused by hardware vendors not giving a damn.
  • Recent Achievements

    • One Month Later
      POR2GAL4EVER earned a badge
      One Month Later
    • One Year In
      Orpheus13 earned a badge
      One Year In
    • One Month Later
      Orpheus13 earned a badge
      One Month Later
    • Week One Done
      Orpheus13 earned a badge
      Week One Done
    • Week One Done
      serfegyed earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      563
    2. 2
      ATLien_0
      256
    3. 3
      +Edouard
      163
    4. 4
      +FloatingFatMan
      157
    5. 5
      Michael Scrip
      109
  • Tell a friend

    Love Neowin? Tell a friend!