modify datepick plugin to popup calendar when an icon is clicked - javascript

Im using a jQuery calander plugin called datepick on my site. I connect the datepicker to my input field like this:
$('.dobOnly').datepick();
Here's a working example: jsFiddle
By default the calendar pops up when the user clicks on the input. Instead, Id like for it to only pop up if the user clicks an icon next to the input.
Its propbly important to mention that there are several of these inputs on the page Im working on. As such it seems likely that a solution would have to include modifying datepick() to take the id of the related text field as an argument so that the pop up affects the intended input.
What would be the best way to edit waht I have to accomplish this?

According to the documentation you need to wrap the image in a hidden div. Then in the options for datepick specify the showOnFocus and showTrigger properties.
HTML
<input type="text" name="gd2" id="gd2"/>
<div style="display:none">
<img id="calImg" src='https://pnrbuilder.com/_images/cal.png' alt=""/>
</div>
JS
$(function() {
$('#gd2').datepick({showOnFocus: false, showTrigger: '#calImg'});
});
JSFIDDLE: http://jsfiddle.net/xzzCf/7/
There is an example of this on the invocation tab of the documentation

Related

I use featherlight for an image gallery, but it causes an error when I click on an input field in a form (not modal)

I have images appearing in a repeating region — each region is a recordset of an item in an auction.
Clicking the images loads a featherlight gallery. However, in each item's region, there is a form that the user can submit to make a bid on the item.
As soon as I click inside the input field before even entering a dollar amount with the form as of yet unsubmitted, somehow featherlight interferes and throws an error : "Featherlight: no content filter found (no target specified)".
To be clear : the form doesn't pop up in a modal window... and there is no connection between the form and featherlight apart from the fact that the form is inside the section that contains this : data-featherlight-gallery data-featherlight-filter="a.gallery".
I'm not sure why there is this interference in the first place.
I've searched online and some people have mentioned that using id may be the problem, so I have removed the text input's id and left only the name, but the error persists.
I found a page on github "forms with dynamic content impossible in featherlight?" at https://github.com/noelboss/featherlight/issues/122
but while the title sounds promising, the comments are mostly beyond me and don't seem to be relevant to my situation.
<form id="encanform<?=$cordre?>" name="encanform<?=$cordre?>" action="encan.php" method="post" onSubmit="storeValues(this);miseNote(<?=$latestbid+10;?>,'<?=$lang?>',this.form.miseamount.value)" class="encanclass">
<input type="text" required class="frmess" name="miseamount" title="This field is required." value="" />
var cordre = 'section#<?=$cordre?> a.gallery';
$(document).ready(function(){
$(cordre).featherlightGallery();
});
Any time I click the field, that error happens :
Featherlight: no content filter found (no target specified)
Even though featherlight is supposed to be bound only to a.gallery, the input field/form is catching its attention.
Thanks in advance for your time!
OK I finally managed to work it out. I had to remove the data-featherlight string that bound everything, even if I specified only links with class of gallery.
But removing it from the HTML and only apply the class to the image links and then specifying the correct selector in jQuery fixed it for me.
Thanks anyway!

I need to change a javascript code

I made an onclick popup redmore button for my sidebar text widget in wordpress just copied and pasted this code I found here. I did some little changes and everything worked fine.
The problem occurred when I had to make more onclick popups like that one for the rest of the sidebar widgets, exactly the same popup with same values but with different img and content text.
The problem is both "redmore" buttons in the first widget and in the second one link to the same thing - so it will open the same one no matter which redmore button you click -
this is the website check out the first two items in the right sidebar.
Since I don't know much about Javascript, I'm asking you if you can help me changing the javascript tag link in the code in order to link to another different popup and not the same one - and let me understand how to change it since I have to make a few popups.
You should change the Id attribute of the Contents for eg
<div id="light2" class="white_content">
<div id="fade2" class="black_overlay">
for the second pop up and change the javascript of the second read more text to
here
Same should be applied to all other pop ups.
Here i have changed the fiddle
You need to change the id for every popup Like
getElementById('fade')
getElementById('light')
[the first]
getElementById('fadesec')
getElementById('lightsec')
[the second]
And so on.. same thing on html content, don't just copy, change ids
Example two:
<p>This is the main content. To display a lightbox click here</p>
<div id="lightsec" class="white_content">This is the lightbox content. Close</div>
<div id="fadesec" class="black_overlay"></div>

Editable Div - Highlights Specific Letter On Click

Everytime I click a div or I focus on a contenteditable div it highlights the text I've clicked. This is not the case for other sites I have tried so I know it's not my mouse, I have a fair amount of jquery and css so I don't think it's useful to post all the code. Could people provide suggestions/speculation to why it's doing this and how it could be fixed because at the moment I have no idea.. I have no specific code to highlight any text so I'm very confused.
Relevant Code:
//This is loaded on body load
$("body").click(function(el) {
if($("#menu").is(":visible")){
//The click handler function puts new textboxes in if clicked correctly.
clickHandler($(event.target));
}
<div class="container image">
<img src="https://placeimg.com/240/180/any" />
</div>
You can try
window.getSelection().removeAllRanges();
document.getSelection().removeAllRanges();
To make sure all your text is not selected.
Please take a look at these two entries:
How can I deselect text using Javascript or jQuery?
Select/Unselect Text on click Using jQuery
So I think this is actually a bug in chrome. After leaving it a few hours and then refreshing the page, it randomly started working with normal functionality. Thank you to everyone who attempted to help - guergana presents a possible solution if you have stumbled across this page looking for answers.

Datepicker initialization for class fields added after page load

I have fields where multiple extra fields can be added after the page loads (think education & work experience fields on job resumes). I am using this.
I can add a datepicker on the first field, but subsequent added fields do not access the datepicker, despite being cloned/essential duplicates of the original. I'm guessing that the datepicker only intializes on page load or for only one class on the page.
So on a page I initialize the datepicker:
$('.input-append.date').datepicker();
for a block of form code encapsulated by this class. OK for initial page load; and also OK if there is an error and the page reloads multiple fields previously input(there is a datepicker for all fields returned with any error). However, with another js function that adds new fields to the form, additional new fields do not have access to the datepicker. I do not see how to do this now, perhaps someone with more experience/wisdom can provide me a hint.
EDIT:
Simple enough: I simply added:
$('.input-append.date').datepicker();
to the code calling the new field. As to being the optimal solution I do not know, anyone who specializes in js can comment on that, and there are many other similar questions here I found once I expanded my search terms. However, good enough for me now in what I'm doing.
For elements which are being added on fly use data-provide="datepicker" attribute. It will be initialized lazily. For example if an input field is coming up in an ajax response and loaded in a container div. So in this case:
<input type="text" data-provide="datepicker" />
so when when you will load this ajax response it in cotainer div like
$('#container-div').html(ajax_response);
this will work.
In the same way if you are creating an element through jquery and appending it to some container (I think this is happening in your case), for example you have a function that creates textbox and append it to some container div and this function is called on click event of some element let's say it's button. Again data-provide attribute is the solution to this problem. For example
function createTextBox(){
var t = $('<input>').attr('data-provide','datepicker');
$('#container-div').append(t);
}
And this function is called on click event of some button like in this way:
$(document).ready(function(){
$('#someBtn).click(createTextBox);
});
In short whether that dynamic element is coming in ajax response as a string or being created through jquery, just use data-provide attribute to set bootstrap datepicker. Because in this case datepicker is initialized lazily in Bootstrap fashion.

Create a jQuery modal box that appears beside the trigger action

I want a jQuery modal box that appears near or next to the button that triggers it. The box should appear in shape as well as in the following:
It should be height resizeable, so if the content is long, the box will refit.
How can I do this?
The qTip jQuery plugin is pretty good.
http://craigsworks.com/projects/qtip/
I'm not sure if there is one exactly how you want but here is a list of a few that you may be able to modify slightly.
http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/
This one in particular seems good
http://flowplayer.org/tools/tooltip.html
I don't think there's anything quite like what you're looking for out of the box. However, with a little customization and tweaking, you might be able to get pretty close to your goal.
To use a jQuery modal, simply design your modal div somewhere on your page (I usually do it at the very bottom) and give it an initial sytle of "display: none":
<div id="promotion_dialog" title="Choose a piece for promotion:" style="display: none;">
<table id="my_table"> .... </table>
</div>
If you design the div correctly, you might be able to create the shape you're looking for.
Then when the button is clicked, call a Javascript function that displays and positions the div:
function openPromotionDialog() {
$("#promotion_dialog").dialog({width: 350, height: 100, modal: true, zIndex: 10000});
$("#promotion_dialog").dialog('open');
}
See the jQuery UI Dialog docs for more information. Providing a position parameter to the dialog() method should allow you to place it where you want (you'd need to examine the clicked button to get the positions).

Categories

Resources