Is this possible ? like I have this phrase on a textbox:
"I went home"
then when I click "home" an options box shows up like:
"I entered home"
|garden|
| motel|
|______|
sorry for my ugly way to show it, couldn't think about anything better lol
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#fieldName").focus(function(){
var el = $(this);
var coords = el.offset();
var div = $("<div>").addClass("dropdown").html("<span>garden</span><span>motel</span>").css({"top":coords.top+18+"px","left":coords.left+45+"px"});
el.after(div);
$(".dropdown span").click(function(){
var newText = "I entered the " + $(this).text();
$("#fieldName").val(newText);
$("div.dropdown").remove();
});
});
});
</script>
<style>
.text {width:120px;}
.dropdown {width:75px; text-align:right; position:absolute; padding:2px; background:#eee; border:1px solid #aaa;}
.dropdown span {display:block; cursor:pointer;}
</style>
</head>
<body>
<input type="text" class="text" name="fieldName" id="fieldName" value="I entered the home" />
</body>
</html>
You'll need a copy of jquery (or point to Google's CDN of it) for this to work. This example's pretty primitive, but hopefully it'll get you where you want to go.
Related
I've been fighting with this for a while now and have searched extensively to no avail. I grabbed a link someone posted here in response to my same question. enter link description here I've copied the code to my editor, placed the stylesheet inline, linked all the scripts correctly I think...
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"</script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"</script>
<style> #docs{
display:block;
postion:fixed;
bottom:0;
right:0;
}
</style>
</head>
<body>
<form id="form_validation_reg_generate_user">
<input type="text" name="userPassword" id="userPassword" />
<br/>
<input type="submit" />
</form>
<a id="docs" href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script>
$(document).ready(function () {
$('form#form_validation_reg_generate_user').validate({
rules: {
userPassword: {
minlength: 5
}
},
submitHandler: function (form) { // for demo
alert('valid form submission'); // for demo
return false; //form demo
}
});
});
</script>
</body>
No validation occurs... I have a feeling I'm missing something obvious. It was working in a separate page when I was only validating required fields. Since adding the minlength... nothing.
I'm doing a test with your code and it seems to work perfectly. Check if your jquery.validate.min.js path is correct and if you can access properly to every script from your system.
Also you can use your browser development tools to check if you have exceptions.
The jquery.validate.iin.js version I used in the text is from this website. Maybe you have an older script?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function show1() {
document.getElementById("img1").display = 'block';
}
function hide1() {
document.getElementById("img1").display = 'none';
}
</script>
</head>
<body>
<span onMouseOver="show1()" onMouseOut="hide1()">Corporate Team Outing - LNT</span>
<div id="img1" style="display:none">
<img src="" alt="image 1" />
<img src="" alt="image 2" />
</div>
</body>
</html>
i want that when u put mouse on text it show image in div i m trying to do it but it not working.
Forget javascript for this one! CSS is the answer. Put a hover state on ID:img1 and the images inside the div (if u don't do the latter, mousing over the images will cancel out the div mouse over. So it will look like this (not inline styles due to mouse over states declaration):
#img1 {
Background-image: none;
}
#img1:hover, img1:hover img {
Background-image: url(your URL);
}
You could change the IDs to classes, so the CSS can be reused and keep the IDs for coding (javascript etc)
I have a jsfiddle here to illustrate my question
http://jsfiddle.net/ttmt/DgnLd/1/
It's just a simple button with a hidden div. The button slide toggles the hidden div.
I would like to have div filled with a random color each time it opens.
At the moment it's picking two random colors - when the div is opening and when the finished opening.
How can I stop the second color and just have one.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
<style type="text/css">
•{
margin:0;
padding:0;
}
#wrap{
margin:20px;
}
#btn{
width:100px;
height:50px;
background:red;
color:white;
padding:10px;
margin:0 0 50px 0;
}
#infoDiv{
width:500px;
height:300px;
display:none;
}
</style>
</head>
<body>
<div id="wrap">
CLICK
<div id="infoDiv">
</div>
</div>
<script>
$(document).ready(function(){
alert('here');
var color_arr = ['#6faab6','#80c3d1','#888888','#d8e420','#21b4e4','#e4b115','#33ace4'];
$('#infoDiv').hide();
$('#btn').bind('click', function(){
$('#infoDiv').slideToggle('slow', function(){
var ranNum = Math.floor(Math.random()*color_arr.length);
var col = color_arr[ranNum];
$('#infoDiv').css({'background': col});
});
});
});
</script>
</body>
</html>
$(document).ready(function(){
var color_arr = ['#6faab6','#80c3d1','#888888','#d8e420','#21b4e4','#e4b115','#33ace4'];
$('#infoDiv').hide();
$('#btn').bind('click', function(){
var ranNum = Math.floor(Math.random()*color_arr.length);
var col = color_arr[ranNum];
$('#infoDiv:hidden').css({'background': col});
$('#infoDiv').slideToggle('slow');
});
});
Try that -- I've moved your Random color picker out of the SlideToggle callback as that will only run once the slide was finished which from your question I assumed you didn't want.
It also only changes the color of the info div if it's hidden by checking the visible selector, you can read more about that here
Let me know if that works for you
I need fadeout a div in my page using prototype. How can I fadeout following jquery code in prototype?
$('.exercise-main .content .loading-failure').fadeOut(function(){
//my code
}
I think you will need to use script.aculo.us (which is an excellent add-on to the fantastic prototype.js) so as to achieve the Fade effect.
Basic Syntax
new Effect.Fade('id_of_element', [options]);
OR
new Effect.Fade(element, [options]);
Complete Code.
<html>
<head>
<title>script.aculo.us examples</title>
<script type="text/javascript"
src="/javascript/prototype.js"></script>
<script type="text/javascript"
src="/javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript">
function FadeEffect(element){
new Effect.Fade(element,
{ duration:1});
}
function ShowEffect(element){
new Effect.Appear(element,
{duration:1, from:1.0, to:1.0});
}
</script>
</head>
<body>
<div onclick="FadeEffect('hideshow')">
Click me to fade out the image
</div>
<br />
<div onclick="ShowEffect('hideshow')">
Click me to display the image once again
</div>
<br />
<div id="hideshow">
<img src="/images/scriptaculous.gif" alt="script.aculo.us" />
</div>
</body>
</html>
Tutorial link - http://www.tutorialspoint.com/script.aculo.us/scriptaculous_fade_effect.htm
I myself have used prototype.js and this add-on very heavily so just in case you face any issue, feel free to comment.. :-)
Does anyone know how to modify jquery tools tooltip:
http://flowplayer.org/tools/tooltip.html
to use event special hover:
http://blog.threedubmedia.com/2008/08/eventspecialhover.html
jQuery tools tooltip doesn't rely on hover method, so just loading the plugin is insufficient.
Source for event hover:
http://threedubmedia.googlecode.com/files/jquery.event.hover-1.0.js
Here's the source for jquery tools tooltip:
http://flowplayer.org/js/tools/tools.tooltip-1.1.1.js
I've been trying to get this to work for a while. Thanks in advance.
#Jourkey, What I understood from question is that you want to show the tooltip only when HOVER event is reported by jquery.event.hover plugin. If this is the case then after lot of trial and error I got it like this:
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.event.hover-1.0.js"></script>
<script type="text/javascript" src="tools.tooltip-1.1.1.js"></script>
<style type="text/css">
div.hovering{background-color:yellow;}
div.normal{background-color:white;}
#demotip { display:none; background:transparent url(tooltip/white.png);
font-size:12px; height:60px; width:160px; padding:25px; color:#0505ff;}
</style>
<div id="rect" style="height:200px;width:200px;border:2px blue groove;"
class="normal" title='This is testing tooltip'></div>
<div id="demotip"> </div>
<span id="btnShow" style="border:1px solid black;">click</span>
<span id="btnClose" style="border:1px solid black;">close</span>
JavaScript:
<script type="text/javascript">
var api; //TO TAKE CARE OF TOOLTIP OBJECT
var hovering=false; //TO TRACK IF HOVERING STARTED BY HOVER PLUGIN OR NOT
$(document).ready(function(){
$.tools.tooltip.conf.position=["center","right"];
$.tools.tooltip.conf.api=true;
$.tools.tooltip.conf.effect='fade';
$.tools.tooltip.conf.onBeforeShow = function(a){
return hovering;};
$.tools.tooltip.conf.onBeforeHide = function(a){
return !hoveRing;};
var api = $("#rect[title]").tooltip("#demotip");//CREATE TOOLTIP
$("#btnShow").click(function(){
hovering=true;
api.show();});
$("#btnClose").click(function(){
hovering=false;
api.hide();});
$.event.special.hover.delay = 500;//REPORT HOVER AFTER DELAY OF 500MS
$("#rect").hover(function(){},//HOVER START (BEFORE HOVERING)
function(){
hovering=true;
api.show();}, //HOVERING
function(){
hovering=false;
api.hide();}//HOVER END
);
});
</script>