Develop Reference

Display loading icon when transitioning between divs

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/

Increment when element becomes visible?

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() {
});

Removing an Image from Canvas on Double Click

I'm Dragging and Drooping an image from a toolbar onto a canvas and then moving it around in the canvas.Currently I'm able to load a single image onto a canvas multiple times from the toolbar as shown in the link below.
http://jsfiddle.net/gkefk/22/
I want to add the functionality of deleting a particular copy of the image from the canvas when the user double clicks on that particular image.For this I'm triggering a jQuery event on double click.
$("#image").dblclick(function(){
layer.remove();
});
Even though I'm double clicking on a particular copy the image,that particular copy is not getting deleted from the canvas.I can't understand what I'm doing wrong..Please Help
The link to the fiddle containing the jQuery event
http://jsfiddle.net/gkefk/23/

Updated your fiddle to make it work:
image.on('dblclick', function() {
image.remove();
layer.draw();
});
http://jsfiddle.net/gkefk/26/
You have to add an event handler to each copy of the image instead of trusting in jQuery to dynamically do this.
Your jQuery call is done once on document load (while no element with id "image" exists) and has no effect afterwards. Also keep in mind that it's not a good idea to work with a static ID on multiple dynamic elements as an ID has to be unique.

Troubleshoot simple jquery expand/collapse with iframes?

I've got a div containing 3 divs, each containing an iframe. The 3 internal divs are 115px tall, and when you click on "view more" for each one, they all collapse, and the one then slides down to 200px.
I would like when that 200px tall one is clicked again, it will collapse and they will ALL slide down back to 115px, kind of like resetting it?
I spent 2 hours last night trying to figure it out and I'm SURE it's simple, but I'm not sure what I'm doing wrong :/
Here's the fiddle http://jsfiddle.net/demchak_alex/zUDBN/1/

Here is the solution: http://jsfiddle.net/zUDBN/5/ There were two issues. The first is that you needed this code $('.partner-wrap').slideDown("slow"); when you clicked on an item that was already selected. The second was that you were binding wrong. When you do this: $('a.normal').click(...); that will bind that function call to the objects returned by that selector on page load. After page load it doesn't matter what the selector is anymore. So that function was firing whenever the links were clicked regardless of whether they had the "normal" or "showing" class. Your second selector wasn't working for the same reason: $('a.reviews-trigger.showing').click(...);

Items in Sencha Touch Carousel disappearing

I'm currently building an application using Sencha Touch. We have a certain Carousel on a page that contains multiple items. Upon clicking a button on a different panel, certain items are added and removed to the panel.
The problem: all works as planned for the first click, but clicking upon clicking the same button again, the functionality stops working and the Carousel display turns blank, with none of the items visible.
Below is the handler for the buttons that change the content of the carousel itemsCarousel. The function adds itemPanels[ b.getBadgeText() ] to the itemsCarousel's items. For the first four clicks or so, this works great. After around then, when I click a button, all the items in the Carousel vanish, and I cannot add or remove any more content, even invoking the Carousel manually from the console.
handler: function(b, e) {
itemsCarousel.insert(1, itemPanels[ b.getBadgeText() ]);
itemsCarousel.doLayout(); itemsCarousel.doComponentLayout();
itemsCarousel.setActiveItem(1);
itemsCarousel.remove(0, false);
}
Things I have attempted:
Changing the order by inserting the item at slot 0, setting 0 active, and then removing 1.
Putting javascript breakpoints on each of the lines, seeing where the carousel goes blank. Sometimes it occours at the .insert() statement, sometimes at the .remove().
Doing all this manually, from the console.
Tweaking the autoDestroy parameter in the .remove() call (as seen above) and in the declaration of itemsCarousel.
If you need more code I can post whatever you think may be relevant, I didn't want to pollute this thread with excess code. Thanks for your help!
Edit: If anyone knows another way to reproduce the same functionality, I am open to that as well. I am thinking perhaps creating a dummy holder Container with one item, a carousel, and deleting the entire carousel and re-adding a brand new (with the new items) one upon the button click?

Well, I figured out how to reproduce the functionality using a different method.
I built multiple carousels, each containing the panels I wanted, and then had a root panel that simply sets the active carousel based on button presses. For example, the hierarchy looks like this now:
rootPanel
{
carousel[0]
{
panel1
panel2
}
carousel[1]
{
panel3
panel4
}
...
}
and I perform rootPanel.setActiveItem(x) to display the new carousel.