We Keep Coding

Cant make tabs fixed at top under navbar section after clicked

Edit: I added the windo scroll function I make it but the contents under tabs goes over from it. How can I fix that?
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
console.log(true);
$(".tabs").addClass("tabs-position");
} else {
console.log(false);
$(".tabs").removeClass("tabs-position");
}
});
.tabs-position {
margin-bottom: 50px;
position:sticky;
top: 0;
background-color: red;
}
I have a page with a navbar and tabs. When I click them I direct the user to the section in the same page using the id attribute, however my tabs are in the middle of my page which is fine. What I am trying to achieve is to move them under my navbar section when I click them.
I tried after attribute but I don't get it. I have included my code below, How can I replace their position?
<section class="tabs">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="tab-outer">
<div class="tab-list">
<ul>
<li>
Rooms
</li>
<li>
info tab
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
.tabs {
margin-bottom: 50px;
.tab-outer {
border-bottom: 4px solid #f5f5f5;
position: sticky;
top: 70px;
padding: 20px 0 0 0;
}
.tab-list {
a {
color: #4a4947;
}
ul {
padding: 0 30px;
display: flex;
justify-content: space-between;
list-style-type: none;
}
}
}

You cannot nest CSS like that. Instead, use to select siblings at any level. And also, you have to put position:sticky on the direct sibling of an element that is being scrolled.
.tabs {
margin-bottom: 50px;
position: sticky;
top: 0;
background-color: #ffffff;
}
.tabs .tab-outer {
border-bottom: 4px solid #f5f5f5;
top: 70px;
padding: 20px 0 0 0;
}
.tabs .tab-list a {
color: #4a4947;
}
.tabs .tab-list ul {
padding: 0 30px;
display: flex;
justify-content: space-between;
list-style-type: none;
}
<section class="tabs">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="tab-outer">
<div class="tab-list">
<ul>
<li>
Rooms
</li>
<li>
info tab
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<div style="height:3600px;width:100%;background-color:blue;color:white;">foo</div>

By using z-index I fixed the problem
.tabs-position {
margin-bottom: 50px;
position:sticky;
top: 0;
background-color: red;
z-index: 1;
}

How to change hover action to click action?

Hello people I created two divs and when i hover to h3 shows me something. I want display this only when i click on h3. How i can do this?
How to change hover to click? When i do this doesn't working.
Sorry for my bad language.
$(document).ready(function () {
$('li.requirement').hover(function () {
$(this).find('span').show();
}, function () {
$(this).find('span').hide();
});
});
#wrap {
background: #e7e7e7;
padding: 0px;
text-align: center;
width: 100%;
}
#left, #right {
background: #ccc;
display: inline-block;
padding: 20px;
}
li {
list-style-type: none;
padding: 0px;
margin: 0px;
}
span.lewy {float:right; background:red; padding:20px;}
span.prawy {float:left; background:red; padding:20px;}
h3 {text-align:center;}
h3.praw {float:left;}
h3.lew {float:right;}
.calosc {max-width:500px; margin: 0 auto; border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<div id="left"><div class="lef">
<li class="requirement" id="requirement_1">
<h3 class="lew">SPR</h3>
<span class="fr drag lewy" style="display:none;">1 kontakt</span>
</li>
</div></div>
<div id="right"><div class="praf">
<li class="requirement" id="requirement_2">
<h3 class="praw">SPR 2</h3>
<span class="fr drag prawy" style="display:none;">2 kontakt</span>
</li>
</div></div>
</div>

You can use .on('click', function(){}); and then inside this function you check to see if it's already visible or not. Take a look here
EDIT
As you want to be just the <h3> clickable, i made an adjustment in the code below, and now you need to cehck for the visibility of the h3 parent, because now the context of this is now h3 and no more the li
$(document).ready(function () {
$('.clickableH3').on('click', function () {
if ($(this.parentElement).find('span').is(":visible")){
$(this.parentElement).find('span').hide();
}else{
$(this.parentElement).find('span').show();
}
});
});
#wrap {
background: #e7e7e7;
padding: 0px;
text-align: center;
width: 100%;
}
#left, #right {
background: #ccc;
display: inline-block;
padding: 20px;
}
li {
list-style-type: none;
padding: 0px;
margin: 0px;
}
span.lewy {float:right; background:red; padding:20px;}
span.prawy {float:left; background:red; padding:20px;}
h3 {text-align:center;}
h3.praw {float:left;}
h3.lew {float:right;}
.calosc {max-width:500px; margin: 0 auto; border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<div id="left"><div class="lef">
<li class="requirement" id="requirement_1">
<h3 class="lew clickableH3">SPR</h3>
<span class="fr drag lewy" style="display:none;">1 kontakt</span>
</li>
</div></div>
<div id="right"><div class="praf">
<li class="requirement" id="requirement_2">
<h3 class="praw clickableH3">SPR 2</h3>
<span class="fr drag prawy" style="display:none;">2 kontakt</span>
</li>
</div></div>
</div>

Well you see, in your js code, where you have "hover" ? Well you type "click" there instead ...

The jQuery hover function can have 2 parameters, which is your case. The first one for the hover, the second is for the unhover
So if you want to be able to close and hide on click I advise to use some css and use toggleClass. But if you wan to keep only javascript you can do like this:
$(document).ready(function () {
$('li.requirement').click(function () {
var $elm = $(this);
if( $elm.hasClass('showed') ){
$elm.find('span').removeClass('showed').hide();
}else{
$elm.find('span').addClass('showed').show();
}
});
});

Dynamic popup menu that adds class to parent when radio button is selected (like Trello's)

I want to create a dynamic popup menu that adds a class to "lists" parent when radio button is selected // removes classes when unselected (HTML structure below cannot change...only can change CSS and JS)
I'm trying to make the "List Popup" popup directly under each "Green Gear" icon when clicked on/ hidden when clicked off (css classes).
Whenever a radio button is selected from the popup, I need it to add a class directly into the corresponding list's parent div, while not effecting any of the other lists.
The trick (for me) is making all of this happen dynamically with 1 popup menu that sits outside of each lists divs scope.
The HTML structure cannot be changed (this has to be completely done w/ JS and CSS).
Here's what I've got so far: https://jsfiddle.net/oneeezy/t5eou67k/
$(document).ready(function () {
/* Code to play with for show/hide popup
/* Code to play with for adding/removing classes when radio checked
$('.list-layouts input').click(function () {
$('.list-layouts input:not(:checked)').parent().removeClass("blue");
$('.list-layouts input:checked').parent().addClass("blue");
});
*/
});
/* Reset Styles */
* { box-sizing: border-box; margin: 0; padding: 0; }
h1 { padding: 0 0 .25rem; }
h2 { line-height: 1.6; }
aside { background: #e2e4e6; padding: 1rem; color: gray; margin: 1rem; border: 1px dashed gray; }
aside ul { list-style: inside; }
aside span { font-style: italic; color: rgba(0, 0, 0, .78); }
.page { background: rgba(137, 96, 158, .17); margin: 2rem 0; padding: 2rem; position: relative; }
.page::before { content: "<div> ...Scope"; color: rgba(0, 0, 0, .54); position: absolute; top: 0; left: 0; }
.page::after { content: "</div>"; color: rgba(0, 0, 0, .54); position: absolute; bottom: 0; left: 0; }
.purple { background: rgba(137, 96, 158, .17); }
.green { background: lime; }
.yellow { background: yellow; }
/* Trello (default tyles) */
.wrapper { display: flex; }
.list-wrapper { flex: 1; margin: 10px; }
.list { background: #e2e4e6; position: relative; padding: 0 10px 3px; }
.icon { display: block; position: absolute; top: 0; right: 0; width: 33px; height: 38px; background: lime; text-decoration: none; font-size: 2em; line-height: 1.3; color: darkgreen; }
.card { display: block; height: 50px; background: white; border-radius: 3px; border: 1px solid #ccc; padding: .5em; margin: 0 0 .5em; }
/* List Popup */
.list-popup { display: block; width: 350px; max-height: 800px; background: yellow; border-radius: 3px; border: 1px solid #ccc; padding: 1em; }
.list-popup p { padding: 0 0 1rem; }
.list-popup p span::after { content: "<div class='list-wrapper'>"; }
.list-layouts ul { list-style: none; }
.list-normal { }
.list-normal .list { }
.list-color { }
.list-color .list * { background: skyblue; }
.list-bold { }
.list-bold .list * { font-weight: bold; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Description -->
<aside>
<h1>Dynamic popup menu that adds class to lists parent when radio button is selected // removes classes when unselected</h1>
<ul>
<li>I'm trying to make the <span class="yellow">"List Popup"</span> popup directly under each <span class="green">"Green Gear"</span> icon when clicked on/ hidden when clicked off (css classes).</li>
<li>Whenever a radio button is selected from the popup, I need it to add a class directly into the corresponding list's parent div, while not effecting any of the other lists.</li>
<li>The trick (for me) is making all of this happen dynamically with 1 popup menu that sits outside of each <span class="purple">lists divs scope</span>.</li>
</ul>
</aside>
<!-- Lists -->
<div class="page">
<div class="wrapper">
<div class="list-wrapper">
<div class="list">
<h2>List (1)</h2>
⚙
<div class="card">Woohoo! Woohoo! Woohoo! </div>
<div class="card">Woohoo! Woohoo! Woohoo! </div>
<div class="card">Woohoo! Woohoo! Woohoo! </div>
</div>
</div>
<div class="list-wrapper">
<div class="list">
<h2>List (2)</h2>
⚙
<div class="card">Woohoo! Woohoo! Woohoo! </div>
<div class="card">Woohoo! Woohoo! Woohoo! </div>
<div class="card">Woohoo! Woohoo! Woohoo! </div>
</div>
</div>
<div class="list-wrapper">
<div class="list">
<h2>List (3)</h2>
⚙
<div class="card">Woohoo! Woohoo! Woohoo! </div>
<div class="card">Woohoo! Woohoo! Woohoo! </div>
<div class="card">Woohoo! Woohoo! Woohoo! </div>
</div>
</div>
</div>
</div>
<!-- List Layout popup -->
<div class="page">
<div id="listPopup" class="list-popup">
<div>
<h3>List Popup</h3>
<p>These radio buttons should add a special class to the individual <span></span> when clicked on and removed when clicked off!</p>
</div>
<form class="list-layouts">
<ul>
<li>
<input type="radio" name="listLayout" id="listNormal">
<label for="listNormal">Normal</label>
</li>
<li>
<input type="radio" name="listLayout" id="listColor">
<label for="listColor">Bold</label>
</li>
<li>
<input type="radio" name="listLayout" id="listBold">
<label for="listBold">Italic</label>
</li>
</ul>
</form>
</div>
</div>

So first we will add the class to the list wrapper of the lists parent with the following code:
$('.icon').on('click', function () {
if(!$('#listPopup').hasClass("open")){
$('#listPopup').toggleClass("open");
}
$(this).parents('.list-wrapper').siblings().removeClass('blue');
if(!$(this).parents('.list-wrapper').hasClass("blue")){
$(this).parents('.list-wrapper').toggleClass("blue");
}
});
Then we need to create an onchange function for the radios to find this class and add the new class to that list.
$('.list-layouts input').on('change', function () {
var newClass = $(this).attr("id");
// Remove the following statement if you want your classes to stack up
$('.blue').removeClass("listNormal listColor listBold");
$('.blue').addClass(newClass);
});
Here is a working fiddle of the whole thing in action Fiddle

Why is my jquery code not working or throwing any errors?

You can checkout my project here: http://jsfiddle.net/raj4dev/2o4uapc9/1/
Summary: I am making a jquery image slider. You can change the image in a box by pressing next and previous arrows. Currently, I have added code only for the next arrow.
Issue: Nothing happens when I click the next arrow. I don't see any errors in the chrome developer tools.
Please tell me how I can debug and fix this issue ?
Code here.
HTML:
<!DOCTYPE html>
<body>
<div id="container">
<header>
<h1>jQuery content slider</h1>
</header>
<img src="http://icongal.com/gallery/image/337589/small_arrow_left.png" alt="Prev" id="prev">
<div id="slider">
<div class="slide">
<div class="slide-copy">
<h2>Slide 1</h2>
<p>Dance and slide!</p>
</div>
<img src="http://m.rgbimg.com/cache1ny0NN/users/j/ja/jana_koll/600/mfOAUfa.jpg" alt="an image">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slide 2</h2>
<p>Dance and slide!</p>
</div>
<img src="https://s-media-cache-ak0.pinimg.com/736x/f9/2e/c0/f92ec0238d508e029be8b7163205d24e.jpg" alt="an image">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slide 3</h2>
<p>Dance and slide!</p>
</div>
<img src="http://www.pptbackgroundstemplates.com/backgrounds/abstract-red-light-wave-ppt-backgrounds-powerpoint.jpg" alt="an image">
</div>
</div>
<img src="http://icons.iconarchive.com/icons/saki/nuoveXT/128/Small-arrow-right-icon.png" alt="Next" id="next">
</div>
</body>
JS:
$(document).ready(function() {
var sliding_speed = 500;
var autoswitch = true;
var autoswitch_speed = 4000;
$('.slide').first().addClass('active');
//Hide all slides, but...
$('.slide').hide();
//...show only the first slide
$('.active').show();
$('#next').on('click', function(){
$('.active').removeClass('active').addClass('oldActive'); /*'Hide the currently active slide and mark it as oldActive so that you can go back to it using the previous button.'*/
if($('.oldActive').is(':last-child')) {
$('.slide').first().addClass('active');
}else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
});
});
CSS:
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Arial', sans-serif;
font-size: 14px;
color: #fff;
background: #333;
line-height: 1.6em;
}
a {
color: #fff;
text-decoration: none;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
#container {
width: 980px;
margin: 40px auto;
overflow: hidden;
}
#slider {
width: 940px;
height: 350px;
position: relative;
overflow: hidden;
float: left;
padding: 3px;
border: #666 solid 2px;
border-radius: 5px;
}
#silder img {
width: 940px;
height: 350px;
}
.slide {
position: absolute;
}
.slide-copy {
position: absolute;
bottom: 0px;
left:0;
padding: 20px;
background: #7f7f7f;
background: rgba(0,0,0,0.5);
width: 100%;
}
#prev, #next {
float: left;
margin-top: 130px;
cursor: pointer;
position: relative;
z-index: 100;
}
#prev {
margin-right: -45px;
}
#next {
margin-left: -45px;
}

You need to again hide all slide and then show only the active one. You are changing the classes to properly set your desired active slide to have the active class, but nothing says that all active slides are shown always and all other slides are hidden always.
http://jsfiddle.net/v1au2d57/
$('#next').on('click', function(){
$('.active').removeClass('active').addClass('oldActive'); /*'Hide the currently active slide and mark it as oldActive so that you can go back to it using the previous button.'*/
if($('.oldActive').is(':last-child')) {
$('.slide').first().addClass('active');
}else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
//Hide all slides, but...
$('.slide').hide();
//...show only the first slide
$('.active').show();
});

How do I make this jquery popup function reusable?

So I am using this code:
http://jsfiddle.net/xSmNs/
$(document).ready(function() {
$('#lightbox_button').click(function() {
$('#lightbox').fadeIn('slow');
$('#lightbox_panel').fadeIn('slow');
});
$('#close_lightbox').click(function() {
$('#lightbox').fadeOut('slow');
$('#lightbox_panel').fadeOut('slow');
});
});
To make popups on click of a link. I want multiple links that output different divs. I was going to just make multiple instances of this code (changing the id so that the buttons open their corresponding divs) but I am wondering if there is a more efficient method using this code?

You can use $.fn.lightbox as a function itself and apply it on a DOM object.
http://jsfiddle.net/7rfpwctm/2/
$(document).ready(function() {
$.fn.lightbox = function(){
$(this).click(function() {
$('#lightbox').fadeIn('slow');
$('#lightbox_panel').fadeIn('slow');
});
$('#close_lightbox').click(function() {
$('#lightbox').fadeOut('slow');
$('#lightbox_panel').fadeOut('slow');
});
};
$('#lightbox_button').lightbox();
$('#another_lightbox_button').lightbox();
});
#lightbox_panel
{
position: relative;
z-index: 99;
width: 500px;
height: 100px;
margin: 30px auto 0;
background-color: #CCC;
display: none;
padding: 10px;
}
#lightbox
{
z-index: 90;
position: absolute;
background-color: #000;
opacity: 0.8;
filter: alpha(opacity=80);
width: 100%;
height: 100%;
display: none;
top: 0;
}
#close_lightbox
{
}
#lightbox_button{
position:absolute;
left:0;
top:100%;
width:200px;
}
#another_lightbox_button{
position:absolute;
right:0;
top:100%;
width:400px;
}
.button
{
position: absolute;
text-decoration: none;
padding: 2px 10px;
border: 1px solid #000;
display: inline-block;
bottom: 10px;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<a href="#" id="lightbox_button">
<div class="button">button</div>
</a>
<a href="#" id="another_lightbox_button">
<div class="button">another button</div>
</a>
<div id="lightbox_panel">
<h1>lightbox panel</h1>
<a href="#" id="close_lightbox">
<div class="button">close</div>
</a>
</div>
</div>
<div id="lightbox"></div>
Something like this helps?

Give the light box button 2 data-attributes, which points to the divs which needs to be popup when clicking on that. Also use a common class for all light box buttons.
<a href="#" class="lightbox_button" data-box="#lightbox" data-panel="#lightbox_panel">
<div class="button" >button</div>
</a>
Then you can re-use the code like,
$('.lightbox_button').click(function () {
$($(this).data("box")).fadeIn("slow");
$($(this).data("panel")).fadeIn("slow");
});
Fiddle

You could use this function:
function doModal(boxid,show) {
if (show) {
$('#'+boxid).fadeIn('slow');
$('#'+boxid+'_panel').fadeIn('slow');
} else {
$('#'+boxid).fadeOut('slow');
$('#'+boxid+'_panel').fadeOut('slow');
}
}
And then on your buttons or links:
<span onclick="doModal('Box1',true)">Open Box 1</span>
<span onclick="doModal('Box2',true)">Open Box 2</span>
For closing the boxes:
<span onclick="doModal('Box1',false)">Close Box 1</span>
<span onclick="doModal('Box2',false)">Close Box 2</span>