I have a function, used to clone the flash article scroller this page. Unfortunately I'm behind a firewall so can't upload my own code, but that should give you an idea. The function:
function select(id) {
alert(active+"\n"+((active+1)%4));
var prev = active;
active = (typeof(id) == "undefined" ? (active+1)%4 : id);
$("#panel").animate({"top": tops[active]}, 750);
$("#main"+prev).fadeOut(750);
$("#main"+active).fadeIn(750);
}
So if select() is called without an id, it simply progresses to the next item in sequence, otherwise it goes to the selected item. It's run on a timer defined:
timer = setInterval("select()", 5000);
When an object is mouseovered, this function is run:
$("img.thumb").mouseover(function() {
clearInterval(timer);
select($(this).attr("id").substr(-1));
timer = setInterval("select()", 5000);
});
The trouble is that, after a mouseover, the select function fails for one cycle, with the next object having no relation to the previous. The chosen object is consistent - it remains the same with each refresh given the same initial conditions, but it's unrelated in any way I can determine.
What is oddest is that the alert I run at the start of select(), which should be a straightforward mathematical operation, fails, claiming that (for the sequence I test - wait for an automatic scroll from 0 - 1, then mouseover 3) (3+1)%4=3.
I've tested this in both firefox and chrome, so it seems to be inherent to javascript.
I can only assume that it's storing two different values for active somehow, but nature of that schism, and how to resolve it, are beyond me.
I've attached the entire file below in case anything else is pertinent. Seems unlikely, but at this point I'm not ruling anything out.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//alter these as you please
var thumbs = ["images/1t.png", "images/2t.png",
"images/3t.png", "images/4t.png"];
var mains = ["images/1.png", "images/2.png",
"images/3.png", "images/4.png"];
var links = ["http://www.goldcoast.com.au/gold-coast-beaches.html",
"http://www.goldcoast.com.au/gold-coast-whale-watching.html",
"http://www.goldcoast.com.au/gold-coast-hinterland-rainforest.html",
"http://www.goldcoast.com.au/gold-coast-history.html"];
//don't touch these
var timer = null;
var active = 0;
var tops = [0, 77, 155, 234];
function select(id) {
alert(active+"\n"+((active+1)%4));
var prev = active;
active = (typeof(id) == "undefined" ? (active+1)%4 : id);
$("#panel").animate({"top": tops[active]}, 750);
$("#main"+prev).fadeOut(750);
$("#main"+active).fadeIn(750);
}
$(function() {
for(var i = 0; i < 4; i++) {
$("#thumb"+i).attr("src", thumbs[i]);
$("#main"+i).attr("src", mains[i]);
}
$("#main"+active).show();
$("img.thumb").mouseover(function() {
clearInterval(timer);
select($(this).attr("id").substr(-1));
timer = setInterval("select()", 5000);
});
timer = setInterval("select()", 5000);
});
</script>
<style type="text/css">
#container {position:relative;}
#panel {position:absolute;left:0px;top:0px;z-index:1;}
img.thumb {position:absolute;left:8px;z-index:2;}
#thumb0 {top:7px;}
#thumb1 {top:84px;}
#thumb2 {top:162px;}
#thumb3 {top:241px;}
img.main {position:absolute;left:118px;top:2px;display:none;}
</style>
</head>
<body>
<div id="container">
<img src="images/panel.png" id="panel" />
<img id="thumb0" class="thumb" />
<img id="thumb1" class="thumb" />
<img id="thumb2" class="thumb" />
<img id="thumb3" class="thumb" />
<img id="main0" class="main" />
<img id="main1" class="main" />
<img id="main2" class="main" />
<img id="main3" class="main" />
</div>
</body>
</html>
Use parseInt() as comment suggested.
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
I am working on a project, and I want to make 4 images move in a circular fashion once I click on one of them. This is what I have so far, but I can't figure out how to make the circle keep going. Any help?
<!DOCTYPE html>
<html>
<head>
<title> Lab 13B </title>
<style>
#pic1 {
padding-left:325px;
}
#pic2 {
padding-top: 100px;
}
#pic3 {
padding-left: 350px;
padding-top: 100px;
}
#pic4 {
padding-left: 325px;
padding-top: 120px;
}
</style>
<script>
function one() {
document.getElementById("pic1").src = "water.PNG";
document.getElementById("pic2").src = "fire.PNG";
document.getElementById("pic3").src = "Air.PNG";
document.getElementById("pic4").src = "earth.PNG";
document.getElementById("pic1").id = "pic2";
document.getElementById("pic2").id = "pic4";
document.getElementById("pic3").id = "pic1";
document.getElementById("pic4").id = "pic3";
}
</script>
</head>
<body>
<img src = "Air.PNG" alt="air" width="300px" height="300px" id="pic1" onclick="one()";> <br>
<img src = "water.PNG" alt="water" width="300px" height="300px" id="pic2" onclick="one()";>
<img src = "earth.PNG" alt="earth" width="300px" height="300px" id='pic3' onclick="one()";> <br>
<img src = "fire.PNG" alt="fire" width="300px" height="300px" id='pic4' onclick="one()";>
</body>
</html>
You are essentially talking about an animation where you need to change something around after specific time interval.
To achieve things like that Javascript provides setInterval function where you can run a piece of code responsible for "change" after given interval in milliseconds. So your function one will look something like
function one() {
setInterval(function() {
// your logic for swapping src of images
}, 1000)
}
But this will require you to properly handle click event, first click will start the animation but second will create the interval again and so on, so considering this if you already have interval running then on second click you might want to stop the animation or at least prevent the creation of second interval. This might be of some help Is there any way to kill a setInterval loop through an Onclick button
Please help me. I want to do the below activity in javascript programming with the help of "for loop".
Suppose there are five images on the web page. When I rollover the 1st image, the text should display "it's a first image". When I rollover the 2nd image, the text should display "it's a second image". When I rollover the 3rd image, the text should display it's a third image.
I have tried and it's successful but it's manual. I am new in Javascript programming..
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<link rel="stylesheet" href="style_latest.css" type="text/css">
<title>MATHERAN TRIP</title>
<style>
#displayText
{
width:413px;
height:auto;
background-color:#666666;
color:white;
}
#displayText1
{
padding-left:5px;
}
</style>
</head>
<body>
<img src="images/img1.jpg" id="img1" onmouseover="clickEvent1()" onmouseout="imgRollout()" width="100" height="100">
<img src="images/img2.jpg" id="img2" onmouseover="clickEvent2()" onmouseout="imgRollout()" width="100" height="100">
<img src="images/img3.jpg" id="img3" onmouseover="clickEvent3()" onmouseout="imgRollout()" width="100" height="100">
<img src="images/img4.jpg" id="img4" onmouseover="clickEvent4()" onmouseout="imgRollout()" width="100" height="100"><br/>
<div id="displayText">
<span id="displayText1"></span>
</div>
<script>
var myData=new Array("Hi, How r u?", "Hey, whats up? Hey, whats up? Hey, whats up? Hey, whats up? Hey, whats up? Hey, whats up?", "Hello, whats going on?", "Hi friends")
document.getElementById("displayText").style.visibility='hidden';
function clickEvent1()
{
document.getElementById("displayText1").innerHTML=myData[0];
document.getElementById("displayText").style.visibility='visible';
}
function clickEvent2()
{
document.getElementById("displayText1").innerHTML=myData[1];
document.getElementById("displayText").style.visibility='visible';
}
function clickEvent3()
{
document.getElementById("displayText1").innerHTML=myData[2];
document.getElementById("displayText").style.visibility='visible';
}
function clickEvent4()
{
document.getElementById("displayText1").innerHTML=myData[3];
document.getElementById("displayText").style.visibility='visible';
}
function imgRollout()
{
document.getElementById("displayText").style.visibility='hidden';
}
</script>
</body>
</html>
I would recommend you don't include inline event attributes at each element. But I would consider including an inline html5 data- attribute with the message associated with the elements:
<img src="images/img1.jpg" data-msg="Hi, How r u?" width="100" height="100">
<!-- etc -->
Then you can bind the same rollover functions to each element using a loop as follows:
function doMouseOver(e) {
document.getElementById("displayText1").innerHTML =
e.target.getAttribute("data-msg");
document.getElementById("displayText").style.visibility='visible';
}
function doMouseOut() {
document.getElementById("displayText").style.visibility='hidden';
}
var imgs = document.getElementsByTagName("img"),
i;
for (i = 0; i < imgs.length; i++) {
imgs[i].addEventListener("mouseover", doMouseOver);
imgs[i].addEventListener("mouseout", doMouseOut);
}
Within the doMouseOver() function, the e argument is the event object, and thus e.target gives you a reference to the element the event happened to - so then you can retrieve the particular data-msg value for that element to display it.
Demo: http://jsfiddle.net/3c7Rb/
Having said that, you don't need the loop either. You can bind the functions directly to the document, and then within the mouse over handler you simply test whether the target element has the msg-data attribute. If it does, display it, otherwise do nothing:
function doMouseOver(e) {
var msg = e.target.getAttribute("data-msg");
if (msg) {
document.getElementById("displayText1").innerHTML= msg;
document.getElementById("displayText").style.visibility='visible';
}
}
function doMouseOut() {
document.getElementById("displayText").style.visibility='hidden';
}
document.addEventListener("mouseover", doMouseOver);
document.addEventListener("mouseout", doMouseOut);
Demo: http://jsfiddle.net/3c7Rb/1/
I have the following Javascript code which should rapidly switch between two images:
<head runat="server">
<title>Home Page</title>
<script src="Resources/jQuery.js" type="text/javascript"></script>
<script type="text/javascript">
function changeImage()
{
requestAnimationFrame(changeImage);
var url = document.getElementById('Change_Image').src;
if (url == 'Resources/Share1.bmp')
{
document.getElementById('Change_Image').src = 'Resources/Share2.bmp';
}
else
{
if (url == 'Resources/Share2.bmp')
{
document.getElementById('Change_Image').src = 'Resources/Share1.bmp';
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Welcome to my Website</h1>
<h2>Below you can find an example of visual cryptography</h2>
<br />
<br />
<div><img id="Change_Image" src="Resources/Share1.bmp" alt="Letter A" /></div>
</div>
</form>
</body>
</html>
Unfortunately, the code does not work and the image does not change to another one. What am I doing wrong? I am quite new to JavaScript so bear with me please?
You are using assign operator instead of comparison operator. Also use else if or just else in the second condition.
Change to
if (url == 'Resources/Share1.bmp')
and
else if (url == 'Resources/Share2.bmp')
and it should work.
See this DEMO to help you with. It toggles the image with 2 seconds interval
Your logic seems to be flawed. Look at this piece of code
var url = document.getElementById('Change_Image').src;
if (url = 'Resources/Share1.bmp')
{
document.getElementById('Change_Image').src = 'Resources/Share2.bmp';
}
And your markup is
<div><img id="Change_Image" src="Resources/Share1.bmp" alt="Letter A" /></div>
The value of url will always be Resources/Share1.bmp. Also as the other posters mentioned equality is == and not =
I see jquery is included, maybe mvc appliction?
You can make use of jquery toggle:
http://api.jquery.com/toggle/
your html:
<div class="someContainer">
<img class="Change_Image" src="Resources/Share1.bmp" alt="Letter A" />
<img class="Change_Image" src="Resources/Share2.bmp" alt="Letter B" style="display:none"/>
</div>
your javascript:
$(".someContainer").find(".Change_Image").toggle();
You want some effects
$(".someContainer").find(".Change_Image").toggle("slow");
I'm no expert in this so excuse me if this is very basic but I couldn't find answers.
So I want to have navigation section with categories on the left side of the page.
Each category is different site, and each site has it's own unique image on it.
ex. category1.htm has defaultpic1.jpg, category 2.htm has defaultpic2.jpg, ....
When I hover on link to category2 in the nav sections I want them to change default image on current site to default image on category2, and then onmouseout I want it to go back to the default one.
Also note my images have different dimensions, different height values.
Basically I know I can change the defaultpic source on every page but I want to use the same script which will always know were to look for the default path and just use it, without the need to change the line in every single category.
Sorry if I'm not very clear on that but I try my best.
I have this (removed everything else so I just paste what I need help with):
<html>
<head>
<script type="text/javascript">
function mouseOverImage2()
{
document.getElementById("catPic").src='images/defaultpic2.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='420px';;
} function mouseOverImage3()
{
document.getElementById("catPic").src='images/defaultpic3.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='266px';;
}
function mouseOutImage()
{
document.getElementById("catPic").src='???'; //here's what I don't know what to put
}
</script>
</head>
<body>
<div class="nav">
<ul>
<li><a href="subcategory2.htm" onmouseover="mouseOverImage2()"
onmouseout="mouseOutImage()">Subcategory One</a></li>
<li><a href="subcategory3.htm" onmouseover="mouseOverImage3()"
onmouseout="mouseOutImage()">Subcategory 2</a></li></ul>
</div>
<div>
<img id="catPic" src="images/defaultpic1.jpg" width="280" height="420" alt="">
</div>
</body>
</html>
I would hide all the values in data-* attributes, so I could re-use the same functions.
For example,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Cats</title>
<script type="text/javascript">
function mouseOverImage(elm) {
var img = document.getElementById("catPic");
img.src = elm.getAttribute('data-cat-image');
img.style.width = elm.getAttribute('data-cat-width');
img.style.height = elm.getAttribute('data-cat-height');
}
function mouseOutImage() {
var img = document.getElementById("catPic");
img.src = img.getAttribute('data-default-image');
img.style.width = img.getAttribute('data-default-width');
img.style.height = img.getAttribute('data-default-height');
}
</script>
</head>
<body>
<div class="nav">
<ul>
<li><a href="subcategory2.htm"
data-cat-image="images/defaultpic2.jpg" data-cat-width="280px" data-cat-height="420px"
onmouseover="mouseOverImage(this)" onmouseout="mouseOutImage()"
>Subcategory One</a></li>
<li><a href="subcategory3.htm"
data-cat-image="images/defaultpic3.jpg" data-cat-width="280px" data-cat-height="226px"
onmouseover="mouseOverImage(this)" onmouseout="mouseOutImage()"
>Subcategory 2</a></li>
</ul>
</div>
<div>
<img id="catPic" src="images/defaultpic1.jpg" alt=""
data-default-image="images/defaultpic1.jpg" data-default-width="280px" data-default-height="420px"
width="280" height="420"
/>
</div>
</body>
</html>
You should also consider attaching the listeners in JavaScript rather than using on* attributes, as it means you can completely seperate your JavaScript from your HTML.
You need to store the old image src in a temporary variable, or element somewhere, for example, using a global:
var originalImage;
function mouseOverImage2()
{
originalImage = document.getElementById("catPic").src;
...
And then restore it on the mouse out:
document.getElementById("catPic").src=originalImage;
Edit
You can cache other properties (height, width) in much the same way.
One thing to note is not to mix old-school html height and width attributes with style height and width - this will lead to confusion.
I've update the Fiddle here
you could stash away the default image source in mousein and then restore it in mouseout
<script type="text/javascript">
function mouseOverImage2()
{
if(typeof(document.getElementById("catPic").defaultSrc) == "undefined")
document.getElementById("catPic").defaultSrc = document.getElementById("catPic").src;
document.getElementById("catPic").src='images/defaultpic2.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='420px';;
}
function mouseOverImage3()
{
if(typeof(document.getElementById("catPic").defaultSrc) == "undefined")
document.getElementById("catPic").defaultSrc = document.getElementById("catPic").src;
document.getElementById("catPic").src='images/defaultpic3.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='266px';;
}
function mouseOutImage(e)
{
if(typeof(document.getElementById("catPic").defaultSrc) != "undefined")
document.getElementById("catPic").src= document.getElementById("catPic").defaultSrc;
}
</script>
An addition to the above it may be easier in the long term to just use one function and pass the element no as a parameter. Along these lines
<html>
<head>
<script type="text/javascript">
function mouseOverImage(elementNo){
document.getElementById("catPic").src='images/defaultpic'+elementNo+'.jpg';document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='420px';;
}
function mouseOutImage(elementNo){
document.getElementById("catPic").src='images/defaultpic'+elementNo+'.jpg'; //here's what I don't know what to put
}
</script>
</head>
<body>
<div class="nav">
<ul>
<li><a href="subcategory2.htm" onmouseover="mouseOverImage(2)"
onmouseout="mouseOutImage(1)">Subcategory One</a></li>
<li><a href="subcategory3.htm" onmouseover="mouseOverImage(3)"
onmouseout="mouseOutImage(1)">Subcategory 2</a></li></ul>
</div>
<div>
<img id="catPic" src="images/defaultpic1.jpg" width="280" height="420" alt="">
</div>
</body>
</html>