Develop Reference

Slide show add and remove class for change image and button

I want make slide show.
its my code:
java script =>
setInterval(function () {
var activeLi = document.querySelector('li.current');
activeLi.classList.remove('current');
if (activeLi.nextElementSibling ) {
activeLi.nextElementSibling .classList.add('current');
} else {
activeLi.parentElement.firstElementChild.classList.add('current')
}
var activeIMG = document.querySelector('.active_slider');
activeIMG.classList.remove('active_slider');
if (activeIMG.nextElementSibling ) {
activeIMG.nextElementSibling .classList.add('active_slider');
} else {
activeIMG.parentElement.firstElementChild.classList.add('active_slider')
}
}, 5000);
.active_slider{
display: inline;
}
.current{
color: red;
}
<div id="slider" class="dk-box mrg-bottom">
<div id="dk-slider-div" class="slides center">
<a class="clickCount" elementtype="1" categorytitle="">
<img src="/f15468d9.jpg" class="slideItem active_slider">
</a>
<a class="clickCount" elementtype="1" categorytitle="">
<img src="/f15468d9.jpg" class="slideItem">
</a>
<a class="clickCount" elementtype="1" categorytitle="">
<img src="/f15468d9.jpg" class="slideItem">
</a>
<footer>
<ul class="tabs">
<li class="tabItem current">
<a>
Slide 1
</a>
</li>
<li class="tabItem">
<a>
Slide 2
</a>
</li>
<li class="tabItem">
<a>
Slide 3
</a>
</li>
</ul>
</footer>
</div>
</div>
buttons was active and changed after 5 sec but image doesn't change
active_slider = active slider
current = active button
how can i make auto change for slider
i want add class for active and remove class for hide
if cant with class i can active with style { display: inline; }

Try something like this, it will run every 3 second and set the class active to the next element.
setInterval(function(){
var slider = $(".slider");
var active = slider.find(".active");
var sliderCount = slider.find("li").length;
var index = active.index();
active.removeClass("active");
if (index < sliderCount - 1){
active.next().addClass("active")
} else {
slider.find("li:first").addClass("active")
}
}, 3000);
.active{
color: yellow
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<li class="slide1">
<img src"image.png" alt="1">
</li>
<li class="slide2 active">
<img src"image.png" alt="2">
</li>
<li class="slide3">
<img src"image.png" alt="3">
</li>
</div>

Your html is invalid, there is = missing after class, should be class="slide1 active". To invoke function after some time you can use setInterval() adn to modify classes you can modify classList
property:
var x = 1000;
setInterval(function () {
var activeLi = document.querySelector('li.active');
activeLi.classList.remove('active');
if (activeLi.nextElementSibling ) {
activeLi.nextElementSibling .classList.add('active');
} else {
activeLi.parentElement.firstElementChild.classList.add('active')
}
}, x);
.active {
color:red
}
<div class="slider">
<li class="slide1 active">
<img src"image.png">
</li>
<li class="slide2">
<img src"image.png">
</li>
<li class="slide3">
<img src"image.png">
</li>
</div>
On every interval it removes class active from element and checks if element has sibling element (by checking nextElementSibling existence). Depending on it, active class is attached to either sibling or first element (parentElement.firstElementChild).

How to change the class of an element based on the class of another

I have a list of navigation items where when one is clicked it's status becomes active
$(document).ready(function() {
$('li').click(function() {
$('li').removeClass('active');
$(this).addClass('active');
});
});
I have a container div with multiple hidden divs inside and based on the order of the li that is active I want to be able to show the hidden div that is the same order as the li.
<div class="col-md-9">
<div id="item1">
<p>Section#1</p>
<img src="image-plugin.jpg" class="img-responsive">
</div>
<div id="item2">
<p>Section#2</p>
<img src="image-plugin.jpg" class="img-responsive">
</div>
<div id="item3">
<p>Section#3</p>
<img src="image-plugin.jpg" class="img-responsive">
</div>
</div>
So basically if the second li has the active class then I can have the second of the hidden divs be visible.
Ideally a solution that doesn't involve attaching id's to the li's would be best but I've been having trouble achieving this and would appreciate any help possible.

Take a look at this demo bootply.
For this HTML:
<div class="col-md-3">
<ul class="list-group">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>
</div>
<div class="col-md-9">
<div id="item1" class="showhide hidden">
<p>Section#1</p>
<img src="http://www.placehold.it/350x150" class="img-responsive">
</div>
<div id="item2" class="showhide hidden">
<p>Section#2</p>
<img src="http://www.placehold.it/350x150" class="img-responsive">
</div>
<div id="item3" class="showhide hidden">
<p>Section#3</p>
<img src="http://www.placehold.it/350x150" class="img-responsive">
</div>
</div>
This JS:
$(document).ready(function() {
$('li').click(function() {
$('li').removeClass('active');
$(this).addClass('active');
var index = $(this).index();
$('.showhide').addClass('hidden').eq(index).removeClass('hidden');
});
});

You could use index() method and following logic regarding click event:
$(document).on("click", "li:not(.active)", function () {
$('li.active').add(this).toggleClass('active');
$('div[id^=item]').hide().eq($(this).index()).show();
});
-jsFiddle-

You can use index() which will return order number - 1 of matched elements.
So you can write in next way:
$(document).ready(function() {
$('li').click(function() {
$('li').removeClass('active');
$(this).addClass('active');
var thisIndex = $(this).index();
$('.col-md-9 .div').eq(thisIndex).show();
});
});

Using jquery, how to change div position depending on variable

I'm trying to create a simple slider
I have main images and thumbnails
I want to animate the thumbnails container to the right position, put i don't want to use integer i want to use width value from a variable
My HTML code is some thing like that
<div class="Slider" >
<ul class="main-image">
<li><img src="images/gal-1.jpg" alt=""/></li>
<li><img src="images/gal-2.jpg" alt=""/></li>
<li><img src="images/gal-3.jpg" alt=""/></li>
</ul>
<div class="thumbnails-holder">
<a class="prev"></a>
<div class="thumbnails-items">
<a class="thumbnails-item">
<img src="images/gal-1.jpg" alt=""/>
</a>
<a class="thumbnails-item">
<img src="images/gal-2.jpg" alt=""/>
</a>
<a class="thumbnails-item">
<img src="images/gal-3.jpg" alt=""/>
</a>
</div>
<a class="next"></a>
</div>
</div>
My J query code
var ThumbWidth = parseInt($(".thumbnails-item").width());
$(".next").click(function(){
$(this).parents().find(".thumbnails-items").animate({
right: '-=95'
})
})
is there a way to write it like right: '-=ThumbWidth'

var ThumbWidth = parseInt($(".thumbnails-item").width());
$(".next").click(function() {
$(this).parents().find(".thumbnails-items").animate({
right: '-=' + ThumbWidth
});
});

Jquery error() working in chrome and IE but not firefox

I am trying to figure out why this jQuery is working fine in Chrome and IE but not in Firefox. What it should be doing (and is doing in chrome and IE) is looping through each of the li's in the ul and seeing if the IMG src throws an error. If it does the li is removed.
$('ul.community-properties li').each(function() {
$('li IMG').on('error', function() {
$(this).parent().remove();
});
});
I have also tried
$('ul.community-properties li').each(function() {
$('li IMG').error(function() {
$(this).parent().remove();
});
});
If anyone has a more efficient way or a way to get this to work in all browsers that would be great.
Here is the html structure
<ul class="community-properties">
<li>
<img src="{tag_community property1_value}" />
<div class="item-link">View Property Details</div>
</li>
<li>
<img src="{tag_community property2_value}" />
<div class="item-link">View Property Details</div>
</li>
<li>
<img src="{tag_community property3_value}" />
<div class="item-link">View Property Details</div>
</li>
<li>
<img src="{tag_community property4_value}" />
<div class="item-link">View Property Details</div>
</li>
</ul>

Check to see if the image was loaded already
window.setTimeout( function() { //added delay to make sure that onerror already has run.
$('ul.community-properties li img').one('error', function() { //bind the error event to the images
$(this).parent().remove();
}).filter( function() { //check to see if an image was loaded from the cache as broken (or if onerror fired before set)
return (this.complete && (this.naturalWidth===0 || this.naturalWidth===undefined));
}).trigger("error"); //fire the error event
},1000); //Broken images should hide after one second
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="community-properties">
<li>
<img src="{tag_community property1_value}" />
<div class="item-link">View Property Details</div>
</li>
<li>
<img src="http://i.imgur.com/UyY6HH5.gif" />
<div class="item-link">View Property Details</div>
</li>
<li>
<img src="{tag_community property3_value}" />
<div class="item-link">View Property Details</div>
</li>
<li>
<img src="{tag_community property4_value}" />
<div class="item-link">View Property Details</div>
</li>
</ul>

Browser compatibility code for all functions, events, etc

I used onmouseover and onmouseout for viewing image but its not working in chrome. need solution for this problem.
script is
<script>
var img;
window.onload = function () {
img = document.getElementById ("img");
}
</script>
<img style= "position:absolute;TOP:90px; LEFT:185px;visibility:hidden;"
class="two"
id="img"
src="services/web2.png"
width="800" height="500" alt=""/>
<div class="item home">
<img src="imagess/bg_home.png" alt="" width="199" height="199" class="circle"/>
<h2>IT</h2>
<ul>
<li>
<a href="target4"
onMouseOver="img.style.visibility='visible'; img.src='services/web2.png'"
onMouseOut="img.style.visibility='hidden';">Sales & Service</a>
</li>
<li>
<a href="target5"
onMouseOver="img.style.visibility='visible'; img.src='services/web2.png'"
onMouseOut="img.style.visibility='hidden';">CCTV</a>
</li>
<li>
<a href="target6"
onMouseOver="img.style.visibility='visible'; img.src='services/web2.png'"
onMouseOut="img.style.visibility='hidden';">DVR</a>
</li>
</ul>
</div>

You are using very obtrusive javascript, it is simply bad practice.
So tracing the mistake don't make so much sense.
People who suggested using jQuery are very much right, and you will do yourself a favour
by taking that advice.
Using onMouseOver and other javascript directly on DOM element is just not how things are done anymore.

Separate your JavaScript
window.onload = function () {
var img = document.getElementById('img'),
links = ['target4', 'target5', 'target6'],
i = links.length, e,
over = function over(){
img.style.visibility='visible';
img.src='services/web2.png';
},
out = function out(){
img.style.visibility='hidden';
};
while( --i >= 0 ){
e = document.getElementById(links[i]);
e.addEventListener('mouseover', over, false);
e.addEventListener('mouseout', out, false);
}
}​
from your HTML
<img id="img" class="two" src="services/web2.png" alt=""/>
<div class="item home">
<img src="imagess/bg_home.png" alt="" width="199" height="199" class="circle"/>
<h2>IT</h2>
<ul>
<li>
<a id="target4" href="target4">Sales & Service</a>
</li>
<li>
<a id="target5" href="target5">CCTV</a>
</li>
<li>
<a id="target6" href="target6">DVR</a>
</li>
</ul>
</div>​
Working example fiddle.

You better use jQuery for that kind of stuff, that should work on all browsers.
http://api.jquery.com/mouseover/

try this:
css:
#img {
position:absolute;
top:90px;
left:185px;
visibility:hidden;
}
JS:
$(function(){
var $img = $('#img');
// selector container for image
var $container = $('.item');
$container.find('ul li a')
.bind('mouseover', function(event) {
var target = $(this).attr('href'); //if you need to differentiate
$img
.css('visibility', 'visible')
.attr('src', 'services/web2.png');
})
.bind('mouseout', function(event) {
var target = $(this).attr('href'); //if you need to differentiate
$img
.css('visibility', 'hidden');
})
});
HTML:
<img class="two" id="img" src="services/web2.png" width="800" height="500" alt="" />
<div class="item home">
<img src="imagess/bg_home.png" alt="" width="199" height="199" class="circle"/>
<h2>IT</h2>
<ul>
<li>Sales & Service</li>
<li>CCTV</li>
<li>DVR</li>
</ul>
</div>

Use jQuery!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('li a').mouseenter(function () {
$('li a').hide(1);
}).mouseout(function () {
$('li a').show(1);
});
});
</script>
</head>
<body>
<ul>
<li><a id="link" href="http://www.tivo.com/">DVR</a></li>
</ul>
</body>
</html>