Develop Reference

Add content besides datepicker based on hoover

Im working on a datepicker so when a user hoover over a date it shows date on top of the input bar
Here is the jfiddle im working on http://jsfiddle.net/JGM85/1/
<div class="demo">
<h1></h1>
<p>Date: <input type="text" id="datepicker"></p>
But I am trying to display it content on the side of the datepicker rather than on the top.
Something like this
Imgur Link

You can use beforeshow for datepicker and call your own function.
https://jsfiddle.net/JGM85/272/
Please check this code with your fiddle :
$(function() {
$("#datepicker").datepicker({
//The calendar is recreated OnSelect for inline calendar
onSelect: function (date, dp) {
updateDatePickerCells();
},
onChangeMonthYear: function(month, year, dp) {
updateDatePickerCells();
},
beforeShow: function(elem, dp) { //This is for non-inline datepicker
updateDatePickerCells();
}
});
updateDatePickerCells();
function updateDatePickerCells(dp) {
/* Wait until current callstack is finished so the datepicker
is fully rendered before attempting to modify contents */
setTimeout(function () {
$('.ui-datepicker-calendar').after('<p>Fajr Sunrise Zuhr Asr Magrib Isha</p><div class="className"></div>');
}, 0);
}
$(".ui-state-default").live("mouseenter", function() {
$('.className').html($(this).text()+"."+$(".ui-datepicker-month",$(this).parents()).text()+"."+$(".ui-datepicker-year",$(this).parents()).text());
});
});

You can just make the <p> and the <h1> into : display: inline
<p style="display: inline">
Date: <input type="text" id="datepicker">
</p>
<h1 style="display: inline"></h1>

Changing a image for another after clicking on it with jquery

this is going to be my first question so far cause i always do a research before using forums, but i dont get this to work.
I have an Image that works as a button for a toggle animation (button.png) and i want that image to change after clicking on it for another image (button2.png), and once you click the second image it changes again to the first image, i have:
<script type="text/javascript">
$(document).ready(function() {
// when click on the tag with id="btn"
$('#btn').click(function() {
// change the state of the "#idd"
$('#idd').toggle(800, function() {
// change the button text according to the state of the "#idd"
if ($('#idd').is(':visible')) {
$('#btn').attr('images/button2.png', this.href); // Show Less.. button
} else {
$('#btn').attr('images/button.png', this.href); //Learn More.. button
}
});
});
});
</script>
and my Html:
<div id="idd" style="display:none;">
- Here my hidden content -
</div>
<!-- Button -->
<img src="images/button.png" style="cursor: pointer;" id="btn">
What im doing wrong? Please Help :(

Check the syntax for .attr. It should be something like
$('#btn').attr('src', 'your image src');
Function Reference: http://api.jquery.com/attr/

To change the value of src you use 'attr' like this:
$('#btn').attr('src', 'images/button2.png');
Here is a DEMO
HTML
<div id="idd" class='display-none'>
- Here my hidden content -
</div>
<!-- Button -->
<img src="http://placekitten.com/40/40" id="btn">
CSS
.display-none {
display:none;
}
jQuery
var btn = $('#btn');
var idd = $('#idd');
btn.click(function() {
idd.toggle(800, function() {
// change the button text according to the state of the "#idd"
if (idd.hasClass('display-none')) {
btn.attr('src', 'http://placekitten.com/50/50');
idd.removeClass('display-none');
} else {
btn.attr('src', 'http://placekitten.com/40/40');
idd.addClass('display-none');
}
});
});

take one division e.g #play-pause-button and other in this i.e #play-pause. now put ur images in the src of inner division , on the click of outer divison source of innner division will change..
here is simillar example i'm working on. hope will help you.!
$('#play-pause-button').click(function () {
// $('#play-pause-button').play();
if ($("#media-video").get(0).paused) {
$("#media-video").get(0).play();
$("#play-pause").attr('src', "Image1 path");
}
else {
$("#media-video").get(0).pause();
$("#play-pause").attr('src', "Image2 path");
}
});

You should use css to associate image(s) on your "button" and a css class to determine which to show.
You can then use Jquery's ToggleClass() to add/remove the class. You can use the same class to show/hide your hidden content.
markup
<div id="idd">
- Here my hidden content -
</div>
<div id="btn">Click Me</div>
css
#idd.off {
display:none;
}
#btn {
border:1px solid #666;
width:100px; height:100px;
background:#fff url(images/button.png) no-repeat 0 0; // Show Less.. button
}
#btn.off {
background:#fff url(images/button2.png) no-repeat 0 0; //Learn More.. button
}
jquery
$('#btn').click(function(){
$('#idd').toggleClass('off');
$('#btn').toggleClass('off');
});

Hide an HTML form field when a button is clicked and replace it with a different field

I have an html form that has a field that needs to become hidden and replaced with another when a button is clicked. I can't get rid of this field altogether because its value still must be submitted. Here is some sample code for reference:
<select id="Id.0" onChange="changeTextBox();">
<input type="button" id="addButton" value="Add" onclick="addQual();"/>
Basically what needs to happen is when the addButton is clicked, Id.0 must disappear (but remain a member of the form) and be replaced by an identical field with id="Id.1" then upon clicking again id="Id.2" and so on.
Is there a way, using JavaScript or jQuery, to hide and replace this field upon clicking this button? Thanks!

This with jQuery might help.
elmCount = 0;
function addQual()
{
$("#Id." + elmCount).css('visibility', 'hidden');
$("#Id." + elmCount).css('height', '0px');
elmCount += 1;
}
Thanks to comments.

<div id="divAny">
<select id="Id.0" onChange="changeTextBox();">
</div>
<input type="button" id="addButton" value="Add" onclick="addQual();"/>
var index = 0;
function addQual(){
$("#divAny").hide();
$("#Id."+index).attr("id" , "Id."+ (++index));
}

As an alternative to #MahanGM's answer, I would minimise the use of jQuery here and do only the following in your addQual function:
addQual = function() {
$('select').toggleClass('hidden');
}
You then need a css class hidden to hide the required element. As others have said, you must not use display: none if you don't want to lose the value of the input.
.hidden {
visibility: hidden;
height: 0;
}
And you start out in your markup with both selects present, only the one you initially want hidden has the appropriate class:
<select id="Id.0">
<select id="Id.1" class="hidden">
<input type="button" id="addButton" value="Add" onclick="addQual();"/>
A basic example with spans: http://jsfiddle.net/5Dayf/1/

Cleanest solution in my eyes: see here jsFiddle
HTML, nothing special:
<select class="replaceableSelect" id="Id.0">
<option name="one" value="one">One</option>
</select>
<button id="addButton">Add</button>
Javascript using jQuery:
$(document).ready(function () {
var changeTextBox = function () {
/** Your code goes here */
};
// add the onchange event to all selects (for the current one and future ones)
$(document).on("click", "select.replaceableSelect", changeTextBox);
var currentId = 0,
currentSelect = $("#Id\\.0");
$("#addButton").on("click", function (e) {
// hide the old select
currentSelect.addClass("invisible");
// create the new select with increased id and add onchange event
currentSelect = $('<select class="replaceableSelect" id="Id.' + (++currentId) + '"><option name="two" value="two">Two</option></select>').insertAfter(currentSelect).bind("change", changeTextBox);
});
});
CSS:
.invisible{
visibility: hidden;
height: 0;
width: 0;
margin: 0;
padding: 0;
border: none;
}
Hint: To process the results of your form, please make sure, every select gets a unique name.

twitter bootstrap ".input-append" not work with popover

When I use input append and popover at the same time then popover not working, but when I remove the appended input (by removing the input-append class) then it works.
Here is my code:
<span class="input-append">
<button class="span2" id="filter" type="text" name="filter" placeholder="Type your filter">itest</button>
<button class="btn" id="filterSubmits">Go</button>
</span>
<script>
jQuery(function() {
$('#filter').attr('data-title', 'Search tips').
attr('data-content', 'Search format: -|+').
attr('data-placement', 'bottom').
attr('data-trigger', 'focus');
$('#filter').popover('show');
})
</script>
Is there something wrong here?

If you take a look at the css for input-append, you'd see that it sets font-size to 0. Adding the following style will fix your issue:
.popover {
font-size: 14px;
}

How to do this box in Javascript?

I'm trying to do the following sort of thing in Javascript, where you click on the down arrow and it expands downward and displays options (I'll have some input fields and checkboxes and text and stuff in there).
Can anyone please help me out or point me in the right direction, I've tried google searching but I have no idea what they're even called in the Javascript world. "Javascript expanding box", "javascript drop down box", "javascript expanding modal dialog", etc. Nothing seems to hit.
Here's the example:
http://imageshack.us/f/810/examplebe.jpg/
There will be a submit button in the top section (not in the expand section), which will submit the options in the drop down menu as well as the options in the section near the submit button.
Thanks!

Set your markup something like this:
<div class="expandingBox" id="expandingBox">
<div id="expandingBoxContent">
//Content here
</div>
</div>
Expand
and in your CSS, the expandingBox class should be set to:
.expandingBox
{
height: <your initial box height here>
overflow: hidden;
// other styling here
}
Then to get it to expand, you can do something like:
$('#expandButton').bind('click', function(){
var contentHeight = $('#expandingBoxContent').height();
$('#expandingBox').animate({ height: contentHeight }, 1000);
}

a little demo. it may help you
HTML:
<input id="login_button" type="button" value="∨" />
<form name-"myForm" id="login_form" style="height:150px">
<div id="toggle" style="width:150px; height:100px;position:absolute;top:30px;left:20px;background:#9BCDFF;display:none;padding:10px">
<label for="name">Name:</label>
<input type="text" name="name" />
<label for="password">Password:</label>
<input type="text" class="password" />
</div>
<input type="submit" id="#submit" value="Submit" style="position:absolute; top:150px"/>
</form>
JQUERY:
$('#login_button').click(function(e) {
$('#toggle').slideToggle(1200,
function() {});
});
$('#submit').click(function() {
$('form[name=myForm]').submit(function() {
alert('form submit');
});
});

$('#toggleBtn').click(function(){ $("#toggleBox").toggle();});

If you're using jQuery, I think you might want to look at the jQuery UI implementation of the collapsible accordion.

THere is an inbuilt jquery effect 'SlideDown'. Check it here: http://api.jquery.com/slideDown

It should not be really difficult. You can use jQuery animation effects for that.
Some code example, just to give you direction:
// html
<div id="some-container">Click me!</div>
<div id="some-container-to-show">Hey, I'm appeared on screen!</div>
// js
$(function () {
$("#some-container-to-show").hide();
$("#some-container").live("click", function () {
$("#some-container-to-show").slideDown();
});
});