I'm trying to present 3 images within 3 divs. I'm working on the server side, so I use HTML string. I'm using ajax to communicate from server to web page. Then I use append to a div, in the web page to display the image.
Everything works fine until I apply the size that the image has to have.
My code for one image:
$html_2 = "<div class=\"box--test-item\"";
$html_2 = $html_2."<img class=\"main-img\" src=\"data/photos/datateste_".$idtest."/photo.jpg\" alt=\"test\" style= \"{height: 280px; width: 180px;}\">";
//Html string with information about the image.
$html_2 = $html_2."</div>";
In my error console:
element {
{
height: 280px;
width: 100px;
}: ;
The part underlined is error (invalid property value).
The visual bug it's related to the height of the image.
Since your using HTML string, the inline style attribute need not have curly braces {}.
Instead just style="height: 280px; width: 180px;" should work.
No change in rest of the code.
php code here
<?php
$html_2 = '<div class="box--test-item">';
$html_2 .= '<img class="main-img" src="data/photos/datateste_"'.$idtest.'"/photo.jpg" alt="test" style="height: 280px; width: 180px;">';
//Html string with information about the image.
$html_2 .= '</div>';
?>
Related
i have a case in which the two values of the following should be changing according to the data in database.
In a external css file i have this.
#wow-container1 {
zoom: 1;
position: relative;
width: 100%;
max-width:960px;
max-height:360px;
margin:0px auto 0px;
z-index:90;
border:2px solid #FFFFFF;
text-align:left;
font-size: 10px;
}
my requirement is i need to change the max-height:max-width: when the height and width stored in database is changed.Is there any possible solution.?
Try this using jQuery .css()
var width = "value from DB";
var height = "value from DB";
$('#wow-container1').css({ 'max-width' : width, 'max-height' : height });
you can get max-height,max-width from db,
Example in php:
<?php
$max_height='300px';//you have to get the value form db
$max_width='300px'; //you have to get the value form db
?>
then write beloved css part after calling your external css file
<style>
#wow-container1 {
max-width:<?php echo $max_width; ?>;
max-height:<?php echo $max_height; ?>;
}
</style>
You can do it in your programming language.
.css() jquery is the best solution for this. If you want to change it using css,
you have to put database value in inline css written in same page. like this :
<style>
#wow-container1 {
max-width:<?php echo $width; ?>;
max-height:<?php echo $height; ?>;
}
</style>
If you want to use jquery .css(), it will be like this :
var width = "width from database";
var height = "height from database";
$('#wow-container1').css({ 'max-width' : width, 'max-height' : height });
When you learn http://VueJS.org you can use 'v-blind' to do that, very simple!
I am trying to put an into an ExtJS panel using html config. I have dynamically created which I need to put in this iFrame.
Upon execution, an HTML is getting created under the iFrame but the body appears as empty. no Errors. Following is my ExtJS Panel code
me.outputDataPanel = Ext.create('Ext.panel.Panel', {
bodyStyle : me.htmlBodyStyle,
cls : 'htmlView_font',
border: 0,
style: 'margin: 20px 20px 20px 20px;'
});
On click of a button following happens
me.outputDataPanel.removeAll(true);
var innerHtml = '';
var Id = "SampleID";
var Name = "SampleName";
var DOB = "SampleDOB";
var Gender = "SampleGender";
var patientHeader = '<!DOCTYPE html><html><head><title>My Report</title></head><body>'+
'<table><tr><td style="font-size: 31pt; vertical-align: middle; width: 100%; padding-left:5px;">Report</td></tr></table><br/><br/>'+
'<table class="table_base" style="padding-left:9px;"><tr><td class="report_m1">ID</td><td class="report_m2">'+Id+'</td></tr>'+
'<tr><td class="report_m1">Name</td><td class="report_m2">'+Name+'</td></tr>'+
'<tr><td class="report_m1">Date of Birth</td><td class="report_m2">'+DOB+'</td></tr>'+
'<tr><td class="report_m1">Sex</td><td class="report_m2">'+Gender+'</td></tr></table><br/><br/>'+
'<div id="noteText" style="padding-left:9px;">(Note) This PSD include some errors resulting from differences in the paient\'s actual size and position compared with the model.</div>';
innerHtml+=patientHeader;
innerHtml+='</body></html>';
me.outputDataPanel.add({
bodyStyle: 'overflow-x:hidden; overflow-y:auto',
style: 'border:1px solid #b7bcc4;',
height: "100%",
//html : '<p>test 123</p>'
html: '<iframe id="frameReportPanel" name="frameReportPanelName" style="width:100%; height:100%;" align="middle" isShow="true" name="frame" scrolling="no" frameborder=0 srcdoc="'+innerHtml+'"></iframe>'
});
Didn't understand what exactly is going wrong. Please help!
Have you looked at Ext.ux.IFrame? It's a true Ext JS component, so it may just make your life easier.
IMO, you don't really have to use an iFrame. You could just use a container and to update the html on a container you just have to use the update function. You can look at the documentation here.
However, if you want to load an external web page/remote content, you might want to use loader property of the component/container. You can find the docs here.
You are not correctly escaping the contents of your srcdoc attribute. Since you are quoting it with double quotes, any double quotes in the HTML must be escaped.
innerHtml.replace(/"/g, """)
I'm creating an automated events display system for a university department that creates posters based on SQL data. The idea is to create both SVG and PDF files of a poster so that the PDF can be used for printing, and the SVG can be displayed on an automatically updating web connected digital signage display (OK, OK, a TV on the wall).
I've got the SVG files formatted how I want them, but when I tried to use the slider libraries to display the .svg files, the formatting of certain elements goes haywire. I've narrowed this down to the fact that SVGs displayed using the IMG tag don't work properly. I've included the file into its own DIV, as it's an HTML5 project; if I move the 'u=image' to the DIV tag, the transition works OK but the SVG breaks once the transition is over (the text origins all seem to reset to upper left).
Just wondered if there was a way of doing this.
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 764px; height: 1080px; overflow: hidden;">
<?php
// DATA FROM SEMINARS_DETAIL
$query = "SELECT * FROM `seminars_detail` LIMIT 4"; //Date >= NOW()
$result = $mysqli->query($query) or die($mysqli->error.__LINE__);
if($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$sem_id = $row["sem_id"];
$file = "../images/posters/$sem_id.svg";
//SVG not working properly.
echo "<div>";
echo "<img u=\"img\" src=\"$file_th\" />";
echo "</div>";
//Compared with...
//Transition works, but text origin shifts when transition finishes.
echo "<div u=\"image\">";
include $file;
echo "</div>";
}
} else {
echo 'NO RESULTS';
}
?>
</div>
First of all, please disable slideshow.
Also, please try use svg as background image.
<div u="slides" ...>
<div style="background-image: url(l.svg);"></div>
<div style="background-image: url(2.svg);"></div>
<div style="background-image: url(3.svg);"></div>
</div>
I want my comments input text box to be bigger than other fields in the form. I have got the following code in my add form:
<div class="divm centerdiv">
<?php echo $this->Form->create('Call'); ?>
<fieldset>
<legend><?php echo __('Add Call Details'); ?></legend>
<?php
echo $this->Form->input('call_date',array('required'=>false,'id'=>'datepicker','type'=>'text'));
echo $this->Form->input('call_time', array('required'=>false));
echo $this->Form->input('comments', array('required'=>false, 'id'=> 'comments'));
echo $this->Form->input('next_call_date',array('required'=>false,'id'=>'datepicker2','type'=>'text'));
echo $this->Form->input('customers_id', array('label' =>'Customer Name','options'=>$customers, 'label'=>'Customer Name', 'required'=>false));
echo $this->Form->input('employees_id', array('label' =>'Employee name','options'=>$employees, 'label'=>'Employee name', 'required'=>false));
?>
</fieldset>
<?php echo $this->Form->end(__('Submit')); ?>
</div>
I have added an ID for the comments and my style sheet as follows:
//some code
.divm
{
width: 50%;
}
.centerdiv
{
margin: 50px auto;
}
divm.comments{
height: 20px;
width: 20px;
}
//some code
I want to change the size of the text box of comments to a bigger size than the other fields. I have tried to do this by adding the "divm.comments{}" parts in the style sheet adn it doesn't seem to work.Can someone help?
You are using the wrong (in this case invalid) selector. It should just be
#comments {
height: 20px;
}
For information, the syntax you used to trying to select an element with a tag name of divm (no such thing) that has a class name = comments
What you may have been thinking is select input with id = comments inside div with class = divm in which case it should have been .divm #comments (note the space) however it always more performant to select elements with id (they - or at least should be - unique)
You can use # for element IDs. . is for classes. Your new style sheet would be as follows:
.divm
{
width: 50%;
}
.centerdiv
{
margin: 50px auto;
}
#comments
{
height: 20px;
width: 20px;
}
Note: IDs must pertain to only one element so if you want to have multiple comments fields your original css would be correct (apart from the missing . before divm.comments) but you'd have to set comments as the class in php.
In my site template I want to place an image code which re-sizes images with a width larger than 910px down to 910px, but leaves those with a width smaller than 910px. If the image is resized it should offer a show original image option.
I would like to implement something like this http://www.mangareader.net/94-8-3/bleach/chapter-1.html
This is the code I have so far:
HTML:
<img src="http://localhost/manga2anime/upload/Bleach/1/03.png" class="resize">
CSS:
.resize {
max-width: 910px;
max-height : auto;
}
Easiest would be if you also stored the img's width in your database. If that's the case, something like this will do:
<?php
// Connect to DB etc.
$result = mysql_query("SELECT 'img_path', 'width' FROM table");
if(mysql_row_count($result) != 0){
while($row = mysql_fetch_array($result)){
$img = "<img src='" . $row['img_path'] . "'";
if($row['width'] > 910){
$img .= " class='resize'";
// OR
// $img .= " width='910'";
echo "<a onclick='showOriginal()'>Show Original</a>";
}
$img .= " >";
echo $img;
}
}else{
echo "No images found.";
}
?>
If the img is already loaded and your php isn't that handy, you can also adjust it with jQuery:
function adjustImage(){
if($('img#needed_img').width() > 910){
$(this).addClass('resize');
// OR
// $(this).attr('width', '910');
$('#show_original_button').show();
}
}
And just call the above function when the document loads (so not in combination with the jQuery ready function). I dont know what your HTML looks like, so its hard to also come up with a working 'show original' function.. but i think something like a lightbox or modal would be most useful in your case to show the original img, for it wont alter your template and just 'sit on top of it'.