Using js verification to change background-image - javascript

i'm with a little problem. I was building a form in HTML with javascript, but in the inputs, i've used a background-image and a padding in left to make it look better, here its all ok, the problem comes next. I've created this function here:
function verificar_email(email) {
var valor = email.value;
if (valor.length != 0){
if (valor.indexOf('#') >= 1) {
if (valor.indexOf('.') > (valor.indexOf('#') + 1)) {
if (valor.length > (valor.lastIndexOf('.') + 1)) {
email.style.background = "#1abc9c";
email.style.color = "#fefefe";
return true;
}
}
}
}
email.style.background = "#ff0000";
email.style.color = "#fefefe";
return false;
}
When the email input is blank or typed wrong, it's filling my bgimage with bgcolor and making the image dissapear. How can i change my original image to other image i've created without filling with color?
Sorry for my bad english, below i will explain what i'm talking about with some images.
http://imgur.com/a/hkigg - the first image is the error, the second is what it looks like and the final image is what i wanna do.

you can simply set the background color to "transparent" which should stop your background image disappearing

Related

Javascript - If statement working, but the else doesn't

I have a script that runs when a specific element is clicked on. The script changes the background color of a div. When the user clicks on the div the background color must change to #4aa3c3, but when the user clicks on the div again, it must change back to a #fafafa. The if statement works, but for some reason, once the color is changed to #4aa3c3, it won't change back to normal. It seems like my else statement isn't working. Am I doing something wrong?
function Active() {
if (document.getElementById("test").style.backgroundColor !== "#4aa3c3"){
document.getElementById("test").style.backgroundColor = "#4aa3c3";
} else {
document.getElementById("test").style.backgroundColor = "#fafafa";
}
}
When you try some basic debugging, like
console.log(document.getElementById('test').style.backgroundColor);
Do you see the problem? Chances are, you're getting something like:
"rgb(74, 163, 195)"
So that's why the if isn't working as you'd like. But that's not your biggest issue.
The real problem is that you are using Presentation (CSS) to define Behaviour (JS). On top of that, you're using Behaviour to define Presentation.
Instead, you should do something like this:
document.getElementById('test').classList.toggle('toggled');
And use CSS to define a style like:
#test {background-color: #fafafa}
#test.toggled {background-color: #4aa3c3}
Would agree with the answer above - however to add another dimension - if you ever did need to change the returned RBG values to hex you could try something like this which would allow the code to work as stated in the original question.
<script>
function hex(x) {
return ("0"+x.toString(16)).slice(-2);
}
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
function CheckIfColorIsCorrect()
{
var hex = rgb2hex(document.getElementById("test").style.backgroundColor);
if (hex != "#4aa3c3"){
document.getElementById("topbar").style.backgroundColor = "#4aa3c3";
} else {
document.getElementById("test").style.backgroundColor = "#fafafa";
}
}
</script>

Best/proper way to fade-in-out changing html text?

I am creating a sample website for practice and I created a function that changes the main background image of the site every x amount of seconds. Along with the changes to the background-image, I would like to change the title text that corresponds to each image. I can fade-in-out the background-image nicely, but the text cannot fade.
I'm assuming its because I am not changing the css but because I'm changing the html text directly so transition doesn't work.
Here is my function:
function updateImage() {
if (pic == 1) {
caption = "GO BEYOND EARTH";
}
else if (pic == 2) {
caption = "EXPLORE NEW WORLDS";
}
else if (pic == 3) {
caption = "EXPERIENCE DEEP SPACE";
}
$('.pic-titles').text(caption);
$('.center').css('background-image', 'url(img/space' + pic + '.jpg');
pic++;
if (pic > 3) {
pic = 1;
}
}
});
Right now the text just changes and it doesn't look that great. I want it to match the fade effect of the background image. I tried using jQuery fadeIn and fadeOut together but the outcome doesn't look too great.
You need two things, the animate method and the queue. With this combo youll be able to fadeout the text on the first animate, change the text right at that point. And at last fadein the new text.
Hope this is what you were looking for. Happy to explain or help in a better solution if needed.
var pic = 2;
function updateImage() {
if (pic == 1) {
caption = "GO BEYOND EARTH";
} else if (pic == 2) {
caption = "EXPLORE NEW WORLDS";
} else if (pic == 3) {
caption = "EXPERIENCE DEEP SPACE";
}
//Animate function
$('.pic-titles').animate({
opacity: 0
})
.queue(function() {
$(this).text(caption);
$(this).dequeue();
})
.animate({
opacity: 1
});
//$('.center').css('background-image', 'url(img/space' + pic + '.jpg');
pic++;
if (pic > 3) {
pic = 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="pic-titles">GO BEYOND EARTH</p>
<button onclick="updateImage()">PIC</button>

Jquery Display round tag image under image issue

I want to add round tag Images(25*25 pixel) on all Image tags in the html Dom.
It works but with my code the position sometimes changes and it often displayed under the Image.
Here is my code:
jQuery("img").each(function() {
var image = jQuery(this);
if ((image.width() >= 512) && (image.width() <= 2048)){
image.parent().css('display', 'inline-block');
var top_pos = image.offset().top+200, left_pos = image.offset().left+150;
image.parent().append('<div class="tag_image first_tag_image1" id="first_draggable1" style="position:absolute;'+'top:'+top_pos+'px;'+'left:'+left_pos+'px;">');
//do something
}
});
Anybody who knows what to do?
If any question please add a comment.
You have to use :before.
For example image.before('//some code')

Javascript: Document.URL.indexOf issue

Hello Guys I have a little issue with document.URL.indexOf in Javascript. I have a lounge page where I want to make the background transparent if there is "lounge" in the URL and I want to make the background different when I am viewing a single lounge but the URL still contains "lounge" cause the full link to a lounge is "lounge/view/1" How can I make it work so when I am in "view" to have the background I want and when I am in lounge to have it transparent.
This is the code I have for now:
if (document.URL.indexOf("lounge") > -1)
{
body.delay(400).css('background-color', 'transparent');
}
else
{
body.delay(400).css('background', '#b4b7b8');
}
I tried adding anothger "else if" saying if indexOF is "view" to go to the one I want but it didn't work.
Any suggestions ?
You can check both if lounge is in the URL and view is not:
if (document.URL.indexOf('lounge') > -1 &&
document.URL.indexOf('view') == -1) {
// your code...
}
How about
var color = document.URL.indexOf('lounge/view') > -1?'#b4b7b8':'transparent';
body.delay(400).css('background', color);
or another colour per view:
var color = 'transparent', url = document.URL;
var views = 'lounge/view';
if (url.indexOf(views) > -1) {
var idx = parseInt(url.split(views)[1],10);
color = ["",'#b4b7b8','#99b7b8','#eeb7b8'][idx]; // view/1, view/2, view/3
}
body.delay(400).css('background', color);

image not changing on click - javascript

I apologise if it sounds similar to a previous question, but I've gone over those similar questions and I still can't figure out what the problem is with my code. it's petty simple yet it doesn't work.
I have an image. I want it to change to a second image when I click on it, and to a third image when I click on the second image. and then, I want it to change back to the first image when the third image is clicked.
html:
<img id="narrow" class="item" src="images/joe2.jpg" style="cursor:pointer" onclick="changeImage(this);">
javascipt:
function changeImage(imgl) {
if(imgl.src=="images/joe2.jpg") {
imgl.src="images/stray_cat.jpg";
}
else if (imgl.src=="images/stray_cat.jpg") {
imgl.src="images/mathewgarber.jpg";
}
else // (imgl.src=="images/mathewgarber.jpg") {
imgl.src="images/joe2.jpg";
}
}
what happens is that nothing happens when I click on the first image. thanks for your help.
Try something like this:
var images = [
'http://lorempixel.com/100/100/nature/1',
'http://lorempixel.com/100/100/nature/2',
'http://lorempixel.com/100/100/nature/3'
],
i = 0;
function changeImage(img) {
img.src = images[++i % images.length];
}
Comparing image src with a string is not very reliable because it can contain full domain and protocol. Instead you can store images in array and use % operator which is very useful for such kind of cycling.
Demo: http://jsfiddle.net/phJA4/
As dsfq above said, the image src url will be relative, including the site host.
function changeImage(imgl) {
if (imgl.src.indexOf('images/joe2.jpg') > -1) {
imgl.src = "images/stray_cat.jpg";
} else if (imgl.src.indexOf("images/stray_cat.jpg") > -1) {
imgl.src = "images/mathewgarber.jpg";
} else // (imgl.src=="images/mathewgarber.jpg")
{
imgl.src = "images/joe2.jpg";
}
}
If you have your heart set on your method, you can use a indexOf check to determine if the image name is part of the full src url.
First of all you have the last { commented out by your imgl.src=="images/mathewgarber.jpg").
Secondly, the img1.src gives you a different string, take a look at this Demo
You should check for the src like this:
if(imgl.src.indexOf("images/joe2.jpg") > -1)

Categories