How to hover an edit text in CSS? - javascript

I am stuck with an issue of hover on edittext when placed near the field.
Required:
When I place in div1 or div2 edittext field should be visible and it should be editable
When I place outside div1 or div2 edit text should not be visible only from and to should be visible.
HTML:
<div class="textboxes">
<ul>
<li><input type="text" id="txt" /></li></ul>
</div>
<div class="edit">
<a href="#" id="edit" runat="server" >edit</a>
</div>
CSS:
.textboxes {margin:0; padding:0; display: none; }
.textboxes ul li {list-style-type:none; padding:5px 0 0;}
jQuery:
$("#edit").click(function() {
if ($('.textboxes').is(':visible')) {
$('.textboxes').hide();
// do save info
//$(this).val('Edit');
}
else {
$('.textboxes').show();
// $(this).val('Edit');
}
$(this).hide().after('<span class="edit">' + $(this).val() + '</span>');
});

Check the below demo .. It might helps you..
Demo
HTML:
<div class="wrap">
<div class="box">
<div>From :</div>
<div class="txt">India</div>
<div class="input"><input type="text" /></div>
</div>
<div class="box">
<div>To :</div>
<div class="txt">America</div>
<div class="input"><input type="text" /></div>
</div>
</div>
Script:
$(".box").mouseenter(function (e1) {
var txt = $(this).children(".txt");
input = $(this).children(".input");
input.children("input").val(txt.html());
txt.css("display", "none");
input.css("display", "inline-block");
}).mouseleave(function (e2) {
var txt = $(this).children(".txt");
var input = $(this).children(".input");
txt.html(input.children("input").val());
input.css("display", "none");
txt.css("display", "inline-block");
});
Output:

Mouse enter function in Jquery will help you( I hope so) to achieve your requirement.
Here is an example
$('.textboxes').hide();
$( "#edit" )
.mouseenter(function() {
$('.textboxes').show();
})
.mouseleave(function() {
$('.textboxes').hide();
});

HTML:
<div id="showTextBox">
<input type="text" id="textBox" style="visibility:hidden"></input>
</div>
JQuery:
$("#showTextBox").mouseover(function() {
$("#textBox").css('visibility','visible');
});
$("#showTextBox").mouseout(function() {
$("#textBox").css('visibility','hidden');
});
Working Demo

Related

Javascript Hide/Show Button Does Not Work Properly

I want to add Javascript show/hide button to show and hide a dive element of my page.
This is my code:
while($r = $query->fetch(PDO::FETCH_OBJ)){
echo "
<html>
<head>
<title>What is the equivalent?</title>
<style>
.center{
margin-left:50%;
}
</style>
</head>
<body>
<div class='center'>
<div class='show'>
<form action='' method='POST'>
<h1>".$r->german."</h1>
<h5>".$r->table_id."</h5>
<p><input type='submit' value='Show' onclick='myFunction()'></input></p></br>
<div id='myDIV'>
This is my DIV element.
</div>
<p></p>
</form>
<a href='en-de.php' style='text-decoration:none'>En to De</a>
</div>
</div>
<hr>
<p>$count</p>
</body>
<script>
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
</html>
";
}
As you can see I have set this <input type='submit' value='Show' onclick='myFunction()'></input> and the myFunction() is called at the bottom between script tags.
But the problem is it does not work out and div within id of myDIV is always shown at the page.
So how to fix this? What's going wrong here?
If you need more than one form, you should delegate
Do not loop a complete HTML page
Your myDIV is a duplicate ID, use a class instead
Perhaps you meant this - no need for the form at all. If you need a form, use the submit event instead
document.querySelector(".center").addEventListener('click', function(e) {
const tgt = e.target;
if (tgt.classList.contains("toggle")) {
tgt.closest(".show").querySelector(".myDIV").classList.toggle("hide")
}
});
.hide {
display: none;
}
<div class='center'>
<div class='show'>
<h1>german</h1>
<h5>table_id 1</h5>
<p><input type='button' value='Show' class="toggle" /></p>
<div class='myDIV hide'>
This is my DIV element 1
</div>
</div>
<div class='show'>
<h1>german</h1>
<h5>table_id 2</h5>
<p><input type='button' value='Show' class="toggle" /></p>
<div class='myDIV hide'>
This is my DIV element 2
</div>
</div>
</div>
<hr>
<p>$count</p>
Just change your input type to button
<input type='button' value='Show' onclick='myFunction()'></input>

Show div on radiobutton hover

Now I have smth like this:
http://jsfiddle.net/54tsowq7/107/
I want to save function if radiobutton selected - div with picture is shown.
But how can I make that when radiobutton text is on hover, the same picture is shown? And when mouseleave - it dissapear?
$(document).ready(function() {
$('input[type="radio"]').change(function() {
$('.text, .img').hide();
var $pic = $('#'+$(this).data('picid'));
var $text = $('#'+$(this).data('textid'));
if ($(this).prop('checked')) {
$pic.show();
$text.show();
}else{
$pic.hide();
$text.hide();
}
});
});
<div class="img" id="pic2" style='display:none'><img src="http://images.math.cnrs.fr/IMG/png/section8-image.png" alt=""></div>
<div class="img" id="pic3" style='display:none'><img src="http://www.simpleimageresizer.com/static/images/simple-image-resizer-128x128.png" alt=""></div>
<form class="radiobuttons">
<p class="descr" id="desc1" data-picid="pic2" data-descid="desc1"><input type="radio" name="item1" id="item1" value="1" data-picid="pic2" data-textid="text1">Text 1</p>
<p class="descr" id="desc2" data-picid="pic2" data-descid="desc2"><input type="radio" name="item1" id="item2" value="1" data-picid="pic2" data-textid="text2">Text 2</p>
<p class="descr" id="desc3" data-picid="pic3" data-descid="desc3"><input type="radio" name="item1" id="item3" value="1" data-picid="pic3" data-textid="text3">Text 3</p>
</form>
<div class="text" id="text1" style='display:none'>Lorem Ipsum Text1</div>
<div class="text" id="text2" style='display:none'>Lorem Ipsum Text2</div>
<div class="text" id="text3" style='display:none'>Lorem Ipsum Text3</div>
It's a little bit messy, but if I correctly understand, you want something like this?
$(document).ready(function() {
$('input[type="radio"]').hover(
function() {
var $pic = $('#'+$(this).data('picid'));
var $text = $('#'+$(this).data('textid'));
if(!$(this).prop('checked')) {
$pic.show();
$text.show();
}
}, function() {
var $pic = $('#'+$(this).data('picid'));
var $text = $('#'+$(this).data('textid'));
if(!$(this).prop('checked')) {
$pic.hide();
$text.hide();;
}
}
);
$('input[type="radio"]').change(function() {
$('.text, .img').hide();
var $pic = $('#'+$(this).data('picid'));
var $text = $('#'+$(this).data('textid'));
if ($(this).prop('checked')) {
$pic.show();
$text.show();
}else{
$pic.hide();
$text.hide();
}
});
});
And put your div images to the bottom of your HTML
You can add mouseenter and mouseout events.
But this function will not trigger change event, change event can only trigger when you click on radio button and its attribute or value get changed
$('input[type="radio"]').on('mouseenter',function() {
// do anything on mouse hover
});
$('input[type="radio"]').on('mouseout',function() {
// do anything on mouse leave
});
Try this:
function handlerInFunc(){
$(".myPicOneClass").show();
}
function handlerOutFunc(){
$(".myPicOneClass").hide();
}
$(".myRadioOneClass").hover( handlerInFunc, handlerOutFunc );
Of course, give the proper class selector names you desire for the specific elements.

Onclick displaying div as block is not working?

I'm trying to display text if you click on a certain div.
But it is not working, I am also not getting errors?
<p class="activiteitInfo">
<a class="fancybox-inline" style="color: #f3f3f3 !important;">Meer info</a>
</p>
<p class="activiteitReserveer">
Reserveren
</p>
<div class="hoi" style="display: none;">
<?php echo $meer_info; ?>
</div>
<script>
$(document).ready(function () {
$(".activiteitenInfo").click(function () {
$(".hoi").css("display", "block");
} );
} );
</script>
It seems that the element you are trying to listen to click events on has the class activiteitInfo not activiteitenInfo to which you are trying to listen in your javascript.
You have a typo, please use:
<script>
$(document).ready(function () {
$(".activiteitInfo").click(function () {
$(".hoi").css("display", "block");
} );
} );
</script>
Your element class is "activiteitInfo", and your looking for "activiteitenInfo".
$(document).ready(function () {
$(".activiteitInfo").click(function () {
$(".hoi").css("display", "block");
} );
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="activiteitInfo">
<button class="fancybox-inline" style="color: #0003 !important;">Meer info</button>
</p>
<p class="activiteitReserveer">
Reserveren
</p>
<div class="hoi" style="display: none;">
test
</div>
Try this. You are use wrong class name.
$(document).ready(function() {
$(".activiteitInfo").on('click', function() {
$(".hoi").css("display", "block");
});
});
.activiteitInfo > a {
color: blue;
}
.activiteitReserveer {
color: green;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="activiteitInfo"><a class="fancybox-inline">Meer info Click Me!</a></p>
<p class="activiteitReserveer"><a>Reserveren</a></p>
<div class="hoi" style="display: none;">
Text
</div>
<script>
</script>

How to move div element inside another div element?

var $selected = $();
var $itemLv1 = $("#create-summary .lv1");
$itemLv1.click(function(){
$selected = $(this);
$(this).toggleClass('clicked').siblings().removeClass('clicked');
});
$("#moveUp").click(function(){
$selected.add($selected.nextUntil(":not(.lv2)"))
.insertBefore($selected.prevAll(".lv1:first"));
});
$("#moveDown").click(function(){
$selected.add($selected.nextUntil(":not(.lv2"))
.insertAfter($selected.nextAll(".lv1:first"));
});
.clicked{
color: red;
font-weight:700;
}
.lv2, .lv3 {
margin-left:15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="create-summary">
<div class="lv1"> Introduction</div>
<div class="lv1">1. AAA</div>
<div class="lv1">2. BBB</div>
<div class="lv1">3. CCC
<div class="lv2">3.1 aaa</div>
<div class="lv2">3.2 bbb</div>
<div class="lv2">3.3 ccc</div>
<div class="lv2">3.4 ddd
<div class="lv3">3.4.1 xxxxx</div>
<div class="lv3">3.4.2 yyyyy</div>
<div class="lv3">3.4.3 zzzzz</div>
</div>
</div>
<div class="lv1">4. DDD</div>
<div class="lv1">5. EEE</div>
</div>
<button type="button" id="moveUp">Up </button> /
<button type="button" id="moveDown">Down</button>
Now, I can move up or down for lv1 element with its child element.
However, how to only move an div element inside the child div?(only in lv3 or lv4 even lv5 or lv6)
Fir example, I want to move "ccc" up only in lv2 or move xxxxx only in lv3.
Is there any way can do that?
I assume that you want a functionality like this,
var $selected = $();
var $itemLv1 = $("#create-summary [class^=lv]");
$itemLv1.click(function (e) {
$selected = $(this);
var x = $(this).toggleClass('clicked');
$("[class^=lv]").not(x).removeClass("clicked child").addClass("child");
x.siblings().removeClass('clicked');
e.stopPropagation();
});
$("#moveUp").click(function () {
$selected.insertBefore($selected.prev("[class^=lv]"));
});
$("#moveDown").click(function () {
$selected.insertAfter($selected.next("[class^=lv]"));
});
DEMO

How to convert Image to text box in HTML page?

I have a small image in an HTML page. If I click on the image it should be converted into a textbox and two links have to appear besides that text box. Can anyone help me with a Javascript function which I can call on onClick?
Please find the attached image for better understanding.
HTML
<div class="resim">
<img class="image" src="image.png"/>
</div>
<div class="txt">
<input type="text"/>
</div>
CSS
.txt{
display:none;
}
.resim{
width:100px;
height:100px;
cursor:pointer;
}
JS
$(document).ready(function(){
$(".resim").click(function(){
$(".txt").show(function(){
$(".resim").hide();
});
});
});
Demo
http://jsfiddle.net/6W8nd/1/
try this
<span id="my"><img src="image.png" onClick="z()"></span>
<span id="dis" style="display:none">
<input type="text" id="text">submit
cancel</span>
<script>
function z()
{
document.getElementById("my").style.display="none";
document.getElementById("dis").style.display="";
}
</script>
Here is a jquery implementation:
HTML:
<div id="content">
<img id="image" src="image.png" onclick="transition()"/>
<div id="input">
<input type="text"/>
Submit
Clear
</div>
JS:
$(document).ready(function(){
$("#input").hide();
$("#image").click(function(){transition()});
});
function transition(){
$("#image").fadeOut();
$("#input").fadeIn();
}
Working fiddle : http://jsfiddle.net/6W8nd/
Try following code.
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click on Image change it into text input.</p>
<script type="text/javascript">
function showStuff() {
// show text input
document.getElementById('mytextbox').style.display = 'block';
// hide image
document.getElementById('myimage').style.display = 'none';
}
</script>
<td class="post">
<img id="myimage" src="mypic.png" name="pic" onclick="showStuff()"/>
<span id="mytextbox" style="display: none;">
<input type="text" name="mytextinput">
</span>
</td>
</body>
</html>
Please go through following jsfiddle for desired output link:
Demo
For your information you need to add jQuery code like:
$( ".img-class" ).click(function() {
$(this).hide();
$(".text-class").show();
});
Html code like:
<p class="img-class">
<img src="http://s7.postimg.org/a5m750wnr/Screen_Shot_2014_05_29_at_5_06_07_PM.png" />
<p>
<p class="text-class" style="display:none;">
<input type="text" name="textbox"> Submit Cancel
<p>
ty this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
.container{position: relative;}
.Myimg{height: 50px; width: 50px; position: absolute; top:0; left: 0}
.myform{display: none;position: absolute; top:5px; left: 0}
</style>
<script>
$(document).ready(function() {
$( ".Myimg" ).click(function() {
$( ".myform" ).fadeIn( "slow", function() {
$( ".Myimg" ).fadeOut( "slow");
});
});
$( ".cancel" ).click(function() {
$( ".Myimg" ).fadeIn( "slow", function() {
$( ".myform" ).fadeOut( "slow");
});
});
})
</script>
</head>
<body>
<div class="container">
<img src="http://icons.iconarchive.com/icons/custom-icon-design/office/256/edit-icon.png" class="Myimg" alt="myImg" />
<div class="myform">
<form action="index.html" >
<input type="text" id="myInput" />
submit
cancel
</form>
</div>
</div>
</body>
</html>
Here is a bit more of a generic solution to work on.
Here is a demo, click on the image: http://jsfiddle.net/upGPg/
function InlineEditor(){
var fieldName;
var toggleElement;
var editorTemplate = '<input type="text" name="%name%" /><input type="submit" value="Submit" /><input type="reset" value="Reset" />';
var editorElement;
this.renderEditor = function (){
var node = document.createElement("div");
node.style.display = 'none';
node.innerHTML = editorTemplate.replace("%name%", this.fieldName);
return node;
}
this.setFieldName = function (fieldName){
this.fieldName = fieldName;
}
this.isEditorVisible = function(){
return (this.editorElement.style['display'] != 'none');
}
this.onToggleEditor = function(){
if(this.isEditorVisible())
this.editorElement.style.display = 'none';
else
this.editorElement.style.display = 'block';
}
this.setToggleElement = function(element){
this.toggleElement = element;
var self = this;
element.addEventListener("click", function(){
self.onToggleEditor();
});
this.editorElement = this.toggleElement.parentNode.appendChild(this.renderEditor());
}
}
testEditor = new InlineEditor();
testEditor.setFieldName("test");
testEditor.setToggleElement(document.getElementById("test"));

Categories

Resources