SitePoint Sponsor

User Tag List

Results 1 to 17 of 17

Thread: Simple Popup

  1. #1
    SitePoint Guru
    Join Date
    Nov 2000
    Posts
    740
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple Popup

    I have a graphic image on my webpate, which when clicked should open up a small popup window with dimensions 150 x 100.

    How can I do this?

    Thanks,

    Jon

  2. #2
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Add this to the <head> section of the page you have the clickable image on:
    Code:
    <script type="text/javascript">
    <!--
    var newwindow = '';
    
    function popup(url) {
    	if (!newwindow.closed && newwindow.location)
    	{
    		newwindow.location.href = url;
    	}
    	else
    	{
    		newwindow=window.open(url,'name','height=100,width=150');
    		if (!newwindow.opener) newwindow.opener = self;
    	}
    	if (window.focus) {newwindow.focus()}
    	return false;
    }
    
    // -->
    </script>
    Add this to the link of your image, so that it ends up like this:
    Code:
    <a href="#" title="Link Title" onclick="return popup('popup.htm')"><img src="#" width="#" height="#" alt="Link Alt" /></a>
    Make a page called "popup.htm" in the same folder as the original page, and fill it with the content you want in the popup.

    Job done
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  3. #3
    SitePoint Guru
    Join Date
    Nov 2000
    Posts
    740
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So I have got to use javascript huh? Thanks for that.

    I tried the code, but what am I supposed to put in <a href="#" to replace the #? Or is it supposed to be a #??

    Thanks,

    Jon

  4. #4
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, gotta use JavaScript if you want it at a set dimension like that.

    Nope, just leave the href="#" (but replace all the other "#" bits), the "onclick" part opens the popup.

    Let me know if it doesn't work.
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  5. #5
    SitePoint Guru
    Join Date
    Nov 2000
    Posts
    740
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something doesn't seem quite right. I am using this:

    Code:
    <a href="#" title="Link Title" onclick="return popup('popup.php')"><img src="../images/reviewbuttonyes.gif" align="top">
    But the link seems to carry on into the next paragraph???

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A more accessible way would be to use a normal link. Alec's solution means the link won't work with JavaScript disabled or unsupported. Using a regular link means it will at least work (although it won't pop up a new window).

    Code:
    <a href="popup.php" title="Link Title" onclick="return popup(this.href)"><img src="../images/reviewbuttonyes.gif" alt="(text equivalent)"></a>
    Don't forget the alt attribute of the image, which is required.
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Guru
    Join Date
    Nov 2000
    Posts
    740
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That non-javascript worked just fine thanks. Couple of questions though:

    1. How would I get rid of the blue outline on the image?

    2. What do you mean it won't pop up in a new window? When I tried it, it opened a little window? Was using firefox if that makes any difference.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Use a css style give it no border

    Code css:
    a img { border: none }

    When there is no javascript it won't pop up in a new window. It can't. Javascript equals popup, no javascript equals some other solution.

    When there is no javascript, having a valid link means that at the very least, the linked page will be accessible.

    When there is javascript, that linked page can become a popup window instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Guru
    Join Date
    Nov 2000
    Posts
    740
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Question 2 is actually referring to the non-javascript link, so the question still holds.

    Regarding the "a img" css stuff, will I need a unique one since it would affect all my links on my page otherwise? If so, any pointers on how to make it unique?

    Thanks guys, nearly there!

  10. #10
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jon Lawrance View Post
    2. What do you mean it won't pop up in a new window? When I tried it, it opened a little window? Was using firefox if that makes any difference.
    If you disable JavaScript, the link won't open in a new window. It will behave just like a normal link.

    If you use Alec's solution, the link will just go to the top of the page if JavaScript is disabled (or unsupported or blocked).
    Birnam wood is come to Dunsinane

  11. #11
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    A more accessible way would be to use a normal link. Alec's solution means the link won't work with JavaScript disabled or unsupported. Using a regular link means it will at least work (although it won't pop up a new window).

    Code:
    <a href="popup.php" title="Link Title" onclick="return popup(this.href)"><img src="../images/reviewbuttonyes.gif" alt="(text equivalent)"></a>
    Don't forget the alt attribute of the image, which is required.
    So how does this fit with his specification of the size being 150x100?
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  12. #12
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jon Lawrance View Post
    Regarding the "a img" css stuff, will I need a unique one since it would affect all my links on my page otherwise? If so, any pointers on how to make it unique?
    It will remove the borders from all images inside links. If you only want this to happen for this particular image, then use something like this,
    Code HTML4Strict:
    <a href="popup.php" title="Link Title" onclick="return popup(this.href)"><img src="../images/reviewbuttonyes.gif" alt="(text equivalent)" id="reviewbuttonyes"></a>
    Code CSS:
    #reviewbuttonyes {border:0}
    Birnam wood is come to Dunsinane

  13. #13
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But AutisticCuckoo, he wants the popup to be a specific size.
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  14. #14
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    He can still do that in the popup() function. With JS enabled, there will be a pop-up window with the specified size. Without JS it will be a regular link, which is as close to graceful degradation as you'll get in this case.

    If it's better not to do anything if JS isn't enabled, then you might use '#' as the URI. But in that case, the entire link should be created by JavaScript, since it's non-functional without scripting.
    Birnam wood is come to Dunsinane

  15. #15
    SitePoint Guru
    Join Date
    Nov 2000
    Posts
    740
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So going the javascript route for now, why does the link carry on into the next paragraph of text? Is there some kind of missing terminator?

  16. #16
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In the sample you posted above, you're missing the </a> tag. If you copy my example verbatim it should work.
    Birnam wood is come to Dunsinane

  17. #17
    SitePoint Guru
    Join Date
    Nov 2000
    Posts
    740
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey guys, its working a treat now. Thank you.


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
  •