We Keep Coding

Trying to add smooth Image transition between background images

This is the code I currently have:
$('ul.whats_new_ul li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.whats_new_ul li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
if(tab_id == 'Messages'){
$('#what_new_back').css('background-image', 'url(img/mobile-app/global/whts_new.jpg)' );
}else if(tab_id == 'gift'){
$('#what_new_back').css('background-image', 'url(img/mobile-app/global/gift_back.jpg)' );
}else if(tab_id == 'locators'){
$('#what_new_back').css('background-image', 'url(img/mobile-app/global/locater.jpg)' );
}else if(tab_id == 'menu'){
$('#what_new_back').css('background-image', 'url(img/mobile-app/global/menu_back.jpg)' );
}
});
to see it clearer in action - this link here - under section What's New
I wondering how do I add a smooth transition between clicks and make sure the background image has the slideUp animation when each tab is clicked?

See this please:
Animate background image change with jQuery
It is not possible to animate the background itself, but it is possible to animate the element containing the background.

Without your HTML and CSS I can't give you a correct response but I think that this demo can help you
http://css3.bradshawenterprises.com/cfimg/
Basically you can't animate backgrounds, you need to use divs or imgs and animate them.
"Demo 6 -Fading between multiple images on click"
<div id="cf7" class="shadow">
<img class='opaque' src="/images/Windows%20Logo.jpg" />
<img src="/images/Turtle.jpg;" />
<img src="/images/Rainbow%20Worm.jpg;" />
<img src="/images/Birdman.jpg;" />
</div>
You can use a wrapper (#backgrounds, #content), use position:absolute and z-index.
Something like
<div style="position:relative">
<div id="content" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:20">
...
</div>
<div id="backgrounds" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10">
<img .../>
<img .../>
...
</div>
</div>

Slider - How would you make a simple slider?

EDIT: I WANT MY SLIDER TO BE EASY TO YOU AND ONCE A LINK IS CLICKED THE IMAGE THAT CORRELATES WITH LINK SHOWS.
I'm looking to make a really simple "slider" that if you click a link, the img shows that correlates with it. I've been trying to find something for a bit now and things are either too flash or don't suit my needs. This came close: http://jsfiddle.net/bretmorris/ULNa2/7/
I would something a little simpler that can be applied easily to multiple images for different divs.
This is what my code looks like with just a plain img tag to it:
<div id="adobe_content" class="hdiv"><button class="x">X</button>
<img src="images/adobefront.png"><br>
<img src="images/adobeinside.png"><br>
<img src="images/adobeback.png"><br>
<h5>Adobe Brochure</h5>
<p>
I wanted to make something functional and out the box that Adobe might consider giving out. It's clean like their work and sparks interest in opening the brochure with the cut out in the center. The front flap is able to slide into a slot on the right side for a neat logo. They're now more interested in their cloud, but the information is inside is still relevant!
</p>
<b>Programs used: Adobe Illustrator, InDesign and Photoshop.</b>
</div>
The code doesn't work for me because, well I partially don't understand it, and I'm not sure how to make it suit my needs (especially if I got up to multiple images) like correlating with an image.

Perhaps understanding what is going on would maybe get you on the right track, so here is an explanation:
$('a.prev').click(function() {
prevSlide($(this).parents('.slideshow').find('.slides'));
});
//clicking image goes to next slide
$('a.next, .slideshow img').click(function() {
nextSlide($(this).parents('.slideshow').find('.slides'));
});
This part is relatively straightforward, when you click on the previous or next links, call the prevSlide or nextSlide function, passing the collection of slides as an argument.
//initialize show
iniShow();
function iniShow() {
//show first image
$('.slideshow').each(function() {
$(this).find('img:first').fadeIn(500);
})
}
Initialize the slideshow by finding each slideshow on the page and fading in the first image. $(this) refers to the <div class="slideshow"> parent, find all child image tags and take the first, fade that element in (and do it in 500 milliseconds).
function prevSlide($slides) {
$slides.find('img:last').prependTo($slides);
showSlide($slides);
}
function nextSlide($slides) {
$slides.find('img:first').appendTo($slides);
showSlide($slides);
}
The prevSlide and nextSlide functions both rearrange the order of images, this line in particular:
$slides.find('img:first').appendTo($slides);
Is moving the first image to the end of the images, so:
<img src="http://placekitten.com/300/500" width="300" height="500" />
<img src="http://placekitten.com/200/400" width="200" height="400" />
<img src="http://placekitten.com/400/400" width="500" height="400" />
becomes:
<img src="http://placekitten.com/200/400" width="200" height="400" />
<img src="http://placekitten.com/400/400" width="500" height="400" />
<img src="http://placekitten.com/300/500" width="300" height="500" />
$slides.find('img:last').prependTo($slides); does the inverse and moves the last image to the beginning.
function showSlide($slides) {
//hide (reset) all slides
$slides.find('img').hide();
//fade in next slide
$slides.find('img:first').fadeIn(500);
}
Finally, showSlide accepts the collection of images, hides all of them and then fades in the first image (since the collection is reordered each time, the first is a different image).
Now, if you want a link for each image that will display a corresponding image, you could do something as simple as:
<a class="image" data-src="http://placekitten.com/300/500">Kitten 1</a>
<a class="image" data-src="http://placekitten.com/200/400">Kitten 2</a>
<a class="image" data-src="http://placekitten.com/400/500">Kitten 3</a>
<div id="image-container">
<img src="http://placekitten.com/300/500" />
</div>
and something like the following:
$('.image').on('click', function() {
var imageSrc = $(this).data('src');
$('#image-container img').prop('src', imageSrc);
});
Which will update the child image tag of <div id="image-container"> with the data-src attribute value in the clicked link.
http://jsfiddle.net/9sxt6n0t/
Hope this helps.

just a quick function to slide
function slideIt(images , prev , next){
$('.slideshow img:nth-child(1)').show();
var imagesLength = $(images).length;
var i = 1;
$(prev).click(function() {
$(images).hide();
if(i !== 1){
$(images + ':nth-child('+ (i - 1) +')').show();
i--;
}else{
$(images +':nth-child('+imagesLength +')').show();
i = imagesLength;
}
});
//clicking image goes to next slide
$(''+next+','+images+'').on('click',function() {
$(images).hide();
if(i !== imagesLength){
$(images + ':nth-child('+ (i + 1) +')').show();
i++;
}else{
$(images + ':nth-child(1)').show();
i = 1;
}
});
}
and use like that slideIt(Images , prevArrow , nextArrow)
slideIt('.slideshow img','a.prev' , 'a.next');
DEMO HERE

How to remove previous li on anchor click

I am setting some <li> and anchor tag using jQuery . Now i want to remove the attach li on anchor click.Let me show on code what I am trying to do.And I can't assign any id to these elements as they are generating dynamically.
<ul id="imagess">
<li><img width="60" height="60" src="http://example.com/images/event.png"></li> <img style="float: left; margin-left: -25px;margin-top: 60px;" src="http://example.com/images/delete.png">
<li><img width="60" height="60" src="http://example.com/images/event2.png"></li> <img style="float: left; margin-left: -25px;margin-top: 60px;" src="http://example.com/images/delete.png">
</ul>
I am trying to remove the <li> on deletit() js function call

A solution for your current HTML using event delegation.
$(document).on('click', 'li + a', function(){
$(this).prev().remove();
})
However, your HTML/JS should look more like this to be valid:
$(document).on('click', '#imagess li a', function(){
console.log(this);
$(this).closest('li').remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="imagess">
<li>
<img width="60" height="60" src="http://example.com/images/event.png">
<a href="javascript:void(0);">
<img style="float: left; margin-left: -25px;margin-top: 60px;" src="http://example.com/images/delete.png">
</a>
</li>
<li>
<img width="60" height="60" src="http://example.com/images/event2.png">
<a href="javascript:void(0);">
<img style="float: left; margin-left: -25px;margin-top: 60px;" src="http://example.com/images/delete.png">
</a>
</li>
</ul>

$('ul a').click(function() {
$(this).prev().remove();
});
prev() gets the previous sibling to the a element, which is the li. remove() is pretty self explanatory.
Also, your HTML is invalid. The only elements allowed as direct children of ul are li elements.
Edit: The answers with "closest" given above will be correct if you move the a inside the li. People are assuming they're already in there as the HTML is invalid otherwise.

Update : remove inline onclick attribute from a tag as you have defined click event in code itself
Previous fiddle : http://jsfiddle.net/Lp88exqb/
New Fiddle : http://jsfiddle.net/Lp88exqb/1/
You should not have a tag as direct child of ul tag, it should be in li tag and than you have to use following code to remove previous li on any click
$('ul a').click(function() {
$(this).parent().prev().remove();
});

1. Step 1
Your HTML CODE has to be like this
-------------------------------------
<code>
<ul id="imagess">
<li>Img1</li>
Img1
<li>Img2</li>
Img2
</ul>
</code>
-------------------------------------------
2. Write a JS Funcion like this
-------------------------------------------
function deleteit(obj){
$(obj).prev('li').remove();
}

You have the jQuery tag, so here is an example with that:
$(this).closest('li').prev().remove();
Update: from the wording of question details and your comment, it sounds like path is the anchor itself, and that you don't want to remove previous li, but the container li itself, if so, change to:
$(path).closest('li').remove();
Update 2
Check this:
$('#imagess').on('click', 'a', function() {
$(this).prev('li').remove();
return false;
})
However, this is only for your invalid HTML, where the <a> lives directly inside <ul>. In correct way, the <a> should be inside the <li>, which I see is now fixed in another answer.

rollover one image in a DIV to get another to show up in a separate DIV

Im building a website where there is a photo of a girl and to the side are a group of glasses that you can try on over her face. Right now I have it so that when you rollover one of the glasses in the group they are highlighted, but I also want a pair to show up over the photo in separate DIV when you click it.
This is what i have for just the rollover:
function rollOver()
{
document.getElementById("helm").src ="images/helmOver.jpg";
}
function rollOut()
{
document.getElementById("helm").src ="images/helmStatic.jpg";
}
</script>
<div id="framestyle">
<img class="frame" src="images/helmStatic.jpg" id="helm" border="0" width="71" height="40" onmouseover="rollOver()" onmouseout="rollOut()"/>
</div>
This is the div and image I want to show up over the photo when a pair are clicked:
<div id="glasses">
<img src="images/faceGlasses.png">
</div>
***How do i get the image in the second div to only show up when the image/rollover is clicked in the first div?

I would add
function clickedGlasses(glassesImage) {
document.getElementById("glasses_overlay").src = glassesImage;
document.getElementById("glasses_overlay").style.display = "block";
}
To your script tag at the top, and then
<img id="glasses_overlay" src="blank.png" style="display:none;">
Into your "glasses" div alongside the "faceGlasses" image (you'll need to position this over the top of the other div, either absolutely, or relatively)
And finally, change your "helm" img to
<img class="frame" src="images/helmStatic.jpg" id="helm" border="0" width="71" height="40" onmouseover="rollOver()" onmouseout="rollOut()" onclick="clickedGlasses('images/helmOverlay.png')" />

Show absolutely pos. div on hover in list

I have a simple question yet it's not working out. See this html:
<div id="viewer">
<ul class="tj_gallery">
<li><img src="images/projecten/main/chicane.png" alt="" width="280" height="178" />01</li>
</ul>
</div>
The a.abhover is absolutely positioned inside the relative li. The a.abhover has display:none; in CSS. If I hover one li (it's a long list!) the a.abhover should fadeIn # 1000ms. Right now this is working, but only for every single one of those li's. See my jQuery code:
$(".tj_gallery li").hover(function(){
$(".tj_gallery li a.abhover").stop(true,true).fadeIn("fast");
}, function(){
$(".tj_gallery li a.abhover").stop(true,true).fadeOut("fast");
});
Adding $(this, ".tj_gallery li a.abhover") or $(".tj_gallery li a.abhover", this) doesn't help (it breaks it).

$(".tj_gallery li").hover(function(){
$("a.abhover", this).stop(true,true).fadeIn("fast");
}, function(){
$("a.abhover", this).stop(true,true).fadeOut("fast");
});