I have some cards who are supposed to be inline, but I have to use a display none on them. When I click on a specific button, I want to display these cards; but when I do that, each cards appears to take a row when I want to have them on the same row
<div class="row" id="menu_lv2r">
<div class="col-lg-2">
<div class="card card-chart">
<div class="card-header">Character 1</div>
<div class="card-body card-body-top">
<img class="card-img" alt="character_image" src="./images/char1.jpg"/>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="card card-chart">
<div class="card-header">Character 2</div>
<div class="card-body card-body-top">
<img class="card-img" alt="character_image" src="./images/char2.jpg"/>
</div>
</div>
</div>
</div>
Theses were my 2 cards examples
If I let the code like that, they are all inline which is what I want
Now If I add some css to hide them
#menu_lv2r{
display: none;
}
The row with the 2 cards disapeared which is still fine.
But now, when I use some Js to print them again, they appear in one row each.
var elt = document.getElementById('menu_lv2r');
elt.style.display = "inline";
Thanks for your help
You should use display: flex for parent element.
elt.style.display = "flex";
It's the default value for bootstrap class .row.
Just use flex instead of inline. Everything works fine
Related
i am trying to make a whole div clickable, i did the following
<a href=""><div class="col-lg-3 col-md-6 col-sm-6 col-12 item-mb">
<div class="service-box1 bg-body text-center">
<img src="img/service/service1.png" alt="service" class="img-fluid">
<h3 class="title-medium-dark mb-none">Electronics</h3>
<div class="view">(19,805)</div>
</div>
</div></a>
but he div is not becoming clickable, can anyone please tell me whats wrong in my code?
Try
<div class="col-lg-3 col-md-6 col-sm-6 col-12 item-mb" onClick="javascript:window.location='//stackoverflow.com'">
<div class="service-box1 bg-body text-center">
<img src="img/service/service1.png" alt="service" class="img-fluid">
<h3 class="title-medium-dark mb-none">Electronics</h3>
<div class="view">(19,805)</div>
</div>
</div>
First of all, you can't have a div inside a. I mean, technically in some environments it works, but its against specification, so you can't rely on that structure. If you want to have a div wide link you better have your a absolutely positioned and stretched to fit your div
You can use javascript, in the code below I created a function that adds click event handlers instead of using a tags which can't be put inside each other.
Also included an example of how to style the div (see clickable css class).
function addLink(divId, url){
let div = document.getElementById(divId);
div.setAttribute('data-link-url', url);
link1.addEventListener('click', function(e){
window.location = this.getAttribute('data-link-url');
});
}
addLink('link1', 'https://stackoverflow.com');
.clickable{
cursor: pointer;
}
<div id="link1" class="clickable">
<div class="service-box1 bg-body text-center">
<img src="img/service/service1.png" alt="service" class="img-fluid">
<h3 class="title-medium-dark mb-none">text</h3>
<div class="view">(19,805)</div>
</div>
</div>
I have a scrolling timeline with images:
<div class="roadmap">
<h1 class="title">Roadmap</h1>
<div class="timeline">
<div class="swiper-roadmap">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image: url('https://unsplash.it/1920/500?image=15');" data-month="February">
<div class="swiper-slide-content"><span class="timeline-year">By House ULTIMA</span>
<h4 class="timeline-title">Live, Love and Prosper</h4>
</div>
</div>
<div class="swiper-slide" style="background-image: url('https://unsplash.it/1920/500?image=16');" data-month="March">
<div class="swiper-slide-content"><span class="timeline-year">By House TITAN</span>
<h4 class="timeline-title">International Women's Day</h4>
</div>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
All divs should be hidden except the active one. But the problem is that all divs are visible on the page. Here is an example
Instead of showing two images it should actually show one and then another one when i select month. How can I achieve it?
Please try with this:
.timeline {
overflow: hidden;
}
check this Fiddle
You have to made some CSS changes. I have added two CSS Class at the end of your CSS :
.swiper-slide{
display:none;
}
.swiper-slide-active{
display:block;
}
Here is an updated code : https://codepen.io/anon/pen/BeyvKz
Did you try adding overflow: hidden; to .roadmap;
The simplest solution is to give the two div of class "swiper-slide" distinct ids, then write javascript to toggle between the two.
var isFebruary = (month == "February");
document.getElementById("slide1").style.display = isFebruary ? 'block' : 'none';
document.getElementById("slide2").style.display = isFebruary ? 'none' : 'block';
(You may also use attribute "hidden" of HTML5 using setAttribute() and removeAttribute())
Because you have the additional attribute data-month in the div's, you can get a bit fancier by using querySelectorAll() on the class "swiper-slide" to get the list of all div's of the class, traverse the list and hide all div's except the one matching the month. The code will then work even if you add more months to the page.
I am new and start to learn writing html. In my code, the situation would be that when I click to a button, I used $(event.currentTarget).parents('.page-container') to get the whole html element of my currentTarget and then I have all elements like below:
<div class="page-container">
<div id="mainContainer" class="container-fluid">
<div class="row row-offcanvas row-offcanvas-left">
<div id="accordionSummaryList" class="sidebar-left col-lg-2 col-md-2 col-sm-2 sidebar-offcanvas">
<div class="mainTenant">
<div class="subTenant">
<h5 data-toggle="collapse" data-parent="#accordionSummaryList" href="#toggleAbleListGroup1">Admins</h5>
<div class="container-fluid panel-collapse collapse in" id="toggleAbleListGroup1"></div>
</div>
</div>
</div>
</div>
</div>
</div>
What I would like to do is I would like to find all of the div element which have the class = "collapse in" and I want to remove the class "in" to hide the content inside of this div box.
How can I do that?
in vanilla-JS
[].forEach.call(document.querySelectorAll('.subTenant .collapse.in'), function(el){
el.classList.remove('in');
}
or with jQuery (if already included)
$('.subTenant .collapse.in').removeClass('in');
If you want to do it with jquery: $(".collapse.in").removeClass("in")
you can do it with jquery
jQuery('.collapse').removeClass('in');
You can also do it with this
if($(event.currentTarget).parents('.page-container').find('.collapse'))
{
$('.collapse').removeClass('in');
}
I'm having some trouble making a working show div and I just can't get it.
So I have the following:
function GetCaptcha() {
$(".panel-captcha").fadeIn(500);
}
Get
<div class="panel-captcha">
TEXT
</div>
The div has the display:none tag.
It works very well, but I have one problem. I need to have many divs inside the same page ( not the same, it may change from database ). If I have 3 or 4 panels, when I click the button it will show them all instead only the div where I have the link to show.
Anyone can help me? Thanks.
Complete HTML file...
<div class="col-md-4">
<div class="panel panel-blue" data-widget='{"draggable": "false"}'>
<div class="panel-heading">
<h2>TEXT</h2>
<div class="panel-ctrls">
<i class="ti ti-eye"></i>
<!-- BUTTON TO SHOW CAPTCHA -->
</div>
</div>
<div class="panel-body">
<small>Other Text...</small>
</div>
<div class="panel-footer">
<div class="tabular">
<div class="tabular-row tabular-row">
<div class="tabular-cell">
<span class="status-total"><strong>More Text...</strong></span>
</div>
<div class="tabular-cell">
<span class="status-pending">Other Text...</span>
</div>
</div>
</div>
</div>
<div class="panel-captcha">
<!-- HIDDEN DIV -->
<div class="tabular-cell">
HIDDEN TEXT
</div>
</div>
<!-- END HIDDEN DIV -->
</div>
</div>
You can pass the reference of element to click handler, then use .next()
Script
function GetCaptcha(elem) {
$(elem).next(".panel-captcha").fadeIn(500);
}
.panel-captcha {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Get
<div class="panel-captcha">
TEXT
</div>
As you are using jQuery bind event using it.
HTML
Get
<div class="panel-captcha">
TEXT
</div>
Script
$(function() {
$('.captcha').on('click', function () {
$(this).next(".panel-captcha").fadeIn(500);
});
});
EDIT
As per updated HTML use
function GetCaptcha(elem) {
$(elem).closest('.panel').find(".panel-captcha").fadeIn(500);
}
I have a list which contains of several items that are hidden.
In my JS i want a function that changes the items of this list so it becomes visible. I want each item to become visible if a certain event has happened. The event is working fine and can be considered as shakeCount= 6, to test it properly.
Here is my list:
<div class="container">
<div class="list-group">
<div id="s1">Shake1</div>
<div id="s2">Shake2</div>
<div id="s3">Shake3</div>
</div>
</div>
What i tried so far and didn't work:
function nR(){
if (shakeCount>5)
document.getElementbyId("s1").style.visibility ="visible";
}
Thanks in advance!
Have you tried using Toggle? I would recommend it but you may need to remove the "hidden" class from your elements and add in the style="display: none;" attribute to each in order to default them to hidden.
<div class="container">
<div class="list-group">
<div id="s1">Shake1</div>
<div id="s2">Shake2</div>
<div id="s3">Shake3</div>
</div>
</div>
function nR(){
if (shakeCount>5)
document.getElementbyId("s1").toggle();
}
First, you're using getElementbyId -- it should be getElementById (missing capital 'B').
Second, you've made the #shake links visibility:hidden, but you are targeting the wrapping div when you run your js.
var shakeCount = 6;
if (shakeCount>5)
document.getElementById("s1").style.visibility ="visible";
.hidden {visibility: hidden;}
<div class="container">
<div class="list-group">
<div id="s1" class="list-group-item hidden"><a href="#shake1" >Shake1</a></div>
<div id="s2" class="list-group-item hidden"><a href="#shake2" >Shake2</a></div>
<div id="s3" class="list-group-item hidden"><a href="#shake3" >Shake3</a></div>
</div>
</div>
The above code hides the wrapping div elements instead of the links so that they are shown when the js runs.