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.
Related
The modal shows up just fine when clicking it to open, and the close buttons register that my mouse is hovering over them, but when clicked nothing happens and the modal remains open.
Has anyone encountered/fixed this problem before? All I've seen on here is to add "data-bs-dismiss" but that hasn't made a difference in the modal. I'm new to bootstrap so any and all help would be much appreciated! Code is below, link to full code here -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name= "viewport" content ="width=device-width, initial-scale=1">
<title>Pokedex</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="./CSS/styles.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="js/scripts.js" defer></script>
</head>
<body>
<div class="pokedex">
<h1 class="pokemon-header">Pokedex</h1>
<ul class="pokemon-list list-group"></ul></div>
<div class="modal" id="modal-container" tabindex="-1" role="dialog" aria-labelledby="modal-container" aria-modal="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title"></h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="js/promise-polyfill.js"></script>
<script src="js/fetch-polyfill.js"></script>
</body>
</html>
There are a couple of issues.
Let's start with the way the orange poke-buttons are created.
function addListItem(pokemon) {
let listItem = $('<li class="list-group-item"></li>');
let button = $('<button class="pokemon-button btn btn-warning" data target="#modal-container" data-toggle="modal">' + pokemon.name + '</button>');
listItem.append(button);
pokemonListElement.append(listItem);
button.on('click', function(){
showDetails(pokemon);
});
}
This seems to be fine... But:
let button = $('<button class="pokemon-button btn btn-warning" data target="#modal-container" data-toggle="modal">' + pokemon.name + '</button>');
Take a look at data target="#modal-container . There's a hyphen missing, and instead of this
data target="#modal-container"
it should look like this:
data-target="#modal-container"
Next, there's no need to have this line in your showDetailsModal(pokemon) function:
modalContainer.classList.add('show');
The data-target and data-toggle will cover that part for you.
Finally, your CSS seems to be putting the modal's backdrop on top of the modal. Change this:
#modal-container {
...
z-index: 999;
...
}
to something else (for example, 1051, or you can delete it, and let Bootstrap handle it for you), since the backdrop has a z-index of 1040.
I was able to fix the behavior in the JSFiddle by replacing the following two lines in the showDetailsModal function:
let modalContainer = document.querySelector('#modal-container');
modalContainer.classList.add('is-visible');
with this line:
$('#modal-container').modal('show');
that is one of the methods provided in Bootstrap 4.3 per:
the Bootstrap Modal documentation
Also, it's necessary to add the data-backdrop="false" attribute to your modal-container div in order to maintain the current style/behavior.
This may not be the best solution - I am not sure why your code doesn't work, it seems reasonable to me, but I think it's a good idea to use the default methods provided by the library as other methods (like the close function) may be expecting them and fail to work if you're using an improvised method.
Here is my code: When I click on one button, it hide all links. And show on one button also. Links and titles are lists which change their lengths in python. I want to show the link of only button which is clicked not all. I have also tried using div but also same problem.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Python Jobs</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css">
<section class="hero is-dark is-bold">
<div class="hero-body">
<p class="title">
Job Title
</p>
<p class="subtitle">
Python jobs
</p>
</div>
</section>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("a").hide();
});
$("#show").click(function(){
$("a").show();
});
})
</script>
</head>
<body>
<section class="section">
<div class="container">
{% for i in range(0, len-1) %}
<h3>{{i+1}}. {{title[i]}}</h3>
<a href={{links[i]}}>{{links[i]}}</a>
<button id="show">Show</button>
<button id="hide"> Hide</button>
<br>
{% endfor %}
</div>
</section>
</body>
</html>
There are multiple problem in your code.
id must be unique so use class instead of id.
Wrap your each heading and link with container. In your case move your div inside for loop.
Based upon your button click find your heading and link to show / hide.
Initially hide your heading and link (It's depend upon your logic, how you want to present UI)
Example:
$(".hide").click(function() {
$(this).parent('div').find('a ,h3').hide();
});
$(".show").click(function() {
$(this).parent('div').find('a ,h3').show();
});
a,
h3 {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h3>Title1</h3>
Link1
<button class="show">Show</button>
<button class="hide"> Hide</button>
</div>
<div class="container">
<h3>Title2</h3>
Link2
<button class="show">Show</button>
<button class="hide"> Hide</button>
</div>
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');
});
I'm working on a solution that displays a list of thumbnails that are medical images. We have a requirement that states if a user clicks a thumbnail a Bootstrap modal should open that display the image (jpg, png or dicom) using the cornerstone.js library.
Using cornerstone seems pretty straightforward. I setup a quick plunker here.
Here's the code for the working plunk:
<!DOCTYPE html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="cornerstone.js"></script>
<script src="exampleImageIdLoader.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var imageId = 'example://1';
var element = document.getElementById('dicomImage');
cornerstone.enable(element);
cornerstone.loadImage(imageId).then(function(image) {
cornerstone.displayImage(element, image);
});
});
</script>
</head>
<body>
<div class="container">
<h1>This works just fine...</h1>
<br>
<div id="dicomImage" style="width:512px;height:512px;">
</div>
</div>
</body>
</html>
I can't seem to figure out why the images are not loading when I use the same code in a Bootstrap modal. The plunk that I'm trying to get working is here.
Here's the code for the broken plunk:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="cornerstone.js"></script>
<script src="exampleImageIdLoader.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var imageId = 'example://1';
var element = document.getElementById('dicomImage');
cornerstone.enable(element);
cornerstone.loadImage(imageId).then(function(image) {
cornerstone.displayImage(element, image);
});
});
</script>
</head>
<body>
<div class="container">
<h1>When this modal is opened the canvas looks like it's drawn at 0px x 0px...</h1>
<br />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div id="dicomImage" style="width:512px;height:512px;"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
After hours or trying to figure it out I figured I would see if anyone out there has any ideas. It looks like the plunk with the modal is drawing the canvas at 0x0 pixels...
Any thoughts or help would be GREATLY appreciated. Thanks all.
Update 6/26
I may have found a potential workaround, but it's not as clean as I would like it to be. I also haven't tested it by playing a series of CT images.
My thoughts are to use the working solution from the first plunk and to call .hide() on #dicomImage on document.ready. Then, when a user clicks a thumbnail, I will use:
$(".modal-body").appendTO("#dicomImage);
Not the cleanest solution, but it could work...
How to apply the .toggle() only the clicked DIV.
My current code applies to all toggle div.
The code switch between the content from <div class="toggled">
I need to do it in version 1.4
Anyone can help me?
This my code:
<html>
<head>
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="card.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#toggle').click("click", function() {
$('.toggled').toggle();
return false;
});
});
</script>
</head>
<body>
<div class="card">
<div class="toggled">
<h3>FRONT 1</h3>
</div>
<div class="toggled" style="display:none;">
<h3>BACK 1</h3>
</div>
Switch Text Toggle<br/>
</div>
<div class="card">
<div class="toggled">
<h3>FRONT 2</h3>
</div>
<div class="toggled" style="display:none;">
<h3>BACK 2</h3>
</div>
Switch Text Toggle<br/>
</div>
</body>
</html>
Thanks in advance!
You'll need to change the ID of the anchors to a class, as ID's are unique.
Then you'd do:
$(function() {
$('.toggle').on("click", function() {
$(this).siblings('.toggled').toggle();
return false;
});
});
Where you find the siblings of the clicked anchor with the class .toggled, and toggle those. You also need a document.ready function, and the event handler has some typos.
And use a newer version of jQuery, 1.4 is outdated.
FIDDLE
Replace $('.toggled').toggle(); with $(this).toggle();. You're currently requesting all .toggle containers be toggled, not the one that is the focus of the event.
Try this:
$('.card #toggle').click(function() {
$('.toggled').toggle();
return false;
});