I have a table with 2 columns and 2 rows like this
I would like to make the elements of the first column clickable and when one clicks on it, it appears another table under that row.
I thought of adding an href but this doesnt work:
<font face="Arial, Helvetica, Geneva">
<table id="tableInfo" data-role=table class="ui-responsive" width="100%">
<tbody>
<tr>
<a href=#info1 >
<table id="tableInfoNested1" data-role=table class="ui-responsive" width="100%">
<tbody>
<tr>Address</tr>
<tr>City</tr>
</tbody>
</table>
Name
</a>
</tr>
<tr>
<a href=#info2 >
<table id="tableInfoNested2" data-role=table class="ui-responsive" width="100%">
<tbody>
<tr>Test</tr>
<tr>Test</tr>
</tbody>
</table>
Code
</a>
</tr>
</tbody>
</table>
</font>
Try this...
<a id="LogicLink" onclick="Table1();" href="#">Name</a>
<table id="TableNested1" style="display:none">
<tr><td>Adresss<td/><tr/>
<tr><td>City<td/><tr/>
<table/>
<br/>
<a id="Link" onclick="Table2();" href="#">Code</a>
<table id="TableNested2" style="display:none">
<tr><td>Test<td/><tr/>
<tr><td>Test<td/><tr/>
</table>
function Table1()
{
var elem=document.getElementById("TableNested1");
var hide = elem.style.display =="none";
if (hide) {
elem.style.display="table";
}
else {
elem.style.display="none";
}
}
function Table2()
{
var elem=document.getElementById("TableNested2");
var hide = elem.style.display =="none";
if (hide) {
elem.style.display="table";
}
else {
elem.style.display="none";
}
}
http://jsfiddle.net/Wfxpu/180/
Have a look at this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Collapsible Lists</h1>
</div>
<div data-role="main" class="ui-content">
<h2>My Phonebook</h2>
<div data-role="collapsible">
<h4>A</h4>
<ul data-role="listview">
<li>Adele</li>
<li>Agnes</li>
</ul>
</div>
<div data-role="collapsible">
<h4>B</h4>
<ul data-role="listview">
<li>Billy</li>
<li>Bob</li>
</ul>
</div>
<div data-role="collapsible">
<h4>C</h4>
<ul data-role="listview">
<li>Calvin</li>
<li>Cameron</li>
<li>Chloe</li>
<li>Christina</li>
</ul>
</div>
</div>
<div data-role="footer">
<h1>Insert Footer Text Here</h1>
</div>
</div>
</body>
</html>
http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_lists_collapsible
OR
http://jasalguero.com/ledld/development/web/expandable-list/
You will have to apply the same principle to your table
Related
so i wanna insert 2 buttons after every first td where the img is. i wanna do this with a script. so i get the table from a server and the site should automatically add the buttons with a script
<html>
<body>
<tr style="background:#EEE;line-height:1.4em">
<td width="50%">
<div class="extra_info" style="padding: 2px 0 0;">
<img class="detach_prop_or_tag" title="entfernen"
name="prop_id=656|page_id=10280|confirm_text=: 1108"
src="/theme/frontend/prinvision/style/prinvision/image/layout/cancel_button.png">
Adressat (Angebot)
</div>
</td>
<td width="50%" id="propId_656_profilePageId_10280" class="editable_prop">
<span class="extra_info" title="Adressat (Angebot): example6">
exampletext4</span>
</td>
</tr>
<tr style="background:#FFF;line-height:1.4em">
<td width="50%">
<div class="extra_info" style="padding: 2px 0 0;">
<img class="detach_prop_or_tag" title="entfernen"
name="prop_id=838|page_id=10280|confirm_text=: 1108"
src="/theme/frontend/prinvision/style/prinvision/image/layout/cancel_button.png">
Absender (Angebot)
</div>
</td>
<td width="50%" id="propId_838_profilePageId_10280" class="editable_prop">
<span class="extra_info" title="Absender (Angebot): exampletext3">
exampletext2</span>
</td>
</tr>
<\body>
<\html>
i have tryd multiple scripts but i cant figure out the right one.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table,td,tr,div{
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/00/USDnotesNew.png" height="20px" alt="" srcset="">
</div>
<div class="imgdiv"></div>
</div>
</td>
<td>hello1</td>
<td>hello1</td>
</tr>
<tr>
<td>
<div>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/00/USDnotesNew.png" height="20px" alt="" srcset="">
</div>
<div class="imgdiv"></div>
</div>
</td>
<td>hello2</td>
<td>hello2</td>
</tr>
<tr>
<td>
<div>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/00/USDnotesNew.png" height="20px" alt="" srcset="">
</div>
<div class="imgdiv"></div>
</div>
</td>
<td>hello3</td>
<td>hello3</td>
</tr>
</table>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// this way you can select every image and add button with it
// i hope your issue is slove if not can explian more like
add button in next td or after image
var img= $('.imgdiv');
$.each(img, function (indexInArray, valueOfElement) {
console.log(indexInArray, valueOfElement);
$(this).parent().find('.imgdiv').html(`<button>button-${indexInArray}</button><button>btn-${indexInArray}</button>`)
});
</script>
</html>
Where exactly do you need to add the buttons - in the second td, or after the row? Depending on your answer, you can the below approach:
Either add buttons in a new td after every image td
<td>
<button onclick="performAction">Action</button>
</td>
Or, add a new row below your image tr, and insert a full-width td containing the buttons.
<tr>
<td colspan="2">
<button onclick="performAction">Action</button>
</td>
</tr>
I am currently having two main currencies for my business. The product page is actually built using HTML. I have 4 products in a page and I want to display two prices for each product, like if someone selects USD, cost in USD will be displayed and if someone selects EUR then it'll show the price accordingly, without reloading the page. I also want the order link to be changed upon selecting the currency.
Please I don't want to convert the currency. I just want to store two different price values for each product and display it accordingly when user changes the currency.
It's NOT any CMS based or eCommerce website, just few HTML pages. I think it's it can be done using JS but I am not a programmer :/
Would anyone please tell me how to do it? I need a very simple program but I have no idea where to start.
Here's product pricing section HTML source code-
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Website Hosting | Host Hub</title>
<!--Favicon-->
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png"/>
<!--Libraries-->
<link rel="stylesheet" type="text/css" href="assets/libraries/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/libraries/font-awesome/css/all.min.css">
<link rel="stylesheet" type="text/css" href="assets/libraries/animate/animate.min.css">
<!--Google Fonts-->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Overlock:400,400italic,700,700italic,900,900italic">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Signika:300,400,600,700">
<!--Styles-->
<link rel="stylesheet" type="text/css" href="assets/css/style.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/mobile.min.css">
<!--Custom CSS-->
<link rel="stylesheet" type="text/css" href="assets/css/custom.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--Begin Header-->
<div class="topbar">
<div class="container">
<div class="row">
<!--Begin Social Icons-->
<div class="col-xl-4 col-lg-4 col-md-3 col-sm-3 col-12 social">
<div class="link"><i class="fab fa-facebook"></i></div>
<div class="link"><i class="fab fa-twitter-square"></i></div>
<div class="link"><i class="fab fa-youtube-square"></i></div>
<div class="link"><i class="fab fa-skype"></i></div>
</div>
<!--End Social Icons-->
<!--Begin Client Links-->
<div class="col-xl-8 col-lg-8 col-md-9 col-sm-9 col-12 text-right client">
<div class="link xshide"><i class="fas fa-coins"></i>$ USD</div>
<div class="link xshide"><i class="fas fa-globe"></i>Language</div>
<div class="link"><i class="fas fa-lock"></i>Customers</div>
<div class="link"><i class="fas fa-life-ring"></i>Support</div>
<div class="link"><i class="fas fa-shopping-cart"></i><span class="desktop">View Cart</span> (0)</div>
</div>
<!--End Client Links-->
</div>
</div>
</div>
<!--End Header-->
<!--Begin Web Hosting-->
<div class="webhosting">
<div class="container">
<div class="row">
<!--Begin Plan Box-->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wow zoomInDown">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Micro Hub</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1> $2<span class="subscript">.99</span></h1>
<small>Per Month</small> </div>
<table class="table">
<tr>
<td>1 GB Storage</td>
</tr>
<tr>
<td>10 GB Bandwidth</td>
</tr>
<tr>
<td>Unlimited Email</td>
</tr>
<tr>
<td>Unlimited Databases</td>
</tr>
<tr>
<td>Unlimited FTP Accounts</td>
</tr>
<tr>
<td><img alt="" src="assets/img/hosting/website-hosting/cpanel.png" srcset="assets/img-retina/hosting/website-hosting/cpanel#2x.png 2x" class="img-fluid" /></td>
</tr>
</table>
</div>
<a href="#">
<div class="panel-footer">Order Today</div>
</a> </div>
</div>
<!--End Plan Box-->
<!--Begin Plan Box-->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wow zoomInDown" data-wow-delay="0.2s">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Small Hub</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1> $7<span class="subscript">.99</span></h1>
<small>Per Month</small> </div>
<table class="table">
<tr>
<td>10 GB Storage</td>
</tr>
<tr>
<td>100 GB Bandwidth</td>
</tr>
<tr>
<td>Unlimited Email</td>
</tr>
<tr>
<td>Unlimited Databases</td>
</tr>
<tr>
<td>Unlimited FTP Accounts</td>
</tr>
<tr>
<td><img alt="" src="assets/img/hosting/website-hosting/cpanel.png" srcset="assets/img-retina/hosting/website-hosting/cpanel#2x.png 2x" class="img-fluid" /></td>
</tr>
</table>
</div>
<a href="#">
<div class="panel-footer">Order Today</div>
</a> </div>
</div>
<!--End Plan Box-->
<!--Begin Plan Box-->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wow zoomInDown" data-wow-delay="0.4s">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Big Hub</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1> $9<span class="subscript">.99</span></h1>
<small>Per Month</small> </div>
<table class="table">
<tr>
<td>20 GB Storage</td>
</tr>
<tr>
<td>200 GB Bandwidth</td>
</tr>
<tr>
<td>Unlimited Email</td>
</tr>
<tr>
<td>Unlimited Databases</td>
</tr>
<tr>
<td>Unlimited FTP Accounts</td>
</tr>
<tr>
<td><img alt="" src="assets/img/hosting/website-hosting/cpanel.png" srcset="assets/img-retina/hosting/website-hosting/cpanel#2x.png 2x" class="img-fluid" /></td>
</tr>
</table>
</div>
<a href="#">
<div class="panel-footer">Order Today</div>
</a> </div>
</div>
<!--End Plan Box-->
</div></div></div>
<!--Libraries-->
<script src="assets/libraries/jquery/jquery.min.js"></script>
<script src="assets/libraries/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/libraries/jquery-ui/jquery-ui.min.js"></script>
<script src="assets/libraries/wow/wow.min.js"></script>
<script src="assets/libraries/zumada/sticky-header.min.js"></script>
<script src="assets/libraries/zumada/dropdown-menu.min.js"></script>
<script src="assets/libraries/zumada/price-slider-6-plans.min.js"></script>
<script src="assets/libraries/zumada/scroll-to-top.min.js"></script>
<script src="assets/libraries/zumada/countdown.min.js"></script>
<!--Custom Scripts-->
<script src="assets/js/scripts.js"></script>
</body>
</html>
I was not patient enough to wait for your HTML and simply built this "mvce" (minimum viable and complete example).
There are many ways of providing the two prices. I chose the way via the data attribute in the price <td>s.
const tbl=document.querySelector("table");
let cur=0; // possible values: 0 and 1
const change=()=>{
tbl.querySelectorAll(".price").forEach(td=>td.textContent=td.dataset.pr.split(" ")[cur]);
cur=1-cur;
}
document.querySelector("button").onclick=change;
change()
.price {text-align:right}
<table>
<tr><th>nr</th><th>Fruit</th><th>Price</th></tr>
<tr><td>1</td><td>Apple</td><td class="price" data-pr="1€ 1.2$"></td></tr>
<tr><td>2</td><td>Orange</td><td class="price" data-pr="10€ 12$"></td></tr>
<tr><td>3</td><td>Banana</td><td class="price" data-pr="2€ 2.4$"></td></tr>
<tr><td>4</td><td>Pineapple</td><td class="price" data-pr="5€ 6$"></td></tr>
<tr><td>5</td><td>Apricot</td><td class="price" data-pr="7€ 8.3$"></td></tr>
<tr><td>6</td><td>Pear</td><td class="price" data-pr="3€ 3.6$"></td></tr>
</table>
<button>change currency</button>
And here is another sample, based on your HTML (I added the `data-pr="24.95 20.80" attributes):
let cur=1;
document.querySelector("button").onclick=()=>{
document.querySelectorAll(".the-price h1").forEach(h=>{
let p=h.dataset.pr.split(" ")[cur].split(".");
h.innerHTML=['$','€'][cur]+p[0]+'<span class="subscript">.'+p[1]+'/m</span>';
});
cur=1-cur;
}
.subscript {font-size:1ex}
<div class="webhosting">
<div class="container">
<div class="row">
<!--Begin Plan Box-->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wowzoomInDown">
<div class="panel">
<div class="panel-heading" style="background: #03989e">
<a name="pricing"></a>
<h3 class="panel-title">NVMe-1</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1 data-pr="11.95 9.50"> $11<span class="subscript">.95/m</span></h1>
<small>Per Monthly</small> </div>
<table class="table">
<tr>
<td>Product Description 1</td>
</tr>
<tr>
<td>Product Description 2</td>
</tr>
</table>
</div>
<a href="{$WEB_ROOT}/cart.php?a=add&pid=77">
<div class="panel-footer">GET STARTED TODAY</div>
</a> </div>
</div>
<!--End Plan Box-->
<!--Begin Plan Box-->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wowzoomInDown" data-wow-delay="0.2s">
<div class="panel">
<div class="panel-heading" style="background: #38b6ff ">
<h3 class="panel-title">NVMe-2</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1 data-pr="24.95 20.80"> $24<span class="subscript">.95/m</span></h1>
<small>Per Monthly</small> </div>
<table class="table">
<tr>
<td>Product Description 1</td>
</tr>
<tr>
<td>Product Description 2</td>
</tr>
</table>
</div>
<a href="{$WEB_ROOT}/cart.php?a=add&pid=78">
<div class="panel-footer">GET STARTED TODAY</div>
</a> </div>
</div>
<!--End Plan Box-->
</div>
</div>
</div>
<button>change currency</button>
You can do this easily by using Javascript. You can store the pricing in a JS function and return the actual amount stored when currency is changed without reloading the page.
If I could see your page source code, I would be able to help you resolve this better.
HTML/CSS Solution
No JavaScript Needed
Points to Consider Before Saying, "It Doesn't Work"
The OP (Original Post) had too much HTML to be considered very useful. A typical Bootstrap layout consists of <div>s heavily burdened by BS (Bootstrap) classes wrapped around more of the same.
The majority of the HTML is removed and only what is needed has been replaced by more semantic elements. Most importantly, the interactive element <a> was replaced by a <input type='checkbox' hidden> and a <label>. There are a few good reasons for this particular change:
Checkboxes are in one of two states checked = true or checked = false. The CSS pseudo-class :checked will change the style of the <label>, and all of the <figure> following it as well as the <sup> nested within each <figure>. When in default, (checked = false) everything is USD and when checked is changed to EUR.
Ascetically, the <label> can be styled to look like a <button>, <a>, etc. and the checkbox is actually has the hidden attribute. Since the checkbox has id='currency' and the <label> has for='currency' any click to the <label> is a click to the checkbox as well (and vise versa although it doesn't matter in this case since the checkbox is hidden).
Important: The HTML layout should not be altered in a way wherein one or more elements are placed between checkbox and <label> or inserted into any <figure>. There shouldn't be a problem about adding anything around, ahead, or behind them.
All <link> (except the Google Fonts) pointed to relative paths (ex. href='/path/to/style.css') making them useless. I added the BS classes have styles that have a high specificity that can't be overridden easily. I added the BS CSS and then doubled up the classes of the custom CSS to increase their specificity in order to override BS CSS.
Important: The only thing that can be changed are the name of the classes and any CSS property/value with one exception which is content:. If the CSS is placed in a file (ex. style.css), make sure the CSS rule sets are the last ones. If placed in a <style>, make sure the CSS rule sets are the last ones.
The dynamically changing text relies on the following:
:checked + label::before changes {content: '💲USD';... to '\a0€ EUR'
:checked ~ figure::before changes {content: '💲'attr(data-usd)... to €attr(data-eur) for all <figure>s that follow the checkbox.
:checked ~ figure > sup::before changes {content: '.'attr(data-usd)... to '.'attr(data-eur) for all <sup>
Since there's no JavaScript involved, the values are stored on each <figure> and <sup> data-usd and data-eur attributes and must be manually edited (which is what OP requested if I recall)
:checked ~ figure::before {content: '€\a0'attr(data-eur);...}
<input type='checkbox' checked hidden>
<label>€ EUR</label>
...
<figure data-usd='9' data-eur='12'>
€ 12<sup data-usd='99' data-eur='33'>.33</sup>
</figure>
label.money.money {
font-size: 2.5ch;
font-weight: 700;
line-height: 1;
cursor: pointer;
}
label.money.money::before {
content: '💲USD';
}
#currency:checked+label.money.money::before {
content: '\a0€ EUR';
}
figure.price.price {
width: max-content;
font-size: 4.75ch;
font-weight: 500;
line-height: 1.33;
}
figcaption.caption.caption {
width: 100%;
font-size: 0.3em;
padding: 0 0 0 1.5em;
}
sup.cents.cents {
vertical-align: middle;
font-size: 0.6em;
line-height: 0.7;
margin-left: -.75ch;
}
figure.price.price::before {
content: '💲'attr(data-usd);
}
sup.cents.cents::before {
content: '.'attr(data-usd);
}
#currency:checked~figure.price.price::before {
content: '€\a0'attr(data-eur);
padding-left: 0.3em;
}
#currency:checked~.price>sup.cents.cents::before {
content: '.'attr(data-eur);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<input id='currency' class='btn-click' type='checkbox' hidden>
<label class='money btn btn-link btn-lg' for='currency'></label>
<figure class='price' data-usd='2' data-eur='4'>
<sup class='cents' data-usd='99' data-eur='33'></sup>
<figcaption class='caption'>Per Month</figcaption>
</figure>
<figure class='price' data-usd='7' data-eur='13'>
<sup class='cents' data-usd='99' data-eur='33'></sup>
<figcaption class='caption'>Per Month</figcaption>
</figure>
<figure class='price' data-usd='9' data-eur='16'>
<sup class='cents' data-usd='99' data-eur='33'></sup>
<figcaption class='caption'>Per Month</figcaption>
</figure>
</body>
</html>
I have an MVC application that has roughly 10 different views. The footer acts the way I'd expect it to on every page but one. This view in particular displays a table that contains SQL data. I believe the problem might have something to do with the footer ignoring or not "seeing" this table.
Layout Page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Pay Data</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
#Html.ActionLink("MyPay Data", "Index", "Dashboard", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Pay Period", "PayPeriod", "Dashboard")</li>
<li>#Html.ActionLink("Internal Job Postings", "JobPostings", "Dashboard")</li>
<li>#Html.ActionLink("View Paycheck", "ViewPayCheck", "Dashboard")</li>
<li>#Html.ActionLink("LOGOUT", "Logout", "Dashboard", new { #class = "log-button" })</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<footer>
<div class="footer-wrapper">
<div class="footer-content">
<div class="copyright-left">
Copyright © #DateTime.Now.Year All Rights Reserved.
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
View:
#model MyPayTC.Models.ServiceGroupConglom
#{
Layout = "~/Views/Shared/_LayoutDashboard.cshtml";
if (Session["userID"] == null)
{
Response.Redirect("~/Home/Login");
}
}
<body>
<div class="paycheck-table-container">
#using (Html.BeginForm("ViewPayCheck", "Dashboard", FormMethod.Post))
{
<table id="paycheck-table">
#foreach (var item in Model.ListOfServiceGroups)
{
<thead>
<tr>
<td id="service-name" colspan="4">
#item.service
</td>
</tr>
<tr>
<td id="service-duration">
<b>Duration: </b>#item.duration
</td>
<td id="service-rate">
<b>Rate: </b>$#item.rate
</td>
</tr>
</thead>
<tbody>
#foreach (var service in item.ListOfServices)
{
<tr>
<td>
#service.serviceDate.ToShortDateString()
</td>
<td>
#service.units
</td>
</tr>
}
<tr>
<td>
<u><b>Total Units: </b>$#item.TotalUnits</u>
</td>
</tr>
</tbody>
}
<tfoot>
<tr>
<td colspan="4">
<b>Your Pay Before Deductions: #Model.TotalPayBeforeDeductions</b>
</td>
</tr>
</tfoot>
</table>
}
</div>
</body>
StyleSheet:
.footer-wrapper {
height: 100px;
background-color: rgb(20, 20, 23);
width:100vw;
left:0px;
position:absolute;
min-width:600px;
}
.footer-content {
width: 100%;
line-height:100px;
padding-left: 15px;
padding-right: 15px;
margin-right: auto;
margin-left: auto;
color:rgba(255,255,255,0.2);
}
I was using QT 5.3.1 32 bit but i decided to update my QT to 5.3.2 and 64 BIT
I have trouble with Parsing HTML code.
My code which was working on 32 bit and 5.3.1
std::string html = std::move(output.buffer); // html from curl - all ok
QWebPage * tmp_webpage = new QWebPage();
tmp_webpage->mainFrame()->setHtml(QString::fromStdString(html));
std::fstream test_stream;
test_stream.open("example14.html", std::ios::out | std::ios::in);
test_stream << tmp_webpage->mainFrame()->toHtml().toStdString(); // html is cut in about 50%
test_stream.close();
QWebFrame * tmp_frame = tmp_webpage->mainFrame();
QWebElement mainTable_site = tmp_frame->findFirstElement(QString::fromStdString(mainTable_selector)); // not found because qt cut my correct html
This code was working , but now my HTML code which is put to QWebFrame has truncated.
In this code - "test_stream" take expected html code
QByteArray html = std::move(output.buffer);
test_stream.write(html);
Html code is cut after </script>.
QWebFrame appended (at the end - after </script>) </div></div></body></html> (of course original code is other )
After </script>, in original html code i have <table id="production_table" > not </div></div></body></html>
Question:
How to set that setHtml() won't truncate my html code?
(i'm using qt to parse some html files, i really dont want take new class (like tidyhtml) and again write code - all was okey but on previous version)
Original HTML code here:
<!DOCTYPE HTML>
<html>
<head>
<title>O rety rety atakują ci z Bety ! (412|412) - Plemiona - Świat 80</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-itunes-app" content="app-id=435365767, app-argument=x-sfp:///visit/tribal-wars">
<link rel="apple-touch-icon-precomposed" href="/apple-icon-iphone-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-icon-ipad-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-icon-iphone4-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-icon-retina-precomposed.png" />
<link rel="stylesheet" type="text/css" href="/merged/mobile.css?1412598051" />
<link rel="stylesheet" type="text/css" href="/css/game/overview_base.css?1412598051" />
<script type="text/javascript" src="/merged/mobile.js?1412598051"></script>
<script type="text/javascript" src="/js/game/upgrade_building.js?1408412983"></script>
<script type="text/javascript">
//<![CDATA[
var image_base = "http://cdn.tribalwars.net/graphic/";
var mobile = true;
var mobiledevice = false;
var game_data = {"player":{"name":"as2d99","ally":"4317","sitter":"0","sleep_start":"0","sitter_type":"normal","sleep_end":"0","sleep_last":"0","interstitial":"0","email_valid":"1","villages":"2","incomings":"0","supports":0,"knight_location":null,"knight_unit":null,"rank":2263,"points":"13019","date_started":"1391362221","is_guest":"0","id":"698410832","quest_progress":"0","premium":false,"account_manager":false,"farm_manager":false,"points_formatted":"13<span class=\"grey\">.<\/span>019","rank_formatted":"2<span class=\"grey\">.<\/span>263","pp":"0","new_ally_application":"0","new_ally_invite":"0","new_buddy_request":"0","new_forum_post":"127","new_igm":"0","new_items":"0","new_report":"0","fire_pixel":"0","new_quest":"1"},"village":{"id":96311,"name":"O rety rety atakuj\u0105 ci z Bety !","wood_prod":0.86666667626364,"stone_prod":0.86666667626364,"iron_prod":0.86666667626364,"storage_max":"400000","pop_max":"24960","wood_float":"400000","stone_float":"400000","iron_float":"400000","wood":400000,"stone":400000,"iron":400000,"pop":"23354","x":"412","y":"412","trader_away":"0","bonus_id":"8","bonus":{"wood":1.3,"stone":1.3,"iron":1.3},"buildings":{"village":"96311","main":"20","farm":"30","storage":"30","place":"1","barracks":"25","church":"1","church_f":"0","smith":"20","wood":"30","stone":"30","iron":"30","market":"20","stable":"20","wall":"20","garage":"15","hide":"10","snob":"1","statue":"1","watchtower":"0"},"player_id":"698410832","res":[400000,0.86666667626364,400000,0.86666667626364,400000,0.86666667626364,"400000","23354","24960"],"coord":"412|412"},"nav":{"parent":2},"link_base":"\/game.php?village=96311&screen=","link_base_pure":"\/game.php?village=96311&screen=","csrf":"d199","world":"pl80","market":"pl","RTL":false,"version":"22314 8.27.1","majorVersion":"8.27.1","screen":"overview_villages","mode":null,"device":"desktop"};
var csrf_token = 'd199';
var server_utc_diff = 7200;
var VillageContext = (!VillageContext) ? { } : VillageContext;
VillageContext.claim_enabled = true;
//]]>
</script>
</head>
<body id="ds_body" class="mds">
<div id="mNotifyContainer">
<div id="notify_incomings" class="mNotify" style="display: none">
<span class="mNotifyNumber">
0
</span>
</div>
<div id="notify_supports" class="mNotify" style="display: none">
<span class="mNotifyNumber"><a class="mNotifyNumber" href="""></a></span>
</div>
<div id="notify_mail" class="mNotify" style="display: none">
</div>
<div id="notify_report" class="mNotify" style="display: none">
</div>
<div id="notify_forum" class="mNotify" >
</div>
<div class="mNotify" style="display: none">
</div>
</div>
<div id="loading" ><img src="http://dspl.innogamescdn.com/8.27.1/22314/graphic/m/ajax-loader.gif?df38d" title="" alt="" class="" /><br />Wczytywanie...</div>
<span id="storage" style="display: none">400000</span>
<div id="mobileHeader">
<div id="mobileTouch">
<div id="mobileMenu" class="mobileMenu">
<div id="mobileMenuScroll" class="mobileMenuScrollContent">
<span class="arrow">«</span>
<a href="/game.php?village=96311&screen=overview">O rety rety atakują ci z Bety !
<span class="bonus_icon bonus_icon_8" title="30% większa produkcja surowców (wszystkie surowce)"></span> <b class="nowrap">(412|412) K76</b></a>
- Mapa
- Przeglądy
- Raporty
- Wiadomości
- <span id="tribe_forum_indicator" class="icon header new_post" title="Nowy komentarz w forum"></span>Plemię
- Ranking
- Więcej
<span class="arrow">»</span>
</div>
</div>
<div id="mobileMenuSmall">
<span class="mheader icon wood"></span> <span id="wood" title="3120" class="warn" data-amount="400000"></span>
<span class="mheader icon stone"></span> <span id="stone" title="3120" class="warn" data-amount="400000"></span>
<span class="mheader icon iron"></span> <span id="iron" title="3120" class="warn" data-amount="400000"></span>
<span class="mheader icon pop"></span> <span id="pop_current_label">23354</span>/<span id="pop_max_label">24960</span>
</div>
</div>
<div class="mobileDivider"></div>
<div id="mobileMore">
Profil
Inwentarz
Ustawienia
Premium
Przyjaciele
Notatki
Flagi
Rycerz
Menedżer Konta
Asystent Farmera
Pomoc
Forum
Wylogowanie
</div>
</div>
<div id="mobileNav">
<div><span class="mobileNav" id="mobileNavRight"></span></div>
<div><span class="mobileNav" id="mobileNavLeft"></span></div>
</div>
<div class="mobileNavContent" id="mobileNavContentLeft"></div>
<div class="mobileNavContent" id="mobileNavContentRight"></div>
<div id="mobileContent">
<div class="menu" style="display:none; padding:3px;" id="group_popup"></div>
<div class="error_box" style="display:none;">
</div>
<div id="content_value" style="margin: 0 auto">
<script type="text/javascript">
$(function(){
VillageGroups.initOverviews();
});
</script>
<table id="production_table" class="vis small" cellspacing="0">
<tr style="margin-top:3px;">
<th style="border-top:1px solid;">
<span class="quickedit-vn" data-id="96311">
<span class="quickedit-content">
<a href="/game.php?village=96311&screen=overview">
<span class="quickedit-label" data-text="O rety rety atakują ci z Bety !">
O rety rety atakują ci z Bety ! (412|412) K76 </span>
<span class="bonus_icon bonus_icon_8" title="30% większa produkcja surowców (wszystkie surowce)"></span> </a>
<a class="rename-icon" href="#" title="Zmień nazwę"></a>
</span>
</span>
</th>
<th style="border-top:1px solid;text-align:right;">10<span class="grey">.</span>029</th>
</tr>
<tr class="nowrap">
<td colspan="2" class="nopad">
<a class="button icon show_more">Dalsze informacje</a>
<div class="more_info">
<table width="100%">
<tr><td>Surowce<br /><table><tr><td><span><span class="warn wood">400<span class="grey">.</span>000</span> <span class="warn stone">400<span class="grey">.</span>000</span> <span class="warn iron">400<span class="grey">.</span>000</span> </span></td></tr></table><hr /></td></tr>
<tr><td class="nopad">
<table><tr>
<td style="border-right:1px dotted;">Spichlerz<br /><table><tr><td><span><img src="http://dspl.innogamescdn.com/8.27.1/22314/graphic/res.png?0fdfc" alt="" title="Pojemność spichlerza" /> 400000</span></td></tr></table></td>
<td style="padding-left:5px">Zagroda<br /><table><tr><td><span><span class="icon header population"> </span> 23354/24960</span></td></tr></table></td>
</tr></table>
<hr /></td></tr>
<tr><td><span>Kupcy</span><br /><table><tr><td>110</td></tr></table><hr /></td></tr>
</table>
</div>
</td>
</tr>
<tr style="margin-top:3px;">
<th style="border-top:1px solid;">
<span class="quickedit-vn" data-id="94464">
<span class="quickedit-content">
<a href="/game.php?village=94464&screen=overview">
<span class="quickedit-label" data-text="wioska barbarzyńska">
wioska barbarzyńska (412|412) K75 </span>
</a>
<a class="rename-icon" href="#" title="Zmień nazwę"></a>
</span>
</span>
</th>
<th style="border-top:1px solid;text-align:right;">2<span class="grey">.</span>990</th>
</tr>
<tr class="nowrap">
<td colspan="2" class="nopad">
<a class="button icon show_more">Dalsze informacje</a>
<div class="more_info">
<table width="100%">
<tr><td>Surowce<br /><table><tr><td><span><span class="warn wood">115<span class="grey">.</span>798</span> <span class="warn stone">115<span class="grey">.</span>798</span> <span class="warn iron">115<span class="grey">.</span>798</span> </span></td></tr></table><hr /></td></tr>
<tr><td class="nopad">
<table><tr>
<td style="border-right:1px dotted;">Spichlerz<br /><table><tr><td><span><img src="http://dspl.innogamescdn.com/8.27.1/22314/graphic/res.png?0fdfc" alt="" title="Pojemność spichlerza" /> 115798</span></td></tr></table></td>
<td style="padding-left:5px">Zagroda<br /><table><tr><td><span><span class="icon header population"> </span> 1918/2598</span></td></tr></table></td>
</tr></table>
<hr /></td></tr>
<tr><td><span>Kupcy</span><br /><table><tr><td>154</td></tr></table><hr /></td></tr>
</table>
</div>
</td>
</tr>
</table>
<script>
$(function(){
$('.quickedit-vn').QuickEdit( { url: TribalWars.buildURL('POST', 'main', { ajaxaction: 'change_name', village: '__ID__' } ) } );
});
</script>
</div>
</div>
<div style="clear: both">
<p style="float: left; margin-bottom: 0">
Wersja przeglądarkowa
</p>
<p style="float: right; margin-bottom: 0">
<span id="serverTime">21:37:58</span> <span id="serverDate">14/10/2014</span>
</p>
</div>
<div id="mNotifySpacer"> </div>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-35100433-1']);
_gaq.push(['_trackPageview']);
_gaq.push(['_gat._anonymizeIp']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
})();
</script>
<script>
$(document).ready(function() {
TribalWars.initTab('9df45365fb');
Timing.init(1413315478.0743);
Connection.connect(8080, 'b3267d405e8f');
UI.Notification.enabled = true;
});
</script>
<div id="side-notification-container"></div>
</body>
</html>
i'm trying to replicate what you can see in the image here in jquery to make a touch enabled version of an existing application:
I'm using jquery-ui sliders and i'd like to keep using them because i have a lot of business logic tied to them, actually they have this look:
I need help for the css and html part, i don't know how to make the effect where the "slider" gets filled when the user click on the "plus" button and on how i should organize my HTML to achieve that look.
My markup is as follows:
<table>
<tr>
<td>
<div id="timeName">
Tempo a disposizione
</div>
<div id="travelTime">
<div class="selectedHandler"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class='paramName'>
Architecture and Heritage
</div>
<div id="Architecture_and_Heritage" class="param" data-id="3">
<div class="selectedHandler"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class='paramName'>
Culture
</div>
<div id="Culture" class="param" data-id="5">
<div class="selectedHandler"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class='paramName'>
Fairs Performances and Special Events
</div>
<div id="Fairs_Performances_and_Special_Events" class="param" data-id="6">
<div class="selectedHandler"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class='paramName'>
Food and Drink
</div>
<div id="Food_and_Drink" class="param" data-id="1">
<div class="selectedHandler"></div>
</div>
</td>
</tr>
</table>
Is this any help? It's not really styled but sort of gives the idea: http://jsfiddle.net/TU95t/
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<script>
$(function() {
var select = $( "#demo" );
var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
min: 1,
max: 6,
value: 1,
range: "min",
change: function(event, ui) {
var sliderValue = $( "#slider" ).slider( "option", "value" );
$('#sliderPosition').html(sliderValue);
}
});
$('#increase').click(function() {
var sliderCurrentValue = $( "#slider" ).slider( "option", "value" );
slider.slider( "value", sliderCurrentValue + 1 );
});
$('#decrease').click(function() {
var sliderCurrentValue = $( "#slider" ).slider( "option", "value" );
slider.slider( "value", sliderCurrentValue - 1 );
});
});
</script>
<div id="demo">
<div id="sliderPosition">1</div>
</div><!-- End demo -->
<div id="increase" style="width:200px; height:30px; border: 1px solid #ccc;">
+ Increase Slider Value
</div>
<div id="decrease" style="width:200px; height:30px; border: 1px solid #ccc;">
- Decrease Slider Value
</div>
</body>
</html>
<!-- End demo -->