I have the following scripts which work fairly nicely:
$("#spanLoading").ajaxStart(function () {
$('#spanLoading').empty().append("<img src='/img/loading.gif' />");
});
$("#spanLoading").ajaxComplete(function () {
$('#spanLoading').empty();
});
Is it possible to change these a little, so instead of loading an image on ajaxStart, the mouse cursor changes instead to css cursor wait, and then changes back to normal when ajaxComplete.
Yes, you can do this by changing the cursor property of the body element:
$("#spanLoading").ajaxStart(function () {
$('body').css('cursor', 'wait');
});
$("#spanLoading").ajaxComplete(function () {
$('body').css('cursor', 'auto');
});
Yes:
$('html').css('cursor', 'wait');
On ajaxComplete you change it back.
Related
I am trying to watch the width of a directive's element (the directive itself). In the demo below I set the element style to 100%, in the real world app the element resizes through media queries.
Here is my approach:
http://jsfiddle.net/fusio/5zgaj79b/
scope.$watch(
function() {
return element.width()
},
function(val) {
console.log(val)
},
true
);
Is .width() not changing?
The reason it is not triggering is that, for the first function to get called, a digest cycle has to be triggered. How to do it? Try adding the following to your fiddle:
angular.module('HelloApp', ['components']).run(function($rootScope) {
$(window).on("resize", function() {
$rootScope.$apply();
});
});
For a real scenario, you may want to limit the scope of the $apply to a specific scope, so as not to cause unnecessary watcher invocations.
I want to save some space for my 14 inch screen. What should I write in e.g. ipython_notebook_config.py to trigger this?
If it doesn't already exist, create a file named custom.js in /Users/YOURUSERNAME/.ipython/profile_default/static/custom/
(You may have to run ipython profile create, if you have never run this command.)
In custom.js, put the following lines of JavaScript
$([IPython.events]).on("app_initialized.NotebookApp", function () {
$('div#header').hide();
});
If you would like to also hide the toolbar by default, use these lines of JavaScript instead
$([IPython.events]).on("app_initialized.NotebookApp", function () {
$('div#header').hide();
$('div#maintoolbar').hide();
});
If you have a recent IPython, like v3.0.0 or higher, and are seeing only sporadic success with this method, you'll need to hook into the RequireJS dependency loader, and put the following in your common.js:
require(['jquery'], function($) {
$('#header-container').hide();
});
common.js is loaded at the bottom of the page, so there's no need to wait for the DOM ready event, i.e., $(function() { ... }).
For further discussion see my answer at Turn off auto-closing parentheses in ipython and its comments.
if you are using Anaconda3, please do:
update your C:\Anaconda3\Lib\site-packages\notebook\static\custom\custom.css
.container{ width:100% !important; }
div#site{ height: 100% !important; }
update your C:\Anaconda3\Lib\site-packages\notebook\static\custom\custom.js, and we add a shortcut ctrl+ for toggle the header
$([IPython.events]).on('notebook_loaded.Notebook',function(){
$('#header').hide();
IPython.keyboard_manager.command_shortcuts.add_shortcut('ctrl-`',function (event) {
if (IPython.notebook.mode == 'command') {
$('#header').toggle();
return false;
}
return true;
});
});
Hey my question is how they made that, that the bar over and under the text fade in when the site is displayed ?
http://joy-interactive.com/
-Kai
They probably set a jQuery event to automatically trigger the animation upon $( document ).ready
$(function() {
$("#progress-bar").toggleClass("top-bar-animation");
});
And then in their CSS, they have something like:
.top-bar-animation {
//animation code here
}
I've got this code:
$(function(){
$('#gallery').click(function(){
$('.overlay').fadeIn(500);
$('#infographic').delay(800).fadeIn(200);
});
});
Now when I click $('#gallery') again, I want the above to reverse.
Anyone??
This should work:
$(function(){
$('#gallery').click(function(){
$('.overlay').toggle(500);
$('#infographic').delay(800).toggle(200);
});
});
http://api.jquery.com/toggle/
Since your fade-in has the infographic starting 300ms after the overlay finishes, I've reversed the steps and modified the delay so that the overlay will fade out 300ms after the infographic does. The following code will exactly reverse your fade-in.
$(function(){
$('#gallery').click(function(){
// Check the current state - are things visible? If yes, fade out
if ($('#inforgraphic').is(':visible')) {
$('#infographic').fadeOut(200);
$('.overlay').delay(500).fadeOut(500);
// If not visible, fade in
} else {
$('.overlay').fadeIn(500);
$('#infographic').delay(800).fadeIn(200);
}
});
});
I am pretty sure everyone knows the hover issue in IE6.
I tried to fix the problem by using "csshoverfix.htc" or "whatever:hover". I downloaded it from the writer's page, and ofcourse I added
body { behavior:url("csshover.htc"); }
to my css file, But it didnt help.
I also tried to use jquery hover function:
$(document).ready(function(){
$('#autoSuggestionsList li').hover(
function(){
alert("test");
},
function(){
alert("test");
})
});
But also it didnt work.
I dont know if it can be the reason why it doesnt work, but the <li> with the hover, are made in real time (ajax).
anyway, how can I fix the hover issue?
Thank you.
I dont know if it can be the reason why it doesnt work, but the <li> with the hover, are made in real time (ajax).
Possibly. Try using .live() instead so that it works with elements that come from Ajax responses:
$(document).ready(function() {
$('#autoSuggestionsList li').live(
{
mouseover: function() {
alert("test");
},
mouseout: function() {
alert("test");
}
});
});