Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2011
    Location
    London
    Posts
    31
    Thanks
    5
    Thanked 1 Time in 1 Post

    Javascript lightbox help

    I am making a website for school and have made a lightbox that works perfectly in all NEW browsers. Only, they use internet explorer 7.

    Because of this, the lightbox doesnt work properly, and instead sticks the the side of the screen, doesnt dim the background and simply doesnt work.

    Is there a different lightbox that will work for IE7? and how can i make a rule to only show it for browsers older than IE9? (I know of the html 'if lt ie9' rule if that helps)

    Thanks.

    Code:
    <?
    session_start();
    if(!session_is_registered(myusername)){
    header("location:index.php");
    }
    ?>
    <?php
    //users data query
    $sesusername = $_SESSION['myusername'];
    $sespassword = $_SESSION['mypassword'];
    include_once("scripts/connect.php");
    $memberquery = mysql_query("SELECT * FROM members WHERE username='$sesusername' AND password='$sespassword'");
    while($row = mysql_fetch_assoc($memberquery)){
    $id = $row['id'];
    $photo = $row['profile_picture'];
    $name = $row['name'];
    $username = $row['username'];
    $joined = $row['date_joined'];
    $password = $row['password'];
    $email = $row['email'];
    $freinds = $row['friends'];
    }
    ?>
    <?php
    //friends data
    $friendsquery = mysql_query("SELECT * FROM members");
    	while($row = mysql_fetch_assoc($friendsquery)){
    		$user = $row['name'];
    		$userpic = $row['profile_picture'];
    		$id = $row['id'];
    		{ $friend .='<img src="' . $userpic . '" style="width:100px; height:90px; vertical-align:middle"><a href="profile.php?id=' . $id . '"> ' . $user . '</a></br></br>' ;
    		}
    	}
    ?>	
    
    		
    <DOCTYPE HTML>
    <html>
    <head>
    <title>Dead psycho | Friends</title>
      <style type="text/css">
            	#friend_container{
    				display:none;
            		background:#000000;
    				opacity:0.7;
    				filter:alpha(opacity=90);
            		position:absolute;
    				top:0px;
    				left:0px;
    				min-width:100%;
    				min-height:100%;
    				z-index:1000;
            	}
    			#friends_content{
    				display:none;
    				position:fixed;
    				top:100px;
    				left:50%;
    				margin-left:-200px;
    				width:400px;
    				max-height: 400px;
    				background:#FFFFFF;
    				padding:10px 15px 10px 15px;
    				border:2px solid #a11e22;
    				z-index:1001;
    				-webkit-border-radius: 15px;
    				-moz-border-radius: 15px;
    				border-radius: 15px;
    				Overflow: scroll;
    			}
    			a{ color:#a11e22 ;}
    		#friend{height:150px;
    				width:150px;}
    				
    		</style>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
        <script type="text/javascript">  
         $(document).ready(function(){  
         $("a#open_friends").click(function(){  
         $("#friend_container, #friends_content").fadeIn(300);  
         })  
         $("a#close_friends").click(function(){  
         $("#friend_container, #friends_content").fadeOut(300);  
         })  
         })  
        </script>  
        
    <?php include_once("menu.php"); ?>
    </head>
    <body>
    <div id="container">
    <div id="leftside">
    <?php require_once("sidebar_left.php"); ?>
    </div>
    <div id="content">
        <a id="open_friends" href="#"><b>All friends</b></a>  
        <div id="friends_content">  
        <h2><center>Friends</center></h2>  
        <hr width="90%" color="#a11e22"/>
        <?php echo "$friend"; ?>  <br/>
        <b><center><a id="close_friends" href="#">Close</a></center></b>
        </div> 
        <div id="friend_container"> </div></div>
    </div>
    <div id="footer" align="justify">
    <?php include_once("scripts/copy.php"); ?>
    </div>
    </body>
    </html>

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Remove any whitespace e.g. new lines above this
    Code:
    <DOCTYPE HTML>
    Now change that to this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    IE7 supports position:fixed but only in standards compliant mode, the doctype you are currently using is an HTML5 doctype but I see no HTML5 in your document so there is no need to use that doctype. Using the one I gave you should allow position:fixed to work properly.
    Last edited by _Aerospace_Eng_; 01-05-2012 at 12:44 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Nov 2011
    Location
    London
    Posts
    31
    Thanks
    5
    Thanked 1 Time in 1 Post
    Thank you i will do that and test it tomorrow

  • #4
    New Coder
    Join Date
    Nov 2011
    Location
    London
    Posts
    31
    Thanks
    5
    Thanked 1 Time in 1 Post
    Thanks that worked


  •  

    Tags for this Thread

    Posting Permissions

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