highlight code using mootools1.2 - javascript

I am using mootools1.2 as my js framework.
I have one problem regarding the highlight my some html element when page gets load.
I need to highlight my error message if any on page when page loads.
For example.
When page load then error div have #FFFFFF as bg color.
For highlight it will use #FC0000 as a bg color and then after it will get back to #FFFFFF bg color.
Any one can please suggest how can i do this..
Thanks in advance.
Avinash

MooTools way:
window.addEvents({
domready: function(){
var errorMsg = $$('.errorMessageEl');
errorMsg.highlight('#FC0000');
}
});
Here's an example: http://mootools.net/shell/s7mRh/
Repeating the highlight
Repeating the highlight a number of times is a bit more complicated– you'd probably want to create a mixin like this:
Array.implement({
blink: function(color, repeats){
this.set('tween', {
link: 'chain'
});
var i = 0;
while (i <= repeats-1){
this.highlight(color);
i++;
}
return this;
}
});
var errorMsg = $$('.errorMessageEl');
errorMsg.blink('#f00', 3);
Example: http://mootools.net/shell/8M9xx/1/

I don't remember exact mootools syntax, but the idea is something like that:
window.addEvent("onload",function()
{
$('divName').style.backgroundColor='#FC0000';
setTimeout($('divName').style.backgroundColor='#FFFFFF',5000) // will wait 5 seconds before returning to orig. color
}
);
If you want it to blink, you can write a function like this:
function blinkit(){
var intrvl=0;
for(nTimes=0;nTimes<3;nTimes++){
intrvl += 1000;
setTimeout("$('divName').bgColor='#0000FF';",intrvl);
intrvl += 1000;
setTimeout("$('divName').bgColor='#FFFFFF';",intrvl);
}
}
source:
http://w3schools.invisionzone.com/index.php?showtopic=21893

Related

How to make the background image change without a button with HTML & Javascript

I'm trying to make the background image change without a button, with any click in the back but its not working.
I tried to set the default background image defined in the CSS:
background-image: url('https://img.wallpapersafari.com/desktop/1920/1080/63/70/jE2ups.jpg');
And use this JavaScript, but once the imagen change I cant go back to the old one.
function myFunction() {
document.body.style.backgroundImage = "url('https://raw.githubusercontent.com/hxst1/hxst1.github.io/main/img/p2.jpg')";
}
Also tried $document on click but im new at this and its not working either.
If you want to toggle between 2 images it can easily be done by toggling a class on the body
document.addEventListener('click', () => {
document.body.classList.toggle("bgr");
})
body {
background-image: url('https://img.wallpapersafari.com/desktop/1920/1080/63/70/jE2ups.jpg');
}
.bgr {
background-image: url('https://raw.githubusercontent.com/hxst1/hxst1.github.io/main/img/p2.jpg') !important;
}
Like Spectric commented you can toggle background image:
document.addEventListener('click',function (){
document.body.classList.toggle('body_change');
})
.body_change {
background-image: url('https://picsum.photos/300');
}
body {
background-image: url('https://picsum.photos/200');
}
<body>
</body>
try that:
document.addEventListener('click',function myBackground(){
document.body.style.backgroundImage = "url('https://raw.githubusercontent.com/hxst1/hxst1.github.io/main/img/p2.jpg')";
})
if you want to automatic change every 1,2,3 or any seconds, you can try this way.
document.addEventListener('click',function myBackground(){
changeBackground();
})
let images = [
'https://images.unsplash.com/photo-1485322551133-3a4c27a9d925?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80',
'https://images.unsplash.com/photo-1507842217343-583bb7270b66?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=853&q=80',
'https://images.unsplash.com/photo-1600498148212-62bd3542ed63?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80',
'https://images.unsplash.com/photo-1611091428036-e0211d8016f0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=745&q=80',
'https://images.unsplash.com/photo-1600431521340-491eca880813?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80'
];
let index = 0;
function changeBackground(){
document.body.style.backgroundImage = "url('"+images[index]+"')";
index = (index < images.length-1) ? (index+1) : 0;
}
// change backgroubd every 3 seconds
var interval = window.setInterval(function(){
changeBackground()
}, 3000); // 1000 = 1 second
// function to stop interval
// clearInterval(interval)
<h3>
change background
</h3>
It sounds like you are trying to toggle an image so you set the background image in css then switched it in javascript but forgot to write in the javascript the conditional statements (if/else). Basically if background is the first picture then change it to the second picture else change to first picture. Your code only says to change it to second picture.
function background(){
var body = document.body;
if(body.style.backgroundImage = "url('pic1')"){
body.style.backgroundImage = "url('pic2')";
} else {
body.style.backgroundImage = "url('pic1')";
}
}

Shading a block that my mouse is over

I am writing a code that creates a memory game. I need to make it so that when my mouse is over a block it shades that block to a different color. I am writing the code in javascript. Whenever I try something is just says string is not a function. I am writing in khan academy and the code is mouseOver="this.color='black'"; Can anyone please help me?
draw = function() {
if (delayStartFC && (frameCount - delayStartFC) > 30) {
for (var i = 0; i < tiles.length; i++) {
if (!tiles[i].isMatch) {
tiles[i].drawFaceDown();
}
}
flippedTiles = [];
delayStartFC = null;
// commented no loop because the timer stops working if this is enabled.
mouseOver="this.color='black';"
// noLoop();
}
You need to use this.style.backround='color' instead of this.color='color'. Try the below code:
<div style="background:red;" onmouseover="this.style.background='blue';" onmouseout="this.style.background='red'">Content</div>
When you put the code inline, it can get messy, so extracting it would be helpful like below:
The "selector" is whatever div or class or id you want to turn black on the mouse hover action.
$('selector').hover(function() {
$(this).css('background-color', 'black');
});
One solution could be:
<div onmouseover="Color(this,'black')"></div>
function Color(obj, color){
obj.style.background=color;
}
hope it's useful!
I'm assuming that you are looking at the "Project:Memory++" page, so I'll work from there.
If you look at the function above draw, it's called mouseClicked, you'll notice that it has a way of checking if a card is under the mouse:
mouseClicked = function() {
for (var i = 0; i < tiles.length; i++) {
if (tiles[i].isUnderMouse(mouseX, mouseY)) { //this line designates a tile under the mouse
// draw the tile, tiles[i], with a color over it.
After you've found which tile to color, you'll need to write a function to change it, either by changing the image that the tile shows or by giving it an overlay. There are a few good ideas in the other threads, but I would stick with what you've been given during your other projects on Khan Academy.
I usually put events like mouseover in event listeners, rather than in the HTML mouseover attribute. If you're looking to do it in pure JavaScript, try this:
document.getElementById("test").addEventListener("mouseover",function(e){e.target.style.backgroundColor = "#000";});
document.getElementById("test").addEventListener("mouseout",function(e){e.target.style.backgroundColor = "#FFF";});
You can also just accomplish this with CSS:
#test {
background-color: #FFF;
}
#test:hover {
background-color: #000;
}

Creating a very simple game in JS

I'm currently making a game in JS, and I faced a problem.
I got an 2D array that stores an image, now I want some random pic to be changed every 1 second, everything is working but, I don't know how I can change the picture.
Do I have to print all the other images if I want to change the random cell in the array?
I'm almost sure that there's another way to change it without doing it.
I'll be glad for help, if anyone needs other explanation I'll be glad to.
You can try using something like this in your header. It should call changePic() every second, incrementing through your picture array, and setting the new picture on an image element.
//know your array sizes
var max_x = picArr.length;
var max_y = picArr[0].length;
var current_x = 0;
var current_y = 0;
function changePic()
{
if(current_y == max_y-1)
{
if(current_x == max_x-1)
{
current_x = 0;
current_y = 0;
}
else
{
current_x++;
current_y = 0;
}
}
else
current_y++;
var pic = picArr[current_x][current_y];
getElementById('randomImage').setAttribute('src', pic);
window.setTimeout(changePic, 1000);
}
setTimeout(changePic, 1000);
https://developer.mozilla.org/en/DOM/window.setTimeout
I would start out with something like
var ImageOne = new Image();
ImageOne.src = "UrlToImage";
And so on just to make sure all the images are loaded when the game starts
Thereafter I would be using jQuery:
$("#IdOfImg").attr("src", ImageOne);
You might want to try using a css class for the elements with a background image rather dan adding images to the DOM. I think a css class for back.png and one for the 1.png should do the trick.
Toggle the classes on the td elements every second.
Hope this helps.

Dynamically changing images in a div

I've five images and would like to display it in a same div one by one with interval of 2 sec. Can anyone please suggest any solution for this?
Simple javascript example:
var currentImage = 0;
var images = [
'a.jpg',
'b.jpg'
];
var imageElement = document.getElementById('yourImageTagId');
function nextImage(){
currentImage = (currentImage + 1) % images.length;
imageElement.src = images[currentImage];
}
var timeoutId = setTimeout(nextImage, 1000);
It expects you to have some html like this:
<img src="a.jpg" id="yourImageTagId" />
Jquery Cycle is really flexible... you could hook it up to whatever youve got already marked up pretty easily.
There are many ways to do this nowadays but one simple way is using the following jquery plugin:
http://jquery.malsup.com/cycle/
Here is a simple demo in action fading images one after the other.
http://jquery.malsup.com/cycle/basic.html
setTimeout
You can do something like this.
function selectData(currentIndex) {
// select current's element "display" to "none" and show next element
...
// schedule next change in two second
setTimeout("selectData(" + nextIndex + ");", 2000);
};
I assume all images are inside that div already and have style display:none

How to display a blinking / flashing link in html

I am in need a link that will flash every 500 milleseconds, for a duration of 5 seconds...
I remember long ago having a link like this, but deleted it because one could only click it when it was visible. Is there a workaround for that?
Try this:
<script type="text/javascript">
var col = new String();
var x=1;var y;
function blink()
{
if(x%2)
{
col = "rgb(255,0,0)";
}else{
col = "rgb(255,255,255)";
}
aF.style.color=col;x++;if(x>2){x=1};setTimeout("blink()",500);
}
</script>
<body onload="blink()">
<a id="aF" href="http://www.google.com"><b>*Google!*</b><br>
There is a JavaScript function in Script.aculo.us to do that : Have a look on Effect.Pulsate
There is CSS
text-decoration: blink
but that will blink your link all the time, you would need some javascript to change the style after 5 seconds.
Remember to always keep usability for all users in mind. Especially if you're making something flash at a certain frequency. Just be careful.
'A' quick JQuery UI version...
Links need CLASS 'flasher', and an ID
Will start on mouseover...and stop on mouseout.
Also add the secondarycolor as a hover to the 'A' link...it will help mask the initial interval delay at start.
var flashInterval;
var flasherId;
var firstColor = '#EF7F2C';
var secondaryColor = '#3296C8';
var flashTime = 300;
jQuery('a.flasher').mouseover(function() {
if(flasherId){ jQuery('#'+flasherId).animate({ color:firstColor},0); }//stop any previous flashing link
flasherId = jQuery(this).attr('id');//get id of current link
//set interval
flashInterval = setInterval(function(){ jQuery('#'+flasherId).animate({ color:secondaryColor},flashTime).animate({ color:firstColor},flashTime); },flashTime*2);
}).mouseout(function() {
clearInterval(flashInterval);//clear interval
jQuery('#'+flasherId).animate({ color:firstColor},0);//reset flasher
flasherId = '';//clear flasher var
});

Categories