Posts by Violet_82

hi there, thanks for you replies @jingda I am using the same router and I believe the same isp, nobody's got any problem with skype just my laptop which is why at one point I thought it could be my laptop even, but I don't seem to be able to find anything wrong with it, and it is pretty new (dell xps 17)

@LaMouche yes I am using the cable now everytime Icall with skype and it works much better.
I thought about the bbc servers being a bit busy actually, although my gf was saying she has never had that problem before even when she was living at her place and had a far slower connection than the one we have now...odd

Hi jingda,
I was connected with the wireless. The thing is I don't know how much is what, as in my 2.23mbps, how much is it? Does it mean that if I have a 10mb connection it is downloading only 2mb per sec? I tried to find out on the net a bit more about that but didn't quite find anything clear...
One more thing: with this connection if I am connected to the wireless, skype with videocalling is really slow, it freezes every 40-50 seconds, whereas if I use the wires it is significantly better. The reason why I am saying that is because I tried with another internet provider, with a connection of only 2mb, connected to the wireless, and the videocall is absolutely perfect. That got me thinking that sth is probably wrong with the speed of my connection

Hi there, I have a question about my internet speed (sorry I am really bad at these things).
I have a 10mb internet connection (my provider is Virgin) and while connected to the wireless this afternoon I run a speedometer check using http://www.speedtest.net/ and I had a download speed of 2.23mbps abnd upload speed of 0.15. Now, we had 2 laptops on both connected to the net and one of them was streaming video content, which is why I think it was 2.23. Now, my question is how much is 2.23mbps out of 10mb connection? The reason why I am asking is because my gf was watching something on the bbc iplayer today and it kept buffering every 5 minutes, whereas with the previous provider she was with, I think it was talk talk and she had around 2-3mb I am not entirely sure - that didn't happen, so I wonder whether there is sth wrong with my connection
thanks

More than a book you should probably start with the w3c schools website http://www.w3schools.com/w3c/default.asp, that's a good start. Then move to other online tutorial like http://css.maxdesign.com.au/floatutorial/ and maybe have a look at David Flanagan books:
-JavaScript Pocket Reference, 2nd Edition
-jquery pocket reference
hope this helps

Hi there,
I am in the process of designing my new photography website.
Now, I roughly know the layout but I am not sure how to deal with resizing the browser window issues. In other words, I want my website to resize nicely when I resize the window, rather than having buttons, divs and all the rest to overlap and go crazy.

In my previous website I simply didn't deal with the issue at all as you can see http://antobbo.webspace.virginmedia.com/photography/home.htm, if you resize you simply need to keep scrolling to view the content (is it called fixed width? - sorry I am not very well-versed in that), whereas on this site I attempted to resize everything nicely when you make the window smaller, although I wasn't that successful as you can see http://antobbo.webspace.virginmedia.com/martintest/project_1.htm.

What I would like to do is something similar to this say http://www.londondrum.com/planner/10-best-photos.php, you make the windows smaller and everything resizes ok.

Has that something to do with min-height and min-width ?
I really don't know where to start from, so any hint or link to relevant resources would be great. I thought I better do this before I start developing the site so that I don't have to make too many radical changes after I write the css
thanks

ok thanks for that!

Hi floatingDivs : - ),
thanks for that. Yes it works perfectly (I tried on the local copy of the website so it's not live). Now, what's that empty div doing then, I mean how does it fix it?
With that I am basically creating an extra box and make sure that floating elements are not allowed right and left of it, so I presume the box is pushed down or something like that ...I have read few things about the clear:both but didn't find anything about empty div. So how does your trick work or if you have a link to sth will do it too : - )?
thanks

HI there, I am a little puzzled about how to position few divs in a site I am working on, here's the url http://antobbo.webspace.virginmedia.com/Martin/contact.htm
Basically here the idea is that the yellow main div .content is the content wrap and should be around all the content of the page. That worked fine till I floated left the .navigation (magenta with the navigation) box and the .paragraph (black with the text) one, so now they are outside the yellow box.
Now from memory some time ago I read somewhere that if you float something you remove it from the normal flow, which is why presumably they are now not inside the yellow box anymore, if that's the case how do I bring them back inside?
thanks

thanks, that's really interesting, didn't know that

Uhm, problem solved apparently. I removed IE9 and went back to IE8 and it is now working...I wonder why though!

Hi guys, I am having a funny problem. I have an ebook type thing that I am trying to open on my laptop (win 7), it is the kind of file you open with microsoft html help executable and it doesn't work at all. The file opens, I can see the navigation panel on the left but in the content panel it says: Navigation to web page was canceled"...now I can open that on xp fine so Iwonder if you have any suggestion.
I googled a bit and found sb saying that the extension .chm should be associated with microsoft html help executable which is already. ANy idea?
Sorry forgot to mention I have IE9
thanks

Thanks for your patience Airshow, that's great. I managed to get hold od a copy of the jquery book as well as the javascript pocket reference, it's pretty good. I will try your code on my test site.
Hope you enjoyed your melon : -)

@floatingDivs, thanks for your help too much appreciated!

HifloatingDivs,
thanks for that but I had to remove the alert box in some browsers (chrome, safari, opera) comes up everytime I click on the next button. If I remove it it is ok although the first picture doesn't fade in smoothly, but it is fine, thanks for all your help

@Airshow Wow Airshow, that is amazing, thanks for posting that. It is a little bit too advanced for me but I definitely want to give it a try to understand it first and then try it on the site.
I spent sometime studying it, googling (actually w3c schooling) but many things are still unclear. Would you mind if I go through line by line with you just to make sure that
I understand what's going on and clarify what's not clear? Hope you don't mind that

First thing, this script can then replace all that awfully long script of mine I seem to understand. Now is it replacing every function as in, will your function be called directly from my code?
You said all the thumbnails should be replaced by <li><img src="images/gloom_thumb_1.jpg" alt=" " /></li> but where do I call your function from?

Let's get to the script now:

$(function(){ //I suppose I can give it a name or should it remain as it is?
   
var current = -1; 
  
var $thumbs = $(".gloom_thumbnails_wrapper img"); //is this the same as 
var thumbs = $(".gloom_thumbnails_wrapper img");?
  
var $pic_1 = $("#pic_1").hide().load(function(){ $pic_1.fadeIn(1000); });//ok, I …

Hi floatingDivs, thanks for the explanation, yes it makes sense, I should have thought about the out of bound problem. I replaced the if statement with the suggested one although it still doesn't work, when I get to the end of the pictures it skips the first picture (it's like the picture is missing, there is just the black background) and when I click next again it jumps to the second picture. Is it because we are saying in the code

$(this).attr("src",mainPictures[++currentImage]).fadeIn(2000);

effectively skipping the first element of

mainPictures[currentImage]

because of the

++

? http://antobbo.webspace.virginmedia.com/photography/testing/gloom.htm
Also on a different note, what do you think (and what do you guys think) of the second half of my original question,

do you think that the "next" button should have exactly the same functionality that the left hand-side nav has? In other words should I make sure than when users click on the next buttons even the thumbnails change accordingly (same way as they change when using the navigation)?

. Do you think it is doable or is it too complicated due to the nature of my clunky script? I had been thinking about that - there is a quick attempt in one of my previous replies above - and what I need to do is to try to increase thumbnail_1 which is the id of the thumbnails pictures in the navigation and change it accordingly to "shaded" and "normal". It is quite different from what we …

Hi floatingDivs,
thanks for that, I had a look earlier on and yes the code works (this afternoon I had the impression that it wasn't working on my small laptop - sometimes it is a bit temperamental which is probably why).
I had a good look at your code and I didn't know that I could use variables outside the function, I thought that everything had to be in a funcion, and that's why I couldn't get my darn script to work. In my previous attempts I couldn't change the value of

currentImage

because it was in side the function and it had always the same value everytime the function was called.
I attempted to slightly modify your script to make sure that when users click on the "next" button gets to the last picture the first picture kicks in again but it doesn't seem to be working:

// load images
   
      var mainPictures = ["images/gloom_full_1.jpg", "images/gloom_full_2.jpg", ... "images/gloom_full_27.jpg" ];
   
      var thumbPictures = ["images/gloom_thumb_1.jpg", ... "images/gloom_thumb_27.jpg"];
   
      var thumbShadedPictures = ["images/gloom_thumb_shad_1.jpg"... "images/gloom_thumb_shad_27.jpg"];
   
       
   
      // counter
   
      var currentImage = 0;
   
       
   
      // set picture to be 1st element in array (gloom_full_1.jpg)
  
      $("#pic_1").attr('src',mainPictures[currentImage]).fadeIn(2000);
  
      
  
      function nextPicture(){
      
      if(currentImage<=27)
       {

  
      $("#pic_1").fadeOut(2000, function(){
  
      $(this).attr("src", mainPictures[++currentImage]).fadeIn(2000);
  
      });
      
        }
       else
        {

  	currentImage=0;
	 $("#pic_1").attr('src',mainPictures[currentImage]).fadeIn(2000);
	}

      }

http://antobbo.webspace.virginmedia.com/photography/testing/gloom.htm

However, more important than that is this: do you think that the "next" button should have exactly the same functionality that the left hand-side nav has? In other words should I make sure than when users click on …

Hi Airshow,
thanks for that. I know what you mean and yes in a way I agree with you. Problem is I need to put this website on my cv to prove that I have some basic jquery and javascript skills, so if I use a jquery plug in, well, I can't prove much. IN an ordinary situation I would use it but I need to try to do as much as I can myself. I didn't know that adding a next button would have proved that dificult : - )!
The irony here is that if I don't add that button I could create some usability issues because users with small screens (like the one I am using now on a samsung nc10) will have to scroll up and down in order to view the pictures at the bottom of the left hand-side navigation, so I am in a bit of a dilemma: forget about the next button and leave that little usability issue unresolved or use a jquery plug in, solve the usability issue but not being able to prove that I have a basic understanding of how jquery works...

Hi peeps,
I wonder if anybody can give me a hand with this. Basically on my website http://antobbo.webspace.virginmedia.com/photography/testing/gloom.htm to view a picture you need to use the left hand-side menu. Now, all good except that when you want to view any picture at the bottom of the left hadn-side nav you need to scroll all the way down, losing the main picture and then you need to scroll all the way up again. So I was thinking to have a next button which will have the same function as the left hand-side navigation. I thought it would have ben easy but it's now 10 hours I am working on it and I really don't seem to be able to get anywhere. I tried many conbinations, here's some of the attempts:
1) I created the button:

<div class="next_button"><!-- NEXT BUTTON-->
<a href="javascript:void(0);" onClick="nextPicture()">Next</a>
</div><!-- END OF NEXT BUTTON -->

then the script:

<script type="text/javascript">
<!--
/*NEXT PICTURE */
$(document).ready(function()
{
var mainPictures = ["images/gloom_full_1.jpg", "images/gloom_full_2.jpg", ... "images/gloom_full_27.jpg" ];
var thumbPictures = ["images/gloom_thumb_1.jpg", ... "images/gloom_thumb_27.jpg"];
var thumbShadedPictures = ["images/gloom_thumb_shad_1.jpg"... "images/gloom_thumb_shad_27.jpg"];

mainPictures.current = 0;
thumbPictures = 0;
thumbShadedPictures = 0;

function nextPicture()
{
$("pic_1").fadeOut(2000, function()
{
$(this).attr('src',mainPictures[1]).fadeIn(2000)

});
}
});
//-->
</head>

Let me explain what I was attempting to do. I created 3 arrays mainPictures, thumbPictures and thumbShadedPictures because when I click on a thumbnail on the left the big picture in the middle changes and the thumbnail becomes shaded. Then when I click on a …

ok, I managed to resolve one of the issues, the home page. After trying and trying, I found out that IE6 doesn't support min-height , so I removed all of them from the IE6 CSS and replaced them with height : that sorted it out so now the slideshow on the home page works fine (I have changed it only on my local copy so it's not live yet), so thanks anyway.
What I still can't fix though (and I can't fix it because I really don't seem to understand what's wrong with it), is the script that regulates the change of the pictures on pages like http://antobbo.webspace.virginmedia.com/photography/testing/light.htm
I tried on yet another machine running IE6 and it kind of works a bit, in that the images change when I click on the thumbnail but the actual thumbnail often (but not always!)disappears altogether making an absolute mess of the navigation, I attached a screenshot...I just don't know...

Hi there, thanks, how would I do that, do you know?
Not sure whether it is that though cos I tried from another machine running IE6 and I had the same result, the homepage is not looking good and the script doesn't work...

Hi there,
I am having a few problems with my website http://antobbo.webspace.virginmedia.com/photography/testing/home.htm in IE6.
Now, I don't want to waste too much time on this, as in I don't want ti to be perfect but I just want it to be looking decent in IE6. I created a separate css for IE6 called ie6-and-down.css and few things work but others really don't.
The problems I am having are:
with the homepage; the box with the slideshow doesn't work as in the picture doesn't change and the box overlaps everything else in the background. I also have a kind of nested frame which somehow breaks in IE6. this is the relevant bit referring to the homepage slideshow in the ie6 css:

/* PICTURE BOX HOMEPAGE*/
.picture_box_home
{
clear:both; /* need to add this to make sure the navigation doesn't overlap it. Strangely, this doesn't happen in IE*/
/*background-color:red;*/
border:7px solid #7d003a;
width:618px;
min-height:415px;
margin:1px auto;
}

.in_pic
{
border:4px solid white;
width:610px;
min-height:407px;
margin:0 auto;
}

.in_pic1
{
border:4px solid #7d003a;
width:602px;
min-height:399px;
margin:0 auto;
/*background: #000000 url(../images/test1.jpg) no-repeat;*/
}
.slideshow
{
width:602px;
min-height:399px;
margin:0 auto;
	
}

/*END OF HOMEPAGE */

slightly different from the bit I use for the rest of the browsers:

/* PICTURE BOX*/
.picture_box_home
{
clear:both; /* need to add this to make sure the navigation doesn't overlap it. Strangely, this doesn't happen in IE*/
/*background-color:red;*/
border:7px solid #7d003a;
width:618px;
min-height:415px;
margin:10px auto;
position:relative;

/*background: #000000 url(../images/test1.jpg) no-repeat;*/
} …

Thanks Airshow,
I will give it a go, I must admit that using a function for each image is not the best thing to do!
thanks

stbuchok thanks for that.
I tried to implement your solution but it didn't quite work. That said when you said that my elements need to be referenced, you set my off thinking. I have done some more tests and I realized that the offending lines were

document.thumbnail_3.src= 'images/thumbnail_3.jpg';
document.thumbnail_2.src= shaded_image;

For some reason IE and chrome don't like those lines whereas opera and firefox are fine with that. Anyway after some research I think I understood that they had to be rewritten in a clearer way, so I came up with these lines:

var new_thumb_3 = document.getElementById('thumbnail_3')
new_thumb_3.src = 'images/thumbnail_3.jpg';
var new_thumb_2 = document.getElementById('thumbnail_2')
new_thumb_2.src = 'images/thumbnail_2_shaded.jpg';

so fundamentally I got the element by its id and assigned it to a variable, then I used

.src

to change the image. The thing is that in my script I have to change 3 images: the one in the big box, the thumbnail I click on (from normal to shaded) and the thumbnail I clicked away from (from shaded to normal).
Anyway, it works fine now in all the browsers, thanks a lot for your help!

Hi there, on one of my pages I am working on http://www.antobbo.webspace.virginmedia.com/photography/category_1.htm I have a script which works in firefox, opera but it doesn't in chrome and IE.
Now, let me explain first what the script is supposed to do. On the above page if you click on the second thumbnail image the main image changes (and the thumbnail itself changes): then if you click on the third thumbnail the main image changes again as well as the thumbnail, and I was thinking to do the same with the rest of them.
This is the script and the function is called with an onClick from the bullet list:

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

<script type="text/javascript">
<!--
function changeThumbnail_2()
{
var shaded_image = 'images/thumbnail_2_shaded.jpg';
document.thumbnail_3.src= 'images/thumbnail_3.jpg';
document.thumbnail_2.src= shaded_image;
var pic_2 = 'images/category_1_picture_2.jpg';
$(document).ready(function(){
$("#pic_1").fadeOut(1000, function(){
$(this).attr("src", pic_2).fadeIn(1000);
});
});

}

/* CHANGE THUMBNAIL 3*/
function changeThumbnail_3()
{
var shaded_image_3 = 'images/thumbnail_3_shaded.jpg';	
document.thumbnail_2.src = 'images/thumbnail_2.jpg'
document.thumbnail_3.src= shaded_image_3;
var pic_3 = 'images/category_1_picture_3.jpg';
$(document).ready(function(){
$("#pic_1").fadeOut(1000, function(){
$(this).attr("src", pic_3).fadeIn(1000);
});
});
}

//-->
</script>
</head>
...
<body id="page_body">
...
<div class="thumbnails_wrapper"> <!--THUMBNAILS WRAPPER -->
<ul>
<li><a href="#"><img src="images/thumbnail.jpg" alt=" "></a></li>
<li onClick="changeThumbnail_2()"><img src="images/thumbnail_2.jpg" alt=" " id="thumbnail_2"></li>
<li onClick="changeThumbnail_3()"><img src="images/thumbnail_3.jpg" alt=" " id="thumbnail_3"></li>
</ul>

<ul>
<li><a href="#"><img src="images/thumbnail_4.jpg" alt=" "></a></li> <!-- I don't need style="border:0;" because I put that in the overall settings in the container.css -->
<li><a href="#"><img src="images/thumbnail_5.jpg" alt=" "></a></li>
<li><a href="#"><img src="images/thumbnail_6.jpg" alt=" "></a></li>
</ul>

</div> <!--END OF THUMBNAILS WRAPPER -->
</body>

I know that the …

ah ok, thanks Airshow, that's much better now. What was confusing me was actually this

{ ; }

but that's just the empty body of the while loop! Now I understand. thanks for the code and the explanation, much appreciated!

Airshow,
thanks for the explanation, it is clearer now. I used your code and it works a treat http://www.antobbo.webspace.virginmedia.com/javascript_tests/2011_05_26/test.htm
although there are few things that I don't understand. I googled it but I couldn't find much: when you say

myImages.current = 0;

and

myImages.current = randomNumber;

what's that "current", is it an attribute standing for "current image"? I couldn't find any reference anywhere.
Also when you say

var randomNumber;
		while( myImages.current === (randomNumber = Math.floor(Math.random()*myImages.length)) ){ ; }

the loop basically says "while a new image is equal to the current do nothing"...but how do you come out of it?
thanks

Airshow,
thanks for that and the code - which is a bit advanced for me but I will study it carefully.
ABout the issue of images transition, sorry to labour the point, but I am not too sure it depends solely on the type of graphic card or the size of the picture. I actually think that there is some error in my code. The reason is that I have a fairly good graphic card but the image transition is not smooth at all. Let me show you this example which should hopefully clarify the matter, or maybe confuse it. If we compare my script here http://antobbo.webspace.virginmedia.com/javascript_tests/2011_05_26/test.htm
with another version (somebody else did this script for me and I really don't want to merely copy it but I want to some how do it myself) http://antobbo.webspace.virginmedia.com/photography/home.htm
you surely will see the difference. The picture size is the same but the transition effect is different.
The second script is in essence this:

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

<script type="text/javascript">

  var preloads=[];


function preload(){


for(var i=0;i<arguments.length;i++) {
  preloads[preloads.length]=new Image();
  preloads[preloads.length-1].src=arguments[i];

  }

 }

preload('images/test1.jpg','images/test2.jpg','images/test3.jpg');

  var delay=4000; //call function "displayImages()" 4 every seconds
  var temp;
  var test=true;
  var randomNumber;

function displayImages() {

  test==true?(test=false,out()):(test=true,ink());

 }

function out(){
  setTimeout(function(){displayImages()},delay);
  $("#pic").fadeOut(delay)
 }

function ink(){
  randomNumber=Math.floor(Math.random()*preloads.length);
if(randomNumber==temp) {
  return ink();
 }
  temp=randomNumber;

  document.getElementById('pic').src=preloads[randomNumber].src;
  setTimeout(function(){displayImages()},delay);
  $("#pic").fadeIn(delay)
 }
  window.addEventListener?
  window.addEventListener('load',displayImages,false):
  window.attachEvent('onload',displayImages);
</script>

</head>
<body id="page_body">

<div class="wrapper"> <!-- MAIN CONTAINER -->

<div class="wrap_content"> <!-- BOX FOR CONTENT-->
<div class="banner"> …

Hi Zero13,
well the transition is smooth only for the first 2 images, and it seems to go on a 2-by-2 basis, as in when you load the page the first picture fades out and the second one fades in fine, but the third suddenly appears on the screen, then fades out nicely and the third fades in nicely...the again the 4th appears suddenly...if you let it run you will see : - )
Basically I would like all the pictures to fade in and out

HI there,
I wonder if anybody can give me a hand with this.
I am writing a script which will allow me to swap some images (using also jquery to give the fading effect) but things are not quite working the way they should. I am really new to javascript and to jquery, and even if I am reading tutorial and try to practice my code is still a bit dodgy.
Now, this is what I came up 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-Type" content="text/html;charset=ISO-8859-1">

<title>Photography Home</title>

<link rel="stylesheet" type="text/css" href="containers.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
<!--

var myImages=new Array("test1.jpg", "test2.jpg", "test3.jpg");
var temp;

function swapImages()
{
var randomNumber=Math.floor(Math.random()*myImages.length);

if(temp==randomNumber) //so that the picture inserted is always different

{
return swapImages()
}

temp=randomNumber;

imageOut(randomNumber);

  }



function imageOut(number)
{


$("#picture").fadeOut(2000);
imageIn(number);



}


function imageIn(imageGenerated)
{

document.getElementById('picture').src = myImages[imageGenerated];



  $("#picture").fadeIn(2000);

setTimeout("swapImages()",2000);
}



//-->
</script>

</head>

<body id="page_body" onload="swapImages()">

<div class="wrapper"> <!-- MAIN CONTAINER -->
<p>
<img src="test1.jpg" id="picture" alt=" ">
</p>
</div>




</body>

</html>

The rest of the code with images and css is on a test site here: http://antobbo.webspace.virginmedia.com/javascript_tests/2011_05_26/test.htm
What I have done in the code is to create 3 functions: swapImages(), imageOut(), imageIn() and pass a parameter to the functions which I will eventually use to swap the images.
Now, the problem is that the transition from one image to another, as you can see in from the above …

Ok I run a quick test to try to get this image thingy to work, but still no luck at all.
I attach the code, sure my javascript is dodgy...
test.htm page:

<!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-Type" content="text/html;charset=ISO-8859-1">



<script type="text/javascript">
<!--
function swapImages()
{
var myImages = new Array("test1.jpg","test2.jpg","test3.jpg");



for (randomImage = Math.floor(Math.random()*myImages.length); randomImages<3; randomImages++)
{
document.write(myImages[randomImage]);
}
}
//-->
</script>

<title>Photography Home</title>

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

</head>

<body id="page_body" onload="swapImages()">


<div class="wrapper"> <!-- MAIN CONTAINER -->

</div>




</body>

</html>

CSS containers.css:

@charset "utf-8";
* /* overall settings*/
{
margin:0;
padding:0;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

.wrapper /* main container */
{
width:900px;
min-height:600px;
/*background: #000000 url(test1.jpg) no-repeat;*/
}

Images attached, everything is the same folder
in my javascript I attempted to load a different image everytime the page is refreshed (now this is not what I eventually have but I suppose it is a good starting point, at least I try to understand a bit more about JS. Eventually I would like to add some jquery so that I can have a sort of slideshow, with images gradually disappearing evry 5-10 secs).
So I created a function swapImages() , copied the array elements in a variable, then the for loop should loop through the images and the document.write(myImages[randomImage]); should ideally display the images...but obviously that doesn't happen, anybody can give me a hand please?
thanks

cool now it is clearer, thanks for your help guys, always great : - )

Hi there, I am trying to create an image gallery on my home page http://www.antobbo.webspace.virginmedia.com/photography/home.htm
which gets displayed in the canvas. Ideally I would like to add some jquery to have a smooth transition between the images but I am getting a bit lost.
First of all I want to make sure that the images alternate, no matter the jquery for the time being, but I am having problems with that too
Here's the relevant code:
-the canvas(created in the containers.css) is:

.picture_box_home
{
clear:both; /* need to add this to make sure the navigation doesn't overlap it. Strangely, this doesn't happen in IE*/
/*background-color:red;*/
border:7px solid #7d003a;
width:716px;
min-height:541px;
margin:0 auto;
position:relative;

/*background: #000000 url(../images/test1.jpg) no-repeat;*/
}

.in_pic
{
border:4px solid white;
width:708px;
min-height:533px;
margin:0 auto;
position:absolute;

}

.in_pic1
{
border:4px solid #7d003a;
width:700px;
min-height:525px;
margin:0 auto;
position:absolute;
/*background: #000000 url(../images/test1.jpg) no-repeat;*/

}

In my html page (in the <body></body> )I have the script:

<script type="text/javascript">

function swapImages()
{
var myImages = new Array("images/test1.jpg", "images/test2.jpg", "images/test3.jpg");
randomImage = Math.floor(Math.random()*myImages.length);

	document.write(myImages[randomImage]);
	

}
</script>

Now, the images are not displaying, is it because I got the script wrong and because I have that "funny" situation with boxed layered up in the css?

any help much appreciated
thanks

thanks for that. I don't know much about php sorry so i might need some explanation : - )
I tried your second method but the page doesn't seem to validate (surely it's me doing something silly) but thinking of it I would like to give a go to the first method, but I would like to understand it correctly. Basically it displays a "back link" to the referrer wihch is the page you came from. Although I don't quite understand the structure of it. with the isset() function we check that the array server contains the referrer page: if it does we display "back" that brings me back to the referrer page, if not...ehm...brings me back as well (don't know what

javascript<b></b>:

means...)
Also where should all this go in the php file?
thanks

I see thank you for that. SO auto can then be mixed with other values as in

margin:50px auto;

I solved the problem adding some margin-bottom to the navigation menu rather than assign a margin-top to the box itself if that makes sense, but I'm slightly puzzled as to why when I have

margin:50px auto;

assigned to my red box it does work only in IE as mentioned...odd

Arkinder,
thanks that worked a treat. I thought that floating the line left would have been beneficial, but clearly it created only problems. what's odd to me though is the fact that it was only Chrome misbehaving, when usually - at least in my short coding experience - if something happens in chrome, firefox follows suit
thanks again

HI there,
I am some problems creating a redirect from a php file.
Now, here's teh problem. On my site - let's take this page - http://antobbo.webspace.virginmedia.com/webediting/content.htm I have a comment form that sends me an email everytime somebody submits the form. Now, the php file is configured so that if I send submit the form from any page of my website the user is then redirected to the home page after 5 seconds.
Here's the php file:

<!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-Type" content="text/html;charset=ISO-8859-1">
<meta http-equiv="REFRESH" content="5;url=http://www.antobbo.webspace.virginmedia.com/webediting/home.htm">
<link rel="stylesheet" type="text/css" href="style.css" >

<title>Thank you</title>
</head>
<body>
<div id="wrapper">



<!-- BANNER STARTS HERE -->
<div id="banner">
<h1>Web editing - Livelink WCM</h1>
</div>
<div id="text_navigation">
<?php
$to = "antobbo@gmail.com";
$subject = "Comments on page";
$message = $_POST["comments"];

mail($to,$subject,$message);
echo "<h2>Thank you</h2><p><br><br>Thank you for sending your feedback. That will help me improve the website.<br><br></p>";
?>
</div>
</div>
</body>
</html>

What I am trying to do is to make sure that if you submit the form from page A then the php files redirects you to page A and not to the home page. In the case above if I submit the form from the "Content issues" page I want the redirect to bring me back to that particular page.
I was taking a look around and reading a bit about this. I haven't written any code yet, and I was wondering if the php …

Hi tawes01,
thanks for that. From past experience and from what I read on the net you can have something like

margin:0 auto;

which center the element it is referred to and makes sure that the top and bottom margins are 0; I have never encounter a problem using that till now. If I do have

margin: auto;

doesn't that mean that all the margins will be taken care by the browser? I haven't tried yet (but sure I will) but if I remove auto then all the margins will be 0 which means that my box won't be centered anymore...

Hi there,
I have a strange problems with margins. On this website http://antobbo.webspace.virginmedia.com/photography/home.htm I am trying to have some space between the top navigation and the red box. Now in my stylesheet containers.css the red box (class name picture_box_home) has margin:0 auto; which is rendered fine in all browsers.
On this test example instead http://antobbo.webspace.virginmedia.com/photography/testing/home.htm I gave the box margin:50px auto; but it works only in IE 7 and 8, and I don't understand why. Firefox and chrome seems to take no notice whatsoever of that. Is there anything I am missing I wonder?
And there's more: if I go over 80px the box snaps back up to the original position even in IE. It seems to accept any margin up to 80px, but if I go 90px it stops working...I am a bit confused I must admit...

thanks

Hi there,
I have a problem with how the text, especially headings are positioned on my site http://www.antobbo.webspace.virginmedia.com/webediting/testing/our_web_standards.htm. When I look at the website from my dell laptop (resolution 800x600) everything seems fine in all the browsers except chrome where the headings are at the same level as the top navigation. When I do that from my netbook samsung nc10 (resolution 1024x600) then in all the browsers except IE7 the heagings are at the same level as the top navigation, screenshot attached.
In the CSS the relevant bits are:

/* Horizontal line */
 
#horizontal_line

{
clear:both;
color:#81a594;
background-color:#81a594;
height:0.35em;
width:100%;
float:left;
margin-top:0.35em;
margin-bottom:1em;
border-style:none; /*Firefox seems to have a little border, so I removed it altogether */
}

#text_navigation //which represents the text from the heading to the end

{
margin-right:15px;
margin-left:15px;
/*background-color:yellow;*/ 
margin-top:10px;
}

#homepage_text_navigation//same as above but just for the home page
{
	margin-right:175px;
	margin-left:10px;
	margin-top:38px; /* The minimum margin-top so that the heading is displayed ok in chrome */
}

in #homepage_text_navigation if I keep the top margin to 38px then everything is fine, the headings displays ok. But as you can see from the above code in #text_navigation the top margin has 10px and as said it seems to be causeing problems to the heaings in certain browsers. Setting the margin to 38px partly solves the problems: the headings are displayed ok but if I then go back to my dell laptop and look at the site in IE there is …

Hi Zagga,
yes the validation is not passed but I don't get any message at all. Simply if I don't input anything and press send I get the thank you page.
I have made the amendments you suggested but still no joy. Here's the offending page:http://www.antobbo.webspace.virginmedia.com/webediting/testing/bold_and_other.htm
If you disable javascript you'll see that nothing has unfortunately changed.
No I don't get any error message
thanks

Hi there, I wonder if you could help me with some form validation please. Here's the problem:
at the bottom of this page http://www.antobbo.webspace.virginmedia.com/webediting/testing/bold_and_other.htm - still testing at the moment - there is a contact form. When javascript is enabled you can call the form with a button and then upon submission another javascript validates it. If a user has javascript off, I have the same form that comes up on the page but obviously it doesn't validate. Now, I had a look around and many people say that the only way to validate the form in those circumstances will be PHP.
Personally I think I shouldn't even provide an alternative to javascript because nowadays when probably the majority of users have broadbands, I cannot see too many reasons to switch javascript off in your browser. However, if the community says that it is still good practice then, so be it.
So, to get back to my form, here's the PHP file the form (both the one that comes up when you browse the page with javascript on and off) gets sent to:

<!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-Type" content="text/html;charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="style.css" >

<title>Thank you</title>
</head>
<body>
<div id="wrapper">



<!-- BANNER STARTS HERE -->
<div id="banner">
<h1>Web editing - Livelink WCM</h1>
</div>
<div id="text_navigation">
<?php
$to = "antobbo@gmail.com";
$subject = "Comments on page";
$message = $_POST["comments"];

mail($to,$subject,$message);
echo "<h2>Thank you</h2><p><br><br>Thank you for sending …

Ok I think I cracked it! Still don't know the reason why the two buttons are not on the same line, but if I put both in a div give it an id , hide it as a default and then display it using javascript, the two buttons are back on the same line.
here's the code for the text and buttons:

...
<!--THIS BOX WILL BE DISPLAYED ONLY TO USERS WITH JAVASCRIPT OFF-->
<div class="box" id="noJava"><h1>Bad usage of bold</h1>
<p><br><br>Headings are often not given the right importance...and the right order either.<br><br>
<strong>In Livelink you will find 3 styles: Heading 1, Heading 2 and Heading 3</strong>. Use them. <strong>Search engines use them to rank the pages so try to get them right and make sure they are descriptive enough.</strong><br><br>
The <strong>order you use them is also important. Heading 1 should come first, followed by Heading 2 and Heading 3. </strong>Generally speaking <strong>Heading 1 is the main heading on your page; Heading 2 is the "main sections" heading(which means that you can have as many Headings 2 as you need for as many main sections you have) and Heading 3 is for the subsections of the main sections</strong> (again you can use as many Heading 3 as you need for as many subsections you have).<br><br>
<strong>Only one Heading 1 is allowed on a page(that is the overall heading).<br></strong> 
This is how you create dependencies among different sections of your content on a page:<strong> when you use Heading 3 is …

no that's just to add a line break. Basically if javascript is off there will be 2 boxes appearing on the page: one - which is there even when javascript is on - and the other one. The

<p><br></p>

simply adds a space between the two.
The problem with the 2 buttons happened straight away after I included the code to hide them when javascript is off.
The original code - with no problems to the buttons - is the following.
javascripts:

...
function changeBold()
{
	document.getElementById('bold_right').style.display='none';
	document.getElementById('bold_wrong').style.display='block';
}

function resetBold()
{

document.getElementById('bold_wrong').style.display='none';
document.getElementById('bold_right').style.display='block';
	
}
//-->
</script>

<!--WHEN USERS HAVE JAVASCRIPT OFF -->
<script type="text/javascript">
<!--
function no_javascript()
{

	document.getElementById('noJava').style.display='none';


}

//-->
</script>

</head>
<body onload="no_javascript()">
...

and the div :

...<div class="box">
<div id="bold_right">
<h1>Bolded paragraph</h1>
<p><br><strong>bla bla bla</strong> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla <strong>bla bla bla</strong> bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
</div>
<div id="bold_wrong" style="display:none;">
<h1>Bolded paragraph</h1>
<p><br><strong>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla …

Kraai, yes it works fine, thanks for the advice. There is only one thing though that I don't understand. When I applied your trick I also decided to hide the buttons (which makes sense because if javascript is off they won't work) but I had a side effect and I am not sure how to amend that.
Have a look at the buttons under the box here http://www.antobbo.webspace.virginmedia.com/webediting/bold_and_other.htm they are one next to the other one but when I changed the code slightly to hide them in here http://www.antobbo.webspace.virginmedia.com/webediting/testing/bold_and_other.htm
they are one below the other one, and it is driving me crazy because I don't seem to be able to fix this...how is that?
thanks

Apologies...it works, I will do some more testing before posting again

Hi Kraai,
thanks for your suggestion. I tried to put that in action but it doesn't seem to work - I am sure I have done something wrong!
Anyway, here is the page I wanted to apply the above http://www.antobbo.webspace.virginmedia.com/webediting/testing/bold_and_other.htm
I have a box with some content that changes when you click the "bold it!" or "reset" button and I have placed the javascript in the head :

<script type="text/javascript">
<!--
function no_javascript()
{

	document.getElementById('noJava').style.display='none';

}

//-->
</script>

then in the body :

<body onload="no_javascript()">

and finally the div :

<div id="noJava"><p>this should display only when javascript is off!</p>
</div>

but "his should display only when javascript is off!" but that's there all the time. I was even thinking to hide the buttons...
Can't quite get what I have done wrong...sorry
thanks

Hi peeps,
I have a question about accessibility
Now, this is the website I am working on http://antobbo.webspace.virginmedia.com/webediting/tables.htm and my question is about the best way to make sure that people with their javascript off can enjoy the same benefits as those having javascript on and if there is anything in the HTML code/CSS that I can do to achieve that
The above page has few javascripts: the second table and the comment form at the bottom.
Let's start with the box. At the moment it has 2 buttons but I also provided a link at the bottom of the page that has the same functionality of the script, id shows you the table in the box as if it had borders. Now, is there an accessible way that I can somehow display both versions of the table (with and without borders) in the page only to people with javascript off instead of providing a link to another page as I have done? Something like if javascript is off then display the 2 versions of the table in 2 separate boxes - sorry but I really don't know how to implement that.

Pretty mush the same thing for the form at the bottom of every page. If you click on the "comment" button then a form pops up and you can send the comment through. Is there a way that I can say in the code

if and only if javascript's off …

that's great, thank you all, now it is all clear :)

Thanks guys, and I read the example WaltP but I am still a little confused. So fundamentally, srand( time( ) ) gets a number from the clock and then it passes it to rand() ?
Like in the card program line 34 gets a random number from the clock (why does it say 0 though?) and then passes it to line 48 and 49. But the number I need need to be respectively smaller than 4 and 13, so what happens if the number that we get from the clock is bigger than those? (I have got the feeling that is a stupid question, so sorry in advance!)
cheers

Hi there, I have a really quick question about a shuffling and dealing cards program I found in a book.
here's main:

// Fig. 8.27: fig08_27.cpp
// Card shuffling and dealing program.
#include "DeckOfCards.h" // DeckOfCards class definition

int main()
{
   DeckOfCards deckOfCards; // create DeckOfCards object
   
   deckOfCards.shuffle(); // shuffle the cards in the deck
   deckOfCards.deal(); // deal the cards in the deck
   return 0; // indicates successful termination
} // end main

Member functions:

// Fig. 8.26: DeckOfCards.cpp
// Member-function definitions for class DeckOfCards that simulates
// the shuffling and dealing of a deck of playing cards.
#include <iostream>
using std::cout;
using std::left;
using std::right;

#include <iomanip>
using std::setw;

#include <cstdlib> // prototypes for rand and srand
using std::rand;
using std::srand;

#include <ctime> // prototype for time
using std::time;

#include "DeckOfCards.h" // DeckOfCards class definition

// DeckOfCards default constructor initializes deck
DeckOfCards::DeckOfCards()
{
   // loop through rows of deck
   for ( int row = 0; row <= 3; row++ )
   {
      // loop through columns of deck for current row
      for ( int column = 0; column <= 12; column++ )
      {
         deck[ row ][ column ] = 0; // initialize slot of deck to 0
      } // end inner for
   } // end outer for
   
   srand( time( 0 ) ); // seed random number generator
} // end DeckOfCards default constructor

// shuffle cards in deck
void DeckOfCards::shuffle()
{
   int row; // represents suit value of card
   int column; // represents face value of card …

yes I am aware of it , and you're the second person that is suggesting me to use it :). My argument against that though, is that, presumably, to use jquery I need to know javascript first, and quite well, or not?