Ok, Im trying to make a draggable CMS system, now Im stuck on the next problem.
When Im done dragging my 'div' I want to save my new left and top (x and y) variables in my MySQL database using PhP.
I get my left and top variables by the next line of codes:
$(function() {
$( "#3" ).draggable({
stop: function () {
$.post("upload.php", {
left: this.getBoundingClientRect().left,
top: this.getBoundingClientRect().top
})
},
containment: "#containment-wrapper",
scroll: false
});
my upload.php is:
<?
mysql_query("UPDATE nvt SET left='". $_POST['left'] ."'")or die(mysql_error());
mysql_query("UPDATE nvt SET top='". $_POST['top'] ."'")or die(mysql_error());
header("Location: inlogged");
?>
When I'm done dragging my div there is just no reaction?
I think you are missing }); at the end. The code should be :
$(function() {
$( "#3" ).draggable({
stop: function ( event, ui ) {
$.post("upload.php", {
left: parseInt( ui.offset.left ),
top: parseInt( ui.offset.top )
})
},
containment: "#containment-wrapper",
scroll: false
});
}); //see the change
Related
I am working on a codeigniter project which shows a visited path with markers in specific time duration in google map. The map, markers, tooltip, polyline everything works fine in chrome.
But in firefox only one tooltip shows on a marker when the mouse is hovered. Other tooltips dont show up. Then if I click outside the map and hover again on any marker the tooltip shows on that, but not in others. This is same for every marker. And the problem is only in firefox. I get the locations from database. The jsfiddle link is: http://jsfiddle.net/msz08tjx/ Below is the whole code:
<script>
jQuery(document).ready(function(){
$('#frmGPSTag').validationEngine('attach',{
onValidationComplete: function(form, status){
if (status == true){
mapDisplay();
}
}
});
function mapDisplay(){
$.getJSON('<?php echo base_url(); ?>user/gps_tags_json/'+$("#datepicker1").val()+'/'+$("#datepicker2").val(), function(data){
var locations = new Array();
$.each( data, function( key, val ) {
var location = [ parseFloat(val.latitude), parseFloat(val.longitude), val.gps_tag_timestamp];
locations.push(location);
});
if(locations.length > 0)
{
$("#map").css({'height': '600px'});
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker, point, travelCoordinates = new Array();
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < locations.length; i++) {
point = new google.maps.LatLng(locations[i][0], locations[i][1]);
marker = new google.maps.Marker({
position: point,
map: map,
title: locations[i][2]
});
travelCoordinates[i] = point
bounds.extend(marker.position);
}
map.fitBounds(bounds);
if(map.getZoom()> 10){
map.setZoom(10);
}
var travelPath = new google.maps.Polyline({
path: travelCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
travelPath.setMap(map);
}
else
{
$("#map").empty();
$("#map").css({'background-color': '','height': 'auto'});
$("#map").html("<?php echo '<ul class=\"list-group\"><li class=\"list-group-item list-group-item-warning\">'.$this->lang->line('no_record').'</li></ul>'; ?>");
}
});
}
});
</script>
and my datepicker functions are:
<script type="text/javascript">
$(function() {
$( "#datepicker1" ).datepicker({
dateFormat: 'yy-mm-dd',
onClose: function( selectedDate ) {
$( "#datepicker2" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#datepicker2" ).datepicker({
dateFormat: 'yy-mm-dd',
onClose: function( selectedDate ) {
$( "#datepicker1" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
I have read a lot of problems like it in the web. But none of the solutions worked for me. Any help would be greatly appriciated. Thanx in advance.
The jsfiddle link is: http://jsfiddle.net/msz08tjx/
Using just release v3 js doesn't seem fix the issue in firefox.
Also add the following marker option will do...
optimized:false
reference-- Issue 7136: Bug: Multiple marker titles not working in stable (3.17.15) version of API.
It is a problem with the "experimental version". Don't use the experimental version in production, it can break unexpectedly.
Change v=3.exp to v=3 in the include of the API:
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'> </script>
To:
<script src='https://maps.googleapis.com/maps/api/js?v=3&sensor=false'> </script>
working fiddle (at least in the version of Firefox I am running, 31.0)
Since Firefox 39 there is not only an issue with the title tag not showing onmousover, but also the mouseover addListener event is not triggering.
Adding "optimised:false" property to the marker properties solves the problem with the mouseover addListener event too.
I've been scratching my head for a few days on this now. I have a site running a jcarousellite slider on the home page. On another page of the site I want the side nav to be sticky (i.e. be position: relative; whilst scrolling until it reaches the top of the page and then position: fixed; thereafter).
I have the following code being called in:
//jQuery Functions
$(document).ready(function(){
//JCarouselLite
$(function() {
$("#mainSlider").jCarouselLite({
btnNext: "#sliderBtnNext",
btnPrev: "#sliderBtnPrev",
visible: 1,
auto: 6000,
speed: 1000
});
});
//Sticky Side Nav
var stickerTop = parseInt($('#sticker').offset().top);
$(window).scroll(function() {
$("#sticker").css((parseInt($(window).scrollTop()) + parseInt($("#sticker").css('margin-top')) > stickerTop) ? {
position: 'fixed',
top: '0px'
} : {
position: 'relative'
});
});
});
In its current format, the sticky sidenav code is working fine, but jcarousellite is not. If I remove the sticky sidenav code, then jcarousellite works fine.
I'm sure this is going to be something simple like a syntax error but I just cant seem to solve it.
Any help much appreciated.
Use $ as function parameter for document ready
//jQuery Functions
jQuery(document).ready(function($){
//JCarouselLite
$(function() {
$("#mainSlider").jCarouselLite({
btnNext: "#sliderBtnNext",
btnPrev: "#sliderBtnPrev",
visible: 1,
auto: 6000,
speed: 1000
});
});
//Sticky Side Nav
var stickerTop = parseInt($('#sticker').offset().top);
$(window).scroll(function() {
$("#sticker").css((parseInt($(window).scrollTop()) + parseInt($("#sticker").css('margin-top')) > stickerTop) ? {
position: 'fixed',
top: '0px'
} : {
position: 'relative'
});
});
});
I want to display contact info with the link to contact us page on mouse over hyperlink just like stackoverflow (mouse over user name) and gmail (click over user name). The below is what the latest updated code looks like.
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css" />
<script>
$('#open').mouseenter(function() {
$('#dialog_content').dialog('open');
});
$('#dialog_content').mouseleave(function() {
$('#dialog_content').dialog('close');
});
var posX = $('#open').offset().left;
var posY = $('#open').offset().top;
console.log(posX,posY);
$('#dialog_content').dialog({
autoOpen: false,
open: function() {
closedialog = 1;
$(document).bind('click', overlayclickclose);
},
focus: function() {
closedialog = 0;
},
close: function() {
$(document).unbind('click');
},
buttons: {
/*
Ok: function() {
$(this).dialog('close');
}
*/
},
show: {
effect: 'fade',
duration: 800
},
hide: {
effect: 'fade',
duration: 800
},
position: [posX,posY+25],
resizable: false
});
</script>
<style>
.ui-dialog-titlebar {display:none;}
#other_content {width:200px; height:200px;background-color:grey;}
#dialog_content{display:none;}
</style>
<div id="dialog_content">bla bla bla</div>
<div id="open">CONTACT US</div>
The error that i get
Uncaught TypeError: Cannot read property 'left' of undefined
Check this option:
jsfiddle.net/3mxGM/4/
It creates a jQuery modal window with the info inside the div with id dialog_content. You might want dynamic content inside that div from your database or something. Anyway this should work for what you want.
html:
<div id="dialog_content">
Here you can write the info to show up in the modal window.<br /><br />
If you know what AJAX is, could be a good idea to use it to query your database and get the info from there.</div>
Open dialog
jQuery:
$(document).ready(function(){
$('#open').mouseenter(function() {
$('#dialog_content').dialog('open');
});
$('#dialog_content').mouseleave(function() {
$('#dialog_content').dialog('close');
});
var posX = $('#open').offset().left;
var posY = $('#open').offset().top;
$('#dialog_content').dialog({
autoOpen: false,
focus: function() {
closedialog = 0;
},
close: function() {
$(document).unbind('click');
},
buttons: {
/*
Ok: function() {
$(this).dialog('close');
}
*/
},
show: {
effect: 'fade',
duration: 800
},
hide: {
effect: 'fade',
duration: 800
},
position: [posX,posY+25],
resizable: false
});
});
css:
.ui-dialog-titlebar {display:none;}
If you're looking for a much more code-simple popup tooltip, I am enjoying a customized version of this:
http://devseo.co.uk/examples/pure-css-tooltips/#
If this is too fancy for you it was just some css3 transitions on top of this more basic version, explained well here:
http://sixrevisions.com/css/css-only-tooltips/
i have a jquery dialog, which in i have:
$(document).ready(function() {
if( window.location.href.indexOf( '#product' ) != -1 ) {
var productID = window.location.href.split('-');
showDialog(productID[1]);
}
});
function showDialog(productID)
{
$( "#dialog-modal_"+productID ).html( "<iframe src='index.php?act=showProduct&id="+productID+"' width='100%' height='100%' frameborder='0' scrolling='no'></iframe>" );
$( "#dialog-modal_"+productID ).dialog({
width: 790,
height: 590,
modal: true,
open: function(event, ui)
{
}
});
}
it works fine when i open it, but if i close that window and try to re-open it - it does not responding.
thanks!!
Below is a sample of how jQuery UI Dialog code should appear. Remember, you need a way to open the dialog. So create a function that calls showDialog on that modal again. A button, or link would work.
jQuery UI Code
function showDialog(productID)
{
var container = $('#dialog-modal_'+productID).html('<blah blah>');
container.dialog({
autoOpen: false,
modal: true,
width: 790,
height: 590
});
container
.dialog('option', 'title', 'Your Title')
.dialog('option', 'buttons', {
Close: function() {
$(this).dialog('close');
}
})
.dialog('open');
//do open event work here
}
DOM for a Open Button
Open My Modal
jQuery for Open Button
$('a#open').click(function(e) {
e.preventDefault();
showDialog(<your id>);
});
i have to use a jquery function in yii. i have a code like that and add it in view page.
<script type="text/javascript">
jQuery(function() {
jQuery( "#item" ).draggable();
jQuery( "#droppable" ).droppable({
drop: function( event, ui ) {
var $self = jQuery(this);
var dropOffset = $self.offset();
var itemOffset = ui.offset;
var itemRelativePosition = { left: (itemOffset.left - dropOffset.left), top: (itemOffset.top - dropOffset.top) };
console.log(itemRelativePosition);
jQuery('#layout').val( '{ left: '+itemRelativePosition.left+', top: '+itemRelativePosition.top+'}' );
}
});
});
</script>
but i cant know why it does not work.is there any other trick to use this code.
You need to register the jquery code
<?php
// Javascript
Yii::app()->clientScript->registerScript('register_script_name', "
var partner_only = '".CHTML::activeId($model,'partner_only')."';
jQuery(function() {
jQuery( '#item' ).draggable();
jQuery( '#droppable' ).droppable({
drop: function( event, ui ) {
var $self = jQuery(this);
var dropOffset = $self.offset();
var itemOffset = ui.offset;
var itemRelativePosition = {
left: (itemOffset.left - dropOffset.left), top: (itemOffset.top - dropOffset.top)
};
console.log(itemRelativePosition);
jQuery('#layout').val( '{ left: '+itemRelativePosition.left+', top: '+itemRelativePosition.top+'}' );
}
});
});
", CClientScript::POS_READY);
?>
Hope this answers your question
Add next code to your view file:
Yii::app()->getClientScript()->registerScriptFile('//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js');
Yii::app()->getClientScript()->registerScriptFile('//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js');