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
Related
I am trying to figure out how to display an image while PHP runs and disappears after.
I grabbed this code from a site, but the image only shows very briefly at the very end of the PHP loading. It doesn't show when the page initially opens and it only seems to run once.
I have read many and many of websites and threads on here, but I can't figure out what is missing in this simple example. Is there a better way to do this? Or is this it and I just need to fix it?
THANK YOU in advance!
<html>
<head>
<title>Home</title>
<style>
/* This only works with JavaScript,
if it's not present, don't show loader */
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(http://smallenvelop.com/wp-content/uploads/2014/08/Preloader_51.gif) center no-repeat #fff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<script>
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");;
});
</script>
</head>
<body>
<div id="loader" class="se-pre-con"></div>
<?php
include 'content/screen.php';
?>
</body>
</html>
SOLVED! I found and modified this AJAX code that worked for exactly what I was looking for (same page load with multiple options on what to load (by links). Thanks for all of the helpful messages directing me on the right path! This community is awesome!
<head>
<title>Demo</title>
<style>
#fade {
display: none;
position:absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #ababab;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .70;
filter: alpha(opacity=80);
}
#modal {
display: none;
position: absolute;
top: 45%;
left: 45%;
width: 64px;
height: 64px;
padding:30px 15px 0px;
border: 3px solid #ababab;
box-shadow:1px 1px 10px #ababab;
border-radius:20px;
background-color: white;
z-index: 1002;
text-align:center;
overflow: auto;
}
</style>
<script>
function openModal() {
document.getElementById('modal').style.display = 'block';
document.getElementById('fade').style.display = 'block';
}
function closeModal() {
document.getElementById('modal').style.display = 'none';
document.getElementById('fade').style.display = 'none';
}
function loadAjax(page) {
document.getElementById('results').innerHTML = '';
openModal();
var xhr = false;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
closeModal();
document.getElementById("results").innerHTML = xhr.responseText;
}
}
xhr.open("GET", "content/"+page+".php", true);
xhr.send(null);
}
}
</script>
</head>
<body>
<div id="content">
Click to load page 1<br/><br/>
Click to load page 2<br/><br/>
<div id="results"><!-- Results are displayed here --></div>
<div id="fade"></div>
<div id="modal">
<img id="loader" src="loading.gif" />
</div>
</div>
</body>
</html>
It has all to do with the output buffering PHP applies.
This Stack Overflow link explains why it doesn't work as expected, a possible way to make it work and why you shouldn't make it work that way.
PHP always (unless specifically told not to) buffers the output before printing it. That means that when you actually print, PHP just stores the output text in the memory. After everything is printed, the contents stored in the memory gets printed and the memory gets flushed. It is not only PHP that does that. Almost all the I/O libraries across many languages and platforms has this feature, which is generally enabled by default.
Here is a relevant link that shows all the possible options to bypass or disable this feature. I personally think that you shouldn't disable it because the image will still need to be loaded and you won't be able to control the latency between PHP loading and image loading. I think in this situation maybe a solution that involved Ajax is more suitable for your needs.
Are you trying to show a loading animation/image for the PHP operation? If yes, then you should definitely do it with Ajax on a separate action.
Edit: sorry about not pasting the link: How to disable output buffering in PHP
Here's how to apply Show image while page is loading to your situation.
Replace your php tag with a div like this:
<div id="main"></div>
Then change your fadeout script like this:
<script>
$(document).ready(function() {
$("#main").load("content/screen.php", function () {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");
});
});
</script>
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');
So I've been working on including google maps in my webpage. I've already created it to work filling up 100% of the screen on its own html page. Now I wanna include the map to be smaller to fit in a in my web page. The include() functions work so on my web page I get the normal header and footer like expected. Only thing wrong is no map appears in the proper div I have set up for. Attatched is the javascript file that works and creates the map and the templated file that includes the header and footer and attempts to create the map.
//Create the function to initiaze the map
function initialize() {
//Map options must contain a center, an id, and a zoom
var mapOptions = {
center: new google.maps.LatLng(34.26, 27.19),
zoom: 2,
mapTypeId: google.maps.MapTypeId.HYBRID,
//Don't want the user to be able to pan or zoom
disableDefaultUI:true
};
//Create a new instance of google maps inserting it into the id map-canvas and the map-options
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
//Create a varaible to hold our coordinates for a marker
var trip1=new google.maps.LatLng(2.00,77.30);
var contentString='This is a sample window that can include clickable links to pictures and styled text for example';
var infowindow=new google.maps.InfoWindow({
content:contentString
});
//Create the google maps marker with the position as the the trip1 variable
var marker = new google.maps.Marker({
position: trip1,
title:'Ecuador',
map:map
});
google.maps.event.addListener(marker,'click',function(){
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Now here's the php files for the website
<?php include('../includes/educateHeader.php');?>
<script type="text/javascript" charset="utf-8" src="map.js"></script>
<div class="bio">
<h1>About Us</h1>
</div>
<div id="map-canvas">
<h1>The Many Journeys of OEC</h1>
</div>
<?php include('../includes/educateFooter.php');?>
Also here's some of the css file in case, I wasn't sure
.bio{
color:white;
margin-top:20px;
margin-bottom:30px;
position:relative;
}
.bio h1{
text-align:center;
}
#map-canvas{
postion:relative;
margin-top:20px;
}
#map-canvas h1{
color:white;
text-align:center;
}
BODY{
margin-left:15%;
margin-right:15%;
background:url("umichBackground.jpg") no-repeat center center fixed;
margin-bottom:0%;
margin-top:0%;
background-size:cover;
-o-background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;
height:100%;
}
HTML{
height:100%;
}
Something like..
#map-canvas {
width: 500px;
height: 500px;
}
?
You just need to put it inside of an element which has the height, width and location you desire. This line of JS below is what is actually putting the map inside a particular element on your page:
JS:
var map = new google.maps.Map(document.getElementById("myElement"), mapOptions);
HTML:
<div id="myElement"></div>
CSS:
#myElement {
width: 300px;
height: 300px;
}
I'm changing the opacity of a class by using the jQuery hover function.
Note : I'm not using the
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>
Here is my code:
<script type="text/javascript">
$(document).ready(function(){
$(".thumbnail_image_related_project .transparent_font").css({'opacity' : '0'});
$(".thumbnail_image_related_project").hover(
function(){
$(this).children(".transparent_font").stop().animate({'opacity' : '0.7'}, 300);
},
function(){
$(this).children(".transparent_font").stop().animate({'opacity' : '0'}, 300);
}
);
});
</script>
This code is working perfectly on a laptop but not on a smartphone.
The problem: When I clicked on the element, the animation is working and I'm going to next page. But, when I going back to the previous page, the opacity of the element isn't initialised.
Does some one know why?
Here is my php code:
<a href="http://192.168.0.11/next-page/" title="blabla">
<div class="thumbnail_image_related_project">
<h2 class="transparent_font">Text and the white background</h2>
<div id="image">
<img width="300" height="173" src="http://192.168.0.11/blabla.jpg"/>
</div>
</div>
</a>
here is my css:
.thumbnail_image_related_project .transparent_font{
line-height: 1.25em;
position: absolute;
top: 0;
left: 0;
color: black;
background-color:white;
width: 100%;
height: 100%;
opacity:0;
}
Are you using jQuery or jQuery Mobile? The reason I ask is that on mobile, it is likely a touchstart event not hover. jQuery Mobile may convert touchstart into hover.
Take a look at this: jQuery hover event on tag on mobile devices.
Hey guys I have a drag and drop function that does not fully work. What I want to do is be able to drag and drop a picture into a div and have that picture pop up in the div. I have a list of 2 pictures right now, so I have the following function echoed for each picture. Both pictures are draggable and droppable, but the first one is the only one that appears in the div, regardless of which picture gets dragged in. I am not sure what is wrong because the jquery function seems to be unique to each picture. If any one has any suggestions I would appreciate it greatly.
while ($row = mysql_fetch_assoc($query)) {
$image=htmlentities($row['image']); //image name
$uniqid=uniqid(); //unique id for jquery functions
$dirname = "usercontent/$user/images/$image";
echo "<img id=\"$uniqid\" src=\"$dirname\" width=\"75\" height=\"75\"/>";
echo "<script>
$(function() {
$(\"#$uniqid\").draggable({ scroll: true, scrollSensitivity: 10, scrollSpeed: 10, revert: true, helper: 'clone', cursorAt: { cursor: 'move', top: 27, left: 27 } });
$(\"#droppable2, #droppable-background , #droppable2-innerer\").droppable({
greedy: true,
activeClass: 'ui-state-hover',
hoverClass: 'ui-state-active',
drop: function(event, ui) {
$(this).addClass('ui-state-highlight').find('> p').html('Dropped!');
$('#droppable-background').css(\"background-image\",\"url($dirname)\");
}
});
});
</script>";
}
Don't use the ID to set up a draggable item, it is best to just use a class you can put on all of them. From the code above it appears that you are using a single ID, maybe that's why only one picture works? And are you setting up 3 drop zones?
I set up a working demo and I added a bunch of comments to help you see how this could be done.
CSS
#draggable { width: 250px; height: 500px; padding: 0.5em; float: left; margin: 10px; background: #ddd; }
#droppable { width: 250px; height: 500px; padding: 0.5em; float: left; margin: 10px; background: #ccc; }
.dragme { background: #999; text-align: center; width: 100px; padding: 5px; }
.fade { opacity: 0.3 }
.ui-state-highlight { border: #333 1px solid; }
HTML
<div class="demo">
<div id="draggable" class="ui-widget-content">
<p>Drag from here</p>
<div class="dragme"><img src="image1.gif"><br><span class="caption">Drag me to my target</span></div>
<div class="dragme"><img src="image2.gif" height="100"><br><span class="caption">Drag me to my target</span></div>
</div>
<div id="droppable">
<p>Drop here</p>
</div>
</div>
Script
$(document).ready(function(){
// set up the draggable items
$(".dragme").draggable({
helper : 'clone', // you will drag a copy of the item around
revert : true, // draggable returns home if released
start: function(e,ui){
$(this).addClass('fade'); // fade out original item while dragging the clone
ui.helper.find('.caption').text("I'm being dragged!"); // message in clone
},
stop: function(e,ui){
$(this).removeClass('fade'); // remove fade if dragged item is released
}
});
$("#droppable").droppable({
drop: function(e, ui) {
$(this).addClass('ui-state-highlight'); // add drop box highlight (border)
ui.draggable.appendTo($(this)).removeClass('fade') // move item to drop box & un-fade
.find('.caption').text("I've been dropped"); // change caption
ui.helper.remove(); // remove clone
}
});
})
Edit: Hiya, if you look at the overview page of the Draggable and Droppable document page, you will see that the plugin defines extra variables (actually they are jQuery objects) for you: "ui.draggable" is the selected draggable element & "ui.helper" is the clone of the object.
I have updated the demo with what you requested.. it should now place the image as the background of the drop box. Here is just the updated portion of the script:
$("#droppable").droppable({
drop: function(e, ui) {
$(this).addClass('ui-state-highlight'); // add drop box highlight (border)
var src = ui.draggable.find('img').attr('src'); // get img URL
$('#droppable')
.css({
backgroundImage : 'url(' + src + ')', // set background image
backgroundPosition : 'center center', // position background image
backgroundRepeat : 'no-repeat' // don't repeat image
});
ui.helper.remove(); // remove clone
}
});