SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    Boise, ID
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Add rel attribute to window.location.href?

    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:
    Code:
    <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?:
    Code:
    <a href="window.location.href" rel="lightbox">
    Thanks!

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    Boise, ID
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, thanks for the reply. Yes that's correct.

    Thanks again.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    No probs

    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. #5
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    Boise, ID
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Could you post a link to the page in question?

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    Boise, ID
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The site is still in dev stage and currently on my local machine, the plugin I'm using is:

    http://www.joomlack.fr/extensions-joomla/mediabox-ck

    Thanks.

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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:

    Code:
    #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:

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

    Does that help?

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    Boise, ID
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    Boise, ID
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by hominid4 View Post
    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.
    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.

    HTML Code:
    <!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. #12
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    Boise, ID
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Quote Originally Posted by hominid4 View Post
    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'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.

    Quote Originally Posted by hominid4 View Post
    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 ... 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.
    Then I would ask Google and co. not to index it.
    This might help: http://antezeta.com/news/avoid-search-engine-indexing

  14. #14
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    Boise, ID
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <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. #15
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    No problem
    Thanks for taking the time to report back.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •