Develop Reference

How to delete "auto-added span" inside <button>?

I have that <a> (Edit diagram + icons) inside <ul><li>...</ul></li>
I want to add clickable and hoverable arrow icon inside that <a>
So i created button with display: contents, some code:
...
<li class="active">
<a href="#"><span class="fa fas fa-edit mr-3"></span> Edit diagram
<button onclick="location.href='/drawdiagram'" class="fas fa-reply mr-3" style="display: contents">
</button>
</a>
</li>
...
And here is my problem. Look at that screen:
Inside my button tag, <span> was added... This span is adding some css, i mean some paddding etc. And the result is on that picture -.-
That green rectangle anoying me. For first it is adding margin from bottom to my <li>. For second and worst, it is adding extra area where i can move my mouse and my arrow will be hovered.
My mouse can be there and the arrow will be hovered all time -.-
That extra <span> is added by jQuery but I don't want to rummage inside library.
So the question is, anyone have idea what i can do it with this? I had an idea to delete "somehow" that span using JavaScript or jQuery but i have no idea how to do it. Or maybe i can "somehow" delete it using css. But remember, I don't want to rummage inside library.

there are many ways to do that.
but very first you have to confirm if you remove this <span> which is inside button, yours icon will not disturbed. for test just remove it with the help of inspect element(hope you knows. how to do it).
if its fine with removing this <span> then with the help of JQuery you can remove it via adding this line.
$(document).ready(function(){
$('#ID_of_button span').remove();
}

angular-loading-bar placement and backdrop

I am using this angular-loading-bar to show a spinner when the user has to wait, but I am having big trouble with the placement of it, it's barely visible.
I have these configs on the module
.config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
cfpLoadingBarProvider.includeBar = false;
cfpLoadingBarProvider.parentSelector = '#loading-bar-container';
cfpLoadingBarProvider.spinnerTemplate = '<div><span class="fa fa-spinner"></div>';
}]);
and then I place this, in the html where I want it to show
<div id="loading-bar-container"></div>
This is works, but it's still not very visible, is it possible to make it act like a modal, or popup?
I am using ui.bootstrap and have some modals, so when the user makes a promise inside a modal the spinner is under it (on main body element, where 'loading-bar-container' div is), so in this case it's not visible at all, is it possible to make it 'pop out'?

I would say this problem is about positioning of your div, this is not problem of the angular-loading-bar.
Try to use z-index and make your div always on top (above the modals).
Without more code or fiddle it's hard to say more...
EDIT: Here are some older questions which can help you:
How can I set an element over Twitter's Bootstrap modal?
Exposing element outside modal-backdrop in CSS Bootstrap jquery modal

Button onclick replace with DIV

I want to replace button with a DIV in template design of my blog.
The code for button is
<button onClick="menu1.toggle();" class="sideviewtoggle fa fa-bars"></button>
And jquery script I am using for it is
jQuery(function(){ // on DOM load
menu1 = new sidetogglemenu({ // initialize first menu example
id: 'togglemenu1',
marginoffset: 10,
downarrowsrc: 'toggledown.png'
})
})
It opens a siedbar toggle menu on click. I don't want to use <button> tag for this purpose, instead I want to use a <div> tag so that the functions onclick instead of button. I think that it can be done by using a small code of Javascript but as I am new to Javascript so unable to do it myself?
What should I do?
Here is the url to template.
http://testing-prov4.blogspot.com

It sounds like you would like to use a div element to trigger the slideout menu instead of a button element. This can be easily accomplished. Your current code reads:
<button class='sideviewtoggle fa fa-bars' onClick='menu1.toggle();'></button>
You can replace this with:
<div class='sideviewtoggle fa fa-bars' onClick='menu1.toggle();'></div>
without changing any functionality. (CSS changes just a bit)

Content popup box called by href

I use Wordpress and I would like to have a plugin that allow me to open a box/popup content for "a href" call.
Something like this:
Text use it in a div tag
this is the code i use:
<div class="tracklist download-button2" style="display: initial-block">
<a href="#">
<span class="header-clip2">
<span class="header-triangle2"></span>
</span>
<span class="header-bg2"></span>
<div class="clear"></div>
<div class="file-icon-inner2">
<i class="icon-download2"></i>Tracklist
</div>
</div>
please check http://af-sound.ro "Tracklist" button
so whoever will click on Tracklist, i would like to have a box popup opened with the content inside.
There will be more "tracklist" buttons, so i dont need just a global popup box. I have tried with Anything popup but that doesn't work as it use a shortcode like: [anythingpupup=id1] which cannot be used in "a href" call

The first issue here is that you are missing the closing anchor tag
Secondly, you should give the box which you'd like to open an "id" attribute.
<div id="popup-box"></div>
Wherever you place your anchor tag, you can then reference the box using
Click to open popup
The "#" will refer to the id attribute of the matched element.
There is no need to install an entire Wordpress plugin. You can use something like Bootstrap Modals
The instructions are very straight forward to help you set it up.

I think you don't need a plugin for that. You could use just javascript to open such popup from an anchor. Here is an example code:
Open Popup!
<script language="javascript">
function Popup()
{
var win = window.open('', '',"toolbar=no, width=100, height=20");
var doc = win.document.open();
doc.write('<html><body> <b>Hello!</b> </body></html>');
doc.close();
}
</script>
As you can see, you can add any dynamic html as content of the popup, including the html that you want in the doc.write method.
Cheers!

There are a number of ways of achieving this, depending on the result you want to get.
Maybe the simplest way is not using a plugin at all; just add a hidden div with the content of the popup in it. And then, from jQuery, capture the click of your tag a and show up that hidden div. From CSS you can style that div in any way you need.
If you want to use a plugin, you could use Fancybox or any other similar, given the fact that you already have jQuery on your website.

How do you know how to use twitter-bootstrap?

I can't find a complete document. For example, the popover effect(here) will use a DOM's data-origin-title attribute as its own title, and data-cotent as its content:
$('#somedom').hover (->
$(this).addClass("hover")
$(this).attr("data-original-title","Location")
$(this).attr("data-content":'The popover plugin provides a simple interface for adding popovers to your appli cation. It extends the bootstrap-twipsy.js plugin,
so be sure to grab that file as well when including popovers in your project!')
$(this).popover({})
$(this).popover("show")
),->
$(this).removeClass("hover")
Where to learn it? The offcial document doesn't have data-origin-title attribute. Neither in source code of bootstrap-popover.js.

All you need is right up there in the Options table. It grabs the title attribute for the title, and data-content for the content (3rd column). The data-original-title you see on the HTML is added by the plugin script after executing, ignore it.
The idea for this is that you already have the info on the HTML:
<div id="mything" title="My title=" data-content="Some text here">Test popover</div>
So your script only does this, you don't need to handle events:
$('#mything').popover()