$(document).ready(function(){
$('#hide').on('click', function (e) {
$('#current-pane).show()
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="panel-group">
<div class="panel panel-default" id="current-pane">
This is First Panel
Finish Call
</div>
<div class="panel panel-info hide" id="current-pane">
Show me on close of first one
</div>
</div>
My requirement is to close the div once all action are done and show other div that choose another action.
Hence I thought bootstrap panel component will be helpful. Please not I am not looking for collapse effect. I am wants to do it in some animated way so that it give impression that working div is closed.
I am struggling to find the panel close event.
The div id must be unique, such as current-pane1 , current-pane2, etc.
$(document).ready(function(){
$('#hide').on('click', function (e) {
$('#current-pane1').slideToggle();
$('#current-pane2').removeClass("hide");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="panel-group">
<div class="panel panel-default" id="current-pane1">
This is First Panel
<a class="btn btn-primary btn-lg" data-dismiss="alert" aria-label="close" id="hide">Finish Call</a>
</div>
<div class="panel panel-info hide" id="current-pane2">
Show me on close of first one
</div>
</div>
Related
I'm exploring a mixture of codes in javascript, HTML, CSS, and bootstrap. I tried to clear a page through a button click--> document.write(''), then kinda tried to repaint another button. Kindly explain where I've gone wrong, if this is a good practice or not. Sorry, if this is silly. On clicking button one, two things happen: 1) Page is cleared 2) The visibility property of the second button is changed by changing its class name (invoking the new class name's style property)
<style type="text/css">
.bn{visibility:hidden;}
.btn{visibility:visible;}
</style>
<script type="text/javascript">
function newpg(){
document.write('');
document.getElementById('two').className="btn";}
</script>
</head><body>
<div class="container">
<div class="row">
<div class="col-md-6"> <!--some content-->
<button id="one" onclick="newpg()">CLEAR &SHOW THE HIDDEN BUTTON</button>
<button class="bn" id="two">I'M HERE</button>
</div></div></div> <!--bootstrap code inclusion-->
</body></html>
As stated in my comment display none removes all the content of the page. You then try to find a button you just removed. It is not going to work.
You need to hide the element with JavaScript. You can easily do that by setting the display property.
Since you are using bootstrap, you should be toggling their classes. Either you toggle d-none or invisible
const btn1 = document.getElementById('one');
const btn2 = document.getElementById('two');
function newpg(evt) {
evt.preventDefault();
btn1.classList.add('d-none');
btn2.classList.remove('d-none');
}
btn1.addEventListener("click", newpg);
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-6">
<!--some content-->
<button id="one">CLEAR &SHOW THE HIDDEN BUTTON</button>
<button class="d-none" id="two">I'M HERE</button>
</div>
</div>
</div>
Bootstrap 3
const btn1 = document.getElementById('one');
const btn2 = document.getElementById('two');
function newpg(evt) {
evt.preventDefault();
btn1.classList.add('hidden');
btn2.classList.remove('hidden');
}
btn1.addEventListener("click", newpg);
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-6">
<!--some content-->
<button id="one">CLEAR &SHOW THE HIDDEN BUTTON</button>
<button class="hidden" id="two">I'M HERE</button>
</div>
</div>
</div>
Using document.write('') you're actually deleting every HTML element on your page, So there remains no element to be shown next. You should use another function to just eliminate the button with id one instead of deleting everything. I suggest document.getElementById('one').style.display="none". So the code would be something like this:
<style type="text/css">
.bn{visibility:hidden;}
.btn{visibility:visible;}
</style>
<script type="text/javascript">
function newpg() {
document.getElementById('one').style.display="none";
document.getElementById('two').className="btn";
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6"> <!--some content-->
<button id="one" onclick="newpg()">
CLEAR &SHOW THE HIDDEN BUTTON
</button>
<button class="bn" id="two">I'M HERE</button>
</div></div></div> <!--bootstrap code inclusion-->
</body>
I'm not sure what you are trying to do by clearing the whole page, but it's probably not doing what you think it's doing.
document.write(''); // this indeed clear the whole HTML page
document.getElementById('two') // #two doesn't exist anymore since the page is now blank
Maybe you just want to display/hide elements?
Then I would suggest using the CSS display property.
I'm trying to create a modal activated by jquery. Inside that modal I have a slider created in webflow, but this slider isn't working.
The webflow support suggests to insert, after the modal activator, this line of code: Webflow.require('slider').redraw();
But it's not working.
Here's my code:
$('#plus-1').on('click', function() {
//apri la modal corrispondente
$("#modal-1").css('display', 'flex');
//$('.slider').redraw();
Webflow.require('slider').redraw();
$('#chiudi-1').on('click', function() {
//chiudi la modal corrispondente
$("#modal-1").css('display', 'none');
});});
<script src="https://www.tecmasolutions.com/clients/princype-2/js/configurator-princype-rev002.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://www.tecmasolutions.com/clients/princype-2/css/normalize.css" rel="stylesheet" type="text/css">
<link href="https://www.tecmasolutions.com/clients/princype-2/css/components.css" rel="stylesheet" type="text/css">
<link href="https://www.tecmasolutions.com/clients/princype-2/css/configurator-princype-rev002.css" rel="stylesheet" type="text/css">
<button id="plus-1" type="button">Click Me!</button>
<div id="modal-1" class="modal-prezzi porta-h240 logged">
<div class="info-wrapper-checkout logged">
<a id="chiudi-1" class="chiudi checkout logged">x</a>
<div id="slider-1" class="slider w-slider">
<div class="w-slider-mask">
<div class="img_int-pack-premium-plus a w-slide">
</div>
<div class="img_int-pack-premium-plus b w-slide">
</div>
<div class="img_int-pack-premium-plus c w-slide">
</div>
</div>
<div class="w-slider-arrow-left">
<div class="icon-2 w-icon-slider-left"></div>
</div>
<div class="w-slider-arrow-right">
<div class="icon-3 w-icon-slider-right"></div>
</div>
<div class="slide-nav w-slider-nav w-round"></div>
</div>
</div>
</div>
I found the missing point.
before the Webflow.require('slider').redraw(); I had to put this:
$.fn.redraw = function(){
$(this).each(function(){
var redraw = this.offsetHeight;
});
};
So, I'm not sure what I'm doing wrong, as I'm not getting any errors in the console, and I commented out my other JQuery/JavaScript code and the issue persists. When I click a thumbnail image, the classes are added just fine, but when I click the close button, the classes don't remove. If I add an alert function on the click of the close button, it works fine.
$('.thumbnail').on('click', function() {
$(this).find('.modal').addClass('active');
$(this).find('.modal-image > img').addClass('active');
$(this).find('.modal-image-caption').addClass('active');
});
$('#close').on('click', function() {
$(this).parent('.modal').removeClass('active');
$(this).siblings('.modal-image > img').removeClass('active');
$(this).siblings('.modal-image-caption').removeClass('active');
});
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<div class="modal">
<span class="close" id='close'>×</span>
<div class="modal-image">
<img src="https://via.placeholder.com/150x150" alt="">
</div>
<!-- modal-image -->
<div class="modal-image-caption text-center">
<p>This is some example text</p>
</div>
<!-- modal-image-caption -->
</div>
<!-- modal -->
Under the assumption that .thumbnail encloses the modal the click of the close button bubbles and triggers the active again.
I added return false; to the end of your function.
$('.thumbnail').on('click', function() {
$(this).find('.modal').addClass('active');
$(this).find('.modal-image > img').addClass('active');
$(this).find('.modal-image-caption').addClass('active');
});
$('.close').on('click', function() {
$(this).parent('.modal').removeClass('active');
$(this).siblings('.modal-image > img').removeClass('active');
$(this).siblings('.modal-image-caption').removeClass('active');
return false;
});
.active {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTML:
<div class="thumbnail">
<div class="modal">
<span class="close">×</span>
<div class="modal-image">
<img src="./img/dish.jpg" alt="">
</div>
<!-- modal-image -->
<div class="modal-image-caption text-center">
<p>This is some example text</p>
</div>
<!-- modal-image-caption -->
</div>
<!-- modal -->
</div>
Why my js code dont work? It worked before but when I added next block it dont work:
<div class="collapse" id="collapse-block">
I have collapse block (id='collapse-block') which has 3 other collapse blocks inside. This js code works for button (id='expand-collapse') which will expand/collapse blocks inside div (id='blocks')
$(function() {
$('#expand-collapse').on('click', function() {
var allCollapsed = true;
$('#blocks .collapse').each(function(i, block) {
if ($(block).hasClass('show')) {
allCollapsed = false;
}
});
$('#blocks .collapse').each(function(i, block) {
if (allCollapsed) {
$(block).collapse('show');
} else {
$(block).collapse('hide');
}
});
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="card">
<div class="card-header">
<button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#collapse-block" aria-expanded="false" aria-controls="collapse-block">OPEN/CLOSE</button>
<button id='expand-collapse' type="button">OPEN/CLOSE BLOCKS</button>
</div>
<div class="card-block">
<div class="collapse" id="collapse-block">
<div id="blocks">
<div class="list-group">
<div class="list-group-item">
<a data-toggle="collapse" href="#block-1" aria-expanded="false" aria-controls="block-1">FIRST BLOCK</a>
<div class="collapse block" id="block-1">
FIRST BLOCK
</div>
</div>
<div class="list-group-item">
<a data-toggle="collapse" href="#block-2" aria-expanded="false" aria-controls="block-2">SECOND BLOCK</a>
<div class="collapse block" id="block-2">
SECOND BLOCK
</div>
</div>
<div class="list-group-item">
<a data-toggle="collapse" href="#block-3" aria-expanded="false" aria-controls="block-3">THIRD BLOCK</a>
<div class="collapse block" id="block-3">
THIRD BLOCK
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
As per javascript standard, whenever you modify DOM, add or remove children, the event gets removed, you will have to add event again. that's issue here. I guess.
Edit
Modifying innerHTML causes the content to be re-parsed and DOM nodes to be recreated, losing the handlers you have attached. Appending elements as in the first example doesn't cause that behavior, so no re-parsing has to occur, since you are modify the DOM tree explicitly.
Another good way to handle this is to use insertAdjacentHTML(). For example:
document.body.insertAdjacentHTML('beforeend', '<br>')
You need to include a reference to the Bootstrap script or Collapse.js
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Bootstrap Scripts
Collapse.js
You are not added bootstrap css in your code, I think that's the problem
refer it like
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
Working fiddle https://jsfiddle.net/qcdk68et/
SORRY! It was my fault! I just forget to add js code file inside html. Question is closed.
I have problem with close a modal,
i check for jquery and its ok.
I am using 1.12.4 version and i have tag in head of code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
My open modal tag is:
<a data-toggle="modal" class="modal-trigger" data-id="11" href="#komentarM"></a>
And my modal cocde is:
<div id="komentarM" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<input type="text" name="id" value=""></input>
<div class="modal-footer">
Agree
</div>
</div>
With this code i try trigger showing a modal:
<script>
$(document).ready(function () {
$('#komentarM').on('shown.bs.modal', function (e) {
data = $(e.relatedTarget).data('id')
$(e.currentTarget).find('input[name="id"]').val(data);
});
});
Problem is when i click to close modal, or click on black spaces on page my modal was closed but when i click to open modal again only overlay show.
I am post a picture what happens when i close modal and open again.
You forgot to add a semicolon at line:2
$('#komentarM').on('shown.bs.modal', function (e) {
data = $(e.relatedTarget).data('id');
$(e.currentTarget).find('input[name="id"]').val(data);
});
Have you checked the chrome/firefox error console ? I think it will be throwing some js error when it is trying to reopen the modal. Reason is could be the re-execution of following code on reopening. I may not be correct with below code but some error must be being recorded in console which will help in debugging
$('#komentarM').on('shown.bs.modal', function (e) {
data = $(e.relatedTarget).data('id')
$(e.currentTarget).find('input[name="id"]').val(data);
});
If no error is being thrown in console then i recommend try changing the jquery library to next stable version and make sure it is compatible with bootstrap framework. just a suggestion to debug
if you do not use shown event then does it work (modal gets reopened)?
[modified sample]
<html>
<head>
<script
src="https://code.jquery.com/jquery-1.12.4.js"
integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css " rel="stylesheet" integrity="sha384- BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div id="komentarM" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<input type="text" name="id" value=""></input>
<div class="modal-footer">
Agree
</div>
</div>
<a data-toggle="modal" class="modal-trigger" data-id="11" href="#komentarM">Hello</a>
</body>
<script>
$(document).ready(function () {
$('#komentarM').on('shown.bs.modal', function (e) {
data = $(e.relatedTarget).data('id')
$(e.currentTarget).find('input[name="id"]').val(data);
});
});
</script>
Problem was in closing modal, modal was close but not in code, when i try open again that start break and i am add in jq:
$(document.body).on('click', '.lean-overlay', function () {
$('.modal').modal('hide');
});