I am working with the skrollr plugin.
I have a set of arrows. One points down and the other up. When you click the down arrow it takes you to the next section/chapter of the animation. Right now it works great. But my issues is lets say the user does the following:
He/she scrolls half way through the page(lets say section 5). They then decided to see how much of the animation is left. So they click the next section arrow.
This user will be put to section 2 even though they are at section 5 because I have no way to detect when the user hits each section so I can update the arrow #hrefAnchor.
What I was thinking is adding an interval/ event listener that would detect when the section is visible on the DOM and update the arrows to take you to the previous and next sections.
Does anyone know how I can approach this idea?... and will work in ie >= 9
If you're willing to modify the Skrollr library, something I had done was add:
else if(prop === 'javascript') {
eval(val);
}
as an option in skrollr.setStyle which allows then for you to add a hook for arbitrary JavaScript code on elements like each section here using data-XXX="javascript:myFunction();" and I believe Skrollr will even still interpolate numbers in your arguments for you.
If you have control of what gets executed when "next" is clicked, can you check the scroll value at that time to determine which section it is between and switch on that to send them to the appropriate section? Essentially, rather than trying to keep the target current at all times which is wasteful/difficult/error prone, just calculate it when it matters - when the click occurs.
If you give your element a class like "visible", you could select all the visible elements by using jQuery:
$(".element.visible:last-of-type").on("click", function() {
});
Related
I'm not sure whether I'm using the right terminology here - but here is an example:
https://gist.run/?id=57ed46429e4583eb4c3fb11814451a55
This is how it looks like in Chromium:
Basically, the entries on top (red outline) are a visualization of an array as the "first-level" data display; here one can toggle each element's selection, and make a multi-element selection (red background). The array that is the source of the "first-level" display is mydata in first-level-items.js.
Those items that are selected in "first-level", are then shown again in "second-level" (green outline); here the same information of name and value is displayed, although a bit differently. Here also one can toggle an elements selection - but only one "second-level" element can be selected. The array that is the source of the "second-level" display is myseldata in second-level-items.js.
The intent here, is that once a "second-level" selection has been made, a slider appears, to change the .value property of the particular object which is the selected array element.
My original question (which is why I started this post/example at all), was:
How do I ensure that whenever the slider is changed, the value is updated in both second-level and first-level display?
... however, for reasons beyond me, this in fact does work somewhat in this gist.run example (but it still doesn't work in my actual project, which forced me to come up with the example to begin with). Also it only works somewhat, in the sense that when loading the example page at first, after making first and second level selections, and then changing the slider, the .value will be updated in both first- and second-level display. But as soon as I try deselecting on second level - or changing the selection on second level - then updating stops. So, I guess this question still stands...
After a second-level selection has been made, deselecting on second level (by clicking to toggle) does NOT remove the slider; how can I have it behave like that?
The update happens only on the slider's onChange - basically, while you drag and slide, this component emits onSlide, but it will generate onChange only at the end when the mouse is released (that is, when the sliding has stopped). How can I update both first- and second- level display while the slider is sliding?
And finally - is this how this kind of a problem is best addressed in Aurelia? That is - I currently have one array in first-level-items.js; first-level-items.js then has a singleton reference to second-level-items.js, so it can call a method within it, to change a filtered copy of the array on the second level, which then serves as a source both for second-level display and the slider... Is there a better way to organise this?
Boy, this was a pain, but here's what I think is the solution:
https://gist.run/?id=c09fea3b82a9ebc41e0a4c90e8665b04
Here are some notes:
Apparently, there is something wrong applying if.bind or show.bind on the input element of the slider - instead, the input element should be put in an enclosing div, and the div should have if/show.bind applied
Furthermore, if.bind should not be used, as it re-instantiates the slider element - use show.bind so we can get a reference to the slider widget at start already, even if it is hidden
Seemingly, using TaskQueue in attached() is the only way to get a reference to the slider at start
Once we have a reference to the widget, re-apply it on each second level element, whenever they change
Do not set this.myselChanging to null to specify no target of the slider (simply count on hiding the slider appropriately)
For a continuous change (onSlide), simply use this.myselChanging.value = e.value; in the handler - both first-level and second-level values will be changed
Beyond this, it seems arrays are copied by reference, so the multi-level update happens without further intervention...
Though, would still love to know what is the proper way to do this...
I have a form, that when the "Next" button is clicked, a new div appears in place of the old one with this code:
function showDiv() {
document.getElementById('2').style.display="block";
document.getElementById('1').style.display="none";
}
I am then, once the form is submitted, sending my data to a server so that it is emailed to me. The problem is that the previous action, the transition between divs after the button click, is being performed far too quickly. People have told me that it would look a lot better with some sort of transition or a quick loading icon, and that it doesn't look authentic.
Is there any way to have my second div "slide" into the position of the new one? Or some sort of transition? Keep in mind, this is just switching two divs out for one another. No actual data is being processed yet, and no new page is being loaded. Or is there any way to create a loading icon on this action to last for 1second?
Thank you for your help.
Try this
// send data
// show loading gif
setTimeout(function () {
// hide loading gif
// show other div
}, 2000);
You get a 2 second delay this way. Hope it helps.
I assume you're open to using jQuery based on your tags. jQuery offers a number of ways to animate changes to divs. .animate() provides a way to do custom animations, or your can use one of the provided options. In your case, perhaps something like .fadeToggle() would work?
Detailed information here: https://api.jquery.com/category/effects/
I'm working on building a new website purely for learning purposes and I want to try and implement some drag/drop sorting system. I am aware that jQuery provide the sortable UI component http://jqueryui.com/sortable/ but I want to have a go at designing and building the system from scratch (seen as this is for learning purposes).
When it comes to Javascript I have to admit I am fairly novice, so I was wondering if any of you could offer your 2 cents against my current thinking of how the program would work:
An un-ordered list sits at the top of the page (navigation bar), each item is assigned a the class 'draggable x' where x is its current position in the list
An event listener is bound to each li element within the list
When an on-mouse-down is made on an element a variable is set telling which cell has been clicked, this then creates a thumbnail under the cursor (hides the old cell) and allows the user to drag
When the mouse is released the list item is slotted into its new position by updating its class number, whilst decrementing all class numbers behind it
Questions:
1) My main problem with this is, how do I detect when I have passed another li element when dragging? I could assume width n has been passed, but each cell could be of variable length making that solution inappropriate.
2) I am also assuming I am going to need to use AJAX to handle the callback, otherwise I am going to get some undesired page refreshes (right)?
Hopefully this won't receive down votes - I want to stress that I am NOT seeking a solution from you guys, I have used these forums long enough to know that I don't demand code from the community without providing any of my own work! I'd just like some feedback on my initial draft as well as answers to the 2 questions asked above.
Thanks in advance for your time
Alex.
If you are using JQuery you can avoid having to know what order your items are in.
The .index() function will return the position of the item relative to its siblings.
You can then simply keep track of the element you want to move by adding a working class to it on a mouse down even. (I use .draging in my example)
On the mouseup event just find our old item by the class you added. Depending on which element is first compared to the other, insert your working element before or after the element you mousedup on and then remove your working class.
Here is an example
http://jsfiddle.net/V72Le/2/
function swap(dragable, draging) {
//find direction of move then move item based on direction
var from = $(dragable).index();
var to = $(draging).index();
if (from > -1 && to > -1) {
var direction = from - to;
if (direction > 0) {
$(draging).insertAfter($(dragable));
} else if (direction < 0) {
$(draging).insertBefore($(dragable));
}
}
}
Is there a way to add keyboard navigation to links with just css3, without js or any js library? specifically, I have created a pure css3 lightbox effect with a bunch of images but I want to navigate between images using left and right keys without clicking anywhere on the screen and use escape to get the effect of "cancel" button (similar to Close)
What you are asking for is literally impossible with Cascading Style Sheets , You can animate your sequences for timing or do stuff like animating , transitions with CSS but you cannot do what you want to do with CSS only!.
Reasons
Cascading Style Sheets were made for making the visual elements of the page and not the UX
Css has no method for interaction with Keyboard.
You can either add a little bit of javascript for making this happen . But as you don't wanna use javascript you are stuck !
Checkbox hack
With checkbox radio box something like this is attainable but then again the focus initially
requires to be brought . which can be done using autofocus attribute ..
So this fiddle should solve your issue.
http://jsfiddle.net/darkyen/NUtnX/
But i want to warn you before hand any "blur" will cause this to fail. so the better javascript code varient is listed below
JavaScript Code
The javascript code for achieving what you want will contain very minimal javascript
Say your markup is
So you can simply assign a lil javascript
(function(){
var slide = 0, // Current slide
max = 10, // Maximum Number of slides
ele = document.getElementById("show");
document.addEventListener('keydown',function(e){
e.preventDefault();
e.stopPropagation(); // To stop more event stuff and default behaviour
key = e.keyCode; // To find out what key is this
if( key === 39 ){
// Right arrow
// Aha we incremented the value!
slide++;
slide %= (max+1);
// Increase the value of slide by 1 and keep em in limits
}else if( key === 37){
slide = (--slide >= 0)?slide: ( slide + max );
// Will decrement the slide value by 1 and if they are less then 0 then will cycle it to the last slide
}
ele.className.replace(/slide[0-9]/gi,'slide'+slide);
// wasn't hard now was it ?
});
})();
The minimal javascript above will do the task of changing your slides or you can always see the source code of impress.js
Right now i am using the awesome flexible-nav
to display the current subtopic i am at in my post.
Additionally to that I was wondering whether I could take this current // string and display it on top of the page in my actual navigation bar. So that the text would change as i scroll and as the flexible-nav changes.
Thanks in Advance
You need to append some code to flexible-nav.js, I suggest you make modification in expanded one and minify it later.
After the line 208 of flexible-nav.js (i.e. closest && closest.node.addClass('current');) add these lines of code.
var doc_title = closest.node.html();
$("title").html(doc_title);
This code changes Title as you keep on moving down the scroll. I wasn't able to figure out call back function in the script (presuming if they have any) but this should work just fine.
You can add any of jQuery selector of your wish instead of $("title") in the code.