Page 1 of 2 12 LastLast
Results 1 to 10 of 19

Thread: Centering Popup

  1. #1
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default Centering Popup

    I am using this code from Dynamic Drive and I want the popup to be dead center on the screen. It seems now it's in relation to the thumbnail. The code.

    Code:
    <style type="text/css">
    
    .thumbnail{
    position: relative;
    z-index: 0;
    }
    
    .thumbnail:hover{
    background-color: transparent;
    z-index: 50;
    }
    
    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    left: -1000px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
    }
    
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }
    
    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: 0;
    left: 60px; /*position where enlarged image should offset horizontally */
    }
    
    </style>
    I tried...
    top: 50%;
    left: 50%;

    That didn't seem to work.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,965
    Thanks
    16
    Thanked 305 Times in 304 Posts
    Blog Entries
    11

    Default

    What is this CSS from? Please post a link to the DD demo page and also a link to the page on your website.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by Beverleyh View Post
    What is this CSS from? Please post a link to the DD demo page and also a link to the page on your website.
    This is where its from....
    This is the page I am building... Select American / Baltimore Then results...Pass over the cameras to bring up the pix.

    www.menuhead.net/Pages/BigHead.php

    Thank You.

  4. #4
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default

    OOPS. Here is the link for the pop up code.
    http://www.dynamicdrive.com/style/cs...ge-viewer/P20/

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,965
    Thanks
    16
    Thanked 305 Times in 304 Posts
    Blog Entries
    11

    Default

    If all the enlarged images are the same size (eg, 600 x 800) you can use a negative offset where the left and top margins are half the value of the overall image width and height, like this;
    Code:
    top:50%;
    left:50%;
    margin-top:-300px;
    margin-left:-400px;
    If your images are all different sizes, as yours are, you'll need to employ some JavaScript to calculate an offset based on viewport size, in which case you might as well use a pre-made popup viewer like this: http://www.dynamicdrive.com/dynamici...box2/index.htm or this: http://www.dynamicdrive.com/dynamici...ebox/index.htm
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  6. #6
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default

    Thank you. I will play around with both options today and let you know how things turn out.

  7. #7
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default

    OK, I've played. This is my line...
    Code:
    <a class="thumbnail" href="#thumb" rel="facebox"><img src="http://www.menuhead.net/Images/Buttons/PShotClear.png" width="30px" height="20px" border="0" />
    If I take out class="thumbnail" and/or href="#thumb" then I lose the rollover effect. The image just appears on the page. Any hints on how to maintain the rollover and still get this thing centered? Thank you.

    PS Here is the CSS I am currently using. This is for the hover, etc...

    Code:
    a:hover {
    	text-decoration:none;
    }
    
    a {
    	text-decoration:none;
    }
    
    #interface1 {
    	z-index:1;
    }
    
    #loader_container {
        text-align:center;
        position:absolute;
        top:40%;
        width:100%}
    
    #loader {
    	font-family:Tahoma, Helvetica, sans;
    	font-size:10px;
    	color:#000000;
    	background-color:#FFFFFF;
    	padding:10px 0 16px 0;
    	margin:0 auto;
    	display:block;
    	width:135px;
    	border:1px solid #6A6A6A;
    	text-align:center;
    	z-index:255;
    }
    
    #progress {
    	height:5px;
    	font-size:1px;
    	width:1px;
    	position:relative;
    	top:1px;
    	left:10px;
    	background-color:#9D9D94
    }
    
    #loader_bg {
    	background-color:#EBEBE4;
    	position:relative;
    	top:8px;left:8px;height:7px;
    	width:113px;font-size:1px
    }
    
    .border_preview{
    	z-index:100;
    	position:absolute; 
    	background: #fff;
    	border: 1px solid #444;
    }
    
    .preview_temp_load {
    	vertical-align:middle;
    	text-align:center;
    	padding: 10px;
    }
    .preview_temp_load img{	
    	vertical-align:middle;
    	text-align:center;
    }
    
    
    
    /*Image Title Styling*/
    
    .title_h2 {
     padding:12px 0 0 18px;
    }
    
    h2 {
    	font-size:14px;
    	padding:0;
    	margin:0;
    	font-family: "century gothic";
    	color:#FFF
    	text-align:center;
    }
    
    .thumbnail{
    position: relative;
    z-index: 0;
    	width:30px;}
    
    .thumbnail:hover{
    background-color: transparent;
    z-index: 50;
    }
    
    .thumbnail span{ /*CSS for enlarged image This is for the image*/
    	position: absolute;
    	background-color: #333;
    	padding: 2px;
    	left: -1000;
    	border: 3px solid black;
    	border-radius: 35px;
    	-moz-border-radius: 35px; /* Old Firefox */
    	visibility: hidden;
    	color: white;
    	text-decoration: none;
    	text-align: center;
    }
    
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }
    
    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: -380px;	/*position where enlarged image should offset vertically*/
    left: 60px; /*position where enlarged image should offset horizontally*/
    }
    Last edited by DS928; 03-16-2013 at 05:11 PM. Reason: Adding Code

  8. #8
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,965
    Thanks
    16
    Thanked 305 Times in 304 Posts
    Blog Entries
    11

    Default

    Wait, what method are you using now?

    You should choose either the CSS Popup Image Viewer with the negative margin offset - the caveat here is that it will only work if all your images are the same size, but you'll keep the rollover - OR choose Facebox, but then you'll need to set it up as advised on the demo page and include its javascripts and stylesheets - this is the method you should use if all of your images are different sizes, and it looks like its triggered onclick. I'm not sure if it supports a hover trigger (can't check - on iphone)

    You'll need to decide which one to choose based on the limitations and compromises of each script. At the minute it looks like you're trying to combine the CSS for each script, without installing the Facebox JavaScript.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  9. #9
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default

    Hmmm. I did a test. I made an image 250px by 500pk. Set the css to...
    top:50%;
    left:50%;
    margin-top:-125px;
    margin-left:-250px;
    Hoping this would center the test image. It centers it on the camera as opposed to the page. So that is a no go.
    Back to the other code. The lightbox one is too slow and combersome for what I need. So now I am down to two methods. The one I have, which works except for the centering issue. Also, I know I forgot to mention that it's using tootip as well, if that makes a difference. So, back to the facebox method. I have the main page that contains the script, The table with the restaurants is on another page, I am thinking this makes a difference, I am also looking into the hovering with facebox. Thank you, once again.

  10. #10
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,965
    Thanks
    16
    Thanked 305 Times in 304 Posts
    Blog Entries
    11

    Default

    Quote Originally Posted by DS928 View Post
    Hmmm. I did a test. I made an image 250px by 500pk. Set the css to...
    top:50%;
    left:50%;
    margin-top:-125px;
    margin-left:-250px;
    Try it with position:absolute; as well.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Centering a JavaScript Popup Window
    By yuriyneo in forum JavaScript
    Replies: 1
    Last Post: 03-28-2009, 06:21 AM
  2. Auto-centering Popup Window
    By monique in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 03-12-2007, 01:20 AM
  3. Auto-centering Popup script problem
    By dead-poetic in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 01-05-2006, 12:55 AM
  4. question about auto-centering popup window
    By limitedvista in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 09-01-2005, 09:07 PM
  5. Script: Auto-centering Popup Window
    By soniablu in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-26-2004, 01:34 AM

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
  •