afish674

Agree with everything said above ^^ I found that this code centres absolute divs though. #divname{position:absolute;left:0;right:0;margin-right:auto;margin-left:auto;}

Thats fine, I would tend to agree with you, but as someone who does web design as a hobby he may not be familar with PHP. Its just another way of doing it. I've recently had them cause issues by messing up doctype declarations. Learning PHP is on my to do list.

I changed the jQuery code to update only the attributes as you showed above and that fixed it! You seemed to be experiencing what I got, but mine was doing it all the time. Thanks for the the fix though! If I keep the jQuery over the image sprite solution, is it good practice to preload the images I'm using for my icon rollovers? If so how do I do that?

Tried clearing cache and tried it in Firefox, Chrome and IE. It still won't switch back to my first image. Maybe its to do with the HTML rather than the jQuery? My HTML code: <div id="socialICO"> <a href="<!--LinkURL-->" id="FB"><img src="img/facebook.png" width="32" height="32" alt="facebook icon" class="botMar"></a> <a href="<!--LinkURL-->" id="twitter"><img src="img/twitter.png" width="32" height="32" alt="twitter icon" class="botMar"></a> <a href="<!--LinkURL-->" id="LIn"><img src="img/linkedin.png" width="32" height="32" alt="linked in icon"></a> <script type="text/javascript" src="js/hover.js"></script> </div> I wonder if there is a better way of doing it?

I've written a bit of code to swap two images on a hover. $(document).ready(function hover(){$('#FB').hover(function() { $(this).html('<img src="img/facebookHOV.png" width="32" height="32" alt="facebook icon hover" class="botMar">');}, function(){ $(this).html('<img src="img/facebook.png" width="32" height="32" alt="facebook icon" class="botMar">');});}); It changes to the hovered image fine, but its not firing the second function to swap it back to the first image again. I don't understand why? The HTML that exists before a hover event is: <img src="img/facebook.png" width="32" height="32" alt="facebook icon" class="botMar">

Think I've solved it. I changed the stork so that it was absolutely positioned instead of relatively positioned and made the parent container relatively positioned. That made it consistant between browsers. Then I just lined them up by adjusting the margins.

Hi, I'm trying to make a content region that updates when a link is clicked from a menu. The old content will fade out and the new content will fade in. The code I have (adapted from a book I have) is as follows: $(document).ready(function(){$("#Tes2, #Tes3, #Tes4, #Tes5").hide().addClass("hidden");$("#Tes1").addClass("visible"); $("#clients ul").click(function(event){ target = $(event.target); /*target.addClass("bold"); if(target.hasClass("bold")){ .removeClass("bold") .addClass("txtNorm") }*/ if (target.is("a")){ event.preventDefault(); if( $(target.attr("href")).hasClass("hidden") ){ $(".visible").removeClass("visible") .addClass("hidden") .fadeOut(1000); $(target.attr("href")) .removeClass("hidden") .addClass("visible") .fadeIn(1000); }; };});}); I'm having a few problems. Once you have navigated off of the first link (#Tes1) then you can't navigate back to it again. I'd like to add a bold text class to the link that is currently being viewed. The first line of the commented out code does this fine, but it adds it to every other link that is clicked too. I only want the current one. The code underneath this I thought would check for the bold class then remove it, but that doesn't work. Any suggestions really appreciated! Thank you!

Thanks dsonesuk, it appears that for some reason the Dreamweaver template (which uses commented code to define it's boundaries) had wrapped around the doctype declaration instead of being inside it which caused IE to mess up. There is still a layout issue however. On this page http://dl.dropbox.com/u/13032629/MumMatters%28HTML5%29/index-mirror.html(which I used as the basis for my template master) the nav bar is incorrectly positioned, and causes the header to expand which in turn makes the page scroll as well. Why is this happening? Works fine in all other browsers. Thanks again.

If you use Dreamweaver and plan to update the site yourself you can create a Dreamweaver template from a master page and convert it to a template. You can then drag it from the assets panel onto a blank document and voila, you just change the content in an area you designate for content. The rest of the page is locked from editing. If you change the main template design then it will update all the other pages too without affecting content. http://webdesign.about.com/od/dreamweaverhowtos/ig/Create-a-Dreamweaver-Template/

Hi I have actually posted this before, but I'm not sure I was specific enough with my question so I didn't get any replies. Internet explorer (ver 9 and presumably earlier) completely ruins my layout. Whereas its fine in all other browsers. I can't for the life of me work out what it is. Any help massively appreciated as I'm well and truelly stuck. Link:http://dl.dropbox.com/u/13032629/MumMatters%28HTML5%29/testimonials/testimonials.html Thank you!

Hi guys, I'm having some issues with the site I'm building. Mainly in IE but also the Webkit browsers. Site link: http://dl.dropbox.co...dex-mirror.htmlIssues noticed: IE Not loading Google Fonts API (Weirdly on my computer it is displaying an API font I used for another build even after clearing the browser cache and history!?) Header is increased in size, messes up alignment of nav bar and makes page scroll more. Crashes loading “active x content” Chrome / Safari Horrible font rendering (Also in Opera but not nearly as bad) Border around photo cuts off at the corners All browsers - very slow load time on local preview (though it did seem okay on the dropbox link I used so maybe its my computer) I used the HTML5 boilerplate as the basis for this site. (http://html5boilerplate.com/) I appreciate that this is quite a lot of issues, the main one is the layout and fonts being messed up in IE. I've used the Google fonts API with IE9 before and had no problems, It just doesn't seem to like this font. I did wonder about trying to find the font and using @fontface rule instead, might help IE but I guess it wouldn't make any difference to the horrific rendering by webkit browsers? Thanks again in advance for your help. Edit:It seems that in IE the page layout looks okay until you "allow active x content" then it messes up.

Thank you both for your suggestions. I went with dsoneuk's and it worked great! I just wondered how did you get to 130px padding for the #main div? Was it just an abitrary number that looked okay or was there some maths involved? I ask because since I posted this, I've changed the layout around a bit and I had to adjust your solution (because the header and footer changed size) I just played around with the #main div padding until it looked right rather than working it out. Thanks again guys, massively helpful!

Thanks, but thats the one I'm following. I've used it before with no problems but this time its causing my page to need to scroll. I just can't work out what it is about my layout thats making it do that. :Sad:

Hi, I'm trying to user a sticky footer on my page. At the moment, even with no content you have to scroll down to see the footer, rather than it being stuck to the bottom of the page. I'm a bit stumped as to why this is happening? Link to layout: http://dl.dropbox.com/u/13032629/MumMatters%28HTML5%29/index.html

Ahh, thank you so much! Having looked through the jQuery documentation, I found that the .html() method is indeed more appropriate to what I am trying to do. Works perfectly now! Awesome.

Good call on the </button>. It didn't make any difference, but I hadn't spotted it. I think it not wrapping was due to the collapsing div bug. I applied the same rules as I did to my other button (that works) and it was okay then. Basically I have a form with a submit button. When this is clicked theres a few calculations based on dates performed (the form collects date info). The #form div is then hidden and the #yourVersion div displayed. The results are shown in the yourVersion div using prepend. Theres a button underneath these results (#again) that when clicked hides the results and shows the form again (so you can enter different dates). If you click the #again button (having already submitted one set of results) it adds the second set under the first set in the #yourVersion div. If you press the #again button again, fill in the form a 3rd time and then press submit, the first two sets of results are displayed with the 3rd underneath, and so on. I only want it to display the last set of results. I hope that makes sense? Thanks for your help.

In the code below #yourVersion relates to an empty div with that ID. //Previous code..$('#yourVersion') .prepend( "<h1>Test:</h1>"+"<p>"+"<strong>"+name+"</strong>"+": <strong>Version</strong>"+" "+year+"."+month+"."+day+"</p>"+"<input type='button' id='again' class='btn' value='Again?'></button>"); $('#again').click(function(){ $('#yourVersion').hide(); $('#form').show(); }); Two questions: Why does the button created in the prepend method not sit inside the #yourVersion div? How do I stop another copy of whats included in the prepend method being created everytime I press the "Again" button to go back to my form and then submit it again? I tried: if (!'#again'){$('#again').click(function(){ $('#yourVersion').hide(); $('#form').show(); });]; But this stopped the "again" button working completly. Thanks!

Thanks!

I have an array that shows culminatively the number of days in a year. Jan the first starts with 0 and then Feb 1st starts with 31 etc. var months = new Array(); months[0]=0; months[1]=31; months[2]=59; months[3]=90; months[4]=120; months[5]=151; months[6]=181; months[7]=212; months[8]=243; months[9]=273; months[10]=304; months[11]=334; I want to change this for a leap year so that everything after Feb (array element 2 onwards) has +1 added to their values. I could do this via the splice method: months.splice(2,1,60);months.splice(3,1,91)//etc.. But this seems long winded, is there a quicker way? Like putting "months.splice(2,10,value+1);" or something similar? Thanks!

Ah I see, I'm not actually at the stage where I need to do this yet, I'm just planning ahead. I'll use that approach though. Thanks. I wasn't actually going to use the document write function, it was just a means of doing something with data held by the variable in the example. Thank you

Do I need to assign a value to userBday whilst declaring it outside of the function? If I declare it as below then it doesn't work, if I change it to 'var userBday = ""' then I get a blank string. var userBday; $("#submit").click(function() { userBday = $("#bDay").val();}); var bDaySplit = userBday.split("-");var birthDay = bDaySplit[2];var birthMonth = bDaySplit[1];var birthYear = bDaySplit[0]; What I want to do is have this function get the value from the date picker box (#bDay) when the #submit button is clicked. Then outside of this function have it split the date up so I can access the day month and year.

Thanks for the reply, That didn't work though. I get this error in firebug after I try to split the data: userBday is not definedvar bDaySplit = userBday.split("-");

I have a variable (userBday) within a function which I want to use globally, how can I do this? $("#submit").click(function() { var userBday = $("#bDay").val();}); At the moment I've just moved the closing bracket to the end of the script and put everything that I want to happen after this function within it. This doesn't seem like the right way though! Thanks

I have quite a long script which computes various things and then outputs some numbers. I want to make a function at the end of the script that uses these numbers. However, I want it so that this function can be used stand alone, without the rest of the script. Therefore using a variable to hold the final outputted numbers wouldn't work, because it would lose reference to the outputted numbers if moved away from the rest of the script. I wondered if there is a way to change variables into integers to get around this? Example: //Variables outputted from rest of scriptvar x = 3;var y = 7;//Convert "x" and "y" into 3 and 7function add(){var answer = 3+7;document.write(answer);} Obviously the variables x and y in this example will have been extracted from the previous parts of the script and won't always be the same, otherwise you'd just swap them with 3 and 7. The reason for me wanting to do this, is that I want users to be able to embed this function into their own web pages, but I don't want the long script beforehand. The only relevent bit would be the final function. Thanks for your help!

Thanks for your help guys!