Drongo_III

Hi Guys Simple question, and probably a simple answer if you know how... I'm trying to pass a variable to the jquery animate function. So lets say I have var theSide = 'marginLeft'; $('#animDiv').animate({theSide: 400}, 400); Putting the variable in the animation, instead of actually writing marginLeft, simply means the animation doesn't work :/ So two questions: [*]Why doesn't it work? [*]What should i do to get it working? Really want to understand this better! Thanks, Drongo

Would it be too simple to set a cookie ?

It just feels 'cleaner' to put it in an array and have a single div that gets populated...but i see what yer saying. Didn't think google indexed hidden content anyway so not sure it makes much difference.

I wasn't actually intending to use ajax because there are so few cars this seemed like a lot of unnecessary contact with the server. Because there are only a dozen cars the idea was to build a javascript array of the cars (via php) when the page loads. Then when the user clicks on a car listing the popup would be populated with the relevant car information from the javascript array. Perhaps that's a bad way of doing it? The idea was to keep the user on the listings page so they can easily bounce between cars without having to go back and forth. But after considering the above perhaps I'll still run with this method but adapt it so that when the car listings are first created (via the admin area) I'll also generate a page for each car. Then when i generate the list of cars i'll make sure it generates a link to those car pages but that will be suppressed. Based on what i understand from above if do that google will still be able to follow the car links to each individual page but users will get the overlay instead of being directed to a separate page. This seems like a win win?

Hi Mate That's very clever indeed So the idea there is that search engines will see the link and therefore visit the car page, as would users without js, and then user's with js could view the pop up? Genius that!

I wouldn't worry too much mate. As above, if your cookie is absolutely necessary to the working of your site (like session cookies to login etc) then you don't need to seek approval. Things like Google Analytics etc. present a much more grey area but seeking approval for this type of cookie is totally impractical and ICO have said themselves that these types of cookies would very low down the list of priority infringments. If you run like a government website, or you capture info that is going to be used to advertise cross-site then you definitely need to declare and seek approval. Otherwise it's pretty much a case of watch, wait and see how things go. Currently very few sites seek approval.

I learnt a ton from watching this guy on Youtube. He starts with the absolute basics and builds to more complex stuff. Honestly one of the best tutorials

Mmm hardcore but he probably should have just had DIV written on his forehead... if yer british you'll get that

Hi Guys I'm in the planning phase of a website for a client. They sell cars - but only up to around a dozen at any one time. I had planned to simply list all the cars on a listings page and then use a jquery overlay to display more information about a car when the user clicks on a listing (it was going to be quite snazzy ). But as the client's market is so competative, and they need every SEO edge they can get, so do you think it would be bettter to display the car details on a page instead? This way they'll get the seo benefit of regularly refreshed content, as the listings change, and there might be the potential to drop key words and phrases into the car descriptions - which would now be spiderable. Keeping in mind that a car listing is likely to be present anywhere between a few days to a few weeks, do you think it would be a better option to list the cars on a page?

Not sure if you solved this by now but it doesn't need to be very complicated. Wrap your popup element in a new div. Give this div position:relative. This is so you can position your anchor tag (coming next). Then create an anchor tag and style it as a block and set the background image to your png. Let's assume you apply a class to this element to acheive the styling. And lets assume the calss is 'closeButton' Then you just need some simple jquqery $(".closeButton").click(function(){ $('#ID_of_popup_container').fadeOut('fast'); });

Thanks smoseley! I've learned lots today Exactly. It will create another instance of "int" in local scope and use that one instead of the global one. Yes, it's a best practice to declare your variables, but once you've declared it in global scope, you don't have to declare it again in functions. That'll just create a new address in memory for the local var.

Hi Smoseley! You're a genius. Works perfectly now. Out of interest why did you say . What is the effect of using the var declaration? Does it remake the variable rather than simply updating it? I thought using var infront of variables was sort of 'best practice'. Many thanks, A Happy Drongo

Hi Guys I'm making a new jquery scrolling banner element. It's very simple at the moment but will be made more complex. To get the basics right I have a script for the banner animation, and then two buttons for 'start' and 'stop'. The animation begins on page load then if i click the "stop" button it calls clearInterval to stop the animation. When I click 'start' button it calls setInterval again to restart. This bit works. However if i click stop, then start then click on stop again nothing happens and the animation just carries on. I am guessing perhaps I am not properly understanding how JS is setting the ID for the new Interval. So when I try to stop the interval the second time it's targeting something that has already been stopped. But I don't know how to do it differently. Can anyone see where I am going wrong? This is the JS <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ // Start the banner animation on load var int = setInterval("sliding()", 3000); // The function to stop the animation $('#stopInterval').click(function(){ window.clearInterval(int); }); // The function that restarts the animation after it stopped $('#restartInterval').click(function(){ var int = setInterval("sliding()", 3000); }); }); // The animation function function sliding() { $("#innerContainer li:first").animate({width:0}, 1000, function(){ $("ul li:first").insertAfter($("ul li:last")); $("ul li:last").css({width: 200}); }); } </script>

Hi mate Nice job - looks like you may have cracked it but... What i usually do to stop the float is to pop in an empty div above wherever you want the float to stop and give it a style of "clear: both;". That then stops the content floating either left or right. Hope that helps!

Presumably within your loop when you generate the forms you generate them with a separate submit button? If so, there shouldn't be an issue where all forms get submitted. If they are all part of the same form however then you might want to simply run some checks on submission to check for empty fields - discarding them if they're empty.

Just using straight MD5 to hash your passwords would never be very secure. You should really use MD5, Sha1 and salt the password before you store it. That's generally the preferred route. Google Salting password in php on google and it'll return loads of guides. Drongo

haha thanks for the commentary Yes. No.

You need to put float:left on the div containing the form. That should wrap the content below around it. Failing that. Put position: relative; on the main container div and then use absolute positioning on the arrow Hope that helps

So if i understand this right you want to house all your pages in one html file and selectively display the content depending on what the user clicks? I wouldnt really recommend doing that but... You could do it with php by adding a query string to your links for each page - i.e. <a href="yourScript?page=1">Page One</a> Then you could have some php that would checks the query string and echos the content accordingly. Something like: <?php $page = $_GET['page']; if($page == 1){ echo "HTML CONTENT FOR PAGE ONE"; //or better still hold the content elsewhere and include it } ?> This would probably be preferable to using jquery because you'd have to hide the divs so they won't get spidered by search engines. Hope that helps a bit...

You want to put a background image on the profile image?? Maybe i've totally misunderstood. You'd be better off making the parent div position:relative, then add absolute positioning to the profile pic and add the "user online" png. Then set the z-index of "user online" png to a higher value than the profile pic - that way it'll sit above the profile pic. But to my knowledge you can't add a background image to an image...err if that's what you were trying to do in the first place...which you probably werent hehe.

This is just a CSS hover. So if you give your image an id of "image1" then you can add a style like: #image1:hover {width: 75px; height: 75px;} Hope that helps Definitely not done with php tho

Hello Your problem looks to be on your form. You have named the field "passsword" - note the incorrect spelling of password (you have added three S's). The php script is then looking for 'password' - with the correct spelling. This is why you are getting undefined index. Your form is posting "passsword" but your php script is looking for "password" in the post array. Hope that fixes it! Drongo

I seem to have a solution now - i.e. use animate() and change the opacity to 0, which seems to work cross browser. Still intersted to know whether i was doing something wrong in using fadeout on images or whether it's a chrome bug though... Thanks, Drongo

Hi Guys I am trying to use the jquery fadeOut() function on images as part of a slideshow. The only issue is that chrome refuses to fadeout any image. I was wondering if: a) i am doing something wrong? b) this is a bug in chrome, or chrome doesn't allow images to be faded and instead require perhaps opacity change? The stripped back code is as follows: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style> div {border: 10px solid #000; width: 380px; height: 128px; margin-bottom: 10px;} #special {float: left; margin-left: 30px;} #img_container {position: relative;} #img_container img {position: absolute; left: 0px; top: 0px;} .showme {z-index: 50; display: block;} .hideme {z-index:1;} </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".showme").fadeOut(); }); </script> </head> <body> <div id="img_container"> <img src="images/picture0.jpg" class="showme" id="tester" /> <img src="images/picture1.jpg" class="eee"/> <img src="images/picture2.jpg" class="rfffgg" /> </div> </body> </html>

Ha! easy when you know how. Thanks guys!