I am using Google Sites to embed HTML code, paste the code within the "Embed from the web" window. The length of the output is variable.
I wish there was a way to dynamically adjust the height of the parent iframe that Google Sites is using to host my HTML.
I know that I can use the Google Sites user interface to manually allocate more space and unfortunately the content is going to be different based on data from API, hence there is no way for me to know the height beforehand. Currently the vertical scroll-bar appears whenever the content overfills the allocated space and it does not look good.
I tried the following and it only removes the scroll bar without allowing me to see the content:
<script>parent.document.getElementsByTagName('iframe')[0].scrolling="no";</script>
The example Google Site is at https://sites.google.com/view/auto-ajust-gsite-embed/home
And this is the code I used in the above example site:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous"
/>
<title>auto adjust google site embed</title>
</head>
<body>
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne"
aria-expanded="false"
aria-controls="flush-collapseOne"
>
Accordion Item #1
</button>
</h2>
<div
id="flush-collapseOne"
class="accordion-collapse collapse"
aria-labelledby="flush-headingOne"
data-bs-parent="#accordionFlushExample"
>
<div class="accordion-body">
Placeholder content for this accordion, which is intended to
demonstrate the <code>.accordion-flush</code> class. This is the
first item's accordion body.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo"
aria-expanded="false"
aria-controls="flush-collapseTwo"
>
Accordion Item #2
</button>
</h2>
<div
id="flush-collapseTwo"
class="accordion-collapse collapse"
aria-labelledby="flush-headingTwo"
data-bs-parent="#accordionFlushExample"
>
<div class="accordion-body">
Placeholder content for this accordion, which is intended to
demonstrate the <code>.accordion-flush</code> class. This is the
second item's accordion body. Let's imagine this being filled with
some actual content.
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"
></script>
</body>
</html>
This is just a trick to have NEW google sites remove the vertical scrollbar: Expand the inserted "Embed < >" box's boundary.
--[ Details: I expand the inserted "Embed < >" box's boundary to the size of about 11" x 7 ": horizontal to the max on the right side, vertical (down) to the end of the visible bottom to the monitor's screen. (I stop further downwardly expansion of said box because it moves very slowly starting from the bottom most of the screen). I think the box is large enough for my test. All tested views mobile/tablet/monitor show that the scrollbar is gone. ]
--(Thank you for the HTML embed codes.)
Related
I have a Bootstrap Accordion
I need to prevent opening of the accordion when textbox is clicked
While, if anyone clicks outside the texbox (blue color region) let it expand and shrink as usual.
So I have tried with
$(".accordion-button").click(function(event) {
//console.log($('.workflowTitle:focus').length)
if($('.workflowTitle:focus').length >= 1)
{
event.stopPropagation();
event.preventDefault();
return
}
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<input class="workflowTitle" value="Accordion Item #1"/>
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
You can disable the according collapse when you input gets focus and re-enable it on it's blur event.
$('.accordion .accordion-header input').on('focus', function(event) {
$(this).parent().attr('data-bs-toggle', 'disabled');
}).on("blur", function() {
$(this).parent().attr('data-bs-toggle', 'collapse');
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<input class="workflowTitle" value="Accordion Item #1"/>
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
I looked through Bootstrap docs but I couldn't find a built-in way to implement such functionality so I will showcase a possible solution that acts on the events that Bootstrap's collapsible components emit.
The idea is simple, we'll have a global variable that acts as a flag (true or false) and based on that flag we either allow the open/close mechanisms of the accordion or simply prevent them.
Here's what we're going to do:
initialize a global variable, let's call it shouldPreventAccordion, that acts as a flag to tell whether opening/closing of the accordion should be prevented.
listen for the focus event on the input.workflowTitle and set the flag, shouldPreventAccordion, to true.
listen for the blur event on the input.workflowTitle and set the flag, shouldPreventAccordion, to false.
and finally, we listen for Bootstrap's collapsible components events, mainly show.bs.collapse and hide.bs.collapse and based on our flag we either prevent the action or allow it.
Here's a live demo to illustrate:
/** our flag */
let shouldPreventAccordion = !1;
/** when the input is focused we should prevent the accordion from opening/closing */
$(".workflowTitle").on('focus', () => shouldPreventAccordion = !0);
/** when the input is blured (lost focus) we should allow the accordion from opening/closing */
$(".workflowTitle").on('blur', () => shouldPreventAccordion = !1);
/** when the accordion is about to open we should check if that action is allowed using our flag */
$(".accordion").on('show.bs.collapse', e => {
shouldPreventAccordion && e.preventDefault();
return !shouldPreventAccordion;
});
/** when the accordion is about to close we should check if that action is allowed using our flag */
$(".accordion").on('hide.bs.collapse', e => {
shouldPreventAccordion && e.preventDefault();
return !shouldPreventAccordion;
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<input class="workflowTitle" value="Accordion Item #1"/>
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
The above solution seems natural is we're listening to event emitted by Bootstrap and we're not changing any DOM attributes should be changed manually such as the attribute used by Bootstrap to control it functionalities.
I have an accordion
How can I open all the accordion items at the same time when clicking on a single Accordion Item?
Let's say we have this scenario:
Accordion Item #1 open
Accordion Item #2 closed
Accordion Item #2 closed
If we click on item #2 or #3, the three accordions will be opened (the Accordion #1 will remain opened) and then if we click again on some Accordion Item, the 3 accordions will close simultaneously.
<body>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<div class="container">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong>
</div>
</div>
</div>
</div>
</div>
</body>
#nontechguy Answer edited:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="accordion" id="accordionPanelsStayOpenExample">
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target=".panelsStayOpen">
Accordion Item #1
</button>
</h2>
<div id="" class="panelsStayOpen accordion-collapse collapse show">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".panelsStayOpen">
Accordion Item #2
</button>
</h2>
<div id="" class="panelsStayOpen accordion-collapse collapse">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".panelsStayOpen">
Accordion Item #3
</button>
</h2>
<div id="" class="panelsStayOpen accordion-collapse collapse">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
</body>
</html>
Hopefully, starting to solve part of your request?
All the accordian-items will open and close simultaneously when clicking any accordian-item.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="accordion" id="accordionPanelsStayOpenExample">
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".panelsStayOpen">
Accordion Item #1
</button>
</h2>
<div id="" class="panelsStayOpen accordion-collapse collapse">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".panelsStayOpen">
Accordion Item #2
</button>
</h2>
<div id="" class="panelsStayOpen accordion-collapse collapse">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".panelsStayOpen">
Accordion Item #3
</button>
</h2>
<div id="" class="panelsStayOpen accordion-collapse collapse">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
</body>
</html>
I don't think Bootstrap has anything by default for your test case. What you want is to detect the show or hide events on the collapse, and then manually control every accordion. I took the basic example from their documentation, and modified it. Do you want something like this?
const accordion = document.getElementById('accordionExample'),
accordionCollapses = Array.from(document.querySelectorAll('.accordion-collapse'));
accordionCollapses.forEach((accordionCollapse) => {
accordionCollapse.addEventListener('show.bs.collapse', (event) => {
accordionCollapses.forEach((accordionCollapse) => {
accordionCollapse.className = 'accordion-collapse collapsing';
accordionCollapse.style.height = '100%';
setTimeout(() => accordionCollapse.className = 'accordion-collapse collapse show', 350);
accordionCollapse.parentElement.querySelector('.accordion-button').className = 'accordion-button';
});
});
accordionCollapse.addEventListener('hide.bs.collapse', (event) => {
accordionCollapses.forEach((accordionCollapse) => {
accordionCollapse.className = 'accordion-collapse collapsing';
accordionCollapse.className = 'accordion-collapse collapse';
accordionCollapse.parentElement.querySelector('.accordion-button').className = 'accordion-button collapsed';
});
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
Less content
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
JSFiddle, if you need.
I'm using Semantic-ui. The page I'm designing has two fixed menus on both sides, and a container for the content on the middle.
If I use two fixed menus on both sides, the container on the middle gets covered by them on window resizing.
Like this:
I would like the container to resize considering that, on both sides, there are two elements that occupy their own space.
How can I make a container resize properly on window reducing size?
This snippet has an example from semantic-ui's webpage. It has two fixed menus on both sides an the same problem with the container, it get's covered by them.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/components/menu.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/components/item.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.css" />
<script src="semantic/dist/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.js"></script>
</head>
<div>
<div class="ui left fixed vertical menu">
<div class="item">
Item
</div>
<a class="item">Features</a>
<a class="item">Testimonials</a>
<a class="item">Sign-in</a>
</div>
<div class="ui right fixed vertical menu">
<div class="item">
Item
</div>
<a class="item">Features</a>
<a class="item">Testimonials</a>
<a class="item">Sign-in</a>
</div>
<p></p>
<p></p>
<div class="ui container">
<h1> I can't seee thiiiiiissss</h1>
</div>
<div>
Since both sidebars have fixed width (15rem each) you can use calc to set a calculated width for the content container. With this you'll cover all desktop displays (down to 768px wide), but looks like this Semantic-ui have own breakpoints to change container's width dynamically, so any display with resolution lower than 768px will break this again. But this is not so misfortune, cause you're not going to show both this sidebars on such small screens, are you? You know, there's no room for them.
div.ui.container {
width: calc(100% - 30rem);
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/components/menu.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/components/item.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.css" />
<script src="semantic/dist/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.js"></script>
</head>
<div>
<div class="ui left fixed vertical menu">
<div class="item">
Item
</div>
<a class="item">Features</a>
<a class="item">Testimonials</a>
<a class="item">Sign-in</a>
</div>
<div class="ui right fixed vertical menu">
<div class="item">
Item
</div>
<a class="item">Features</a>
<a class="item">Testimonials</a>
<a class="item">Sign-in</a>
</div>
<p></p>
<p></p>
<div class="ui container">
<h1> I can't seee thiiiiiissss</h1>
</div>
<div>
Given the following code from the bootstrap website for the collapse functionality:
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<div class="collapse" id="collapseExample">
<div class="well">
...
</div>
</div>
What I would like to do is hide the link, that invokes the collapse functionality once its open, does anyone know of a way I can do this without adding additional Js?
I used this to hide the button after it was clicked:
HTML (just added a class "hide-me"):
<button class="btn btn-default hide-me" data-toggle="collapse" data-target="#search" id="search-display">My Button</button>
CSS:
.hide-me[aria-expanded="true"] {display: none;}
This is what I was really looking for', without any CSS or JavaScript of my own, simply leveraging Bootstrap:
<a class="btn btn-primary hook in" data-toggle="collapse" href=".hook" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<div class="collapse hook">
<div class="well">
...
</div>
</div>
Heres the fiddle:
http://jsfiddle.net/hptrpaxh/1/
Add this:
$('.btn').toggle();
I recommend you add an additional class to this button or give it an id to distinguish it from other buttons.
Sorry didn't see you were trying to do it without extra js.
Here's an easy CSS trick. You can obviously modify it as well
give the button a class like hidden-button
Then use this CSS
.hidden-button {
position:relative;
z-index:0;
}
.well {
position:relative;
margin-top:-33px;
z-index:10000;
}
Here's a fiddle http://jsfiddle.net/cp5Lvtdo/4/
This can be done in Bootstrap 5 (and presumably 4) using the native Accordion functionality. Place the button and the content in separate accordion item elements, and set the parent on the collapsible content per the docs.
Notice that I've hidden the accordion item borders with b-0.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="accordion m-4" id="accordionArea">
<div class="accordion-item border-0">
<div class="accordion-collapse collapse show">
<button class="btn btn-primary" role="button"
data-bs-toggle="collapse" data-bs-target="#content"
aria-expanded="false" aria-controls="content">Toggle button & content
</button>
</div>
</div>
<div class="accordion-item border-0">
<div id="content" class="accordion-collapse collapse"
data-bs-parent="#accordionArea">
<div>Some content.</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
If you would like to be able to collapse the content and show the link again without reloading the page you can wrap the whole content section (your <div>) in the <a> element.
Place some link content before the actual collapsible content and give it a class or id. Then add a custom CSS class to the <a> tag as explained in the previous answer but add a child selector like this:
.toggle-hide[aria-expanded="true"] > /* your link content class or id here */ {
display: none;
}
This will make the link less visible but you'll be able to click the content itself to collapse it and show back just the link.
I am trying to follow the instructions on this site: http://sathomas.me/acc-wizard/
I have followed the instructions, and even copied and pasted the exact code. Can you tell me what's going wrong? I have verified that all the code is located in the proper directory. Here is an image of what's displaying on my site: http://i.imgur.com/BSmrFZQ.png
Here's my code, the CSS is added in the header and is not in the code below:
<div id="body">
<div class="row-fluid breadcrumbs margin-bottom-30">
<div class="container">
<h1 class="pull-left">Book Now!</h1>
</div><!--/container-->
</div><!--/breadcrumbs-->
<div class="container">
<div class="row-fluid">
<div class="span9">
<div class="row-fluid acc-wizard">
<div class="span3" style="padding-left: 2em;">
<p style="margin-bottom: 2em;">
Follow the steps below to add an accordion wizard to your web page.
</p>
<ol class="acc-wizard-sidebar">
<li class="acc-wizard-todo">Prerequisites</li>
<li class="acc-wizard-todo">Add Wizard</li>
<li class="acc-wizard-todo">Adjust HTML</li>
<li class="acc-wizard-todo">Release</li>
</ol>
</div>
<div class="span9">
<div class="accordion" id="accordion-demo">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#prerequisites">
Install Bootstrap and jQuery
</a>
</div>
<div id="prerequisites" class="accordion-body collapse in">
<div class="accordion-inner">
<form id="form-prerequisites">
<p>
The accordion wizard depends on two other open source packages:
<ul>
<li>The Bootstrap framework, available here.
<li>The jQuery javascript library, available here.
</ul>
Note that Bootstrap itself depends on jQuery for its interactive
components, so if you're using Bootstrap you probably already have
jQuery as well.
</p>
<p>
You'll include the CSS styles for Bootstrap in the
<code><head></code> of your HTML file, for example:
</p>
<pre><!--
--><link href="css/bootstrap.min.css" rel="stylesheet">
<!-- --><link href="css/bootstrap-responsive.min.css" rel="stylesheet"><!--
--></pre>
<p>
and you'll include jQuery and Bootstrap javascript files at the
end of your <code><body></code> section, for example:
</p>
<pre><!--
--><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<!-- --><script src="js/bootstrap.min.js"></script><!--
--></pre>
</form>
</div> <!--/.accordion-inner -->
</div> <!-- /#prerequisites -->
</div> <!-- /.accordion-group -->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#addwizard">
Add Accordion Wizard
</a>
</div>
<div id="addwizard" class="accordion-body collapse in">
<div class="accordion-inner">
<form id="form-addwizard">
<p>
If you haven't already found it, the source code for the
accordion wizard is available on github
here.
There are two main folders, <code>/src</code> and
<code>/release</code>.
</p>
<p>
There are two different ways to add the accordion wizard to
your pages. The simplest approach is just to add the CSS and
javascript files from the <code>/release</code> folder
directly in your HTML without modifying them:
</p>
<pre><!--
--><link href="css/bootstrap.min.css" rel="stylesheet">
<!-- --><link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<!-- --><link href="css/acc-wizard.min.css" rel="stylesheet"><!--
--></pre>
<p>
and
</p>
<pre><!--
--><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<!-- --><script src="js/bootstrap.min.js"></script>
<!-- --><script src="js/acc-wizard.min.js"></script><!--
--></pre>
<p>
The release styles for the accordion wizard are based on
Bootstrap's default styles. If you've tweaked the Bootstrap
styles (e.g. by changing the link color), you'll want to
make corresponding tweaks to <code>acc-wizard.min.css</code>.
</p>
<p>
Alternatively, if you're building custom CSS and javascript,
then you might want to start with the files in the <code>/src</code>
folder and adapt them to your source code. The <code>/src</code>
folder contains a LESS file and uncompressed (and commented)
javascript. Note that the <code>acc-wizard.less</code> file
depends on variables defined in Bootstrap's <code>variables.less</code>
file.
</form>
</div> <!--/.accordion-inner -->
</div> <!-- /#addwizard -->
</div> <!-- /.accordion-group -->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#adjusthtml">
Adjust Your HTML Markup
</a>
</div>
<div id="adjusthtml" class="accordion-body collapse in">
<div class="accordion-inner">
<form id="form-adjusthtml">
<p>
Now you can modify your HTML markup to activate the accordion
wizard. There are two parts to the markup—the collapsible
accordion itself and the task list. I prefer putting both in
the same <code>.row</code> with the task list taking up a
<code>.span3</code> and the accordion panels in a <code>.span9</code>,
but that's not a requirement.
</p>
<p>
The accordion panel can be exactly as documented in the
Bootstrap example,
but I think there's a problem with the Bootstrap implementation.
Specifically, the Bootstrap example only adds the class
<code>.in</code> to one of the accordion panels. That class
marks the panel as visible by default. The problem with only
having one panel visible by default is that users without
javascript will <strong>never</strong> be able to see the other
panels. Sure, that's a minority of users, but why make your
pages unworkable even for a small minority. Instead, I suggest
adding <code>.in</code> to all your <code>.collapse</code>
elements and have javascript code select only one to make
visible when it runs. The accordion wizard javascript will handle
that for you if you choose to use that approach.
</p>
<p>
The sidebar task list is nothing but a standard HTML ordered
list. The only required additions are adding the
<code>.acc-wizard-sidebar</code> class to the <code><ol></code>
element and <code>.acc-wizard-todo</code> to the individual list
items. If you want to indicate that some steps are already
complete, you can instead add the <code>.acc-wizard-completed</code>
class to the corresponding <code><li></code> elements.
</p>
<pre><!--
--><ol class="acc-wizard-sidebar">
<!-- --> <li class="acc-wizard-todo"><a href="#prerequisites">Install Bootstrap and jQuery</a></li>
<!-- --> <li class="acc-wizard-todo"><a href="#addwizard">Add Accordion Wizard</a></li>
<!-- --> <li class="acc-wizard-todo"><a href="#adjusthtml">Adjust Your HTML Markup</a></li>
<!-- --> <li class="acc-wizard-todo"><a href="#viewpage">Test Your Page</a></li>
<!-- --></ol><!--
--></pre>
<p>
Finally, you'll want to active the wizard in your javascript.
That's nothing more than simply calling the plugin on an
appropriate selection.
</p>
<pre><!--
--><script>
<!-- --> $(window).load(function() {
<!-- --> $(".acc-wizard").accwizard();
<!-- --> });
<!-- --></script><!--
--></pre>
<p>
The default options are probably fine for most uses, but
there are many customizations you can use when you activate
the wizard. Check out the documentation on
github
for the details.
</p>
</form>
</div> <!--/.accordion-inner -->
</div> <!-- /#adjusthtml -->
</div> <!-- /.accordion-group -->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#viewpage">
Test Your Page
</a>
</div>
<div id="viewpage" class="accordion-body collapse in">
<div class="accordion-inner">
<form id="viewpage">
<p>
Naturally, the last thing you'll want to do is test your
page with the accordion wizard. Once you've confirmed that
it's working as expected, release it on the world. Your
users will definitely appreciate the feedback and guidance
it gives to multi-step and complex tasks on your web site.
</p>
</form>
</div> <!--/.accordion-inner -->
</div> <!-- /#viewpage -->
</div> <!-- /.accordion-group -->
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="assets/js/acc-wizard.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script>
function onNext(parent, panel) {
hash = "#" + panel.id;
$(".acc-wizard-sidebar",$(parent))
.children("li")
.children("a[href='" + hash + "']")
.parent("li")
.removeClass("acc-wizard-todo")
.addClass("acc-wizard-completed");
}
$(window).load(function() {
$(".acc-wizard").accwizard({onNext: onNext});
})
</script>
Are you not forgot about this?
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
Order is important! You add these libraries but in wrong order. Here is correct:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/acc-wizard.min.js"></script>
And fix that errors first!:
GET http://shield.sitelock.com/shield/maidsinmemphis.com 403 (Forbidden) index.php:363
GET http://www.maidsinmemphis.com/assets/elasticslides/css/style.css 404 (Not Found) index.php:25
GET http://www.maidsinmemphis.com/assets/css/acc-wizard.min.css 404 (Not Found) index.php:31
GET http://www.maidsinmemphis.com/assets/elasticslides/js/jquery.easing.1.3.js 404 (Not Found) index.php:387
GET http://www.maidsinmemphis.com/assets/elasticslides/js/jquery.eislideshow.js 404 (Not Found) index.php:387
GET http://www.maidsinmemphis.com/assets/js/acc-wizard.min.js 404 (Not Found) index.php:387
Uncaught TypeError: Object [object Object] has no method 'accwizard'