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>
Related
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.
I am new to angular UI and I am using a popup (popover) as a complex menu. But I could not find a way to insert html content like buttons, texts, images into the popover. Here is my html code
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.2.js"></script>
<script src="js/example.js"></script>
<link href="//https:netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<br><br><br><br>
<div ng-controller="PopoverDemoCtrl">
<button popover-placement="bottom" Popover-animation="true" popover="I have a title!" popover-title="The title." class="btn btn-default">Click me</button>
</div>
</body>
</html>
And the example.js has the following code which I found a little bit confusing.
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope) {
$scope.dynamicPopover = {
content: 'Hello, World!',
templateUrl: 'myPopoverTemplate.html',
title: 'Title'
};
});
Please let me know how to add html contents and also describe the js function used.
The easiest way to use pop-over is popover-template directive.
<script id="myPopoverTemplate.html" type="text/ng-template">
//Insert detail here
<div><button>Test</button></div>
<hr />
</script>
And the html go like this :
<button popover-placement="bottom" Popover-animation="true" popover="I have a title!" popover-title="The title." popover-template="myPopoverTemplate.html" class="btn btn-default">Click me</button>
This is my first time answer, Sorry for struggle.
PS. Im not sure too, i didn't go on test run.
I have created a VERY simple program on a VERY simple html file. I wish to simply find out how to link javascript to html and css. Here follows my example code:
(index.html)
<head>
<title>JavaScript</title>
<link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div class="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT"/>
</div>
<button class="show_btn">Show</button>
<button class="hide_btn">Hide</button>
<script src="script.js"></script>
</body>
JS:
$(document).ready(function(){
$(".hide_btn").click(function(){
$("p").slideUp();
});
$(".show_btn").click(function(){
$("p").slideDown();
});
});
CSS:
.picture { display: none; }
Now with this code, I am attempting to use two buttons to show and hide a picture of a fish...I can't seem to get it to work however, and I believe it has something to do with how I am linking my files. Please Help!
Based off of your comment in your question it would appear that you are using jQuery but you do not have jQuery as part of your source code.
You will need to include the jQuery source above script.js.
Here is an example of how it should look like using Google CDN for the jQuery library:
<head>
<title>JavaScript</title>
<link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div class="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT"/>
</div>
<button class="show_btn">Show</button>
<button class="hide_btn">Hide</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</body>
try this in javascript
<html>
<head>
</head>
<body>
<div class="picture" id="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT" />
</div>
<button class="show_btn" onclick="show();">Show</button>
<button class="hide_btn" onclick="hide();">Hide</button>
<script type="text/javascript" >
function show(){
var imgdiv = document.getElementById("picture");
imgdiv.style.display="block";
}
function hide(){
var imgdiv = document.getElementById("picture");
imgdiv.style.display="none";
}
</script>
</body>
</html>
I would definitely use jQuery for something like this. Here's a Plunker that shows how you can accomplish this.
http://embed.plnkr.co/DwTwNuF162rfgcQOdT7u/preview
<html>
<head>
<script data-require="jquery#*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="picture" id="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT" />
</div>
<button class="show_btn" onclick="show()">Show</button>
<button class="hide_btn" onclick="hide()">Hide</button>
</body>
<script>
function show() {
$('#picture').show();
}
function hide() {
$('#picture').hide();
}
</script>
</html>
If you are using jquery you also need to link the jquery source above your .js link,
here is the google cdn (so you dont have to download it):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
First things first:
Include this in your <head>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
If you're on Chrome try using the developer tools; right click on the page then inspect element. On the developer tools pane, select the CONSOLE tab which logs all your errors in your javascript
And try this in your script:
$(document).ready(function() {
$(".show_btn").click(function() {
$(".picture").css('display', 'block');
});
$(".hide_btn").click(function() {
$(".picture").css('display', 'none');
});
});
Also I've noticed that you have div.picture display set to "none".
All that you need to do is the following
<script type="text/javascript"></script>
You can write javascript inside the script tags. (if you want to add javascript in HTML
the following is to link it to another file.
<script src="path to other file" > </script>
I want to create simple custom popup using jquery. My html code is as follows.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Thiws should be custom popup");
});
});
</script>
</head>
<body>
<button id="btn1">Show Text</button>
</body>
</html>
On clicking button it should open a form in popup asking username, email address and also it should have submit button
For reference what i want to ask
http://www.c-sharpcorner.com/UploadFile/736ca4/custom-popup-window-using-jquery/
You can use the function and css I wrote here:
https://jsfiddle.net/mm7b7t5t/
Opening a hello world popup:
var hello = new popup([{text:"Close"}], "Hello!", "<p>Hello World</p>");
hello.open();
You can make popups draggable, add multiple buttons etc etc
jQuery dialog is a mess in my opinion, I prefer my own popup code ^^
Just create a html file and copy/paste that code.
<html>
<head>
<title></title>
</head>
<body>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#OpenDialog").click(function () {
$("#dialog").dialog({modal: true, height: 400, width: 400 });
});
});
</script>
<a id="OpenDialog" href="#">Click here to open dialog</a>
<div id="dialog" title="Dialog Title">
<p>test</p>
</div>
</body>
</html>
When I try to open window from a another window it not found.
jQuery-Windows-Engine-Plugin
Thanks!
<html>
<head>
<title>Test</title>
<link type="text/css" rel="stylesheet" href="jquery.windows-engine.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.windows-engine.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#menu").newWindow({
windowTitle:"menu",
content: "<ahref='#' id='example2' >Example 2</a> Here",
width:160,height:230,posx:10,posy:120,
});
$("#example2").newWindow({
windowTitle:"Example1",
content: "example2",
posx:200,posy:100,
resizeable:false, maximizeButton:false,
});
});
</script>
</head>
<body>
<div>
<ahref="#" id="menu" >menu</a><br/>
<ahref="#" id="example2" >Example 2</a><br/>
</div>
</body>
</html>
For anyone using this library (js.windows-engine), the main issue here was that the object isn't created on divs, but on the original window itself. The user needs to wrap this in a click in this case. Example:
$("#menu").click(function(){
$.newWindow({
windowTitle:"menu",
content: $("#example2").html(),
width:160,
height:230,
posx:10,
posy:120,
});
});
Here is a JS Fiddle with the completed solution