I am using the code below to show a toast on page load in HTML and JS,
<!-- Toast -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
<script>
window.onload = (event) => {
let myAlert = document.querySelectorAll('.toast');
let bsAlert = new bootstrap.Toast(myAlert);
bsAlert.show();
5}
</script>
but nothing is showing on page load, hope you can help?
Thanks
document.querySelectorAll returns multiple elements, you just want one element for bootstrap.Toast. I've created a snippet of your code with a slight modification, i.e. getting the first .toast and then checking it exists.
window.onload = (event) => {
let myAlert = document.querySelectorAll('.toast')[0];
if (myAlert) {
let bsAlert = new bootstrap.Toast(myAlert);
bsAlert.show();
}
};
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
Related
I'm trying to add a clickable helping zone in my Bootstrap 5 accordion, as you can see in this screenshot :
I want the user to be capable of clicking the question mark, that will open a Bootstrap modal with some helping text.
However, when doing so, the modal is opening but the accordion is collapsing (or opening if closed).
I've used the following JavaScript code to achieve this goal :
const categHelpBtns = document.querySelectorAll('.categ_help');
for (let i = 0; i < categHelpBtns.length; i++) {
const btn = categHelpBtns[i];
if(btn) {
btn.addEventListener("click", function(e) {
e.stopPropagation();
const modal = document.getElementById(btn.dataset.modalId)
if(modal) {
new bootstrap.Modal(modal).show();
}
});
}
}
Any clues how I can prevent the accordion to collapse/open when clicking the help icon ?
const categHelpBtns = document.querySelectorAll('.categ_help');
for (let i = 0; i < categHelpBtns.length; i++) {
const btn = categHelpBtns[i];
if(btn) {
btn.addEventListener("click", function(e) {
e.stopPropagation();
const modal = document.getElementById(btn.dataset.modalId)
if(modal) {
new bootstrap.Modal(modal).show();
}
});
}
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</head>
<body>
<div class="accordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button onglet-header" type="button" data-bs-toggle="collapse" data-bs-target="#nom_pays" aria-expanded="true" aria-controls="nom_pays">
Accordion <i class="fas fa-question-circle categ_help" data-modal-id="modal" aria-hidden="true"></i>
</button>
</h2>
<div id="nom_pays" class="accordion-collapse collapse show" aria-labelledby="nom_pays_header" data-bs-parent="#fiche_bois">
<div class="accordion-body">
Accordion Body
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Data</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"/>
</div>
<div class="modal-body">
Modal body
</div>
</div>
</div>
</div>
</body>
</html>
You do not have to write extra JavaScript to trigger modal.
You can easily do it with the bootstrap html attributes.
In order to trigger your modal, by clicking the question mark
Replace:
<i class="fas fa-question-circle categ_help" data-modal-id="modal" aria-hidden="true"></i>
With:
<i class="fas fa-question-circle categ_help" data-modal-id="modal" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#modal"></i>
I have a bottom offcanvas in my webpage, i would open it on a card click, by trying to set the needed attributes or by using the code from the docs it's not working as the offcanvas shows only the backdrop and dismiss it immedialty.
Here is what i've tried:
const products = document.getElementsByClassName("card product");
var productClick = function (event) {
event.preventDefault()
var myOffcanvas = document.getElementById('offcanvasBottom')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
bsOffcanvas.show();
};
Array.from(products).forEach(function (element) {
element.addEventListener("click", productClick);
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<div class="card product" style="width: 18rem">
<div class="card-body text-center">
<h2 class="card-title fw-bolder">TEST</h2>
<p class="card-text fw-bolder">TEST</p>
</div>
</div>
<div
class="offcanvas offcanvas-bottom"
tabindex="-1"
id="offcanvasBottom"
>
<div class="offcanvas-header">
<button
type="button"
class="btn-close text-reset"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<div class="offcanvas-body">
BODY
</div>
</div>
The problem is the card click event is propagating to inside elements. Instead use event.stopPropagation()...
const products = document.getElementsByClassName("product");
var myOffcanvas = document.getElementById('offcanvasBottom')
var productClick = function (event) {
//event.preventDefault()
event.stopPropagation()
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
bsOffcanvas.show()
}
Array.from(products).forEach(function (element) {
element.addEventListener("click", productClick);
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<div class="card product" style="width: 18rem">
<div class="card-body text-center">
<h2 class="card-title fw-bolder">TEST</h2>
<p class="card-text fw-bolder">TEST</p>
</div>
</div>
<div
class="offcanvas offcanvas-bottom"
tabindex="-1"
id="offcanvasBottom"
>
<div class="offcanvas-header">
<button
type="button"
class="btn-close text-reset"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<div class="offcanvas-body">
BODY
</div>
</div>
Im trying to get a list of ID values for each group of parent divs. Using draglua a site is dragged into a group, then I would like to create a dictionary string that I can submit to a server side form and process it.
That dictionary string should contain a list of all the ids within each group, my script below currently works for one group (A) but not all groups, im assuming there is a better approach to get all groups in one?
So after a user has dragged sites into groups I would like to be able to click apply groups then the the value of site_groups is set to
[{group: a, ids: [3,4,5]},{group: b, ids: [31,4]},{group: c, ids: [8]},..etc]
I can then submit this and process it server side, is anyone able to assist?
Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.css"
integrity="sha256-iVhQxXOykHeL03K08zkxBGxDCLCuzRGGiTYf2FL6mLY=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style type="text/css">
.drag-space {
width: 100%;
min-height: 20px;
}
</style>
</head>
<body>
<div class="container-scroller">
<div class="container-fluid page-body-wrapper">
<!-- partial -->
<div class="main-panel">
<div class="content-wrapper">
<div class="row">
<!-- /.card -->
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<div class="d-flex flex-row justify-content-between">
<div><i class="fa fa-layer-group fa-fw"></i> Change Groups</div>
<div class="text-muted mb-1 small">
<a class="btn btn-sm btn-outline-primary" id="apply-tab" href="javascript:post();">Apply group changes</a>
</div>
</div>
</div>
<div class="card-body">
<form id="sitegroups_form" method="post">
<input type="text" id="site_groups" />
</form>
<div class="row">
<div class="col-3">
<h4>A - <small class="text-muted">1 Sites</small></h4>
<div id="drag-A" class="drag-space">
<div id="7">
Aberdeen
</div>
</div>
</div>
<div class="col-3">
<h4>B - <small class="text-muted">0 Sites</small></h4>
<div id="drag-B" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>C - <small class="text-muted">0 Sites</small></h4>
<div id="drag-C" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>D - <small class="text-muted">0 Sites</small></h4>
<div id="drag-D" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>E - <small class="text-muted">0 Sites</small></h4>
<div id="drag-E" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>F - <small class="text-muted">0 Sites</small></h4>
<div id="drag-F" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>G - <small class="text-muted">0 Sites</small></h4>
<div id="drag-G" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>H - <small class="text-muted">0 Sites</small></h4>
<div id="drag-H" class="drag-space">
</div>
</div>
<div class="col-3">
<h4>I - <small class="text-muted">0 Sites</small></h4>
<div id="drag-I" class="drag-space">
</div>
</div>
</div>
</div>
</div>
<!-- /.card-body -->
<div class="card">
<div class="card-header">
<i class="fa fa-layer-group fa-fw"></i> Sites not in change Groups
</div>
<div class="card-body">
<div class="row" id="drag-source">
<div id="8" class="col-3">
London
</div>
<div id="9" class="col-3">
New York
</div>
<div id="10" class="col-3">
Manchester
</div>
<div id="11" class="col-3">
Liverpool
</div>
<div id="12" class="col-3">
Edinburgh
</div>
<div id="13" class="col-3">
Tokyo
</div>
</div>
</div>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
</div>
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.js"
integrity="sha256-rVf3H94DblhP4Z6wLSa2mpMwRS5qePBWykE6QWPOaO0=" crossorigin="anonymous"></script>
<script type="text/javascript">
// Begin Dragula JS
var drake = dragula([document.querySelector('#drag-source'), document.querySelector('#drag-A'), document.querySelector('#drag-B'), document.querySelector('#drag-C'), document.querySelector('#drag-D'), document.querySelector('#drag-E'), document.querySelector('#drag-F'), document.querySelector('#drag-G'), document.querySelector('#drag-H'), document.querySelector('#drag-I'),]);
// when item dropped
drake.on('drag', function (el,target,source,sibling) {
el.classList.remove('col-3');
})
// get the items within a group
$("#apply-tab").click(function(){
var a_children = document.querySelectorAll("#drag-A div");
var a_ids = []
for (var i = 0; i<a_children.length; i++) {
a_ids.push(a_children[i].id)
}
var group_a_ids = '{group: a, ids: ['+ a_ids +']}';
$("#site_groups").val(group_a_ids);
});
</script>
<!-- End custom js for this page-->
</body>
</html>
To anwser your question regarding the need to account for all groups at once (without taking care of the drag and drop part), you can take benefit of the HTML class drag-space, as follows:
$("#apply-tab").click(function(){
var group_ids = {};
$(".drag-space").each(function() { // Loop over all items of class 'drag-space'
var id = this.id;
var key = id.replace(/drag-/, "").toLowerCase();
var children = document.querySelectorAll("#" + id + " div");
var ids = []
for (var i = 0; i<children.length; i++) {
ids.push(children[i].id)
}
group_ids[key] = ids;
});
$("#site_groups").val(JSON.stringify(group_ids));
});
On the same page, I have about a dozen images and on each image at the click you open a modal. I made a script for each modal, how can I make a single script for all the modal?
<!-- 1 Modal-->
<div class="gallery_product col-lg-3 col-md-3 col-sm-3 col-xs-3 filter mercoledì ombra">
<img onclick="myLele(this)" src="https://www.festadellamusicact.it/wp-content/uploads/leletronika.jpg" id="myImg" class="img-responsive"></div>
<div id="lele" class="modal">
<div class="modal-content" id="img11">
<span onclick="undici.style.display = 'none'" class="close">×</span>
<img src="https://www.festadellamusicact.it/wp-content/uploads/33407528_10216104175664929_3838668853781463040_n.jpg" class="img-responsive img-modale"></div>
</div>
<!-- 2 Modal-->
<div class="gallery_product col-lg-3 col-md-3 col-sm-3 col-xs-3 filter mercoledì ombra">
<img onclick="myJessy(this)" src="https://www.festadellamusicact.it/wp-content/uploads/jessy.jpg" id="myImg" class="img-responsive"></div>
<div id="jessy" class="modal">
<div class="modal-content" id="img10">
<span onclick="dieci.style.display = 'none'" class="close">×</span>
<img src="https://www.festadellamusicact.it/wp-content/uploads/29543_497687346938913_28179288_n.jpg" class="img-responsive img-modale">
<script>
var undici = document.getElementById('lele');
var lele = document.getElementById("img11");
function myLele(el) {
var ImgSrc = el.src;
undici.style.display = "block";
lele.src = ImgSrc;
}
window.onclick = function (event) {
if (event.target == undici) {
undici.style.display = "none";
}
}
</script>
<script>
var dieci = document.getElementById('jessy');
var jessy = document.getElementById("img10");
function myJessy(el) {
var ImgSrc = el.src;
dieci.style.display = "block";
jessy.src = ImgSrc;
}
window.onclick = function (event) {
if (event.target == dieci) {
dieci.style.display = "none";
}
}
</script>
I tried different ways, but not on multiple modals on the same page does not work.
Can I do a foreach () loop?
IDs should be unique for each element. Change the IDs of both your images from myImg to something unique like myImg1 and myImg2 respectively.
Also, you don't need to write a custom function for toggling your modals. Just use the in-build modals in Bootstrap by adding data-toggle="modal" data-target="#lele" to your modal 1 image and data-toggle="modal" data-target="#jessy" to your modal 2 image like this:
<img src="/leletronika.jpg" id="myImg1" class="img-responsive" data-toggle="modal" data-target="#lele">
<img src="/jessy.jpg" id="myImg2" class="img-responsive" data-toggle="modal" data-target="#jessy">
You also need to add the data-dismiss attribute to your close button like this:
<span class="close" data-dismiss="modal">×</span>
Check and run the following Code Snippet for a practical exmaple of what I have described above:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- 1 Modal-->
<div class="gallery_product col-lg-3 col-md-3 col-sm-3 col-xs-3 filter mercoledì ombra">
<img src="https://www.festadellamusicact.it/wp-content/uploads/leletronika.jpg" id="myImg1" class="img-responsive" data-toggle="modal" data-target="#lele">
</div>
<div id="lele" class="modal">
<div class="modal-content" id="img11">
<span class="close" data-dismiss="modal">×</span>
<img src="https://www.festadellamusicact.it/wp-content/uploads/33407528_10216104175664929_3838668853781463040_n.jpg" class="img-responsive img-modale">
</div>
</div>
<!-- 2 Modal-->
<div class="gallery_product col-lg-3 col-md-3 col-sm-3 col-xs-3 filter mercoledì ombra">
<img src="https://www.festadellamusicact.it/wp-content/uploads/jessy.jpg" id="myImg2" class="img-responsive" data-toggle="modal" data-target="#jessy">
</div>
<div id="jessy" class="modal">
<div class="modal-content" id="img10">
<span class="close" data-dismiss="modal">×</span>
<img src="https://www.festadellamusicact.it/wp-content/uploads/29543_497687346938913_28179288_n.jpg" class="img-responsive img-modale">
</div>
I want to make modal appear when I click on sign up. But the problem is that The modal is not appearing although I have checked the code many times. The modal code when just used without the other content works just fine. The source code is from W3Schools. I am sorry in advance for the way this code occurs, but How stackoverflow text editor works is beyond me. I am new to this,so please don't fry me if it's an idiotic mistake
<!DOCTYPE html>
<html manifest="demo.htm.appcache">
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image.ico" href="Airbnb logo.ico">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-
bootstrap/3.3.5/js/bootstrap.js"></script>
<style>
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
</style>
</head>
<body>
<div class="container">
<div class="navbar">
<ul class ="nav nav-pills">
<li>Name</li>
<li class="divider-vertical"></li>
<li>Browse</li>
<li class="pull-right active">Homepage</li>
<li class="pull-right">
Sign Up <!-- Modal is declared here -->
</li>
<li class="pull-right"><a href="Log%20in.htm" >Log In</a></li>
<li class="pull-right"><a href="Help.htm" >Help</a></li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Find a place to stay.</h1>
<p>Rent from people in over 34,000 cities and 192 countries.</p>
Learn More
</div>
</div>
<div class ="neighborhood-guides">
<h2>Neighbourhood Guides</h2>
<p>Not sure where to stay? We've created neighbourood guides for cities all around the world</p>
<div class="row">
<div class ="col-md-4">
<div class ="thumbnail">
<div class="zoom">
<img src ="http://goo.gl/0sX3jq" class = "growImage" width="100px">
</div>
</div>
<div class ="thumbnail">
<div class="zoom">
<img src ="http://goo.gl/an2HXY" class="growImage">
</div>
</div>
</div>
<div class ="col-md-4">
<div class ="thumbnail">
<div class="zoom">
<img src = "http://goo.gl/Av1pac" class="growImage">
</div>
</div>
<div class ="thumbnail">
<div class="zoom">
<img src ="http://goo.gl/vw43v1" class="growImage">
</div>
</div>
</div>
<div class ="col-md-4">
<div class ="thumbnail">
<div class="zoom">
<img src ="http://goo.gl/0Kd7UO">
</div>
</div>
</div>
</div>
</div>
<div class="learn-more">
<div class="container">
<div class ="row">
<div class= "col-md-4">
<h3>Travel</h3>
<p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
<p>See how to travel on Airbnb</p>
</div>
<div class="col-md-4">
<h3>Host</h3>
<p>Renting out your unused space could pay your bills or fund your next vacation.</p>
<p>Learn more about hosting</p>
</div>
<div class ="col-md-4">
<h3>Trust and Safety</h3>
<p>From Verified ID to our worldwide customer support team, we've got your back.</p>
<p>Learn about trust at Airbnb</p>
</div>
</div>
</div>
</div>
<div class ="container">
<!-- Modal -->
<div class="modal fade" id="myModal" 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">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.zoom').mouseover(function(){
//moving the div left a bit is completely optional
//but should have the effect of growing the image from the middle.
$(this).stop().animate({"width": "110%","left":"0px","top":"0px"}, 400,'swing');
}).mouseout(function(){
$(this).stop().animate({"width": "95%","left":"15px","top":"15px"}, 200,'swing');
});;
});
</script>
</body>
</html>
Bootstrap 3.x requires jQuery 1.9.x or higher.
Your reference points to jQuery 1.3.2, which will not work with Bootstrap.
starting over...
I used Chrome to test it, and could not make it work with a link or a button. But when I checked the console I see that there is a javascript error:
Failed to load resource: net::ERR_FILE_NOT_FOUND bootstrap.js:15
Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1
or higher
I got it to work by upgrading to jquery 1.10.2
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>