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!
Related
As we all know inline styles are not good practice and they are not compatible with e.g. the Content Security Policy.
This is what I want to achieve without inline styles:
<?php
$spacer_height = 390; // this is a dynamic value from user input could be any integer
?>
<div class="spacer" style="height:<?php echo $spacer_height; ?>"></div>
This is what I want:
HTML:
<?php
$spacer_height = 390; // this is a dynamic value from user input
?>
<div class="spacer spacerheight-<?php echo $spacer_height; ?>" data-height="<?php echo $spacer_height; ?>"></div>
External Stylesheet:
.spacer {
height: spacer_height + "px"; // this line is dummy code
}
Is where a way to achieve this with CSS only. No JavaScript. No Polyfill.
What I have already found is this 5 year old question: CSS values using HTML5 data attribute
However is there a solution meanwhile or is there a CSS solution not using attributes? Is there at least a solution for integers?
Edit: Even a working polyfill may be a welcome answer if there is no other solution.
As you can't do this CSS only (yet, since the attr() function only returns string value), here is a simple script that will do something similar what attr() does, though this parse the data and sets it dynamically using cssText.
Let me know if I got this right
window.addEventListener("load", function() {
var mb = isMobile();
var el = document.querySelectorAll('[data-css]');
for (i = 0; i < el.length; i++) {
var what = el[i].getAttribute('data-css');
if (what) {
what = what.split(',');
el[i].style.cssText = what[0] + ': ' + ((mb) ? what[2] : what[1]) + 'px';
}
}
});
function isMobile() {
//function that check if user is on mobile etc.
return false; // return false for this demo
}
html, body {
margin: 0;
}
div {
background-color: lightgreen;
padding: 10px 0;
height: auto;
box-sizing: border-box;
}
div ~ div {
margin-top: 10px;
}
<div data-css="height,60,30"></div>
<div></div>
<div></div>
<div data-css="height,60,30"></div>
<div></div>
Another option would be to run something server side, where you simply create the CSS rule and class and insert it into CSS file and markup respectively, before sending to the client
You might consider moving the dynamic part from being inline to being referenced in a <style>.
<style>
.spacer {
height:<?php echo $spacer_height; ?>
}
</style>
<?php
$spacer_height = 390; // this is a dynamic value from user input could be any integer
?>
<div class="spacer"></div>
EDIT: I would like to implement it with Jekyll, which (as far as I know) does not have PHP, jQuery, and so on...
I have a simple problem with CSS; it must have a simple solution but I just don't find it.
Suppose one has multiple divs with some classes:
<div class="cat">
<div class="dog">
<div class="bird">
<div class="snake">
...
and in a .css we want to style these 'pet' divs; the style is very similar from class to class (for instance we have some photos cat.jpg, dog.jpg... and want to show them). Can this be achieved by a somewhat symbolic method? Something like
div.pet{
width: 50px;
height: 50px;
background: url("/pictures/pet.jpg") no-repeat 0 0;
...
(but there is no class="pet" nor pet.jpg)
I would use sass:
div {
$list: "cat", "dog", "frog";
// generate classes for list elements
#each $element in $list {
&.#{$element} {
background-image: url('images/#{$element}.jpg');
}
}
}
That's not something you can do with CSS. CSS can only style objects and can't make other changes/additions/deletions of DOM objects.
But it is definitely something you can do with jQuery! If you know that you always have a class name class="cat" that is the same as the file name cat.jpg, you can do something like this:
$("div").each(function(){
var petClass = this.attr('class');
var petImg = petClass + ".jpg";
this.append("<img src='"+petImg+"' ... >");
});
Im not sure what your asking But as far as I understand you want to have some global setting for div elements and change the background image:
https://jsfiddle.net/shtjab2k/
Css
#pets > div
{
width:100px;
height:40px;
border:2px solid black;
float:left;
}
.cat
{
background-image: url("https://i.vimeocdn.com/portrait/58832_300x300.jpg");
}
.bird
{
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/2000px-Solid_blue.svg.png");
}
html
<div id="pets">
<div class="cat "></div>
<div class="dog "></div>
<div class="bird "></div>
<div class="snake "></div>
</div>
The simplest, pure-css way to do this is this:
.dog, .cat, .bird, .snake {
width: 50px;
height: 50px;
background: url("/pictures/pet.jpg") no-repeat 0 0;
}
It doesn't matter that the background we provide doesn't exist, we'll replace it in the css for individual pet types:
.dog {
background-image: url("/pictures/dog.jpg");
}
It seems like you're looking for a way to do this in a single ruleset, which, unfortunately, is not possible. For that, you'd have to look into using Javascript or a CSS superset (see other answers on this post).
Otherwise, you can just write a couple more lines of css and set the background image for each pet type. =P
It isn't possible to add different images sources to the image tags with pure CSS. You may need to use JS, JQuery, PHP , etc.
You may do this using JavaScript/JQuery as follows :
Store all the image names in an array and then run a loop on-load(of page) to get images by using those array element(values).
Using jQuery, you may set img source like this:
$("img:nth-child(i)").attr('src', <new path from array[i th element]>);
The nth-child(i) means ith image.
Using Js, you may do this:
var images = [
'path/to/image1.png',
'path/to/image2.png',
'path/to/image3.png',
'path/to/image4.png',
'path/to/image5.png'
];
function loadImages(imgArr, targetId){
for(var i=0; i< imgArr.length; i++) {
console.log(imgArr[i]);
var img = new Image();
img.src = imgArr[i];
document.getElementById('output').appendChild(img);
}
}
loadImages(images);
You can also invode the loadImage() function from yout button:
<button onclick="loadImages(images)">Start</button>
Refer : JavaScript load Images in an Array
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 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.
I have a php element that I would like to center. At the moment I can only have it either to the right or the left of the page.
<style="text-align: left;"><?php PopupContact(); ?></style>
Is there a simple way of getting this element to sit in the center of the page?
Try this:
<div style="width:300px; margin:auto;"><?php PopupContact(); ?></div>
Where 300px is the width of your popup.
Try setting the text-align to center:
<style="text-align:center;"><?php PopupContact();?></style>
Try this..
You can also use the stylesheet properties like
margin-left:25px; margin-bottom:25px; margin-top:25px; margin-right:25px;
You can change the size of the pixels according to your requirement.
Edit your code exactly for the code which you want to center using:
<center></center>
Edit code which is perhaps with
<?php ?>
As the code in header.php you might need to center only the given code which you want to be centered: Thus giving the exact to use of more <?php codes in the code. Just by centering near exact code by this example:
<center><?php
$code = "code1 to be centered";
?></center>
<?php
$code2 = "code2 which is not centered";
?>
<center><?php
$code3 = "code3 again centered";
?></center>
So perhaps you want to just put into the top of the header.php to be centered with this example:
<center><?php
$code1 "code1 to be centered";
?></center>
<?php
how to add (please wait) on time counter javascript
<script language="javascript">
var timeout,interval
var threshold = <?php global $opt_themes; if($opt_themes['timer_active_']) { ?><?php echo $opt_themes['timer_fake_download']; ?>000<?php } else { ?>3000<?php } ?>;
var secondsleft=threshold;
window.onload = function()
{
startschedule();
}
function startChecking()
{
secondsleft-=1000;
document.querySelector(".div").innerHTML = "<span style=\"padding: 10px 30px;font-size: 40px; display:block;text-align:center;\">" + Math.abs((secondsleft/1000))+" </span>";
if(secondsleft == 0)
{
//document.getElementById("clickme").style.display="";
clearInterval(interval);
document.querySelector(".div").style.display="none";
document.querySelector(".div2").style.display="";
}
}
function startschedule()
{
clearInterval(interval);
secondsleft=threshold;
document.querySelector(".div").innerHTML = "<span style=\"padding: 10px 30px;font-size: 40px; display:block;text-align:center;\"> " + Math.abs((secondsleft/1000))+" </span>";
interval = setInterval(function()
{
startChecking();
},1500)
}
function resetTimer()
{
startschedule();
}
</script>