Add rel attribute to window.location.href?

JavaScript
1

I have a “lightbox” plugin installed in my site that I use for my popup windows throughout the site. For one feature of my site I’m doing a cookie check and if one doesn’t exist I have a submit form popup in a window; and I would like to use my plugin for that instead of, for example, a window.open. I just need to add a rel=“lightbox” to my location achieve that. My current script is:

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('.filedownload').click(function() {
        if ($.cookie("AKHDownload")) {
            return true;
        } else {
            window.location.href = "document-download-form.html";
            return false;
        }
    });
});
</script>

How can I add the rel to the location above?:

<a href="window.location.href" rel="lightbox">

Thanks!

2

Hi,

Just to understand you correctly: if your cookie check fails, you would like to have a form open automatically in a modal window (using Lightbox).
Is that correct?

3

Hi, thanks for the reply. Yes that’s correct.

Thanks again.

4

No probs :slight_smile:

It seems like you’re using Lokesh Dhakar’s lightbox plugin.
Unfortunately this can only be used to display images.

Instead I would suggest looking into jquery-ui dialog.
It’s highly customizable and can be made to work exactly like the lightbox plugin.

Here’s a demo (click on the “Create a new user” button).

5

Thanks, I’m actually using a Joomla plugin that handles most everything; images, videos, external sites, HTML, etc. It’s a lightbox effect and the rel can be anything you enter; I just used “lightbox”. I use it in the rest of the site for YouTube videos, images, etc. My form is embedded in a page and I’m popping that up. If I could add rel=“lightbox” I’d be good to go.

Thanks!

6

Hi,

Could you post a link to the page in question?

7

The site is still in dev stage and currently on my local machine, the plugin I’m using is:

Thanks.

8

Oh, ok.

Well, going back to your original question, window.location doesn’t have a rel property.
That is, you cannot write window.location.rel = "lightbox"

A sensible alternative is perhaps to create the link on the page, then hide it:

#link{ display: none;}
<a href="document-download-form.html" rel="lightbox" id="link">Click</a>

Then, in the else part of your cookie check, trigger a click on this link:

if ($.cookie("AKHDownload")) {
  return true;
} else {
  $("#link")[0].click();
}

Does that help?

9

Ah, that makes sense why I was unable to insert the rel tag, thanks. And thanks for this trigger option, I’ll be able to get that pulled up here in a little to try out and will report back.

Thanks!

10

Thanks again, I’ve inserted this option and it worked great and created the lightbox pop just as I needed. One concern is that with the “<a href=“document-download-form.html” rel=“lightbox” id=“link”>Click</a>” being hidden Google will still pick it up. I’ll more with it but am definitely heading in the right direction. Thanks again for your time and help.

11

If this is a major worry for you, it would be possible to create the link programmatically, append it to the DOM and trigger a click on it.

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Append link</title>
    <style>#link{display: none;}</style>
  </head>
  
  <body>
    <button>Click</button>
    
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
      $(function(){
        $("button").click(function(){
          var link = $('<a href="document-download-form.html" rel="lightbox" id="link">Click</a>');
          $("body").append(link);
          $("#link")[0].click();
        });
      });
    </script>
  </body>
</html>

I’m not sure that that is the best solution though.
Why is it bad if Google picks it up?

12

Appending the link would be great, I tried it but it just goes to the “document-download-form.html” page with out popping up, it doesn’t trigger the lightbox. I see where you’re heading with that though and will play around with it. It seems though that the lightbox trigger becomes nulled when it’s appended for some reason; I’ll troubleshoot it though to confirm.

The “document-download-form.html” is a hidden page and only should be called when clicking on certain links, which will be some PDF files. I have other coding in the form as well where the file will download once the form is submitted and they go to a specific “thank you” page. If it was picked up by Google and someone went to it it wouldn’t work correctly, doesn’t have a template (it’s the form only), etc.

Thanks!

13

Hi,

I’m guessing that this is a plugin issue.
Maybe it grabs all links with a rel attribute of “lightbox” which are present in the DOM on page load and attaches certain behaviour to them.
The bare-bones example I posted should have worked, however.

Then I would ask Google and co. not to index it.
This might help: http://antezeta.com/news/avoid-search-engine-indexing

14

Hi, great idea with the Google non-indexing. You’re dead on with the plugin issue, there was a conflict with other JQuery code and I was able to fix that using Fancybox instead and the popup is now working using the variable. I have Fancybox using the ID attribute name “formbox”. My current code is below, which is working fine for what I need. I’ll revisit it at a later time to make improvements but I’m good to go for now.

The linked files all ended up being PDF files so I change the click function to files with PDF extensions:

<script type="text/javascript">
jQuery(document).ready(function($) {
	$('a[href$=".pdf"]').click(function() { //applies to all PDF files
		if ($.cookie("AKHDownload")) { //checks for AKHDownload cookie
			return true;
		} else {
			var link = $('<a style="display:none;" href="document-download-form.html" id="formbox"></a>');
         	        $("body").append(link);
			$('#formbox').trigger('click'); //Fancybox ID attribute name "formbox" triggers popup
			return false;
		}
	});
});
</script>

Thanks again for all your help!!

15

No problem :slight_smile:
Thanks for taking the time to report back.