New Topic/Question
Reply
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!
MultiQuote
| 