sorry if this is a repost, I've looked around and cannot find a solution that works.
I have to radio buttons, and I want to execute a function when they are changed. From other posts I thought this should work
$(function() {
$("#isMale").change( function() {
alert("test");
location.href = 'http://google.com'
}
});
http://jsfiddle.net/BfMYF/1/
But it doesn't, can anyone help ?
The selector is wrong, but you need to close .change function brackets properly too:
$(function() {
$("input[name=isMale]").change( function() {
alert("test");
location.href = 'http://google.com';
});
});
$(function() {
$("#male,#female").change(function () {
alert("test");
location.href = 'http://google.com';
});
});
You also had a missing semi and paran!
Related
When you click on 'financial roadshows' for example, it opens. But when I click again, it closes temporarily and then opens again. I tried looking for the answer, but I'm just a gigantic noob when it comes to this one. I hope someone can help me out!
This is the code I used:
$(document).ready(function(){
$(".desc_div").slideUp();
$(".open_div").click(function(){
wrapper = $('#services_blocks'),
link = $(this);
$('.open_div.selected').next(".desc_div").slideUp('slow', function() {
$(this).prev().removeClass('selected');
});
link.addClass("selected").next(".desc_div").slideDown("slow");
});
});
and here is my JSfiddle:
http://jsfiddle.net/59f29b1L/
This can be done much easier with jQuery's slideToggle.
http://api.jquery.com/slidetoggle/
$(".open_div").click(function(){
$(this).next(".desc_div").stop().slideToggle( "slow" );
});
Try it out: http://jsfiddle.net/59f29b1L/6/
To fire the click event only once take a look at this answer.
<script>
$(document).ready(function(){
$(".desc_div").slideUp();
$(".open_div").click(function(){
if($(this).hasClass('selected')){
$(this).removeClass('selected');
$(this).addClass("selected").next(".desc_div").slideUp("slow", function() {
$(this).prev().removeClass('selected');
});
}
else{ $(this).addClass("selected").next(".desc_div").slideDown("slow");
}
});
});
</script>
Fiddle : jsfiddle
The drop down works here , hope it helps.
Changes :
$('.open_div.selected').next(".desc_div.down").slideUp('slow', function() {
$(this).prev().removeClass('selected');
$(this).removeClass('down').addClass('up');
});
link.addClass("selected").next(".desc_div.up").slideDown("slow", function() {
$(this).removeClass('up').addClass('down');
});
and also added a class in the html
<div class="desc_div up">
It can be done as simple as this!! Cheers..
jQuery(document).ready(function($){
$(".desc_div").hide();
$(".open_div").click(function(){
$(this).next().slideToggle("slow");
});
});
FIDDLE:
$('.open_div').click(function(){
$('.desc_div').toggle().toggleClass('selected');
});
i changed your fiddle over here: http://jsfiddle.net/59f29b1L/8/
first of all, you have to change the html.
make all open_divs wrap around your desc_div.
then use this code:
$(document).ready(function () {
$(".desc_div").hide(); // this is used to initally hide all desc_div
$(".open_div").click(function () { // define the click function
$(".desc_div", this).stop().slideToggle("slow"); //slide up/down depending on current state
});
});
you can change the line
$(".desc_div").hide();
to
$(".desc_div:gt(0)").hide();
Updated script of yours brother. I only add few changes on slide up script. Hope this will help.
$(document).ready(function(){
$(".desc_div").slideUp();
$(".open_div").click(function(){
wrapper = $('#services_blocks'),
link = $(this);
$('.open_div.selected').next(".desc_div").slideUp('slow', function() {
$(this).prev().removeClass('selected');
});
if($(this).next(".desc_div").css('display')=='none'){
link.addClass("selected").next(".desc_div").slideDown("slow");
}
});
});
DEMO FIDDLE
On One click of button, it shows the div and on another click it hides the div.
<button type="button" id="first">Click Me!</button>
<div id="something">Something</div>
<script>
$(document).ready(function(){
$('#something').hide();
$prevIndex = 0;
$i = 0;
$('#first').click(function(){
var index = $('#first').index($(this));
if(index == $prevIndex)
{ // if same
$i = $i;
}else{ // if not same
$i = 0;
}
if ($i % 2 === 0) {
/* we are even */
/* do first click */
$('#something').show();
} else {
/* we are odd*/
/* do second click */
$('#something').hide();
}
$i++;
$prevIndex = index;
});
});
</script>
I need to have dialog box under the input field. The default behavior - to display above the filed. Tried to customize it using dialog method - haven't worked. What is the proper way to do it?
<script>
$(function() {
$( "#adv-issue-date" ).datepicker();
var handler = function() {};
var dp-settings-param = "";
var dp-pos = [100, 200];
$( "#adv-issue-date" ).datepicker( "dialog", "10/12/2012, handler, dp-settings-param, dp-pos" );
});
</script>
UPDATE:
The datepicker dialog is not showing because of empty handler. This way also does not works :
var handler = function() {$( "#adv-issue-date" ).datepicker("show");};
Modify .ui-datepicker in the CSS file.
If you want to manually move the datePicker around:
$(document).ready(DocReady);
function DocReady()
{
$("#adv-issue-date").datepicker({ beforeShow: moveDatePicker });
}
function moveDatePicker(input, inst)
{
inst.dpDiv.css({ marginLeft: "200px", marginTop: "200px" });
}
I am working on a commenting module which is auto-refreshed every 5 seconds. The code is like this:
jQuery Part:
$(document).ready(function(){
var refreshId = setInterval(function(){
$.getJSON('process.php?fooId=1', function(data){
$.each(data, function(key,val){
$('#abc:last-child').prepend('<div>some text</div>');
});
});
}, 5000);
});
HTML part:
<div id="abc"></div>
What I need is, when someone comment, the comment must append into the div (id="abc").
Any solutions?
use insertAfter()
official Documentation : http://api.jquery.com/insertAfter/
$('<div>some text</div>').insertAfter($('#abc:last-child'));
Try this one:
$(document).ready(function(){
var refreshId = setInterval(function(){
$.getJSON('process.php?fooId=1', function(data){
$.each(data, function(key,val){
$('#abc').last().append(val);
});
});
}, 5000);
});
I know that Chrome don't support onfinish event on marquee tag.
I decide to use JQuery plugin here: http://remysharp.com/2008/09/10/the-silky-smooth-marquee/
In this post, the author say it can capture stop event.
How ever, I cannot use it. Please help me out.
you should call .bind() for the the stop event. please see my example code below. hope it helps.
$(document).ready(
function(){
$('div.demo').marquee('pointer')
.bind('stop', function() {alert($(this).text())})
.mouseover(function () {
$(this).trigger('stop');
//alert($(this).html());
}).mouseout(function () {
$(this).trigger('start');
}).mousemove(function (event) {
if ($(this).data('drag') == true) {
this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
}
}).mousedown(function (event) {
$(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
}).mouseup(function () {
$(this).data('drag', false);
})
});
I have got a list of events, onClick the elements expand and they SHOULD do the opposite on a second click. That is the part of my little script that does not work. WHY NOT??
window.addEvent('load',function() {
$$('.eventlistitempassive').each(function(item) {
item.addEvent('click',function() {
$$('.eventlistitemactive').set('class', 'eventlistitempassive block');
item.set('class', 'eventlistitemactive block');
});
});
$$('.eventlistitemactive').each(function(item) {
item.addEvent('click',function() {
item.set('class', 'eventlistitempassive block');
});
});
});
See the script in action at
http://hoch3.cc/index.php/aktuelles.html
Thanks,
PB
how about
window.addEvent('domready', function(){
$$('.eventlistitempassive').addEvent('click', function(){
this.toggleClass('bar');
});
});
http://jsfiddle.net/tofu/aUPtw/
The problem here is that there is no active element on window.load, so your second selector to add click events on each active item is not finding anything. So try this:
window.addEvent('load',function() {
$$('.eventlistitempassive').each(function(item) {
item.addEvent('click',function() {
$$('.eventlistitemactive').set('class', 'eventlistitempassive block');
item.set('class', (item.get('class') == 'eventlistitemactive block' ? 'eventlistitempassive block') : 'eventlistitemactive block');
});
});
});
greatings from austria ;)