Jump to content

My links quit working

RyanMinor

By RyanMinor
in PHP Coding Help

 Share

Recommended Posts

RyanMinor Member

RyanMinor

Posted
Posted

I recently added a jQuery slider only to notice that my links do not work anymore in my header. Can anybody help me find out why they will not work. All relevant code is below...

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="includes/global.css" type="text/css" />
<script type="text/javascript" src="includes/flowplayer_3.2.7/flowplayer-3.2.6.min.js"></script>
<script type="text/javascript" src="includes/jquery_1.6.1.js"></script>
<script type="text/javascript" src="includes/slideshow.js"></script>
<script type="text/javascript">
$(document).ready(function() {		
slideShow();
});
</script>
<title></title>

</head>
<body>
<div id="wrap">
    <div id="header">
        <div id="header-links">
            <p><a href="cart.php?action=none">My Cart</a></p>
        </div>
</div>

<div id="header-photo">
    <div id="gallery">
        <a class="show"><img src="../images/header-photo.jpg" width="850" height="250" title="" alt="" rel="" style="border:0; padding:0;" /></a>
        <a><img src="../images/header-photo-2.jpg" width="850" height="250" title="" alt="" rel="" style="border:0; padding:0;" /></a>
        <a><img src="../images/header-photo-3.jpg" width="850" height="250" title="" alt="" rel="" style="border:0; padding:0;" /></a>
        <a><img src="../images/header-photo-4.jpg" width="850" height="250" title="" alt="" rel="" style="border:0; padding:0;" /></a>
    </div>
</div>

<div id="nav">
    <ul>
        <li><a href="/index.php">Home</a></li>
        <li><a href="/my_videos.php">View My Videos</a></li>
        <li><a href="/search.php">Search Videos</a></li>
        <li><a href="/contact_us.php">Contact Us</a></li>
        <li><a href="/links.php">Links</a></li>
    </ul>
</div>

 

Here is my CSS code:

/* ========================================
Top Element Styles
=========================================== */
html {
background: url(../images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
font: 12px/1.75em Verdana, Tahoma, arial, sans-serif;
color: #FFF; 
margin: 0 0 15px 0;	
}

/* ========================================
Link Styles
=========================================== */
a, a:visited {
color: #C30; 
background: inherit;
text-decoration: none;		
}
a:hover {
color: #C30;
background: inherit;
padding-bottom: 0;
}

/* Headers */
h1, h2, h3 {
font-family: 'Trebuchet MS', Tahoma, Sans-serif;
font-weight: Bold; 	
color: #333;		
}

h1 {
font-size: 160%;	
font-weight: normal;
}

h2 {
font-size: 130%;
text-transform: uppercase;	
}

h3 {
font-size: 130%;	
}

h1, h2, h3, p {
padding: 10px;		
margin: 0;
}

ul, ol {
margin: 5px 20px;
padding: 0 20px;
}

/* Images */
img {
background: #FAFAFA;
    border: 1px solid #DCDCDC;
padding: 5px;
}

img.float-right {
  	margin: 5px 0px 10px 10px;  
}

img.float-left {
  	margin: 5px 10px 10px 0px;
}

code {
  	margin: 5px 0;
  	padding: 10px;
  	text-align: left;
  	display: block;
  	overflow: auto;  
  	font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ;
  	/* white-space: pre; */
  	background: #F5F5F5;
border-left: 3px solid #D4D4D4;
}

acronym {
  cursor: help;
  border-bottom: 1px dashed #777;
}

blockquote {
font: bold 1.4em/1.5em 'Trebuchet MS', Tahoma, Sans-serif;	
margin: 10px;
	padding: 0 0 0 25px;  
   	background: #F5F5F5;
border-left: 3px solid #D4D4D4;	
color: #444;
}

input.button {
font: bold 12px Arial, Sans-serif; 
height: 24px;
margin: 0;
padding: 2px 3px; 
color: #000000;
background: #666666;
border: 1px solid #dadada;
}

/********************************************
   LAYOUT
********************************************/ 
#wrap {
position: relative;
width: 910px;	
margin: 0 auto;
text-align: left;
background: #000; /*#fff url(../images/content.jpg) repeat-y center top;*/
}

#content-wrap {
float: left;
width: 850px;
margin-left: 30px;
display: inline;
padding: 0; 	
border-top: 5px solid #000;
/*background: #fff url(../images/content-wrap.jpg) repeat-x;*/
/* IE10 */ 
background-image: -ms-radial-gradient(center, ellipse farthest-side, #FFFFFF -300%, #000000 100%);
/* Mozilla Firefox */ 
background-image: -moz-radial-gradient(center, ellipse farthest-side, #FFFFFF -300%, #000000 100%);
/* Opera */ 
background-image: -o-radial-gradient(center, ellipse farthest-side, #FFFFFF -300%, #000000 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(radial, center center, 0, center center, 490, color-stop(-3, #FFFFFF), color-stop(1, #000000));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-radial-gradient(center, ellipse farthest-side, #FFFFFF -300%, #000000 100%);
/* Proposed W3C Markup */ 
background-image: radial-gradient(center, ellipse farthest-side, #FFFFFF -300%, #000000 100%);
}

#header {
position: relative;
/*background: #fff url(../images/header-bg.jpg) repeat-y center top;*/
background-color:#000000;
height: 35px;
width:910px;	
padding: 0;	
color: #FFF;	
}

/* Header Links */
#header #header-links {
position: absolute;
top: 8px; 
right: 45px;	
color: #FFF;
font-size: 14px;	
font-weight: bold;
}

#header #header-links p {	
padding: 0;	
margin: 0;	
}

#header #header-links a {	
color: #FFF;
text-decoration: none;	
}

#header #header-links a:hover {
color: #666;		
}

/* Header Photo */
#header-photo {
position: relative;
clear: both;
margin: 5px auto;
height: 250px;
width: 850px;
/*background: #fff url(../images/header-photo.jpg) no-repeat center center;*/
background-color:#000;
}

#header-photo h1#logo-text a {
position: absolute;
margin: 0;
padding: 0;
font: bold 48px 'Trebuchet MS', Arial, Sans-serif;
letter-spacing: -1px;
color: #fff;
text-transform: none;
text-decoration: none;
border: none;
/* change the values of top and left to adjust the position of the logo*/
top: 22px;
left: 9px;
height: 48px;
}

#header-photo h2#slogan {
position: absolute;
margin: 0;
padding: 0;
font: bold 14px 'Trebuchet MS', Arial, Sans-serif;
text-transform: none;
color: #B6D1F8;
/* change the values of top and left to adjust the position of the slogan*/
top: 73px;
left: 33px;
}

/* Navigation */
#nav {
clear: both;	
padding: 0;			
}

#nav ul {
float: left;
list-style: none;
background: #E4E4E4 url(../images/nav.jpg) repeat-x;	
width: 850px;		
padding: 0;	margin: 0 0 0 30px;
height: 45px;
display: inline;
text-transform: uppercase;
}

#nav ul li {
display: inline;
margin: 0; padding: 0;
}

#nav ul li a {
display: block;
float: left;
width: auto;
margin: 0;
padding: 0 15px;	
border-right: 1px solid #dadada;
border-left: 1px solid #fafafa;	
border-bottom: none;
color: #555;
font: bold 14px/45px "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
text-transform: uppercase;
text-decoration: none;	
letter-spacing: 1px;
}

#nav ul li a:hover, 
#nav ul li a:active {
color: #326ea1;
}

#nav ul li#current a {	
background: #DBDBDB url(../images/nav-current.jpg) repeat-x;		
}

/* Main Column */
.three-col #main {
margin: 10px 190px 0 200px;
}

.two-col #main {
margin: 0px 5px 0 200px;
}

#main h1 {
margin: 10px 10px 0 10px;
font: normal 1.8em Georgia, "Times New Roman", Times, serif;
color: #FFF;
padding: 15px 0 2px 0px; 		
border-bottom: 1px solid #dadada;
}

/* Sidebar */	
#sidebar {
float: left;
width: 195px;	
margin-top: 10px;	
}
#sidebar a {
color:#C63;	
}
#sidebar a:hover {
color:#C63;	
}

/* right column */
#rightcolumn {
float: right;
width: 190px;
margin-top: 10px;	
}

#rightcolumn h1, #sidebar h1 {
margin: 10px 5px 0 5px;
padding: 5px 5px; 
font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif;
color: #444; 		
}

/* Sidemenu */
ul.sidemenu {
text-align: left;
margin: 7px 8px 8px 10px; padding: 0;			
border-top: 1px solid #666;
text-decoration: none;	
}

ul.sidemenu li {
list-style: none;
padding: 4px 0 4px 5px;
margin: 0 2px;		
border-bottom: 1px solid #666;
}

* html body ul.sidemenu li {
height: 1%;
}
ul.sidemenu li a {
text-decoration: none;	
color: #326ea1; 
border: none;		
}

ul.sidemenu li a:hover {	
color: #383d44;
border: none;
}

/* Footer Wrap */
#footer-wrap {
clear: both;
width: 910px;
font-size: 95%;
padding: 20px 0;
text-align: left;	
background: #000/* url(../images/footer-bottom.jpg) no-repeat center bottom*/;
}

#footer-wrap a {
color: #C30;
}

#footer-wrap a:hover {
color: #666;	
}

#footer-wrap p {
padding: 10px 0;
}

#footer-wrap h2 {
color: #666666;
margin: 0;
padding: 0 10px; 
}

/* Footer */
#footer {
clear: both;
color: #000;	
margin: 0 auto 10px auto; 
width: 850px;
padding: 5px 0;
text-align: center;
/*background: #F8F7F7;*/
/* IE10 */ 
background-image: -ms-linear-gradient(top, #FFFFFF -300%, #000000 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF -300%, #000000 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF -300%, #000000 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(-3, #FFFFFF), color-stop(1, #000000));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF -300%, #000000 100%);
/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #FFFFFF -300%, #000000 100%);
/*border-top: 1px solid #F2F2F2;*/
}

/* Alignment Classes */
.float-left { 
float: left;
}

.float-right { 
float: right;
}

.align-left { 
text-align: left;
}

.align-right { 
text-align: right;
}

/* Display and Additional Classes */
.clear {
clear: both;
}

/* Post */
.post-by {
font-size: .95em;	
padding-top: 0;
}

.post-footer {
background: #F5F5F5;
padding: 5px; margin: 20px 10px 0 10px;	
font-size: 95%;	
color: #666666;	
}

.post-footer .date{
margin: 0 10px 0 5px;	
}

.post-footer a.comments {
margin: 0 10px 0 5px;	
}

.post-footer a.readmore {
margin: 0 10px 0 5px;	
}

/* ========================================
Slideshow Header Styles
=========================================== */
.clear {
clear:both
}
#gallery {
position:relative;
height:360px
}
#gallery a {
float:left;
position:absolute;
}	
#gallery a img {
border:none;
}	
#gallery a.show {
z-index:500
}
#gallery .caption {
z-index:600; 
background-color:#000; 
color:#ffffff; 
height:100px; 
width:100%; 
position:absolute;
bottom:0;
}
#gallery .caption .content {
margin:5px
}	
#gallery .caption .content h3 {
margin:0;
padding:0;
color:#1DCCEF;
}

/* ========================================
Miscellaneous Styles
=========================================== */
.contact_us_error {
color: #FF0000;
font-style: italic;
}
.contact_us_success {
color: #0000FF;
font-style: italic;
}
.shopping_cart {
color: #FFFFFF
}
.customer_info {
color: #006600;
}
.comment {
color: #000000;
}

 

Here is the JS code for my slideshow:

function slideShow() {
//Set the opacity of all images to 0
$('#gallery a').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('#gallery a:first').css({opacity: 1.0});
//Set the caption background to semi-transparent
$('#gallery .caption').css({opacity: 0.7});
//Resize the width of the caption according to the image width
$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
//Get the caption of the first image from REL attribute and display it
$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
.animate({opacity: 0.7}, 400);
//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval('gallery()',6000);
}

function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));	
//Get next image caption
var caption = next.find('img').attr('rel');	
//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
//Set the opacity to 0 and height to 1px
$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });	
//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
//Display the content
$('#gallery .content').html(caption);
}

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.