I'm looking for a jQuery image picker plugin that allows me to do the following:
Display a group of images and let the user select one (and only one) by clicking it
If the user does not like any of the specified images, he should be able to upload his own
Just #1 would suffice, as I can add the code for #2 if necessary
It's not that difficult to do I know, but if there is a standard plugin that people use for this, I'd rather use that than reinvent the wheel.
I know this has already been answered but I actually developed a library that address the first problem. You can check it out here:
http://rvera.github.com/image-picker/
Something like this? i dont know if there is plugin but is seems really simple
// HTML
<div id="image_container">
<img src="blabla" />
<img src="blabla" />
...
</div>
<form ...>
<input id="image_from_list" name="image_from_list" type="hidden" value="" />
<input id="image_from_file" name="image_from_file" type="file" />
</form>
// JS
$('div#image_container img').click(function(){
// set the img-source as value of image_from_list
$('input#image_from_list').val( $(this).attr("src") );
});
Have you tried this:
https://code.google.com/p/select-to-image-picker-jquery/
It lets you to change select box into image picker based on JQueryUI modal box.
I was looking for something like this a long time and finally needed to develop it by myself. So maybe you will find useful too.
Related
I want to generate an input type of text with custom mask like --day/--night and user replace - just with numbers. any suggestion? Please help me out here.
duration: --day/--night
Using two inputs is much more efficient.
But if you really want to do this, yes you can do it. You would need to check the input value every time user inputs a character and format the value to what you would like. You can also manipulate the cursor position using selectionStart and selectionEnd properties.
There are also a number of mask plugins for inputs.
http://plugins.jquery.com/tag/mask/
You can do following:
Make a placeholder "--" where the user can write the things in. Here is a short example what I mean:
duration: <input placeholder="--" maxlength="2">day/<input placeholder="--" maxlength="2">night
Telerik offer a free version of their "Kendo UI" JavaScript code. Here's an example of what you want: http://demos.telerik.com/kendo-ui/maskedtextbox/index
Here's the free code: http://www.telerik.com/download/kendo-ui-core
Here's their masked input code hosted on Github: https://github.com/telerik/kendo-ui-core/blob/master/src/kendo.maskedtextbox.js
It is very hard to write this type of code but you can use this code for this type of formatting.
<div>
<label for="phone">Phone</label>
<!-- or set via JS -->
<input id="phone" type="text" />
</div>
jquery code
$(":input").inputmask();
$("#phone").inputmask({"mask": "99/99"});
see the codepen link click here
I can't for the life of me figure out why this isn't working.
I want to search the current page for text using a search box. I googled and found this: http://www.javascripter.net/faq/searchin.htm . I implemented the code into my site, but it doesn't work. the function ( findString() ) works, but only when I hard-code a string (as in i can't use javascript or jquery to get the value of a text input). I made this fiddle: http://jsfiddle.net/alyda/CPJrh/4/ to illustrate the problem.
You can uncomment different lines to see what I've tested.
jQuery has a method :contains() that will make easier what you are looking for.
Take a look here: fiddle
$("button[type='submit']").click(function () {
var string = $('#search').val();
var matched = $('li:contains(' + string + ')');
matched.css('color','red');
console.log(matched);
return false;
});
I found a fix (sort of). It seems that the input needs to be placed well AFTER the content to be searched in the DOM. That means I've done the following:
<section class="content">
<h2>Fire</h2>
<h3>Fire Extinguishers</h3>
<ul>
<li>Model 240</li>
<li>Model C352, C352TS</li>
<li>Model C354, C354TS</li>
</ul>
...
<div id="navbar">
<ul>
...
</ul>
<input id="search" type="text" class="form-control pull-left" placeholder="Search for part number">
<button id="submit" type="submit" class="btn btn-default pull-left" style=" margin-top:6px;">Search</button>
</div>
as you can see, I've moved the input (which is in the navbar div) BELOW all of the text I want to search, and used CSS to programmatically place the navbar at the top of the page. I don't particularly like this setup (as it messes with the flow of content) but since I was looking for the quickest and simplest implementation of a single-page search, it will have to do.
I would still love to know why this happens, when the javascript is at the end of the DOM where it belongs...
In firefox I noticed that the fiddle (v4) as given in the question worked, but not in the way the asker expected it to.
What happens in firefox is that the function does find the value..: you have just entered it in the input-field. Then the browser's find method seems to hang in the 'context' of the input 'control' and doesn't break out of it. Since the browser will continue to search from the last active position, if you select anything after the input-field, the function works as expected. So the trick is not to get 'trapped' in the input-field at the start of your search.
A basic (dirty) example on how to break out of it (not necessarily the proper solution nor pure jquery, but might inspire a useful routine, since you now know the root of the problem in FF):
$( "button[type='submit']" ).click(function(){
var tst=$('#search').val(); //close over value
$('#search').val(''); //clear input
if(tst){ //sanity check
this.nextSibling.onclick=function(){findString( tst );}; //example how to proceed
findString( tst ); //find first value
} else { alert('please enter something to search for'); }
return false;
});
Example fiddle is tested (working) in FF.
PS: given your specific example using <li>, I do feel Sergio's answer would be a more appropriate solution, especially since that would never run line: alert ("Opera browsers not supported, sorry..."), but the proper answer to your window.find question is still an interesting one!
PS2: if you essentially are using (or replicating) the browser's search-function, why not educate the user and instruct them to hit Ctrl+F?
Hope this helps!
I had same problem in an angularjs app and I fix it by changing DOM structure.
my HTML code was something like this:
<body>
<div class="content" >
<input class="searchInput" />
<p>
content ....
</p>
</div>
</body>
and I changed it to something like this:
<body>
<div class="search">
<input class="searchInput" />
</div>
<div class="content">
<p>
content ....
</p>
</div>
</body>
Note: I'm aware that this topic is old.
I have a code for my site, when an image is clicked a pop up window displays which is working fine. However, whenever I roll over the first rollover works, but the original image before the rollover does not show anymore? why is this?
<input name="image" type="image" onMouseOver= src="http://japanesefriend.zxq.net/images/x11_title.gif" onMouseOut= src="http://japanesefriend.zxq.net/images/level4_nouns_08.gif'" value="Place Order" src="http://japanesefriend.zxq.net/images/level4_nouns_08.gif" onClick='styledPopupOpen("<img src=http://japanesefriend.zxq.net/flashcards/go.gif />")' align=middle width=164 height=154>
Use CSS sprites for rollovers.
Your HTML is invalid.
This...
onMouseOver= src="http://japanesefriend.zxq.net/images/x11_title.gif"
should be this...
onMouseOver="this.src='http://japanesefriend.zxq.net/images/x11_title.gif'"
Same for the onMouseOut...
onMouseOut="this.src='http://japanesefriend.zxq.net/images/level4_nouns_08.gif'"
DEMO: http://jsfiddle.net/XBLfN/
Or you can eliminate this. and just do src='http://...
onMouseOver="src='http://japanesefriend.zxq.net/images/x11_title.gif'"
onMouseOut="src='http://japanesefriend.zxq.net/images/level4_nouns_08.gif'"
DEMO: http://jsfiddle.net/XBLfN/1/
see: rollover image with buttons
this seems to be a duplicate - the solution in the above question shoudl work for you.
For chrome (and even for other browsers), it is always a good idea to validate your html:
http://validator.w3.org/
How can I write this so the text shows in the text field (search bar) during the page load?
<input type="text" id="addressInput" value="<%=addressStr%>" onblur="if(this.value=='')this.value='Search a location here';" onfocus="if(this.value=='Search a location here')this.value='';" />
At the moment the text only shows when you click in the textfield.
#detonate: You could just add some of the same logic to the ASP value so it'll show Search a location here if addressStr is blank:
<input type="text" id="addressInput" value="<% If addressStr = "" Then Response.Write "Search a location here" End If %>" onblur="if(this.value=='')this.value='Search a location here';" onfocus="if(this.value=='Search a location here')this.value='';" />
it looks like you're trying to setup a watermark for a textbox, is that correct?
I'm going to refer you to a basic example of textbox watermarking that should be able to give you an example and give everyone a bit of a common codebase for discussion, since you didn't include a lot of code in your post: http://www.codeproject.com/KB/aspnet/WatermarkTextBox.aspx
In it, I'll reference one of his codeblocks, that is similar to the one you posted:
<td>
<asp:TextBox ID="txtUserId" runat="server"
onfocus="Focus(this.id,'User ID')"
onblur="Blur(this.id,'User ID')"
Width="126px" CssClass="WaterMarkedTextBox">User ID</asp:TextBox>
</td>
While I realize he used ASP.NET instead of ASP, I wanted to draw attention to the fact that he put <textbox>text</textbox> so that you could see part of the answer to the question you directly asked above.
EDIT: Let me try this again: You would have something like this:
<textbox attributes="" methods="" >
<%=addressStr%>
</textbox>
Hopefully tho, the whole example given on that page will help you. Feel free to ask more questions.
I am trying out the dialog from jquery UI. All the online demos use flora.css.
I can't get the dialog to display correctly with the css file generated by the themeroller application.
Am I missing something? Should these things work out of the box?
Update: Thanks Brock. When I cleaned up my code to make a sample, I realized that the HTML in demo.html (that comes with the themeroller.zip) is a little too verbose.
All I needed to do was give the dialog div the attribute class="ui-dialog" like this:
<div id="SERVICE03_DLG" class="ui-dialog">please enter something<br><br>
<label for="something">somthing:</label> <input name="something" id="something" type="text" maxlength="20" size="24">
</div>
I'll accept your answer. Thanks for your time.
I think it is because you have the classes different.
<div id="SERVICE03_DLG" class="flora"> (flora)
<div id="SERVICE03_DLG" class="ui-dialog"> (custom)
Even with the flora theme, you would still use the ui-dialog class to define it as a dialog.
I've done modals before and I've never even defined a class in the tag. jQueryUI should take care of that for you.
Try getting rid of the class attribute or using the ui-dialog class.