Why can't I drag, nor resize my datatable - javascript

In function LoadXml() i create table using google visualisation table api; which i put in a div.Also i have another div which takes the whole page of my browser wih a google map!
I want to drag and resize my div with table and i thiink it should work -but it doesn't.
<html>
<head>
<style>
#wrapper
{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#table
{ position: absolute;
top: 10px;
left: 10px;
width: 150px; height: 150px;
}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=AIzaSyBwQlpVsFgaZ2EjeUSeQiSICP1UwPV9o9c" type="text/javascript"></script>
<script src="http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/src/markermanager.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type="text/javascript">
$(function() {
$( "#table" ).resizable();
});
$(function() { $( "#table" ).draggable(); });
function initialize()
{
if (GBrowserIsCompatible())
{
map = new GMap2(document.getElementById("wrapper"));
map.setCenter(new GLatLng(42.143365, 24.751032), 13);
map.setUIToDefault();
}
}
function loadXMLDoc(l)
{
arrayMyAddresses = [];
intPNum=l;
s=l;
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//alert(xmlhttp.responseText);
var xmlObj = xmlhttp.responseXML;
var textXML = xmlObj.documentElement.firstChild.firstChild.nodeValue;
//parsing data
//create array with name rec to hol our data for the datatable
var rec = new Array();
tblTst = google.visualization.arrayToDataTable(rec);
visual = new google.visualization.Table(document.getElementById('table'));
}
}
// making ajax call to the server
}
</script>
</head>
<body onload= "loadXMLDoc(1),initialize();">
<div id = "wrapper"> </div>
<div id = "table" ></div>
</body>
</html>

Related

boundary limit for draggable css

im having trouble setting boundaries for my draggable i found out that i need to get rid of these
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
the boundaries will work
for my code to work the script above are necesary for the rest of my code if i get rid of them my code will not work at all. i need to find a way to get around this problem
$(function () {
$("div[id='dragx']").draggable({
containment: "#box",
scroll: false
});
});var z = 1; //value to make div overlappable
$('#addText').click(function (e) {
/** Make div draggable **/
$('<div />', {
class: 'ui-widget-content',
appendTo: '.container',
draggable: {
containment: 'parent',
start: function( event, ui ) {
$(this).css('z-index', ++z);
}
}
});
});
$(document).on("dblclick", '.text', function()
{
$(this).hide(); $(this).closest('.item').find('.edit_text').val($(this).text()).show();
});
$(document).on("click", ".edit_text", function()
{
return false;
});
$(document).on("click", function()
{
var editingText = $('.edit_text:visible');
if (editingText.length)
{
editingText.hide();
editingText.closest('.item').find('.text').text($(editingText).val()).show();
}
});
var count = 1;
var selectedDraggable;
ko.bindingHandlers.draggable={
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
$(element).draggable();
$(element).addClass('item' + count);
count++;
$(element).on('click', function () {
selectedDraggable = $(this);
})
}
};
var vm=function(){
var self=this;
self.items=ko.observableArray();
self.textContent = ko.observable('');
self.init=function(){
self.items([]);
}
self.remove=function(item){
console.log(item);
self.items.remove(item);
}
self.addNew = function() {
self.items.push( self.textContent() );
self.textContent('');
}
self.init();
}
ko.applyBindings(new vm());
.item{
width: 200px;
height: 200px;
padding: 0.5em;
background:transparent;
z-index: 1;
cursor: pointer;
background-color: lightpink;
display:block;
}.container {background-color: lightgrey;
width: 500px;
height: 500px;
border: 2px solid;
position: relative;
}
<textarea data-bind="value: textContent" Placeholder="Type text to append" rows="4" cols="21"></textarea>
<button data-bind="click: addNew">Create</button><div id="box" class="container" style="float:left;">
<div data-bind="foreach:items" class="fix_backround">
<div id="dragx" href="#" class="item" data-bind="draggable:true,droppable:true">
<span data-bind="click:$parent.remove">[x]</span><br/><br/>
<center><span class="text" data-bind="text:$data"></span><input class="edit_text"/></center>
</div></div>
</div><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://www.pureexample.com/js/lib/jquery.ui.touch-punch.min.js"></script>
<script src="http://circletype.labwire.ca/js/circletype.js"></script><script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

jQuery Mobile won't load OpenLayers Map

I'm starting with jQueryMobile and wanted to display a map using OpenLayers. However I'm having a weird issue. Here is the almost working code. Sorry I couldn't make a fiddle, however you can test it easily with copy/paste on notepad or whatever.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<style type="text/css">
html ,body {
margin: 0;
padding: 0;
height: 100%;
}
.ui-content {
padding: 0;
}
#pageone, #pageone .ui-content, #basicMap {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<div id="basicMap"></div>
</div>
</div>
<script>
function init() {
map = new OpenLayers.Map("basicMap", {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.ArgParser(),
new OpenLayers.Control.Attribution()
]
});
var mapnik = new OpenLayers.Layer.OSM();
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
var position = new OpenLayers.LonLat(7.55785346031189,50.3625329673905).transform( fromProjection, toProjection);
var zoom = 3;
map.addLayer(mapnik);
map.setCenter(position, zoom );
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
var marker = new OpenLayers.Marker(position);
marker.events.register("click", map , function(e){ alert("click");
});
markers.addMarker(marker);
}
$(document).on("pagecreate","#pageone",init());
</script>
</body>
</html>
This code doesn't show the map.
Now if you take off the following line :
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
You can see that the map is showing.
Any idea on how can I solve this ? because I think it can be solved easily but can't see how.
Thank you.
I knew it was stupid, if it can interest someone , the css should be like :
#pageone, #pageone .ui-content, #basicMap {
width: 100%;
height: 100%;
display : block;
}
And call JS :
$(document).ready(init());
Don't know however why this works.

dock/undock functionality like chrome-dev tool in my chrome extention

I am creating a google chrome extension which will load my web-app i have a map component on it, i want this map component to be attachable/deattachable (when user drag it from its position it will open itself in new window, or when user close map's window it will attach to my main app)
main.js
chrome.app.runtime.onLaunched.addListener(function() {
// Center window on screen.
var screenWidth = screen.availWidth;
var screenHeight = screen.availHeight;
var width = 500;
var height = 300;
chrome.app.window.create('index.html', {
id: "helloWorldID",
outerBounds: {
width: width,
height: height,
left: Math.round((screenWidth-width)/2),
top: Math.round((screenHeight-height)/2)
}
});
chrome.app.window.onClosed.addListener(function(e) {
console.log(e)
});
chrome.app.window.onFullscreened.addListener(function(e) {
console.log(e)
})
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<link href="styles/main.css" rel="stylesheet">
<style type="text/css">
.innermenu {
width: 200px;
height: 200px;
background: #f00;
}
</style>
<script type="text/javascript" src="jquery-2.1.3.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<h1>Main File</h1>
<div id="menu">
<div class="innermenu">MAP</div>
</div>
</body>
</html>
and app.js
var screenWidth = screen.availWidth;
var screenHeight = screen.availHeight;
var width = 500;
var height = 300;
var id = 1;
$(document).ready(function(){
$("#menu").sortable({
out: function( event, ui ) {
chrome.app.window.create('map.html', {
id: "map" + (id++),
outerBounds: {
width: width,
height: height,
left: Math.round((screenWidth-width)/2),
top: Math.round((screenHeight-height)/2)
}
});
}
});
});
So my question is how to make communication between map.html(which open in seperate window) with index.html(my main app).

Identifying and fixing javascript/prototype/jquery conflicts?

I am experiencing an issue with my scripts to which I cannot find a proper fix. I have this code, which uses glassbox.js and all its extras, which uses to work (it displayed the glassbox appropriately) but since I added JQuery to the file it has stopped working. I am not sure how to rearrange or call the scripts so that it functions again. The commented out lines myBox.whatever are the lines causing the issue specifically:
#model OneEightyWebApp.Models.Centres
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" media="screen" />
<head>
<title></title>
<script src="../../Content/javascripts/prototype.js" type="text/javascript"> </script>
<script src="../../Content/javascripts/scriptaculous/effects.js" type="text/javascript"></script>
<script src="../../Content/javascripts/glassbox/glassbox.js" type="text/javascript"></script>
<script type="text/javascript">
var spaces = #Html.Raw(Json.Encode(ViewData["spaces"]))
function glassLoad() {
path_to_root_dir = "../../Content/";
var myBox = new GlassBox();
myBox.init('myBox', '600px', '400px', 'hidden', '', true, true);
// myBox.apos('300', '300px');
// myBox.appear();
alert("clicked");
}
</script>
<script src="../../Content/javascripts/prototype.js"> </script>
<script type="text/javascript">
document.observe('dom:loaded', function () {
$$("body")[0].on('click', ".class1", function () {
var myBox = document.getElementById("myBox");
myBox.style.display = "block";
glassLoad();
});
});
</script>
<script src="../../Content/jquery.js"></script>
<script type="text/javascript">
jQuery(function () {
var array = [];
jQuery("#centres").change(function () {
var selectedCentre = $("#centres option:selected").text();
$.getJSON("/Centres/output?centreName=" + selectedCentre, function (results) {
var data = results;
document.getElementById("container2").innerHTML = "";
var div;
for (var i = 0; i < document.getElementById("centres").value; i++) {
div = document.createElement("div");
div.className = "class1";
div.innerHTML = "Shop " + data[i];
div.innerHTML += "<br>";
div.innerHTML += "Floor Space: <b>" + spaces[i] + " m2 </b>";
div.style.width = "100px";
div.style.height = "100px";
div.style.padding = "0px";
div.style.float = "left";
document.getElementById("container2").appendChild(div);
}
});
});
});
</script>
</head>
<body>
<div id="container1" style="width: auto; height: 50px;">
<button style="margin: auto; vertical-align: top; float: left; font-size: 16px;" type="button" onclick="glassLoad();">Generate</button>
#Html.DropDownList("centres", (List<SelectListItem>)ViewData["centres"])
<select id="mySelect"></select>
</div>
<div id="container2" style="margin: 10px; float: left;"></div>
<div id="myBox" style="display: none; width: 600px; height: 400px;">
<div id="exitButton" style="position: absolute; left: 564px; bottom: 173px; z-index: 1001;" title="close">
<a href="javascript:THIS.fade();">
<img id="exitImage" style="border: none;" src="../../Content/javascripts/glassbox/skins/exitButton.png"></a>
</div>
</div>
</body>
You have to put jQuery in noConflict and pass $ into the ready event here:
$.noConflict();
jQuery(function ($) {
var array = [];
... // use $ from now on instead of jQuery
That's one way of doing it, check the docs there are other patterns.

Is there a way to make a preloader for swfs in Javascript or JQuery

Is there a way to make a preloader in Javascript or JQuery so that all the elements in a webpage like the swfs and images load fully before they play and show. I have a preloader in the flash of the swfs, but some times it plays choppy. My code works properly but is it a way to preload the whole page using Javascript or JQuery before the webpage plays or shows the element with the website?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>???</title>
<script type="text/javascript" src="swfobject-1.5.js"></script>
<script language="javascript" type="text/javascript" src="jquery-1.2.6.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
if(readCookie("flashPlayed") == "true"){
Jvid()&&Bg()
}
});
function launchFlash(){
if(readCookie("flashPlayed") != "true"){
var homeflash = new SWFObject("???.swf", "BG", "100%", "100%", "8");
homeflash.addParam("wmode","transparent");
homeflash.write("videoBg");
var homeflash = "Bg";
setTimeout("Bg()");
setTimeout("Jvid()",5000);
setTimeout("removeFlash()",5000);
}
}
function readCookie(cookieName){
var searchName = cookieName + "="
var cookies = document.cookie
var start = cookies.indexOf(cookieName)
if (start == -1){ // cookie not found
return ""
}
start += searchName.length //start of the cookie data
var end = cookies.indexOf(";", start)
if (end == -1){
end = cookies.length
}
return cookies.substring(start, end)
}
function Jvid(){
$("#videos").hide();
}
function Bg(){
$("#test").css({"background":'url("???.jpg")',"background-position":'top center'});
}
function removeFlash(){
$("#videoBg").empty();
$("#videoBg").animate( { top:"-9999px"}, 1 );
window.location.assign("http://???.com")
}
</script>
<style>
#test {
font-family: Geneva,Arial,Helvetica,sans-serif;
font-size: 12px;
height: 100%;
margin: 0;
padding: 0;
text-align: left;
width: 100%;
position:relative;
background:url(???.jpg) top center repeat #000;
}
#videoBg{
position:fixed;
top:-5px;
left:0px;
height:100%;
width:100%;
}
#videos{margin:0 auto 0;
padding:0;
height:301px;
width:205px;
position:absolute;
/*border-style:solid;
border-color:red;*/
top:134px;
left:800px;
*left:645px;
left:645px\0/;
}
</style>
</head>
<body id="test">
<div id="videos">
<script src="swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.wmode = "transparent";
swfobject.embedSWF("???.swf", "videos", "205", "301", "8.0.0", '', flashvars, params);
</script>
</div>
<div id="videoBg"></div>
<script type="text/javascript">
setTimeout("launchFlash()", 7000);
</script>
</body>
It could be done if the flash parts would be yours. This means to make use of External Interface from AS and call JavaScript functions to tell how much is loaded, and ask when to start to play, but it is a non religious way of doing it.

Categories