I don't understand why the request for button does not performed. I must to change the direction for mobile screens, but until it's now work.
$( "button.btn-tooltip" ).attr( "data-placement", "left" );
body {
padding: 10px;
}
button {
width: 100px;
height: 30px; margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<button type="button" class="btn btn-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip"></button>
You're probably looking at the default tooltip, rather than Bootstrap's tooltip. The regular toolbar defaults to the bottom-right, which could be giving you confusion with the data-placement of right:
$("button.btn-tooltip").attr("data-placement", "left");
body {
text-align: center;
}
<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"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button"
class="btn btn-tooltip"
data-toggle="tooltip"
data-placement="right"
title="Tooltip">
Text
</button>
To use Bootstrap tooltips, you need to remember to initialise them with:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
Adding this code shows that your data-placement change does indeed work as expected:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
$("button.btn-tooltip").attr("data-placement", "left");
body {
text-align: center;
}
<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"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button"
class="btn btn-tooltip"
data-toggle="tooltip"
data-placement="right"
title="Tooltip">
Text
</button>
If your code is not giving you the same result, then your JavaScript may be running before the DOM has fully loaded (meaning that the button wouldn't exist for it to be manipulated).
In this case, ensure that your code is wrapped inside a $(document).ready(function(){}) to force the JavaScript to wait until the button has been created.
Hope this helps! :)
you can just do
$("button.btn-tooltip").data( "placement", "left" );
Your code as written works properly, as seen here:
http://jsbin.com/xozuseyeyi/edit?html,js,output
My suspicion is that your javascript code is running before your button is available in the DOM.
Have you tried wrapping your code inside a document.ready() handler or similar?
$(document).ready(function() {
$("button.btn-tooltip").data( "placement", "left" );
});
I think the attribute is added indeed, but because you add the attribute after the bootstrap have initialized, so it does not work.
Do you use the tooltip in bootstrap? you can try to set the attribute before call
$('button.btn-tooltip').tooltip()
Related
so I am using Jquery to try and change bootstrap buttons classes when I click on them using the toggleClass but the problem is I only can toggle between only 2 classes and that not what I want, I want to toggle between at least 5 classes or even more each time I click on the button, but I can't find a way to do it
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>toggle</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<script>
$(document).ready(function () {
$("button").click(function () {
$(this).toggleClass("btn btn-success btn btn-info btn btn-primary");
});
});
</script>
<style>
#p {
position: absolute;
top: 50%;
left: 50%;
}
</style>
<body>
<button id="p" class="btn btn-success">Random button</button>
</body>
</html>
You can put all the classes you want to apply into an array and store the array index of the currently applied class in a variable or using jQuery's .data() method.
Then, whenever the button is clicked, you retrieve and increase the index to get the next class and apply it to the button. Try this
$(document).ready(function () {
var classes = ['btn-success', 'btn-info', 'btn-primary'];
$("button").click(function(){
let idx = $(this).data('class-index') ?? 0; // index of the currently applied class
let cls = classes[idx+1] ?? classes[0]; // get the next class
$(this).data('class-index', classes.indexOf(cls)); // store the class index
$(this).removeClass(classes).addClass(cls); // remove old class and apply new one
});
});
button { outline: none!important; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button id="p" class="btn btn-success">Random button</button>
You could increment a counter each time the button is clicked and add a class based on the count. 0 = green, 1 = red. Toggle is only for switching between two states like a physical toggle would
I want to change the Button' value with a font awesome spinning animation icon on click.
HTML:
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<input id="button_g" type="button" class="button-default" value="Go" onclick="abc(this);">
Script:
function abc(this1)
{
//alert('asdasd');
this1.disabled=true;
this1.value ='<i class="fa fa-spinner fa-spin"></i>';
}
This one only replaces the Button's value with a non-working html code. I tried it with:
document.getElementById('button_g').innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
But doesn't work. Please advise.
Instead of input you should use button and set innerHTML of button
function abc(this1) {
this1.disabled = true;
this1.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
}
button {
padding: .25rem .75rem;
border: 1px solid #3d3a37;
border-radius: 6px
}
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button id="button_g" class="button-default" onclick="abc(this);"> Go </button>
The value attribute has a different meaning for each type of the input tag. Yours is a button and so the value attribute is linked to the text inside the button, not the inner html of it.
If you want to change the inner html, use this1.innerHtml
For more read here
I m having following code to convert image using html2canvas. It is working fine but the select tag icon (down arrow) is not coming when capture the image
<!DOCTYPE html>
<html>
<head>
<title>html2canvas</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<style>
button{
display:block;
height:20px;
margin-top:10px;
margin-bottom:10px;
}
.icon-diamond:before {
content: "\e943";
}
</style>
</head>
<body>
<div id="target">
<div style="position:relative;" class="noteclasscontainer" >
<span style="font-size: 60px;" class="glyphicon">
<span style="color:white;font-size: 21px; position: absolute; top: 16px;left:10px;">dd</span>
</span>
</div>
<div style="position:relative;" class="noteclasscontainer">
<select>
<option>1</option>
<option>1</option>
</select>
</div>
</div>
<button onclick="takeScreenShot()">to image</button>
<script>
window.takeScreenShot = function() {
html2canvas(document.getElementById("target"), {
onrendered: function (canvas) {
document.body.appendChild(canvas);
},
width:320,
height:220
});
}
</script>
</body>
</html>
Image is capturing correctly but only the select icon is not coming properly.how to fix this issue ?
This is part of browsers default CSS, everything is not accessible to html2canvas, and it should not be (possible leak of privacy info on some OS).
Maybe this exact one could be tweaked for chrome, since chrome does expose some of its shadow selectors, but I don't even know if it is in the list, and anyway, since non-standards these selectors could change at any time in the future, and here is how it looks like on my FF :
So the best for you, is to create the dropdown entirely from scratch. This way all UAs will show the same, and html2canvas will be able to "snapshot" it.
I'm beginning with this whole coding thing (it's beautiful) but I just found myself with an issue.
There's landing page I found and I kind of copied, it has a button that works as a hyperlink to another page but instead of that button, I have the code for a style sheet, it's kind of like a form people have to fill. So you press the button and the form pops out.
I have the code of the original landing page and I also have the code for the form but I don't know how to blend them, please help.
The first one is the original button code that takes people to https://myimstrategy.com/50perday-2/. I want to replace that site for a form that pops out. That's the second code in the bottom, I don't know how to merge both codes. I attached an image of the original button. I don't want to delete it, I just want the form to pop out when I click on it.
Thank you very much for your help!
.el-content{
display: inline-block;
width: auto;
height: auto;
min-width: 894px;
min-height: 114px;
}
.ib2-button {
color: rgb(15, 15, 15);
background-color: rgb(25, 202, 6);
border-color: rgb(0, 174, 0);
border-radius: 5px;
text-shadow: rgb(147, 138, 138) 1px 1px 0px;
background-image: none;
min-width: 920px;
min-height: 123px;
width: auto;
height: auto;
font-weight: bold;
font-size: 80px;
}
<div class="el-content">
Claim Your Spot Now >>
</div>
<link href="//app.webinarjam.net/assets/css/register_button.css" rel="stylesheet">
<div style="margin:auto;width:300px;">
<div class="embedded-joinwebinar-button">
<button type="button" class="btn btn-default css3button" title="regpopbox_35246_b21043f77c">
<span>Register now</span>
</button>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js" language="javascript" type="text/javascript"></script>
<script src="//app.webinarjam.net/assets/js/porthole.min.js" language="javascript" type="text/javascript" async></script>
<script src="//app.webinarjam.net/register.evergreen.extra.js" language="javascript" type="text/javascript" async></script>
If you want to create a popup, you're going to want to use javascript.
This is typically referred to as a modal. Here is a link to a tutorial: How TO - CSS/JS Modal
You can use bootstrap modal, or add onclick="showForm()"
And then you put id="form" to the form. Then in the head tag put
<script>
function showForm(){
document.getElementById("form").style.display = "inline-block"; //It must have display: none, the form, and this will make it display
}
</script>
I couldn't find your image but I got it, you want to show a pop on a button click. You can simply provide a href like below:
<link href="jsFunctionName()" class="buttonClass">Open Form</link>
And try using jquery dialogue on link clicked via jquery. https://jqueryui.com/dialog/
e.g.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function jsFunctionName() {
$("#dialog").dialog();
} );
</script>
<div id="dialog" title="My Form">
<form>
</form>
</div>
I'm trying to make a delete/remove popup on fullcalendar when I click the existing event.
Using JQueryUI's dialog, something is partially displayed.
(note. my events are all external events which have been dropped from side menu)
The following two methods are the closest I got to displaying something.
Method 1 with dialog in eventRender
$('#calendar').fullCalendar({
….
eventRender: function (event, element){
$("#eventContent").dialog({ modal: true, title: event.title, width:350}); });
….
});
<div id="eventContent" title="Event Details" >
</div>
and
Method 2 with dialog in eventClick
$('#calendar').fullCalendar({
….
eventClick: function(event){
$("#eventContent").dialog({ modal: true, title: event.title, width:350}); });
….
});
<div id="eventContent" title="Event Details" >
</div>
both behaviors are same
It shows the title of fectched event and close button.
But popup dialog window is not there (not surrounded).
It displays only texts on fullcalendar .
Does anyone why the dialog isn't displaying properly? The window is only displaying text.
Also, I don't if I should include any particular css code for the popup window but these are all css from my code.
So if I am missing some css for popup window, can anyone inform me of the reference css code for the dialog popup?
<style>
body {
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#wrap {
width: 1100px;
margin: 0 auto;
}
#external-events {
float: left;
width: 150px;
padding: 0 10px;
border: 1px solid #ccc;
background: #eee;
text-align: left;
}
#external-events h4 {
font-size: 16px;
margin-top: 0;
padding-top: 1em;
}
#external-events .fc-event {
margin: 10px 0;
cursor: pointer;
}
#external-events p {
margin: 1.5em 0;
font-size: 11px;
color: #666;
}
#external-events p input {
margin: 0;
vertical-align: middle;
}
#calendar {
float: right;
width: 900px;
}
</style>
and my .js links..
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.min.js'></script>
The modal isn't showing correctly because you don't have the jquery ui css loaded.
<link href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.3/jquery-ui.css' rel='stylesheet' />
And go with the eventClick method.
Edit 1:
I have no luck to display the dialog box... it shows still only text...
Okay, try this:
eventClick: function(event){
$("<div>").dialog({ modal: true, title: event.title, width:350});
},
This will create a new element and make it a dialog.
I answer my own question. I have found solution myself. but I am not really able to explain since I am new to this. but I think this may help someone with similar trouble and for my own memory backup. I decide to post answer to my own question.
I couldn't succeed with dialog (box doesn't display only able to display text).
After several days of efforts and with [reference] for the code 2) 3), I decide to try with bootstrap modal again.
then I got a luck.. so here is working code.
1) At first, all links I need (I figured what combination of links I need and this was kind of key part that make it work) =>
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.4/jquery.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.4/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/css/bootstrap-modal-bs3patch.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/css/bootstrap-modal.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/img/ajax-loader.gif"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modal.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modalmanager.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modalmanager.min.js"></script>
2)javascript part : eventClick code in fullcalendar code
$('#calendar').fullCalendar({
….
eventClick: function(event){
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
$('#fullCalModal').modal();
},
….
});
3) html, bootstrap modal part
<div id="fullCalModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
<h4 id="modalTitle" class="modal-title"></h4>
</div>
<div id="modalBody" class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn btn-primary">Remove</button>
</div>
</div>
</div>
</div>
and thanks to #slicedtoad , keep motivating me!