Table pop-up in Javascript - javascript

Does anyone know how to create tables similar to the tables found on http://spring.io/docs are created? I am specially interested in the "pop-up" after a click on an item.

Here is an example using jQuery:
HTML
<div class="item">
<div class="label">Label 1</div>
<div class="dropdown">More info about label 1</div>
</div>
You have items, with a label and a dropdown. The dropdowns are set to display:none and have a position absolute, to allow them to overlap other items.
CSS
.item{
position:relative; /*Your dropdowns will relate to their parent item*/
}
.dropdown{
/* ...some styles... */
display:none;
position:absolute;
}
Then, with jQuery, you can toggle a class .open on the items, which will allow you to display the dropdown on demand.
CSS
.open .dropdown{
display:block;
}
jQuery
$('.item').on('click',function(){
//if this item is already open
if($(this).hasClass('open'))
{ //close it
$(this).removeClass('open');
}
else
{ //or close everything and open this one
$('.item').removeClass('open');
$(this).addClass('open');
}
});
Or, if you want a shorter version:
$('.item').on('click',function(){
$(this).toggleClass('open').siblings().removeClass('open');
});
JS Fiddle demo

Related

jQuery ToggleClass on multiple buttons

I am trying to toggle visibility of elements with jQuery. The page should load with all elements active. Then, when you click on one of 3 filter buttons, it should hide the elements that don't match.
I can get it to work with addClass and removeClass, but I want to be able to toggle the elements on and off when you click each button. This is where it falls apart. With toggleClass, it works on the first click, but when I try to toggle the buttons, the classes get all mixed up.
Here is a working fiddle using removeClass (no toggling):
$(".map-filters .heart").click(function() {
$('.blue-marker').addClass('d-none');
$('.green-marker').addClass('d-none');
$('.red-marker').removeClass('d-none');
});
And here is a non-working fiddle where I attempt to toggle the classes –– once you click around a bit, it gets mixed up:
$(".map-filters .heart").click(function() {
$('.blue-marker').addClass('d-none');
$('.green-marker').addClass('d-none');
$('.red-marker').toggleClass('d-none');
});
What am I doing wrong?
Thanks!
1.You have set the default to active to all of them.
2.You have to do make the decision based on the active not active of the button with hasClass()
You don't need code redundancy. You can simplify it by giving each button an id.
$(".map-filters .filter").click(function() {
$('.active').not(this).removeClass('active');
$(this).toggleClass('active');
if ($(this).hasClass('active')){
var color = $(this).attr('id');
$("#map").children().addClass('d-none');
$("." + color + "-marker").toggleClass('d-none');
}
else {
$("#map").children().removeClass('d-none');
}
});
.d-none {
visibility:hidden!important
}
#map {
border:1px solid #000;
padding:20px;
}
#map > div {
width:30px;
height:30px;
display:inline-block;
margin:10px;
}
.map-filters {
margin-top:50px;
}
.map-filters button {
opacity:0.5;
}
.map-filters button.active {
opacity:1;
}
.heart,
.red-marker {background:red;}
.heart-pvl,
.green-marker {background:green;}
.pvl,
.blue-marker {background:blue;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map">
<div class="blue-marker"></div>
<div class="red-marker"></div>
<div class="red-marker"></div>
<div class="green-marker"></div>
<div class="blue-marker"></div>
<div class="green-marker"></div>
</div>
<div class="map-filters">
<button type="button" class="filter heart" id="red">Heart Locations</button>
<button type="button" class="filter heart-pvl" id="green">Heart & PVL Locations</button>
<button type="button" class="filter pvl" id="blue">PVL Locations</button>
</div>

Removing and adding class on hover

I am making a panel of photos/text. All the panels will have an overlay color on them except the first one which has an active class on page load which removes the overlay. As you hover over the second/third etc panels, the overlay active class will remove from first panel and go onto the one that is hovered.
Right now it is only active on page load, I can't seem to get the class off the first div and onto the second div on hover.
if ( $(".overlay:first") ){
$(".overlay:first").addClass("active");
}
else {
if ( $(".overlay:not(:first)").hover ){
$(".overlay:first").removeClass("active");
}
}
https://jsfiddle.net/egdkuh16/3/
There is no need to use JavaScript or jQuery for this. It's best used in CSS with the :hover pseudo-selector. It's also much easier today.
.overlay:first-child {
background: white;
}
.overlay:first-child:hover {
background: gold;
}
If you insist on using jQuery, you can try this
$(".overlay:first").on("mouseover", function() {
$(this).addClass("active");
}).on("mouseout", function() {
$(this).removeClass("active");
});
.active {
background: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay">First overlay class</div>
<div class="overlay">Second overlay class</div>
This approach is highly frowned upon though
In jQuery, you could do it like this:
$(document).ready(function() {
// Make the first active
$(".overlay:first").addClass("active");
// On hover remove all active classes from .overlay
// and add .active only to the one that is hovered
$(".overlay").hover(function() {
$(".overlay").removeClass("active");
$(this).addClass("active");
});
});
but Richard Hamilton's answer is much better and cleaner.
You can use jQuery's on. For example:
$(".overlay:first").addClass("active");
$(".overlay").on("hover", function(){
$(this).addClass("active");
$(".overlay:first").removeClass("active")
});

JQuery tabs not switching

I am having an issue with my script that I always use to switch tabs. I am using jquery elsewhere on my page so the library is working. Just will not switch?
Here is my demo:
Fiddle
Here is the code, really not sure why it is failing?
<div id="buttons">
<ul>
<li id="intro" class="selected">Link1</li>
<li id="teachers">Link2</li>
<li id="learners" class="last">Link3</li>
</ul>
</div>
<div id="introcontent" >
<p>lksdjflksdjfklsdjfklsjfkl</p>
</div>
<div id="teacherscontent" >
<p>lsdklfjsdklfjdlsjflkdsj.</p>
</div>
<div id="learnerscontent" >
<p>sdlkhfskldfjhlksdjflksdj/a>.</p>
</div>
#buttons{
float:right;
left:-50%;
position:relative;
text-align:left;
}
#buttons ul{
list-style:none;
position:relative;
left:50%;
margin-top:96px;
font-size:18px;
}
.light #buttons ul {
margin-top:80px;
}
#buttons li{
float:left;
position:relative;
height:38px;
line-height:38px;
margin-right:47px;
border-top:2px solid #E6E8E8;
cursor:pointer;
}
#buttons li.last{
margin-right:0px;
}
#buttons li.selected{
color:#FF5500;
border-top:2px solid #FF5500;
}
#introcontent, #teacherscontent, #learnerscontent {
padding-top:200px;
margin-bottom:180px;
}
#teacherscontent, #learnerscontent {
display:none;
}
// Change tab class and display content
$('#buttons').on('click', function (event) {
event.preventDefault();
$('#introcontent').removeClass('#teachersoontent');
$(this).parent().addClass('tab-active');
$('.tabs-stage div').hide();
$($(this).attr('href')).fadeIn();
});
$('.tabs-nav a:first').trigger('click'); // Default
So there were quite a few reasons why the code in your fiddle wasn't working.
It was looking for an href to know which div to display, but there weren't any.
I updated your HTML like so, adding a common class to all the divs that would display content, to make it easier to manipulate them as a group:
<div id="introcontent" class="tabContent">
<p>lksdjflksdjfklsdjfklsjfkl</p>
</div>
<div id="teacherscontent" class="tabContent">
<p>lsdklfjsdklfjdlsjflkdsj.</p>
</div>
<div id="learnerscontent" class="tabContent">
<p>sdlkhfskldfjhlksdjflksdj.</p>
</div>
And amended the JavaScript to work with the new class on the content, and not to worry about href properties.
// Change tab class and display content
$('#buttons li').on('click', function (event) { // this lets you click on any li element inside #buttons
$(".selected").removeClass('selected'); // remove the selected class wherever it may be
$(this).addClass('selected'); // add the selected class to the clicked element
$(".tabContent").hide(); // hide all the elements with the class tabContent (added above)
$("#" + $(this).prop("id") + "content").show(); // show the content we want, by taking the ID of the list element and concatenating it into a string that will match the id of one of the content divs
});
$('#buttons li:first').click(); // You can trigger a click event like this
Here is the updated fiddle.
http://jsfiddle.net/YH3f4/2/

Slide div down when hover over other div, with timer

I searched for this but didn't find an solution that totally fixed my problem.
I got 2 divs that are over each other. Where div #2 isn't shown (display:none).
Now what I want is that if I hover over div #1, div #2 slides down (open) at his current position.
Then div #2 should stay open when people are hovering over div #2, when they leave the hover status of div #2 for more then 5 seconds div #2 slides up again.
I made a fiddle to illustrate my div positions.
Using jQuery to keep the code simpler. One way to do what you want is to pair a global variable with a setTimeout function. The timeout checks if the mouse is still out of the div after five seconds, and if so, slides it up and out of sight.
$('.button').click(function() {
$('.showme').slideDown();
});
$('.showme').mouseout(function() {
window.isoverdiv = false;
setTimeout(function() {
if (!window.isoverdiv) {
$('.showme').slideUp();
}
}, 5000);
});
$('.showme').mouseover(function() {
window.isoverdiv = true;
});
http://jsfiddle.net/mblase75/TxnDd/2/
I moved div #2 into div #1 and this allowed me to do this with only css
http://jsfiddle.net/57Shn/
CSS
.button {width:100px; height:50px; position:fixed; background-color:blue; margin-top:30px;}
.button:hover .showme {display:block}
.showme {width:100px; height:200px; position:fixed; background-color:red; display:none; margin-top:30px;}
HTML
<div class="button">
touch me
<div class="showme">show me</div>
</div>
CSS-only solution: (doesn't slide)
<div class="outer">
<div class="one">Hover</div>
<div class="two">Hello World!</div>
</div>
CSS:
.two { display: none; }
.outer:hover .two { display: block; }
JS solution:
$(function() {
$('.two').hide();
$('.outer').hover(function() { $('.two').stop().slideDown(); });
$('.outer').mouseout(function() { $('.two').stop().slideUp(); });
});

How to overlay div / box on mouseover?

I have a link and when user hover mouse over it, it should display a box (div) under the link. The box should overlay whatever is under it. How can I do it using css or javascript?
You have an absolutely positioned div that is hidden, and a child of the link. Then, when you hover over the link, you should unhide the div. I can't provide full CSS, and I haven't tested this, but that should get you started. You'll have to play around with the positioning and sizes.
Somewhere<div class="desc">This is hidden.</div>
a.special { position:relative; }
a.special div.desc { background-color:white; display:none; position:absolute; z-index:100; }
a.special:hover div.desc { display:block; }
This would be the pure-CSS way.
I have created a sample here. You can modify from there to suit your needs.
<div class="hover">Hover here</div>
<div class="overlay" style="visibility:hidden">
<img src="http://www.google.com/images/logos/ps_logo2.png" alt="google" />
</div>​
$(document).ready(function()
{
$("div.hover").mouseover(function ()
{
$(this).css('cursor', 'pointer');
$("div.overlay").css('visibility','visible');
});
$("div.hover").mouseout(function ()
{
$(this).css('cursor', 'default');
$("div.overlay").css('visibility','hidden');
});
});
$("#id").mouseover(function(){
$("a[rel='#petrol']").overlay().load();
});
$("#id").mouseout(function(){
$("a[rel='#petrol']").overlay().close();
});

Categories