SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26
  1. #1
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Seeking js guru-tastic advice…

    I'm trying to save myself some inline hardcoding for an upcoming gallery site project.
    I was hoping to reppropriate the 'standards-compliant new window' script covered in SitePoint to target a presized popup.

    I will be giving the gallery (popup) links the attribute/value rel="gallery".

    The simple onclick solution is simply:
    Code:
    <a href="gallery.php?artist=Bill%20Posters&artwork=painting1" onclick="gallPop(this.href); return false"
    I would very much like to use the basis of the aforementioned new window method to loop through and retrospectively 'add' the onclick="gallPop(this.href); return false" to each link with rel="gallery".
    I figure that this will show the same (good) level of x-browser compatibility as the bew windows method itself.


    So firstly, is this even possible?
    (logic tells me it is, but hey…)

    If it is, how do I go about it?

    Here's what I have:
    Code:
    function galleryLinks() {
    	if (!document.getElementsByTagName) return;
    	var anchors = document.getElementsByTagName("a");
    	for (var i=0; i<anchors.length; i++) {
    		var anchor = anchors[i];
    		if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "gallery")
    			anchor.onclick = "gallPop(url); return false";
    	}
    }
    
    window.onload = galleryLinks;
    
    function gallPop(url) {
    	var gallWin = window.open(url,'galleryWin','width=350,height=400');
    	gallWin.focus();
    }
    You should be able to see from the code how I'm trying to go about it.
    I'm following the (apparent) logic of the new window method, but as it stands, it's not working and I'm not savvy enough to appreciate why.

    Any/all help in getting this thang working will be very greatfully received.
    TIA


    p.s. I had a swing at the addeventlistener method and had some small degree of success, but I wish the method to support MSIE/Mac, which unfortunately support neither addeventlistener or attachevent.
    Anyway, that's why I'm now changing tack and approaching it from this other direction.

    Again, TIA


    Edit:



    OK, I'm now here:

    I've changed tack again and I'm having more success with the setAttribute method.
    Presuming there's no major browser support issues that I'm missing this looks to be the best route.

    Code:
    function galleryLinks() {
    	if (!document.getElementsByTagName) return;
    	var anchors = document.getElementsByTagName("a");
    	for (var i=0; i<anchors.length; i++) {
    		var anchor = anchors[i];
    		if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "gallery")
    			anchor.setAttribute("onclick","gallPop(url); return false;");
    	}
    }
    
    window.onload = galleryLinks;
    
    function gallPop(url) {
    	var gallWin = window.open(url,'gallWin','width=350,height=400,statusbar,resize=no');
    	gallWin.focus();
    }
    The popup is now being triggered correctly, but I'm still having trouble getting it to load the href of the actual link that has been clicked.
    At present, the popup is entirely empty (no code)

    This is the new task with which I need help.

    So, once again (again) -many thanks in advance.



    Edit:



    Damn. It seems there *are* browser support issues.
    Mac/IE doesn't want to play ball with the setAttribute method.

    Help?

    Last edited by Bill Posters; Mar 7, 2004 at 15:28.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  2. #2
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    Code:
    function init() {
    	galleryLinks();
    }
    function galleryLinks() {
    	if (!document.getElementsByTagName) return;
    	var anchors = document.getElementsByTagName("a"), 
    		aLength = anchors.length;
    	for(var i=0; i < aLength; i++) 
    	{
    		if (anchors[i].getAttribute("href") 
    		&& anchors[i].getAttribute("rel") == "gallery")
    		{
    			anchors[i].onclick = function() {
    				gallPop(this.href);
    				return false;
    			};
    		}
    	}
    }
    
    window.onload = init;
    
    function gallPop(url) {
    	var gallWin = window.open(url,'galleryWin','width=350,height=400');
    	gallWin.focus();
    }
    You were assigning a string to the onclick when you needed to be assigning a predefined function or an
    anonymous one. Then pass gallPop the this.href string of the anchor.

    -xDev
    Last edited by xDev; Mar 7, 2004 at 19:03.

  3. #3
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could also do it a different way by targetting each anchor within a specific element since its
    likely that all your gallery pics are contained in a gallery div. That way it wouldn't be necessary to
    add the rel attribute in your links.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
    Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>Conforming XHTML 1.0 Transitional Template</title>
    <meta http-equiv="Content-Type" content=
      "text/html; charset=iso-8859-1" />
    <script type="text/javascript">
    function init() {
    	galleryLinks();
    }
    function galleryLinks() {
    	if (!document.getElementsByTagName) return;
    	var anchors = 
    		document.getElementById('gallery').getElementsByTagName("a"), 
    		aLength = anchors.length;
    	for(var i=0; i < aLength; i++) 
    	{
    		if (anchors[i].href)
    		{
    			anchors[i].onclick = function() {
    				gallPop(this.href);
    				return false;
    			};
    		}
    	}
    }
    
    function gallPop(url) {
    	var gallWin = window.open(url,'galleryWin','width=350,height=400');
    	gallWin.focus();
    }
    window.onload = init;
    </script>
    <style type="text/css">a img { border: none; }</style>
    </head>
    <body>
    <div id="gallery">
    	<a 
    	href="http://www.news.google.com/"><img 
    	src="http://news.google.com/images/news.gif" 
    	alt="sample" /></a>
    	<a 
    	href="http://www.news.google.com/"><img 
    	src="http://news.google.com/images/news.gif" 
    	alt="sample" /></a>
    	<a 
    	href="http://www.news.google.com/"><img 
    	src="http://news.google.com/images/news.gif" 
    	alt="sample" /></a>
    	<a 
    	href="http://www.news.google.com/"><img 
    	src="http://news.google.com/images/news.gif" 
    	alt="sample" /></a>
    </div>
    </body>
    </html>
    Last edited by xDev; Mar 7, 2004 at 19:07.

  4. #4
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers xDev, you're a *

    The second solution was generally where I was hoping to go with this as it would indeed be a simpler solution for use with gallery pics and other similar content such as links brought in via a CMS.
    My js is extremely rusty and I've forgotten most of what I know/knew, so your help means I can postpone the learning curve until I have more time on my hands.

    Many thx again.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  5. #5
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again for the above solutions.
    I've provisionally implemented it, but I'm now considering treating every reference to an artwork as a gallery link, regardless of where it appears in the site.
    I'd ideally like to avoid adding rel attributes to every instance, so now I'm thinking…

    How would I utilise the same mechanism as used above to isolate the onclick behaviour for any link containing the string: gallery.php

    Artwork links will typically appear as follows:
    e.g.
    Code:
    <a href="gallery.php?artist=bill%20posters&artwork=worktitle">Artwork title</a>
    Artwork links may not only appear in the collected gallery sections and the url (or parts of it) is the one thing they will all have in common.

    So, how do I adapt the first of the two above solution to isolate links with an href pointing to gallery.php?
    I guess I'm after something like this:
    e.g.
    Code:
    if (anchors[i].getAttribute("href")
    && anchors[i].getAttribute("href") 'contains' "gallery.php")
    Big thanks in advance, again.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    To check for the string "gallery.php" in your link, just check for the indexOf or use a regular expression. You can also make this script work in older browsers if you use document.links[] instead of document.getElementsByTagName("a"). Here's a quickie:
    Code:
    function galleryLinks() {
    	var anchors = document.links, 
    		i=0, currentLink;
    	while (currentLink = anchors[i++]) 
    	{
    		if (currentLink.href && /gallery\.php/.exec(currentLink.href))
    		{
    			currentLink.onclick = function() {
    				gallPop(this.href);
    				return false;
    			};
    		}
    	}
    }
    
    function gallPop(url) {
    	var gallWin = window.open(url,'galleryWin','width=350,height=400');
    	gallWin.focus();
    }
    Hope this helps .

  7. #7
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Boof! Eat my goal!

    Cheers, Vinnie.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  8. #8
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One last question (promise)…

    How would I adapt/format the following line if I wanted to isolate external links based on the presence of http:// in the href?

    Code:
    if (currentLink.href && /gallery\.php/.exec(currentLink.href))
    This last option would complete the full suite of options (as I see it) for handling all kinds of links.


    I'm happy to use two consecutive versions of the script to address specific groups of links throughout a site, but it would be interesting to end up with one script able to define behaviours for a range of links.

    e.g.
    Code:
    var thisDiv = "folio" // value of parent div id attribute
    var extWin = "http://" // url string to isolate external links
    
    function init() {
            setPopups();
    }
    
    function setPopups() {
    …
    
        if (link is within the div thisDiv) {
            doThis(this.href);
        }
    
        if (link href contains extWin) {
            doThat(this.href);
        }
    }
    
    
    doThis(url) {
    window.open(url,popWin+'Win','width=X,height=X,…');
    }
    
    doThat(url) {
    window.open(url);
    }
    
    window.onload = init;
    …sort of thing.

    I figure by allowing the criteria to be set as variables (and a nominal small amount of notation) the script could be presented as a catch-all popup handler for the uninitiated.

    Setting aside the arguments about whether popups are 'philosophically acceptible'/'the spawn of satan' for a moment - doesn't that sound like a good idea?
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  9. #9
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I seem to be having success with the following script, but I'm not sure why.
    Code:
    function extLinks() {
    		var anchors = document.links,
    			i=0, currentLink;
    		while (currentLink = anchors[i++]) {
    
    			if ( !currentLink.href.indexOf('http://') ) {
    					currentLink.onclick = function() {
    						window.open(this.href);
    						return false;
    					};
    			}
    		}
    }
    
    window.onload = extLinks;
    To my rusty understanding it appears that I'm asking:

    if (the link url doesn't include http://) {
    doThis()…


    Evenso, it appears to give the desired effect when tested through a web server.
    It fails when tested locally outside of the localhost network and simply defaults to replacing the current window.

    I'm not comfortable that this solution is correct even though it seems to work.

    Hopefully either xDev, Vinnie or some other js whiz will pop in with a 'proper' solution, before I do my script and my sanity some serious damage.

    TIA again.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  10. #10
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Vinnie et Bill

    I'd prefer to use the test method for patterns in this instance, rather than exec.

    exec modifies the global RegExp object and returns a mixed result.

    test simply returns a boolean indicating success of the pattern against the passed string.

    While they are functionally the same in this simple example, they are technically quite different.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  11. #11
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My js is so rusty that your post went straight over my head.
    That's what happens when a part-time webber like me gets side-tracked by that whole 'grown up, javascript-free website' thang.

    Any chance you could show me how I would go about addressing/isolating href values containing an absolute url (ie.. w/ http://)?

    TIA, beetle
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  12. #12
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Change this:
    Code:
    if ( !currentLink.href.indexOf('http://') ) {
    to:
    Code:
    //test to see if 'http://' isn't in the currentLink href
    if (currentLink.href.indexOf('http://') == -1) {

  13. #13
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  14. #14
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks greatly to all three of you, but especially to xDev and Vinnie.
    The mist is slowly clearing.

    However…

    It seems that the following method doesn't work in MSIE5/Mac and Moz, the problem being that MSIE5/Mac recognises the url as conaining http:// even if it isn't expressed in the href.

    Code:
    function extLinks() {
    
    	var anchors = document.links, i=0, currentLink;
    
    	while (currentLink = anchors[i++]) {
    
    		if (currentLink.href.indexOf('http://') == 0)  {
    			currentLink.onclick = function() {
    				window.open(this.href);
    				return false;
    			};
    		}
    	}
    }
    
    window.onload = extLinks;
    Any ideas why this is and, more importantly, what I can do to get around it?

    Am I better off returning to a method that refers to href rather than links?
    It appears that MSIE and Moz see the links in their entirety rather than simply what is present in the href.
    Last edited by Bill Posters; Mar 11, 2004 at 02:20.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  15. #15
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I tried a whole bunch of things like userAgent detection for
    opera moz and mac ie5 ... didn't work
    and the code was bloated. I decided to check for the hostname of
    the location string. If it doesn't have my hostname in
    the string then I add
    the popup function. Should work in every browser cause the hostname property,
    'www.xdevdesign.com' in this case, is always
    available. Testing at home displays 'localhost'.

    Code:
    function extLinks() {
    	var anchors = document.links,
    	i=0, currentLink;
    	while (currentLink = anchors[i++]) {
    		if (currentLink.hostname.indexOf('xdevdesign') == -1) {
    			currentLink.onclick = function() {
    				window.open(this.href);
    				return false;
    			};
    		}
    	}
    }
    
    window.onload = extLinks;
    Link:
    http://www.xdevdesign.com/testing/indexOf.htm

    Just change 'xdevdesign' to the particular substring of your hostname.

    -xDev

  16. #16
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thx xDev…
    It works in MSIE5/Mac and Moz.
    It doesn't work in Safari (every link spawns a new window).

    Presumably Safari has a (problematically) different conceptualisation of links/hrefs/hostnames from the others.


    If Safari wasn't fast becoming (already?) the #1 browser for Mac users (incl. myself) then I might consider it as an acceptible loss.


    The search continues.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  17. #17
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't have a mac so I can't find out what Safari will display for .hostname. Is Safari specific to a mac??? Anyway, try this and tell me what the alert says when viewed with Safari:

    Code:
    function extLinks() {
    	var anchors = document.links,
    	i=0, currentLink;
    	while (currentLink = anchors[i++]) {
                 alert(currentLink.hostname);
    		if (currentLink.hostname.indexOf('xdevdesign') == -1) {
    			currentLink.onclick = function() {
    				window.open(this.href);
    				return false;
    			};
    		}
    	}
    }
    Once we know what it has for that property then we can browser detect for Safari and change the code accordingly. Even if the property is empty (null), that's a test in of itself.

    -xDev

  18. #18
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Safari is the default browser for Mac OS X.

    Safari:
    Internal links trigger an empty alert.
    External links trigger an alert with their respective urls in ( www.google.com and www.sitepoint.com )

    When clicking the links, both internal and external links trigger a new window.



    MSIE5/Mac and Moz include the appropriate url/string for both internal and external links and call the new window only for external links.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  19. #19
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    Code:
    function extLinks() {
    	var anchors = document.links,
    	i=0, currentLink, 
    	agt = navigator.userAgent.toLowerCase();
    	while (currentLink = anchors[i++]) {
    	
    		if ((currentLink.hostname.indexOf('xdevdesign') == -1) 
    		|| ((navigator.userAgent.indexOf('safari') != -1) 
    		&& (currentLink.hostname != '')))  {
    			currentLink.onclick = function() {
    				window.open(this.href);
    				return false;
    			};
    		}
    	}
    }
    Test link:
    http://www.xdevdesign.com/testing/indexOfHostname2.htm

  20. #20
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    new windows on every link.

    Thanks for all the effort you've put in xDev.
    It's been helpful and much appreciated.

    I'm reluctant to head down the UA-sniffing route as I see it as pandering to browser inconsistencies which I'd regard as a philosophical step-backwards.

    If there is no way to make it work without UA-sniffing then I'd prefer to rethink the functionality.

    It was a good idea and one that I thought would be relatively staright-forward, but I guess it's a little ahead of its time.

    Thanks again for your help.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  21. #21
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Bill,

    Can you tell me what happens in Safari with this sample code and HTML?

    JS:
    Code:
    function showFirstSeven (lnk)
    {
     alert(lnk.href.substring(0,6));
    }
    HTML:
    HTML Code:
    <a href="/mypage.html" onclick="showFirstSeven(this);">Link</a>
    If it returns "/mypage" in Safari, then that's the solution to your problem, and use substring() to search for "http://" as the first 7 characters of the href.

  22. #22
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    javascript alert:

    /mypag

    (no e)
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  23. #23
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Bill Posters
    javascript alert:

    /mypag

    (no e)
    Miscalculation on my part, don't worry about that .

    Try just alerting link.href; does Safari still show the full http address then?

  24. #24
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <a href="/mypage.html" onclick="alert(this.href);return false">Link</a>
    Safari:
    /mypage.html

    MSIE5/Mac:
    file://localhost/mypage.html
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  25. #25
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Seem to have found a way that works equally well in Safari/MozMac/FFMac/MSIE5Mac.

    http://demo.newplasticarts.co.uk/externallinks/
    http://demo.newplasticarts.co.uk/ext...nks/index2.php

    The external link detection part was largely provided by another person (other web/des forum) and is slightly different from those methods previously posted here, but seems to be effective x-browser.
    Again, my js is foggy enough that I can't really appreciate the difference in methods.

    Haven't yet tested it in any non_mac browsers, but the fact that it works in Safari, Moz *and* MSIEMac is encouraging.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature


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
  •