I want to add datepicker on but it should have been in HIDE state. on click of div it should show datepicker. Just like on input tag.
I have tried using Button Text and Icon to show it but was not able to display it without input field.
You can do something like this:
HTML:
<div id="control">Click for calendar</div>
<div id='dp'></div>
JS/Jquery:
var cal = $('#dp').datepicker();
cal.hide();
$('#control').on('click', function() {
if (cal.is(':hidden')) {
cal.show();
} else {
cal.hide();
}
});
Example jsFiddle: http://jsfiddle.net/aztechy/dpAWV/
Related
I have a button on my website added with the code below:
<button class="filter-btn-open">Open <span uk-icon="chevron-down"></span></button>
The button has an icon added with this code: <span uk-icon="chevron-down"></span> for its default state.
However, I want to toggle that icon with another icon <span uk-icon="chevron-up"></span> when the button is clicked.
I am already changing the color of the button using the code below but I need to be able to changed the icon too.
$(document).ready(function () {
$('.red-btn').click(function () {
$(this).toggleClass("green-btn red-btn" );
});
});
The icon is however added using attribute rather than a class. How can I achieve this?
On click you can get the span element and then toggle its attribute chevron-down chevron-up as well.
$(document).ready(function() {
$('.red-btn').click(function() {
var $span = $(this).find("span");
if ($span.attr("uk-icon") === "chevron-down") {
$span.attr("uk-icon", "chevron-up")
} else {
$span.attr("uk-icon", "chevron-down")
}
$(this).toggleClass("green-btn red-btn");
});
});
I am not sure if what I am trying to do is possible at all. Ok, so I have successfully created a "drop your images" feature for a site I am working on. This is how it looks (looks will improve).
Now, I have this textbox where I can edit the caption but I am trying to make it so that when I type the text I am able to edit parts of the hidden input box. For, example, the enter caption would edit the Caption part inside the hidden input box.
This is how it looks:
<input value="meta":{"userId":"le_user","FolderName":"Name Of the Folder","Caption":"","DateStamp":"","Privacy":""}">
This is the code I have used
<div class="addtextTopic">
<div class="leimage">
<img src="funnylookingcar.png">
<input class="tosend" value="meta":{"userId":"le_user","FolderName":"Name Of the Folder","Caption":"","DateStamp":"","Privacy":""}">
</div>
<textarea class="lecaptine" placeholder="Enter A Caption"></textarea>
</div>
$(document).ready(function() {
$(".addtextTopic .lecaptine").onchange(function() {
var $cap = $(this)
$(".tosend").val($cap);
});
});
Now, the code above doesn't work, and for some reason, I am beginning to think that if it works, it will replace the entire value, instead of the caption part.
Also, am I on the right direction? is this even possible?
Here's a possible solution.
http://jsfiddle.net/o2gxgz9r/3167/
$(document).ready(function() {
$(".addtextTopic .lecaptine").keyup(function() {
var metaDefault = '"meta":{"userId":"le_user","FolderName":"Name Of the Folder","Caption":"{{CAPTION}}","DateStamp":"","Privacy":""}';
var $cap = $(this).val();
$(".tosend").val(metaDefault.replace('{{CAPTION}}', $cap));
});
});
A few things wrong with your original code.
The change event will only fire when the textarea is blurred, not on keystroke. I changed this to keyup
I created a default string of metaDefault with a magic string of {{CAPTION}} so .replace() would know what to replace.
$cap needs to be the .val() of $(this).
First change your Onchange method to change method and copy value of .lecaptline to .tosend use $cap.val() please find below fiddle for more info
$(document).ready(function() {
$(".addtextTopic .lecaptine").change(function() {
debugger;
var $cap = $(this);
$(".tosend").val($cap.val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="addtextTopic">
<div class="leimage">
<img src="funnylookingcar.png">
<input class="tosend" value="meta":{"userId":"le_user","FolderName":"Name Of the Folder","Caption":"","DateStamp":"","Privacy":""}">
</div>
<textarea class="lecaptine" placeholder="Enter A Caption"></textarea>
</div>
how about change like this?
$('.addtextTopic .lecaptine').bind('input propertychange', function({
});
I have a label , that shows dynamic values based on user actions.
For example 1 or 2.
I would like to show div element with id="charts_div" if the label value is "1"
I would like to hide div element, if the value is "2"
This example is simplified as possible, so I could get basic idea where i am stuck
HTML
<label id="label"></label>
<div id="chart1_div" style="width:100%; height:200px"></div>
<div id="chart2_div" style="width:100%; height:200px"></div>
JQUERY
$(document).ready( function() {
$('#label').bind('change', function (e) {
if ($('#label').text() == "1")
{
$('#chart1_div').show();
$('#chart2_div').hide();
}
else if $('#label').text()=="2")
{
$('#chart1_div').hide();
$('#chart2_div').show();
}
}).trigger('change');
});
You can't bind change event to an element that doesn't have that kind of event. Put this change logic inside the event that is actually doing the changing of the label's text.
As it was said, you can't bind a change event to a label. Make whatever is changing your label also change the divs being shown. Supposing it's a button, do something like this:
HTML
<label id="myLabel">1</label>
<button id ="myButton">Toggle between 1 and 2</button>
<div id="chart1_div" style="width:100%; height:200px">a</div>
<div id="chart2_div" style="width:100%; height:200px">b</div>
JS
$(document).ready( function() {
$("#myButton").click(function(){
if ($('#myLabel').text() == '1')
{
$("#myLabel").text('2');
$('#chart1_div').show();
$('#chart2_div').hide();
} else if ( $('#myLabel').text()=='2')
{
$("#myLabel").text('1');
$('#chart1_div').hide();
$('#chart2_div').show();
}
});
});
Check out a live example on this jsfiddle ;)
I have some divs that need to be hidden (class named .hideable), and some divs that need to be shown (class named .toggleable. I have it working so far, which is great, but I`m having difficulties with the following; The hidden divs (.hideable) need to come back after the toggleable divs are hidden again.
here is what I have:
jQuery(document).ready(function($) {
var topContainer = $(".toggleable");
var topButton = $(".orsp a");
topButton.click(function() {
topContainer.slideToggle('slow');
$(".hideable").hide();
});
});
all help is welcome!
thanks,
J.
Use jQuery.toggle()
$(".hideable").toggle();
instead of jQuery.hide()
I think you wnat try like this
HTML
<div style='display:none' class='hideable' >Hidden Div</div>
<div class='toggleable'>Toggleable div</div>
<input class='topButton' type='button' value='toggle'>
JS
$('.topButton').click(function() {
$('.toggleable').slideToggle('slow', function() { $(".hideable").slideToggle(); });
});
Fiddle Here
If you don't want to use toggle to hide the .hideable div you can hide it using CSS and whenever you toggle .toggleable div you can check with Jquery whether it is hidden and if it is you can change it back to be shown. However Jakub's answer is the simplest solution.
jQuery(document).ready(function($) {
var topContainer = $(".toggleable");
var topButton = $(".orsp a");
topButton.toggle(function() {
topContainer.slideToggle('slow');
$(".hideable").hide();
},function () {
topContainer.slideToggle('slow');
$(".toggleable").hide();
});
});
Simplest choose toggle or toggle class
Fiddle
<http://jsfiddle.net/gcsHg/>?
I have three elements, which are sliding on the screen, i want to get the text of element which is currently showing on the screen, I tried .text() function, but this returns the text of all the s elements, is there any way using javascript or jquery to do this.
<div id="text">
<span style=" font-size:100px;text-align:center;">koko</span>
<span style=" font-size:100px;text-align:center;">abc</span>
<span style=" font-size:100px;text-align:center;">efh</span>
</div>
$(document).ready(function(){
$('#text').mouseover(function(){
var txt = $('#text span').text();
alert(txt);
});
});
demo or another here
code
$('#text > span').mouseover(function(){
var txt = $(this).text();
alert(txt);
});
Since you are using the cycle plugin, the active slide is given the class "activeSlide". You can get the text of the active slide by doing something like $('.activeSlide').text();
You can also set a callback in the options while initialising the cycle plugin. You can look at the options that you can set with cycle here: http://jquery.malsup.com/cycle/options.html
You will be able to use the "after" event callback in case you want to do something everytime the slide changes.
$(document).ready(function () {
$('#text').cycle({
after: function (currSlideElement, nextSlideElement, options, forwardFlag) {
alert($(nextSlideElement).text());
}
});
});