Develop Reference

How to check a radio have onclick with caperjs?

This is my code:
Full code here: http://notepad.cc/casperjsstack1
this.thenOpen('https://www.1800flowers.com/webapp/wcs/stores/servlet/FDDeliveryOptionsDisplayCmd', function() {
this.waitForSelector('#BP-DeliveryCardMess_1', function() {
this.evaluate(function() {
var el = $('#giftMessages.noCard');
el.onclick();
});
});
});
Look at the picture: I want check No Gift Message
I try so much method but all false
Code HTML page here: http://notepad.cc/casperjsstack1_html
Thank you !

Have you tried click()?
this.thenOpen('https://www.1800flowers.com/webapp/wcs/stores/servlet/FDDeliveryOptionsDisplayCmd', function() {
this.waitForSelector('#BP-DeliveryCardMess_1', function() {
this.evaluate(function() {
this.click('#giftMessages.noCard'); // Click the radio button.
});
});
});

Try this.
//jQuery version using evaluation page context
this.thenOpen('https://www.1800flowers.com/webapp/wcs/stores/servlet/FDDeliveryOptionsDisplayCmd', function() {
this.waitForSelector('#BP-DeliveryCardMess_1', function() {
this.evaluate(function() {
$("#giftMessages.noCard").prop("checked", true).trigger("click");
});
});
});
//Casper version using click
this.thenOpen('https://www.1800flowers.com/webapp/wcs/stores/servlet/FDDeliveryOptionsDisplayCmd', function() {
this.waitForSelector('#BP-DeliveryCardMess_1', function() {
this.click("#giftMessages.noCard");
});
});

Javascript toggle menu collapsed issue

I have created a Javascript toggle menu:
$(document).ready(function() {
$('.toggle').click(function () {
if ($(this).hasClass("expanded")) {
$(this).next().slideUp("fast");
} else {
$('.toggle').next().slideUp("fast").removeClass("expanded");
$(this).next().slideDown("fast");
$(this).removeClass("collapsed");
$(this).addClass("expanded");
}
});
});
When I click on another item in the menu, the class "expanded" is not removed from the other elements. I've tried many different things but can't get my head around it. Any help would be appreciated.

$(document).ready(function() {
$('.toggle').click(function () {
if ($(this).hasClass("expanded")) {
$(this).next().slideUp("fast");
$(this).addClass('collapsed');
$(this).removeClass('expanded');
} else {
var $expandedItems = $('.expanded');
$expandedItems.next().slideUp("fast")
$expandedItems.addClass('collapsed');
$expandedItems.removeClass('expanded');
$(this).next().slideDown("fast");
$(this).removeClass("collapsed");
$(this).addClass("expanded");
}
});
});
Based on your comments I think you are after something like this.

$(document).ready(function() {
$('.toggle').click(function () {
if ($(this).hasClass("expanded")) {
$(this).next().slideUp("fast");
} else {
$('.expanded').removeClass('expanded');//here is your problem
$(this).next().slideDown("fast");
$(this).removeClass("collapsed");
$(this).addClass("expanded");
}
});
});
This should be remove expanded class from your jquery code
Note Tested although please tell me if its not working
updated
Demo
And for jquery i think you are missing too much information here check demo here Demo

Add hide parameter to script

hi I currently have the following script and I'm trying to add a show and hide feature to it instead of just having one hide and show it. essentially "click me" shows it and the button hides it, fiddle example
http://jsfiddle.net/9M99G/
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).next('.below').slideToggle();
return false;
});
});

Just do the same with the .below div and slideToggle it with $(this) :
$('.below').on('click', function(){
$(this).slideToggle();
});
demo jsFiddle
See more about slideToggle()

Use slideToggle
$('.below').on('click', function(){
$(this).slideToggle();
});
That will switch display state; if hidden it will show, if shown it will be hidden

If you want just the hide functionality for the button , this code will do
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).next('.below').slideToggle();
return false;
});
$('.below').on('click', function(){
$(this).slideToggle();
});
});
Demo fiddle : http://jsfiddle.net/9M99G/4/
Or if you want to hide the Click Me while the hide button is being displayed the code below does exactly that
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).hide();
$('.below').show();
return false;
});
$('.below').on('click', function () {
$(this).hide();
$('.toggleBtn').show();
return false;
});
});
Demo fiddle : http://jsfiddle.net/9M99G/6/

DEMO
Try this, use slideDown and slideUp
$(document).ready(function () {
$('.below').hide();
$('.toggleBtn').click(function () {
$(this).next('.below').slideDown('slow');
return false;
});
$('.below button').click(function () {
$(".below").slideUp('slow');
});
});

jQuery mouseenter/leave

I have this code in html:
<div class="sub-status">
<p class="subscribed"><i class="icon-check"></i> Subscribed</p>
</div>
On hover, I want that to be changed to:
<div class="sub-status">
<p class="unsubscribe"><i>X</i> Unsubscribe</p>
</div>
And, I have this code in jQuery:
$(document).ready(function() {
$('.sub-status').mouseenter(function() {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
});
$('.sub-status').mouseleave(function() {
$('this').html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});
});
The first function is working great. When I mouseover that div, it is changed to what I want, but the mouseleave is not working. I want that when I put my mouse out of that div, its data will return to like it was before. I can't get this working. Any help would be appreciated.
Thanks.

Change
$('this')...
to
$(this)...
And you can use hover() instead of using two separate functions:
$('.sub-status').hover(function() {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
},function() {
$(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});
Updated
Your fiddle isn't working since you are updating the entire content of the hovered element - update just the text in <p> should work.
$('.sub-status').hover(function() {
$(this).children('p')
.removeClass()
.addClass('unsubscribed')
.html("<i>X</i> Unsubscribe");
},function() {
$(this).children('p')
.removeClass()
.addClass('subscribed')
.html("<i class='icon-check'></i> Subscribed");
});
Working fiddle

Here, try this. Working demo: http://jsfiddle.net/XrYj4/3/
$(document).ready(function() {
$('.sub-status').on("mouseenter", function() {
$(this).find("p").prop("class", "unsubscribed").html("<i>X</i> Unsubscribe");
}).on("mouseleave", function() {
$(this).find("p").prop("class", "subscribed").html("<i class='icon-check'></i> Subscribed");
});
});

Try to use a hover function:
$(".sub-status").hover(
function () {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
},
function () {
$(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
}
);
http://api.jquery.com/hover/

Change 'this' to simply this. Also consider chaining, shown below, this helps users with weaker devices load stuff faster.
$(document).ready(function() {
$('.sub-status').mouseenter(function() {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
}).mouseleave(function() {
$(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});
});

jQuery Mouseover / Mouseout will not work with Live

I have code that when I do an ajax call, it refreshes a column but then the mouseover no longer works. I used to have it inline in the div but wanted to move it to jQuery for other reasons. this is my code.
$(".statusbox").live({mouseover:function(){
wal_id = parseInt(this.id.replace("statuscontainer_", ""));
$('#rm_'+wal_id).show();
},mouseout:function(){
wal_id = parseInt(this.id.replace("statuscontainer_", ""));
$('#rm_'+wal_id).hide();}
});
Any ideas?

This is the correct syntax for live:
$(".statusbox").live( 'mouseover', function() {} );

Try
$(".statusbox").live( 'mouseover', function() {
wal_id = parseInt(this.id.replace("statuscontainer_", ""));
$('#rm_'+wal_id).show();
}).live('mouseout', function() {
wal_id = parseInt(this.id.replace("statuscontainer_", ""));
$('#rm_'+wal_id).hide();}
});

Try this:
$(".statusbox").live("hover", function(){
...
}, function(){
...
});