I am using the standard example for off canvas navigation in foundation like this...
<body>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<!-- Close button -->
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
<!-- Menu -->
<ul class="vertical menu">
<li>Foundation</li>
<li>Dot</li>
<li>ZURB</li>
<li>Com</li>
<li>Slash</li>
<li>Sites</li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<!-- Your page content lives here -->
</div>
</body>
I am looking for a way to trigger a jquery CSS function after the animation has finished.
I have this so far..
$( document ).on( "close.offcanvas", function( e ){
//$('.pagination').css('display','block');
});
But this triggers when the open button is clicked, does anybody know if the are any callbacks or similar that I can use so that the CSS is applied only after the off canvas animation has finished?
Foundation includes an 'opened' and 'closed' event for this purpose: https://foundation.zurb.com/sites/docs/off-canvas.html#js-events
In the code example below I output a message to the console when the menu is closed.
$(document).foundation()
$('#offCanvas').on('closed.zf.offcanvas', function(event) {
//$('.pagination').css('display','block');
console.log("Off-canvas menu was closed.")
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/js/foundation.min.js"></script>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<!-- Menu -->
<ul class="vertical menu">
<li>Foundation</li>
<li>Dot</li>
<li>ZURB</li>
<li>Com</li>
<li>Slash</li>
<li>Sites</li>
</ul>
<!-- Close button -->
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<!-- Your page content lives here -->
<button type="button" class="button" data-toggle="offCanvas">Open off-canvas</button>
</div>
Related
Actually I am trying to get this code to run under bootstrap 5.0.0 alpha, with tthe example given in the bootstrap 5 documentation. As it didn't work I tried it with the current bootstrap 4 version, and one of the examples in the bootstrap 4 documentation. Both times I am hitting the same error message:
Uncaught TypeError: myModal.show is not a function at window.onload (cookieModal.php:180)
I put the example from the boostrap 4 site in a basic bootstrap code and added the script with the window.onload function to trigger the modal after the site has been loaded:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Bootstrap 4 Starter Template</title>
</head>
<body>
<h1>Hello</h1>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<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>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap 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 type="text/javascript">
window.onload = function(){
var myModal = document.getElementById('exampleModal');
myModal.show();
}
</script>
</body>
</html>
The error is the same in Bootstrap 5 alpha as in Bootstrap 4. In both cases when you press the button at least the modal appears.
As boosttrap 5 has abandonned jQuery I am not interested in a jQuery solution. I would prefer to launch the modal with window.onload.
I had inserted an alert after the var myModal declaration and it shows that myModal is a DIV element. So at least myModal seems to find the id for exampleModal.
Thank you in advance
Gunther
After another week of googling I found the answer in Bootstrap V5 manually call a modal myModal.show() not working (vanilla javascript)
window.onload = function(){
var myModal = new bootstrap.Modal(document.getElementById('exampleModal'));
myModal.show();
}
works !!!
I am using Bootstrap4 and in my navbar i have a button to open a modal.I have added jquery,popper and bootstrap js in correct order as mentioned in bootstrap website .I have to click this button 5-6 times continuously to open the modal
<asp:Button ID="btnUserDetails" runat="server" Text="USER DETAILS" data-toggle="modal" data-target="#userDetails" />
my modal is
<div class="modal fade" id="userDetails" tabindex="-1" role="dialog" >
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<asp:Label ID="lblLoginID" runat="server"></asp:Label><br />
<asp:Label ID="lblIPAddress" runat="server" ></asp:Label><br />
<asp:Label ID="lblSystemName" runat="server" ></asp:Label><br />
<asp:Label ID="lblVersionInfo" runat="server" ></asp:Label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I tried using javascript to open the modal by using this code
<asp:Button ID="btnUserDetails" runat="server" Text="USER DETAILS" data-toggle="modal" data-target="#userDetails" OnClientClick="return openmodal();return false;" />
<script type="text/javascript">
function openmodal() {
$('#userDetails').modal('show');
}
</script>
However this does not work .My javascript function is being called as i put an alert message and tested .There is something weird happening with vertical scroll bar though on click of the button ,it shows up for sometime on click of button and vanishes i think once button click event ends .
The issue is with "fade" in the modal
<div class="modal fade" id="userDetails" tabindex="-1" role="dialog" >
i removed fade and used "show" and the modal is working
<div class="modal show" id="userDetails" tabindex="-1" role="dialog" >
also i added a javascript function for the button that triggers the model
<script>
$( '#btnUserDetails').click( function(){
$( '#userDetails').modal('show');
});
</script>
Please anyone can help me, How can animate css styles can be use to animate while bootstrap modal opens and closes?
As Modal Opens it should be open with fadeIn effect and while closing it should with fadeOut effect.
I wanted to use animate.css css stylesheet for animate modal poup open and close.
It should add class fadeIn while opening Model and while closing the modal it should be adding class fadeOut. ( Class .fadeIn & .fadeOut are from aniamte.css stylesheet)
$('.modal').on('show.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog fadeIn animated');
})
$('.modal').on('hide.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog fadeOut animated');
})
This is I wanted.
Add fade to class attribute of your modal markup:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal with animation</h4>
</div>
<div class="modal-body">
Close modal to see <i>fade-out</i> effect.
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal with <i>fade-in</i> effect
</button>
Remove the .fade class from your modal markup to simply appear one. See Remove animation section for details.
$('#modelDivId').on('show.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog flipInX animated');
})
$('#modelDivId').on('hide.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog flipOutX animated');
})
routes.js
Router.route('/', function () {
this.render('Home');
});
Router.route('wall', function () {
this.render('Wall');
});
landing.html
<template name="home">
...
</template>
drawingApp.html
<body>
{{> wall}}
</body>
<template name="wall">
...
{{> canvas}}
...
</template>
<template name="canvas">
...
</template>
drawingApp.js
...
Template.wall.events({
...
If I include <body> {{> wall}} </body>, the landing page renders below the app. If I delete <body> {{> wall}} </body>, landing page renders properly, but when button is clicked to enter, it opens a non-functioning app. (Edited since first posted trying many things, but core issue remains the same). Any ideas? Thank you.
You need to remove calling wall template from body tags.
So your wall.html will be:
<head>
<title>LKG Canvas</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://files.codepedia.info/uploads/iScripts/html2canvas.js"></script>
</head>
<body>
</body>
<template name="wall">
<!-- <h1>{{title}}</h1> -->
<div id="settings">
<div>
<button class='eraser' button id="btn btn-link"><span class="glyphicon glyphicon-erase"></span></button>
<button class='clear' button id="btn btn-link"><span class="glyphicon glyphicon-remove"></span></button>
...
</div>
<div id="settings">
<button class='thinnest'>1</button>
...
</div>
<div id="settings">
<button class='shade'>3%</button>
</div>
{{> canvas}}
</template>
<template name="canvas">
<div class="centerize">
<div id="canvas" style="background-color: #333; width: 1250px; height: 550px;"></div>
<br>
<input id="btn-Preview-Image" type="button" value="Preview"/>
<a id="btn-Convert-Html2Image" href="#">Download</a>
<div id="previewImage"></div>
</div>
</template>
How about this approach:
router.js
Router.route ( '/', {
name:'home',
layoutTemplate:'index',
});
Router.route('/wall', {
name:'wall',
layoutTemplate:'index',
});
home.html is as is, no changes:
<template name="home">
<div class="container">
<div class="jumbotron">
<h1>Heading</h1>
<p>Some text here.</p>
</div>
<div>
<div class="centerize">
<a class="btn btn-primary btn-lg" href="wall" role="button">Draw</a></div>
</div>
</div>
</template>
wall.html, removed the <body> stuff
<template name="wall">
<!-- <h1>{{title}}</h1> -->
<div id="settings">
<div>
<button class='eraser' button id="btn btn-link"><span class="glyphicon glyphicon-erase"></span></button>
<button class='clear' button id="btn btn-link"><span class="glyphicon glyphicon-remove"></span></button>
...
</div>
<div id="settings">
<button class='thinnest'>1</button>
...
</div>
<div id="settings">
<button class='shade'>3%</button>
</div>
{{> canvas}}
</template>
<template name="canvas">
<div class="centerize">
<div id="canvas" style="background-color: #333; width: 1250px; height: 550px;"></div>
<br>
<input id="btn-Preview-Image" type="button" value="Preview"/>
<a id="btn-Convert-Html2Image" href="#">Download</a>
<div id="previewImage"></div>
</div>
</template>
index.html
<template name="index">
{{> yield}}
</template>
Index.html basically encompasses the other routes that will render in the yield region.
HTML:
<!-- Button trigger modal -->
<a href="#" data-toggle="modal" data-target="#myModal" class="quickview">
OPEN MODAL
</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">BX Slider</h4>
</div>
<div class="modal-body">
<ul class="bxslider">
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" /></li>
</ul>
<div id="bx-pager">
<a data-slide-index="0" href=""><img src="http://bxslider.com/images/thumbs/tree_root.jpg" /></a>
<a data-slide-index="1" href=""><img src="http://bxslider.com/images/thumbs/houses.jpg" /></a>
<a data-slide-index="2" href=""><img src="http://bxslider.com/images/thumbs/hill_fence.jpg" /></a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JS:
function quickView() {
var slider = $('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
controls: false
});
slider.destroySlider();
//$('#myModal').modal('show');
slider.reloadSlider();
}
$(".quickview").on("click", quickView);
I have a Bootstrap modal which I'm injecting dynamic image galleries into. So fx. I have 10 links on a page, each link is containing unique data-attributes with image URLs. I am then sending these URLs into my click event, so I can use them with BXslider, but it doesn't seem to be working.
I'm reloading the BXslider within my click event, but the "mainimage" is not showing.
However, if I move the code out of the click event, it seems like it's working.
Any suggestions here?
Codepen:
http://codepen.io/marting/pen/dYNabj?editors=101
I changed your code to this, and it works like a charm
JS:
function quickView() {
var slider = $('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
controls: false
});
setTimeout(function() {
slider.reloadSlider();}, 200);
}
$(".quickview").on("click", quickView);
See it works here: http://codepen.io/anon/pen/JYgxOE?editors=101