Posts by Violet_82

I think I painfully get there, although I want to read the essay about the javascript conventions and possibly tidy up the code a little as it was suggested to me.
script:

<script type="text/javascript">

$(function(){

$(".run_sequence_button").click(function(){

var image_position_y = 391;



while(image_position_y < 5474)



	{



			$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);

			image_position_y+=391;



	}





	image_position_y-=391;

	$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);

	image_position_y-=391;

	$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);

	image_position_y-=391;

	$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);

	image_position_y-=391;

	$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);

	image_position_y-=391;

	$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);

	image_position_y-=391;

	$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);

	image_position_y-=391;

	$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);

	image_position_y-=391;

	$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);

	image_position_y-=391;

	$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);

	image_position_y-=391;

	$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);

	image_position_y-=391;

	$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);

	image_position_y-=391;

	$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);

	image_position_y-=391;

	$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);

	image_position_y-=391;

	$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);









});

});



</script>

It is a little clunky I know but it works. The only thing that doesn't convince me is the actual sprite image. the height is 5585 (it should be 5586) because I have 14 images each with 399px height. The thing is that somehow some pixels get chopped off somewhere for some reasons so in the code I have to give each picture a height of 391px...no idea why.

Here's the css:

@charset "utf-8";

/* CSS Document */ …

Violet_82 89 Posting Whiz in Training

13 Years Ago

hi there, thanks for that.
@Airhow, nice one, but despite being a very good solution, I won't do much coding, so I won't do much practice. Pluse I want users to be able to somewhat control the animation with a button and I seem to understand that it won't be possible with that kind of image.
@MartinRinehart: sorry I didn't mean to ignore the suggestions or being rude in any way, I actually very much appreciate your contribution, I just thought to fix the code first and then tidy it up but if you think that tidying up will help then so be it, I will read the whole Crockford essay and try my best to tidy up the code, then repost it in here, hopefully it will be clear
thanks

Violet_82 89 Posting Whiz in Training

13 Years Ago

Hi MartinRinehart,
thanks for that. I had a quick look at Crockford's (with the intention to read it carefully) and...well what to say, as you pointed out I am not exactly following the standards!
Speaking about my code, I have rewritten it a bit, and used jquery animate() as you suggested. What I am aiming to get to is something like this (which doesn't work though)

<script type="text/javascript">
$(function(){
$(".run_sequence_button").click(function(){

var image_position_y = 399;

function changeSeq()
{

var t;
if(image_position_y <= 5586)
{
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},0);
image_position_y+=399;
t = setTimeout("changeSeq()", 1000);
}

else
{
image_position_y = 0;
t = setTimeout("changeSeq()", 1000);
}
}
});
});

</script>

the thing is that there is an error somewhere at the beginning when I use the function changeSeq() . I noticed that because this works

<script type="text/javascript">

$(function(){

$(".run_sequence_button").click(function(){


var image_position_y = 399;

$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},0);



});
});

</script>

whereas this doesn't anymore:

<script type="text/javascript">
$(function(){
$(".run_sequence_button").click(function(){
function changeSeq()
{
var image_position_y = 399;
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},0);
}

so it doesn't seem to like the fact that I use the function changeSeq() after the click function.
I know it is still not following the convention but if I get it to work I will tidy it up. ANy suggestion as to what to do to get it to work?
By the way,is your work available online and easy to unedrstand for a novice like me, …

Violet_82 89 Posting Whiz in Training

13 Years Ago

Hi thanks for that.
I was thinking what if I instead don't pass the position like that, would it be easier?
I came up with something this evening, not sure what you think about it, here it is:

<script type="text/javascript">

$(function(){

$(".run_sequence_button").click(function(){

/*console.log(image);*/

var image_position_y= 399;

while(image_position_y <= 5586 )

{
function change_pix()
{
var image_change = $(".thumb_container").css("backgroundPosition", "0px -" + image_position_y + "px");
image_position_y++;
}
setTimeout(change_pix(),3000);
}



});
});

</script>

The thing is though that it doesn't work properly, it only changes one image and that's it when I click on the "Run sequence" button. Firebug also returns this error:
useless setTimeout call (missing quotes around argument?) (?)() rewind_1.htm (line 41)
handle(a=Object { originalEvent=Event click, type="click", timeStamp=1321914928116, more...})jquery.min.js (line 55)
add()jquery.min.js (line 49)
setTimeout(change_pix(),3000);

I uploaded the script on my test site, here it is http://www.antobbo.webspace.virginmedia.com/photogallery/test/rewind_1.htm
What do you think?
thanks

Violet_82 89 Posting Whiz in Training

13 Years Ago

Hi there, I had another go and after a bit of research and attempts I realized that my approach wasn't the right one, so I rewrote the script a little bit. I realized that I don't need to get the height and width of the image but I can manipulate the div containing the image because it has the same size, so I have this now:

<script type="text/javascript">



		$(function(){



			$(".run_sequence_button").click(function(){


				/*console.log(image);*/
				



				var image_change = $(".thumb_container").css("backgroundPosition", "0px -399px");


			});

		});



		</script>

which is a good start :- ).
Now, I need to make sure that when I click on the "run sequence" button the y value changes adding -399 to the current value till it gets to 5586 which is the height of my sprite image. Say I create 2 variables,

var image_position_x = 0; 		
var image_position_y	= 0;

then I will have some kind of loop won't I? Perhaps a while loop that goes something like while ((image_position_x == 0 ) && (image_position_y <= 5586)) . The thing is I am not sure how to change-399px in the jquery script. Can I replace -399px in the script with the name of my variable?
thanks

Violet_82 89 Posting Whiz in Training

13 Years Ago

Hi MartinRinehart,
thanks for that. I actually really like your way to test that things work using the alert boxes, I instead output onto the firebug console with

console.log

Now, down to the js. Yes I know I can use

getElementById

methods, but Iam not sure I can this time, because you see the image is a background image used in the css so I can't assign it an id. This is the reason why I used jquery

var image = $(".thumb_container").css("background-image");

to get the image into the script.
I have tried to do what you suggested in your code for the width and had

var current_width = image.offsetWidth;

but still doesn't work, current_width has a value of undefined. I mean in my code when I test the variable "image" with

console.log(image)

I get the URL of the image, which is good news, but when I then attempt to get the width and height

var current_width = $("#"+image).width();
var current_height = $("#"+image).height();

the value get a value of null. Is that sth I am missing?
I guess if the image wasn't a background image I could use your code

Violet_82 89 Posting Whiz in Training

13 Years Ago

RIght, I think I really need a hand here folks, been trying for hours but didn't get that far. I am working on the script, but because I am not quite sure how to do it in javascript I am doing it with jquery.
So here's my page with the relevant html and script highlighted in red:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Antonio Borrillo Photography - Gloom</title>

        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<meta http-equiv="Content-Language" content="en">
		<meta name="description" content="Digital photography">
		<meta name="keywords" content="Photography,Digital Photography,Antonio Borrillo,Antonio Borrillo Photography,Gloom,Faith,Light">
		<meta name="author" content="Antonio Borrillo">

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

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

        <!--[if lt IE 7]>
			<link rel="stylesheet" type="text/css" href="stylesheets/ie6_and_below.css">
        <![endif]-->


		<script type="text/javascript">

		$(function(){

			$(".run_sequence_button").click(function(){

				var image = $(".thumb_container").css("background-image");

				var current_width = $("#"+image).width();

				var current_height = $(".thumb_container").height();

				console.log(current_width);

				});

		});

		</script>

	</head>
	<body>
		<div class="outer_wrapper">

        	<div class="inner_wrap">

            	<div class="banner">

                	<div class="heading_1">
                    	<h1>Antonio Borrillo Photography</h1>
                    </div><!-- END OF heading_1-->

                </div><!-- END OF banner -->

                <div class="navigation">

                	<ul>
                		<li><a href="home.htm">Home</a></li>
                        <li><a href="gallery.htm">Gallery</a></li>
                        <li><a href="portfolio.htm">Portfolio</a></li>
                        <li><a href="bio.htm">Bio</a></li>
                        <li><a href="contact.htm">Contact</a></li>
                	</ul>

                </div><!--navigation ENDS -->


                <div class="clear"><!-- EMPTY DIV TO CLEAR THE FLOAT-->
                </div><!-- END OF EMPTY DIV TO CLEAR THE FLOAT-->

				<div class="page_heading">
				<h2>Rewind</h2>
                </div><!-- END OF page_heading -->

                <div class="boxes_wrapper">

                	<div class="thumb_container">



               		</div><!-- END OF boxes_wrapper-->

               	<input type = "button" value = "Run sequence" class = "run_sequence_button">

                	<div class="footer">
                		<p class="footer_paragraph">All photos and content Â© 2011 Antonio Borrillo. Please read the <a href="terms_and_conditions.htm">terms and conditions here.</a>
                    	</p>
              		</div> <!-- END OF …

Violet_82 89 Posting Whiz in Training

13 Years Ago

Troy III, I have never heard of that before. I had a look and I think it makes sense to do that if you really get a lot of traffic on your website, but other than that I am not quite sure what the advantage is. Anyway, since it is a new thing I don't mind giving a go at it, so here's the html and the sprite image in it http://www.antobbo.webspace.virginmedia.com/photogallery/test/rewind_1.htm
I tested the images in the sprite.css file and the sprite image works as it should, now I need to add the javascript to do the rest, and as said earlier on I might need a hand with this.
Now let's have a look at the html first: I added a button to run the sequence and I now need to write the function:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Antonio Borrillo Photography - Gloom</title>

        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<meta http-equiv="Content-Language" content="en">
		<meta name="description" content="Digital photography">
		<meta name="keywords" content="Photography,Digital Photography,Antonio Borrillo,Antonio Borrillo Photography,Gloom,Faith,Light">
		<meta name="author" content="Antonio Borrillo">

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

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

        <!--[if lt IE 7]>
			<link rel="stylesheet" type="text/css" href="stylesheets/ie6_and_below.css">
        <![endif]-->




	</head>

	<body>
		<div class="outer_wrapper">

        	<div class="inner_wrap">

            	<div class="banner">

                	<div class="heading_1">
                    	<h1>Antonio Borrillo Photography</h1>
                    </div><!-- END OF heading_1-->

                </div><!-- END OF banner -->

                <div class="navigation">

                	<ul>
                		<li><a href="home.htm">Home</a></li>
                        <li><a href="gallery.htm">Gallery</a></li>
                        <li><a href="portfolio.htm">Portfolio</a></li>

                        <li><a href="bio.htm">Bio</a></li>
                        <li><a href="contact.htm">Contact</a></li>
                	</ul>

                </div><!--navigation ENDS -->


                <div class="clear"><!-- EMPTY DIV TO CLEAR …

Violet_82 89 Posting Whiz in Training

13 Years Ago

thanks for your ideas guys. I think I won't use movie maker after all, I better practice a bit of javascript, css and html. In fairness I don't think I have ever used pure js, just jquery, so I presume I will need some help with the code.
Now let me look at how to do this.
@lordrt I appreciate the flash solution, but unfortunately I know absolutely nothing about flash, so I think it will be pretty hard for me to even get started
@MartinRinehart and @Troy III: I guess javascript will be, I hope I can get a very fast animation with js then.
Now, @Troy III, I got a little lost about your solution. You suggest to have a "strip" do you mean like having 5 images in one?I won't need a forward loop because I want the animation to stop when it comes back to the first image.
I start working on the code now.
thanks

Very fast image change: jquery or movie maker?

Violet_82 89 Posting Whiz in Training

13 Years Ago

Hi guys, I would like to add sth to my website but I am not sure what's the best way to achieve this. It is a kind of image gallery, say I have 10-20 images and I want to display all of them one after another one from the beginning to the end and then going back. So, let's take the 5 attached images: as you can see they have been taken in sequence so what I have in mind is to have a page where you can see only pic 87: you click a button sayin probably "run sequence" and from pic 87 goes very very quickly all the way to pic 91 so the effect is almost like a video and then straight away goes back to 87, so you get a rewind effect.
Now I am not sure whether it is a good idea to achieve this with css and jquery or somehow record a video perhaps with moviemaker to get that effect. I guess the video has the advantage of being played with every browser whereas the script requires more adjustements.

I haven't written any code yet but I think each picture can have a different z-index and with jquery I can change the order when I click the "run sequence" button, i will figure out how hopefully
thanks

Re: Jquery event 'e' and mouse coordinates

Violet_82 89 Posting Whiz in Training

13 Years Ago

I see, thanks for that guys, I got the feeling I will need some help in the future with event-related functions. that said I will make sure I will always look at the API first
thanks guys

Re: Jquery event 'e' and mouse coordinates

Violet_82 89 Posting Whiz in Training

13 Years Ago

Hi Airshow, thanks for that. I think I am getting there, just one thing you mentioned:

Any callback function that doesn't need to access any of its outer function's internal variables, doesn't need a formal parameter list.

Now, say for the sake ok argument that I want to create a script like the one we discussed earlier on (the one with the hover method) to get the coordinates of the mouse: when I build my script I have one thing in mind: getting the coordinates of the pointer, so I have my hover method (by the way I looked up the API as you suggested) but how do I know that in order to get the coordinates I need access to the hover function's internal variable? I mean is it something that I pick up by looking at the api for that particular function or is it sth I am ought to know? I mean, let's put it this way: if my goal was to get the coordinates of the mouse and I was trying to build a jquery script on my own (as I said that script was taken from somewhere else) to achieve that I wouldn't even dream to include a parameter because I just don't know
cheers

Re: Jquery event 'e' and mouse coordinates

Violet_82 89 Posting Whiz in Training

13 Years Ago

Hi, thanks for that.
I think the way functions pass parameters around is kind of clear but I am still a little confused about this "e" formal variable. My confusion arises from the fact that I saw the (almost)same function written in a different way. I was watching one of those jquery tutorial videos and the tutor was creating a image hovering script and at one point he had this function:

...

$(function(){
	$('a').hover(function(e){
		var href = $(this).att('href');
		$('<img id="largeImage" src="' + href + '" alt="image"/>')
		.css('top', epageY)
		.css('left', epageX)
		.appendTo('body');
	
	}, function(){
	$('#largeImage').remove();

	});

});
...

Here you see there is no bind() just the callback function (which I didn't know it was a callback function - how do I determine that a function is a callback function by the way?). The tutor didn't really explain where that 'e' came from so I went onto http://api.jquery.com/event.pageX/ and got more confused : - )!

So my callback function (in both the above examples), you said Airshow, generates an internal object (which I assume it is 'e') and passes it back to the bind function: now few things: 1)how do I know when a function generates an internal objects, in other words, how do I know when to use 'e' and when not?

2)what does 'e' contain and what pass back to the bind() ?
3) Does any callback function contain and pass back an object (for the sake of argument this callback function …

Re: jquery to determine java script off

Violet_82 89 Posting Whiz in Training

13 Years Ago

Hi there, right so there must be an error in my code then. I went through it again but i don't seem to be able to see anything wrong with it...any idea?

Jquery event 'e' and mouse coordinates

Violet_82 89 Posting Whiz in Training

13 Years Ago

Hi there,
I am having some problem understanding an event in jquery.
Given the following example http://api.jquery.com/event.pageY/, I don't quite understand what 'e' is and what it does. The rest of the code is kinda clear, it basically gets the coordinates but I don't understand what is the function of 'e' and where it comes from because it doesn't seem to have been declared anywhere, so it is a parameter holding what?
Any simple suggestion?!
thanks

Re: jquery to determine java script off

Violet_82 89 Posting Whiz in Training

13 Years Ago

Thanks Taywin,
but why is it not working then? I don't know if you tried the link but it doesn't work the way it should. If the javascript is on or off it goes to a different page.

@MartinRinehart, sorry you're right, I meant return false; , apologies

Re: jquery to determine java script off

Violet_82 89 Posting Whiz in Training

13 Years Ago

Hi ckchaudhary,
thanks for your reply. Yes your example is clear although there are few things that I don't understand. Now, return:false; from what I understand, seems to be used to cancel an action, like in your code the third link has a return:false; so the link won't work. Specifically in your code you say return c; but is it necessary? I mean if I remove it, the script still works fine.
I also tried one thing: I replaced your return c; with return:false; and noticed that the script still run in that the alert box is still fired but the link doesn't go anywhere. SO the return:false; acts on what the link is supposed to do, but not on the script (sorry I didn't know that!:-))

To go back to my code: sorry for the title of the post, wasn't quite sure how to call it.
I am not quite sure why in the video it works fine but when I do it (and literally I copied it) it doesn't. So, let me see if I understand correctly what the code I posted does then.
If javascript is enabled, when you click on the show list link, even if the link target is new_file.htm it should do what the jquery script asks, which is append a div with a list to the current page. (but it doesn't do it, it goes to the target page). Now in my case the return:false; (from what I …

jquery to determine java script off

Violet_82 89 Posting Whiz in Training

13 Years Ago

HI there,
I was again watching a jquery/ajax tutorial and in the video http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-10/ they show how to use a return:false; to determine whether a scrip will execute (javascript on) or will go to a separate page if the javascript is off.
Basically I have 2 pages test.htm and new_file.htm. The former will get the list from the latter page and load onto the test.htm. This is done via jquery. the trainer uses as a trigger a link on the test.htm page which originally goes nowhere, then he changes that to point to new-file.htm and he says and shows that if we add

return:false;

to the jquery script if you click on "show list" when javascript is enabled it works fine, when instead javascript is disabled when the link is clicked on it goes to the new_file.htm. I tried that in here http://antobbo.webspace.virginmedia.com/various_tests/2011_10_29_ajax/test.htm and obviously it doesn't work, whether javascript is on or off it still goes to the new_file.htm page so I was wondering if anybody can shed some light on it at all. Let's have a look at the code, it might be easier to understand rather than me attempting to explain:

test page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>

		<title>test page</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function(){
				$('a').click(function(){
				$('<div id="info"/>').load('new_file.htm #movies',function(){
				$(this).hide()
					.appendTo('#container')
					.slideDown(1000);

				});
					return:false;
			  });

			});
		</script>

	</head>


	<body>
		<div id="container">
			<h1>My movies</h1>
		</div>
		<a href="new_file.htm">Show list</a>
	</body>


</html>

…

Re: jquery exercise, image slides

Violet_82 89 Posting Whiz in Training

13 Years Ago

Hi pritaeas,
thanks it does : - )

Violet_82 89 Posting Whiz in Training

13 Years Ago

Re: format my samsung nc10

Brilliant I will give it a go and post back, thanks

Violet_82 89 Posting Whiz in Training

13 Years Ago

Re: format my samsung nc10

HI caperjack,
thanks for that. I thought that the installation would stop when the system tries to install the usb drivers. Any chance that could happen?

Violet_82 89 Posting Whiz in Training

13 Years Ago

format my samsung nc10

Hi there, I need to format my samsung nc10 netbook, it doesn't have the cd driver so I wonder if I can format it by running the windows cd from an external cd driver. WOuld that work or will the installation abort?
thanks

Re: jquery exercise, image slides

Violet_82 89 Posting Whiz in Training

13 Years Ago

Hi pritaeas,
thanks for that. SO basically it is "this" that makes it all working properly. I have tried to swap img.fron for this as I said in my post and got an unexpected (at least for me) result, whereby all the pictures change at the same time. So generally speaking, the keyword "this" refers to the element currently in the script

Violet_82 89 Posting Whiz in Training

13 Years Ago

Re: css positioning problem

Ahhhh ok, I see now, thanks Dandello. Yes it is a very nice effect, but nothing I came up with, was just replicating what was done in the tutorial
thanks again

Violet_82 89 Posting Whiz in Training

13 Years Ago

jquery exercise, image slides

Hi there, I am doing some jquery exercises and I was redoing a small script I saw onto this video (very very good jquery resource by the way) http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-8/
and there is something I am not quite clear about. I copied that onto my test area so I can post the link http://antobbo.webspace.virginmedia.com/various_tests/2011_10_26_image_slides/test.htm

Here's the html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Image slides test</title>
		<link rel="stylesheet" type="text/css" href="style.css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>        
        <script type="text/javascript">        
        $(function(){
			$('.wrap').hover(function(){
				$(this).children('.front').stop().animate({"top":'150px'},700);
				
				},function(){
				$(this).children('.front').stop().animate({"top":'0'},300);
				});
			
		});
		
		</script>
        
	</head>

	<body>

		<div class="main_container">

			<div class="wrap">

				<img src="water_thumb_7.jpg"  alt="">
				<img src="back1.jpg" class="front" alt="">

			</div>

			<div class="wrap">

				<img src="water_thumb_5.jpg" alt="">
				<img src="back2.jpg" class="front" alt="">

			</div>

			<div class="wrap">

				<img src="water_thumb_6.jpg" alt="">
				<img src="back3.jpg" class="front" alt="">

			</div>

		</div>


	</body>

</html>

and here's the CSS:

.main_container
{
	width:496px;
	height:500px;
	border:1px solid blue;
	margin: 0 auto;
}

.wrap
{
	border: 1px solid magenta;
	width:150px;
	height:150px;
	margin-top:10px;
	margin-left:10px;
	float:left;
	position:relative;
	overflow:hidden;

}

img
{
	position:absolute;
	top: 0;
	left:0;	
}

My question is about the script. As you can see I have a class "wrap" in the html which is used 3 times. When in the script I say:

$('.wrap').hover(function(){				$(this).children('.front').stop().animate({"top":'150px'},700);...

how does the script determine which "wrap" I am referring to? In other words how does it know that I have hovered on the first, second or third "wrap"?

The reason why I am asking that is because I have slightly changed the script to this

Violet_82 89 Posting Whiz in Training

13 Years Ago

css positioning problem

Hi there,
I am working on css positioning and I have encountered a problem.
I have these two pages:
1)http://antobbo.webspace.virginmedia.com/various_tests/2011_10_25_css_positioning/test.htm
2)http://antobbo.webspace.virginmedia.com/various_tests/2011_10_26_image_slides/test.htm

the first one has box B (yellow) and C(red) with

position:absolute;
top 0;
right 0;

the second one has 3 images with:

img
{
position:absolute;
top: 0;
left:0;	
}

Now why in the first one the boxes overlap whereas in the second one the boxes are nicely laid out one after another one?

Here's the code:

html for 1)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

	<head>
		<title>test</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>

	<body>
		<div id="a">
			<p>A</p>
			<div id="b">
				<p>B</p>
			</div>
			<div id="c">
				<p>C</p>
			</div>

		</div>

	</body>

</html>

css for 1)

#a
{
width:800px;
height:500px;
background-color:blue;
position:relative;
}

#b
{
margin:0 auto;
width:72px;
height:150px;
background-color:yellow;
position:absolute;
top:0;
right:0;

}

#c
{
width:70px;
height:150px;
background-color:red;
/*margin-top:30px;*/
position:absolute;
top:0;
right:0;

}

html code for 2)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Image slides test</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>

	<body>

		<div class="main_container">

			<div class="wrap">

				<img src="water_thumb_7.jpg" class="front" alt="">
				<img src="back1.jpg" alt="">

			</div>

			<div class="wrap">

				<img src="water_thumb_5.jpg" class="front" alt="">
				<img src="back2.jpg" alt="">

			</div>

			<div class="wrap">

				<img src="water_thumb_6.jpg" class="front" alt="">
				<img src="back3.jpg" alt="">

			</div>

		</div>


	</body>

</html>

CSS for 2)

.main_container
{
	width:496px;
	height:500px;
	border:1px solid blue;
	margin: 0 auto;
}

.wrap
{
	border: 1px solid magenta;
	width:150px;
	height:150px;
	margin-top:10px;
	margin-left:10px;
	float:left;
	position:relative;

}

img
{
position:absolute;
top: …

Violet_82 89 Posting Whiz in Training

13 Years Ago

Re: jquery slide show

I think I have found what causes the problem, although I don't know how to resolve it.
I was looking at the script behaviour in chrome using the console when I noticed that at the first run of the script the first image "images/animal_full_2.jpg" keeps display:inline; rather than doing what all the rest of the pix do which is change the display property to "none"; this is what causes the first picture to remain in the box and the other ones that are supposed to replaced it in turn, to appear below instead.
Funnily enough, as I said in my previous post, this happens only on the first run of the script and only in chrome (and not also in opera as previously said).
I had a look at the jquery website at the .hide() method and it says that

If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

Now, what I am doing in the script is to show first and then then hide pictures but, from what I understand, the .hide() method doesn't work properly on the first run because it is supposed to change the default display:inline; to display:none; and that's not happening.
anybody's got a suggestion?
thanks

Violet_82 89 Posting Whiz in Training

13 Years Ago

jquery slide show

HI there, I have a really annoying and strange problem with a script, here's the code:

<script type="text/javascript">

$(function() {
	var images = $('.home_page_pic img').hide();
	var index = 0;
	images.eq(index).show();

	function swapImages()

		{

		images.eq(index).fadeOut(2000, function() {

		index++;

		if (index == images.length)

			{

				index = 0;

			}
		images.eq(index).fadeIn(2000, swapImages);
		});

		}

	swapImages();


});          </script>

Now, in chrome and opera at the first run of the script the big picture doesn't actually get replaced but it stays there and the other big pictures that are supposed to replace it appear instead at the bottom of it. Then at the second run, it all goes ok.
Here you can see what I mean (either with opera or chrome and if it doesn' happen try ctrl+f5 on ur keyboard http://antobbo.webspace.virginmedia.com/photogallery/home.htm)

Violet_82 89 Posting Whiz in Training

13 Years Ago

Re: z-index (and css) and IE6?

Hi stbuchok,
yes I have considered this. There aren't many people probably looking at that in IE6 but there are still some, especially people at work (90% of my coworkers still have IE6 installed for the sake of argument). I am saying this because I would like to include this site on my cv and it will look good if I can prove that I have done some efforts to make it compatible with IE6. DOn't get me wrong, I tthing you are right and under normal circumstances I wouldn't really worry too much, but I would like to make sure that the website is at least usable in IE6 and as things stand at teh moment it is not.

Violet_82 89 Posting Whiz in Training

13 Years Ago

z-index (and css) and IE6?

Hi there,
I am having some problems with my site displaying correctly in IE6. In particular if you have a look at this page in IE6 http://www.antobbo.webspace.virginmedia.com/photogallery/water.htm the script doesn't seem to be working the way it should, and I think it might be a problem with the css and the z-index.
Here's the script code:

...
  <script type="text/javascript">
		
		function change_image(image)
		{			
					$(".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");
				});	
		}
		
		
		</script>

...

and the related html

...
 <div class="boxes_wrapper">

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

...

and the CSS bit for the script to work:

...
/* FOR THE IMAGES POP UP WINDOW */
.overlay
{
	display:none;
	background:#cf1dbb;
	opacity:0.75;
	filter:alpha(opacity=75); /* For IE8 and earlier */
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	position:fixed;
	z-index:100;	
}

.box
{
	display:none;
	background-color:black;
	width:660px;
	height:450px;
	position:fixed;
	left:50%;
	margin: 0 0 0 -330px; /* to centre a fixed div jus give it left 50% and move it back half of its width*/
	top:10%;
	z-index:101;
}

.standalone_image
{
		
		/*background:url(../images/water_full_3.jpg) no-repeat;*/
		position:absolute;
		z-index:101;
		width:602px;
		height:399px;
		top:25.5px;
		bottom:25.5px
		left:29px;
		right:29px;
		/*border:1px solid red;*/
	
}

.close_button
{	
	display:none;
	left:94%;	
	/*background:url(../images/close_button.png);*/
	width:40px;
	height:40px;
	position:absolute;
	z-index:102;
}
...

In IE6 when I click on a thumbnail the big image comes up but no close button therefore that messes up everything because if you click …

Violet_82 89 Posting Whiz in Training

13 Years Ago

sure will do thanks for all your help much appreciated!

Violet_82 89 Posting Whiz in Training

13 Years Ago

Hi AleMonteiro, cool thanksm now I understand all your code.
About the resizing business, in your code I suppose I will have to get the coordinates of the box and then change them correct?
I have noticed a little problem with my script in IE6 but I think I will start a new thread for that because it is about compatibility, so maybe not a good idea to mix it with all the rest

Violet_82 89 Posting Whiz in Training

13 Years Ago

Hi AleMonteiro,
thanks for that, now it is much clearer. For my website I think I will use my script simply because I find it easier :). That said, I find your script much more interesting than mine, and it was really kind of you to add the comments, so now I understand how that works.
Let's start with your script first.
It is all pretty much clear apart few minor things and I am referring to the "img" element and "scr" attribute. In short why do we need to get both "img" and "src", can we not just get the src attribute directly and use it in the script? Or is it something like "we need to get "img" in order to extract "src"? What really counts is the "src" that allows us to change the picture url so why do we need the "img" for?
The methods to get them are clear enough, it's just the reason why we do that really.
I looked up the .next() and .children() methods for more examples, and I really like the how easier is to use them to navigate through the DOM tree. The thing is that I simply didn't know I could use those methods...I have got a lot to learn!

Also I had some problems getting my head around all the quotes around this "url('" + urlFull + "')" . The external quotes are fine, they are part of the syntax but the …

Violet_82 89 Posting Whiz in Training

13 Years Ago

Hi AleMonteiro,
thanks for posting the code, although I am not entirely sure I understand the way you are using the alt attribute and the various .children() in the jquery.
I made some changes to my code, hoping to find an easy solution...but I think I didn't : (

Basically, here's what I have done.
HTML:

...
<div class="thumbnail">
<a href="#" class="full_image"><img src="images/water_thumb_1.jpg" alt="" style="border:0" onClick="change_image('big_image_1')"></a>
<img src="images/water_full_1.jpg" alt="" style="display:none" id="big_image_1">
</div><!-- END OF thumbnail 1-->

<div class="thumbnail">
<a href="#" class="full_image"><img src="images/water_thumb_2.jpg" alt="" style="border:0" onClick="change_image('big_image_2')"></a>
<img src="images/water_full_3.jpg" alt="" style="display:none" id="big_image_2">
</div><!-- END OF thumbnail 2-->
...

So if we take the first "thumbnail" div, I have my thumbnail picture "images/water_thumb_1.jpg" in it which when clicked on will pass the id (big_image_1) of the full picture "images/water_full_1.jpg", which is currently hidden,
to the javascript function "change_image" and jquery script modified as below:

<script type="text/javascript">

function change_image(image)
{

$(function() {

$(".overlay").show();
$(".box").show("slow");
$(image).fadeIn(4000);
$(".close_button").show();


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

});
}
</script>

The picture passed as a variable (image) will be then used to display the big picture
The script is meant to be firing up few boxes (an overlay, a box where the big picture will be displayed in and a close button, as before).
Here are the slightly amended css for the various boxes:

...
/* FOR THE IMAGES POP UP WINDOW */
.overlay
{
display:none;
background:#cf1dbb;
opacity:0.85;
filter:alpha(opacity=85); /* For IE8 and earlier */
top:0px;
bottom:0px;
left:0px; …

Violet_82 89 Posting Whiz in Training

13 Years Ago

AleMonteiro,
looking again at your code I realize that it might not work because with your code I will replace the big picture with the image in the thumbnail. So your script is saying, if I am not mistaken:
when the thumbnail is clicked on save the URL of the thumbnail image in the variable urlImg , then all the rest of the code and then select standalone_image and change its background image from what it is to the content of the urlImg variable which has the url of the thumbnail and not the URL of the full image, so it won't work...or am I saying sth silly (sorry I have been in from of the monitor for over 9 hrs today doing this!)

Violet_82 89 Posting Whiz in Training

13 Years Ago

Hi AleMonteiro,
thanks for that.
I have done a bit more work and I think I resolved problem 1 in a different way: rather than using "#" I will have something like

<a href="javascript:void(0);" ><img src="images/water_thumb_1.jpg" alt="" style="border:0" class="full_image"></a>

If I simply change the css property cursor and set the click directly on the image, then yes, the mouse cursor will change but the element is not a link, whereas with the

javascript:void

we are sure that the element is a link - and a good thing of that is that when you click on a thumbnail at the bottom of the page the focus stays there and doesn't go all the way up the page again.

About the jquery, thanks for that, it's great. One thing though that I am a bit unsure of. Say I make the above change to the link, then I can have:

$(function() {
			$("a.full_image").click(function() {
				  var urlImg = $("img.full_image").attr("src");
				$(".overlay").show();
				$(".box").show("slow");
				$(".standalone_image").css("backgroundImage", "url('" + urlImg + "')") .fadeIn(4000);
				$(".close_button").show();			
			});
			
			$(".close_button").click(function() {
				$(this).hide();
				$("standalone_image").fadeOut("fast");
				$(".box").hide("slow");
				$(".overlay").hide("slow");
			});
			
		});

I might be wrong but shouldn't your "backgroundimg" be "backgroundImage"?
Also, could you please explain me this line "url('" + urlImg + "')") , why do we need that many quotes?

In the css I can leave everything as it is I believe
thanks again

Violet_82 89 Posting Whiz in Training

13 Years Ago

Hi AleMonteiro,
thanks for that.
I have created everything now and even attempted a bit of jquery, but I am having few problems with that.
First thing, here is what my jquery does http://antobbo.webspace.virginmedia.com/photogallery/test/water.htm (click on the first image to see).
Now let's see the code:
-jquery

<script type="text/javascript">

		$(function() {
			$("a.full_image").click(function() {
				$(".overlay").show();
				$(".box").show("slow");
				$(".standalone_image").fadeIn(4000);
				$(".close_button").show();			
			});
			
			$(".close_button").click(function() {
				$(this).hide();
				$("standalone_image").fadeOut("fast");
				$(".box").hide("slow");
				$(".overlay").hide("slow");
			});
			
		});

		</script>

-HTML:

<body>
    
         <div class="overlay" id="overlay" ><!-- BOX FOR THE OVERLAY-->                
         </div><!-- END OF THE OVERLAY-->
         
         <div class="box" id="box"><!-- BOX FOR THE IMAGE -->   
         	
			<div class="standalone_image"><!-- BOX FOR THE IMAGE-->
            </div><!-- END OF BOX FOR THE IMAGE-->
            
           	  
             <div class="close_button" id="close_button"><!-- BOX FOR THE CLOSE BUTTON -->
             </div><!-- END OF BOX FOR THE CLOSE BUTTON -->
               	
         </div><!--END OF BOX FOR THE IMAGE -->
...
<div class="thumb_container">
                
                        <div class="thumbnail">  
                        	<a href="#" class="full_image"><img src="images/water_thumb_1.jpg" alt="" style="border:0"></a>                  
                        </div><!-- END OF thumbnail 1-->
                    
                        <div class="thumbnail">    
                        	<a href="#" class="full_image"><img src="images/water_thumb_2.jpg" alt="" style="border:0"></a>               
                        </div><!-- END OF thumbnail 2-->
....

-CSS:

/* FOR THE IMAGES POP UP WINDOW */
.overlay
{
	display:none;
	background:#cf1dbb;
	opacity:0.85;
	filter:alpha(opacity=85); /* For IE8 and earlier */
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	position:fixed;
	z-index:100;	
}

.box
{
	display:none;
	background-color:black;
	width:660px;
	height:450px;
	position:absolute;
	right:30%;
	left:30%;
	top:10%;
	z-index:101;
}

.standalone_image
{
		display:none;
		background:url(../images/water_full_3.jpg) no-repeat;
		position:absolute;
		z-index:101;
		width:602px;
		height:399px;
		top:25.5px;
		bottom:25.5px
		left:29px;
		right:29px;
		/*border:1px solid red;*/
	
}

.close_button
{	
	display:none;
	left:94%;	
	background:url(../images/close_button.png);
	width:40px;
	height:40px;
	position:absolute;
	z-index:102;
}

Now let's get to the problems I am having:
1)the thumbnails are actually links …

Violet_82 89 Posting Whiz in Training

13 Years Ago

jquery to display pictures

Hi all, I am in the process of redoing my website and I have done pretty much all the html and css for it (http://antobbo.webspace.virginmedia.com/photogallery/test/home.htm), so now I would like to add some javascript/jquery.
This is essentially what I would like to achieve. On this page http://antobbo.webspace.virginmedia.com/photogallery/test/gloom.htm I have a series of thumbnails: when I click on a thumbnail I would like a much bigger picture to come up in the middle of the page on the top of the thumbnails. The window with the big picture will effectively overlap the thumbnails and will have the picture on it + a "close" button, so something like this http://fancybox.net/ (if you click on one of the picture in the example you will see what I mean).
Now, I know that there are many many plugins and etc to use, but I would like to do my own because I want to learn to use jquery and javascript (which I have used already in the past although I am not terribly good at it).
A web developer friend of mine gave me some good suggestions:
-to achieve this use 3 layers (he said to play a bit with the z-index). The first layer will shade the content on the page with the thumbnail, creating some sort of shade effect, the second layer will have the big picture and the third layer will have the button which will close the 3 layers and …

Re: battery for dell studio 1535

Violet_82 89 Posting Whiz in Training

13 Years Ago

cool thanks

Violet_82 89 Posting Whiz in Training

13 Years Ago

No prob, thanks again

Violet_82 89 Posting Whiz in Training

13 Years Ago

hi Xbox Support, thanks for the explanation, I am not really good at all that though, so I will take yours and others' advice and go wired when streaming content

jingda, I have tried with other laptops and they are actually a little faster...which is really odd because my dell xps17 should beat them all!! grrrr, that's annoying!

anyway, thanks

Re: battery for dell studio 1535

Violet_82 89 Posting Whiz in Training

13 Years Ago

thanks : - ), will let you know how it goes

Re: battery for dell studio 1535

Violet_82 89 Posting Whiz in Training

13 Years Ago

Thanks LaMouche I will have a look. I suppose the one on sale on amazon are not dell's though, but just compatible batteries. So price wise I should look for no less than £30 then, anything less than that might not be reliable I assume

Re: size and resizing browser window issue

Violet_82 89 Posting Whiz in Training

13 Years Ago

Thanks for that, the div explanation is crystal clear : - )!

About the percentage, in your example:
950/5 = 190 fine, to calculate the width of each button
190/950=.2 (why do you do this?)
.2*100=20% fine

In the meanwhile I will tweak the minimum width to house the image
thanks for all your help : - )

UI / UX Design web-design

Violet_82 89 Posting Whiz in Training

13 Years Ago

Re: size and resizing browser window issue

HI thanks both for the feedback.
@floatingDivs: it actually makes sense, so I had a go myself and attempted to change pixels to percentage.
Now I have the outer div "outer_wrapper" at 100% (the blue border), then the yellow one "inner_wrap" which houses the content at 98%, the heading at 98% and most importantly the

.navigation ul

at 79% and the actual buttons

.navigation li

at 19.5%. I didn't get the percentage values from anywhere, I simply tried different combinations till I matched the values I had in pixels.
Now, even if I have everything in percentage I still need a minimum width otherwise, say for the buttons, the text as mentioned in my previous post outgrows the buttons.
Also, one big issue I have is with images. Here I have inserted one http://antobbo.webspace.virginmedia.com/photogallery/home.htm just to show you. The picture size is 500x333 whereas my minimum width is, in the above link, 450px. The problem is obvious here, so I suppose I have to increase my minimum width to 500px. This is to say that I can't give percentage to everything, like I can't do that with images because the picture won't resize. Now I know these things are probably obvious to you guys but I am still trying to get my head around this business of liquid layout

@Felixius: I actually did something similar to that in my next version, I gave the list a minimum width of 760px, now …

UI / UX Design web-design

Violet_82 89 Posting Whiz in Training

13 Years Ago

battery for dell studio 1535

HI there,
my gf needs to buy a battery for her dell studio 1535 laptop, but we are kind of unsure where and what to get. Obviously dell's batteries are really really expensive as you would expect (I checked on the dell's website) so I wonder if you think it is ok to buy a battery compatible with her laptop which is not necessarily dell's. Also what would be the pro and cons of that please?
thanks

Violet_82 89 Posting Whiz in Training

13 Years Ago

Hi jingda,
yes I mainly use chrome and firefox, and they dosn't seem to be that different in terms of performance. I have also opera IE8 and safari but I haven't tried with them but I kind of expect them to be slower, well surely opera and IE at least

Re: size and resizing browser window issue

Violet_82 89 Posting Whiz in Training

13 Years Ago

Hi Felixius,
thanks for the link, yes, that is what I was looking for.
I think I have sorted it out http://antobbo.webspace.virginmedia.com/photogallery/home.htm although now I am facing another problem. When I wrote this post I didn't add the navigation in as yet, and today when I added the top navigation buttons I realized that I need to resize them as well, and I am finding it pretty difficult. Here's what I have done. At the moment I have

.navigation li
{
...
width:150px;
...
}

and that's because the width of the buttons is 150 px.
If I resize the windows as the situation is now, the buttons, as you would expect, cascade into one another.

If in the css I replace the 150 px with

width:9%;

that works fine and the buttons resize when I make the window smaller but it doesn't resize the text, so what happens is that the text eventually outgrows the buttons, and that doesn't look good at all.
I could obviously set a minimum width for the navigation, the same way as I have done for all the other divs but if I do that and if say I want to have larger buttons so that they cover the whole length of the page (and I think I will be doing that because as it is at the moment the buttons take only half of the page and I am not quite happy with the …

UI / UX Design web-design

Violet_82 89 Posting Whiz in Training

13 Years Ago

LaMouche, well problems as in every now and then it stops and buffer, but when I plug the cable in it is significantly better, I guess that as long as it is not a problem with my connection I am quite happy