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");
});
});

onmouseover show/ hide div and can select the text of div

I want to Show and hide one tooltip on hover of an anchor. but tooltip should be there till my cursor on it.
fiddle
$('#showReasonTip').mouseover(function(){
$(this).parent().find('#reasonTip').slideDown()}).mouseout(function(){
$(this).parent().find('#reasonTip').slideUp()
}
)
thanks in advance.

Try
jQuery(function ($) {
$('#showReasonTip').hover(function () {
var $target = $('#reasonTip');
clearTimeout($target.data('hoverTimer'));
$target.stop(true, true).slideDown();
}, function () {
var $target = $('#reasonTip');
var timer = setTimeout(function () {
$target.stop(true, true).slideUp();
}, 200);
$target.data('hoverTimer', timer);
});
$($('#reasonTip')).hover(function () {
clearTimeout($(this).data('hoverTimer'));
}, function () {
$(this).stop(true, true).slideUp();
});
});
Demo: Fiddle

You should try using mouseleave instead of mouseout and that too on #reasonTip and not on #showReasonTip.
$('#showReasonTip').mouseover(function(){
$(this).parent().find('#reasonTip').slideDown()
});
$('#reasonTip').mouseleave(function(){
$(this).parent().find('#reasonTip').slideUp()
});
Here's the modified fiddle with a small change in your code.

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');
});
});

SlideToggle Div Animation

i have the following jQuery code.
$(function() {
$('.clickme').click(function() {
$('.totalthing').slideToggle('slow','easeInOutQuart', function() {
// Animation complete.
});
$('.expandedcase').slideToggle('slow','easeInOutQuart', function() {
// Animation complete.
});
});
});
At the moment it closes one of the div's and opens another at the same time. What I want it to do is close the open div then once it is fully closed it opens the other.

try:
$(function() {
$('.clickme').click(function() {
var tot = $('.totalthing');
var exp = $('.expandedcase');
var frt = (tot.is(":visible"))?tot:exp;
var lst = (tot.is(":visible"))?exp:tot;
frt.stop().slideToggle('slow','easeInOutQuart', function() {
lst.stop().slideToggle('slow','easeInOutQuart', function() {/*complete*/});
});
});
});

Your comments should point you in the right direction. If you want one animation to start once the other is complete, then move it to the function.
$(function() {
$('.clickme').click(function() {
$('.totalthing').slideToggle('slow','easeInOutQuart', function() {
// Animation complete.
$('.expandedcase').slideToggle('slow','easeInOutQuart', function() {
// Animation complete.
});
});
});
});

How can I trigger a 'focusout' after I click on an element?

I have the following markup:
<select style="display:none">
<option value='1'>1</option>
<option vlaue='2'>2</option>
</select>
<input type="text" id="comboBox" />
<ul id="comboBoxData" style="display:none">
<li id='1'>1</li>
<li id='2'>2</li>
</ul>
and the following JQuery code:
$(document).ready(function() {
$('select').each(function() {
var parent = this;
$('#comboBoxData').on('click', 'li', function() {
var value = $(this).prop('id');
$(parent).val(value);
$('#comboBox').val(value);
});
});
$('#comboBox').bind('focusin', function () {
$('#comboBoxData').show();
});
$('#comboBox').bind('focusout', function () {
$('#comboBoxData').hide();
});
});
When I click on one of the LI's the 'comboBoxData' element disappears before the click trigger happens. Is there a way around this or an alternate event that I can use instead to have the same effect as a focusout?

Put mouseenter and mouseleave events and change the value of a global variable say isOver.
$('select').each(function() {
var parent = this;
$('#comboBoxData').on('click', 'li', function() {
var value = $(this).prop('id');
$(parent).val(value);
$('#comboBox').val(value);
$('#comboBoxData').hide();
});
});
$('#comboBoxData').mouseover(function(){
isOver = true;
}).mouseleave(function(){
isOver = false;
});
$('#comboBox').bind('focusin', function () {
$('#comboBoxData').show();
});
$('#comboBox').bind('focusout', function () {
if(!isOver){
$('#comboBoxData').hide();
}
});

You do not require this:
$('#comboBox').bind('focusout', function () {
$('#comboBoxData').hide();
});
instead use this inside $('#comboBoxData').on('click', 'li', function() {
if you are fine with plugin , you could just use this way:
$('#menu').bind('clickoutside', function (event) {
$(this).hide();
});
You can get that plugin here
Also, I have changed the code without using the plugin:
Please check the updated answer:
DEMO

try with blur() function
$('#comboBox').blur(function () {
$('#comboBoxData').hide();
});
The blur event is sent to an element when it loses focus.
from http://api.jquery.com/blur/

Not exactly elegant but it works.
$("body").click(function(event){
if(!$(event.target).is("#comboBoxData") && !$(event.target).is("#comboBox") ){
$("#comboBoxData").hide(); }
});
$(document).ready(function() {
$('select').each(function() {
$('#comboBoxData').on('click', 'li', function() {
var value = $(this).prop('id');
$('#comboBox').val(value);
$('#comboBoxData').hide();
});
});
$('#comboBox').bind('focusin', function () {
$('#comboBoxData').show();
});
});