I have a table where the table cell (td) can contain both image and text. The cell height can be increased or decreased dynamically.
I want the image to be shown on top on the cell (always) and text in the center (always).
How can I achieve this?
html:
<table>
<tr>
<td><div>
<img src="http://imgur.com/a/1s17J">
</div>
<div>
Text
</div></td>
<td><div>
<img src="http://imgur.com/a/1s17J">
</div>
<div>
Text
</div></td>
<td><div>
<img src="http://imgur.com/a/1s17J">
</div>
<div>
Text
</div></td>
<td><div>
<img src="http://imgur.com/a/1s17J">
</div>
<div>
Text
</div></td>
</tr>
</table>
css:
td img
{
float:top;
}
td
{
background-color:red;
width:150px;
height: 50px;
text-align:center;
}
Fiddle
PS: please, provide some code because now I can just guess what did you meant by your request.
use css
on img apply top:0px; float:left;
on td apply test-align: center
Related
Here is image...[![ https://i.stack.imgur.com/651dH.png
In above Image 2 widgets are there.
1. which gives MG, MP, Assigned etc(left-hand panel)
2. Right panel(16.9%, 13.1% etc).And these all values gives tooltip.
Step 1:
I have to click one of the option from left-hand-side, in a screenshot its showing MG, MP, Assigned etc. All these options can be differentiate only with style attributes(top and left) and that are into range such as top:235-247px, left:65-72px(for first option)
The code is as below:
<div class="tab-tooltip tab-widget tab-tooltipBR" style="user-select: none; -webkit-tap-highlight-color: transparent; top: 247px; left: 71px;">
<div class="tab-tooltipContainer">
<div class="tab-tooltipContent" wairole="alert" style=""><div class="tab-ubertip tab-widget" style="min-width: 142px;">
<div class="tab-ubertipCommandArea">
<div class="tab-ubertipCommands hide"></div>
<div class="tab-clear"></div><div class="tab-ubertipSelected hide"></div>
</div><div class="tab-ubertipContent">
<div class="tab-ubertipTooltip"><span style="white-space:pre-wrap;tab-size:10;-moz-tab-size:10"><div style="text-align:left;"><span style="font-family:'Arial';font-size:13px;color:#000000;font-weight:normal;font-style:normal;text-decoration:none;">Health Group</span></div></span></div>
<div class="tab-ubertipActions hide"></div>
</div>
</div></div>
</div>
<div class="tab-tooltipConnector"></div>
</div>
Step 2:
Once one of the option clicked it will show only one row with its related value. Say for example , clicked on MG will display MG 16.9% 13.1% 81.6% (full row)and so on and when mousehover it on these values(16.9%, 13.1% etc.) one after another it gives tooltip and that tooltip value I have to fetch. And code for this as below:
<div class = “ tab-tooltip tab-widget tab-tooltipAR” style=”user-select: none; -webkit-tap-highlight-color: transparent; top: 1px; left:119px;”>… </div>
<div class=”tab-tooltipContainer”>
<div class =”tab-tooltipContent” wairole=”alert” style>
<div class=”tab-ubertip tab-widget” style=”min-width: 368px;”>.
<div class =”tab-ubertipContent”>
<div class=”tab-ubertipTooltip”>
<span style =”white-space:pre-wrap;tab-size:10;-moz-tab-size:10”>
<div style=”text-align:left;”>
<span style=””> Castle health Group </span>
</div>
<table style=”vertical-align:top;padding:0px” cellspacing=”0”>
<tbody>
<tr>
<td style =”white-space:pre”>
<span style=”font-family”>**97**</span>
</td>
<td >
<span style=”font-” >**Minimum**</span>
</td>
I am able to fetch the tooltip values(97, Minimum) but how do i mouse hover on each values(16.9%, 13.1% etc) which are just different which each other with 'left' and 'top' attributes.
Please anyone have idea how do i mousehover on each value on the basis of style attribute.
Any help will be appreciated.
Thanks.
In this carousel,
how do I show dots?
<amp-carousel layout=fixed-height height=400 type=slides autoplay controls loop arrows dots='.'>
<amp-img src="img/slaid.jpg" layout=fixed-height height=400></amp-img>
<amp-img src="img/slaid.jpg" layout=fixed-height height=400></amp-img>
</amp-carousel>
There is an example in this codelab:
https://codelabs.developers.google.com/codelabs/advanced-interactivity-in-amp/index.html
The final code is here:
<amp-carousel type="slides" layout="fixed-height" height=250 id="carousel" on="slideChange:AMP.setState({selected: {slide: event.index}})">
<amp-img width=200 height=250 src="./shirts/black.jpg" [src]="shirts[selected.sku].image"></amp-img>
<amp-img width=300 height=375 src="./shirts/black.jpg" [src]="shirts[selected.sku].image"></amp-img>
<amp-img width=400 height=500 src="./shirts/black.jpg" [src]="shirts[selected.sku].image"></amp-img>
</amp-carousel>
<p class="dots">
<span [class]="selected.slide == 0 ? 'current' : ''" class="current"></span>
<span [class]="selected.slide == 1 ? 'current' : ''"></span>
<span [class]="selected.slide == 2 ? 'current' : ''"></span>
</p>
https://github.com/googlecodelabs/advanced-interactivity-in-amp/blob/master/static/final.html
Navigational dots can be added by indicating it in the CSS Custom Properties, <style></style>. Here's a Github sample from Styling/Theming with AMP:
<head>
<style>
amp-carousel {
--arrow-color: green;
--dots: {
opacity: 50%;
color: blue;
}
}
</style>
</head>
<body>
<amp-carousel width=500 height=500>
<div>
<amp-img width=500 height=500 src="https://placekitten.com/g/500/500">
</amp-img>
</div>
<div>
<amp-img width=500 height=500 src="https://placekitten.com/g/500/500">
</amp-img>
</div>
</amp-carousel>
</body>
You can also check this SO thread for additonal reference.
Hey guys i'm having some problems with how to upload and save images using angularjs and flowjs.
I'm new to angularjs and had my problems trying to make an image upload but i got it working with ng-flow, still i'm having some problems trying to save the image to some designed path.
One exemple and similar problem is this one How and where save uploaded files with ng-flow? , but i still couldn't made it work.
Here's the code for the upload and preview, working fine so far so good:
<div class="ng-scope add-file" flow-init="{target:'../WebService/WebService.asmx/setImage'}"
flow-name="image.flow" flow-files-submitted="$flow.upload()"
flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]">
<div class="row" style="margin-top: 0px!important;">
<div class="col-sm-10">
<p><label for="image">ADD PHOTO</label></p>
<table style="border: 0px;">
<tr>
<td ng-repeat="file in $flow.files" class="ng-scope thumbnail" style="margin: 3px 3px 3px 3px;">
<div class="text-right">
<a class="glyphicon glyphicon-remove" ng-click="file.cancel()"
style="color:#ff4b4b; text-decoration: none!important;"></a>
</div>
<div class="frame" ng-show="$flow.files.length" style="min-width: 210px!important;">
<span class="helper"></span>
<img flow-img="file" src="" class="image-thumbnail">
</div>
<div class="progress progress-striped" ng-class="{active: file.isUploading()}">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0"
aria-valuemax="100" ng-style="{width: (file.progress() * 100) + '%'}">
</div>
<span class="sr-only ng-binding">1% Complete</span>
</div>
</td>
</tr>
</table>
</div>
<div class="col-sm-2 text-right drop" flow-drop="" ng-class="dropClass">
<span class="file-upload btn btn-primary" flow-btn="">
Choose file
<input type="file" multiple="multiple" style="visibility: hidden; position: absolute;">
</span>
</div>
</div>
But here's the problem, i don't know how or what to do to create this image in some path...
I'm passing to ng-flow-init my webservice method as it will send via url parameters like this:
flow-init="{target:'../WebService/WebService.asmx/setImage'}"
and the ws receive it like the following example:
../setImage?flowChunkNumber=1&flowChunkSize=1048576&flowCurrentChunkSize=198637&flowTotalSize=198637&flowIdentifier=198637-1jpg&flowFilename=1.jpg&flowRelativePath=1.jpg&flowTotalChunks=1
'flowChunkNumber=1
'flowChunkSize=1048576
'flowCurrentChunkSize=111168
'flowTotalSize = 111168
'flowIdentifier=111168-Figura1png
'flowFilename=Figura1.png
'flowRelativePath=Figura1.png
'flowTotalChunks = 1
What should i do with these informations or what do i need to send the data (binary, base64, etc) and save/create the image on my server?
Edit 1: I already know that i need the file data and figured that i do need an upload.php to transform and send the file.
Still can't even think about how to create an upload.php for vb.net
After a long time searching i decided to move forward and do with an entirely different way, i removed pretty much all my custom css and style to make it more clean to read.
Before anything i changed somethings like i'm not using ng-flow anymore, it's purely angularjs and javascript, and i'm encoding the file to Base64 and decoding it on my server side.
HTML:
<div class="row">
<div class="col-sm-10">
<table>
<tr>
<td ng-repeat="image in images">
<div>
<img id="imagePreview{{$index}}" src="#" alt="" />
</div>
</td>
</tr>
</table>
</div>
<div class="col-sm-2 text-right">
<input type="file" id="img" />
<button ng-click="addImage()" type="button">ADD</button>
</div>
</div>
AngularJS Controller:
$scope.images = [];
//Don't let the same file to be added again
$scope.removeImage = function (index) {
$scope.images.splice(index, 1);
}
//Add new file to $scope.images
$scope.addImage = function () {
var
reader = new FileReader(),
$img = $("#img")[0],
index = $scope.images.length;
reader.onload = function (e) {
if ($scope.images.indexOf(e.target.result) > -1) return;
$scope.images.push(e.target.result);
if (!$scope.$$phase) $scope.$apply();
$("#imagePreview" + index).attr('src', e.target.result);
$scope.uploadImage(index);
}
reader.readAsDataURL($img.files[0]);
};
And here it is how to get the files converted to Base64:
$scope.uploadImage = function (index) {
var res = $scope.images[index];
//{...} Your code here, method call etc.
}
I tried tweaking the CSS coding and no prevail. Things i want:
search box with border radius of 5px
enlarge the search icon with out getting it dispalced
both search box and search icon evenly placed around the div
HTML CODE:
<div class="search"
<div class="searchbox">
<form action="/search" method="get" class="search_form">
<input type="text" value="Search Blog..." class="search_text" name="q">
<input type="image" src="http://s25.postimg.org/d3fu892zz/search_button_without_text_md.png" height="20" width="20"class="button">
</form>
</div>
</div>
CSS CODE:
.search{position:fixed;
height:25px;
width:194px;
top:189px;
left:14px;
border:2px solid black;
background-color:black;
border-radius:10px;
padding-left:2px;
padding-bottom:4px;
opacity:.8;}
Notice: Your class="search" div is not closed !!
Here is the code that should work and fullfill all the three conditions of yours
<div class="search">
<div class="searchbox">
<form action="/search" method="get" class="search_form">
<input type="text" value="Search Blog..." class="search_text" name="q">
<input type="image" src="http://i42.tinypic.com/fayl43.png" class="button">
</form>
</div>
Css Code:
.search{position:absolute;
height:28px;
width:190px;
top:140px;
left:100px;
border:2px solid black;
background-color:black;
border-radius:10px;
padding-left:2px;
padding-bottom:4px;
opacity:.8;
}
form#input{
display:inline-block;
}
.searchbox{
}
.search_text{
margin-top:4px;
margin-left:5px;
border-radius:5px;
text-align:center;
}
.button{
margin-top:5px;
margin-left:2px;
position:absolute;
height:20px;
width:20px;
}
.button:hover{
-webkit-transform:scale(1.3);
-moz-transform:scale(1.3);
-o-transform:scale(1.3);
opacity: 3;
}
Working JSfiddle Demo - http://jsfiddle.net/vg8Mn/
Hope this helps :)
I tried the code from the project to change the size of the select box:
<strong>Result Div :</strong>
<div id="formResult" class="result ui-widget-content ui-corner-all">Submit form bellow.</div>
<strong>Topics Div :</strong>
<div id="topics" class="result ui-widget-content ui-corner-all"></div>
<s:form id="form" action="echo" theme="simple" cssClass="yform">
<fieldset>
<legend>Select Box as Autocompleter</legend>
<div class="type-select">
<label for="echo">Echo: </label>
<sj:autocompleter
id="customers"
name="echo"
list="%{customers}"
listValue="name"
listKey="id"
selectBox="true"
selectBoxIcon="true"
onChangeTopics="autocompleteChange"
onFocusTopics="autocompleteFocus"
onSelectTopics="autocompleteSelect"
cssStyle="width:100%;"
/>
</div>
<div>
<sj:submit
targets="formResult"
value="AJAX Submit"
indicator="indicator"
button="true"
/>
<img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/>
</div>
</fieldset>
</s:form>
<br/>
but it doesn't work. I don't know what is the problem with this code.
Looking at generated HTML neither cssStyle nor cssClass of <sj:autocompleter> tag is set to actual input field. But you can use plain CSS to style this input field. Put your <sj:autocompleter> inside of some element to change only specific input then you can use something like that:
.type-select .s2j-combobox-input {
width: 100%;
}
Where type-select is class of wrapper element and s2j-combobox-input is the class of generated input field for the <sj:autocompleter>.