I have a button in the bottom right corner for back-to-top. It works but on mobile/smaller screens it moves behind the text and only the text becomes clickable.
<button type="button" id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button"><span class="fa fa-chevron-up">tesd</span></button>
<script>
$(document).ready(function(){
$(function(){
$(window).scroll(function () {
if ($(this).scrollTop() > 20) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-to-top').click(function () {
$('#back-to-top').tooltip('hide');
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
$('#back-to-top').tooltip('show');
});
});
</script>
I put this outside of body to see if that would make a change but it didn't.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
Here's my approach :
add z-index property to your css
<button type="button" style="z-index:1000"; id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button"><span class="fa fa-chevron-up">tesd</span></button>
Related
i'm trying to develop a button with a loading message.
in html page i have
<div class="btn-area">
<button id="connectMetamaskBtn" class="btn sp-btn" type="button"
style="margin-top: 5%; width: 400px;"
loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Connecting...">
Connect to Metamask
<img class="metamask-icon" src="assets/images/icons8-metamask-logo-48.png" width="25px" />
</button>
</div>
and in app.js
$("#connectMetamaskBtn").on("click", async () => {
var $this = $(this);
$this.button('loading');
try {
provider = new ethers.providers.Web3Provider(window.ethereum);
// MetaMask requires requesting permission to connect users accounts
await provider.send("eth_requestAccounts", []);
await startApp(provider);
}
catch (e) {
$this.button('reset');
$("#error")
.text(`An error occured: ${e.message || e}`)
.show();
}
});
The loading doesn't work.. any idea ?
Thx
use this button:
$('.btn').on('click', function() {
var $this = $(this);
$this.button('loading');
setTimeout(function() {
$this.button('reset');
}, 8000);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<div style="margin:3em;">
<button type="button" class="btn btn-primary btn-lg" id="load2" data-loading-text="<i class='fa fa-spinner fa-spin '></i> Processing Order">Submit Order</button>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
I have a button with text and a down-arrow icon, which I use to trigger a dropdown. When I click the text part of the button, the dropdown appears, and I have some jquery to amend the text and flip the arrow - great. But when I click the icon part of the button, the text changes and the icon flips but the dropdown doesn't appear.
Do I convert it to an anchor link and change the clickable area, or is there a more simple solution?
HTML
<button type="button" class="btn btn-info button-drop text-nowrap" data-toggle="collapse" data-target="#ph-detail" aria-expanded="false" aria-controls="ph-detail">See More
<i class="bi bi-arrow-down"></i>
</button>
<div class="collapse" id="ph-detail">
<p>Expandable content</p>
</div>
JQuery
$('.button-drop').click(function() {
$(this).toggleClass( "active" );
if ($(this).hasClass("active")) {
$(this).html('See Less <i class="bi bi-arrow-up">');
} else {
$(this).html('See More <i class="bi bi-arrow-down">');
}
});
Both of the code are working for me. I think you have not added the cdnjs file of jQuery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
$('.button-drop').click(function() {
$(".button-drop").toggleClass( "active" );
if ($(".button-drop").hasClass("active")) {
$(".button-drop").html('See Less <i class="bi bi-arrow-up">');
} else {
$(".button-drop").html('See More <i class="bi bi-arrow-down">');
}
});
$('.button-drop').click(function() {
$(this).toggleClass( "active" );
if ($(this).hasClass("active")) {
$(this).html('See Less <i class="bi bi-arrow-up">');
} else {
$(this).html('See More <i class="bi bi-arrow-down">');
}
});
In the end I solved it with the following:
<button type="button" class="btn btn-info button-drop text-nowrap" data-toggle="collapse" data-target="#ph-detail" aria-expanded="false" aria-controls="ph-detail"><span>See More </span>
<i class="bi bi-arrow-down"></i>
</button>
$('.button-drop').click(function() {
$(this).find('i').toggleClass('bi bi-arrow-up');
$(this).find('span').text(function(a, text) {
return text === "See More " ? "See Less " : "See More ";
});
});
I have been racking my brain how I could include a toggle menu on my website, after some searching I found the below and have implemented it, which is great!
http://jsfiddle.net/hhcsz5cr/
<div>
<h1><button class="button" data-circle="travel">
<i class="fa fa-plus-square"></i>
</button> Travel</h1>
</div>
<div class="travel options">
<ul>
<li>Travel</li>
<li>Vehicles</li>
</ul>
</div>
var localStorageKey = "app_state";
// to preserve state, you first need to keep track of it
var default_state = {
biographies: false,
pictures: false,
poetry: false
}
var saved_state = localStorage.getItem(localStorageKey);
// ternary operator which means if `saved_state` is true we parse it and use that value for `state`; otherwise use `default_state`
var state = saved_state ? JSON.parse(saved_state) : default_state;
$(function() {
init();
$('.button').on('click', function() {
var circle = $(this).attr('data-circle');
toggleCircle(circle, !state[circle]);
$(this).find('i').toggleClass('fa-minus fa-plus');
});
});
function init() {
for(var key in state) {
var is_displayed = state[key];
if ( is_displayed ) {
$(this).find('i').toggleClass('fa-minus fa-plus');
} else {
$(this).find('i').toggleClass('fa-plus fa-plus');
}
console.log(is_displayed);
toggleCircle(key, is_displayed);
}
}
function toggleCircle(circle, is_displayed) {
if (is_displayed) {
$('.'+circle).show()
state[circle] = true;
} else {
$('.'+circle).hide()
state[circle] = false;
}
localStorage.setItem(localStorageKey, JSON.stringify(state));
}
But.. if you minimize a menu then refresh the icon shows a - even though its already minimize.
Is there any way I can change this?
I realise the code above is not my own and I can't find the person to credit! My jquery is terrible.
Any help would be appreicated.
Thanks
jsFiddle DEMO (since SO snippets do not allow localStorage from Iframe)
Use IDs, not classes. IDs are unique, not classes.
Store the entire ID as the object property i.e: "#pictures": false,
Store the entire selector inside data-* i.e: data-toggle="#biographies"
Use "is-*" classes as state CSS helpers: "is-hidden", "is-expanded"
You don't have to use .fa classes, just use CSS and font-family
Make use of Object.assign() to override your default values with the ones in Local Storage (if any).
Loop your object key value pairs using Object.entries() when initing your menu states.
// Override defaults with localStorage
const state = Object.assign({
"#biographies": false, // Feel free to change this default boolean
"#pictures": false,
"#poetry": false
}, JSON.parse(localStorage.state || "{}"));
const toggle = (k, v) => {
$(k).toggleClass('is-hidden', !v);
$(`[data-toggle="${k}"]`).toggleClass('is-expanded', v);
};
// On init
Object.entries(state).forEach(([k, v]) => toggle(k, v));
// On click
$("[data-toggle]").on("click", function() {
const id = this.dataset.toggle; // Get ID i.e: "#pictures"
state[id] = !state[id]; // Flip boolean
toggle(id, state[id]); // Trigger UI changes
localStorage.state = JSON.stringify(state); // Store into LS
});
.is-hidden {
display: none;
}
[data-toggle] i:before{
font-family: "FontAwesome";
font-style: normal;
content: "\f067"; /* Plus */
}
[data-toggle].is-expanded i:before{
content: "\f068"; /* Minus */
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<div id="biographies" class="is-hidden">Biography</div>
<div id="pictures" class="is-hidden">Pictures</div>
<div id="poetry" class="is-hidden">Poetry</div>
<button type="button" class="button" data-toggle="#biographies">
<i></i> biographies
</button>
<button type="button" class="button" data-toggle="#pictures">
<i></i> pictures
</button>
<button type="button" class="button" data-toggle="#poetry">
<i></i> poetry
</button>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
Please try this..
$('.button').click(function(){
var whichbtn = $(this).attr('data-circle');
if($("."+whichbtn).hasClass("hidden")){
$(this).children("i").removeClass("fa-plus").addClass("fa-minus");
}else{
$(this).children("i").addClass("fa-plus").removeClass("fa-minus");
}
$("."+whichbtn).toggleClass("hidden");
});
.hidden{display:none;}
.button{
background:#00cc00;
padding:10px 20px;
margin-right:10px;
border:none;
color:white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="m-3">
<div class="biographies hidden mb-2 font-weight-bold">Biography</div>
<div class="pictures hidden mb-2 font-weight-bold">Pictures</div>
<div class="poetry hidden mb-2 font-weight-bold">Poetry</div>
<button class="button" data-circle="biographies">
<i class="fa fa-plus"></i> biographies
</button>
<button class="button" data-circle="pictures">
<i class="fa fa-plus"></i> pictures
</button>
<button class="button" data-circle="poetry">
<i class="fa fa-plus"></i> poetry
</button>
</div>
I add js for click event of button and get the attribute of data-circle of it's own for find which button clicked. And fa fa-plus icon changed to fa fa-minus also. Thats only.
toggleClass is used for toggle class when user click the button. First click add class hidden then second click remove class hidden.For more clarifications comment me.
I have created 2 buttons, each button will replace content based on partial views, I could load the partial view on the page when I click the button, but this works only once, for instance I clicked button-1 and loaded data, now if I click on button 2 its not working, I needed to go back to main page to click again on button-2
<h3>
<a class="btn btn-warning" id="button1"> Partial View 1</a>
</h3>
<br/>
<h4>
<a class="btn btn-warning" id="buttton2"> Partial view 2</a>
</h4>
<br/> <br/>
<div id="testsim">
</div>
<script type="text/javascript">
$(function () {
$('#button1').click(function () {
$.get('#Url.Action("partialview1", "Home")', function (data1) {
if (data1) {
$('#testsim').replaceWith(data);
}
});
});
$('#button2').click(function () {
$.get('#Url.Action("partialview2", "Home")', function (data2) {
if (data2) {
$('#testsim').replaceWith(data2);
}
});
});
});
</script>
I'm trying to achieve button clicks to toggle between two buttons, everytime button click should replace the content in div tag. Any help would be appreciated.
I think the problem is because of replaceWith() which replaces the element itself i.e. outerHTML-
$(function() {
let $html, current;
$('#button1').click(function() {
/* $.get('#Url.Action("partialview1", "Home")', function(data1) {
if (data1) {
$('#testsim').replaceWith(data);
}
});*/
current = `button 1 was <em>clicked</em>`;
$html = `<div><strong>${current}</strong></div>`;
$('#testsim').replaceWith($html);
});
$('#button2').click(function() {
/*$.get('#Url.Action("partialview2", "Home")', function(data2) {
if (data2) {
$('#testsim').replaceWith(data2);
}
});*/
current = `button 2 was <strong>clicked</strong>`;
$html = `<div><em>${current}</em></div>`;
$('#testsim').replaceWith($html);
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>
<a class="btn btn-warning" id="button1"> Partial View 1</a>
</h3>
<br/>
<h4>
<a class="btn btn-warning" id="button2"> Partial view 2</a>
</h4>
<br/> <br/>
<div id="testsim" style="background: aquamarine; height: 200px">
</div>
As you can see that the styling of the element disappears after replacing. If you want to perform this operation then you should use html() which replaces only innerHTML-
$(function() {
let $html, current;
$('#button1').click(function() {
/* $.get('#Url.Action("partialview1", "Home")', function(data1) {
if (data1) {
$('#testsim').replaceWith(data);
}
});*/
current = `button 1 was <em>clicked</em>`;
$html = `<div><strong>${current}</strong></div>`;
$('#testsim').html($html);
});
$('#button2').click(function() {
/*$.get('#Url.Action("partialview2", "Home")', function(data2) {
if (data2) {
$('#testsim').replaceWith(data2);
}
});*/
current = `button 2 was <strong>clicked</strong>`;
$html = `<div><em>${current}</em></div>`;
$('#testsim').html($html);
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>
<a class="btn btn-warning" id="button1"> Partial View 1</a>
</h3>
<br/>
<h4>
<a class="btn btn-warning" id="button2"> Partial view 2</a>
</h4>
<br/> <br/>
<div id="testsim" style="background: aquamarine; height: 200px">
</div>
Hope this helps you.
I'm having a problem with the bootstrap button, when I put 2 elements such as div or span inside it the little arrow inside the button will go below the button text. it's like it will get a float (left or right) attribute and it will make the elements get ordered vertically.
<!--HTML Part-->
<div class="btn-group">
<button type="button" class="btn btn-outline-white dropdown-toggle" data-toggle="dropdown">
<span class="english">Site Language</span><span class="farsi">زبان سایت</span>
</button>
/*CSS Part*/
.english {display: none !important;}
.farsi {
display: none !important;
direction: rtl;
font-family: 'Lalezar';
text-align: right;
}
.english:lang(en), .farsi:lang(fa) {
display: block !important;
}
-
//JS Part
<script>
function changelang2fa() {
document.getElementsByTagName("HTML")[0].setAttribute("lang", "fa");
}
function changelang2en() {
document.getElementsByTagName("HTML")[0].setAttribute("lang", "en");
}
</script>
Normally the button is:
deformed style with having span tag inside:
P.S. : i intend to make my website multilingual (English and Farsi)
I'm not going to get into the details of how you can use alternate ways to achieve what you are doing, but instead will just tell you where you went wrong in your code. <span> elements should get a display:inline which will make the down arrow appear right beside it. Giving it a display:block like you have done, causes the arrow to appear in the next line.
.english {display: none !important;}
.farsi {
display: none !important;
direction: rtl;
font-family: 'Lalezar';
text-align: right;
}
.english:lang(en), .farsi:lang(fa) {
display: inline !important;
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<!--HTML Part-->
<div class="btn-group">
<button type="button" class="btn btn-outline-white dropdown-toggle" data-toggle="dropdown">
<span class="english">Site Language</span><span class="farsi">زبان سایت</span>
</button></div>
</body>
</html>
Use a proper Bootstrap 4 drop-down button instead of trying to re-invent the wheel. Bootstrap 4 already has invented, created and polished all the "wheels" you'll ever need.
Here's a working code example (click "run code snippet" below):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>
<div class="dropdown">
<button class="btn btn-outline-white dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Site Language
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">English</a>
<a class="dropdown-item text-right" href="#">زبان سایت</a>
</div>
</div>