I'm developing an app using JavaScript and want to use SemanticZoom.
We use only one list view but I have multiple list views in my page.
This is my sample code which I'm using right now:
<section>
<table><tr><td style="width: auto; height: 100%; display: none;" id="myDealsSection">
<table style="height: 100%; margin-left: 80px; margin-bottom:
50px;">
<thead>
<tr>
<td ><span id="MyDealsHead" style="font-size: 20pt; font-family: 'Segoe UI
Light'; padding-left: 5px;">My Deals</span><span id="myDealsHdrArrw"style="font-
size:20pt;"> </span></td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: auto; height: 100%; vertical-align: top;">
<div id="homePageDealsList" aria-label="List of this group's items"style="height:
100%; width: auto;" data-win-control="WinJS.UI.ListView" data-win-options="{
selectionMode: 'none',layout: {type:WinJS.UI.GridLayout} }"></div>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 100%; height: 100%; display: none;" id="pinnedDealsSection">
<table style="height: 100%; margin-left: 80px;">
<thead style="width: 100%;">
<tr>
<td><span id="pinnedDeals" style="padding-left:
5px; font-size: 20pt; font-family: 'Segoe UI Light';">Pinned Deals</span><span
id="pinnedDealsHdrArrw" style="font-size:20pt;"> </span></td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: auto; height: 100%; vertical-
align: top;">
<div id="pinnedDealsList"
class="pinnedDealsItemsList" aria-label="List of this group's items" style="height:
100%; width: auto; margin-bottom: 50px;" data-win-control="WinJS.UI.ListView" data-
win-options="{ selectionMode: 'none', layout: {type:WinJS.UI.GridLayout} }"></div>
</td>
</tr>
</tbody>
</table>
</td></tr></table>
</section>
How can I add two list views to zoomed in view?
I am not able to understand how to do that.
For the SemanticZoom sample visit: http://msdn.microsoft.com/en-us/library/windows/apps/hh465492.aspx
Related
First of all I would like you to know that before I make a post here I read a lot about this subject but still can't apply the idea so this post is after long time of searching...
This is HTML Code
<!DOCTYPE html>
<html>
<head>
<title>test₺</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container-fluid" style="margin: 0; padding: 0;">
<nav style="height: 30px; width: 100%; background-color: dodgerblue"></nav>
</div>
<div class="container">
<div class="row">
<div class="menu col-sm-6">
<div class="mealType burger">
<div class="categoryTitle">Burger</div>
<div class="categoryContent" id="burger">
<table>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Chicken Burger</td>
<td>18<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Fish Burger</td>
<td>15<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Barbeque</td>
<td>12<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
</table>
</div>
</div>
<div class="mealType seaFood">
<div class="categoryTitle">Sea Food</div>
<div class="categoryContent" id="seaFood">
<table>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Fish Sliece</td>
<td>18<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Fillet Fish</td>
<td>25<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td class="add">0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Hamour Fish</td>
<td>40<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
</table>
</div>
</div>
<div class="mealType steak">
<div class="categoryTitle">Steak</div>
<div class="categoryContent" id="seaFood">
<table>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Chicken Steak</td>
<td>18<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Beef Steak</td>
<td>25<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
</table>
</div>
</div>
</div>
<div class="myCart col-sm-6">
<div class="myCartContaier">
<div class="myCartTitle">My Cart</div>
<div class="myCartDetails">
<table></table>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Javascript jQuery Code
'use strict';
// Start Remove the ability to select //
$(".mealType, .categoryTitle, .categoryContent, .table").attr('unselectable', 'on').css('user-select', 'none').on('selectstart', false);
// End Remove the ability to select //
$(function(){
$('.categoryTitle').on('click', function(){
var $this = $(this);
$this.next('div').slideToggle(200);
});
$('.add').on('click', function(){
var $this = $(this),
$elementToClone = $this.parent(),
$myCartDetails = $this.parent().parent().parent().parent().parent().parent().next().children().children().next().children();
if ($myCartDetails.children().hasClass('addCloned')) {
$($myCartDetails.children()).removeClass('addCLoned').detach();
} else {
$elementToClone.clone(true,true).appendTo($myCartDetails).addClass('addCloned');
}
});
});
CSS code if needed
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.menu {
background-color: white;
width: 200px;
}
.mealType {
background-color: red;
width: 400px;
margin: 0 auto;
box-shadow: 1px 1px 10px silver;
}
.menu, .myCart {
margin-top:0rem;
padding: 10px;
}
.categoryTitle {
background-color: dodgerblue;
width: 400px;
margin: 0 auto;
margin-top: 20px;
padding: 5px;
color: white;
font-weight: bold;
font-family: Calibri, sans-serif, Tahoma, Arial;
font-size: 18px;
text-shadow: 1px 1px 2px black;
cursor: pointer;
}
.categoryContent {
display: none;
}
.categoryTitle, .myCartTitle {
text-align: center;
}
table {
margin: 0 auto;
width: 400px;
}
table tr {
border-bottom: 1px solid silver;
}
table tr:nth-child(even) {
background-color: white;
}
table tr:nth-child(odd) {
background-color: #EEE;
}
table td {
padding: 5px 10px;
text-align: center;
color: black;
font-family: Calibri, sans-serif, Tahoma, Arial;
}
td img {
width: 30px;
}
table tr td:nth-of-type(4),table tr td:nth-of-type(5) {
cursor: pointer;
}
the idea is Add to cart by javascript I tried the clone with the argument (true,true) but still I am not able to apply the idea that I want I tried a lot of things but I am really unable to apply the idea that I want so I posted in stackoverflow hopefully there's a hero will guide me to the right way to apply like this idea and I really appreciate his effort I am waiting for you guys thanks a lot.
Click To See Simple Image Of The Idea
$myCartDetails = $this.parent().parent().parent().parent().parent().parent().next().children().children().next().children();
You really need to go back and learn the fundamental concepts of javascript, html, and css before you even try to make a cart.
I have two tables. One for header and other for the body. I created it this way so that header will remain fixed if the body overflows.
(function() {
var target = $("#target");
$("#source").scroll(function() {
target.prop("scrollTop", this.scrollTop)
.prop("scrollLeft", this.scrollLeft);
});
})();
.scroll-example {
display: block;
margin-right: 20px;
width: 100%;
}
td {
border: 1px solid black;
min-width: 100px;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
td:hover i {
display: block;
float: right;
visibility: visible;
}
i {
display: none;
visibility: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="overflow: hidden;width: 400px;">
<table id="target" class="scroll-example" style="overflow: hidden;">
<tr>
<td class="col1">HHHHHHHHHHHHH</td>
<td class="col2">HHHHHHHHHHH</td>
<td class="col3">HHHHHHHHHHH</td>
<td class="col4">HHHHHHHHHHH</td>
<td class="col5">HHHHHHHHHHH</td>
<td class="col6">HHHHHHHHHHH</td>
<td class="col7" width="20px" style="border-color: white;"></td>
</tr>
</table>
<table id="source" class="scroll-example" style="overflow: scroll;height: 50px;">
<tr>
<td class="col1"><i class="fa fa-pencil"></i>AAAAAAAAAAA</td>
<td class="col2"><i class="fa fa-pencil" aria-hidden="true"></i>AAAAAAAAAAA</td>
<td class="col1"><i class="fa fa-lock" aria-hidden="true"></i>AAAAAAAAAAA</td>
<td class="col1"><i class="fa fa-pencil" aria-hidden="true"></i>AAAAAAAAAAA</td>
<td class="col1"><i class="fa fa-lock" aria-hidden="true"></i>AAAAAAAAAAA</td>
<td class="col1"><i class="fa fa-lock" aria-hidden="true"></i>AAAAAAAAAAA</td>
</tr>
</table>
</div>
Now I am looking for resizing the columns dynamically. So when the user resizes the top table column it should resize the corresponding bottom cell column.
I tried td{resize: horizontal;} but it is not working and I guess that is because of td{min-width:100px;max-width:100px;}.
Is there a way to achieve the column resizing in this table?
I am a beginner with CSS and jQuery. It would be of great help if you could put an example code. Thanks you.
Sample:
I have dragged 'Account Name' column and when I release it, the column width is set.
Ive searched a lot for my own table widget. You need 2 Tables in each of them a colgroup with col´s they have to match your table column count. Ive created a fiddle i hope it´s clear enough. The two col´s of the Tables needs to be synced on your jquery resize functionality.
.head{
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
.body{
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
<table class="head">
<colgroup>
<col width="100px"> <!-- Our resized column -->
<col>
<col>
</colgroup>
<tbody>
<tr>
<td>#</td>
<td>From</td>
<td>Subject</td>
</tr>
</tbody>
</table>
<table class="body">
<colgroup>
<col width="100px"> <!-- Our resized column -->
<col>
<col>
</colgroup>
<tbody>
<tr>
<td>00001</td>
<td>Mister Exmple</td>
<td>Problems with sharing</td>
</tr>
<tr>
<td>00002</td>
<td>Mister Example 02</td>
<td>Ouh is this a subject?</td>
</tr>
<tr>
<td>00003</td>
<td>Mistr Default</td>
<td>Yo whats up</td>
</tr>
</tbody>
</table>
I have written the following code in JSFiddle.
https://jsfiddle.net/msridhar/1zvhmpjq/11/
HTML file:
<body>
<div id="headerDiv">
<img id="headerImg" src="" width="280" height="125" alt="DummyLogo"/>
<pre id="headerPre">
Test Series
Cloud Solutions
</pre>
<hr id="headerHR">
</div>
<div id="results">
</div>
</body>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
body{
position: relative;
}
#results{
width: 100%;
height: 100%;
position: absolute;
top: 150px;
left: 300px;
overflow: auto;
}
body{
position: relative;
}
#headerDiv{
position: fixed;
top: 0;
width: 100vw;
//border-bottom: 3px solid #808080;
}
#headerHR{
width: 100%;
height: 1px;
}
#headerImg{
float: left;
margin-top: 0px;
margin-left: 0px;
}
#headerPre{
float: left;
font-family: "Arial", Helvetica, sans-serif;
font-style: normal;
font-weight: bold;
font-size: 24px;
}
Javascript:
$('#results').load('https://fiddle.jshell.net/ds2vxqbg/1/show')
The code for html file loaded in Javascript is:
<table border="1">
<tr>
<th>Product no.</th>
<th>Product name</th>
<th>Product type</th>
<th>Product Description</th>
</tr>
<tr>
<td>1</td>
<td>Apple</td>
<td>Fruit</td>
<td>Its a fruit</td>
</tr>
<tr>
<td>2</td>
<td>Orange</td>
<td>Fruit</td>
<td>Its a fruit</td>
</tr>
<tr>
<td>3</td>
<td>Pineapple</td>
<td>Fruit</td>
<td>Its a fruit</td>
</tr>
<tr>
<td>4</td>
<td>Pear</td>
<td>Fruit</td>
<td>Its a fruit</td>
</tr>
<tr>
<td>5</td>
<td>Plum</td>
<td>Fruit</td>
<td>Its a fruit</td>
</tr>
</table>
<img src="" width = "800" height = "600">
<img src="" width = "800" height = "600">
<img src="" width = "800" height = "600">
<img src="" width = "800" height = "600">
I have loaded a html page in a div tag with id results. Though that div tag was enabled to overflow auto, it is not showing entire contents when scrolled. Please point out me what is the problem.
#results cuts off by body {overflow:hidden;} because div set width and height to 100% of body, but it has additional offset.
You can try to do next:
html:
<body>
<div id="headerDiv">
<img id="headerImg" src="" width="280" height="125" alt="DummyLogo"/>
<pre id="headerPre">
Test Series
Cloud Solutions
</pre>
<hr id="headerHR">
</div>
<div id="wrapper"> <!-- add wrapper -->
<div id="results"></div>
</div>
</body>
and css:
#wrapper {
padding-top: 150px;
padding-left: 300px;
width: 100%;
height: 100%;
box-sizing: border-box;
}
#results {
width: 100%;
height: 100%;
overflow: auto;
}
I'm creating online cart. In that i'm getting values through jquery/json GET from my spring/hibernate and it is running with no problems. I've some bugs in adding them in js class now I just want to read each row's textbox's value by it's name.
for Eg:
var product = $('[name="product"]').val();
var vendor = $('[name="vendor"]').val();
<table style="width: 90%; margin: 15px;">
<thead>
<tr style="border-bottom: 2px solid gray;">
<th style="float: left; text-align: left !important" width="50%">Product
Details</th>
<th style="float: left; text-align: left !important" width="25%">Vendor</th>
<th style="float: left; text-align: left !important" width="20%">Quantity</th>
<th style="float: left; text-align: left !important" width="5%"></th>
</tr>
</thead>
<tbody id="tbdyProducts"
style="min-height: 300px; max-height: 300px; overflow: auto; display: block;">
<tr>
<td style="padding-top: 15px; float: left; width: 350px"><span
id="product1" name="product">Xperia M Dual</span></td>
<td style="padding-top: 15px; float: left; width: 190px"><span
id="vendorname1" name="seller" style="height: 20px">sample
vendorname</span></td>
<td style="padding-top: 15px; float: left; width: 100px"><input
type="text" id="proqty1" name="proqty" size="5"
style="height: 20px; text-align: center" value=""></td>
<td align="right" valign="bottom" style="width: 55px"><span
id="deleteRow" onclick="ProductRemove(1)" class="deleteRow"
style="cursor: pointer; cursor: hand">X</span><input type="hidden"
id="hsrate1" name="hsrate" value="250.50"></td>
</tr>
<tr>
<td style="padding-top: 15px; float: left; width: 350px"><span
id="product2" name="product">Mouse</span></td>
<td style="padding-top: 15px; float: left; width: 190px"><span
id="vendorname2" name="seller" style="height: 20px">a valid
company or vendor name</span></td>
<td style="padding-top: 15px; float: left; width: 100px"><input
type="text" id="proqty2" name="proqty" size="5"
style="height: 20px; text-align: center" value=""></td>
<td align="right" valign="bottom" style="width: 55px"><span
id="deleteRow" onclick="ProductRemove(2)" class="deleteRow"
style="cursor: pointer; cursor: hand">X</span><input type="hidden"
id="hsrate2" name="hsrate" value="3.00"></td>
</tr>
<tr id="productSearch" style="display: none;">
<td style="padding-top: 15px; float: left; width: 350px"><span
role="status" aria-live="polite" class="ui-helper-hidden-accessible">1
result is available, use up and down arrow keys to navigate.</span><input
type="text" id="productfinder" size="40" style="height: 20px"
autocomplete="off" placeholder="Product Name or Code"
class="ui-autocomplete-input"></td>
<td style="padding-top: 15px; float: left; width: 190px"><span
id="vendorname" style="height: 20px"> </span></td>
<td style="padding-top: 15px; float: left; width: 100px"><input
type="text" size="5" id="productnos"
style="height: 20px; text-align: center"></td>
<td align="right" valign="bottom" style="width: 55px"><span>X</span></td>
</tr>
</tbody>
</table>
I tried like this but it didn't work:
for(i=0; i< $('[name="product"]').length; i++){
var product = $(this).find('[name="product"]').val();
alert(product);
}
Note that your HTML is invalid (in various ways): Table cell elements don't have name or value attributes. If you want to put arbitrary information in attributes, use data-* attributes instead. (You're also using the same id on more than one element; id values must be unique on the page.)
So two issues:
You're using find to look within the elements, but in fact you want the information from the element you're already looking at
You're using val, but the elements in question aren't form fields. It might work, but if so, it's undocumented.
The simple, reliable thing is to use each and attr:
$('[name="product"]').each(function() {
alert($(this).attr("value"));
});
If instead of alerting you want an array of the values, map and get:
var values = $('[name="product"]').map(function() {
return $(this).attr("value");
}).get();
But again, if you want to put arbitrary attrs on, you'll want to use data-name and data-value instead.
You can use eq method for this:
var product = $('[name="product"]').eq(i).val();
alert(product);
but I would suggest you to use each method
$( '[name="product"]' ).each( function() {
var product = $( this ).val();
console.log( product );
});
Update:
If you want to read there vendor also, you can modify each to accept index:
$( '[name="product"]' ).each( function( index ) {
var product = $( this ).val();
var vendor = $( '[name="product"]' ).eq( index ).val();
console.log( product );
console.log( vendor );
});
Uisng jQuery,i can bind the check box dynamically but their are some problems i am facing not able to solve.
1.in fiddle,if you click Add a name button a popup will open and get the name.After pressing submit button the related data are dynamically bind in a table,but it should be bind in a table in 1st <tr>.Now it is binding below 2nd <tr> but i want it to be append in 1st <tr> below the sample line already given.
2.On page load,id=list should be hide,but if i add this line $("#list").hide(); to hide i am not getting the output.
jQuery:
<script>
$(document).ready(function ()
{
$("#btnShowModal").click(function ()
{
ShowDialog(true);
});
$("#btnClose").click(function ()
{
HideDialog();
});
$("#btnSubmit").click(function ()
{
var brand = $("#brand1").val();
var $newrow=$('#list').clone();
$newrow.find("td:eq(0)").text(brand);
$("#rounded_border").append($newrow);
HideDialog();
});
});
function ShowDialog(modal)
{
$("#overlay").show();
$("#dialog").show();
if (modal)
{
$("#overlay").unbind("click");
}
else
{
$("#overlay").click(function ()
{
HideDialog();
});
}
}
function HideDialog()
{
$("#overlay").hide();
$("#dialog").hide();
}
</script>
css:
<style>
.dialog_display
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .15;
filter: alpha(opacity=15);
-moz-opacity: .15;
z-index: 101;
display: none;
}
.dialog
{
display: none;
position: fixed;
width: 220px;
height: 130px;
top: 50%;
left: 50%;
margin-left: -190px;
margin-top: -100px;
background-color: #ffffff;
border: 2px solid #336699;
padding: 0px;
z-index: 102;
font-size: 10pt;
}
.dialog_title
{
border-bottom: solid 2px #336699;
background-color: #336699;
padding: 4px;
color: White;
font-weight:bold;
}
.dialog_title a
{
color: White;
text-decoration: none;
}
.align_right
{
text-align: right;
}
#dynamic{display:none;}
</style>
html
<body>
<table width="100%" cellpadding="0" cellspacing="0" id="rounded_border">
<tr>
<td colspan="4"><p><em>Please record the name of anyone involved</em></p></td>
</tr>
<tr>
<td><strong>Involved</strong></td>
<td><button>Add a name</button></td>
<td><p align=center>or</p></td>
<td>Add from list</td>
</tr>
<tr id="list" class="ir-shade"><div id="dynamic">
<td><span class="delete_icon">x</span>Attila Hun</td>
<td>
<input id="firstaid" onclick="addtreatment();" type="checkbox"/>
FirstAid needed
</td>
<td>
<input class="sickbay" onclick="addtreatment();" type="checkbox"/>
Sent to Sick bay
</td>
<td>
<input class="ambulance" onclick="addtreatment();" type="checkbox"/>
Ambulance
</td>
</div>
</tr>
<tr>
<td><strong>Reported by</strong></td>
<td><button>Add a name</button></td>
<td><p align=center>or</p></td>
<td><button>Add from list</button></td>
</tr>
</table>
<div id="overlay" class="dialog_display"></div>
<div id="dialog" class="dialog">
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="dialog_title">Type a name</td>
<td class="dialog_title align_right">
Close
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<b> </b>
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<div id="brands">
<input id="brand1" name="brand" type="text" value="" />
</div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input id="btnSubmit" type="button" value="Submit" />
</td>
</tr>
</table>
</div>
</body>
You can see my code from this fiddle sample code
Please guide me to solve this.
You have to remove the id from the cloned tr's and unhide them when you add a new one, that's why you don't get any output if you hide #list
$("#btnSubmit").click(function (e)
{
var brand = $("#brand1").val();
var $newrow=$('#list').clone().show().removeAttr("id");
$newrow.find("td:eq(0)").text(brand);
$("#rounded_border").append($newrow);
HideDialog();
e.preventDefault();
});