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');
Related
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>
i am trying to add class (.trans) to my newly made clone in jquery. .but its not working.
...
when i am applying class directly to my object then its working perfectly.
What i am trying to do is..
i fetch some images from database to my page.
with foreach loop i displayed those images..
then with the help of jquery clone method i create a clone of particular image when i clicked on it and the clone will displayed
in a different div.
now i want to add a particular class to my newly created clone. but its not working..
(NOTE: when i am applying the same class directly on the fresh object(not clone) that time its working)
only for reference final result should look like this but after making clone.. http://jsfiddle.net/66Bna/293/
here is my code...
<?php
$image = "1.jpg,2.jpg,3.jpg,4.jpg,5.jpg";
$image = explode(",", $image);
?>
<html>
<head>
<link rel="stylesheet" href="../css/jquery.freetrans.css">
<link rel="stylesheet" href="../css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".my_image").click(function(){
$(this).clone().addClass("trans").appendTo(".block");
});
});
</script>
<style>
body{
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
}
.shape{
width: 300px;
height: 250px;
background-color: #B2D237;
color: #123456;
}
#bounds {
position: absolute;
border: 1px solid red;
}
.block{
width:100%;
background:red;
}
</style>
</head>
<body>
<div class="library">
<ul>
<?php
foreach ($image as $key => $img) {
echo "<li class='img_block'><img class='my_image' src='assets/$img'></li>";
}
?>
</ul>
</div>
<div class="block"></div>
<script src="../js/Matrix.js"></script>
<script src="../js/jquery.freetrans.js"></script>
<script>
$(function(){
// do a selector group
$('.trans').freetrans({
x: 50,
y: 50
});
//updating options, chainable
$('#two').freetrans({
x: 200,
y: 100,
angle: 45,
'rot-origin': "50% 100%"
})
.css({border: "1px solid pink"})
var b = $('#two').freetrans('getBounds');
console.log(b, b.xmin, b.ymax, b.center.x);
$('#bounds').css({
top: b.ymin,
left: b.xmin,
width: b.width,
height: b.height
})
})
</script>
</body>
</html>
Ok, look. What is happening is that you're activating the Free Transform plugin in the end of the document and all the plugin does is to take the existing elements with that class and give them the features.
When we add elements and classes dynamically, they're not being taken in account by the plugin because by the time the plugin was being called, the elements didn't exist.
Understood?
So, seeing that I don't have the proper development environment for this, I will suggest some possible solutions:
1) Put this script at the bottom, below the Free Transform plugin declaration
<script>
$(document).ready(function(){
$(".my_image").click(function(){
$(this).clone().addClass("trans").appendTo(".block");
});
});
</script>
2) Initialize the plugin for each added element EDIT: Fixed some logic mistake
<script>
$(document).ready(function(){
$(".my_image").click(function() {
$(this).clone().appendTo(".block").freetrans({
x: 50,
y: 50
});;
});
});
</script>
Just try that for now
Similar questions have been asked before but unfortunately I am still not able to find a solution of my problem.
I want to render a view with its layout and store its response into a variable.
I have an action called pdf as shown below.
public function pdfAction(){
$ids = $this->getParam('id');
$entity = $this->getParam('entity');
$referer = $this->getRequest()->getServer('HTTP_REFERER');
if(empty($ids) || empty($entity)){
$this->_helper->redirector->gotoUrlAndExit($referer);
}
$grid = $this->_exportModel->getExportGrid($ids, $entity);
if(empty($grid->data[0])){
$this->_helper->messenger->error('No user was found for the given id. Please pass the correct parameters and try again.');
$this->_helper->redirector->gotoUrlAndExit($referer);
}
/* I would like to render the view here and get its response below. */
$html = '';
$pdf = new Om_PDF();
$pdf->writeHtmlToPDF($html);
}
This is the pdf view for the above action.
<?php echo $this->render('templates/grid/print-grid.phtml'); ?>
And here's the pdf layout
<?php echo $this->doctype(); ?>
<html moznomarginboxes mozdisallowselectionprint>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" media="all"/>
<style type="text/css">
.container {
margin: 0 auto;
max-width: 1000px;
text-align: center;
margin-top: 30px;
}
#media print {
#page {
size: auto;
margin: 15mm 10mm 15mm 10mm;
}
body {
margin: 0px;
}
.page-break {
display: block;
page-break-before: always;
}
.print-view-table {
float: left;
width: 45% !important;
margin-right: 5%;
}
.print-view-table tr th, .print-view-table tr td {
width: 30%;
}
.print-view-table tr th {
background-color: #e0e0e0 !important;
border: 1px solid #ddd;
-webkit-print-color-adjust: exact;
}
}
</style>
<head>
<?php ?>
</head>
<body>
<div class="container">
<div class="row">
<?php echo $this->layout()->content; ?>
</div>
</div>
</body>
</html>
So far I have tried using render() and partial() methods but none of them worked.
Is there a way using which I can get the out put of the pdf view along with its layout inside the pdfAction() method?
You need to use :
$this->_helper->layout->setLayout('/path/to/your/pdf_layout_script');
in your pdfAction() and after that you can use render() or partial() methods, the corrects layout should be out put
I am trying to get youtube videos to be automatically embedded into a webpage.
The webpage has keywords already passed in from the url: /view.php?id=keywords123
These are used for creating content on a template and I need it to also display a relevant video from youtube.
Is there code that will search youtube and return the embed code or the video id to be embedded?
Cheers in advance!
Check this link from IBM. It is a very old link but I wanted to do something similar earlier and helped me a lot. It has some examples about how you will perform a keyword search and parse the xml response.
Check out Youtube Player API
Youtube Player Demo:
http://code.google.com/apis/youtube/youtube_player_demo.html
Youtube Actionscript player api:
http://code.google.com/apis/youtube/flash_api_reference.html
Youtube Javascript player api:
http://code.google.com/apis/youtube/js_api_reference.html
I use jquery to get the youtube embed url:
var re = /https?:\/\/(?:[0-9A-Z-]+\.)?(?:youtu\.be\/|youtube\.com\S*[^\w\-\s])([\w\-]{11})(?=[^\w\-]|$)(?![?=&+%\w]*(?:['"][^<>]*>|<\/a>))[?=&+%\w-]*/ig;
video_url= text.replace(re,'http://www.youtube.com/embed/$1');
html='<p><iframe width="100%" height="300" src="'+video_url+'" frameborder="0"></iframe></p>';
$("#video_place").append(html);
I would suggest you to use json api, following is the code,cheers.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
alert("");
$("#sc").attr("src","http://gdata.youtube.com/feeds/users/ThePitchUTV/uploads?alt=json-in-script&callback=showMyVideos2");
});
});
function loadVideo(playerUrl, autoplay) {
swfobject.embedSWF(
playerUrl + '&rel=1&border=0&fs=1&autoplay=' +
(autoplay?1:0), 'player', '500', '400', '9.0.0', false,
false, {allowfullscreen: 'true'});
}
function showMyVideos(data) {
var feed = data.feed;
var entries = feed.entry || [];
var html = ['<ul>'];
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var title = entry.title.$t;
html.push('<li>', title, '</li>');
}
html.push('</ul>');
document.getElementById('videos').innerHTML = html.join('');
}
</script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0"
type="text/javascript"></script>
<link href="http://www.google.com/uds/css/gsearch.css"
rel="stylesheet" type="text/css"/>
<script src="http://www.google.com/uds/solutions/videobar/gsvideobar.js"
type="text/javascript"></script>
<link href="http://www.google.com/uds/solutions/videobar/gsvideobar.css"
rel="stylesheet" type="text/css"/>
<style>
pre {
background-color:#FAFAFA;
border:1px solid #BBBBBB;
font-size:9pt;
line-height:125%;
margin:1em 0pt 0pt;
overflow:auto;
padding:0.99em;
}
code, pre {
color:#007000;
font-family:monospace;
}
.titlec {
font-size: small;
}
ul.videos li {
float: left;
width: 10em;
margin-bottom: 1em;
cursor:pointer;
}
ul.videos
{
margin-bottom: 1em;
padding-left : 0em;
margin-left: 0em;
list-style: none;
}
#videoBar {
width : 160px;
margin-right: 5px;
margin-left: 5px;
padding-top : 4px;
padding-right : 4px;
padding-left : 4px;
padding-bottom : 0px;
}
</style>
</head>
<body>
<div id="playerContainer" style="width: 20em; height: 400px; float: left; position:relative">
<object id="player"></object>
</div>
<br>
<div id="videos2" style="width:500px; clear:both;height:300px; overflow:auto;"></div>
<script id="sc"
type="text/javascript"
src="http://gdata.youtube.com/feeds/users/ThePitchUTV/uploads?alt=json-in-script&callback=showMyVideos">
</script>
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