We Keep Coding

How to position loading animation inside input box?

I want to position my loading animation on the same line, inside my input box, to the right.
I tried :
<span>
<input id="searchbox" placeholder="Enter Catalog # " type="text" />
<img style="float:right;" id='loading' width="100px" src="http://rpg.drivethrustuff.com/shared_images/ajax-loader.gif"/>
</span>
I get :
I couldn't get it to show inside my input box. :(

You can also do it as a background image in CSS. Just create a CSS class and apply at the time of loading the data. After Ajax call is completed remove the "loading" CSS class from the text input box.
.loading {
background-color: #ffffff;
background-image: url("http://loadinggif.com/images/image-selection/3.gif");
background-size: 25px 25px;
background-position:right center;
background-repeat: no-repeat;
}
You can view it here: http://jsfiddle.net/tejsoft/7pzgtevv/4/

I agree with #Sam in that it could be the background of the element, and all you'd have to toggle would be a class. If you set it up like:
input {
box-sizing: border-box;
border: 1px solid #ccc;
height: 30px;
padding: 10px;
}
input.loading {
background: url(http://www.xiconeditor.com/image/icons/loading.gif) no-repeat right center;
}
And then you can toggle the class as you're making your ajax call like:
$(document).on('blur', 'input', function(e) {
var $t = $(e.currentTarget);
$t.addClass('loading');
$.ajax({
url: $t.data('ajax'),
success: function(data) {
//dostuff
$t.removeClass('loading');
}
});
});
That, in my opinion, would be the simplest and most effective way of doing it. If you want to look further, here's a fiddle

Try fiddling around with absolutely positioning the element.
fiddle
img {
position: absolute;
left: 112px;
top: -22px;
}
https://jsfiddle.net/kmbxawdd/2/
Furthermore, you can set the containing elements position to relative, meaning you can style directly to these dimensions rather than the documents.

My solution: add a class to the input element that defines a background image, then modify its position with background-position-x and background-position-y
.Loading {
background-image: url("bg.gif");
background-repeat: no-repeat ;
background-position-x: 99% ;
background-position-y: 50% ;
}
you can also use keywoords for postioning
background-position-x: right;
background-position-y: center;
or combine them
background-position: center right;
then, you can just add or remove this class to show/hide the animation

Try the following:
Place the animation after the input field in the HTML
Set position: relative; on the image
Allows you to tweak the position of the element from where it would be by default
Use the top CSS attribute to shift the animation upward to the point where it is directly on top of the input field.

Place both the input and the img inside a div and make that div look like a text box. I am currently on my phone so it might not be perfect but I think you get the point.
http://jsfiddle.net/soz8jq2x/

just include <img> element inside <input> element.then you can use js to show and hide this image using id attribute.
<img class="loading" src="http://loadinggif.com/images/image-selection/3.gif" id="img-loading">
.loading {
position: absolute;
top: 206px;
right: 30px;
display: none;
}

How to make onclick event to div background image?

I created a div in html and assigned a background image to it, and i want to make an onclick event to that photo and don't know how, that's the div :
.add_btn {
background-color: #099;
position: absolute;
height: 35px;
width: 200px;
background-image: url(img/add.png);
background-repeat: no-repeat;
background-position: center center;
top: 265px;

You didn't give any information about your DOM except that you have an element with that class. It's hard to give a good answer but I'll try.
The following code will attach a function to the onclick events of all the elements with the add_btn class.
document.getElementsByClassName("add_btn").onclick =
function () {
alert("Hello");
};

Background image click is not possible. Because you have a foreground layer.
But you can use this JQuery for foreground image click...
$('.className > .Inner_Classname2= > img').click(function(e) {
alert("Ok");
});

Change Background when part of it is hovered

i am totally new in web design, and i am right now struggling with creating part of my website, i need to somehow make this happen:
When PART of the BODY BACKGROUND is HOVERED, make the background change to "B", and when the mouse is not over that part, I need it to change back to background "A".
I have seen some examples here but as i am a beginner, i have no idea how to use javascript, if you could please give me some light here, either on pure CSS or on how to apply javascript.

This is accomplished very easily using a third party javascript library called JQuery http://jquery.com, you can see a working example here: http://jsfiddle.net/bbp8G/
$(document).ready(function(){
$("#hover").mouseenter(function(){
$(this).css("background","#009900");
}).mouseleave(function(){
$(this).css("background","#ffffff");
});
});

Here's the easiest way I know how to do what you've described...
<!-- POSITION THIS DIV WHEREVER YOU WANT THE
USER TO HOVER SO THAT THE BACKGROUND WILL CHANGE -->
<div id="hover">
</div>
<!-- PUT THIS CODE IN YOUR <HEAD> -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" />
<style>
#hover { width: 200px; height: 200px; position: relative; top: 200px; background: green; }
.myNewBackround { background-color: red; }
</style>
<script>
$(document).ready(function() {
// when the #hover DIV is hovered, change the background of the body
$('#hover').hover(function() {
$('body').addClass('myNewBackground');
});
});
</script>
Here's a JS FIDDLE:
http://jsfiddle.net/ZKaJn/

Or you can do it with pure CSS
<div id="left"> </div>
<div id="right"> </div>
And the CSS part:
#left
{
background-color:#000;
float:left;
width:50%;
height:200px;
}
#right
{
background-color:#FF0;
float:right;
width:50%;
height:200px;
}
#right:hover
{
background-color:#00F;
}
#left:hover
{
background-color:#F00;
}
You can replace the div's and values with whatever you like, the main part is the #right:hover and #left:hover

Actually with just css it is not possible to change the background of the body when hovering a DOM element. This is because CSS does not allow you (yet) to travel up the DOM tree (select a parent), only down (select a child).
That being said, it is however possible to mimic the effect, and it is even quiet easy if it is the body background you want to change. You can lay a pseudo element with a background on top of your body background, and underneath the actual content. This way it looks as if the body background has changed.
The css to achieve this would look something like this:
.hover-me:hover:after {
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
background: url(http://placekitten.com/600/300) center center;
background-size: cover;
z-index: -1;
}
And a small fiddle to demonstrate: http://jsfiddle.net/3dwzt/
Should be compatible with IE8 and up

background image event handler

If a HTML element (e.g. div) has a CSS background image is it possible to assign an event handler that is triggered when the user clicks on the background image, but not any other part of the element?
If so, a JQuery example would be much appreciated.

While it's not possible to detect a click on the background image, you can use some clever JS and CSS wizardry and come up with a masking element over the background image like this: http://jsfiddle.net/ahmednuaman/75Rxu/, here's the code:
HTML:
<div id="bg_img_1"></div>
<div id="bg_img_2">
<div id="hit"></div>
</div>
CSS:
div
{
display: block;
position: relative;
width: 200px;
height: 200px;
background-repeat: no-repeat;
background-position: center center;
}
#bg_img_1
{
background-image: url('http://placekitten.com/100/100');
}
#bg_img_2
{
background-image: url('http://placekitten.com/100/100');
}
#hit
{
display: block;
position: absolute;
width: 100px;
height: 100px;
background: #000000;
opacity: .3;
margin: 50px;
}
JS:
function handleClick(e)
{
console.log(e.target.id);
}
$( '#bg_img_1' ).click( handleClick );
$( '#hit' ).click( handleClick );

I think there is a better and simple way to achieve this here is my solution
$(document).ready(function() {
$("*").click(function(event)
{
if(event.target.nodeName == 'BODY')
{
alert('you have just clicked the body background');
}
});

Here is a very basic code that only work in x axis to show it's possible with injection of an img element with background-image url value as it's src and detecting the background image height and width to calculate if click happened on background image or not.
This code needs tons of improvement. It doesn't work in y axis. Also background-position and background-size are not involved. But it's easy to add those futures.
Here is Fiddle:
And here is jQuery code:
$('#d').bind('click', function(e){
var d = $(this),
bg = {};
//insert an image to detect background-image image size
$('body').append(
$('<img/>').attr('src',
d.css('background-image').split('(')[1].split(')')[0]
).attr('class', 'testImage'));
bg.h = $('.testImage').height();
bg.w = $('.testImage').width();
console.log(bg, e.offsetX, $('.testImage').width());
if(e.offsetX > $('.testImage').width()){
$('#l').text('it was NOT on background-image');
}
else{
$('#l').text('it was on background-image');
}
$('.testImage').hide();
})

jquery slideshow using background images

I have a div which currently has a static background image.
I need to create a slideshow of background images for this div.
I am able to achieve this by just setting a timeout and then changing the background image in the CSS but this is not very elegant.
I would ideally like to fade the background images out and in, but the div contains other page elements so I can not alter the opacity in any way.
Does anyone know of a good way to do this using jquery??
Here's some code which fades out/in but fades out the contents of the div too.
$("#slideshow").fadeOut(5000, function(){
$("#slideshow").css('background-image','url(myImage.jpg)');
$("#slideshow").fadeIn(5000);
});

HTML:
<div class="slideshow"></div>
CSS:
.slideshow
{
position: relative;
width: 350px;
height: 150px;
}
.slideshow img
{
position: absolute;
width: 350px;
height: 150px;
z-index:-1;
}
jQuery
var images=new Array('http://placehold.it/250x150','http://placehold.it/250x150/123456','http://placehold.it/250x150/dbca98');
var nextimage=0;
doSlideshow();
function doSlideshow()
{
if($('.slideshowimage').length!=0)
{
$('.slideshowimage').fadeOut(500,function(){slideshowFadeIn();$(this).remove()});
}
else
{
slideshowFadeIn();
}
}
function slideshowFadeIn()
{
$('.slideshow').prepend($('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none">').fadeIn(500,function(){setTimeout(doSlideshow,1000);}));
if(nextimage>=images.length)
nextimage=0;
}
jsfiddle Demo

How about adding a thumbs pagination list, to update the background image on click, and then, a second or two, and it starts fading in and out with the next bg img automatically?
HTML:
<div class="slideshow">
<h1>Text</h1>
<input type="button" value="Hello" />
</div>
<ul>
<li><img src="http://placehold.it/50x50"></li>
<li><img src="http://placehold.it/50x50/123456"></li>
<li><img src="http://placehold.it/50x50/dbca98"></li>
</ul>
CSS:
.slideshow
{
position: relative;
width: 350px;
height: 150px;
}
.slideshow img
{
position: absolute;
width: 350px;
height: 150px;
z-index:-1;
}
ul {position: absolute; top: 125px; left: 75px;}
li {
float: left;
border: 1px solid #000;
margin: 15px;
}
Javascript:
var images=new Array('http://placehold.it/250x150','http://placehold.it/250x150/123456','http://placehold.it/250x150/dbca98');
var nextimage=0;
doSlideshow();
function doSlideshow()
{
if($('.slideshowimage').length!=0)
{
$('.slideshowimage').fadeOut(500,function(){slideshowFadeIn();$(this).remove()});
}
else
{
slideshowFadeIn();
}
}
function slideshowFadeIn()
{
$('.slideshow').prepend($('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none">').fadeIn(500,function(){setTimeout(doSlideshow,1000);}));
if(nextimage>=images.length)
nextimage=0;
}
See it all together at http://jsfiddle.net/tatygrassini/R4ZHX/75/.

Instead of just changing the background image, you could first call
fadeOut()
then change source, and then call
fadeIn()
something like...
$('#image').fadeOut(500, function() {
$(this).attr('src', 'new-image.png')
.load(function() {
$(this).fadeIn();
});
});
To use a variety of images, there are a number of solutions, but you could simply iterate through a list of them.

You can create an positioned absolutely and with a slider plugin change the images contained in the div. Otherwize you have to sprite the background. I achieved this with the Jquery Tools tabs plugin.
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true
// use the slideshow plugin. It accepts its own configuration
}).slideshow();

Here is a solution that not only addresses your problem, but will also solve some other problems as well. Create another DIV on your DOM as an overlay, and execute your fade functions on this DIV only. It will appear as though the content is fading in / out. This approach is also more performant, as you are only fading a single DIV instead of multiple elements. Here is an example:
$('#containeroverlay').width($('#container').width()).height($('#container').height()).fadeIn('normal', function() {
// Step 1: change your content underneath the hidden div
// Step 2: hide the overlay
$('#containeroverlay').fadeOut('normal');
})
Most importantly, this approach will work in IE6-8 without screwing up the font aliasing of elements you may have on the div.