I have a weird problem here.I'm sure there is an easy solution, but I can't find it. I am trying to access the div with id "map-canvas" that's nested within another div.
This works:
<div id="map-canvas"></div>
<script>
...
map = new google.maps.Map(document.getElementById('map-canvas')
</script>
This does not work:
<div id="someParentDiv">
<div id="map-canvas"></div>
</div>
<script>
...
map = new google.maps.Map(document.getElementById('map-canvas')
</script>
Any help would be appreciated. Also, jQuery will not work here either, for some reason.
I think you can try with this.
map = new google.maps.Map(document.getElementById('someParentDiv').getElementsByTagName('div')[0])
Related
I have a database in firebase and I want to make it public like https://publicdata-transit.firebaseio.com/sf-muni
What I see here they have a prefix "pulicdata", How do I get it?
A publicly accessible read-only dashboard, like the one you're referring to, is only available for apps managed by Firebase themselves. You cannot enable it on your own applications.
This won't do any formatting (you can make it pretty if you want), but this will take your snapshot and just put it up on the screen for anyone to see as long as you have your settings for read as true.
<html>
<head>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
</head>
<body>
<div id='displaySnapshotDiv'></div>
<script>
var myDataRef = new Firebase('https://MY-FIREBASE-NAME-GOES-HERE.firebaseio.com/');
myDataRef.on('value', function(snapshot) {
displaySnapshot(snapshot.val());
});
function displaySnapshot(snapshot) {
$('<div/>').text(JSON.stringify(snapshot)).appendTo($('#displaySnapshotDiv'));
$('#displaySnapshotDiv')[0].scrollTop = $('#displaySnapshotDiv')[0].scrollHeight;
};
</script>
</body>
</html>
If you want it to be a little more readable, you could do something like:
<!-- language: lang-html -->
<html>
<head>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
</head>
<body>
<div id='displaySnapshotDiv'></div>
<script>
var myDataRef = new Firebase('https://MY-FIREBASE-NAME-GOES-HERE.firebaseio.com/');
myDataRef.on('child_added', function(snapshot) {
displaySnapshotNeatly(snapshot.val());
});
function displaySnapshotNeatly(snapshot) {
$('<div/>').text(JSON.stringify(snapshot)).appendTo($('#displaySnapshotDiv'));
};
</script>
</body>
</html>
Here is the second one working in JSFiddle: https://jsfiddle.net/lukeschlangen/rzfn45pz/
And here is the second one with your firebase data (please tell me the security settings for writing are set to something other than true?): https://jsfiddle.net/lukeschlangen/rzfn45pz/2/
It seems like you might want to do some formatting, but this is displaying all of the data.
The data can be available public if you change your database rules to true or use the auth token for authentication. But since you do not want to authenticate access, all you simply need to do is Make you access rules public
for more information check out: https://firebase.google.com/docs/reference/rest/database/
enter image description here
I am trying to use swipe events to obtain iphone like toggle switch. i want to handle swipemove and swipeend events. For example:
<div class="xyz" {on swipemove {fn:"swipemoveHandler"} /}> </div>
is working as expected while,
<div class="xyz" {on swipeend {fn:"swipeendHandler"} /}> </div>
is throwing error "The event type: 'swipeend' is an invalid event type."
I am using AT1.3.7 and any help in this regard is greatly helpful.
Thanks in Advance
You can use 'swipe' event of Aria templates which is triggered after a swipe is completed.
Please refer to sample below. This was included in AT 1.3.4
swipeHandler : function (event) {
event.preventDefault(true);
document.getElementById("touchMe").style.visibility = "hidden";
document.getElementById("swipeDirection").innerHTML = event.direction;
document.getElementById("swipeDistance").innerHTML = event.distance;
document.getElementById("swipeLength").innerHTML = event.duration;
document.getElementById("swipeStartX").innerHTML = event.startX;
document.getElementById("swipeStartY").innerHTML = event.startY;
document.getElementById("swipeEndX").innerHTML = event.endX;
document.getElementById("swipeEndY").innerHTML = event.endY;
return false;
}
Below you can see how event can be attached to an element
<div id="touchboard"
{on swipe {
fn : this.swipeHandler,
scope : this
}/}
>
<!-- your content -->
</div>
Refer to link for more help http://snippets.ariatemplates.com/samples/github.com/ariatemplates/documentation-code/samples/utils/touch/swipe/
I have a hidden element on my [parent] page:
<div class=output-data style="display:none">
<h1>Testing!</h1>
</div>
And now, I'm trying to get an iFrame embeded on the page to find the .output-data div, assign it's contents to a var, and then append it to itself as the document. So my iFrame markup is literally just this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>
<script>
var outputData;
(function($){
outputData = $(window.parent.document).find('div.output-data').html();
$(document.body).append(outputData);
})(this.jQuery);
</script>
In other words, I'm trying to get my iFrame to assume and display the HTML contents of the .output-data div, but it's not working and I can't seem to figure out why? I can't find anything in my web inspector? Anyone know?
Use the selector context argument:
$('div.output-data',window.parent.document).html();
Define a JS method (GetData) in the parent that returns the content you want.
You can call this method from the iframe through the window.parent property.
function GetData(){
return $(".output-data").html();
}
Ex: from the iframe: var content = window.parent.GetData()
I'm using Ajax to gather HTML from a webserver, which is then used to populate a div within the app. The HTML populates, however the CSS is ignored and whats displayed is a plain HTML output to the screen instead of the JQuery CSS. Thing is, when I manually enter the HTML into the div and then load up the whole thing works great. Any help is greatly appreciated
Ajax call:
<script type="text/javascript" charset="utf-8">
$(document).bind('pageinit', function(){
$.ajax({
url: "http://www.mydomain.com/getDetails.php",
dataType: 'html',
success: function(text_results){
console.log(text_results);
$('.class-items').append(text_results);
}
});
});
</script>
And the div being populated:
<div data-role="content">
<div class="class-items">
</div>
</div>
I think that jQuery on() might help here:
http://api.jquery.com/on/
I have a Google Analytics account and I need to use the new asynchronous snippet in my blogger blog. According to documentation, I should insert GA <script> tag to the bottom of the <head> section.
In my blogger html template, the <body> section ends with this:
</div>
</div>
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<b:include data='blog' name='google-analytics'/>
</body>
So this is the old snippet and should be disabled, yes?
Well, I commented the line <b:include data='blog' name='google-analytics'/> and scrolled up to the <head> section. It ends like this:
#layout .region-inner {
min-width: 0;
width: auto;
}
]]>
</b:template-skin>
</head>
So I inserted the Google Analytics <script> tag just before the </head>. But it doesn't upload and it says that I have an error.
So, how to do it?
Well, the answer to my question is that the error I was getting yesterday has not occurred today, when I made a test one more time. So basically there is no issue at all: either deleting or commenting the old GA snippet should work.