I am trying to show ajax spinners on one of angularJS application with every http call, so it means whenever we try to load a ngGrid or Dropdown etc there will be a spinner on place and when loading get complete it will get removed, I am new on angular not sure how can we achieve it, please give any reference.
Thanks
Try using an ngSwitch, where you will swap two templates, so basically it would be something like this:
<div ng-switch on="loaded">
<div ng-switch-when="true">
<!--your loaded content goes here-->
</div>
<div ng-switch-default>
<!--your spinner goes here-->
</div>
</div>
That way in your controller you can do something like:
$scope.loadSomething = function(){
$scope.loaded = false;
$http.get(url).success(function(data){
$scope.loaded = true;
});
};
You could write some plain old JavaScript to add a class name to the DIV or TABLE before the call to $http.foo, and then in a success/failure callback remove that class name.
CSS:
.loading {
background: transparent url(path/to/loading.gif) no-repeat scroll 50% 50%;
}
.loading * {
visibility: hidden;
}
Related
Im building shop on woocommerce and im trying to make spoiler under product with short description on archive page.
But unfortunetely it works only with first product.
I made changes inside content-product.php
<div class="tog-holder" id="tog">
<div class="bar horizontal"></div>
<div class="bar vertical"></div>
</div>
<div id="anim">
<p><?php echo apply_filters( 'woocommerce_short_description', $product->post->post_excerpt ) ?></p>
</div>
Here is a css:
<style type="text/css">
/* plus sign */
#anim{display:none}
.bar{transition:all .2s ease-in-out}
#tog.animate .bar{-webkit-transform: rotate(45deg)}
.tog-holder{position:relative;width:32px;height:32px;padding:15px 0}
.bar{position:absolute;background-color:#000;}
.horizontal {width:32px;height:2px;left:0;top:15px;}
.vertical {width:2px;height:32px;left:15px;top:0}
</style>
And Jquery
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#tog").click(function() {
jQuery("#tog").toggleClass("animate");
jQuery("#anim").slideToggle(800);
});
});
</script>
I think problem is with Jquery. I dont know it very well. I put script and css to to header with Insert Headers and Footers plugin it works like below on the screenshot.
Thanks in advance!
IDs are unique identifiers and should only be existing once on a page.
Your jQuery script is getting the id "tog" and uses the click function. You are only do this for the first element with this id.
You should use a class instead and could use a for each to add this click function to all elements with this class.
Another method would be to add the on click to the html tag
<div onclick="yourFunction()"></div>
and create a function where you are referencing to "this" to always use THIS element which is clicked.
EDIT: Here is an example code for you, to make things clearer
<script>
jQuery(document).ready(function(){
jQuery(".class_of_your_hidden_description").hide();
jQuery(".class_of_your_element_to_be_clicked").click(function(){
jQuery(this).next(".class_of_your_hidden_description").slideToggle();
});
});
</script>
I am working on a project in which the navigation does not really changes pages but gets data using services based on which navigation link I click and update data using jquery .html() method, I want to use a loader that shows up on clicking any link and hides the content, when ajax services is successfull i want to remove the loader and show back the content, but somehow the animations are overlapping causing animations to fail,
in example code here i am not using ajax to update my page but a simple button
and jquery to update the data
<body>
<div id="loader">
<img src="loader.gif" alt="">
</div>
<br>
<div id="content">
This is the content
</div>
<input type="button" id="update" value="Update Data">
</body>
<script>
function showContent(){
$('#loader').fadeOut(200).promise().done(function(){
$('#content').fadeIn(200).promise().done(function(){
});
});
}
function hideContent(){
$('#content').fadeOut(200).promise().done(function(){
$('#loader').fadeIn(200).promise().done(function(){
});
});
}
$("#update").click(function(){
hideContent();
$("#content").html("New Data");
setTimeout(showContent(), 10000);
});
</script>
on clicking update, this should happen
content should disappear,
loader should appear,
update content,
loader disappear,
content appear,
but i get both loader and content appeared in the end
I used setTimeout to give some delay but it doesnt works , i also used some flags earlier but that didnt work too .
JsFiddle : JsFiddleLink
Why use setTimeout()? You can return, chain the promise
function showContent(){
return $('#loader').fadeOut(200).promise().done(function(){
return $('#content').html(data).fadeIn(200).promise()
});
}
function hideContent(){
return $('#content').fadeOut(200)
.done(function() {
this.empty();
return $('#loader').fadeIn(200).promise()
});
}
$("#update").click(function() {
hideContent().then(showContent)
})
I have this code that shows contents outside of the ng-controller.
HTML
<div class="btn-group companyName">
<!-- buttons -->
</div>
<div class="col-lg-12 col-lg-md-12 col-sm-12" ng-controller="TopicsCtrl">
<div class="faq-breadcrumbs">
<!-- contents -->
</div>
</div>
JS
angular.module('sample').controller('TopicsCtrl', function ($scope) {
//how to hide first div?
};
The top div is inside the site's header, so it is shown in all pages of the site. The second div is only shown if I am in the FAQ page. Now I don't want the first div to show on the header whenever I am in the FAQ page. How can this be done? Can anyone help me? Thank you very much.
The angular way to do this would be to create a directive that manipulates the DOM and will hide the element on the page when the route is on the FAQ page. In order to do this you will have to increase the scope of your app to include the header.
If you can't do that, I would suggest just going the javascript/jquery way and hiding the companyName div when the location is at faq. Something like this could work.
$(document).ready(function() {
if(location.pathname == 'faq'){
$('.companyName').css('display', 'none');
}
}
This solution does pose the problem of potentially showing information before the document is completely loaded.
Below is my code. i want - when the page is loading then the header class will not visible but after loading the page it will slide down. How can I do it? thank you.
HTML:
<div class="header" style="width:100%;height:300px;background-color:#999">
</div>
JS:
$(document).ready(function() {
$('.header').slideDown();
});
You need to make the header display: none; with CSS first like this:
<div class="header" style="width:100%;height:300px;background-color:#999; display: none;">
</div>
Then your JS will show it and perform the animation like in this fiddle:
http://jsfiddle.net/S8XjL/
If you mean after everything on the page has loaded you might want to change your JS to:
$(window).on("load", function(){
$('.header').slideDown();
});
Using jQuery's ready function will cause the header to drop once the DOM is ready but not necessarily when the page has finished loading:
$(document).on("ready", function(){
$('.header').slideDown();
});
Just mention display:none in your CSS
<div class="header" style="width:100%;height:300px;background-color:#999; display:none">
</div>
I have a page on my website called printUsers.html.
On it there is a button which prints the page using 'javascript:window.print()'.
I am also using '#media print' on the page to hide some buttons when the page is printed.
This is all working well and I have no problems here.
The problem is the following:
All the pages on the site, extend from the main page. So at the top of printUsers.html I have:
#{extends 'App/main.html' /}
This includes styles and a header which has buttons and drop-downs.
When the user clicks the print button, I want to hide all the header and buttons etc, which come from the main.html.
I tried wrapping it into a div, giving it an id and hiding it but this didn't work.
I have just started using javascript so any help would be much appreciated.
Thanks.
The CSS way
#media print
Use #media Print as you stated in your question, but include all the elements you don't want to see in your printed result, and put display:none to them. You can also apply some margin:0 auto; text-align:center; to your main content if you want to center it into your page.
Edit: You can hide any element, such as header this way:
header
{
display:none;
}
footer
{
display:none;
}
The Javascript way
Button's onClick
Your button's onclick:
Button onClick()
<button id="printThatText" name="printThatText" onclick="printPage();">Print this page</button>"
Your javascript code in the header (or at the end of the page)
Javascript
function printPage()
{
var myDropDown = document.getElementById('myDropDown');
myDropDown.style.display = "none";
//Whatever other elements to hide.
window.print();
myDropDown.style.display = "block";
return true;
}
You could also put all of these elements in an array and make a for ... in ... loop to show/hide them.
Wrap the contents with an element that encapsulates all of stuff you want to hide. In the print CSS, set the display to none.
The CSS:
#media print {
#myHeader, #myFooter { display: none }
}
The HTML:
<div id="myHeader">
<ul>
<li>
<a>My link</a>
</li>
</ul>
</div>
<div id="myContent">
<p>This will print fine</p>
</div>
<div id="myFooter">
<p>This will not print</p>
</div>
You could always use HTML5 header/footer elements!
Maybe try the opposite--print only a particular div--rather than hiding other divs: Print <div id=printarea></div> only?