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;
}
Related
I have two images of arrows, up and down. My problem is when I use slideToggle(), it toggles up and down, but the image stays the same rather then changing. For instance, if I toggle up, the image should automatically change to the downward arrow and vice versa. Also, these arrows should be moved to the top of the page once the toggle happens. The current code displays two arrows, I would like that to be one arrow that changes based on the toggle.
What I have so far..
HTML:
<div id="toggleParam">
<input type="image" class="upArrow" src="~/Content/Images/Reserved.ReportViewerWebControl.png" name="Show / Hide Parameters" />
<input type="image" class="downArrow" src="~/Content/Images/downArrow.png" name="Show / Hide Parameters" />
</div>
CSS:
.upArrow{
display: block;
margin-left: 690px;
margin-top: 0px;
border-width: 5px;
padding-bottom: 0px;
cursor: pointer;
height: 7pt;
}
.downArrow{
display: block;
margin-left: 760px;
margin-right: 70px;
margin-top: -10px;
border-width: 5px;
padding-bottom: 0px;
cursor: pointer;
height: 7.5pt;
}
JavaScript/JQuery:
$(document).ready(function () {
$('#toggleParam').on("click", function () {
$('.dropdown').slideToggle();
});
What I need is shown in these two pictures..
I realize missing a lot of code on the JS part.. I am working on it while asking this question. Thanks for the help!
You need to simply include the arrows' elements in the toggle function accordingly:
$('#toggleParam').on("click", function () {
$('.downArrow, .upArrow').toggle();
$('.dropdown').slideToggle();
});
Also in the beginning you need to hide one of the arrows (not sure which one in your case):
.downArrow{
display: none;
...
.upArrow{
display: block;
Try this (note - there's n-ways to do this; this is just how i'd do it).
<!--index.html-->
<div id="toggleParam" class="toggle-param--up">
<input type="image" class="up-arrow" src="~/Content/Images/Reserved.ReportViewerWebControl.png" name="Show / Hide Parameters" />
<input type="image" class="down-arrow" src="~/Content/Images/downArrow.png" name="Show / Hide Parameters" />
</div>
/* app.css */
.toggle-param--up .down-arrow { display; none;}
.toggle-param--down .up-arrow { display; none;}
//app.js
$('#toggleParam').on("click", function (e) {
// the rest of your logic goes here....
var isUp = $(e.target).hasClass("toggle-param--up"),
directionClass = { true: "toggle-param--up", false: "toggle-param--down"};
$(e).target.removeClass(directionClass[isUp]).addClass(directionClass[!isUp];
});
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>
I have a tab to be displayed on the bottom left corner of the window, but it seems to be hard to make it actually clickable (also the iframe is not clickable), so it does´t do any animation on cell phone and even web browser.
http://jsfiddle.net/bo9gy77q/3/
How could I fix this eror? In the console it says: Uncaught ReferenceError: $ is not defined. The problem with clicking the tab on mobile browsers, and make clickable the iframe?
Note: There is a iframe in the tab, so I also wil need it to be clickable, so far nothing that I tryed fix it.
Note: The hard to click is especially refered to old movile devices and safary.(so hard to make it work on those)
¿CAN I MAKE THE CLICKABLE ZONE BIGGER?
Have a look at this fiddle, animation is working now fine and smooth : http://jsfiddle.net/bo9gy77q/2/
I have just removed transition property from "#a-tab" class and smoothness is there
$("#a-tab,#a-tab *").click(function () {
//$("#a-tab").focus();
$("#a-tab").animate({
width: '320px'
}, "fast");
$(".deluxe").animate({
width: '30px'
}, "slow");
})
$("#a-tab").on('focusout', function () {
$("#a-tab").animate({
width: '10px'
}, "fast");
$(".deluxe").animate({
width: '5px'
}, "fast");
});
#a-tab:focus {
outline:none;
width:340px;
}
.deluxe {
position: relative;
background:#999;
width:5px;
height:108px;
}
#a-tab {
background:#FFF;
border:solid #d9d9d9 2px;
position: fixed;
bottom: 12px;
right: -20px;
z-index: 5;
width: 30px;
height: 112px;
padding: 5px 20px 5px 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="a-tab" tabindex="1">
<table>
<tbody>
<tr>
<td>
<div class="deluxe"></div>
</td>
<td></td>
<td>
<div class="g-page" data-width="273" data-href="//plus.google.com/u/0/111125806825828710565" data-layout="landscape" data-rel="publisher"></div>
</td>
</tr>
</tbody>
</table>
</div>
I need to make a radio button behave like a check box being able to check/unchecked. the problem is because the script is activated by the click event which colors the label.
HTML code
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<td>16:00-17.30</td>
<td><label for="date_last07">19.Deployment event - matchmaking session</label></td>
<td colspan="5"> </td>
</tr>
</table>
<input style="display:none;" id="date_last07" name="date_last01" type="radio" value="07" />
JS code
$(document).ready(function(){
$("input[name='date_last01']").click(function() {
var test = $(this).val();
$("label[for='date_last"+test+"']").css("background-color", "yellow");
$("input[name='date_last01']").prop('checked', false);
$("input[name='date_last01']").prop('checked', true);
});
});
CSS code
tr {
height: 1px;
}
td{
height: 100%;
}
label{
display: block;
min-height: 100%; /* for the latest browsers which support min-height */
height: auto !important; /* for newer IE versions */
height: 100%; /* the only height-related attribute that IE6 does not ignore */
}
label:hover {
cursor:pointer;
}
fiddle: http://jsfiddle.net/upR8t/
Is it possible to attach a popup (div) dynamically to a row in a table such that the popup is rendered by a mouseover, and hidden by a mouseout action?
The code I put together ( see below ) refuses to render the popups, albeit the event handlers are called.
Is what I'm trying to do really possible? From [mouseover() mouseout() jQuery add/removeClass problem, I'm guessing the problem is probably with the CSS
Thought's people?
EDIT:
The class attached to the selected div elements is updated as expected for both, mouseover and mouseout.
<link rel="stylesheet" type="text/css" href='mine.css' />
<html>
<head>
</head>
<body onload="doStuff();">
<table id="myTable">
<tr id="r1">
<td>R1C1</td>
<td>R1C2</td>
<td>R1C3</td>
</tr>
<tr id="r2">
<td>R2C1</td>
<td>R2C2</td>
<td>R2C3</td>
</tr>
<tr id="r3">
<td>R3C1</td>
<td>R3C2</td>
<td>R3C3</td>
</tr>
</table>
</body>
<script type="text/javascript">
function doStuff(){
var lRowCount = document.getElementById("myTable").rows.length;
for(lIter = 0; lIter < lRowCount; lIter += 1){
var lDynamicColumn = document.createElement("td");
var lmyDiv = document.createElement( "div" );
var lId = document.getElementById("myTable").rows[lIter].id;
// div content to be displayed as Text content;
var lText = document.createTextNode( "balderdash!" );
lmyDiv.id= lId + "_popup";
lmyDiv.style.display="none" ;
lmyDiv.appendChild( lText );
/*lDynamicColumn.appendChild(lmyDiv);
document.getElementById("myTable").rows[lIter].appendChild(lDynamicColumn);*/
document.getElementById("myTable").rows[lIter].appendChild(lmyDiv);
document.getElementById("myTable").rows[lIter].onmouseover = function(){
showPopup( lmyDiv.id );
}
document.getElementById("myTable").rows[lIter].onmouseout = function(){
hidePopup( lmyDiv.id );
};
}
alert(document.getElementById("myTable").innerHTML);
}
function showPopup( myId ){
document.getElementById(myId).className="show";
}
function hidePopup( myId ){
document.getElementById(myId).className="hide";
}
</script>
</html>
mine.css
.show{
background-color: #ffffc0;
overflow: auto;
z-index: 100;
border: .1em solid rgb(200, 128, 0);
float: right;
top: -10px;
margin: 5px;
height: inherit;
width: inherit;
position: absolute;
white-space: no-wrap;
}
.hide{
z-index: -1;
}
Add display: block to .show style. Also, your css selectors in the example are wrong, replace show with .show and hide with .hide (if that's not a typo).
On mouse over try document.getElementById('yourcontrolID').style['display']='none';
Hope this works.
I am not sure if this is the problem, but it could be that the lmyDiv is not accessible inside the inline function.
document.getElementById("myTable").rows[lIter].onmouseover = function(){
showPopup( lmyDiv.id );
}
EDIT:
I tested it, and setting the style class dynamically like this did not work in Firefox, IE, Chrome or Safari.
But it did actually work in Opera!
EDIT 2:
I was thinking about something else that could be the issue here:
When the tooltip is shown, is it positioned so that the mouse is inside the tooltip area? In that case, it might be that the onmouseout event on the row is triggered, because the row in question does not longer have "direct contact" with the mouse...
If this is the case, you should add:
lmyDiv.onmouseover = document.getElementById("myTable").rows[lIter].onmouseover;
lmyDiv.onmouseout = document.getElementById("myTable").rows[lIter].onmouseout;
function hide(obj)
{
document.getElementById(obj.id).style.display ='none';
}
onMouseover='hide(this) call this function on div u want to hide.
If you are willing to risk browser incompatibility (and I mean some fairly older browsers we would all like to forget yet always show up when they shouldn't), you should consider simply dropping the javascript all together and simply use pseudo-classes, like so:
.trMessage {
background-color: #ffffc0;
overflow: auto;
z-index: 100;
border: .1em solid #c88000;
float: right;
top: -10px;
margin: 5px;
height: inherit;
width: inherit;
position: absolute;
white-space: no-wrap;
display: none;
}
.trMessage:hover {
display: block;
}
Now you have the option of adding the div to each row in the actual html or keeping the javascript that adds the message box, but without the need for event handlers to adjust for style or class switching. You simply create the boxes the way you already do but use the class "messageBox" for each one. Then the css takes it from there.
Give a try at jQuery!