Let's say I have a form like this where the user write a name and a color for that name:
Name: abc
Color: #ff0000
When the user insert those values to a table, it add this on CSS:
.abc{
background: #ff0000;
color: #fff;
}
Is it possible to do what I mentioned above with only PHP and CSS or do i need any other language?
You can do it with JavaScript:
<!DOCTYPE html>
<html>
<head>
<style>
.mycss {background: red;}
</style>
<script>
function changeMyCss(e) {
let l = document.getElementsByClassName('mycss');
for (let i = 0; i < l.length; i++) {
l[i].style.backgroundColor = e.value;
}
}
</script>
</head>
<body>
<p class="mycss">Example text</p>
<input type="color" onchange="changeMyCss(this);"></input>
</body>
</html>
Related
I'm trying to put borders in my code with "float: left" to try to obtain this solution:
But when I put in the CSS the "border" style, I obtain this:
My code and solution:
php code:
<?php
function pinta($n,$m){
$cadena="";
for($i=0;$i<$n;$i++){
for($j=0;$j<$m;$j++){
$x = 0+$i*10;
$y = 0+$j*10;
$cadena.="<div style='background-color:rgb(0,$x,$y); '> </div>";
}
$cadena.="<br/>";
}
return $cadena;
}
?>
<!DOCTYPE HTML>
<!-- start static html -->
<html>
<head>
<title>cursor</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
<script src="script.js"></script>
</head>
<body>
<?php
echo pinta(9,9);
?>
<script>
</script>
</body>
</html>
css code:
div{
width:40px;
float: left;
}
Try this:
div{
width: 40px;
border: 1px solid black;
display: inline-block;
}
Example
So, I'm just playing around with Codeigniter.
I've made 5 square, static.
I have declared those 5 square positions.
But when I delete one of those square (For example: Square 1/ #draggable1), the other square are being sorted.
This is the condition:
I Have 5 Square/ 5 #draggable
Sq1 Sq2 Sq3 Sq4 Sq5
When I delete Sq2, this is what happen:
Sq1 Sq3 Sq4 Sq5
Then I delete Sq4, this is what happen:
Sq1 Sq3 Sq5
All the square being sorted when I delete one of them. All I want to do is when I delete one of those square, the other square doesn't need to sorted. Just the they were. Like this:
Sq1 Sq2 Sq3 Sq4 Sq5
When I delete Sq2, it should be like this:
Sq1 ___ Sq3 Sq4 Sq5 *no Sq2 and there is space between Sq1 and Sq3
This is my View:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="<?php echo base_url("style/css/bootstrap.min.css"); ?>">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<style type='text/css'>
body {
font-family: Arial;
font-size: 14px;
}
a {
color: blue;
text-decoration: none;
font-size: 14px;
}
a:hover {
text-decoration: underline;
}
</style>
<style>
#draggable1 { width: 90px; height: 90px; left:56px; top:35px; opacity:0; }
#draggable2 { width: 90px; height: 90px; left:170px; top:-55px; opacity:0; }
#draggable3 { width: 90px; height: 90px; left:285px; top:-145px; opacity:0; }
#draggable4 { width: 90px; height: 90px; left:398px; top:-235px; opacity:0; }
#draggable5 { width: 90px; height: 90px; left:512px; top:-325px; opacity:0; }
</style>
<script>
$(function() {
$( "#draggable1" ).draggable().delay(100).animate({"opacity": "1"}, 700);
$( "#draggable2" ).draggable().delay(200).animate({"opacity": "1"}, 700);
$( "#draggable3" ).draggable().delay(300).animate({"opacity": "1"}, 700);
$( "#draggable4" ).draggable().delay(400).animate({"opacity": "1"}, 700);
$( "#draggable5" ).draggable().delay(500).animate({"opacity": "1"}, 700);
});
</script>
</head>
<body>
<?php
if(is_array($databuku)){
echo '<ol><br>';
$i = 1;
foreach($databuku as $key){
$judul = '<div id="draggable'.$i++.'" class="ui-widget-content"><center><strong>'.$key->tbl_name.'</strong>
<br> <br>
' .$key->index_no. ' / ' .$key->id. '
<br>
'.anchor('perpustakaan/koreksi_buku/'.$key->id, 'Edit').' |
'.anchor('perpustakaan/konfirm_hapus_buku/'.$key->id, 'Delete').'
</center></div>';
echo $judul;
}
echo '</ol>';
}
?>
</body>
</html>
Now I'm thinking that the easiest way is to store and load the left and top position from CSS in database.
The Question is:
How store and load left and top in the style CSS to/from Database?
For example:
I have left:512px; top:-325px; in my Table Database,
How to load those amount of left and top in my body code?
I don't know why you want the style to be read from the DB, but here is how:
You should see the CodeIngiter Documentation first.
You create a model that loads your data (e.g.: my_model.php):
public function getSize(){
//get the style from the DB
$this->db->where('style', '10');
return $this->db->get('my_table')->row();
}
You load your model in the controller:
public function controllerOne(){
//get the model loaded
$this->load->model('my_model');
//Set your data from the model
$data = array(
'mySize' => $this->my_model->getSize();
);
//Load the view with the data
$this->load->view('my_view', $data);
}
You will now have a variable called mySizein your view that you can read:
print_r($mySize);
Just as a note, I would use a faster an quicker way to load dynamic sizes, which is to get into the application > config > config.php and add new configuration options:
$config['size_left'] = "321px";
$config['size_right'] = "134px";
And then read them in the controller or view by:
$this->config->item('size_left');
I am using css to break the content as required to be printed in fresh pdf page, I want to include the header/footer on each pdf page, I tried with fixed css/ along with margin but that works for first page not the successive page. The footer is getting overlapped with page content..
mypage.php
<?php //call_db
//call_func
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Print Page</title>
<style>
body {
background-color: white;
color: black;
font-size: small;
font-family: sans-serif, helvetica, tahoma, arial;
margin: 20%;
}
.page-break {
display:block;
page-break-before:always;
}
#media screen {
div.divFooter {
display: none;
}
div.divHeader {
display: none;
}
}
#media print {
div.divFooter {
position: fixed;
bottom: 0;
}
div.divHeader {
position: fixed;
top: 0;
}
}
</style>
<script type="text/javascript" src="jquery.js" > </script>
<script type="text/javascript">
$(document).ready(function(){
window.print();
});
</script>
</head>
<body>
//call sql query for content // A collection of 200 lists
<div class="divHeader"> <h1 align="center" style="font-size:36px;"> THE GAME OF THORNES</h1> </div>
<h1>Sean's CSS Print vs. Screen Example</h1>
<h2>Lesson 1</h2>
<p>This is my first Page in the document.</p>
<div class="page-break"></div>
<h2>Lesson 2</h2>
<p>Examples and theory of lesson2</p>
<div class="page-break"></div>
<h2>Lesson 3</h2>
<p>Examples and theory of lesson2</p>
<div class="divFooter">UNCLASSIFIED </div>
</body>
</html>
** I am adding PHP tag as if you have any other better way to print the content from db, please suggest.
I think this is duplicate of this Convert HTML + CSS to PDF with PHP? ,
you must use your pdf convertor library to add header and footer to pdf.
I'm used http://www.tcpdf.org/ in my project. you can use it too.
I am no beginner with HTML and CSS... but I am with PHP. I have a very tiny dynamically generated PHP page that creates a table and fills it with numbers. The CSS is working on random items, very weirdly and I'm not sure what is going on. The <body> tag CSS is not working at all. Not one property is being affected by it. The table.temps css is not working either, but if I remove it, then the <th> tag looses its styling. This is for a homework assignment and I know it's an easy fix, I've just been having the worst time with CSS and PHP lately.
It's all one page, and its relatively small, so here is the document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Lab 1</title>
<style type="text/css">
<!-- Declare document <body> styles -->
body{
background-color: #9FDBFF;
color: #333;
font-family: Helvetica, sans-serif;
font-size: .8em;
height: 100%;
width: 100%;
}
<!-- Declare document table styles -->
table.temps {
width: 50%;
height: auto;
min-height: 400px;
border: 2px solid black;
color: #333;
}
th {
background: blue;
color: #FFF;
height: 20px;
width: 100px;
}
.colorIt {
background-color: #CCC;
}
</style>
</head>
<body>
<?php
$intTableTotalWidth = 8;
$intTableTotalHeight = 8;
$intCount = 1;
print("<table class='temps'>");
print("<th>Farenheight</th>");
print("<th>Celcius</th>");
for ($intHeight = 0; $intHeight < $intTableTotalHeight; $intHeight++) {
print("<tr>");
for ($intWidth = 0; $intWidth < $intTableTotalWidth; $intWidth++) {
if ($intCount % 2 == 0){
print("<td class='colorIt'>" . $intCount ."</td>");
}
else {
print ("<td>" . $intCount . "</td>");
}
$intCount++;
}
print("</tr>");
}
print("</table>");
?>
</body>
</html>
EDIT: My fault people, I didn't even realize I was using HTML comments in the CSS. It's internal CSS so the CSS comments don't change color in the HTML document which was throwing me off. I fixed the issue. I appreciate your input!
You are using html comments in the style tag. This is not allowed. You should never use html comments in style and script tags.It's not allowed. Remove them and it will all work.
remove these lines
<!-- Declare document <body> styles -->
<!-- Declare document table styles -->
Your <th> tags should be embeded in <tr> tags: <tr><th>col1</th><th>col2</th></tr>.
You are outputing more cells / row than columns defined with <th>. If you want a <th> to contain two columns, you should use <th colspan="2">col1</th>.
much easier sollution: have session_start() at begining of .php file, put all your theme in a array and later, include stylesheet
session_start()
$theme=array("links"=>"#ff0000", "bkg"=>"#00ff00");
$_SESSION["Theme"]=$theme;
...
<link rel="stylesheet" type="text/css" href="default.php">
and your stylesheet look like this:
default.php
<?php session_start();
if (isset($_SESSION["Theme"])) {
extract($_SESSION["Theme"]);
header("Content-type: text/css");
} else {
// this part is for proper coloring the file, editor will see <style>
// but when loaded from main file <style> will be discarded
?>
<style>
<?php } ?>
a {
color:<?=$links?>;
}
body {
background-color: <?=$bkg?>;
}
I have been learning to use a slideshow code I saw on a website somewhere. Although I have managed to get it working with the images showing well, but I can't figure out how to show the image name in another table alongside the images when the slide changes.
I have provided the code here. so I need your help. What I'm looking for s that whenever the slideshow changes with another picture, I want the picture name displayed next to it.
Thanks for your asisstance.
Update - Here's the updated code based on Gilly3's suggestion, but I'm still confused on how to get the name displayed
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>JQuery Cycle Plugin - Pager Demo with Prev/Next Controls</title>
<link rel="stylesheet" type="text/css" media="screen" href="../jq.css" />
<link rel="stylesheet" type="text/css" media="screen" href="cycle.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<style type="text/css">
#main { margin: 20px }
#nav { margin: 10px; position: relative }
#nav li { float: left; list-style: none}
#nav a { margin: 5px; padding: 3px 5px; border: 1px solid #ccc; background: #fc0; text-decoration: none }
#nav li.activeSlide a { background: #faa; color: black }
#nav a:focus { outline: none; }
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#slideshow').cycle({
prev: '.prev', // Setup prev links
next: '.next', // Setup next links
pager: '.nav', // Setup pager navs
before: function () {
$("#name").text(this.alt);
}
});
});
</script>
<style type="text/css">
#left, #slideshow, #right { float: left; width: 200px; }
</style>
</head>
<body>
<!-- left nav bar -->
<div id="left">
<span class="prev">Prev</span>
<span class="next">Next</span>
<ul class="nav"></ul>
</div>
<!-- slideshow -->
<div id="slideshow">
<?php
mysql_connect("localhost", "root", "")or die("cannot connect");
mysql_select_db($db_name)or die("cannot select DB");
$data = mysql_query("SELECT * FROM people") or die(mysql_error());
while($info = mysql_fetch_array( $data )){
echo "<img src=\"http://localhost:8080/about/images/".$info['photo'] . "\" alt=\"".$info['name'] ."\"/>";
}
?>
</div>
<div id="name">
HELP ME PRINT THE NAME HERE
</div>
<!-- right nav bar -->
<div id="right">
<span class="prev">Prev</span>
<span class="next">Next</span>
<ul class="nav"></ul>
</div>
</div>
</body>
</html>
Use either of the before or after events, depending on when you want the name to change.
$('#slideshow').cycle({
prev: '.prev',
next: '.next',
pager: '.nav',
before: function () {
$("#name").text(this.alt);
}
});
You'll need to populate alt with the name in your php. If you don't want to add a tooltip, also add title="".
echo "<img src=\"http://localhost:8080/people/uploads/".$info['pic'] . "\" alt=\"".$info['name'] . "\" title=\"\" />";
Here is what I think should work:
Add a 'data-name' attribute to each image. Something like:
echo "<img src='http://localhost:8080/people/uploads/".$info['pic']."' data-name='".$info['name']."'/>";
In the jquery.cycle plugin set an option for the 'onPrevNextEvent'. Probably something like:
$('#slideshow').cycle({
prev: '.prev',
next: '.next',
pager: '.nav',
onPrevNextEvent: function(isNext, zeroBasedSlideIndex, slideElement){
var name = slideElement.data('name');
$("#name").html(name);
}
});
Hope that helps.
Bob