Hey Guys
Just need a little help. I am trying to implement this script here:
http://inspectelement.com/tutorials/animate-a-contact-us-slide-out-area-using-jquery/
And it doesn’t work on my site here:
http://downingwebdesign.com/notworkingcontact/
Can someone assist me? It displays about half way down the page and I wan’t it at the top and not interfering with the other parts of the site!
In your HTML, can you move your contact area so that it comes before the header?
Right, that worked, Kinda. Now the other area of my website which works at
www.downingwebdesign.com
doesn’t work at
www.downingwebdesign.com/notworkingcontact
If this can be sorted then it would be great!
Doesn’t work? If it’s the carousel you’re talking about then I don’t see that working on either link.
Is there something else that works at one, and doesn’t at the other?
No no, the layout of the page in /notworkingcontact is different to the layout of the page at downingwebdesign.com. After you told me to put the HTML code for the Contact Us thing in the header of the page, it went up to the top and is positioned where it should be, but it seems to be interfering with the CSS of the page because the layout is now, not working.
You are becoming confused in regards to the meaning of “header”.
It is not the Head section (<head>) of your HTML page that is meant. What I mean is in reference to the Header section (<div id=“header”>) of your page.
It is invalid to place body content within the head section.
Okay so I placed it like this, I think this is what you meant?
<link rel="stylesheet" href="contact.css"/>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script src="contact.js" type="text/javascript"></script>
</head>
<body>
<!-- Contact Us -->
<div id="contactArea">
<form>
<div id="info">
<label for="author">Name</label>
<input type="text" name="author" id="author" value="" size="22" tabindex="1" class="rounded" aria-required='true' />
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" size="22" tabindex="2" class="rounded" aria-required='true' />
<label for="url">Website</label>
<input type="text" name="url" id="url" value="" size="22" tabindex="3" class="rounded" />
</div>
<div id="message">
<label for="comment">Your Message</label>
<textarea name="comment" id="comment" cols="2" rows="2" tabindex="4" class="rounded"></textarea>
<br/><br/>Please only submit once. Your message will be submitted with no confirmation!
<input name="submit" type="submit" id="submit" class="rounded" tabindex="5" value="Submit" />
</div>
</form>
</div>
<div id="container">
<div id="header" class="container"></div>
<a class="contact" href="#">Contact Us</a>
</div>
<!-- Contact Us--!>
<!-- Header -->
<div id="header">
<div class="shell">
<div class="cl"> </div>
But there are still layout errors on the page?
From the code that you posted, I see that you now have duplicates of header information.
What you need to achieve is to have both the contact section and the header section contained within the container.
Instead of continuing to work this, an alternative approach is to leave the code as it began before changes were made, and to use CSS to set the contact section to be absolutely positioned to the top, in reference to the container. That might be easier for you to achieve that what we’re currently seeing here.
I don’t understand what you mean? If I message you my files would you mind showing me how this script would be implemented? I’m still learning even after 5 years and this is the first time putting 2 scripts into one site!
With the rearranging of the HTML content, what I mean is this:
<div id="container">
<div id="contactArea">
...
</div>
<div id="header">
...
</div>
<!-- other sections here -->
</div>
So from what i’m thinking you are advising something like this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Downing Web Design - Product Portfolio</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<!--[if lte IE 6]><link rel="stylesheet" href="css/ie6.css" type="text/css" media="all" /><![endif]-->
<script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
scroll: 1,
animation: "slow",
wrap: "both"
});
});
</script>
</head>
<body>
<!-- Contact Us -->
<div id="contactArea">
<form action="contact.php" method="post">
<div id="info">
<label for="author">Name</label>
<input type="text" name="name" id="name" value="" size="22" tabindex="1" class="rounded" aria-required='true' />
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" size="22" tabindex="2" class="rounded" aria-required='true' />
<label for="url">Website</label>
<input type="text" name="url" id="url" value="" size="22" tabindex="3" class="rounded" />
</div>
<div id="message">
<label for="comment">Your Message</label>
<textarea name="comment" id="comment" cols="2" rows="2" tabindex="4" class="rounded"></textarea>
<br/><br/>Please only submit once. Your message will be submitted with no confirmation!
<input name="submit" type="submit" id="submit" class="rounded" tabindex="5" value="Submit" />
</div>
</form>
</div>
<div id="container">
<div id="header" class="container"></div>
<a class="contact" href="#">Contact Us</a>
</div>
<!-- Contact Us--!>
<!-- Header -->
<div id="header">
<link rel="stylesheet" href="contact.css"/>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script src="contact.js" type="text/javascript"></script>
<div class="shell">
<div class="cl"> </div>
<!-- Logo -->
<div id="logo-cnt">
<h1 id="logo">Downing Web Design</h1>
<h2 id="slogan">Adam Downing's Web Portfolio</h2>
</div>
<!-- End Logo -->
<div id="status">
<p class="available">Call Me: <strong><a href="skype:+447801233070">07801233070</strong></p>
</div>
<div class="cl"> </div>
<!-- Carousel -->
<div id="slider">
<ul id="mycarousel">
<li>
<div class="img-cnt">
<a href="#"><img src="css/images/portfolio-item-1.gif" alt="" /> </a>
</div>
</li>
</li>
</ul>
</div>
<!-- End Carousel -->
</div>
</div>
<!-- End Header -->
<!-- Main -->
<div id="main">
<div class="shell">
<!-- Article -->
<div class="article">
<h2>About Me</h2>
<p>I'm a College student studying Business Studies Level 3, and have been interested in web design for the past 5 years. I have developed my skills into HTML, CSS and basic PHP. I ensure that the websites I create are displayed on the portfolio and are to the best of my standard. Recenlty, I have decided to sell my skills in the creation of websites for other people.</p>
</div>
<!-- End Article -->
<!-- Gallery -->
<div class="gallery">
<div class="cl"> </div>
<h2 class="left">Product Portfolio</h2>
<div class="cl"> </div>
<div class="cl"> </div>
<div class="portfolio-item">
<a href="/allroads"><img src="css/images/port-1.gif" alt="" /></a>
<a href="/allroads">All Roads Driving School</a>
</div>
<div class="cl"> </div>
</div>
<!-- End Gallery -->
</div>
</div>
<!-- End Main -->
<div id="footer">
<p>© <a href="http://www.downingwebdesigns.com/">DowningWebDesign</a></p>
</div>
</body>
</html>
If I am doing it wrong can you please show me via copy/paste of the code into a [*code] tag? That would be wonderful! Or did you want me to put the contact us part with in the div header?
I cannot at the moment. It’s after midnight and it looks like this might take some time to resolve.
Hopefully someone else can pick this up though to give you a hand.
Oh okay. Thanks anyways.
If I made a donation would this help your tiredness? I kinda need this portfolio sorted ASAP so driving instructor can view his website.
On a sidenote, if anyone can correct my code it would be great! The code is above for you to look at. Going to take Dog for a walk and then I will check this thread when I get back.
As it’s been resolved that this is not a scripting issue, you can now take your problem over to the HTML forum, or the CSS forum, where there will be many people there who can help you with either the layout of your code or the presentation of your site.