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/

flip image using jquery on button click?

I'm trying to create a simple drag and drop web application using jquery.
everything so far works as it should.
now what I am trying to do is to add a button to the page so when its clicked, it will FLIP the selected image and I am not having any luck with at all.
I have created a jsfiddle so you can see it for yourself: http://jsfiddle.net/7btkn17q/8/
drag and drop a book image onto the box bellow it and click once inside it, and you will see a button appear at the top of it which says flip.
I need to use that button to flip the selected image.
for that I used this:
$('#flip').click(function(e){
if( $(e.target).closest(".drag").length > 0 ) {
$(e.target).closest("#droppable .drag img").css('border', 'solid 5px #000');
}
});
but this does not have any affect on the image(s) at all. I know that the code above is not for flipping the image(s). i just created that code as a test to see if I can access the image(s) on button click with no luck.
could someone please advise on this?
EDIT:
EVEN though I thought this would work, it didn't and I am so confused on why it didn't work:
$('#flip').click(function(e){
if($(e.target).closest(".drag").length > 0 ) {
$(e.target).closest("#droppable .drag").find('img').css('border','5px solid #000');
}
});
Second Edit:
I've tried to use the remove() function to see if i could get the img and somewhat I could make it work but similar to the answer bellow, it will remove ALL the img's instead of removing the selected only:
$(e.target).parent().siblings(".drag" ).find(".img" ).remove();
is there any way to apply the CSS or remove() to the selected element only?

When selecting an image, you can set a class to it. Let's add selected to it.
When selecting another image we just remove the selected class from other elements and add it to the one we just selected.
Here's my fiddle
Another problem I noticed, was that you were trying to test this by changing the border of the selected element. When you click the flip button, the image gets unselected and the border is changed to medium none (Remember, firebug/devtools are your friends.).
So I changed it to change the outline css property to see that the button works.
You also might want to update from jQuery 1.6 as the event handling is so much easier with the .on() function.

'.closest()' only travels up the DOM tree; you'll need to do something like this to target the images:
$('#flip').click(function(e){
if( $(e.target).parent().siblings(".drag").length > 0 ) {
$(e.target).parent().siblings(".drag").find('img').css('border','5px solid #000');
}
});
updated jsfiddle: http://jsfiddle.net/7btkn17q/9/

jQuery and Wordpress changing css depending on the page selected

I have a menu and depending on which page the user is currently on, I would like a border to show up under that menu item. For example if the user is on the home page, there would be a blue border underneath the home text on the navigation bar.
I am having trouble figuring out what page the user is on using jQuery.
Normally I would use CSS and on each page manually change the class in the html but since I'm dealing with Wordpress I can't change the ids unless I work with a walker but I figured I would give it a try with jQuery.
I tried setting each page as a variable such as:
var homeUrl = 'http://example.com/';
if (document.URL.is(homeUrl)) {
$('#link-one').css('border-bottom', '1px solid #000');
};

Please try use plugin Zia3 CSS JS :D

How to animate two pics using jquery or javascript?

I have two images and i want to animate these on click of a button.i want when i click on button then both images comes closer to each other. How can do it? can someone please help me to do it.

Something like:
$('input[type=button]').click(function() {
$('#pic1').animate({left:+=50});
$('#pic2').animate({left:-=50});
});

On button click, get both elements by jquery or java and change their postions.
Write down your HTML so that I can help you with the code.

Auto Update a piece of text depending on position

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.