Develop Reference

How to avoid to jump on the top when clicking on anchor with ID

I created a CSS/HTML carousel with 4 slides and, when clicking on the button on the bottom (a href), it will display the selected slide. The problem is that every time I click a link, i can see the selected slide as I want, but the page jumps on the top. I know that the problem is because I used an ID, but I don't know how to avoid my page jumping. I tried adding this script:
$('a.someclass').click(function(e) {
e.preventDefault();
});
this is the html:
<div class="slider">
<div class="slides">
<div id="slide-1"></div>
<div id="slide-2"></div>
<div id="slide-3"></div>
<div id="slide-4"></div>
</div>
Slide 1
Slide 2
Slide 3
Slide 4
</div>
but it doesn't work.
How can I do? Thanks

Your selector is wrong. Use a.slide-button instead of a.someclass
$() needs to be a valid jQuery DOM selector
$('a.slide-button').click(function(e) {
e.preventDefault();
});
.slides {
height: 100vh;
background-color: cyan;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
<div class="slides">
<div id="slide-1"></div>
<div id="slide-2"></div>
<div id="slide-3"></div>
<div id="slide-4"></div>
</div>
Slide 1
Slide 2
Slide 3
Slide 4
</div>

Select 1st 2nd and 3rd child element of THIS element

I have two links that show and hide different divs. The divs have 3 elements h2, p and img and I would like to animate each element separately but can't seem to figure out how.
I would like to click on a link and make each element have a different animation for entrance and leaving. I am pasting my html and jQuery here hope someone can help.
function showonlyone1(thechosenone) {
$('.uslugetxt').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).fadeTo("slow", 1);
$(this).children().animate({
fontSize: "50"
}, 500)
} else {
$(this).fadeTo("slow", 0);
$(this).children().animate({
fontSize: "0"
}, 500)
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebarmenu">
analitycs
PPC campaigns
</div>
<div class="uslugetxt" id="x1" class="x1">
<h2 class="naslovx">GOOGLE ANALITYCS</h2>
<p>
There is something funny about your data? You double question
</p>
<img src="imgs/analitika.jpg" alt="analitika-slika">
</div>
<div class="uslugetxt" id="x2" class="x2">
<h2 class="naslovx">DISPLAY ADVERTISING</h2>
<p>
Display Advertising is partially covered through content Social networks like Facebook, Twitter, MySpace, LikedIn,
</p>
<img src="imgs/decasocial.jpg" alt="analitika-slika">
</div>

try using the :nth() pseudo selector?
showonlyone1 = function showonlyone1(thechosenone) {
$('.uslugetxt').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).fadeTo( "slow", 1 );
$(this).children(":nth(0)").animate({fontSize: "50"}, 500, function(){ $(this).parent().children(":nth(1)").animate({fontSize: "30"}, 500)
})
}
else {
$(this).fadeTo( "slow", 0 );
$(this).children().animate({fontSize: "0"}, 500)
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebarmenu">
analitycs
PPC campaigns
</div>
<div class="uslugetxt" id="x1" class="x1">
<h2 class="naslovx">GOOGLE ANALITYCS</h2>
<p>
There is something funny about your data? You double question
</p>
<img src="imgs/analitika.jpg" alt="analitika-slika">
</div>
<div class="uslugetxt" id="x2" class="x2">
<h2 class="naslovx">DISPLAY ADVERTISING</h2>
<p>
Display Advertising is partially covered through content Social networks like Facebook, Twitter, MySpace, LikedIn,
</p>
<img src="imgs/decasocial.jpg" alt="analitika-slika">
</div>
Now for your next question, how to time animations, simply use the complete function of the animation. So when my first animation completes, the second runs -- but bear in mind that, in the context of the completed function, 'this' refers to the animated element! We'll go back to its parent, select the next child, and animate THAT.

Toggling popup DIV tags not working

I am trying to make a simple page with a few divs, where if you click on one div it moves to the center and getting bigger (other divs still visible in the background). When you click on another div visible in the background the div in the center goes back to where it was before and clicked div goes to the center and resizing. Also if you click on the div in the center it should go back to where it was before.
I made a Jquery script for it but it doesnt work properly - clicking on any div first time works fine but any following clicking just stops working.
Here is an html with some styling:
<style>
#outside1 {background-color:gray;} #outside2 {background-color:blue;} #outside3 {background-color:brown;}
#inside1 {background-color:red;} #inside2 {background-color:green;}
#inside3 {background-color:pink;} #inside4 {background-color:yellow;}
#inside5 {background-color:gold;} #inside6 {background-color:silver;}
.outside {width:100px; height:90px; margin:5px; } .inside {display:none; margin:2px; }
#test1 {height:400px; }
</style>
<div id=test1>
<div id='outside1' class='outside'> div outside 1 <br/>
<div id='inside1' class='inside'> div inside 1 <br/> </div>
<div id='inside2' class='inside'> div inside 2 <br/> </div>
</div>
<div id='outside2' class='outside'> div outside 2 <br/>
<div id='inside3' class='inside'> div inside 3 <br/> </div>
<div id='inside4' class='inside'> div inside 4 <br/> </div>
</div>
<div id='outside3' class='outside'> div outside 2 <br/>
<div id='inside5' class='inside'> div inside 3 <br/> </div>
<div id='inside6' class='inside'> div inside 4 <br/> </div>
</div>
</div>
And thats some js and jquery:
kd_small={top: 0, left: 0, opacity: 1, width:100, height:90 } ;
kd_big = {top: -90, left: +50, opacity: 1, width:200, height:150 };
var t=0;
function hextend(d){
d.animate(kd_big); d.find('div').show(); $('.outside').off();
var sbs=$(d).siblings(); $(sbs).off(); sbs.append('i am siblings');
d.append('I AM CLICKED'); hshrink($(sbs));
d.on('click', function (){ hshrink($(d)); });
$(sbs).on('click', function (){ hextend($(sbs)); });
}
function hshrink(s){
s.find('div').hide(); s.animate(kd_small);
}
$('.outside').on('click', function(){
hextend($(this) );
});
$('.inside').on('click', function(e){
e.stopPropagation(); $(this).html('inside div clicked' + t +'times');
t++;
});
Thanks

Instead of using .on('click' use delegate('click' or `.live('click', as you are appending divs.
However, both .live and .delegate have been superseded, so I imagine this would be a 'quick fix'.
Looking again at the code, I think you may have to use 'addClass' to add the correct class to the div's you are appending, and use the console to check the elements once they are centered and make sure the classes exist for the elements.

Trying to build a gallery, how to fade out currently displayed div and fade in the next one?

I'm currently working on a new personal portfolio site using very basic html/css/jquery code. I'm trying to build my own gallery to display my work (instead of using an already existing one like lightbox) but I've run into an annoying issue: I've tried to make the "forward-button" display the immediate following div but instead it fades in all the following divs. Here's my (condensed) code:
HTML:
<!--navigation buttons for gallery-->
<a id="back-button"><img src="image.png" /></a>
<a id="forward-button"><img src="image.png"/></a>
<!--gallery begins here-->
<div id="gallery">
<div id="first-div" class="work-display">
<img src="images/albumust-display.png" class="work-image" />
<div class="caption" id="wd1c">
<p class="caption-text">caption</p>
</div>
</div>
<div id="second-div" class="work-display">
<img src="images/ce-display.png" class="work-image" />
<div class="caption">
<p class="caption-text">caption</p>
</div>
</div>
<div id="third-div" class="work-display">
<img src="images/display.png" class="work-image" />
<div class="caption">
<p class="caption-text">caption</p>
</div>
</div>
CSS (all divs inside gallery are hidden by default):
.work-display {
display:none;
position:absolute;
}
What I'm trying to do with Jquery is that everytime someone opens a thumbnail, give the corresponding div that displays the image on full size a "true" state of "active" and then fade in, like this:
$( "#thumb-1" ).click(function(){
$( "#first-div" ).prop("active",true);
$( "#first-div" ).fadeIn();
});
all divs originally have a state of "active" = false:
$( "#gallery" ).children("div").prop("active",false);
then this is what I've tried to do with the "forward-button":
$("#forward-button").click(function () {
$("#gallery").find( $("div").prop("active",true) )
.prop("active",false)
.fadeOut()
.next().fadeIn();
$(".caption").fadeIn();
});
But then what it does is that instead of fading in only the next div, it fades all the divs that come after. what am I doing wrong?
I'm very new to Javascript/Jquery so probably this isn't the smartest way to go about this, if you have a simpler solution, do tell me.

I couldn't test it properly, because I don't have the whole code (and the images either). But this should do the trick:
$(function () {
$("#gallery div").attr("active", false);
$("#thumb-1").click(function () {
$("#first-div").attr("active", true).fadeIn();
});
$("#forward-button").click(function () {
$("#gallery div[active=true]:first")
.attr("active", false)
.fadeOut()
.next()
.attr("active", true)
.fadeIn();
});
$("#back-button").click(function () {
$("#gallery div[active=true]:first")
.attr("active", false)
.fadeOut()
.prev()
.attr("active", true)
.fadeIn();
});
});
Kind of demo: http://jsfiddle.net/W8VLh/13/

Just in case you have a reason to use 'active' properties instead of classes:
$("#forward-button").click(function () {
$("#gallery").find( "div[active='true']")
.prop("active",false)
.fadeOut()
.next().fadeIn().prop("active",true);
$(".caption").fadeIn();
});

JQuery - ToggleClass/AddClass/RemoveClass

I have the following codes to create a top sliding admin panel, that will appear from the very top of the page. This sliding panel will be activated but clicking on the button "#tp-button2".
However, I would like to add one more sliding panel and call it #toppanel2.
Behavior
tp-button2: when click, it will either show or hide toppanel, and if toppanel2 is "show", to slide it back into position before it slides out toppanel
tp-button3: same behavior as above but for toppanel2
Current Situation: I'm using toggleClass which is easy for just 1 panel since it's to turn and off, but I'm not sure the algorithem to achieve the above, and i've tried long methods including addClass and removeClass and it's not working out because removeClass doesn't work.
This is what i'm using for single toggleClass
Original CSS
#tp-button2,tp-button3 {
}
.toppanel {
height: 150px ;
top:-150px;
background-color: #FFFFFF !important;
position: '.$dimensionposition.' !important;
}
.toppanel2 {
height: 75px ;
top:-75px;
background-color: #F1F1F1 !important;
position: absolute !important;
}
.show {top:0px}
.tp-relative {position: relative;padding-bottom: 150px;}
.tp-relative2 {position: relative;padding-bottom: 75px;}
</style>
Original Javascript
var $j = jQuery.noConflict();
$j(function() {
$j( "#tp-button" ).click(function(){
$j(".toppanel").toggleClass("show", 900, "easeOutBounce");
$j("#tp-relativeblock").toggleClass("tp-relative", 900, "easeOutBounce");
});
});
</script>
I've attempted something like this
var $j = jQuery.noConflict();
$j(function() {
$j("body").on("click", "#tp-button2", function(){
if ($j("#toppanel").hasClass("show")) {
alert("tp-button2 remove class");
$j("#toppanel").removeClass("show", 900);
$j("#tp-relativeblock").removeClass("tp-relative", 900);
} else {
alert("tp-button2 addClass");
$j("#toppanel2").removeClass("show", 900).delay(900).queue($j("#tp-relativeblock").addClass("tp-relative", 900));
$j("#tp-relativeblock").removeClass("tp-relative2", 900).delay(900).queue($j("#toppanel").addClass("show", 900));
}
});
$j("body").on("click", "#tp-button3", function(){
if ($j("#toppanel2").hasClass("show")) {
alert("tp-button3 removeClass");
$j("#toppanel2").removeClass("show", 900);
$j("#tp-relativeblock").removeClass("tp-relative2", 900);
} else {
// Here i attempt to just bring down panel 2 without closing panel 1 to see whether there's code above that's wrong but it's not working too.
alert("tp-button3 addClass");
$j("#tp-relativeblock").addClass("tp-relative2", 900);
$j("#toppanel2").addClass("show", 900)
}
});
This is what i have on body
<div id="tp-button"><i class="'.$iconstop.'"></i></div>
<div id="toppanel" class="toppanel">
<div id="tp-container">
<div class="tp-s1">
THIS IS PANEL 1 COLUMN 1
</div>
<div class="tp-s2">
THIS IS PANEL 1 COLUMN 2
</div>
<div class="tp-s3">
THIS IS PANEL 1 COLUMN 3
</div>
<div class="tp-s4">
THIS IS PANEL 1 COLUMN 3
</div>
</div>
</div>
<div id="toppanel2" class="toppanel2">
<div id="tp-container">
<div class="tp-s1">
PANEL 2
</div>
<div class="tp-s2">
PANEL 2
</div>
<div class="tp-s3">
PANEL 2
</div>
<div class="tp-s4">
PANEL 2
</div>
</div>
</div>
<div id="tp-relativeblock"></div>
I understand addClass and removeClass and what it does but sometimes removeClass doesn't remove tp-relative from tp-relativeblock so it doesn't move back up to space.
Click Button2:
toppanel slide down Success
relativeblock slidedown Success
Second Button 2 Click:
toppanel slides up to 0px Success
remove tp-relative from #tp-relativeblock failed
Click button3:
Nothing Happens
Button2 also became disabled
Amature here to javascript and jquery, so will appreciate all help i can to achieve this.
My objective is for panel 1 to show "Login TO Website" and panel 2 to show "Register To Website"
THANK YOU IN ADVANCED!!

This is the jQuery I use to add and remove classes
To add:
$("#some-id").toggleClass('class-name', 'add');
To Remove:
$("#some-id").toggleClass('class-name', 'remove');
In this fiddle toggleClass is used to trigger css animations