I have a CellTable where I want to put HTML-code in the cells.
The following code is not working, the blank spaces are removed from the output.
TextColumn<MyCell> column1 = new TextColumn<MyCell>()
{
#Override
public String getValue(MyCell myCell)
{
String result = " " +myCell.getValue();
return result;
}
};
table.addColumn(column1 , "Header1");
I know this could be done using css but I just want to know how to put HTML-code in the cells. Any help is appreciated!
AFAIK additional whitespace is ignored in HTML - you should use pre tag to maintain formatting.Anyway please find my column sample below. It generates nice progress bar from values contained in objects backed by data provider.
final SafeHtmlCell progressCell = new SafeHtmlCell();
Column<UiScheduledTask, SafeHtml> progressCol = new Column<UiScheduledTask, SafeHtml>(
progressCell) {
#Override
public SafeHtml getValue(UiScheduledTask value) {
SafeHtmlBuilder sb = new SafeHtmlBuilder();
float percent = new Float(value.getCompleted())
/ new Float(value.getAll());
int rounded = Math.round(percent * 100);
sb.appendHtmlConstant("<div style='width: 100px; height: 20px; position: relative;'>");
sb.appendHtmlConstant("<div style='z-index: 2; display: inline; width: 100px; position: absolute; left: 0px, top: 0px; text-align: center;'>"
+ value.getCompleted()
+ "/"
+ value.getAll()
+ "</div>");
sb.appendHtmlConstant("<div style='position: absolute; left: 0; top: 0; width: 100px; z-index: 1'><div style='display: inline; float: left; width: "
+ rounded
+ "%; height: 20px; background-color: #82cd80;'></div>");
sb.appendHtmlConstant("<div style='display: inline; float: right; width: "
+ (100 - rounded)
+ "%; height: 20px; background-color: #c54c4d;'></div></div>");
sb.appendHtmlConstant("</div>");
return sb.toSafeHtml();
}
};
Related
I am trying to extract a link from an HTML body which is coming from a response . Then message looks like this "content":
{
"rendered":
"<div style=
"padding: 56.25% 0 0 0;
position: relative;">
<iframe style=
"position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;"
title="Shrewsberry"
src="https://player.vimeo.com/video/1000224?h=23334&badge=0&autopause=0&player_id=0&app_id=58479\"
frameborder="0"
allowfullscreen="allowfullscreen">
</iframe>
</div>"}
I want to get the content inside 'src="https://player.vimeo.com/video/1000224?' can anyone help .
This is my code which i use
final value = parse(html); // html is the value from response
String parsedString = parse(value.body!.text).documentElement!.text;
print(parsedString);
You can use this simple logic if your URL always ends with ?
void main(){
String x='"content": { "rendered": "<div style="padding: 56.25% 0 0 0; position: relative;"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" title="Shrewsberry" **src="https://player.vimeo.com/video/1000224?**h=23334&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allowfullscreen="allowfullscreen">\n"}';
int start= x.indexOf('src');
int end= x.indexOf('?');
print(x.substring(start,end+1));
}
You can use Regex to extract the string from your original string. Given the fact that it looks like HTML I ignored the ** you put in your answer.
In that case the regex (?<=src=").*?(?=") should work to retrieve the source. This will work for any source, not just Vimeo.
import 'dart:convert';
void main() {
String input = "\"content\": { \"rendered\": \"<div style=\"padding: 56.25% 0 0 0; position: relative;\"><iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" title=\"Shrewsberry\" **src=\"https://player.vimeo.com/video/1000224?\"h=23334&badge=0&autopause=0&player_id=0&app_id=58479\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\">\n\"}";
RegExp regex = new RegExp('(?<=src=").*?(?=")');
var match = regex.firstMatch(input);
if (match == null) {
print("No match found.");
return;
}
print("Result: " + match.group(0)!);
}
Output: Result: https://player.vimeo.com/video/1000224?
I use the code below to fit my landscape(4:3) photo's in a carousel. But I would like to change the width and height of the .carousel depending on the photo(landscape or portrait). How can I do that?
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
display: block;
}
.carousel {
/* the percentages below are for a 4:3 landscape photo(1600x1200) */
height: 60%;
width: 70%;
}
/* I need to set height : 70%; and width: 60% for portrait */
Should I add an class to the carousel-item to indicate that it's a landscape or portrait photo?
Create one class for portrait and one for landscape. When the image loads or when you get the image size then determine if it is portrait or landscape and then add the appropriate class to the image or carousel container.
// list of images - as requested you can put this list in a separate js file
// make sure it is before the other code below
var imagesArray = ["https://lorempixel.com/300/500/animals/1", "https://lorempixel.com/300/500/animals/2", "https://lorempixel.com/500/300/animals/1","https://lorempixel.com/500/300/animals/2","https://lorempixel.com/500/300/city/1","https://lorempixel.com/300/500/city/2"];
// when the user clicks the random button
// we get a random image from our list of URLS
// and then set that as the source of the image
function displayImage(direction, isURL) {
var image = document.getElementById("myImage");
var label = document.getElementById("loadingLabel");
var list = imagesArray.slice(); //make a copy
var currentURL = image.src;
var currentIndex;
var index = 0;
var numberOfImages = list.length;
if (isURL==true) {
currentURL = direction;
}
currentIndex = list.indexOf(currentURL);
if (direction=="next") {
index = currentIndex>=list.length-1 ? 0 : currentIndex+1;
}
else if (direction=="previous") {
index = currentIndex<=0 ? list.length-1 : currentIndex-1;
}
else if (direction=="random") {
list.splice(currentIndex,1);
index = Math.floor(Math.random()*list.length);
}
else if (direction=="start") {
index = 0;
}
else if (direction=="end") {
index = list.length-1;
}
else if (isURL) {
if (currentIndex==-1) {
console.log("Image not found in images array. Check the URL");
return;
}
index = currentIndex;
}
else {
console.log("Direction not specified");
}
image.src = list[index];
label.innerHTML = "Loading " + list[index] + "...";
label.title = list[index];
updateNavigationLabel();
}
// this handles when the image has finished loading
// we check if the image is portrait or landscape
// if it is landscape we set the landscape class
// if it is portrait we set the portrait class
function imageLoadHandler(event) {
var image = document.getElementById("myImage");
var carousel = document.getElementById("myCarousel");
var label = document.getElementById("loadingLabel");
var width = image.naturalWidth;
var height = image.naturalHeight;
var isPortrait = width<height;
var isSquare = width==height;
carousel.classList.remove("portrait");
carousel.classList.remove("landscape");
var caption = width + "x" + height;
if (isPortrait) {
caption = "Portrait (" + caption + ")";
carousel.classList.add("portrait");
}
else if (isPortrait==false) {
caption = "Landscape (" + caption + ")";
carousel.classList.add("landscape");
}
image.caption = caption;
label.innerHTML = caption;
updateNavigationLabel();
}
function updateNavigationLabel() {
var image = document.getElementById("myImage");
var label = document.getElementById("navigationLabel");
var list = imagesArray.slice(); //make a copy
var numberOfImages = list.length;
var currentURL = image.src;
currentIndex = list.indexOf(currentURL);
label.innerHTML = currentIndex+1 +" of " + numberOfImages;
}
window.addEventListener("DOMContentLoaded", function() {
var element = document.getElementById("myImage");
var button = document.getElementById("button");
var carousel = document.getElementById("myCarousel");
// listen for when an image loads
element.addEventListener("load", imageLoadHandler);
// listen for when the user clicks on the random button
button.addEventListener("click", function() {
displayImage('random')
});
// Options - load an image when the page loads
// displayImage("start"); // use to load the first image
// displayImage("end"); // use to load the last image
// displayImage("random"); // use to load a random image
// displayImage("specified", "https://lorempixel.com/300/500/animals/2"); // use to load an image in the images array
displayImage("https://lorempixel.com/300/500/animals/2", true);
});
.landscape {
height: 60%;
width: 70%;
outline:2px solid blue;
}
.portrait {
height: 70%;
width: 60%;
outline:2px solid purple;
}
#myCarousel {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#myImage {
position: absolute;
left: 50%;
transform: translateX(-50%);
outline: 1px dashed red;
height: 100%;
width: 100%;
object-fit: contain;
}
#button {
position: fixed;
right: 10px;
top: 50px;
}
#loadingLabel {
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
font: 10px sans-serif;
white-space: nowrap;
}
#navigationLabel {
font: 10px sans-serif;
}
#navigation {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
font: 10px sans-serif;
}
<!-- optionally set images in separate file. order before the main javascript -->
<script src="myimages.js"></script>
<div id="myCarousel" class="landscape">
<img id="myImage">
<label id="loadingLabel"></label>
</div>
<button id="button">random</button>
<div id="navigation">
<button id="prev" onclick="displayImage('previous')">prev</button>
<label id="navigationLabel"></label>
<button id="next" onclick="displayImage('next')">next</button>
</div>
More precisely, the rotation of the block does not work.
At the moment, the block turns once, and I want to turn every time i click in both directions.
how to do it ?
var now = 10
$('.left').click(function() {
$(".d").css('transform', 'rotate (' + now + 'deg)');
});
.r {
width: 200px;
height: 200px;
border: 20px solid;
border-radius: 50%;
}
.d {
width: 200px;
height: 200px;
border: 20px solid blue;
border-radius: 50%;
}
.wrapper {
width: 230px;
}
.parent {
width: 240px;
height: 240px;
position: relative;
}
.r,
.d {
position: absolute;
}
.d {
border-right-color: transparent;
border-top-color: transparent;
transform: rotate(45deg);
}
.btns {
display: table;
margin: 10px auto;
}
button {
margin-left: 10px;
}
<div class="wrapper">
<div class="parent">
<div class="r"></div>
<div class="d"></div>
</div>
<div class="btns">
<button class="left">+</button>
<button class="right">-</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
At the very beginning I wanted to make such a regulator as in the screenshot.
but since there is no great knowledge in JS and I decided to do it in HTML and CSS + jQuery
wanted to use svg but I don't know how to change it
hope for your help
You need to keep a running total in now so that you can keep incrementing. For example:
var now = 0;
$('.left').click(function() {
now += 10;
$(".d").css('transform', 'rotate(' + now + 'deg)');
});
$('.right').click(function() {
now -= 10;
$(".d").css('transform', 'rotate(' + now + 'deg)');
});
As another person has just pointed out, your spaces between rotate and ( were also breaking it.
Here's a CodePen if you need it: https://codepen.io/MSCAU/pen/MZgqop
I think the Problem is with unnecessaryspaces that I remove I hope to help you.
var now = 10;
$('.left').click(function() {
now += 10;
$(".d").css('transform', 'rotate('+now+'deg)');
});
$('.right').click(function() {
now -= 10;
$(".d").css('transform', 'rotate('+now+'deg)');
});
In this case you have to increase or decrease 10 deg again and again here is an example:
$(function(){
var now = 10,
count = 0;
$('.left').click(function() {
rotate( count + 1);
});
$('.right').click(function() {
rotate( count - 1);
});
function rotate(new_count) {
var rotatePx = ((new_count) * (now));
$(".d").css('transform', 'rotate('+ rotatePx +'deg)');
count = new_count;
}
});
I want to add negative padding in css, I have written a small code of battery charging cell. What I want is if I enter value in negative like -1px than the cell color should move to the left side and div should stay in center.
.cell {
width: 100px;
height: 30px;
border: 1px solid black;
}
.padding {
background-color: #3D9970;
width: 10px;
float: left;
height: 30px;
position: absolute;
left: 55px;
padding-right: 1px;
}
<div class="cell">
<div class="cell1"></div>
<div class="padding"></div><span style="display: inline;">
</div>
Please help me.
You can't.
See the specification:
Unlike margin properties, values for padding values cannot be negative.
I think you can achieve the same effect with pseudo elements:
.cell{
display:block;
width: 100px;
height: 30px;
position:relative;
}
.cell:before{
content:'';
background-color: #3D9970;
width: 10px;
top:0;
left:calc(50% - 5px);
height: 100%;
position: absolute;
}
.cell:after{
content:'';
border: 1px solid black;
width:100%;
height:100%;
display:block;
top:0;
left: 0px;
position: absolute;
}
<div class="cell">
</div>
"Left" property could be negative, so if you change it you can move the position of the green rectangle in the middle (.cell:before) of the block and border itself (.after)
The easiest way is to use an absolute positioning relatively to a parent node. Here the parent node would be the battery "housing".
So you can set the position CSS value of the rot div to relative, and then the charge one to absolute. Indeed, according to MDN Webdocs:
absolute: [...] It is positioned relative to its closest positioned ancestor, if any.
Then, you just have to play with the left and width CSS properties. For the "middle" case, I chose to display one border.
Below a working snippet. Just click the "Begin the charge variation" button to start the show.
var chargeElement = document.getElementById("charge");
// To set a charge to the battery, simply call: setCharge(percentage)
function setCharge(percentage) {
var left;
var width;
if (percentage > 100) percentage = 100;
if (percentage < 0) percentage = 0;
chargeElement.setAttribute("data-value", percentage);
// If the charge is 50%, simply draw a line
if (percentage == 50) {
chargeElement.className = "middle";
} else {
chargeElement.className = "";
}
// Otherwise, adjust left and width values
if (percentage >= 50) {
left = 50;
width = percentage - left;
} else {
left = percentage;
width = 50 - left;
}
// Then update the charge style.
chargeElement.style.left = left + "%";
chargeElement.style.width = width + "%";
}
// A simple function to add / remove some charge
function addCharge(percentage) {
var value = parseInt(chargeElement.getAttribute("data-value"));
value += percentage;
setCharge(value);
}
// Here just some stuff for illustration.
// You don't need those functions to set the charge.
function letsBeginTheShow(buttonElement) {
buttonElement.disabled = true;
setNextCharge(10);
}
function setNextCharge(increment) {
var percentage = parseInt(chargeElement.getAttribute("data-value"))
percentage += increment;
if (percentage > 100) {
percentage = 100;
increment = -5;
}
if (percentage < 0) {
percentage = 0;
increment = 5;
}
setCharge(percentage);
setTimeout(function() {
setNextCharge(increment);
}, 50);
}
setCharge(50);
.battery {
position: relative;
width: 100px;
height: 30px;
border: 1px solid black;
/* Below : only for aestethic reasons */
float: left;
margin-right: 30px;
/* End of aesthethic stuff */
}
#charge {
height: 100%;
position: absolute;
background-color: #3D9970;
border-color: #3D9970;
}
.middle {
border-left: 1px solid;
}
<div class="battery">
<div id="charge" data-value="50" class="middle"></div>
</div>
<button onclick="letsBeginTheShow(this)">Begin the charge variation</button>
Trying to change the background color of a label for a checkbox when the checkbox is checked. I can do it using this method http://jsfiddle.net/CjpmP/ but I can find figure out how to do it with the #html.checkbox and the label for method I need to use. Here is what I've got
<style type="text/css">
.checkyoself{
display: none;
}
.checkyoself:checked + .label1{
background-color: green;
}
.label1 {
width: 240px;
height: 140px;
margin-right: 5px;
margin-left: 5px;
margin-top: 5px;
margin-bottom: 5px;
padding: 5px;
color: #ffffff;
background-color: #9e00f2;
float: left;
}
</style>
#{
var j = 0;
using (Html.BeginForm("GroceryList", "RecipeIngredient", FormMethod.Post))
{
for (int i = 0; i < #Model.RecipeItems.Count; i++)
{
var name = "check_" + j;
#Html.CheckBoxFor(itemModel => itemModel.RecipeItems[i].IsChecked, new { id = #name, #class="checkyoself" })
<label for=#name class="label1">#Model.RecipeItems[i].Recipe.Title</label>
#Html.HiddenFor(itemModel => itemModel.RecipeItems[i].Recipe.Title)
j++;
}
}
}
Try this fiddle that I made:
.check-with-label:checked + .label-for-check {
background-color:Red;
color:white;
border-style:double;
}
Just use the border property to engage background color property.