I am trying to use a plugin for dynamic pagination.
The plugin is-
Bootpag - Dynamic Pagination
In the Home page of the plugin, I found an example, and I tried to use that as an example and what I have done is like this-
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div id="content">Dynamic Content goes here</div>
<div id="page-selection">Pagination goes here</div>
<script>
// init bootpag
$('#page-selection').bootpag({
total: 10
}).on("page", function(event, /* page number here */ num){
$("#content").html(num); // Changing div content to dynamic content
});
</script>
</body>
</html>
But it is not working.
Can anyone please help?
Thanks in advance for helping.
I have solved it by this way-
$('#show_paginator').bootpag({
total: 23,
page: 3,
maxVisible: 10
}).on('page', function(event, num)
{
$("#dynamic_content").html("Page " + num); // or some ajax content loading...
});
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://botmonster.com/jquery-bootpag/jquery.bootpag.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div id="dynamic_content">Pagination goes here</div>
<div id="show_paginator"></div>
More customised version-
$('#show_paginator').bootpag({
total: 53,
page: 2,
maxVisible: 5,
leaps: true,
firstLastUse: true,
first: '←',
last: '→',
wrapClass: 'pagination',
activeClass: 'active',
disabledClass: 'disabled',
nextClass: 'next',
prevClass: 'prev',
lastClass: 'last',
firstClass: 'first'
}).on('page', function(event, num)
{
$("#dynamic_content").html("Page " + num); // or some ajax content loading...
});
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://botmonster.com/jquery-bootpag/jquery.bootpag.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div id="dynamic_content">Pagination goes here</div>
<div id="show_paginator"></div>
Even more customization can be done by this options-
Warning
Here I am using a CDN (http://botmonster.com/jquery-bootpag/jquery.bootpag.js) for showing content. But it is not recommended.
Hardly recommendation is to download this file and put it locally.
Because there is no official CDN for bootpeg.
Even More
If want to update paginator at run time, call the paginator like this-
$('#show_paginator').bootpag({total: 55});
Even more, can be found from here.
I think u have your complete answer.
Related
Any ideas on why the following Hopscotch doesn't the following work? We want a user to be able to click on a button to start the tour.
Many Thanks!
<html>
<head>
<title>My First Hopscotch Tour</title>
<link rel="stylesheet" href="css/hopscotch.css">
</head>
<body>
<h1 id="header">My First Hopscotch Tour</h1>
<div id="content">
<p>Content goes here...</p>
</div>
<button id="myBtn">Click Me</button>
<script>
var tour = {
id: "hello-hopscotch",
steps: [
{
title: "My Header",
content: "This is the header of my page.",
target: "header",
placement: "bottom"
},
]
};
$("#myBtn").click(function(){
hopscotch.startTour(tour);
});
</script>
<script src="js/hopscotch.js"></script>
</body>
</html>
Add Jquery Script:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="js/hopscotch.js"></script>
See Demo Here: http://codepen.io/ihemant360/pen/OXmqXR
You should include the jquery library in the head section of your file.
ie:
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
I've already looked over several posts on stack overflow asking virtually the exact same question yet none of what I found on those questions has helped. I'm very new to JQuery and Bootstrap so maybe I'm just missing some really simple thing.
I want to be able to to change the title of the tooltip on different elements after the first initialization(ideally multiple times after initialization.) A simplified version of what I'm dealing with:
<canvas id="bag0" data-toggle="tooltip" title="test">
</canvas>
...
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
$(document).ready(function(){
$('#bag0').data('tooltip',false)
.tooltip({ title: 'new text'});
$('[data-toggle="tooltip"]').tooltip();
});
This method to change the title was given from posting: How to overwrite twitter bootstrap tooltip?
The tooltip always reads "test." I've tinkered with a few others things to no avail. I suspect I'm overlooking something obvious.
$(element).attr('title', 'NEW_TITLE').tooltip('fixTitle').tooltip('show');
Above code might help you.
$.tooltip(string) calls any function within the Tooltip class. And if you look at Tooltip.fixTitle, it fetches the data-original-title attribute and replaces the title value with it.
You can use the element id or class to make it more specific.
Help :)
Try this
$(element).tooltip().attr('data-original-title', "new title");
Source: github bootstrap issue
Bootstrap 4
$('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show')
$('#topic_1').tooltip({title: 'Hello'}).tooltip('show');
setTimeout( function() {
$('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show');
}, 5000);
#topic_1 {
border: 1px solid red;
margin: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<div id="topic_1">Topic 1</div>
Change Bootstrap 4 Tooltip title
$(document).ready(function() {
// initilizing Tooltip
$('[data-toggle="tooltip"]').tooltip();
// Get the Tooltip
let btn_tooltip = $('#my-btn');
// Change Tooltip Text on mouse enter
btn_tooltip.mouseenter(function () {
btn_tooltip.attr('title', 'Default Tooltip').tooltip('dispose');
btn_tooltip.tooltip('show');
});
// Update Tooltip Text on click
btn_tooltip.click(function () {
btn_tooltip.attr('title', 'Modified Tooltip').tooltip('dispose');
btn_tooltip.tooltip('show');
});
});
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<p>Click the button:</p>
<button id="my-btn" type="button" class="btn btn-primary" data-toggle="tooltip" title="Default tooltip">Click Me</button>
</div>
</body>
</html>
This might help
$('[data-toggle="tooltip"]').attr("title","NEW TEXT");
If you want to for a particular element, say a <div>
$('div[data-toggle="tooltip"]').attr("title","NEW TEXT");
Try following,
$(document).ready(function(){
$('#bag0').attr('title', 'new text')
.tooltip('destroy') // if you are using BS4 use .tooltip('dispose')
.tooltip({ title: 'new text'});
$('[data-toggle="tooltip"]').tooltip('show');
});
<canvas id="bag0" data-toggle="tooltip" title="test">
</canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
I have a solution for similiar case. I change the title in tooltip dynamicaly with ajax.
first just enable the tooltips:
$('[data-toggle="tooltip"]').tooltip()
Then change the title attribute, then re init the tooltip
$("#foo").attr('title','TheNewTitle');
$('[data-toggle="tooltip"]').tooltip('dispose');
$('[data-toggle="tooltip"]').tooltip()
I may be a bit too late but my solution to this was to change the data-original-title
$('.sample').attr('data-original-title': 'new title');
This changes the bootstrap tool tip title automatically.
Want to make dynamic bootstrap pagination with displaying different content on clicking Paginations.
Try this, I hope this will work for you
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="main" style="text-align:center;">
<h2 style="text-align:center;">Pagination with Div Structur</h2>
<div class='blk content4'>
<!--// show here ur div structure-->
Pagination content here.
</div>
<div class="pagi"></div>
</div>
<script type="text/javascript">
$('.pagi').bootpag({
total: 27,
page: 1,
maxVisible: 5,
leaps: true,
firstLastUse: true,
first: '<span aria-hidden="true">←</span>',
last: '<span aria-hidden="true">→</span>',
wrapClass: 'pagination',
activeClass: 'active',
disabledClass: 'disabled',
nextClass: 'next',
prevClass: 'prev',
lastClass: 'last',
firstClass: 'first'
}).on("page", function (event, num) {
$(".content4").html("Page " + num); // or some ajax content loading...
}).find('.pagination');
</script>
</div>
</body>
</html>
I'm using Foundation Joyride and every time I load the webpage the tour starts, but how do I only start the tour for the first time the webpage is loaded?
My settings are ...
$(window).load(function() {
//Foundation Joyride (Tour)
$("#tour").joyride({
'cookieMonster': true,
'cookieName': 'JoyRide',
'cookieDomain': 'mydomain.co.uk/',
'postRideCallback' : function () {
$(this).joyride('destroy');
},
cookieMonster: false
});
});
Got it working at last and it turned out to be the order in which the header files were declared.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="foundation.css">
<script type="text/javascript" src="foundation.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="jquery.foundation.joyride.js"></script>
<script>
$(window).load(function() {
$("#tour").joyride({
cookieMonster: true,
cookieName: 'JoyRide'
});
});
</script>
</head>
<body>
<ol id="tour">
<li><p>This is the tour.</p></li>
</ol>
</body>
</html>
You have to use the cookieMonster option se to true, with your domain or false in cookieDomain.
Also remove the cookieMonster: false outside of the parenthesis.
To let joyride use cookies you must include the jQuery.cookie library in your page (https://github.com/carhartl/jquery-cookie)
Here is a sample:
$("#tour").joyride({
cookieMonster: true,
cookieName: 'JoyRide',
cookieDomain: false
});
In this way you'll see the tour only the first time you visit the page (or when you clear the cookies).
I am trying to use Fancybox in my asp.net mvc view on page laod and using this example 6 at http://fancybox.net/blog
My html is:
<head>
<title>Home Page</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
</head>
<body>
<div class="page">
<div id="main">
<link rel="stylesheet" type="text/css" href="../../Content/FancyBox/jquery.fancybox.css" />
<script type="text/javascript" src="../../Content/FancyBox/jquery.fancybox.js"></script>
<script>
$(document).ready(function () {
$("#dialog-user-login").trigger('click');
});
</script>
<div id="dialog-user-login">
I am here
</div>
</div>
</div>
</body>
but fancybox is not called on page load. Is there anything missing in my code ?
[Edited]
tried this but didnt work as well:
$(document).ready(function () {
$("#dialog-user-login").fancybox({
'showCloseButton' : false,
'titlePosition' : 'inside',
'titleFormat' : formatTitle
});
$("#dialog-user-login").trigger('click');
});
when using a jquery plugin you should call it on the element you want ..
here is how you do it for fancy box
$(document).ready(function () {
$("#dialog-user-login").fancybox({
'showCloseButton' : false,
'titlePosition' : 'inside',
'titleFormat' : formatTitle
});
$("#dialog-user-login").trigger('click');
});
as much as i wanted to post this as a comment...
anyway, to DotnetSparrow, I've just recently made a site myself and implemented fancybox, and it works fine.
On ex. 5 & 6, I tried it on my page and it works fine too.
your html lacks a lot, as others have commented, the blog you based it from are snippets, and not the whole set of instruction...
follow the following:
1.Follow the first paragraph of this instruction first: http://fancyapps.com/fancybox/#instructions
2.In HTML
<a id="urLink" title="Login" href="#dialog-user-login">Login Here</a>
<div id="dialog-user-login" style="display:none">
I am here
</div>
3.In javascript
<script type="text/javascript">
$(document).ready(function() {
//attach fancybox on ur <a> tag
$("#urLink").fancybox({
'scrolling' : 'no',
'titleShow' : false,
'onClosed' : function() { $("#login_error").hide(); }
});
//if you want to show the login in fancybox on load
$("#urLink").trigger('click');
});
</script>
a little late but i hope this answers any similar question:
$(function() {
$.fancybox.open([{
//o $("#myDiv").html() aunque este ultimo muestra los datos en bruto
content: $("#myDiv").text()
}]);
});