<span id="hintText_123" style="display:none">
<table id="hintTable" style="width:100%;border:0px none;padding:0px;border-collapse:collapse;margin:0px;background-color:#7F9DB9;">
<tr style=background-color:#56718A;>
<td style="color:white;font-size:11px;font-weight:bold;padding:2px">
Title
</td>
<td style="width:5%;padding:2px">
<img alt="" src="close.gif" style="width:15px;height:15px" align=middle onclick=parent.hidetip()>
</td></tr>
<tr style="background-color:#8CA7C0;"><td style="color:white;font-size:10px;padding:2px" colspan=2 >Description
</td>
</tr>
</table>
</span>
This is the table i want to display on mouseclick event of the below item
<span style="display:block;" onmouseout="toggleHelp('helpGrp_123',false,'group_field_name_123')" onclick="showhint(document.getElementById('hintTextGrp_123') , this, event, '380px')">
Hello!!!
</span>
</tr>
but the table is not getting displayed on clicking Hello!!!
<script>
function callMe()
{
var tmp = document.getElementById("hintText_123");
alert(tmp.style.display);
tmp.style.display = 'block';
}
</script>
Call on onmousemove="callMe()"
Related
I am creating a friends component that lists users friends based on a response from an endpoint.
I want to render the responses into rows of a table as part of this I would like to use the bootstrap striped-table class
https://getbootstrap.com/docs/4.0/content/tables/#striped-rows
when I do a v-for the table renders correctly but the rows are only showing one background color
This is my template code
<template>
<div>
<h5 class="mb-4">Friends</h5>
<table class="table table-borderless table-striped ">
<tbody>
<div v-for="(friend, index) in UserStore.friends">
<tr>
<td class="text-center" style="width: 100px;">
<img style="width: 100px;" :src="friend.avatar" alt="User Image" class="rounded-circle">
</td>
<td>
{{friend.name}}<br>
<small>29 years old on Friday</small>
</td>
<td class="text-center" style="width: 80px;">
<i class="fa fa-gift"></i>
</td>
</tr>
</div>
</tbody>
</table>
<div v-if="!UserStore.friends">
<h6>You don't have any friends :(</h6>
Lets solve that Right now!
</div>
</div>
</template>
You should use a template element to render these rows. .table-striped works with sibling rows and in your code the rows are not siblings because they each have a div parent, so each row is seen as the first row.
<tbody>
<template v-for="(friend, index) in UserStore.friends">
<tr>
<td class="text-center" style="width: 100px;">
<img style="width: 100px;" :src="friend.avatar" alt="User Image" class="rounded-circle">
</td>
<td>
{{friend.name}}<br>
<small>29 years old on Friday</small>
</td>
<td class="text-center" style="width: 80px;">
<i class="fa fa-gift"></i>
</td>
</tr>
</template>
</tbody>
I'm trying to click on "Enter Email" link which in inside nested div and also tr and td have same repeater. Below is sample markup:
<div class="table-responsive >
<table id="vertical-view" class="main-table" ng-table="main-ng-table" >
<tbody ng-repeat="tbody-ng-repeat" >
<tr ng-repeat="main-row-ng-repeat-data">
<td ng-repeat="main-col-ng-repeat-data" >
<span class="main-span-title">UserName</span>
</td>
<td ng-repeat="main-col-ng-repeat-data" >
<div class="item-outer-wrapper>
<div class="item-inner-wrapper>
Enter UserName
</div>
</div>
</td>
</tr>
<tr ng-repeat="main-row-ng-repeat-data">
<td ng-repeat="main-col-ng-repeat-data" >
<span class="main-span-title">Email</span>
</td>
<td ng-repeat="main-col-ng-repeat-data" >
<div class="item-outer-wrapper>
<div class="item-inner-wrapper>
Enter Email
</div>
</div>
</td>
</tr>
<tr ng-repeat="main-row-ng-repeat-data">
</tr>
<tr ng-repeat="main-row-ng-repeat-data">
</tr>
</tbody>
<tbody ng-repeat="tbody-ng-repeat" >
</tbody>
<tbody ng-repeat="tbody-ng-repeat" >
</tbody>
</table>
</div>
the code that i'm using to access the link element and click on Enter Email is look like this
var text = element(by.repeater('tbody-ng-repeat').row(0)).all(by.repeater('main-row-ng-repeat-data').row(1)).all(by.repeater('main-col-ng-repeat-data').row(1)).all(by.linkText('Enter Email'));
text.click();
Somehow it not clicking on right link. Is there a way to correctly locate link in nested repeater?
Also I'm getting warning on clicking the link
Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
this seems like a scope problem, but i am not sure. my goal is to highlight a single row in a table. that implies that any previously highlighted row is returned to an unhighlighted state. the rows are created with the ng-repeat directive, like this:
<div id="myFedContents" style="height:320px" ng-controller="Controller2" class="scroller">
<table border="0" class="span12 table table-condensed" style="margin-left:0px" id="tblData">
<thead>
<tr><th>Year</th><th>Name</th><th>Useful Flag</th></tr>
</thead>
<tbody id="allRows">
<tr ng-repeat="item in itemlist | filter:thisText" ng-style="myStyle"> <td class="span1" valign="top"><a tabindex="-1" href="#">{{item.year}}</a></td>
<td id="{{item.id}}"> <a tabindex="-1" href="#" ng-click="myStyle={'background-color':'#cccccc'};">{{item.name}}</a>
</td> <td>
{{item.usefulflag}
</td> </tr>
</tbody>
</table>
</div>
i have code in a .js file that looks like this:
$("tr").mouseenter(function(){
alert("mouseenter");
});
the row in the table header reacts with the alert, but there is no reaction from the rows created by ng-repeat. how do i correct?
You can actually achieve this effect by using an ng-class in conjuction with ng-mouseenter and ng-mouseleave like so:
<div id="myFedContents" style="height:320px" ng-controller="Controller2" class="scroller">
<table border="0" class="span12 table table-condensed" style="margin-left:0px" id="tblData">
<thead>
<tr>
<th>Year</th>
<th>Name</th>
<th>Useful Flag</th>
</tr>
</thead>
<tbody id="allRows">
<tr ng-repeat="item in itemlist | filter:thisText" ng-style="myStyle" ng-class="highlightclass" ng-mouseenter="highlightclass='highlight'" ng-mouseleave="highlightclass=''">
<td class="span1" valign="top"><a tabindex="-1" href="#">{{item.year}}</a>
</td>
<td id="{{item.id}}"> <a tabindex="-1" href="#" ng-click="myStyle={'background-color':'#cccccc'};">{{item.name}}</a>
</td>
<td>
{{item.usefulflag}
</td>
</tr>
</tbody>
</table>
</div>
In this case you don't need the jquery syntax. If you haven't already you should also read https://stackoverflow.com/a/15012542/281335.
I have set both the header and the footer to fixed but still cannot get the content to adjust in IPhone.
Here is my layout code
<body>
<div data-role="page" #(Page.Id == null ? string.Empty : "id=" + Page.Id) data-fullscreen="false">
#* #RenderSection("MoreCode", false)*#
#if (IsSectionDefined("Header"))
{
<div data-role="header" data-position="fixed">
#RenderSection("Header", false)
</div><!-- /header -->
}
<div data-role="content">
#RenderBody()
</div><!-- /content -->
<div data-role="footer" data-tap-toggle="false" data-position="fixed">
<div class="center-wrapper">
<table border="0">
<tr>
<td>
<label for="basic">
Place Of Interest
</label>
</td>
</tr>
<tr>
<td>
<table border="0">
<tr>
<td>
Terms of Use
</td>
<td>
<label for="basic">
|
</label>
</td>
<td>
Privacy Policy
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</body>
Here is my View
<h3 style='color:#4FA600; font-weight:bold;'>#ViewBag.Number</h3>
<table border="1" width="100%">
<tr>
<td align="center" valign=middle style=' font-weight:bold; color:#FFFFFF; background:#4FA600; '>
<label for="basic">Available Documents</label>
</td>
</tr>
<tr>
<td>
<table width="100%" height="100%">
<tr>
<td align="left" valign="middle" style=' font-weight:bold;'>
Type
</td>
<td align="center" valign="middle" style=' font-weight:bold;'>
Description
</td>
</tr>
#{
foreach(var row in Model)
{
<tr>
<td align="left" valign="middle">
#row.DocType
</td>
<td align="center" valign="middle">
#row.Description
</td>
</tr>
}
}
</table>
</td>
</tr>
</table>
Isnt jquerymobile suppose to manually adjust? It renders fine in firefox. What can I do to make the content fully display?
\The issue was I had this in my css:
[data-role=page]{height: 100% !important; position:relative !important;}
I got this code from use theme roller not sure why this messed it up. Maybe someone can clarify would be appreciated
When the page loads, all the records show. Sorting works great until show-hide is used to filter the rows so only some show. Then the header row--with the arrows for sorting--DISAPPEARS. The problem is only in Firefox. It works great in IE7 and IE8.
I'm using jQuery 1.4.2 from Google.
Code for show-hide
$(document).ready(function() {
// show all the rows
$("#org_status tr").show();
//find selected filter
$("#filter_status a").click(function(evt) {
evt.preventDefault();
$("#org_status tr").hide();
var id = $(this).attr('id');
$("." + id).show();
});
});
Here is the HTML:
<!-- show-hide "buttons" -->
<p id='filter_status'>Filter by status:
<a href='#' id='All'>All</a>
<a href='#' id='Active'>Active</a>
<a href='#' id='Inactive'>Inactive</a>
<a href='#' id='Pending'>Pending</a>
</p>
<!-- table to sort ->
<table id='org_status' class='info_table tablesorter'>
<thead>
<tr>
<th class='org-name-col'>Name</th>
<th class='org-status-col'>Status</th>
</tr>
</thead>
<tbody>
<tr class='All Active'>
<td><a href='admin/org_edit.php?org=29'>Foo Net</a></td>
<td>Active</td>";
</tr>
<tr class='All Inactive'>
<td><a href='admin/org_edit.php?org=22'>Bar</a></td>
<td>Active</td>";
</tr>
<tr class='All Pending'>
<td><a href='admin/org_edit.php?org=11'>
Bar Foo Very Long Org Name Goes Here</a></td>
<td>Active</td>";
</tr>
</tbody>
</table>
I don't think this is just an issue for firefox because the header row is first made to hide and the code deosn't show it up later.
Try changing the code as follows:
Javascript:
$(document).ready(function() {
// show all the rows
$("#org_status tr").show();
//find selected filter
$("#filter_status a").click(function(evt) {
evt.preventDefault();
$("#org_status tr").hide();
var id = $(this).attr('id');
$("." + id).show();
$(".showAlways").show();
});
});
HTML:
<p id='filter_status'>Filter by status:
<a href='#' id='All'>All</a>
<a href='#' id='Active'>Active</a>
<a href='#' id='Inactive'>Inactive</a>
<a href='#' id='Pending'>Pending</a>
</p>
<table id='org_status' class='info_table tablesorter'>
<thead>
<tr class="showAlways">
<th class='org-name-col'>Name</th>
<th class='org-status-col'>Status</th>
</tr>
</thead>
<tbody>
<tr class='All Active'>
<td><a href='admin/org_edit.php?org=29'>Foo Net</a></td>
<td>Active</td>";
</tr>
<tr class='All Inactive'>
<td><a href='admin/org_edit.php?org=22'>Bar</a></td>
<td>Active</td>";
</tr>
<tr class='All Pending'>
<td><a href='admin/org_edit.php?org=11'>
Bar Foo Very Long Org Name Goes Here</a></td>
<td>Active</td>";
</tr>
</tbody>
</table>