Posts by Violet_82

ah ok fair enough thanks for that I won't even try then : - )
cheers

HI there, I have 2 spare sticks of RAM of 2 gb each that I would like to put in a dell studio 1535. Now the problem is that according to the crucial website http://www.crucial.com/store/mpartspecs.aspx?mtbpoid=1F7BCCE4A5CA7304 this dell laptop takes this memory:

Part Number: CT867777
Module Size: 4GB kit (2GBx2)
Package: 200-pin SODIMM
Feature: DDR2 PC2-6400
Specs: DDR2 PC2-6400 • CL=6 • Unbuffered • NON-ECC • DDR2-800 • 1.8V • 256Meg x 64 •

whereas I have two spares which are slightly different from what it should go in the dell http://www.crucial.com/store/mpartspecs.aspx?mtbpoid=2C225311A5CA7304:
Part Number: CT2180957
Module Size: 4GB kit (2GBx2)
Package: 204-pin SODIMM
Feature: DDR3 PC3-10600
Specs: DDR3 PC3-10600 • CL=9 • Unbuffered • NON-ECC • DDR3-1333 • 1.5V • 256Meg x 64 •

My question is, is it still ok to do it or do I risk some problem?
thanks

thanks for all your help aleMonteiro, much appreciated

floatingDiv, but if I want to move a div that has a relative position how do I do it? In a desktop browser I would use top, left, bottom and right but in a mobile screen, how do I bring a div up or down? I have a few positioned relative divs in here http://antobbo.webspace.virginmedia.com/petras/test/egypt.htm and in the mobile screen the main one - which contain the picture is locked at the bottom for some reason and there is no way I can move it from there, no matter what property I use and what margins I use. Also things like overlays don't seem to work on the mobile site. I had a look around but there seems to be nothing around about it.
I mean I appreciate what you said about floating and position absolute for mobile phones but these have no floating and no position absolute:

.overlay
	{

		display:none;
		background-color:black;
		position:fixed;
		opacity:0.75;
		filter:alpha(opacity=75); /* For IE8 and earlier */
		top:0;
		bottom:0;
		right:0;
		left:0;
		width:100%;
		z-index:100;

	} 
	
.full_images
	{
	
		display:none;
		background-color:black;
		position:fixed;
		width:700px;
		height:490px;	
		z-index:102;
		left:50%;
		top:50%;
		margin:-245px 0 0 -350px; 
	
	}
	
.image_div
	{
	
		border:1px solid transparent;
		width:660px;
		height:450px;
		margin:20px auto 0;
		z-index:103;
		/*no positioning so that I can centre the image*/
	}
	
.close_button
	{
		
		position:absolute;
		top:0;
		right:0;
		z-index = 104;
	
	}

...solved...my fault as usual, I had missed a $.
Now that's really odd though. I wrote var images = $("#" + image); rather than var $images = $("#" + image); and all the script crumbled to pieces. I thought that the $ symbol is optional when you declare a variable!

sorry that was one of the things I tried but nothing has happened:

var $full_images;
var $close_button;
var $overlay;

$(function(){
	$full_images = $(".full_images");
	$close_button = $(".close_button");
	$overlay = $(".overlay");
});

function change_images(image){
		var images = $("#" + image);
		
		$overlay.hide().show();
		$full_images.hide().show("slow");
		$images.hide().fadeIn(1000);
		$close_button.hide().show();
		
		$close_button.unbind('click').click(function(){
			$(this).hide();
			$images.fadeOut("fast");
			$full_images.hide("slow");
			$overlay.hide("slow");
			
		});
		


}

thanks for the example.
I had a go at applying your code to my own site but it doesn't seem to work.
here's the script (might be worth mentioning that it is stored in an external file):

var $full_images;
var $close_button;
var $overlay;

$(function(){
	$full_images = $(".full_images");
	$close_button = $(".close_button");
	$overlay = $(".overlay");
});

function change_images(image){
		var image = $("#" + image);
		
		$overlay.hide().show();
		$full_images.hide().show("slow");
		$image.hide().fadeIn(1000);
		$close_button.hide().show();
		
		$close_button.unbind('click').click(function(){
			$(this).hide();
			$image.fadeOut("fast");
			$full_images.hide("slow");
			$overlay.hide("slow");
			
		});
		


}

Here's the relevant html:

...
<script type = "text/javascript" src = "javascripts/main_pix.js"></script>
...
<div class = "main_categories">

					<div class = "thumbnail_1">
						<a href="#"><img style="border: 0pt none;" alt="" src="images/travel_page/travels_boxes_1.jpg" onClick = "change_images('image1')"></a>
					</div><!--END OF thumbnail_1 -->

					<div class = "thumbnail_2">
						<a href="#"><img style="border: 0pt none;" alt="" src="images/travel_page/travels_boxes_1.jpg" onClick = "change_images('image2')"></a>
					</div><!--END OF thumbnail_2 -->

					<div class = "thumbnail_3">
						<a href="#"><img style="border: 0pt none;" alt="" src="images/travel_page/travels_boxes_1.jpg" onClick = "change_images('image3')"></a>
					</div><!--END OF thumbnail_3 -->
...

<div class = "full_images">
						<div class = "image_div">
							<img src = "images/animal_full_11.jpg" alt = "" id = "image1" style="display:none">
							<img src = "images/animal_full_12.jpg" alt = "" id = "image2" style="display:none">
							<img src = "images/animal_full_13.jpg" alt = "" id = "image3" style="display:none">
						</div><!--END OF image_div -->
						<div class = "close_button">
							<a href="javascript:void(0);"><img src = "images/button_9.gif" alt = "" style="border:0"></a>
						</div><!-- END OF close_button -->
					</div><!-- END OF full_images -->

			</div><!--END OF main_categories -->
...

And finally the css:

...
.overlay
	{

		display:none;
		background-color:black;
		position:fixed;
		opacity:0.75;
		filter:alpha(opacity=75); /* For IE8 and earlier */
		top:0;
		bottom:0;
		right:0;
		left:0;
		width:100%;
		z-index:100;

	} …

Hi aleMonteiro, thanks for that.
A few questions about your code if I may ask, that is not clear to me.
That last bit:

$close_button.unbind('click').click(function() {
		$(this).hide();
		$image.fadeOut("fast");
		$box.hide("slow");
		$overlay.hide("slow");
	});

You have used the unbind method. I had a look at what that involves and I found that it is supposed to remove the handlers from the selector.
So that unbind method removes the click handler just from the $close_button doesn't it?
Also I will leave the thread open for a bit just in case I come across problems with that code
thanks

HI there, quick advice please.
I am developing a photography website for a client and I want him to be able to click on an image in a list of thumbnails and that will bring up the bigger version of the image clicked on. I have achieved this in my own website here already, but I was wondering if there is a better way to do it - I don't want to use a plugin or anything like that, I want to code it myself.
On my website I had a thumbnail:

<div class="thumbnail">
                        	<a href="javascript:void(0);" class="full_image"><img src="images/faith_thumb_1.jpg" alt="" style="border:0" onClick="change_image('big_image_1')"></a>                        </div><!-- END OF thumbnail 1-->

passing a big image <img src="images/faith_full_1.jpg" alt="" style="display:none" id="big_image_1"> as a parameter to the script:

function change_image(image)
		{
					$("#" + image).hide();
					$(".box").hide();
					$(".overlay").hide();

					$(".overlay").show();
					$(".box").show("slow");
					$("#" + image).fadeIn(1000);
					$(".close_button").show();


				$(".close_button").click(function() {
					$(this).hide();
					 $("#" + image).fadeOut("fast");
					$(".box").hide("slow");
					$(".overlay").hide("slow");
				});
		}

which then did all the rest (and I got quite a bit of help with this, thanks again!!).
Now I wonder, is there a better, more efficient and easier way to do this or is it better if I stick to that in my other website? I just thought I will ask before starting to code - I have only coded the overlay so far
thanks

Hi floatingDivs,
thanks again for that. Don't worry I understand your bluntness. Unfortunately I am not an expert in mobile css so I had no idea I had to remove the floats and the absolute positioning. I also didn't know that a different css can pull style from another one, ie the mobile's from the desktop's. I thought they were separate and each of them worked with the desktop and with a mobile device respectively.
I will give it a go as soon as I have a second and I will apply this to the main website without going through another test site. I might post again in this thread so I leave it open for a little while still.
I much appreciated all your help and the time you've spent on addressing my issues, I hope I haven't wasted any of your time.

It makes perfect sense floatingDiv, in fact the mobile css is the last one. The mobile css in general seems to behave oddly thought, whatever the order.
Let me explain. I mentioned earlier on that I am doing some tests: basically I am rewriting the whole home.htm page and adding one by one all the html elements and the styles in the css, just to see where the mistakes are, to see where the css is preventing opera mini to display the website correctly. Every change I make, I upload the css to the server and test in opera mini. It really is time consuming, to the point that I am thinking to myself "whatever, I don't care if opera mini doesn't diplay my site as it should".
Anyway, I got to this point http://antobbo.webspace.virginmedia.com/petras/mobile/testina.htm when the site looks a bit odd in the desktop version and quite well in opera mini. So I am trying to fix my desktop and when I style a bit more the #main_picture container in my normal css (containers.css) the layout of the site in opera mini breaks and everything gets resized. The thing is I haven't touched the mobile css, I have only added some code to the normal one, but somehow this is effecting the mobile css as well.
My head tag look like this:

<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<meta name="description" content="Digital photography">

		<title>Travel photography - Home</title>
		<link rel = "stylesheet" type = "text/css" href="css/containers.css"> …

ah sorry, 1 thing I think it deserves some attention, sorry I completely forgot.
I am doing some testing and apply your method to my pages, and I have noticed that it works fine only if there is no other css added to the page. So, take your example:

<!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">

<head>

  <meta http-equiv="Content-type" content="text/html; charset=us-ascii" />



  <title>test</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <style type="text/css">

    @media all and (max-width: 480px) {

      #main_picture { background:red; width: 90%; height: auto; border: 2px solid red; margin: 0 auto; }

      img { width: 100%; }     

    }

  </style>

</head>



<body>

  <div id="main_picture">

    <img src="http://antobbo.webspace.virginmedia.com/petras/home_0.jpg" />

  </div>

</body>

</html>

It works perfectly. But if say I add another css declaration in the code <link rel = "stylesheet" type = "text/css" href = "css/mobile.css"> , and I mean anywhere before or after the title tag, or before the viewport (I tried them all) everything stops working, in that opera resizes the picture which appears like the one in my original link. So it appears that adding something else in the head tags causes this behaviour in opera. Have you ever noticed that? Even if you add an inline style, that throws off the image, and everything resizes

Brill, thanks a lot for all your help, I will now try to apply all this to my site, and fingers crossed I should be able to adapt it to the mobile site
thanks

ah ok I see, it's because I saw the xhtml doctype. So to sum up, if I use html5 (whose doctype declaration is <!DOCTYPE html> ) it should work. What I seem to understand from all this thread (and thank you for that) is that essentially I can have a "normal" css for the desktop version and a mobile one using the @ rule.
I was also reading something about liquid layout today, so I wonder if that can help as well. I usually go for fixed width, but I suppose I can change the layout of the website in the @ rule from fixed width to liquid, that should work because the page should resize automatically to fit different screens I presume...

floatingDivs, thank you very much for all your help, much appreciated. I had a look at your media rule, everything is clear. Do you know of any resource I can have a look to read more about it?

I will try to apply that to my website then. One question only. You used xhtml, if I use html4 strict, would that work as well?

thanks a lot for that folatingDivs, unfortunately it didn't work though, the image is still resized. Ah I amended the code slightly, in the media rule it needs to be

img {
		width: 100%;
		}

because the image is not within the main div. I have also tried without variation anyway and it doesn't work I am afraid. Thanks for all the suggestions thought. It is very frustrating that the default behaviour of the browser cannot be changed

Hi dantinkakkar, sorry I was a bit thick!
I gave it a go but nothing has changed, the picture is still resized.
I have run a test. I created a very simple page and I added an image and a div: div on the top and image at the bottom. They have the very same size 700px x 450px, really simple code to start with:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<meta http-equiv="Content-Language" content="en">
		<meta name="description" content="Digital photography">
		<title>test</title>

	</head>

	<body>
		<div id = "main_picture" style ="width:700px; height:450px; border:3px solid BLACK; margin:0 auto;">
		</div>
		<p>
		<img src = "home_0.jpg" alt = " " class = "active">
		</p>
	</body>
</html>

you can view this code here: http://antobbo.webspace.virginmedia.com/petras/testina.htm.
Now let's view it in the opera mini emulator http://www.opera.com/developer/tools/mini/ and it still does it, the div keeps its size but the picture has been resized.
The reason why I run this test is because I wanted to make sure that there wasn't anything in my code that prevented your suggestions and floatingDivs to work. You never know, I might have written some dodgy code, but this seems to demonstrate that it is not the case.
So here are a few combinations I have tried:

1)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<meta http-equiv="Content-Language" content="en">
		<meta name="description" content="Digital photography">
		<title>test</title>
		<style>
		@media only screen …

Hi floatingDivs, thanks again for the suggestion. Your code has actually done something but the images are still the same size http://antobbo.webspace.virginmedia.com/petras/home.htm. The page now looks smaller, width-wise. I have attached 2 screenshots. The screenshot_last_code.jpg is the code with your last suggestion, the screenshot_last_code.jpg has your previous suggestion instead

@media only screen and (max-device-width: 480px){
#main_picture img { width: 100%; }}

This is the simulator I am using, in case you wonder http://www.opera.com/developer/tools/mini/ and I also test on my phone

@dantinkakkar, the predicament I am afraid it is always the same as you can see from the screenshots. The html at the moment has the width and height:

<div id = "main_picture">
			<img src = "images/homepage/home_0.jpg" alt = " " class = "active" style = "width:700px;height:450px">
			<img src = "images/homepage/home_1.jpg" alt = " " style = "width:700px;height:450px" >
			<img src = "images/homepage/home_2.jpg" alt = " " style = "width:700px;height:450px" >
		</div><!--END OF main_picture -->

thanks

Thanks a lot for that floatingDivs, but no joy I am afraid. Here's the link again just in case http://antobbo.webspace.virginmedia.com/petras/test/home.htm
I have tested it with the emulator and then on my phone just to be sure, and unfortunately it is always the same as before no difference.
Why would opera mini behave like that? I mean I understand the mobile issue to a point but the peculiar thing is that it is just opera mini, because, as I think I mentioned earlier on, the native browser - which I think is based on chrome - on my phone the page is perfect, even the script works!

hi folatingDivs will try that in a second thanks, but before doing that do I need to keep this

...
<style type="text/css">
@media only screen and (max-device-width: 480px){
#main_picture img {
width: 100%;
}
}
</style>
...

and keep the dimensions in the css

#main_picture img
	{
	
		position:absolute;
		z-index:1;
		width:700px;
		height:450px;
	
	}

and add your code in addition to them?

HI there, thanks for the suggestions.
@floatingDivs: I hope I did it correctly, here's how my head tag looks like now:

...
<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<meta http-equiv="Content-Language" content="en">
		<meta name="description" content="Digital photography">

		<link rel = "stylesheet" type = "text/css" href = "css/styles.css">
		<link rel = "stylesheet" type = "text/css" href = "css/containers.css">

		<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script type = "text/javascript">

			function changeImages(){

				var active_image = $("#main_picture .active");

				var next_image = ($("#main_picture .active").next().length > 0) ? $("#main_picture .active").next() : $("#main_picture img:first");

				next_image.css('z-index',2);

				active_image.fadeOut(1500,function(){

					active_image.css('z-index',1).show().removeClass('active');

					next_image.css('z-index',3).addClass('active');

				});

			}

$(document).ready(function(){

	setInterval('changeImages()',3000);
});


		</script>

		<title>Travel photography - Home</title>

		<style type="text/css">
				@media only screen and (max-device-width: 480px)
				{
				#main_picture img {width: 100%;}
				}
		</style>

	</head>
...

Also I have added the width and height to the css (I have also tried without) so that now I have

#main_picture img
	{
	
		position:absolute;
		z-index:1;
		width:700px;
		height:450px;
	
	}

But unfortunately it doesn't work. The picture is still resized, the script doesn't work and there is a big white space at the bottom, so unfortunately nothing has changed

@dantinkakkar Sorry I didn't quite get where to put that. Does media="handheld" need to go in one of the css I have already? like <link rel = "stylesheet" type = "text/css" media="handheld" href = "css/containers.css"> ?

If it still doesn't work, try using the default HTML attributes for image resizing

Do you mean adding width and height to the css?
cheers

Hi there, I am doing a website for a client and I am trying to get it to run on the major browsers, so I am testing on the usual ones + IE6 and also on a few mobile browsers. On my android phone, the website looks fine on the native browsers but Opera mini is not displaying the content as it should, and it seems to be the only browsers that does this. I have attached a picture of how opera mni renders the home page, the picture is somewhat resized if you compare it with the link above.
Now, in my original css I didn't have either width or height specified for the picture

#main_picture img
	{
	
		position:absolute;
		z-index:1;
	
	}

so I added them in and tested, but no joy, so I inserted the dimensions in the html - just one picture to try - but still no joy

<div id = "main_picture">
			<img src = "images/homepage/home_0.jpg" alt = " " class = "active" style = "width:700px;height:450px">
			<img src = "images/homepage/home_1.jpg" alt = " ">
			<img src = "images/homepage/home_2.jpg" alt = " ">
		</div><!--END OF main_picture -->

I would really like to get this website right in opera mini but I am a bit at loss as to what to do because I am not sure what it is that is broken in my css/html.
Oh, almost forgot, even the script doesn't work in opera mini for whatever reason.
I have …

ahhh! I have found the mistake. I have been through the code many times but I couldn't see where the problem was.

this line var next_image = ($("#main_picture").next().length > 0) ? $("#main_picture .active").next() : $("#main_picture img:first"); should have been var next_image = ($("#main_picture .active").next().length > 0) ? $("#main_picture .active").next() : $("#main_picture img:first"); I somehow skipped the .active class.

Hi Airshow thanks for that, crystal clear now : - )!

HI there, I am attempting a crossfade based on this but needless to say it is not working as nicely as it should. What I have done was to run through the code in the above example, understand it - or at least attempting to do so with a bit of help - and then applying to my website. SOmething obviously had to go wrong, what it is, well, hard to say, so I was hoping sb can help me to spot the error.
Here's the site I am working on. Now, first problem: have 3 images and the transition is being funny in that it only changes 1 image and then it quickly - without transition - goes back to the first one skipping the 3rd image altogether. I presume this is a problem with the script.
Second,in firefox, opera, IE and safari, I can see the 3 images stacked on the top of each other as they should be (they all have z-index 1 at the beginning except the first picture whic has z-index 3) but if I look at the site in chrome the 3 pictures are all displayed at the same time in different positions on the page (screeshot attached). This surely is a problem with the css although I can't quite figure out what it is.
One more thing: if I look at the local copy the css seems fine, in that I don't get any problem with …

Airshow, one question before I dive into the crossfade.
Take the previous code again, specifically the following bit:

...
      var $next = ($('#portfolio_cycler .active').next().length > 0) ? $('#portfolio_cycler .active').next() : $('#portfolio_cycler img:first');
...

basically the author says that this is to assign the next image to the variable next. If there is no other image, he assigns the first image to next. I am not quite sure how this happens though. From what I remember ? and : represents a sort of if statement. So that is to say that if the next element (in this case an image) with a class of active descendent of #portfolio_cycler is not the first image (>0) then the variable next is assigned the next image, otherwise it is assigned the first image. so, he has 4 images in his script, so say that we are at image 4 before the above line runs (therefore image 4 has a class active). When we say ($('#portfolio_cycler .active').next().length > 0 we are attempting to select a fifth image that in fact doesn't exist but how does the script know?! We are not in an array I don't think, so we can easily go out of bounds...or as usual I am missing sth obvious?! Why would the condition be false?
thanks

eheh, sorry, I had a week off, so I went abroad.
On a second thought, I will do a crossfade effect, leaving off the rest. I will open a separate thread for that, because surely I will need some help. I will follow what's on the website you mentioned and try to re-do it again
thanks

thanks Airshow,
I will keep going with the code trying to get it right - I will leave this thread open and post probably some more at some point hope you don't mind - and then I will give the crossfade a go, I really like the link you sent me, but probably in about a week, I am off on holiday now : - )!

Hi Airshow, thanks for the suggestion.
I have given it a go, but I have a few problems stills.
This is the new script I came up with:

<script type = "text/javascript">
		var imageList = new Array(
				"images/homepage/home_0.jpg",
				"images/homepage/home_1.jpg",
				"images/homepage/home_2.jpg");

				var frame = 0;


				function init(){
					setInterval("animate()",3000);

					}

				function animate(){

					$("#home_page_image").attr('src', 'imageList[frame]').fadeOut('slow');
					frame += 1;
					$("#home_page_image").attr('src', 'imageList[frame]').fadeIn('slow');

					if ( frame >= imageList.length ){

										frame = 0;

									}



			}
		</script>

I have replaced the selector and and use the .attr() method. Now, rather than the url of the picture I have used the array element with an index that should change and display the next picture (I even tried with the actual URL but it doesn't work), but it is not working the way I have envisage it would, here's the test link http://antobbo.webspace.virginmedia.com/petras/test/home.htm. In chrome the images don't display at all, in firefox only the first image home_0.jpg displays, the animation works but it is always the same picture. The thinking behind this was that this line $("#home_page_image").attr('src', 'imageList[frame]').fadeOut('slow'); would change the src attribute of the current image and insert the new url contained in the imageList[frame] and fade the image out. then increase the index by 1 and change again the src with the new url contained in the next imageList[fade] element $("#home_page_image").attr('src', 'imageList[frame]').fadeIn('slow'); and fade in the picture.
Somehow the frame variable is not increasing or something like that. I have tried to debug in firefox but it is almost impossible because …

Sorry I have run few tests, and here there is a slightly different version with fadeIn() and fadeOut() but still no joy it doesn't work:

<script type = "text/javascript">
		var imageList = new Array(
				"images/homepage/home_0.jpg",
				"images/homepage/home_1.jpg",
				"images/homepage/home_2.jpg");
		var frame = 0;
				function init(){
					setInterval("animate()", 2000);
				}

				function animate(){
					$('#' + imageList[frame]).fadeOut('fast', function(){

						frame++;
						if ( frame >= imageList.length ){

														frame = 0;

									}
						$('#' + imageList[frame]).fadeIn('fast');
					});



				}
		</script>

Hi there, I am a little stuck with a slideshow I am developing.
On this site http://antobbo.webspace.virginmedia.com/petras/home.htm the slideshow is working fine, it is a javascript slideshow:

<script type = "text/javascript">
		var imageList = new Array(
				"images/homepage/home_0.jpg",
				"images/homepage/home_1.jpg",
				"images/homepage/home_2.jpg");

				var frame = 0;
				var image;

				function init(){
					setInterval("animate()",1000);
					image = document.getElementById("home_page_image");

					}

				function animate(){

					frame += 1;

					if ( frame >= imageList.length ){

										frame = 0;

									}

					image.src = imageList[frame];

			}
		</script>

But then I thought to myself: let's add a bit of fading and I changed the script and inserted a bit of jquery but it is not working http://antobbo.webspace.virginmedia.com/petras/test/home.htm. I was wondering if somebody could help me to determine why this is not working. The code, I think, makes sense...but, I might be wrong : - )

<script type = "text/javascript">
		var imageList = new Array(
				"images/homepage/home_0.jpg",
				"images/homepage/home_1.jpg",
				"images/homepage/home_2.jpg");

				var frame = 0;


				function init(){
					setInterval("animate()",2000);

					}

				function animate(){

					$("#"+ imageList[frame]).hide('fast');
					frame += 1;

					if ( frame >= imageList.length ){

										frame = 0;

									}

					$("#" + imageList[frame]).show('fast');

			}
		</script>

Any idea at all? I thought it would have been straightforward.
thanks

Hi floatingDivs thanks for the detailed explanation, much clearer now. I will have a better look next time before I post, in case I forget to clear the float
thanks a lot
regards

Hi floatingDivs,
yes you're quite right you've enlightened me about it already many times, but it didn't occur to me that this time it had anything to do with it. In this case the elements floated are just the navigation .navigation and the nav bar .nav_bar and straight after them I have added a div clearing the floats. The picture container .main_picture is not floated, so I thought to myself that there was no float to clear, that's why it didn't occur to me to do that. And I am still puzzled as to why in this case clearing the floats is necessary. If you look at the html the floats have been cleared already, that's why I got confused I believe:

<div class = "navigation">
			<ul>
							<li><a href = "#">Home</a></li>
							<li><a href = "#">Travels</a></li>
							<li><a href = "#">Portfolio</a></li>
			</ul>

		</div><!--END OF navigation-->
		<div class = "clear">
		</div><!--END OF clear -->

		<div class = "nav_bar">
			<img src = "images/bar.jpg" alt = "">
		</div><!--END OF nav_bar-->

		<div class = "main_picture">
			<img src = "images/homepage/home_1.jpg" alt = "">
		</div><!--END OF main_picture -->

@lps: yes, good point, I didn't think of it!

Sorry to post again, but by investigating a bit more I have realized that the picture is shifted exactly 19px down. So, if I add this

.main_picture img
{
margin:-19px 0 0 0;
}

it actually works. However I feel that this is a somewhat lame attempt to fix, because I don't know whether this will work on a mobile device and in IE6 - can't test these at the moment - and also because I don't understand why the picture is shifted 19px in the first place.

Hi there, I am having a - I believe - peculiar and annoying problem. I have a div on my home page which is meant to contain a picture. Now when I insert the picture I don't seem to be able to align it to the div, it's a little shifted, here's the link to it http://antobbo.webspace.virginmedia.com/petras/test/home.htm
Now, I must admit I am a bit puzzled as to why this is happening. All I have is a div and a picture in it. You will noticed I added this style to the picture style = "vertical-align:bottom;" because while I was trying to understand why the picture doesn't fit in the div I came across this thread http://www.webmasterworld.com/forum83/5683.htm and I thought I would have given it a go. No joy unfortunately.
The containing div style is this:

.main_picture
	{	
                top:60px;
		position:relative;
		width:700px;
		height:450px;
		border:5px solid white;
		margin: 0 auto;
	}

the html is here:

<div class = "main_picture">
<img src = "images/homepage/home_1.jpg" alt = "" style = "vertical-align:bottom;">
</div><!--END OF main_picture -->

Now, does anybody have an idea why this is happening? I am very much interested in the reason really! it is really annoying because I don't have the foggest!
Any help appreciated as usual
thanks

Hi stbuchok,
thanks for the links, you're quite right most of the stuff is there. I had a good look and most of my questions are actually answered but I couldn't see anything about this

Take these 2 methods $("#target").bind("drop", changeTarget); $("#target").bind("dropout", resetTarget); :
I thought the bind() method takes an event and binds it to a function, but are those "drop" and "droppable" events?! If so where am I supposed to get their names from, I mean how do I know that they exist and they have that name,it's driving me crazy!

thanks

tqmd1, without looking at your code, have thought about using one of widgets available here http://jqueryui.com/themeroller/? I have started using this myself very recently and it seems very good, perhaps somebody who's got more experience with it will be able to tell you a bit more about it, and it has a very good data picker, all you need to do is to link to it, more infor here http://jqueryui.com/docs/Getting_Started
Then if you want to build the code yourself, that's a different matter : - )!

HI there, I am having a few problems understanding how drag and drop works in jquery.
Say I have this (which is taken from a text book): http://aharrisbooks.net/jad/chap_12/dragDrop.html
In the code you have

...
  //make all drag me elements draggable
      $(".dragMe").draggable();
      
      //set target as droppable
      $("#target").droppable();

      //bind events to target
      $("#target").bind("drop", changeTarget);
      $("#target").bind("dropout", resetTarget);


...

Now, draggable( ) and droppable() are all methods coming from a library in here http://jqueryui.com/download so that's ok but I don't quite understanding how the events are bound to the target.
Take these 2 methods $("#target").bind("drop", changeTarget); $("#target").bind("dropout", resetTarget); :
I thought the bind() method takes an event and binds it to a function, but are those "drop" and "droppable" events?! If so where am I supposed to get their names from, I mean how do I know that they exist and they have that name,it's driving me crazy!
I might as well say $("#target").bind("i_am_droppin_it", resetTarget); as far as I am concerned!
Also when creating the function changeTarget() which has this code

function changeTarget(event, ui){
      $("#target").addClass("ui-state-highlight")
      .html("Dropped ")
      .append(ui.draggable.text());
   } // end changeTarget

about the 2 parameters we pass to it, event and ui: "event" - or "e" I suppose depending on the preferences - effectively represents the event "drop" doesn't it? Whereas "ui" I assume is referring to the interface but where do I get ui.draggable.text() from? I mean how do I know that it even exist?
Could anybody shed a …

yes Airshow, that's much more logical. I guess it was coded differently because the author wanted to show another way of doing things.
Thanks for making things clearer!!

ahhhhh, thanks Airshow, that's much better! I have also run the code through Firebug (I know, I should have done it before posting this, sorry!:$) so I had a look at the code in action. I didn't realise checkBound() was working on the following iteration, I guess you're right, it is in an awkward position, so I moved it down at the end and it makes much more sense. I also had some problems understanding why checkBound() was set up like this

function checkBounds(){
  //bounce
  if (x > MAX_X){
    deltaX = -5;
  } // end if
  if (x < MIN_X){
    deltaX *= -1;
  } // end if
  if (y > MAX_Y){
    deltaY *= -1;
  } // end if
  if (y < MIN_Y){
    deltaY *= -1;
  } // end if
} // end function

I have now realized that when deltaX becomes -5, it stays -5 till it is changed back to +5 by this if (x < MIN_X){ deltaX *= -1; , whereas at the beginning I thought that deltaX becomes -5 only for 1 iteration...

Hi there, I am reading a javascript book and I got a little stuck when analysing one of the scripts built as test. This is the one I am talking about http://aharrisbooks.net/jad/chap_08/bounce.html
I went through it but I don’t seem to be able to understandexactly the way it works.
Here’s the code.
html:
view-source:http://aharrisbooks.net/jad/chap_08/bounce.html
movement.js:
http://aharrisbooks.net/jad/chap_08/movement.js
bounce.js
http://aharrisbooks.net/jad/chap_08/bounce.js

Let’s see if I understand it correctly.
The <body onload = "init()"> in the html file calls the init() function in bounce.js because if you duplicate a function, the browser interprets only the last one it reads and in fact there is another init() function in movement.js which the script skips.
So in bounce.js the function init() calls animate() is called once every 0.05 seconds. Animate() calls moveSprite(deltaX, deltaY) . This function is contained in movement.js, so let’s just do a few rounds.
DeltaX and DeltaY are respectively 5 and 3, so the first run is moveSprite(5, 3) . As per the code in movement.js before checkBounds() is called - incidentally checkBounds() will call the function in bounce.js and not the one in movement.js - x = 105 and y =103 so we change the left and top values the sprite moves to that position. So far so good.
Now let’s run the function one last time, to …

I just thought to finish this post off by saying that I did then talk again with dell, to discover that the technician don't know anything themselves...it turned out after a bit of investigation that my lappy gets only 8gb and not 16...

Hi caperjack, thanks for that, if that's the case maybe I can get DELL to replace my machine with another one with 4 real slots then, because the guy on the phone said that my lappy should have 4 and not 2. Also, it can take up to 16GB of RAM, but I haven't seen the 8gb sticks anywhere, only up to 4GB. I will see what he says tomorrow when he calls back

I am having a look at the site, the pictures are amazing, landscapes and wildlife, and i like the website too : - )

Hi caperjack, I had a look at the manual as well but no joy to be honest. I thought about the slot being on the other side but the stick doesn't fit in there. ANyway, I managed to speak to dell again, the guys asked me to take some pictures and email them to him. I have attached some of them:
1)memory_module_disconnected.jpg: it's one of the 2 memory modules I currently have;
2)memory_module_details.JPG the memory-module connector's details (I have removed the memory module from it to show the details): it is the only connector with a small pin that fits the hole in the memory module, so that's the only slot I can insert the ram (that's the slot where the RAM stick is currently inserted)
3)clips.jpg. the clips: if I have more than a slot shouldn't I have 2 pairs of clips and not one ?

Hi rubberman, done that already, it was actually the first thing I did before posting here, sorry I should have mentioned it, the guy had no idea, he said that from the spect it has 4 slots but it really looks like it has 2...

Hi there, I have a dell xps 17 (L702X) with 4gb RAM (2 sticks of 2gb each) and I want to add an extra 8GB (another 2 sticks of 4gb each) so to get to 12GB. Now, the laptop allegedly has 4 slots and at the moment only 2 are taken. I don't know much about hardware and about DIMM A,B, C and D, but the problem I am having is that I can only see 2 slots with 2 pairs of securing clips and both of them are already taken by the current sticks. Just below these two slots there is some space as to accomodate more memory but the slots are different and I tried to insert the memory modules I have already but it doesn't get in because the memory-module connector seems to have a slightly different shape (in that it doesnt have a pin.) Does it mean that the modules I need to buy are different from the ones I already have?
I went onto the crucial website and scanned my system to make sure that I had 4 slots and here's the report generated http://www.crucial.com/uk/systemscanner/viewscanbyid.aspx?id=356ECF4831D926C3&click=true, so judging from it I do have 4 slots but it looks like I have only two or at least, if they are 4, they have different memory-module connectors.
ANy idea please?
thanks

hi thanks all for that.
Perhaps it is a typesetting error as airshow said but it is recurrent...I tried as suggested to replace the quotes with angled brackets and the script doesn't work. I will ask directly to the author, I have no idea what's going on. The book by the way is called "javascript and ajax for dummies" by Andy Harris
thanks

Hi there, quick question. I am reading a book about javascript and the author doesn't seem to like quotes ("") at all, but he loves angled brackets (<<>>). what really strikes me is that it looks like he uses them instead of quotes. FOr example I would say: alert("Hello WOrld!"); and he instead goes alert(<<Hello World!>>); .
It is the first time I see angled brackets used instead of quotes,I am a bit confused, so I looked at Crockford's conventions but actually he doesn't say anything about that.
What do you guys think? Is it ok to use <<>> and "" interchangeably?
thanks

hiya, thanks for that, so I will have to pass the actual image to the function like you did, rather than the name of the picture. Or perhaps I could get the element by id in the function, that will do wouldn't it?
thanks

Hi stbuchok,
thanks for posting that code, I will give it a go. Can I ask you though, what was wrong with the script I posted? I mean, wqas I making some kind of mistake? The reason why I ask is that i just want to understand it better, that's all. I was following a javascript tutorial here http://www.trainingtools.com/online/javascript/index.htm so I simply redone what they have done. Perhaps I need a better tutorial?