Develop Reference

Animation after submiting

I have questioner in HTML and one submit button:
<Input type = "Submit" Name = "Submit6" VALUE = "Dalej >">
I use jQuery to protect situation that user can click two times in submit button with this code:
<script>
$('form').submit(function(){
$(this).find(':submit').attr('disabled','disabled');
});
</script>
Now I want develop this part of script to show also gif animation during loading process. I saw that my users don't know why this system doesn't work and they try to click next time submit but it's disable.
I have two idea how can I solve it. One is show gif animatino (like ajax or something different) and second extinguish the page with animation. First will be more easy and for me is OK.
Can you give me tips?

Assuming you are using ajax request to post your data to server,
Add an image to the html page,
<img id='waiting' src="waiting.gif" style="display:none"/>
And change the script like this,
<script>
$('form').submit(function(){
$(this).find(':submit').attr('disabled','disabled');
$("#waiting").css("display","block");
$.post("/url/to/post/data", function(){
$("#waiting").css("display","none");
});
});
</script>

use the button instead of sumit
$(document).ready(function(e) {
$("form :button").click(function(){
$(this).attr('disabled','disabled');
$("html").fadeOut("1000",function(){ // fade animation
$("form").submit();
});
})
});

If you are using Bootstrap, there is a component for this kind of functionality,
http://getbootstrap.com/javascript/#buttons
Getting inspired from this I've also created a button that toggles classes while making it enabled or disabled, and based on the current class you can show different texts on each state
<button class="btn-progressive">
<span class="button-label">Log In</span>
<i class="icon-spinner icon-large icon-spin"></i>
</button>
and using css you can do,
.btn-progressive .icon-spinner { display: none; }
.btn-progressive.progressing .icon-spinner { display: inline; }
.btn-progressive.progressing .button-label { display: none; }
So while toggling button's enable state, we can also toggle 'proressing' class.
P.S. If you are ok with CSS3 compatibility, you can also use disabled attribute for these CSS rules

Toggle the nearest content when click on anchor using jQuery

I have a content structure like this:
Click me.
<p class="hidden_content">This content is toggleable.</p>
Click me.
<p class="hidden_content">This is a different section.</p>
Click me.
<p class="hidden_content">This section is also different.</p>
I have already discovered how to make this work with one section, but how can I make it so that when I click on a toggle_button it opens only the nearest hidden_content class.

$('a.toggle_button').click(function() {
$(this).next('p.hidden_content').toggle();
}
http://api.jquery.com/next/

Simply try
$("a").click( function(){
$(this).next('p').toggle();
});
Working Demo

It's easy with JavaScript but you could also stay with plain CSS with the :target selector --
Click me.
<p id="hiddenContent1" class="hidden_content">This content is toggleable.</p>
<style>
.hidden_content{
display:none;
}
.hidden_content:target{
display:block;
}
</style>
Here's a Fiddle

This will toggle the following div, and stop the page returning to the top:
$('a.toggle_button').click(function(e) {
e.preventDefault();
$(this).next('p.hidden_content').toggle();
}

Use the jQuery .next() selector
$(".toggle_button").on("click", function () {
$(this).next(".hidden_content").toggle();
});

Manually Advancing Orbit Slider

I'm using the Zurb 'Orbit' Javascript slider, http://www.zurb.com/playground/orbit-jquery-image-slider, and I'd like to fire my own javascript at it to manually advance the slider left or right.
Basically, I'd like to fill it with my content, then have that content 'slide' in an out of view depending on a user interactions with the page as a whole, not only on a timer function or clicking a navigational image as already provided by the library.
So if I have a link named 'myLink', then something like this...
$('#myLink').click(function() {
... code to advance javascript slider...
$('#content').orbit(?????);
});
Failing that, my 'content' is going to be an html form and other similar stuff, anyone know a good free library that already does what I want?

Get a reference to the orbit object using "afterLoadComplete":
var myOrbit;
$(".orbitSlides").orbit({
afterLoadComplete: function() {
myOrbit = this;
}
});
Then use the 'shift' function to change slides:
myOrbit.shift(1);
or
myOrbit.shift('prev');
or
myOrbit.shift('next');

The easiest way would be
$(".slider-nav .right").click();
to simulate the arrow being clicked. Change if necessary to account for using the bullet-navigation option.
I don't think you're going to get anything more elegant than that, because the plugin doesn't expose an API of any sort - it's all privately closured up in the plugin.

I use this
$('#next').click(function(){
$('#rotator').trigger("orbit.next");
})
$('#prev').click(function(){
$('#rotator').trigger("orbit.prev");
})
assuming the div #rotator is the orbit slider.

I couldn't get some of these other answers to work. I know it's a little hacky but I found this easiest:
HTML:
<p id='back'>Back</p>
<p id='next'>Next</p>
CSS: (if you use the built-in navigation_arrows: false;, navigation arrows are removed and can no longer be manipulated, so visibility: hidden; to the rescue!)
.orbit-prev, .orbit-next {
visibility: hidden;
}
jQuery:
$('#back').on('click', function() {
$('.orbit-next').click();
});
$('#next').on('click', function() {
$('.orbit-prev').click();
});

Controlling toggling buttons with CSS and jQuery

As you can see in this jsfiddle, I'm trying to make a toggle switch (a mute button) that
displays the current setting, i.e. mute or unmute
when hovered upon, displays the alternative
However, my problem is when the user clicks the button, instead of displaying the opposite button, it shows that opposite buttons hover state. I hope this is making sense, haha. Basically the interaction is:
view button in unmute state
hover over and see the mute icon
click and see the unmute icon again, because it is the mute states hover image
when the icon is not hovered upon, it displays the proper icon, i.e. mute
In the jsfiddle example, I want a click to display the button, not the :hover attribute... any help? I'm aware that this kinda thing can't be handled by css alone.. (sorry if this seems confusing, ive been working in codespeak for a while today...)

Consider this alternative solution:
uses single button
manipulates .text() and .css() to change button attribute
custom toggler implemented because of special cases you require
Here is the code:
CSS:
button { width: 200px; height: 60px; color: white; font-size: 20px; background-color: red; }
HTML:
<button class=''> Mute </button>
JS:
function unmute() {
$('button').removeClass('muted');
$('button').text('Unmute');
$('button').css('background-color','blue');
}
function mute() {
$('button').addClass('muted');
$('button').text('Mute');
$('button').css('background-color','red');
}
function customToggler() {
if (disableToggle) return;
if ($('button').hasClass('muted')) unmute(); else mute();
}
var disableToggle = false;
$(document).ready(function() {
customToggler();
$('button').click(function() {
disableToggle = true;
customToggler();
});
$('button').mouseover(function() {
customToggler();
}).mouseout(function() {
customToggler();
disableToggle = false;
});
});
--
To see the above code in action, see http://jsfiddle.net/fwjz5/ Good luck!
​

You can handle hover states in javascript and remove CSS ones.

Well, I think this is the shortest solution right now:
http://jsfiddle.net/4mK9q/

HTML Divs show/hide issue

Hi friends I have issue with divs.
I have a link show/hide dive on my page on clicking which i have to show or hide specific divs.
I am successful with doing it.
But my issue is that whenever I click on that link div is get hide or shown but page get directly on the top & I have to scroll to down again.
I don't want to scroll this and don't want to get to top.
Please help me out with this.
Thank You in advance.
Update:
Friend I got the answer from one of my friend.
Actually I was using
Because of href="#" URL get changed and page got to top every time I click on that link.

Are you trying to do this?
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<div id="wrapper">
<div id="container">
</div><!-- end of #container div -->
<a id="showdiv">Show the div</a>|<a id="hideDiv">Hide the div</a>|<a id="toggle">Toggle</a>
</div><!-- end of #wrapper div -->
</body>
</html>
Here's the css:
#container {
width: 300px;
height: 300px;
background: red;
margin-bottom: 20px;
}
#wrapper {
margin: 40px auto;
width: 400px;
}
And here's the jquery
$(function() {// When document is ready, run this...
//Get hold of the link with the id #showdiv and do something when you click it
$("#showdiv").click(function() {
// Grab the div with the id #container and show it
// Alert me when you're done
$("#container").show(2000, function() {
alert("I'm done showing");
});
});
//Get hold of the link with the id #hideDiv and do something when you click it
$("#hideDiv").click(function() {
// Grab the div with the id #container and hide it
// Alert me when you're done
$("#container").hide(2000, function() {
alert("I'm done hiding");
});
});
// Toggle - This is like a On/Off Switch
//Get hold of the link with the id #toggle and do something when you click it
$("#toggle").click(function() {
// Grab the div with the id #container and show if hidden / hide if shown
$("#container").toggle(2000);
});
});
Of course you'd have to link to a copy of jQuery before using the script above.
Here's a link to a demo: http://jsfiddle.net/tonystark/HhNBA/

Assuming you have a link
Inline (not recommended but likely what you have)
<script>
function showhide(id) {
var elem = document.getElementById(id);
elem.style.display=elem.style.display=="none"?"block":"none";
return false; // MANDATORY
}
</script>
Toggle
<div id="someId">Show or hide me when you click a link</div>

You have to cancel the default behavior of the onclick handler of your link. For doing so, don't use return false in your click handler, but rather use event.preventDefault():
HTML:
hide me
<div id="#targetdiv">blah</div>
Javascript:
document.querySelector('a.foo').onclick = function(event) {
try {
document.querySelector(this.getAttribute('href')).style.display = 'none';
} catch (e) {
console.error("couldn't find element to hide");
}
event.preventDefault();
}
JQuery:
$('a.foo').click(function(event) {
try {
$($(this).attr('href')).hide();
} catch (e) {
console.error("couldn't find element to hide");
}
event.preventDefault();
})
More informations:
http://www.quirksmode.org/js/events_early.html
http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

It happens because your link is pointing to something like #foo or just #, whereas it should not have a href (or have an empty one)...

remove the href attribute and apply a text-decoration style
<a style="text-decoration: underline;" title="click me"></a>
that'd seem to make more sense than applying an href you dont want, to block its normal operation later. an alternative for graceful degradation would be to use the href to point to the shown/hidden div, displaying normally by default and having javascript hide it where javascript is available.
"Change your anchor (link) to a span so that it doesn't have that behaviour. Then, style it using css so it looks how you want it to look."
i often use that techique. i.e., use a span or div with an onclick, styled with text-decoration: underline, cursor: pointer and possibly display: inline if you decide on a div. one caveat is that in IE6, css hover won't work on anything other than an anchor. that's easily fixed with javascript.
you could probably remove the href attribute completely. anchors have advantages as above (cross-browser :hover styles) and allow for a title attribute for tool tips etc.

you probaby have a # in href attribute like href=# please remove hash and instead of that write href='javascript:void(null);'