I have a table of "cards", and I want to display a description on top of the card each time the mouse is passed over the card. To do that, I'm trying to use onmouseover and onmouseout functions.
My Javascript:
function showDescription(obj) {
elem1 = document.getElementById(obj + '_1');
elem1.style.display = 'none';
elem2 = document.getElementById(obj + '_2');
elem2.style.display = 'block';
}
function hideDescription(obj) {
elem1 = document.getElementById(obj + '_1');
elem1.style.display = 'block';
elem2 = document.getElementById(obj + '_2');
elem2.style.display = 'none';
}
My HTML:
<table id='teamTable' align="center">
<tr>
<td onmouseover="showDescription('content_1')" onmouseout="hideDescription('content_1')">
<div id="content_1_1" class="teamTableTitle">
Name
</div>
<div id="content_1_2" class="teamTableDescription">
Description
</div>
</td>
</tr>
</table>
Fiddle Link
The problem is that my two events onmouseover and onmouseout act like if they where onclick. Nothing happens the mouse is passed over the card, but it works when I click...
Anyone knows what I did wrong ? :/
Base on my understanding on your code. I came up with this and converted it into jQuery
HTML
<table id='teamTable' align="center">
<tr>
<td id="content_1">
<div id="content_1_1" class="teamTableTitle">
Name (Hover me to show description)
</div>
<div id="content_1_2" class="teamTableDescription">
Description
</div>
</td>
</tr>
</table>
JS (jQuery)
$('#content_1').hover(function(){
$(this).find('div').eq(0).hide().next('div').show();
},function(){
$(this).find('div').eq(0).show().next('div').hide();
});
Click this for working JSFiddle
Here's a jQueryless solution to your problem :
HTML
<table id='teamTable' align="center">
<tr>
<td class="td-test">
<div id="content_1_1" class="teamTableTitle">
Name
</div>
<div id="content_1_2" class="teamTableDescription">
Description
</div>
</td>
</tr>
</table>
Javascript
var tableEl = document.getElementsByClassName('td-test');
tableEl[0].addEventListener("mouseover", showDescription, false);
tableEl[0].addEventListener("mouseout", hideDescription, false);
function showDescription() {
var el1 = this.querySelector("#content_1_1");
var el2 = this.querySelector("#content_1_2");
el1.style.display = "none";
el2.style.display = "block";
}
function hideDescription() {
var el1 = this.querySelector("#content_1_1");
var el2 = this.querySelector("#content_1_2");
el1.style.display = 'block';
el2.style.display = 'none';
}
Related
I'm just starting Angular JS and trying to have a scrollbar appearing as I add an element in the list which would be populated in the box of the contents.
I installed ng-scrollbar from here. https://github.com/asafdav/ng-scrollbar
HTML:
<link rel="stylesheet" href="../dist/ng-scrollbar.min.css" >
<style>
.scrollme {
max-height: 100px;
}
</style>
</head>
<body>
<div ng-app="DemoApp">
<div class="container" ng-controller="DemoController">
<table border="0" width="100%">
<div class="scrollme" ng-scrollbar rebuild-on="rebuild:me" is-bar-shown="barShown">
<tr>
<th width="2%"></th>
<th width="14%">Name</th>
<th width="85%">Address</th>
</tr>
<tr>
<td>
<img src="addImageButton.png" ng-click="addRow()" />
</td>
<td class="inlineBlock">
<input type="text" ng-model="row.name" />
</td>
<td>
<input ng-model="row.addr" />
</td>
</tr>
<tr ng-repeat="row in rowList">
<td>
<img src="removeImageButton.png"ng-click="removeRow($index)" />
</td>
<td>{{row.name}}</td>
<td>{{row.client}}</td>
</tr>
</div>
</table>
</div>
</div>
</body>
JavaScript:
(function () {
'use strict';
var app = angular.module('DemoApp', ['ngScrollbar']);
app.controller('DemoController', DemoController);
function DemoController($scope) {
// portfolio and broker tabs
$scope.row = {}
$scope.row.name = "";
$scope.row.addr = "";
$scope.rowList = [];
// adding a row to list
$scope.addRow = function() {
var data = {};
data.name = $scope.row.name;
data.addr = $scope.row.addr;
$scope.rowList.push(data);
$scope.row.name = "";
$scope.row.addr = "";
console.log($scope.rowList);
}
// removing a row from the list
$scope.removeRow = function(obj) {
console.log('end' + $scope.rowList);
if(obj != -1) {
$scope.rowList.splice(obj, 1);
}
}
$scope.$on('scrollbar.show', function(){
console.log('Scrollbar show');
});
$scope.$on('scrollbar.hide', function(){
console.log('Scrollbar hide');
});
// $scope.$on('loopLoded', function(evt, index) {
// if(index == $scope.me.length-1) {
// $scope.$broadcast('rebuild:me');
// }
// });
}
})();
It's part of my code so it might not fully make sense. But the way it works is that if I pressed the addImageButton, it would add a row which will add a row on the web. And conversely, removeImageButton will delete a row which will show on the web immediately. I need a scroll bar appearing once it reaches the height 100px. I checked the last answer of the ng-scrollbar is not working with ng-repeat
as well but it didn't work. Would be great if I could get some help with the detailed explanation. :) Thanks!
Figured out! I need to put the broadcast method in addRow and removeRow methods. Also, I had to put the out from the
I have a select Box,
<table>
<tr><td>
<s:select id = "mode" list="#{'0':'SELECT','A':'ABC','B':'XYZ'}" > </s:select>
</td></tr>
</table>
Based on selection from this select box, i need to make the columns dynamic :
<table>
<tr>
<td><div align="center">Serial Number</div></td>
<td><div align="center">Employee Number</div></td>
<td id="name"><div align="center">Employee Name</div></td>
</tr>
<s:iterator status="stat" value="empList" id="empList">
<tr>
<td><div align="center"><s:property value="%{#stat.count}"/></div></td>
<td><div align="center"><s:property value="empNum" /></div></td>
<td><div align="center"><s:select id="nameList%{#stat.index}" list="#{'A':'ABC','B':'XYZ'}" > </s:select></div></td>
</tr>
</s:iterator>
</table>
The script I am using is like:
<script>
var mode = document.getElementById("mode");
var selMode = mode.options[mode.selectedIndex].value;
var cnt = document.getElementById("rowCnt").value;
if(selMode=="A"){
for(i=0;i<=cnt;i++){
var name = document.getElementById("name");
name.style.display = "none";
var lname = document.getElementById("nameList"+i);
lname.style.display = "none";
}
}
else{
for(i=0;i<=cnt;i++){
var name = document.getElementById("name");
name.style.display = "block";
var lname = document.getElementById("nameList"+i);
lname.style.display = "block";
}
}
</script>
But using id="nameList%{#stat.index}", it makes only select box dynamic, I want to make the whole column as dynamic.
<td id="nameList%{#stat.index}"><div align="center"><s:select list="#{'A':'ABC','B':'XYZ'}" > </s:select></div></td>
DOES NOT work. It seems value of %{#stat.index} cannot be passed as column id.
Is there any other way to make the whole column dynamic?
You can't use OGNL without Struts tag. To print the value of OGNL expression you should use s:property tag.
<td id="<s:property value='nameList%{#stat.index}'/>"><div align="center"><s:select list="#{'A':'ABC','B':'XYZ'}" > </s:select></div></td>
I'm trying to show/hide table rows with the help of buttons.
With the script I'm using now I'm only I'm only able to make one button and only able to show/hide one row.
I want to make more buttons where each button when pressed will show/hide a row. Also I want the button text to change between Info▼ and Info▲ as the first one does in my script.
If I have understood it correctly I should use classes instead of divs but I tried to do that without result.
If anyone could help me out with my script so I can produce more buttons where each one will show/hide a unique row when clicked on I would be grateful.
http://jsbin.com/tovicefu/1/edit This is a simple version of my layout. So when I press the first info button the row below should appear with one image.
Same with the other info button but it displays another row further below.
My script.
<script>
var button_beg = '<button class="button" onclick="showhide()">', button_end = '</button>';
var show_button = 'Info▼', hide_button = 'Info▲';
function showhide() {
var div = document.getElementById( "hide_show" );
var showhide = document.getElementById( "showhide" );
if ( div.style.display !== "none" ) {
div.style.display = "none";
button = show_button;
showhide.innerHTML = button_beg + button + button_end;
} else {
div.style.display = "block";
button = hide_button;
showhide.innerHTML = button_beg + button + button_end;
}
}
function setup_button( status ) {
if ( status == 'show' ) {
button = hide_button;
} else {
button = show_button;
}
var showhide = document.getElementById( "showhide" );
showhide.innerHTML = button_beg + button + button_end;
}
window.onload = function () {
setup_button( 'hide' );
showhide(); // if setup_button is set to 'show' comment this line
}
</script>
<table>
<tr>
<td> <div id="showhide"></div></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<div id="hide_show">
<img src="alfagel.gif" height="210" width="120"/>
</div>
</td>
<td></td>
<td></td>
</tr>`
<tr>
<td> <div id="showhide"></div></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<div id="hide_show">
<img src="alfagel.gif" height="210" width="120"/>
</div>
</td>
<td></td>
<td></td>
</tr>
</table>
You can use a combination of css and javascript. In this jsBin I used a data-attribute to identify 'hideable' rows.
Css:
tr[data-hide="true"] td {
display: none;
}
Javascript to toggle visibility:
function toggleRowvisibility(e) {
var tbl = document.querySelector('table')
,rows = tbl.rows;
for (var i=0;i<rows.length; i+=1){
var hidable = rows[i].getAttribute('data-hide');
if (hidable) {
rows[i].setAttribute('data-hide', /false/i.test(hidable));
}
}
}
I am creating a calculator using ASP.NET and JavaScript. When the user clicks the button, right now trying to get it to work for button 7, it calls a javascript function in order to see if the user clicked the clear button, the back space button, or if they clicked a number button. If it is a number button, the function is suppose to add the number to the textbox. For example, if the user clicks 7 then clicks 8, then clicks *, and then clicks 1, the text box will display: 78*1. I can't get the javascript function to work. I am currently just trying to get it so when button 7 is clicked, it adds the 7 to the text box. Below is my code:
<script>
var maxInputLength = 20;
function checkButtonClick(clickedValue)
{
var buttonValue = clickedValue.value;
var inputStr = document.getElementById('inputBox').value;
if (buttonValue == 'C')
{
document.getElementById('inputBox').value = "";
}
else
{
if (inputStr.length < maxLength)
{
var num = 6;
document.getElementById('inputBox').value = inputStr + buttonValue + num;
}
else
{
//document.getElementById('msg').innerHTML = "Maxmum length is " + maxInputLength;
}
}
return false;
}
document.getElementById('inputBox').readOnly = true;
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="main" class="main">
<div id="content" class="content">
<h3 id="h3">Simple Calculator</h3>
<div id="calculatorDiv">
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="4">
<asp:TextBox runat="server" CssClass="inputBox" disabled="disabled" ID="inputBox"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="4">
<br />
</td>
</tr>
<tr>
<td>
<asp:Button ID="ButtonNum7" runat="server" Text="7" CssClass="CalcButtons" OnClientClick="return checkButtonClick(7)" />
</td>
Ok so I started writing many comments I figured I'll just sum this up in an answer.
Several things in your code didn't wire up for me. You had maxLength which is undefined.
Also, you should take the value straight from the function and not with the .Value, like this:
function checkButtonClick(clickedValue)
{
var buttonValue = clickedValue;
// rest of code
}
Please see Fiddle Demo Here for a demonstration.
I have a table with each row containing a cell that has 8 check boxes(Column4)
Here is an example
<table id="enc-assets" class="table">
<thead>
<tr><th>Column1</th><th>Column2</th><th>Column3</th><th>Column4(CONTAINS OPTIONS)</th>
</thead>
<tbody>
<tr>
<td id="sc-isrc"></td>
<td id="sc-filename"></td>
<td id="sc-path" hidden></td>
<td id="sc-platforms">
<div id="sc-inline" style="display: inline-block;">
<div >
<div ng-repeat="p in products ">
<label id="enc"><input id="Platform" ng-checked="prod[p.name]" ng-model="prod[p.name]" ng-init="prod[p.name] = true" type="checkbox"/></label>
</div>
</div>
</div>
</td>
<td>
</td>
<td><br/><br/><button id="enqueuebtn" type="button" ng-click="Show(test)" class="btn-primary"></button></td>
</tr>
</tbody>
</table>
I am trying to loop through each row and assign values from each cell into an object .
I am having problems getting the value checked from the cell that contains the 8 check boxes. I can get values from the other cells just fine.
I have tried the following:
$("#enc-assets tbody tr").each(function() {
var message;
message = new Object();
message.isrc = $(this).find('#sc-isrc').text();
message.path = $(this).find('#sc-path').text();
$("#sc-platforms div div").each(function() {
var platform, selected;
selected = $(this).find('#Platform div label input').checked;
if (selected === true) {
platform = $(this).find('#enc').text();
This is the part that I am not sure if works:
selected = $(this).find('#Platform div label input').checked;
Do I have the correct nesting here to get the values from the check boxes?
Try this:
jsFiddle here
$("#enc-assets tbody tr").each(function() {
var message;
message = new Object();
message.isrc = $(this).find('#sc-isrc').text();
message.path = $(this).find('#sc-path').text();
$("#sc-platforms>div>div").each(function() {
alert( $(this).attr('id') );
var platform, selected;
selected = $(this).find('#Platform');
if(selected.is(':checked')) {
alert('Checked');
}
platform = $(this).find('#enc').text();
alert(platform);
}); //END each #sc-platforms>div>div
}); //END each #enc-assets tbody tr