When links on my page are clicked, a spinner and a message appear on the page. It works, and they disappear appropriately when the new page is loaded in.
I utilized spin.js found here to implement the loading spinner.
I found a bug though. When a user clicks the back button on their browser, it goes back to the previous page, but in the state of displaying the spinner and error message. I want to of course go back to the state where the message is hidden and the spinner is not showing.
According to this post, it sounds like the issue might have to do with cacheing.
I am using the jquery-turbolinks gem
Below is my code:
#app/assets/javascripts/foo.js
$(document).ready(function(){ #for turbolinks compatability
(function default_hide_waiting_message(){
$("#waiting_message").hide();
}());
(function display_loading_spinner_and_message(){
$(".show_loading_spinner_on_click").on('click', function(){
var opts = {
lines: 12 // The number of lines to draw
, length: 7 // The length of each line
, width: 5 // The line thickness
, radius: 10 // The radius of the inner circle
, scale: 1.0 // Scales overall size of the spinner
, corners: 1 // Roundness (0..1)
, color: '#000' // #rgb or #rrggbb
, opacity: 1/4 // Opacity of the lines
, rotate: 0 // Rotation offset
, direction: 1 // 1: clockwise, -1: counterclockwise
, speed: 1 // Rounds per second
, trail: 100 // Afterglow percentage
, fps: 20 // Frames per second when using setTimeout()
, zIndex: 2e9 // Use a high z-index by default
, className: 'spinner' // CSS class to assign to the element
, top: '50%' // center vertically
, left: '50%' // center horizontally
, shadow: false // Whether to render a shadow
, hwaccel: false // Whether to use hardware acceleration (might be buggy)
, position: 'absolute' // Element positioning
}
var target = document.getElementById('spinner')
var spinner = new Spinner(opts).spin(target)
$("#waiting_message").fadeIn('slow');
});
}());
});
The issue is happening because the $(document).ready function isn't getting called when you hit back. You'll need to update your javascript to accommodate Turbolinks.
Instead of using $(document).ready try using the appropriate page event, such as page:load. The available options are listed in the Turbolinks docs
Your final javascript would have something similar to $(document).on("page:fetch", default_hide_waiting_message)
$(window).bind("pageshow", function(event) {
$("#waiting_message").hide();});
Related
I purchased a slider plugin called MightySlider http://codecanyon.net/item/mightyslider-responsive-multipurpose-slider/5898508 I need a simple automated carousel that scrolls smoothly from the beginning to the end and then either loops or reverses direction. I've played with the settings enough to allow for a smooth scroll from beginning to end by setting the 'speed' and the 'cycling: {pauseTime}' parameters to be equal. No I have a delay of 20s (equal to the speed of the slider).
It's a long shot but can anyone help with the parameters to this or help me write a javascript hack to trigger the slider to start moving on page load or 1-2s after? Alternatively, could anyone recommend a different slider?
Site is here: http://smmcnyc.com/work/1919market/
JSFiddle is here: https://jsfiddle.net/fhhdxnum/
$(".frame").mightySlider({
// Mixed options
moveBy: 9000, // Speed in pixels per second used by forward and backward buttons.
speed: 20000, // Animations speed in milliseconds. 0 to disable animations.
easing: 'linear', // Easing for duration based (tweening) animations.
startAt: 10000, // Starting offset in slides.
startRandom: 0, // Starting offset in slides randomly, where: 1 = random, 0 = disable.
viewport: 'fill', // Sets the cover image resizing method used to fit content within the viewport. Can be: 'center', 'fit', 'fill', 'stretch'.
autoScale: 0, // Automatically updates slider height based on base width.
autoResize: 0, // Auto resize the slider when active slide is bigger than slider FRAME.
videoFrame: null, // The URL of the video frame to play videos with your custom player.
preloadMode: 'nearby', // Preloading mode for slides covers. Can be: 'all', 'nearby', 'instant'.
// Scrolling
scrolling: {
scrollSource: null, // Selector or DOM element for catching the mouse wheel scrolling. Default is FRAME.
scrollBy: 0, // Slides to move per one mouse scroll. 0 to disable scrolling.
hijack: 300 // Milliseconds since last wheel event after which it is acceptable to hijack global scroll.
},
// Pages
pages: {
pagesBar: null, // Selector or DOM element for pages bar container.
activateOn: null, // Event used to activate page. Can be: click, mouseenter, ...
pageBuilder: // Page item generator.
function (index) {
return '<li>' + (index + 1) + '</li>';
}
},
// Automated cycling
cycling: {
cycleBy: 'pages', // Enable automatic cycling by 'slides' or 'pages'.
pauseTime: 20000, // Delay between cycles in milliseconds.
loop: 1, // Repeat cycling when last slide/page is activated.
pauseOnHover: 0, // Pause cycling when mouse hovers over the FRAME.
startPaused: 0 // Whether to start in paused sate.
},
});
Advice or a workaround would be very helpful!
Try nivo slider.
If you bought slider you can ask the customer support to do this.
Change cycling pouse time:
cycling: {
cycleBy: 'pages',
pauseTime: 1000,
or if this does not suit you:
I'm not sure if this is the best way, but this is how you can do this.
You will need to edit mightyslider.js
scroll down to function requestHandler and after timestamp=_now(); add (line ~2728) . These lines will start slide cycling if onLoadStart is true.
if(o.cycling.onLoadStart){
o.cycling.onLoadStart += -50;
if(o.cycling.onLoadStart == 0 || o.cycling.onLoadStart == true){
cyclingActivate();
o.cycling.onLoadStart = false;
}
}
add this value into mightySlider.defaults array line ~6648
// Automated cycling
cycling: {
.........................
startPaused: false,
onLoadStart: true
}
now you can pass in additional option into mightySlider
$(".frame").mightySlider({
........
// Automated cycling
cycling: {
..........
startPaused: 0,
onLoadStart: 1000 // true -- start immediately after load,
// false --- with delayed start,
// or enter time in miliseconds which is iess than delayed start.
}
...............
});
I'm using the great onepage_scroll plugin for a site. Below a set threshold the page reverts to normal scroll behaviour. However at this point - when I try to use scrollTop() to get the distance from the top of the page it always returns 0.
var vph = $(window).height();
var responsiveThreshold = 640;
$(".onepage_scroll").onepage_scroll({
sectionContainer: "section", // sectionContainer accepts any kind of selector in case you don't want to use section
easing: "ease", // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in",
// "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
animationTime: 1000, // AnimationTime let you define how long each section takes to animate
pagination: false, // You can either show or hide the pagination. Toggle true for show, false for hide.
updateURL: true, // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
beforeMove: scrollCatchBefore, // This option accepts a callback function. The function will be called before the page moves.
afterMove: scrollCatchAfter, // This option accepts a callback function. The function will be called after the page moves.
loop: false, // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page.
keyboard: true, // You can activate the keyboard controls
responsiveFallback: responsiveThreshold // You can fallback to normal page scroll by defining the width of the browser in which
// you want the responsive fallback to be triggered. For example, set this to 600 and whenever
// the browser's width is less than 600, the fallback will kick in.
});
// Fix menu if page is too small
if(vpw<responsiveThreshold) {
$("#navigation").hide();
/* Every time the window is scrolled ... */
$('body').scroll( function(){
var scrollPos = $('html').scrollTop();
console.log(vph);
console.log(scrollPos);
if(scrollPos > vph) {
$("#navigation").fadeIn();
} else {
$("#navigation").fadeOut();
}
});
}
I've also tried both of the following:
$('body').scrollTop();
$('.onepage_scroll').scrollTop();
$(window).scrollTop();
Looking at how onepage_scroll works, it is not moving the body or the divs in a typical manner. So scrollTop is not the solution here.
It is using translate3d on the following div in question...
<div class="main onepage-wrapper">
With the following modified styles as the plugin operates...
-webkit-transform: translate3d(0px, -100%, 0px);
This answer may be of use to you...
Get translate3d values of a div?
To know current index of section:
var nCurSect = $("section.active", ".main").data("index");
Then you can just multiply it to the screen height and get offset.
I'm having trouble doing a relatively simple task. I'm using jAlerts (http://www.abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/), which I'm aware is no longer supported, and trying to change the text of the buttons into a variable.
As of now, here is the beginning code of jAlerts, in which the buttons are defined as strings:
$.alerts = {
// These properties can be read/written by accessing $.alerts.propertyName from your scripts at any time
verticalOffset: -75, // vertical offset of the dialog from center screen, in pixels
horizontalOffset: 0, // horizontal offset of the dialog from center screen, in pixels/
repositionOnResize: true, // re-centers the dialog on window resize
overlayOpacity: .01, // transparency level of overlay
overlayColor: '#FFF', // base color of overlay
draggable: true, // make the dialogs draggable (requires UI Draggables plugin)
okButton: 'Ok', // text for the OK button
cancelButton: 'Cancel', // text for the Cancel button
deleteButton: 'Delete', // text for the remove button
dialogClass: null, // if specified, this class will be applied to all dialogs
What I'm trying to do is replace those with variables (in this case I'm using a large JS array):
$.alerts = {
// These properties can be read/written by accessing $.alerts.propertyName from your scripts at any time
verticalOffset: -75, // vertical offset of the dialog from center screen, in pixels
horizontalOffset: 0, // horizontal offset of the dialog from center screen, in pixels/
repositionOnResize: true, // re-centers the dialog on window resize
overlayOpacity: .01, // transparency level of overlay
overlayColor: '#FFF', // base color of overlay
draggable: true, // make the dialogs draggable (requires UI Draggables plugin)
okButton: property_dict['allDialog.OK.button.text'], // text for the OK button
cancelButton: property_dict['grid.Confirm.Delete.cancel'], // text for the Cancel button
deleteButton: property_dict['grid.Confirm.Delete.remove'], // text for the remove button
dialogClass: null, // if specified, this class will be applied to all dialogs
I see that at the top of the page, it says that these properties can be changed by accessing $.alerts.propertyName in your scripts -- the problem is, there seems to be no documentation anywhere on how to actually do this.
Can any jAlert ninjas out there help me out:?
You do exactly what it said - "accessing $.alerts.propertyName in your scripts"
to change the text on the ok button:
$.alerts.okButton = 'string literal or variable here';
to change the text on the cancel button:
$.alerts.cancelButton = 'string literal or variable here';
i have this code: http://jsfiddle.net/Ym4NP/2/ why the 'content' div does not move to up , move only to down ? and how i send $this ( selector ) to callback function ?
I would just use jQuery UI to do this effect.
See this fiddle:
http://jsfiddle.net/kEKtw/2/
With this code
$(document).ready(function() {
$('#main').effect("shake", {direction:'up', times:10}, 0);
});
Notes:
I changed the css to make the numbers add up or the UI code would have issues.
If you look at how jQUI implements shake you will see the "effects" stack is implemented as an array as I suggest below.
The reason positions should be an array:
What you really want to do is set up a sequence like this:
move up random amount
wait set time
move back to center
wait set time
move down random amount
However using positions as an object does not give ordering nor does it allow you to repeat commands (since ever command is an object property name which must be unique.)
If it was an array you could set up something like this to pass into the plugin:
positions: [
'U': -300,
'W' : 1000,
'C' : 0,
'W' : 1000,
'D': 300
],
Old answer
The code is complex, but your problem is simple.
At each "move" in the shake you change the relative location of the top or bottom to a new number from 1 to 300. This means the item will move between 1 and 300+object size. I believe what you want to do is move it between -300 and +300. To do this you will need to change the U command to set a value of -300 to 0 not 0 to 300
There is another error in the logic -- it does not reset the box to the center.
I would like to create a Mootools ajax tooltip with following script
new MooTooltips({
extra:{
0: {
'id':this.id,
'ajax':'http://www.fesn.cz/communities/tip.php',
'ajax_message': 'Loading... please wait.',
'position':1,
'sticky':false
}
},
ToolTipClass:'ToolTips', // tooltip display class
toolTipPosition:-1, // -1 top; 1: bottom - set this as a default position value if none is set on the element
sticky:false, // remove tooltip if closed
fromTop: 0, // distance from mouse or object
fromLeft: -55, // distance from left
duration: 300, // fade effect transition duration
fadeDistance: 20 // the distance the tooltip starts the morph
});
}
Script demo is here,
http://jsfiddle.net/kyathi/mHEjV/.
Idea behind is while mouseenter every tippable class will show an ajax tooltip. But script fails to call ajax script at first time when hover the div and it will involk thereafter.
Any idea to fix the error?
Thanks
I commet out the toolTipPosition:-1 And not its displaying the tooltip. But the alignment is out.
http://jsfiddle.net/mHEjV/1/
the $$ function return always an array.. you are adding the events on an array and not on the elements of the array. You need to do a loop or use the each() method:
$$('div.tippable').each(function(div){
div.addEvents({
mouseenter:function(){
...
http://jsfiddle.net/mHEjV/2/
And it wont work in jsfiddle since the ajax call uses a different domain.
http://en.wikipedia.org/wiki/XMLHttpRequest#Cross-domain_requests
Good Luck