We Keep Coding

Can we use selectors as cases in JQuery?

I need to create a function with switch inside which will use cases. As cases I'll have '#a li' '#b li' '#c li' '#d li'
If #a/b/c/d li clicked, it will check screen width (for responsiveness), and if it is less than 990 it will show modal #amodal #bmodal and etc, depends on which # is clicked.
How to turn it into one function with switch and cases?
Jquery:
$('#a li').click(function(){
if ($(window).width() < 990) {
$('#amodal').modal('show');
}
});
$('#b li').click(function(){
if ($(window).width() < 990) {
$('#bmodal').modal('show');
}
});
$('#c li').click(function(){
if ($(window).width() < 990) {
$('#cmodal').modal('show');
}
});
$('#d li').click(function(){
if ($(window).width() < 990) {
$('#dmodal').modal('show');
}
});

If #a, #b , #c , #d is not a parent of li you shoud use closest to find what modal to open
$('#a li , #b li , #c li , #d li').click(function () {
if ($(window).width() < 990) {
$('#'+$(this).closest("#a , #b , #c , #d").attr("id")+'modal').modal('show');
}
});
If #a, #b , #c , #d is a parent of li use parent
$('#a > li , #b > li , #c > li , #d > li').click(function () {
if ($(window).width() < 990) {
$('#'+$(this).parent().attr("id")+'modal').modal('show');
}
});
I prefer to add class as a selector and use it
$('.open_modal > li ').click(function () {
console.log("Modal to open:" + $(this).parent().attr("id"));
/*if ($(window).width() < 990) {
$('#' + $(this).parent().attr("id") + 'modal').modal('show');
}*/
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="a" class="open_modal"><li>Test A</li></ul>
<ul id="b" class="open_modal"><li>Test B</li></ul>
<ul id="c" class="open_modal"><li>Test C</li></ul>
<ul id="d" class="open_modal"><li>Test D</li></ul>

You can do something like this, Jquery doc
$("#a li, #b li, #c li, #d li").click(function(){
if ($(window).width() < 990) {
// if parent: $(this).parent().attr("id")
$("#" + $(this).attr("id") + "modal").modal('show');
}
});

Slideshow wont restart

I am trying to create a slideshow for my website but i have no idea
how to make the array restart. I tried putting a for loop in the function but the page only shows the last image every time it reloads. here is the code:
var i=0;
function myfunc(){
console.log(i);
slideShowImage.src = images[i];
console.log(slideShowImage.src);
/**
if (images[i] =="Mir.jpg"){
link = document.getElementById("slideShowLink");
link.href="http://stackoverflow.com";
}
*/
i = i+1;
}
setInterval(myfunc,5000);

Sounds like you want i to wrap back around to 0 after it hits the last image in images. Try replacing i with i % images.length like so:
var i=0;
function myfunc(){
console.log(i);
slideShowImage.src = images[i % images.length];
console.log(slideShowImage.src);
/**
if (images[i] =="Mir.jpg"){
link = document.getElementById("slideShowLink");
link.href="http://stackoverflow.com";
}
*/
i = i+1;
}
setInterval(myfunc,5000);

I think you are missing a component to your function. I think you need to add to your function:
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
Here is code that I have used to make my own slideshow:
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
The function tells it where to start and that at the end, it needs to go back to the first. This is then incorporated in the setInternal at the end.
Here is the css if you want it:
#slideshow {
position:relative;
height:350px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
And the html:
<div id="slideshow">
<img src="img/img1.jpg" alt="" class="active" />
<img src="img/img2.jpg" alt="" />
<img src="img/img3.jpg" alt="" />
</div>

Style Switcher Scriprs

I am very new to jQuery and Javascript so I'm having issues with my style switcher, the css part works but the script doesn't and I'm not sure how to do make it work.
Javascript:
$("#navorin li a").click(function() {
$("link.nav").attr("href",$(this).attr('rel'));
$("script.nav").attr("src",$(this).attr('role'));
});
HTML:
<ul id="navorin">
<li>Left Menu</li>
<li>Right Menu</li>
<li>Top Menu</li>
<li>Top Menu Fixed</li>
</ul>
It changes these:
<script class="nav" src="assets/js/leftmenu.js"></script>
<link class="nav" href="assets/css/leftmenu.css" type="text/css" media="screen" rel="stylesheet">
My menu scripts looks roughly like this, if that helps:
$(window).load(function () {
$('.sidenav ul > li').click(function (ev) {
$(this).find('>ul').fadeToggle();
ev.stopPropagation();
});
$('.sidenav ul > li a.back').click(function (ev) {
$(this).parent().parent().fadeOut();
ev.stopPropagation();
});
});
$(window).on("load resize", function () {
if ($(window).width() <= 768) {
$(document).on("swiperight", function () {
$(".sidenav").addClass('sidenavhover');
$(".overlay").fadeIn();
$(".sidenav li.user").addClass('usershow');
});
$(document).on("swipeleft", function () {
$(".sidenav").removeClass('sidenavhover');
$(".sidenav ul > li ul").hide();
$(".overlay").fadeOut();
$(".sidenav li.user").removeClass('usershow');
});
$(".overlay").click(function () {
$(".sidenav").removeClass('sidenavhover');
$(".sidenav ul > li ul").hide();
$(".overlay").fadeOut();
$(".sidenav li.user").removeClass('usershow');
});
}
if ($(window).width() >= 769) {
$(".sidenav").mouseover(function () {
$(".sidenav").addClass('sidenavhover');
$(".sidenav li.user").addClass('usershow');
$(".overlay").fadeIn();
});
$(".overlay").click(function () {
$(".sidenav").removeClass('sidenavhover');
$(".sidenav ul > li ul").slideUp(100);
$(".sidenav li.user").removeClass('usershow');
$(".overlay").fadeOut();
});
} if ($(window).height() < 458) {
$(".sidenav ul > li.logout").css('position', 'relative');
$(".sidenav ul > li.logout").css('border-top', '0');
}
if ($(window).height() > 458) {
$(".sidenav ul > li.logout").css('position', 'absolute');
$(".sidenav ul > li.logout").css('border-top', '1px solid #eeeeee');
}
if ($(window).height() < 588) {
$(".sidenav.sidenavhover ul > li.logout").css('position', 'relative');
$(".sidenav.sidenavhover ul > li.logout").css('border-top', '0');
}
if ($(window).height() > 588) {
$(".sidenav.sidenavhover ul > li.logout").css('position', 'absolute');
$(".sidenav.sidenavhover ul > li.logout").css('border-top', '1px solid #eeeeee');
}
});
If anyone could help my make it work that would be amazing
Thanks,
Alfred

JQUERY Fade slideshow without white in between

I have a slideshow on this Wordpress website www.2eenheid.de. I am trying to figure out how to make the images fade so it fades between the images instead of fading into a white bg color first and then into an image. Any clue how to do this in my situation, see below?
The javascript:
<script type="text/javascript">
$(function () {
var imgsrc = '';
imgsrc = $('.pikachoose').css('background-image');
$('ul.slideshow-menu').find('a').hover(function () {
var newImg = $(this).attr('src');
$('.pikachoose').stop().fadeOut('slow', function () {
$(this).css({
'background-image': 'url(' + newImg + ')'
}).fadeTo('fast', 1);
});
}, function () {
$('.pikachoose').stop().fadeOut('slow', function () {
$(this).css({
'background-image': imgsrc
}).fadeTo('fast', 1);
});
});
});
</script>
HTML:
<div id="slideshow-main">
<ul class="slideshow-menu">
<li class=""><a title="Support / Beheer" href="/supportenbeheer" src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-4.jpg"><img src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-4.jpg" alt="2Eenheid"/><span>Support / Beheer</span></a></li>
<li class=""><img src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-5.jpg" alt="2Eenheid"/><span>Implementatie</span></li>
<li class="current_page_item"><img src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-11.jpg" alt="2Eenheid"/><span>Cloud</span></li>
<li class=""><img src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-8.jpg" alt="2Eenheid"/><span>Webhosting / Hosting</span></li>
<li class=""><img src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-2.jpg" alt="2Eenheid"/><span>Unit4 Multivers</span></li>
</ul>
</div>
</div>

Try setting the opacity for the class pikachoose to 1
.pikachoose
{
opacity:1 !important;
}

do this with z-index.
CSS
#slideshow-main { position: relative }
.slideshow-main img {z-index: 1; position: absolute; }
.slideshow-main img.active {z-index: 3; }
JQUERY
function cycleImages(){
var $active = $('#slideshow .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#slideshow img:first');
$next.css('z-index',2);//move the next image up the pile
$active.fadeOut(1500,function(){//fade out the top image
$active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
$next.css('z-index',3).addClass('active');//make the next image the top one
});
}
$(function(){
setInterval('cycleImages()', 10000);
});

jquery image gallery - first image no fade

I created a jquery image gallery.
It work almost perfectly, all the images changing with fade out/in.
The issue is: after the last image the first image appear without fade effect.
HTML Code:
<div id="gallery-holder">
<img src="images/main-galery1.jpg" class="active" >
<img src="images/main-galery2.jpg" >
<img src="images/main-galery3.jpg" >
</div>
CSS code:
#gallery-holder{
position:relative;
top:0px;
width:980px;
height:300px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
}
#gallery-holder img{
position:absolute;
top:0;
left:0;
z-index:8;
}
#gallery-holder .active{
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
Java Script
$(document).ready(function(){
slideSwitch();
});
function slideSwitch() {
var $active = $('#gallery-holder IMG.active');
if ( $active.length == 0 ) $active = $('#gallery-holder IMG:last');
var $next = $active.next().length ? $active.next()
: $('#gallery-holder IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
any advice?
I tried to replace:
$active.removeClass('active last-active');
with this:
$('#gallery-holder IMG.active').removeClass('active last-active');
No luck

Let's simplify things. No opacity/css, no active classes, just simple jQuery fades:
(function slideSwitch() {
var $gallery = $('#gallery-holder'),
$active = $gallery.find('img:visible'),
$next = $active.next().length ? $active.next() : $gallery.find('img').first();
setTimeout(function() {
$active.fadeOut('fast');
$next.fadeIn('fast', slideSwitch);
}, 2000);
}());
Demo: http://jsfiddle.net/AlienWebguy/npTD9/