Develop Reference

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

fancybox - adding class to iframe for styling

I wanted to ask if it's possible do add some class to fancybox, to do some actions.
Now i have something like:
</i>show movie
And
some default simple code to open movie on page start:
This Javascript is inside generic fancybox function
$('fancybox.iframe').trigger('click');
And this works, on page load fancybox is shown.
But now i want for example to do something with this fancybox, for example on scroll page down, move fancybox right, but this can't be done, as i can't find method to select this element by Jquery, for more advanced actions...
So, i want to add some class for example and then use this as selector for Jquery.
Thanks for help.

You could use the wrapCSS - option of fancybox (compare here: http://fancyapps.com/fancybox/#docs) and assign a class to the fancybox.
$('fancybox.iframe').fancybox({
wrapCSS : 'someClass' });
Then call the class with jQuery.
$('.someClass').doSomething();

Removing a link from an html element using JQuery

The company I am working for handed me over a messy website ran using templates, so some elements in the website are automatically generated and are active links.
My main problem is that there are some elements on the site are active links that aren't suppose to be links at all. I was wondering if there is a way to remove the link from an html element using JQuery and maybe CSS?
this will help me tremendously, thanks in advance. I need to remove all href's from class 'slider'.
Here is some of my jquery, can someone please show me how to add it?
<script type="text/javascript">
$(document).ready(function(){
$("#productsLink").hover(function(){
$("#productsMenu").slideDown();
});
$("#productsLink, #productsMenu").hover(function(){
$("#productsLink").css("color","red");
});
$(".spacer", this).hover(function(){
$("#productsLink").css('color', 'white');
$("#productsMenu").slideUp();
$("#aboutLink").css('color', 'white');
$("#aboutMenu").slideUp();
});
});
</script>

try unwrapping the sliders using .unwrap(), assuming all these links have the class slider and they are directly wrapped in an anchor tag.
$('.slider').unwrap()

If you want to remove links with the class name slider from the DOM:
$('a.slider').remove();

You can remove all href attributes from links with class slider with this code:
$('a.slider').removeAttr('href')
This will keep the content of the elements intact and just disables them as a link.

CSS is no help here, it could only be used to hide elements completely.
You can use the replaceWith method to turn specific a elements into span elements. Example:
$('a.something, a.someother').replaceWith(function(){
return $('<span/>').text($(this).text());
});

side sliding menu tab

i want to implement a right side sliding menu similar to the one in amazon.com..
i am trying to use javascript to edit the script on every mouseover/onclick event..
i want to hide/show the table on every event.
function show(a){
var id="myMenu"+a
if (i<-12){
i=i+speed;
document.getElementById(id).style.left=i;
}
}
function hide(a){
var id="myMenu"+a
if (i>-135){
i=i-speed;
document.getElementById(id).style.left=i;
}
}
this should be good to show/hide the tables.. but how to id dynamically add two tables one over another..because the main menu table will always be visible, but the sub menu when hidden will be beneath the main menu..
any method to do the same?
am i in the right path?

Definitely on the right path, this is a good test of concept.
I would suggest you look at jQuery (or other JavaScript libraries like Scriptaculous) specifically at the slideToggle() and toggle() methods.
Don't want to give it all away, but take a look at the Amazon source code, you may get some helpful little tips. :P

Scrolling effect with the destination highlighted with jQuery

I found an anchor plugin for jQuery, and its demo site is at http://www.position-relative.net/creation/anchor/.
I am developing a FAQ page on a website where a list of questions are followed by a list of answers. I could use the scroll effect to move down to the corresponding answer when a user click a question. But I also want the answer is highlighted in some ways or others so that a user can get focused on the answer.
I would like to achieve the effect. Also, if you know any other plugin to do this, please let me know.

As you invoke the anchor plugin using:
$(document).ready(function() {
$("a.anchorLink").anchorAnimate()
});
you could also bind your own function that does the highlighting as so:
$(document).ready(function() {
$("a.anchorLink").anchorAnimate().click(function() {
$('.highlight').removeClass('highlight');
$('a[name='+$(this).attr('href').substring(1)+']').next().addClass('highlight');
});
});
This requires that you have this kind of structure:
Anchor link
...
<a name="foobar"></a>
<div>The content you want to highlight</div>
And in CSS, you just define how you want the highlighted part to look like:
.highlight {
background: #ffc;
}
The jQuery code works so that when you click an anchor link, it first removes current highlights and then applies the highlight class to the element immediately after the link target.
You could expand this functionality by doing some kind of color fade animation like here in SO, but this should get you started.

I'd use jquery.scrollTo personally, to highlight it is pretty simple, just use .toggleclass() on the span/div that wraps the answer.