I have this javascript slideshow which is working fine with the pause/play option:
<html>
<head>
<title>Simple Javascript Slideshow</title>
<script type="text/javascript">
var i = 0, imgsrc = new Array(), preload = new Array();
imgsrc[0]="photos/image1.png";
imgsrc[1]="photos/image2.png";
imgsrc[2]="photos/image3.png";
for (var j=0;j<imgsrc.length;j++)
{
preload[j] = new Image;
preload[j].src = imgsrc[j];
}
function mode(param)
{
smode=param;
}
function startSlideshow()
{
if(smode=="play")
{
document.getElementById("play").disabled="disabled";
document.getElementById("pause").disabled="";
document.getElementById("stop").disabled="";
document.getElementById("slideshow").src=imgsrc[i];
i++;
setTimeout("startSlideshow()",1000);
}
else if(smode=="pause")
{
document.getElementById("pause").disabled="disabled";
document.getElementById("play").disabled="";
document.getElementById("play").value="Resume";
}
else if(smode=="stop")
{
document.getElementById("play").disabled="";
document.getElementById("play").value="Play";
document.getElementById("pause").disabled="disabled";
document.getElementById("stop").disabled="disabled";
document.getElementById("slideshow").src=imgsrc[0];
i=0;
}
if(i==imgsrc.length)
{
i=0;
}
}
</script>
</head>
<body>
<img id="slideshow" src="photos/Aanimation-ir001.png" />
<br />
<input id="play" type="button" value="Play" onclick="mode('play');startSlideshow();" />
<input id="pause" type="button" value="Pause" disabled="disabled"
onclick="mode('pause');startSlideshow();" />
<input id="stop" type="button" value="Stop" disabled="disabled"
onclick="mode('stop');startSlideshow();" />
</body>
</html>
It would be great to have a rewind/forward (next/previous image) option to use with the pause-option.
Is that possible?
Kind Regards
You should be able to figure it out with your current code.
Here are some hints :
The image currently displayed is defined by this :
document.getElementById("slideshow").src=imgsrc[i];
If the currently displayed image has index i, what index does the next one have ? What about the previous one ?
Once you have solved this, you must bind your new function (or new case of your existing function) to your HTML markup, like you have done here :
<input id="next" type="button" value="Next" onclick="mode('next');" />
As a side note, you should pay attention to what happens if you're displaying the last (or first) image and press next (or previous).
Hope that helps.
Think I got it now:
This is what I got for the forward-option:
if(smode=="next")
{
document.getElementById("play").disabled="";
document.getElementById("pause").disabled="";
document.getElementById("stop").disabled="";
document.getElementById("next").disabled="";
document.getElementById("slideshow").src=imgsrc[i++];
}
And with the backward:
if(smode=="pre")
{
document.getElementById("play").disabled="";
document.getElementById("pause").disabled="";
document.getElementById("stop").disabled="";
document.getElementById("next").disabled="";
document.getElementById("slideshow").src=imgsrc[i--];
}
And to avoid going from 0 to -1, -2 and so on I got this:
if(i==-1)
{
i= 23;
}
BUT: When I press backwards it goes forward on the first click and then go backward on the second click?
Regards
Related
Below is my code which show me notice of inserting kill , fight, slap when i insert in the textbox.
But i want to block all inappropriate words possible in the textbox like f**k and so on. DO you guys have any ideas. Thanks
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="wrapper" style="width:600px; margin:0 auto;">
<h2></h2>
<input id="txtWords" style="width:300px;" />
<br />
<input type="button" id="btnCheck" onclick="fnCheckForRestrictedWords();" value="Check For
Restricted Words">
</div>
<script type="text/javascript">
function fnCheckForRestrictedWords() {
var restrictedWords = new Array("kill", "fight", "slap");
var txtInput = document.getElementById("txtWords").value;
var error = 0;
for (var i = 0; i < restrictedWords.length; i++) {
var val = restrictedWords[i];
if ((txtInput.toLowerCase()).indexOf(val.toString()) > -1) {
error = error + 1;
}
}
if (error > 0) {
alert('You have entered some restricted words.')
}
else {
// Your logic here
}
}
</script>
</body>
</html>
You need to define all "bad" words and put them in your blacklist. You can use some existing lists as a starting point for your list:
https://github.com/LDNOOBW/List-of-Dirty-Naughty-Obscene-and-Otherwise-Bad-Words/blob/master/en
https://github.com/dariusk/wordfilter/blob/master/lib/badwords.json
http://www.bannedwordlist.com/lists/swearWords.txt
http://www.frontgatemedia.com/new/wp-content/uploads/2014/03/Terms-to-Block.csv
Source: Reddit
If you want to include obfuscated "bad" words you may need to add the to the list as well.
The
includes()
method should work: txtInput.includes(restrictedWords[i]) which returns either true or false. You also want to include more bad words and different ways to write them
What I am trying is the following :
I have 2 buttons and one textfield (code you see below)
On the buttons there is a value on it : 0,20 and 0,05.
When you press one of the buttons the value should be displayed in the textfield and when you press one of those buttons again the value should be added to the current value.
Here is the code I have at the moment :
<input id="bedraggroot" type="button" value="0.20" onClick="b();">
<input id="bedragklein" type="button" value= "0.05" onClick="b();">
<p> Ingeworpen : <span id="toonbedrag"> Ingeworpen </span></p>
function b()
{
var bedrag1 = parseFloat(document.getElementById('bedraggroot').value);
var bedrag2 = parseFloat(document.getElementById('bedragklein').value);
var totaalbedrag;
if(bedrag1 == 0)
{
parseFloat(totaalbedrag)+ bedrag2;
}
if(bedrag2 == 0)
{
parseFloat(totaalbedrag) = totaalbedrag + bedrag1;
tussenbedrag = tussenb
}
document.getElementById('toonbedrag').innerHTML = totaalbedrag;
}
I already tried al bunch of stuff but nothing seem to work what I try.
without the parseFloat, with a + before it. (Read all those things in these forums)
Can someone help me out?
As you might know, I am just a beginner in these things.
Kind regards.
Instead of doing the if conditions, you should pass the button values to the function "b" (you should use more definitive names for the functions).
You are also doing the calculation wrong. "a + b" doesn't really store the result of the calculation, but "a = a + b;" does.
<input id="bedraggroot" type="button" value="0.20" onClick="b(this.value);">
<input id="bedragklein" type="button" value= "0.05" onClick="b(this.value);">
<p> Ingeworpen : <span id="toonbedrag"> Ingeworpen </span></p>
<script>
var totaalbedrag = 0;
function b(bedrag)
{
totaalbedrag = parseFloat(bedrag) + totaalbedrag;
document.getElementById('toonbedrag').innerHTML = totaalbedrag.toFixed(2);
}
</script>
"toFixed" removes the issue with float decimal rounding, described here: Javascript, weird floating point number endless decimal?
Try it out in here in jsfiddle
lots of issues here. You're not assigning parseFloat(totaalbedrag)+ bedrag2; and you're assigning something to the expression parseFloat(totaalbedrag) which should definitely fail and display something in the console.
Finally, you're assigning tussenb to tussenbedrag but neither was defined.
If the code you show above is complete - you're missing the script tag to mark it as code. See http://www.w3schools.com/html/html_scripts.asp
Please try below
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery 3D Falling Leaves Demo</title>
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
</head>
<body>
<input id="bedraggroot" type="button" value="0.20" onClick="b(this.value);">
<input id="bedragklein" type="button" value= "0.05" onClick="b(this.value);">
<p> Ingeworpen :
<input type="text" id="toonbedrag" value="0.0" />
</p>
<script>
function b(value)
{
var prevTotal = $('#toonbedrag').val();
var total=parseFloat(prevTotal) + parseFloat(value);
$('#toonbedrag').val(total.toFixed(2));
}
</script>
</body>
</html>
How can I make the button save visible when I click the edit button? This is my code so far, but it happends nothing. I'm working in a jsp
<INPUT TYPE="BUTTON" VALUE="Edit" ONCLICK="btnEdit()" class="styled-button-2">
<INPUT TYPE="BUTTON" VALUE="Save" ONCLICK="btnSave()" class="styled-button-2" style="visibility:hidden;" id="save">
<SCRIPT LANGUAGE="JavaScript">
function btnEdit()
{
{document.getElementsById("save").style.visibility="visible";}
}
</script>
DEMO
It is considered bad practice to add onclick in your html, and you miss-spelled a method. You should equally avoid adding your css in your html as well.
HTML:
<INPUT TYPE="BUTTON" VALUE="Edit" class="styled-button-2" id="edit">
<INPUT TYPE="BUTTON" VALUE="Save" class="styled-button-2" id="save">
JS:
var edit = document.getElementById("edit");
var save = document.getElementById("save");
edit.onclick = function() {
save.style.visibility = "visible";
}
CSS:
#save {
visibility: "hidden";
}
Must be a long day.
You have a misspelling.
Not right
document.getElementsById
Right Way
document.getElementById
document.getElementById("save").style.visibility="visible";
use getElementById not getElementsById
Probably a simple error, but you wrote getElementsById not getElementById, which meant you were trying to get more than one element, when infact you only need to get the "save" button.
<SCRIPT LANGUAGE="JavaScript">
function btnEdit()
{
{document.getElementById("save").style.visibility="visible";}
}
</script>
Side note: You may want to tidy your code:
<SCRIPT LANGUAGE="JavaScript">
function btnEdit()
{
document.getElementById("save").style.visibility="visible";
}
</script>
U have 2 images on a page and a textbox (php)
When u click on the image i want to change the text.
I am a starter, please sent a code that isn't to hard to understand.
<body>
<img src="bier1.jpg" alt="u mad" onclick= "">
<img src="bier2.jpg" alt="u mad" onclick= ""><br>
<form>
<input type="text" name="Example"/>
</form>
</body>
Are I'm right that you want to change the text of the Textbox? If yes here's the code:
<body>
<img src="bier1.jpg" alt="u mad" onclick= "document.forms[0].elements['Example'].value = 'Image 1'">
<img src="bier2.jpg" alt="u mad" onclick= "document.forms[0].elements['Example'].value = 'Image 2'"><br>
<form>
<input type="text" name="Example"/>
</form>
</body>
You'll need to use Javascript, I prefer to give javascript code using jQuery, so please do a quick Google search on jQuery.
<script type="text/javascript">
$(function(){
//You need to bind click events to your images and probably
$("img.has-message").click(function(){
var msg = $(this).attr("data-msg");
//get the message from that particular image
$("#text_box_id").attr("value",msg);
//changes the value of the text box to display the message
return false;
});
});
</script>
So you place this code in the <head></head> tag of your page
This code will work perfectly assuming you could change your HTML to look like so:
<body>
<img src="bier1.jpg" alt="u mad" class="has-message" data-msg="message to be displayed when the image is clicked">
<img src="bier2.jpg" alt="u mad" class="has-message" data-msg="message to be displayed when the image is clicked"><br>
<form>
<input type="text" id="text_box_id" name="Example"/>
</form>
</body>
Please remember that jQuery needs to have been included on your page for the above to work.
You need to first add id to the text field:
<input type="text" name="Example" id="myTextBox" />
Then you can do such thing:
<img src="bier1.jpg" alt="u mad" onclick="document.getElementById('myTextBox').value = this.alt;" />
<img src="bier2.jpg" alt="u mad" onclick="document.getElementById('myTextBox').value = this.alt;" />
This is not very elegant though, you have it applied to all images without having to change the markup, have such JavaScript:
window.onload = function() {
var oTextbox = document.getElementById('myTextBox');
for (var i = 0; i < document.images.length; i++) {
document.images[i].onclick = function() {
oTextbox.value = this.alt;
};
}
};
Live test case of above code.
You can also have the above code work only for certain images by applying a class to those images you want "clickable", for example:
<img src="bier1.jpg" alt="u mad" />
<img class="clickable" src="bier2.jpg" alt="u mad 2" />
To have only the second cause the textbox to change, have such code:
window.onload = function() {
var oTextbox = document.getElementById('myTextBox');
for (var i = 0; i < document.images.length; i++) {
var image = document.images[i];
if (image.className === "clickable" || image.className.indexOf("clickable ") >= 0 || image.className.indexOf(" clickable") >= 0) {
image.onclick = function() {
oTextbox.value = this.alt;
};
}
}
};
Updated fiddle to demonstrate.
I am guessing they mean the page is served as a php page. I would do this purely in javascript. In pseudo code I would do the following.
Create function in javascript
Function looks up input using name
Function sets the text of the input to whatever you like (this could be based on which image was clicked
Id deffinately suggest looking at w3schools website which will give you lots of simple examples to get you started.
Also start basic and work your way up, if you cant get it all working at once, do it bit by bit, get your onclick to alert when you click it, then try setting the text once you knwo your onclicks are working.
<html
<head>
<title>Dropdown tooltip</title>
</head>
<body style="font-size:10pt;font-family:Verdana;">
<script language="javascript">
function showTip(oSel) {
var theTip = document.getElementById("spnTip");
theTip.style.top = window.event.clientY + 20;
theTip.style.left = window.event.clientX;
theTip.innerText = oSel.options[oSel.selectedIndex].text;
theTip.style.visibility = "visible";
}
function hideTip() {
document.getElementById("spnTip").style.visibility = "hidden";
}
</script>
<form>
<select style="width:100px;" onchange="showTip(this)">
<option>Have you seen the latest M. Night Shyamalan film?</option>
<option>It's called The Village.</option>
<option>Although the critics didn't like it, I think it was extremely well done.</option>
<option>You will be kept in suspense even if you think you have figured out the ending.</option>
</select>
<span id="spnTip"
style="position:absolute;visibility:hidden;background:lightyellow;
border:1px solid gray;padding:2px;font-size:8pt;font-family:Verdana;"
onMouseOut="hideTip()"></span>
<br /><br /><br />
</form>
</body>
</html>
The CSS left and top properties take lengths, not numbers. You are missing units.