3 Replies - 793 Views - Last Post: 18 March 2012 - 03:32 PM

#1 tcuguy  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 18-March 12

Slideshow doesn't display when zoomed out?

Posted 18 March 2012 - 09:23 AM

Hey guys! I''m having what i like to call an asap problem on my portfolio site! (I need to start sending it out to get interviews).

My javascript/jquery slideshow will not show up when you zoom out with your browser.... ?

Check it out Here

Here we get the HTML;

<link href="Files/styles.css" rel="stylesheet" type="text/css" />
    <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>  
    <script src="Files/jquery.flow.1.1.min.js" type="text/javascript"></script>
    
     <!--[if lt IE 7]>
            <script type="text/javascript" src="unitpngfix.js"></script>
    <![endif]-->   

    
    <script type="text/javascript">
    $(function() {
        $("div#controller").jFlow({
            slides: "#slides",
			width: "1000px",
    		height: "772px",
        });
    });
    </script>

</head>
<body>
<div id="content">

<div id="menu">	
    <li><a href="Print.html"><font color=#3399FF>Print</font></a></li>
    <li><a href="Advertising.html">Advertising</a></li>
    <li><a href="Identity.html">Identity</a></li>
    <br>
    <li><a href="AboutMe.html"><h1>About Me</h1></a></li>
    <li><a href="ContactMe.html"><h1>Contact Me</h1></a></li>
    <li><a href="#Resume"><h1>Resume</h1></a></li>
</div>


    <div id="controller" class="hidden">
        <span class="jFlowControl">Book</span>
        <span class="jFlowControl">2</span>
        <span class="jFlowControl">3</span>
    </div>
    
    <div id="prevNext">
        <img src="files/images/next.png" align="right" alt="Next Tab" class="jFlowNext" />
    </div>
    
    <div id="slides">
        <div><img src="Files/images/print/2.jpg" class="roundedCorners"/><p>This is photo number two. A lot of stuff can go here for sure!</p></div>
        <div><img src="Files/images/print/1.jpg" class="roundedCorners"/><p>Book Design for "A Room With A View"</p></div>
        <div><img src="Files/images/print/3.jpg" class="roundedCorners"/><p>This is photo number three. A lot of stuff can go here for sure!</p></div>
    </div><br>
    
    
</div> 
</body>
</html>


And probably the cause for the problem... the CSS

@charset "UTF-8";
/* CSS Document */

#content {
   	margin: 5% auto;	
	width: 1000px;
	height: 770px;
	overflow: hidden;
	font: 15px "Myriad Pro", "Helvetica";
	-moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;  
    box-shadow: 5px 5px 5px 0px #999999;
    -moz-box-shadow: 5px 5px 5px 0px #999999; /* Firefox 3.6 and earlier */
}


/* Following code for navigation menu */

#menu { 
	background: url('images/menu.png'); 
	list-style-type: none; 
	width: 210px; 
	height: 225px; 
	position: absolute;
	z-index: 100;
	padding-top: 85px;
}


  #menu li a {
	display: block;
	text-decoration: none;
	color: #333333;
	padding-top: 5px;
	padding-right: 40px;
	padding-bottom: 5px;
	padding-left: 44px;
  }

	#menu li a:hover { 
		color: #3399FF; 
	}
	
	
	h1 {   /* Color and hover for bottom menu */
	  font: 13px "Myriad Pro", "Helvetica"; 
	  text-decoration: none; 
	  color: #3399FF; 
	  line-height: 0%;
	} 


	h1:hover{
	  color: #333333;
	}	

/* End code for navigation menu */
	

/* Following code for jquery slideshow*/

#prevNext {
  margin: 0 0 -1px 0;
}


#prevNext img {
  position: relative;
  z-index: 90;
  cursor: pointer;
}


.hidden {
display: none;
}


p {
  margin: 0 1px 0 0;
  padding: 0px 44px;
  color: #333333; 
  position: relative;
  top: -62px;
  line-height: 40px;
  background: white;
}


.roundedCorners {
  padding: 0;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}

/* End code for jquery slideshow */


#content-wrapper
{
	display:none;	
}



Does anyone know what is going on? I don't want to waste my time by adding all my content and have nobody be able to see it because they are zoomed out! :(

Is This A Good Question/Topic? 0
  • +

Replies To: Slideshow doesn't display when zoomed out?

#2 tcuguy  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 18-March 12

Re: Slideshow doesn't display when zoomed out?

Posted 18 March 2012 - 01:03 PM

Wow, this problem doesn't exist in firefox... but chrome and safari still have this zooming out issue...
Was This Post Helpful? 0
  • +
  • -

#3 pbl  Icon User is offline

  • There is nothing you can't do with a JTable
  • member icon

Reputation: 8347
  • View blog
  • Posts: 31,913
  • Joined: 06-March 08

Re: Slideshow doesn't display when zoomed out?

Posted 18 March 2012 - 02:03 PM

If your portofolio is about JavaScrip better to post in the JavaScrip forum :)

Topic moved
Was This Post Helpful? 0
  • +
  • -

#4 tcuguy  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 18-March 12

Re: Slideshow doesn't display when zoomed out?

Posted 18 March 2012 - 03:32 PM

View Postpbl, on 18 March 2012 - 02:03 PM, said:

If your portofolio is about JavaScrip better to post in the JavaScrip forum :)

Topic moved


Aren't I in the js forum?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1