I am learning html and I want that when we move the mouse into the picture, the elephant will be not shown any more. Instead there is a box (without border) with same size, inside the box there is certain text with blue background.
How should I change my code?
https://fiddle.jshell.net/66j07kyg/
Try this :
$(document).ready(function() {
$("td").mouseenter(function(){
$("img").css({display:"none"});
$(".txt").show();
$(this).css({verticalAlign:"top",backgroundColor:"blue"})
}).mouseleave(function(){
$("img").css({display:"block"});
$(".txt").hide();
$(this).css({backgroundColor:""})
})
})
img {
width: 200px;
height: 200px;
}
td {
width: 200px;
height: 200px;
}
.txt {
display: none;
color: #fff;
}
<table align='center'>
<tr>
<td>
<img src="http://gdbaif.com/images/animal-clipart/animal-clipart-02.jpg"/>
<span class="txt">This is some text</span>
</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Related
I'm trying to add a popup when a td is mousedover. Each row has multiple td's and the popup should only work on the first one. This works as long as mouseout is in the same column. That is, if I move the mouse up and down, the popup appears and disappears as expected. But if I move the mouse horizontally into the next td, the popup doesn't disappear. I created a jsfiddle for this but the popup isn't working. The console is saying the javascript function isn't defined but it works fine here so I must have something wrong in the jsfiddle setup. Here's the code I am using. Td's are being used because this is the code I was given. Can anyone see what is needed to get the popup to hide no matter how the mouse moved?
EDITED to solve the problem.
<style>
#pop-description{
display : none;
position : absolute;
z-index : 99999;
left : 0px;
padding : 10px;
background : #3AB9AE;
border : 1px solid #9a9a9a;
margin : 0px;
}
</style>
<script>
$(document).ready(function(){
function ShowDescription(id) {
var position = $('.class-desc-'+id).position();
var desc = $('#desc-'+id).val();
$('#pop-description').css('top', position.top);
$('#pop-description').text(desc);
//$('#pop-description').toggle();
$('.class-desc-'+id).mouseenter(function() {
$('#pop-description').css('display', 'block');
}).mouseleave(function() {
$('#pop-description').css('display', 'none');
});
}
});
</script>
<div style="display:relative;"><div id="pop-description" style="display:none;"></div></div>
<table>
<tr>
<td class="class-desc-0" onmouseOver="ShowDescription('0');">title</td>
<td>Address</td>
<td>State</td>
<input type="hidden" name="desc-0" value="first test" id="desc-0">
</tr>
<tr>
<td class="class-desc-1" onmouseOver="ShowDescription('1');">title</td>
<td>Address</td>
<td>State</td>
<input type="hidden" name="desc-1" value="second test" id="desc-1">
</tr>
<tr>
<td class="class-desc-2" onmouseOver="ShowDescription('2');">title</td>
<td>Address</td>
<td>State</td>
<input type="hidden" name="desc-2" value="third test" id="desc-2">
</tr>
</table>
I think you are overthinking it. Here is what I would do. I would use jQuery as demonstrated below.
Trigger the action you need on mouseenter
Initiate the opposite action on mouseleave
$(function() {
$(".toggle").mouseenter(function() {
// Your code goes below: initiate first action
$(this).addClass("showOff");
}).mouseleave(function() {
// Your code goes below: Initiate opposite action
$(".toggle").removeClass("showOff");
});
});
div {
cursor: pointer;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
transition: all 2s;
}
.showOff {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background: orange;
transition: all 2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle">Hove over me</div>
Note: In your case, you show the popup on mouseenter and hide it on mouseleave
Why not just using hover ? Like
class-desc:hover .popup{
display: block;
}
I'm trying a small code that has a div with image as a background and there is some text in it.
Here the case is when the user clicks on the div, the background should become white(and it is working perfectly). But Initially, the text that is present should be behind the Image. More like a foreground image.
Here is a working fiddle. https://jsfiddle.net/rj0h1g16/
please let me know where am I going wrong and how can I fix this.
Thanks
You could do this by initially setting the text opacity to 0 and changing its color to black with the same click event
function remove_image() {
document.getElementById("myClass").style.background = "white";
document.getElementById("myClass").style.color = "black";
}
.myClass {
background: url("https://cdn2.droom.in/photos/images/drm/super-cars.png");
height: 100px;
width: 100px;
color: rgba(0, 0, 0, 0);
}
<div class="myClass" id="myClass" onclick="remove_image()">
This is texr
</div>
You could simply set the display style on the text from "none" to anything else as you click.
<div class="myClass" id="myClass" onclick="remove_image()">
<div class="myText" id="myText"> This is texr</div>
</div>
function remove_image() {
document.getElementById("myClass").style.background = "white";
document.getElementById("myText").style.display = "inline";
}
.myClass {
background: url("https://cdn2.droom.in/photos/images/drm/super-cars.png");
height: 100px;
width: 100px
}
.myText {
display: none;
}
See here: https://jsfiddle.net/hg748zk7/
I want the text behind the image
You can use the z-index property for that. But the text will need to be wrapped in a new element.
In the example I've used js to add a class with the new properties you want.
function remove_image() {
document.getElementById("myClass").classList.add('active');
}
.myClass {
background: url("https://cdn2.droom.in/photos/images/drm/super-cars.png");
height: 100px;
width: 100px
}
.myClass.active {
background: white;
}
span {
z-index: -1;
position: relative;
}
.myClass.active span {
z-index: 1;
}
<div class="myClass" id="myClass" onclick="remove_image()">
<span>This is text</span>
</div>
function remove_image() {
document.getElementById("myClass").style.background = "white";
document.getElementsByTagName('span')[0].style.display = 'block'
}
.myClass {
background: url("https://cdn2.droom.in/photos/images/drm/super-cars.png");
height: 100px;
width: 100px;
}
<div class="myClass" id="myClass" onclick="remove_image()">
<span style='display:none;'>This is texr </span>
</div>
I want to us javascript to change the placeholder color of the contenteditable div when an event triggered. But what is Javascript/Jquery selector for this big guy?
I tried:
$("#topic_content_input[data-placeholder]:not([data-div-placeholder-content]):before").css({"color":"blue"});
Demo
<div id="topic_content_input" contenteditable="true" data-placeholder="I want to change my color on click " ></div>
<style>
#topic_content_input[data-placeholder]:not([data-div-placeholder-content]):before {
content: attr(data-placeholder);
float: left;
margin-left: 2px;
color: rgba(134,134,134,0.6);
}
</style>
You can do like following way using JQuery. Use addClass.
jQuery(function($){
$("#topic_content_input").click(function(){
$(this).addClass('placeholder');
});
});
.topic_content_input[data-placeholder]:not([data-div-placeholder-content]):before {
content: attr(data-placeholder);
float: left;
margin-left: 2px;
color: rgba(134,134,134,0.6);
}
.placeholder[data-placeholder]:not([data-div-placeholder-content]):before {
color: rgba(0,0,255,1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="topic_content_input" class="topic_content_input" contenteditable="true" data-placeholder="I want to change my color on click " ></div>
I have a table and i want to change a div to another div on hover and on hover out i want to change to what was before.
my table
<table id="table2">
<body>
<tr>
<td>
<div id="com.zynga.wwf2.free" class="redips-drag orange" style="border-style: solid; cursor: move; background-image: url(https://lh3.googleusercontent.com/mm9kB_B7UTEMuG2t914nmu2pox-G5a64GlajDaUdf7M5LfKBeYpBbeouyRVgsBATLSA=w300); background-size: 100px 100px; background-repeat: no-repeat; width: 100px;
height: 100px;"></div>
</td>
</tr>
</body>
</table>
now i want to change the div on hover to this:
<div><span>clicks:123</span><br><span>money:7890</span></div>
and on hoverout to return to before.
i try this:
var temp_html;
$("#table2 tr").find('div').hover(function(){
var temp_html = $(this).clone().wrap('<div>').parent().html();
$(this).replaceWith("<div><span>clicks:123</span><br><span>money:7890</span></div>");
}, function() {
$(this).replaceWith(temp_html);
});
what am i doing wrong?
Try having both of these divs inside the table and toggle their visibility:
HTML
<td id="cell">
<div id="one"></div>
<div id="two" class="hidden"></div>
</td>
CSS
.hidden { display:none }
jQuery
$('#cell').on('mouseenter', function() {
var that = $(this);
that.find('#one').addClass('hidden');
that.find('#two').removeClass('hidden');
}).on('mouseleave', function() {
var that = $(this);
that.find('#one').removeClass('hidden');
that.find('#two').addClass('hidden');
})
BETTER SOLUTION
Just toggle the class of the hovered element and let CSS take care of the rest!
HTML
<td id="cell" class="visibleOne">
<div id="one"></div>
<div id="two"></div>
</td>
CSS
#cell.visibleTwo #one { display:none }
#cell.visibleOne #two { display:none }
jQuery
$('#cell').on('mouseenter', function() {
$(this).removeClass('visibleOne').addClass('visibleTwo');
}).on('mouseleave', function() {
$(this).removeClass('visibleTwo').addClass('visibleOne');
})
You could use CSS only with :hover pseudo class:
td .redips-drag + div, td:hover .redips-drag {
display: none;
}
td:hover .redips-drag + div {
display: block;
min-height: 100px; /* set min-height to the biggest height between both elements to swap */
}
DEMO
I am trying to make resizible and draggable lines out of labels using jQuery UI.
The problem is, if I add two labels and try to resize the first label, it changes the position of the second label (but if I resize the second label it does not change the position of the first label).
How to prevent labels from changing other label's position while resizing..?
HTML:
<div id="main">
<button id="s">add line</button>
</div>
<div id="line" class="hidden">
<label class="dra"></label>
</div>
JS:
function makeline() {
$t = $(".dra", "#line").clone(true).draggable().resizable({
handles: "s, n"
});
$("#main").append($t);
}
$("#s").click(function () {
makeline();
});
CSS:
.dra {
display: block;
background-color:red;
width: 7px;
height: 80px;
border: 1px solid red;
}
.hidden {
display: none;
}
#main {
border: 1px solid black;
width:500px;
height: 300px;
}
UPDATE: Full code in JSFiddle
This is happening because the jQuery UI widgets set the position of element to relative by default, leaving it in the normal flow of the document. You can work around this issue by applying position:absolute for the elements like:
.ui-resizable {
position:absolute !important;
}
This will cause them to stack on top of each other rather than one below another since they aren't in the normal flow anymore. You can easily fix this using the jQuery ui position() utility method as shown below:
$("#s").click(function() {
$t = $("#line .dra").clone(true).draggable().resizable({
handles: "s, n"
})
if ($("#main").find(".dra").length) {
$t.position({
at: "left bottom",
of: "#main .dra:last"
})
};
$("#main").append($t);
});
.dra {
display: block;
background-color: red;
width: 7px;
height: 80px;
border: 1px solid red;
}
.hidden {
display: none;
}
#main {
border: 1px solid black;
width: 500px;
height: 300px;
}
.ui-resizable {
position: absolute !important;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div class="form-group">
<label>ADD two line and RESIZE THE FIRST LINE it will scroll down the line added after it. NOW add a 3rd line and resize the second line it will scroll down the 3rd line and if you resize the very first line you added it will scroll down the other lines</label>
<div id="main">
<button id="s">add line</button>
</div>
<div id="line" class="hidden">
<label class="dra"></label>
</div>
You can adjust the positioning however you want.
If your label is:
<div class="label">Lorem ipsum</div>
add this CSS:
.label {
white-space: nowrap;
}