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");
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 have a simple animation I found online and modified to fit my needs, but no matter what I try, I cannot get it to redirect after the animation is done. If I remove the setTimeout It redirects immediately without showing the animation. This is my code:
<html>
<head>
<div id="x" style="background-color:rgb(10,10,10)" align="center">
<img src="icon.ico" alt="Icon" height="256px">
</div>
<script>
var unBlue=105;
var gEvent=setInterval("toWhite();", 10);
var redirect=1;
function toWhite(){
if(unBlue<200) document.getElementById("x").style.backgroundColor="rgb("+unBlue+",30,30)";
else clearInterval(gEvent)
unBlue+=1;
setTimeout(myFunction, 1000);
location.redirect("home.html") //doesn't work
}
</script>
</html>
I'm still getting used to javascript so a full explanation would be much appreciated. Thank you.
this code snippet works for me...
first as suggested use window.location.replace instead of location.redirect which does not seem to be supported
second myFunction does not seem to be defined.. you didn't specify if it does anything so if you just want to delay - I put null instead
<html>
<head>
<div id="x" style="background-color:rgb(10,10,10)" align="center">
<img src="icon.ico" alt="Icon" height="256px">
</div>
<script>
var unBlue=105;
var gEvent=setInterval("toWhite();", 10);
var redirect=1;
function toWhite(){
if(unBlue<200) document.getElementById("x").style.backgroundColor="rgb("+unBlue+",30,30)";
else clearInterval(gEvent)
unBlue+=1;
setTimeout(null, 1000);
window.location.replace("http://stackoverflow.com")
}
</script>
</html>
you need something how this ,is not need use Jquery :
For example:
// similar behavior as an HTTP redirect
window.location.replace("http://example.com");
// similar behavior as clicking on a link
window.location.href = "http://example.com";
more imformation :here
you code with the soluction :
<html>
<head>
<div id="x" style="background-color:rgb(10,10,10)" align="center">
<img src="icon.ico" alt="Icon" height="256px">
</div>
<script>
var unBlue=105;
var gEvent=setInterval("toWhite();", 10);
var redirect=1;
function toWhite(){
if(unBlue<200) document.getElementById("x").style.backgroundColor="rgb("+unBlue+",30,30)";
else clearInterval(gEvent)
unBlue+=1;
setTimeout(myFunction, 1000);
//location.redirect("home.html") //doesn't work
window.location.href = "http://example.com";
}
</script>
</html>
I am trying to get an alert if I chose a certain picture for example:
HTML:
<div id="main">
<img id='pr' style="width: 500px;height: 600px;" src="">
</div>
Then I manually chose a picture that goes into 'main' and changes it src JQUERY:
<script type="text/javascript">
$('#paperb').click(function()
{
$('#pr').attr("src", "http://www.cliparthut.com/clip-arts/1008/paper-stack-
clip-art-1008442.jpg");
}); </script>
Than there comes the JS that fails:
<script type="text/javascript">
if (getElementById('#pr').attr('src' ,'https://i.redd.it/2u0y0z5i12py.png')
{
alert('euirhzeurhzu')
}
</script>
But this script wont work. Is it possible to get an alert from this?
What do I need to change so I can get an alert?
Thank you.
If you have multiple images & want to do some action when src value is changed for certain images, then try below;
$('#pr').on('load', function (e) {
console.log("Image Path: ", e.target.src);
if(e.target.src == "https://i.redd.it/2u0y0z5i12py.png") {
//do action a
} else if(e.target.src == "https://...bike.png") {
//do action b
}
});
Replace
if (getElementById('#pr').attr('src' ,'https://i.redd.it/2u0y0z5i12py.png')
with
if (getElementById('#pr').attr('src') === 'https://i.redd.it/2u0y0z5i12py.png')
Also the other problem is that your if statement is not declared in an event handler. So it will run only once when the script first loads. You need to place it under an event after which you want to execute it. E.g.
<script type="text/javascript">
$('body').on('click','#pr',function(){
if ($('#pr').attr('src') === 'https://i.redd.it/2u0y0z5i12py.png') {
alert('euirhzeurhzu');
}
});
</script>
Edit: Here's a working snippet.
$('body').on('click','#pr',function(){
if ($('#pr').attr('src') === 'https://i.redd.it/2u0y0z5i12py.png') {
alert('euirhzeurhzu');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<img id='pr' style="width: 500px;height: 600px;" src="https://i.redd.it/2u0y0z5i12py.png">
</div>
I printed to the screen 16 icons (little pictures).
Now I want to be able to select icons,
and when I press a button the selected icons ids will be sent in a form.
I saw in the net only checkboxes and lists multiselect,
what's the best way to do this?
(I'm pretty new to web design)
thanks ahead!
Although jQuery isn't in your tags, you should introduce yourself to jQuery. It'll make your life easier, for what you're trying to do. Here is the basic steps both if you use jQuery and if use just Javascript:
With jQuery
Give all your icons a class and each one a unique id:
<img src='icon1.png' data-iconID=2233 class='myIcons' />).
Then bind that class to a click event
$('.myIcons').bind('click', function() {
$(this).toggleClass('selectIcon');
});
Attach form submit function to onsubmit:
<form ... onsubmit="submitForm();">
Build submitForm function:
function submitForm() {
var csvIconIds = '';
$.each($('.myIcons.selectIcon'), function (index, value) {
csvIconIds += $(value).attr('data-iconID');
});
//submit scvIconIds here along with other form data (ajax?)
}
With Javascript
Similar as above but way more complicated...
To toggle classes see this thread: How to add/remove a class in JavaScript?
To getting attributes by class see this site: http://www.actiononline.biz/web/code/how-to-getelementsbyclass-in-javascript-the-code/
This could be a way using just plain Javascript or jQuery. I prefer the jQuery version, since it separates the click handler from the markup, instead of using inline onclick handlers, which are in general discouraged.
What this does is use an input element array, which you can create by adding [] to the element name. This same technique can be used on SELECTs and other elements, since it signals to the server that an array has been submitted, as opposed to value known by a single key.
<html>
<head>
<style type="text/css">
div img {
cursor: pointer;
border: 1px solid #f00;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script>
function setFormImage(id) {
if (id != '' && !document.getElementById('input_'+id)) {
var img = document.createElement('input');
img.type = 'text';
img.id = 'input_'+id;
img.name = 'images[]';
img.value = id;
document.imageSubmit.appendChild(img);
}
}
$(document).ready(function(){
$('#jqueryimages img').click(function(){
setFormImage(this.id);
});
});
</script>
</head>
<body>
<pre><?php
if (count($_GET['images'])) {
print_r($_GET['images']);
}
?></pre>
<div style="float: left; width: 49%;">
<h1>Plain ol' HTML</h1>
1. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-1" onclick="setFormImage(this.id)"/>
<br/>
2. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-2" onclick="setFormImage(this.id)"/>
<br/>
3. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-3" onclick="setFormImage(this.id)"/>
<br/>
4. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-4" onclick="setFormImage(this.id)"/>
</div>
<div id="jqueryimages" style="float: left; width: 49%;">
<h1>jQuery</h1>
5. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-5"/>
<br/>
6. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-6"/>
<br/>
7. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-7"/>
<br/>
8. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-8"/>
</div>
<h1>Form Submit</h1>
<form name="imageSubmit" method="get">
<input type="submit" value="View Selected"/>
</form>
</body>
</html>
try this
var idArray = [];
$("#container-id img").each(function(index,value){
idArray.push($(value).attr("id"));
});
//do anything with the array
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.