lostprophetpunk

In the future I plan to make use of css sprites, to lessen the requests that the page has to make...therefore helping the page to load faster.

Just whip it in <style type="text/css">...</style> in the head section of the webpage.

Put this in your CSS file or code... .txtarea { font-family: arial; } Then simply add the class to your textarea html... <textarea cols="50" rows="4" name="inputDesc" value="" class="txtarea"></textarea> That should work fine.

Thanks. I also want to thank you for the time you have put in to help me solve the problem.

Whereabouts did you change it to display:none...as I cannot see it on the test page anywhere.

Tried both of the bits of code you posted, they don't seem to work. Looked at your test page and it appears the problem is occuring there as well. As when you first load the page, it will load the picture of first slide as well as the title and caption. However, it will then display the link for what is the last slide, instead of the first. Such as the first link should be "http://drewcasson.co.uk/watch/?film=vtpt1", whereas...if you hover over it is displays the targeting link of the last slide which is "http://drewcasson.co.uk/watch/?film=rwc".

It's a one page website design, it's all meant to be on one page...

Drewcasson.co.uk

The example works fine, but when I place the exact code into my website...so it's exactly like the example...the problem persists rather than working smoothly.

Heya there, I have recently designed and coded a website for a friend. Drewcasson.co.uk If I could get your thoughts, that would be great.

But I added that in for the fix...which is why I posted about the problem persisting, rather than thanking you for solving the problem.

I thank you for the help. However, I have looked several times at the code on your example, and the code on the website I am making for my friend...it is exactly the same... The problem still persists though. I just don't know what's causing it.

The reason why it is not setting to full opacity is due to the fact the the containing div (div.opaque) is set to a lowered alpha opacity. This makes the opacity of the content within that div the same as the divs opacity setting, no matter what you set the opacity to. A simple fix could be to make a 1px image at the opacity you wish to use, and apply it as the background.

Not a bad job there. Colours are a bit clashing though. Nice work on the design and function of the website. However there are a couple of things I would like to mention... <div id="errorie6" class="return hidden"> Uh-oh. Looks like you’re using an outdated, unsecure, or generally web-developer-headache-inducing browser. You’re going to miss out on some features of this website.<br /> <br /> That’s okay. <a href="http://www.getfirefox.com">Get Firefox</a> to solve that problem. </div> That is a bit harsh to some users. Part of the users who will view your site will still be using IE6 at the moment. I know it's annoying but as a web developer (in which you mention design is your forté) you should be able to make the site compatible for all browsers. Also, there are other browsers out there other than 'Firefox', such as Google Chrome, Opera and Safari in which users may be interested in. On a lighter note, the typography of the website could be improved. Use a different font for headings and a different font for the main body of text on the page, to make it more appealing to users. Anyway, keep up the good work.

Hello there, I have been working on a website for a friend, and managed to implement a jquery slideshow into my design. However, there is a problem with the slideshow... When the slideshow first starts, it takes the image and information from the first slide...but displays the link for the last part in the slideshow. This means it shows the first slides image twice, but only displays the correct link once. This is the jquery involved... $(document).ready(function() { //Execute the slideShow, set 6 seconds for each images slideShow(5000); }); function slideShow(speed) { //append a LI item to the UL list for displaying caption $('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>'); //Set the opacity of all images to 0 $('ul.slideshow li').css({opacity: 0.0}); //Get the first image and display it (set it to full opacity) $('ul.slideshow li:first').css({opacity: 1.0}); //Get the caption of the first image from REL attribute and display it $('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title')); $('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt')); //Display the caption $('#slideshow-caption').css({opacity: 0.7, bottom:0}); //Call the gallery function to run the slideshow var timer = setInterval('gallery()',speed); //pause the slideshow on mouse over $('ul.slideshow').hover( function () { clearInterval(timer); }, function () { timer = setInterval('gallery()',speed); } ); } function gallery() { //if no IMGs have the show class, grab the first image var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li: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().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first')); //Get next image caption var title = next.find('img').attr('title'); var desc = next.find('img').attr('alt'); //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 caption first, and then set and display the caption $('#slideshow-caption').animate({bottom:-70}, 300, function () { //Display the content $('#slideshow-caption h3').html(title); $('#slideshow-caption p').html(desc); $('#slideshow-caption').animate({bottom:0}, 500); }); //Hide the current image current.animate({opacity: 0.0}, 1000).removeClass('show'); } This is the html involved... <ul class="slideshow" style="float: right;"> <li> <a href="watch/?film=vtpt1" title="Watch VT: Veneficus Terminus" target="_blank"><img src="images/film1.png" title="VT: Part 1" alt="A backstreet wand battle inspired by the potter movies" /></a> </li> <li> <a href="watch/?film=h1n1" title="Watch H1N1" target="_blank"><img src="images/film2.png" title="H1N1" alt="Five guys, one house and a shit load of zombies!" /></a> </li> <li> <a href="watch/?film=whit" title="Watch What Happens in Texas" target="_blank"><img src="images/film3.png" title="What Happens in Texas" alt="A gory intro scene inspired by the Texas Chainsaw Massacre" /></a> </li> <li> <a href="watch/?film=rwc" title="Watch Royale with Cheese" target="_blank"><img src="images/film4.png" title="Royale With Cheese" alt="Tarintino inspired short about two assassins on the job" /></a> </li> </ul> If anyone could help, thanks in advance.