Lucy

Ah, that makes sense. In your solution, you use the function inside the function - is that intentional, and if so, is it commonly done? I didn't actually expect that to work, but it does and doesn't show any errors, I'm just surprised that it can tell what the function is. If that makes sense.

Okay, thanks for the advice. I'll work on it...

 

... and as far as fadeInCancel goes... why would you ever want to cancel a fade?

 

 

Because if the slideshow is paused, I want it to stop on the image it's at, not wait a few seconds and fade it out most of the way and then stop - it looks ridiculous.

?

Did none of my post make sense...?

Edit - For some reason only the question mark in your post showed up before.

I'm not seeing that? It only calls x if you click play again.

Following on from my previous topic here: (Which it appears it breaks my post if I link to it...) I decided to do another online course and practice some more. I am now back to doing a slideshow with pictures/info about various dogs (for practice). Code is below. The problem is that when it is paused, it's supposed to completely stop the fade in/out (whichever it was about to do) and allow it to continue when unpaused - and what's actually happening, is it starts/continues the effect it was supposed to stop, barring the very last 'timeout' (resulting in it stopping at a mostly-faded image). There are a few other problems with it, but that's the one I'm concerned with at the moment. I'm thinking clearTimeout might not be the best way to do this, maybe prevent the function from happening at all?

If anyone can suggest anything, that'd be great. I don't actually need this for anything, so I'm not looking for code that has already been written to copy - really want to get this working with as little help as possible.

(If you need to view the HTML, I can post that too). Thanks!

"use strict";var box = document.getElementById("slideshowbox");var imageHolder = document.getElementById("slideimage");var captions = document.getElementById("captions");var para = document.createElement("p");var pp = document.getElementById("pauseplay");var back = document.getElementById("back");var forward = document.getElementById("forward");var oddeven = 0;function dog(name, age, breed, gender, imagesrc)	{	this.name = name;	this.age = age;	this.breed = breed;	this.gender = gender;	this.image = imagesrc;	this.showInfo = function()	{		para.innerHTML = '';		imageHolder.innerHTML = '';		var picture = document.createElement("img");		picture.setAttribute("src", this.image);		picture.setAttribute("alt", this.name);		imageHolder.appendChild(picture);		para.appendChild((document.createTextNode('Name: ' + this.name)));		para.appendChild((document.createElement("br")));		para.appendChild((document.createTextNode('Age: ' + this.age)));		para.appendChild((document.createElement("br")));		para.appendChild((document.createTextNode('Breed: ' + this.breed)));		para.appendChild((document.createElement("br")));		para.appendChild((document.createTextNode('Gender: ' + this.gender)));		captions.appendChild(para);	}}var bernie = new dog('Bernie', '2 yr', 'Bernese Mountain', 'm', 'images/bernese.jpg');var fiona = new dog('Fiona', '5 yr', 'Dalmation', 'f', 'images/dalmation.jpg');var malty = new dog('Malty', '10 yr', 'Leonberger', 'm', 'images/leonberger.jpg');var shep = new dog('Shep', '8 months', 'German Shepherd', 'm', 'images/alsation.jpg')var dogs = [bernie, fiona, malty, shep];function slideShow()	{var fadeInCancel;var fadeOutCancel;var fadeInWasCancelled = false;var fadeOutWasCancelled = false;var fadeCounter;function fadeIn()	{	fadeInCancel = setTimeout(function()	{box.style.opacity="0.00"}, 1000);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.06"}, 1050);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.12"}, 1100);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.18"}, 1150);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.24"}, 1200);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.30"}, 1250);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.36"}, 1300);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.42"}, 1350);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.48"}, 1400);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.54"}, 1450);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.60"}, 1500);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.66"}, 1550);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.72"}, 1600);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.78"}, 1650);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.84"}, 1700);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.90"}, 1750);	fadeInCancel = setTimeout(function()	{box.style.opacity="0.96"}, 1800);	fadeInCancel = setTimeout(function()	{box.style.opacity="1.00"}, 1850);	fadeCounter = true;}function fadeOut()	{	fadeOutCancel = setTimeout(function()	{box.style.opacity="1.00"}, 4150);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.96"}, 4200);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.90"}, 4250);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.84"}, 4300);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.78"}, 4350);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.72"}, 4400);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.66"}, 4450);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.60"}, 4500);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.54"}, 4550);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.48"}, 4600);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.42"}, 4650);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.36"}, 4700);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.30"}, 4750);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.24"}, 4800);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.18"}, 4850);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.12"}, 4900);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.06"}, 4950);	fadeOutCancel = setTimeout(function()	{box.style.opacity="0.00"}, 5000);	fadeCounter = false;}pp.onclick = function()	{	function pause()		{		clearTimeout;		console.log('Paused');		pp.value = 'Continue';		//Only seems to cancel the last timeout in the function		if (fadeCounter === false)	{			clearTimeout(fadeInCancel);			fadeInWasCancelled = true;		};		if (fadeCounter === true)	{			clearTimeout(fadeOutCancel);			fadeOutWasCancelled = true;		};	}	function play()	{		console.log('Continued');		pp.value = 'Pause';		timing = setInterval(x, 5000);		if (fadeInWasCancelled === true)	{			fadeIn();		};		if (fadeOutWasCancelled === true)	{			fadeOut();		};	}	if (oddeven % 2 === 0)	{	pause();	}	else	{	play();	};	oddeven++;};var counter = 0;	function x()	{		forward.onclick = function()	{			if (counter >= dogs.length)	{				counter = 0;			};			counter = counter + 1;			if (counter >= dogs.length)	{				counter = 0;			};			dogs[counter].showInfo();		};		back.onclick = function()	{			console.log('Going backward');			counter = counter - 1;			if (counter < 0)	{				counter = dogs.length -1;			};			dogs[counter].showInfo();		};				if (counter < dogs.length)	{					if (fadeOutWasCancelled === false)	{						fadeOut();					};					counter++;					if (counter >= dogs.length || counter < 0)	{					counter = 0;					console.log('Restarting...');					};					captions.innerHTML = '';					dogs[counter].showInfo();					if (fadeInWasCancelled === false)	{						fadeIn();					};				};	}var timing = setInterval(x, 5000);}slideShow();

Thank you for the link - but I don't want to just copy what someone else has done. Just want to understand what is wrong with my code.

Edit - right, I get what's happening now.

y[hiCounter] = text.substring(a, b+1);

^ That returns the actual, literal substring, which isn't what I was trying to do. I wanted it to keep it as text.substring[...]. :/

I've written this code for a function which will look through text and find a search term, state how many times it was found and now, hopefully, highlight every instance. Having some trouble with the highlight part. It's supposed to highlight every letter of the search term as it finds it, but is in fact only highlighting the very first instance of the search term - after that, it appears to go back through the first instance of the term instead of continuing through the text with the rest of the stuff. Sorry, I might edit this tommorow so it makes more sense, it's my bed time soon

Any idea where I've gone wrong?

Code:

"use strict";var div = document.getElementById("main");var para = document.createElement("p");var br = document.createElement("br");var inputBox = document.getElementById("searchterm");var text = document.getElementById("searchable").innerHTML.toLowerCase();var num = [];document.forms[0].onsubmit = function(event)	{	event.preventDefault();	para.innerHTML = '';	num.length = 0;	var hiCounter = 0;	var y = [];	var userInput = inputBox.value.toLowerCase();		for (var a = 0; a < text.length; a++)	{			if (text[a] === userInput.substring(0,1))	{				for (var b = a; b < (userInput.length + a); b++)	{					if (text.substring(a, userInput.length + a) == userInput)	{						num.push(text[b]);						var highlight = '<span>' + text.substring(a, b+1) + '</span>';						y[hiCounter] = text.substring(a, b+1);						var q = text.replace(y[hiCounter], highlight);						hiCounter++;						document.getElementById("searchable").innerHTML = q;					}				}			}		}	//Display results here	var result = num.length / userInput.length;	var searchInfo = document.createTextNode('You searched for: ' + userInput);	var searchResult = document.createTextNode('Found ' + result + ' times');	para.appendChild(searchInfo);	para.appendChild(br);	para.appendChild(searchResult);	div.appendChild(para);};

Also, I know it's not that useful and the browser has a much better function built in, but I'm just doing this for practice.

Thanks for any and all help.

Thanks for the help - got it figured out now.

Davej -

No, this is just a really simple and not very useful search function I've made for practice. It just searches a given paragraph and tells you how many times the search term was found. I'm also implementing highlighting.

I'm working on a search function. I have a paragraph and an input field beneath it for a user to type a search term into, which should then be stored as a variable upon submitting. This should be really simple, right? It doesn't work though. If I set a default value, it uses that as the variable, otherwise I get 'an empty string' - it just won't save what has been typed in. Here's the HTML for the search box and submit button:

<input type="text" name="term" id="searchterm" /><input type="submit" name="enter" value="Enter" />

And for the variable to be used to search with:

var searchTerm = document.getElementById("searchterm").value;

I've tried variations and even tried to use a function for the onsubmit event, but nothing works. I think I sort of get why it shouldn't work - once the information is submitted the page will reload which will reload the Javascript, and it can only get the value the input box has at the time of the page load... but Google results seem to say it should work anyway. As usual, I'm probably missing something. Can anyone help?

Many thanks

 

If this is a "tutorial" someone actually posted I'd say they are pretty clueless.

Sorry, I probably wasn't very clear. I meant I'm learning using a video tutorial - this code, however, is my own, based on the code used in the tutorial for an image slideshow. I've been trying out my own stuff as I go along to try and make sure I understand it properly. I thought I could try adding this text in under each image as it goes along. If that makes sense. It seems this was probably a bit too complicated for me at the moment though. I might just try starting from the beginning of the tutorial again - evidently I don't understand the basics yet.

It's looping through each of them, but this line:text.innerHTML = textcontent;is overwriting whatever is in that element every time. So the second one overwrites the first one, the third one overwrites the second one, etc. So you only get the last one. Maybe you should clear the content of that element to start with, and then append text to it instead of overwriting. You could clear the content in the print function before the loop.

Yeah, I thought that might be it. So you're saying use a text node instead of the innerHTML method? I just don't know what to do about the line breaks, with that :/

Davej - not sure what you mean by having an index, but I'll look it up.

The problem I'm now having is that, with the interval set now, it displays only the last object in the array (dog4) and afterwards I get the error: manydogs[captionindex] is undefined (over and over). Any ideas? New code is below:

var text = document.getElementById("caption");var dog1 = {name : 'Bernie', breed : 'Bernese Mountain', ###### : 'male', age : '2'} ;var dog2 = {name : 'Fiona', breed : 'Dalmation', ###### : 'female', age : '10'} ;var dog3 = {name : 'Malty', breed : 'Leonberger', ###### : 'male', age : '5'} ;var dog4 = {name : 'Shep', breed : 'German Shepherd', ###### : 'male', age : '9'} ;var manydogs = [dog1, dog2, dog3, dog4];var captionindex = 0;function doginfo()	{	var textcontent =  'Name: ' + this.name + '<br/>' + 	'Breed: ' + this.breed + '<br/>' + 	'######: ' + this.###### + '<br/>' + 	'Age: ' + this.age + '<br/>';	text.innerHTML = textcontent;}function print()	{	for (var captionindex = 0; captionindex <= manydogs.length; captionindex++)	{		manydogs[captionindex].output = doginfo;		manydogs[captionindex].output();	}	if (captionindex >= manydogs.length)	{		captionindex = 0;	}}var timing = setInterval(print, 2000);document.onclick = function()	{	clearInterval(timing);};

Oh... right - okay. Thank you.

But what's wrong with it? The variable is already declared, so surely I don't need to do so again - there's a condition there too. I can't see how anything is missing/written incorrectly?

I'm trying to create a slideshow with text underneath it (for no reason other than testing what I've learned. Disclaimer: I'm using a video tutorial for the most part)

The text I want is the part I'm struggling with. I've not even added in the interval thing yet to make it rotate. Here's what I've got:

var text = document.getElementById("caption");var dog1 = {name : 'Bernie', breed : 'Bernese Mountain', ###### : 'male', age : '2'} ;var dog2 = {name : 'Fiona', breed : 'Dalmation', ###### : 'female', age : '10'} ;var dog3 = {name : 'Malty', breed : 'Leonberger', ###### : 'male', age : '5'} ;var dog4 = {name : 'Shep', breed : 'German Shepherd', ###### : 'male', age : '9'} ;var manydogs = [dog1, dog2, dog3, dog4];var captionindex = 0;function doginfo()	{	var textcontent =  'Name: ' + this.name + '<br/>' + 	'Breed: ' + this.breed + '<br/>' + 	'######: ' + this.###### + '<br/>' + 	'Age: ' + this.age + '<br/>';	text.innerHTML = textcontent;}function print()	{for (captionindex <= manydogs.length; captionindex++	{		manydogs[captionindex].output = doginfo;		manydogs[captionindex].output();	}}print();

Firebug made me put a semicolon at the end of the for statement. I'm pretty sure that doesn't need to be there, but it insisted.

I don't get any errors, but it just doesn't work. I've tried changing it in all sorts of ways and nothing appears in the div specified. I'm sure I've just done this in completely the wrong way and the code's a mess, though. Honestly though, it seems like it should work. Can anyone help?

Kind of want to just give up learning Javascript right now - I doubt anyone else finds it this confusing.

Oh my... haha... the hashes are covering up another word for 'gender'.

sorry change

 

formfield[i].style.color="red"

 

TO

 

this.style.color="red"

Thanks - works now

Davej and Thescientist -

Thank you for the help. I get it now.

Still getting 'TypeError: formfield is undefined'

 

It isn't completely clear to me what you wish to do.

 

Are you saying that when you click in a form you want all of the input fields in that form to have red text?

Well, I just thought that this:

var formfield = document.getElementsByTagName("input");

could be used to do whatever I wanted to all of the input fields. Like how you'd apply styles in css, just by using 'input' rather than having to target every single field. I suppose I'm just thinking about this in the wrong way.

dsonesuk -

Thanks, that's very helpful.

Edit - actually, it doesn't seem to be working :/ Apparantly a parenthesis was missing and now it's saying 'formfield.onclick is not a function' - and after some adjustment 'formfield is undefined'

Ok, I see. So you can't target all input fields at once?

So, I'm learning Javascript and tried out some code.

I'm not completely sure how to describe this. But, if I try to use onclick with a specific element, and the action for that is applied to that same element, it doesn't work. Here:

var maindiv = document.getElementById("main");var formfield = document.getElementsByTagName("input");function myfunction ()		{	maindiv.style.color="red";}formfield.onclick = myfunction ();

That works ^

var maindiv = document.getElementById("main");var formfield = document.getElementsByTagName("input");function myfunction ()		{	formfield.style.color="red";}formfield.onclick = myfunction ();

That doesn't ^

I'm very confused. Sorry about the rubbish explanation. Can anyone help? Thanks!

Ah... I had thought it might be possible to learn them at the same time. Okay. I'll deal with PHP first then.

This is embarassing. I've tried to look into SQL and have started the W3schools tutorial, but I'm confused - where exactly do you put the code (in your own project, I mean - the tutorial has in-browser examples)? I know, it's probably obvious - sorry! I have PHPmyadmin if that helps.

Great, I understand now. Thanks very much!

I've got a class called .portfoliotext and have styled images inside that like so:

.portfoliotext img	{		max-width:80%;		border:.5rem #95B0B2 solid;		margin:3% auto 3% auto;		display:block;	}

I want the border colour (ONLY for hyperlinked images) to change on hover, which should be simple, but I don't think I'm getting the syntax right. Here's what I've tried:

.portfoliotext img a:hover	{		border:.5rem #FFFFFF solid;	}

and

.portfoliotext img:a:hover	{		border:.5rem #FFFFFF solid;	}

Help?

EDIT:

Okay, apparantly it needs to be

.portfoliotext a:hover img

Though I don't understand why. Surely

.portfoliotext img a:hover

Or similar, should mean hovered linked images within the div? :/

I have a comments.php file for a Wordpress theme I'm working on which has the following error:

 Notice: in C:.................comments.php on line 1

What's that supposed to mean? It looks like it's missing something...

Is it okay (and valid html) to use a label outside of a form? I'm only talking just above the form itself. It's for design reasons.