I'm developing my own map with google API.
This is my start example http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/examples/speed_test_example.html
How can i add Places search box in this map? https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
i'm a beginner :)
Thanks
Eleonora
Please see the JavaScript+HTML Example on exactly that Google-Developer Page.
You have to specify an input box, like
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
and do the JavaScript stuff like
[...]
var input = /** #type {HTMLInputElement} */(
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox(
/** #type {HTMLInputElement} */(input));
[...]
But all of that is listed on https://developers.google.com/maps/documentation/javascript/examples/places-searchbox.
Related
This is my first post here. I am not a developer but have learned a bit about CSS the last few months. I have a basic Mediawiki site which has raw HTML enabled on the site which is a secure site and only a very limited number of users with edit privilege's.
I am trying to make it so that when a user clicks the "Submit" button on the HTML form for the cascading dropdown, it will take them to a specific section on a page, based on what they have chosen in all the drop down boxes. I have used the w3schools site to borrow some code snippets.
Here is my form:
<html>
<form name="form1" id="form1" action="Front-end#CSS#Backgrounds">
Subjects: <select name="subject" id="subject">
<option value="" selected="selected">Select subject</option>
</select>
<br><br>
Topics: <select name="topic" id="topic">
<option value="" selected="selected">Please select subject first</option>
</select>
<br><br>
Chapters: <select name="chapter" id="chapter">
<option value="" selected="selected">Please select topic first</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</html>
And here is the java script I am using.
var subjectObject = {
"Front-end": {
"HTML": ["Links", "Images", "Tables", "Lists"],
"CSS": ["Borders", "Margins", "Backgrounds", "Float"],
"JavaScript": ["Variables", "Operators", "Functions", "Conditions"]
},
"Back-end": {
"PHP": ["Variables", "Strings", "Arrays"],
"SQL": ["SELECT", "UPDATE", "DELETE"]
}
}
window.onload = function() {
var subjectSel = document.getElementById("subject");
var topicSel = document.getElementById("topic");
var chapterSel = document.getElementById("chapter");
for (var x in subjectObject) {
subjectSel.options[subjectSel.options.length] = new Option(x, x);
}
subjectSel.onchange = function() {
//display correct values
for (var y in subjectObject[this.value]) {
topicSel.options[topicSel.options.length] = new Option(y, y);
}
}
topicSel.onchange = function() {
//display correct values
var z = subjectObject[subjectSel.value][this.value];
for (var i = 0; i < z.length; i++) {
chapterSel.options[chapterSel.options.length] = new Option(z[i], z[i]);
}
}
}
In my form example above I hard coded the action= portion to say Front-end#CSS#Backgrounds
When I click the submit button it launches or takes me to this URL:
https://mysitename.com/myenvironment/index.php/Front-end?subject=Front-end&topic=CSS&chapter=Backgrounds#CSS#Backgrounds
In the example subject = my page name, in this case Front-end, topic = my Heading 1 section, in my case CSS, and chapter = my Heading 2 section, in my case Backgrounds.
But it's not working fully. When I click submit it takes me to the "Front-end" page on my Mediawiki site but it doesn't recognize or do anything with the Heading 1 and Heading 2 parts.
The way this will be used is to allow the user to select the page and section of a page they will be going to. So that in a form using three cascading dropdowns, the user will first pick the subject, which is actually the name of the page on my Mediawiki site, the second drop down will be the Heading 1 section, and the third drop down will be the Heading 2 section which is where I want the user to end up on the page.
The Mediawiki page sort of looks like this:
Page name is "Front-end"
Table of contents is for example:
## CSS ##
### Borders ###
### Margins ###
### Backgrounds ###
### Float ###
I will have the HTML cascading dropdown forms setup with three boxes. In my example, the user picks Front-end -- CSS -- Backgrounds and when they hit submit they go directly to the Heading 2 section on my page for "Backgrounds" Obviously, I need to code it so that whatever combination the user picks I take them to the right page section.
Any ideas on how I can do this? I would like to stick with the simple HTML form and Java Script example above as it is easy for me. Any advice is appreciated! Thanks in advance and sorry for the long post.
GJ231
Well many things to check.. First of all.. https://mysitename.com/myenvironment/index.php/Front-end?subject=Front-end&topic=CSS&chapter=Backgrounds#CSS#Backgrounds
An url can jump to one Anchor. not two. So am I guessing you will need some more JavaScript on checking the Post url and figure out where to go to on the page depending on the Post url.
The content of the page would need to have Anchor links inside them, something like #-- e.g. #Front-End-CSS-Backgrounds
Then before you post, you should change the url to something like : https://mysitename.com/myenvironment/index.php/Front-end#Front-End-CSS-Backgrounds
That will bring the person to the right spot.
If you cannot create anchor links on the page, perhaps you can create divs with the same format Id's ? or Something similar. Then have JavaScript jump to the relevant ID based on the url.
As a noob to the JS universe, I had a question pertaining to a click event for a basic Quote Generator program. The idea is that upon clicking the '.generate' button, the content that appears within the 'taskEl' paragraph is deleted and refreshed with the next randomly generated quote. Thank you for any help with this.
<body>
<div class="card">
<button type ="button" class="generate">Generate Quote</button>
</div>
<script>
const quote = document.querySelector('.generate');
const card = document.querySelector('.card');
const myQuotes = ['It was the best of times, it was the worst of times', 'To the victor belong the spoils', 'Float like a butterfly, sting like a bee', 'No man is an island'];
const people = ['Charles Dickens', 'William Marcy', 'Muhammad Ali', 'John Donne'];
quote.addEventListener('click', getQuote);
function getQuote() {
const taskEl = document.createElement('p');
const taskEl2 = document.createElement('p');
let random = Math.floor(Math.random() * myQuotes.length);
taskEl.className = 'outputBox';
taskEl.appendChild(document.createTextNode(myQuotes[random]));
card.appendChild(taskEl);
taskEl2.className = 'sourceBox';
taskEl2.appendChild(document.createTextNode(people[random]));
card.appendChild(taskEl2);
};
getQuote();
</script>
I'd suggest you to place click attribute inside html element, like this:
<button type ="button" class="generate" onclick="getQuote()">Generate Quote</button>
To substitude the contents of a paragraph use innerText.
taskEl.innerText = 'some random quote';
I'm trying to implement the "reset password" functionality in my Meteor app. I have a very simple implementation of it based on this tutorial: Julien's tutorial on gentlenode
There are several examples floating around that use this same basic approach. I did mine almost exactly like Julien's but I used only one template; I use an {{#if}} in my template that displays the 'reset password' form, if my session variable sResetPassword is not falsey. (I don't know how the correct template is supposed to get displayed in Julien's example and it doesn't work for me as it is written -- the template doesn't change.)
Here's the critical piece of code. Two different methods that both work on my local app, but neither one works on my hosted (modulus) app.
/* method one
if (Accounts._resetPasswordToken) {
Session.set('sResetPassword', Accounts._resetPasswordToken);
}
/* method two
Accounts.onResetPasswordLink( function(token) {
Session.set('sResetPassword', token);
});
On my deployed version (Modulus), the link opens up my app and just goes straight to the start screen. When I check the value of my sResetPassword session var, it's undefined, so somehow the value of the token never gets put into the var.
While we're on the subject, does anyone know how you are supposed to get the correct template to load when you use a separate template for the reset password form?
Here is how it works for us. Code:
var token, done;
Accounts.onResetPasswordLink(function (t, d)
{
token = t;
done = d;
setTimeout(()=>Router.go("reset_password"), 0);
});
Template["reset_password"].events({
"click #resetBtn": function (event:Event, instance:Blaze.TemplateInstance)
{
var password1: string = instance.$("#input_password1").val();
var password2: string = instance.$("#input_password2").val();
console.log(password1, password2);
if (password1 != password2)
{
return;
}
Accounts.resetPassword(token, password1, ()=>
{
done();
Router.go("somewhere");
});
}
});
Template:
<template name="reset_password">
<form data-parsley-validate>
<div class="input-field">
<input id="input_password1" type="password" class="validate" data-parsley-trigger="keyup" data-parsley-minlength="6" data-parsley-minlength-message = "Please provide a password that is at least a 6 characters long." required>
<label for="input_password1">New Password</label>
</div>
<div class="input-field">
<input id="input_password2" type="password" class="validate" data-parsley-trigger="keyup" data-parsley-minlength="6" data-parsley-minlength-message = "Please provide a password that is at least a 6 characters long." required>
<label for="input_password2">Again</label>
</div>
<button id="resetBtn" class="waves-effect btn">Reset Password</button>
</form>
OK, for whatever reason, replacing iron-router with flow-router fixed this issue for me. I created a new app with only the login and reset password functionality and it worked fine. I added iron-router and again it worked, but only dev mode. When I ran it in production mode, the problem returned. Replaced iron-router with flow-router (in both the test app and my full app) and now the problem is gone. The email link works as expected in both modes.
I have a Meteor application where I want to describe a "site" and a number of "ios" (input/outputs) for each site. The site is described by the first 3 fields and stored in a collection named sites. The ios are entered below that, and are stored in a collection named ios. The idea is each site may have an arbitrary number of ios. I would like to be able to edit any field for the site or any of the ios, click save, and have everything saved at once. Because the number of ios will be limited to say 5 or so by physical circumstances, I think this will be a better user experience than having a separate edit page for ios. However, I can't figure out how to save the ios when the site form is saved. How could this be implemented?
Here is an image of what the form looks like:
https://app.box.com/s/rqjj9lb49twcitwo7rmdy6k9ta0vuztv
Assuming a structure like this:
<template name="form">
<form name="form">
<input type="text" name="foo" />
<input type="text" name="bar" />
<button type="submit">Submit Form</button>
</form>
</template>
Some code like this will add your different elements to different collections:
Template.form.events({
'submit form[name="form"]': function(e) {
var foo, bar, fooInsert, barInsert;
e.preventDefault();
foo = $(e.target).find('[name="foo"]').val();
bar = $(e.target).find('[name="bar"]').val();
fooInsert = {
thing: foo
}
barInsert = {
thing: bar
}
fooInsert._id = Collection1.insert(fooInsert); // Insert foo into Collection1
barInsert._id = Collection2.insert(barInsert); // Insert bar into a different collection, Collection2
}
});
It would help if you did show some code you're working with so we can make our answers better :)
I want to automatically add
class="highslide" onclick="return hs.expand(this,config1)"
to every image I add to a post or page so that I have
<a class="highslide" onclick="return hs.expand(this,config1)" href="http://mysite.net/wp-content/uploads/2013/11/image.jpg" target="_blank"><img class="alignleft wp-image-659" alt="" src="mysite.net/wp-content/uploads/2013/11/image.jpg" width="108" height="68" /></a>
I have looked for hrs and have found nothing that will do this, does anyone know of a plugin or a code snippet that will do this
Thanks
I created a little snipped for you.
/**
* Function customizes a HTML code to be inserted when inserting a media file through "Add media" button
* #param string $insert an original HTML code to be modified
* #return string
*/
function custom_edit_media_insert($insert)
{
//check, whether you are inserting an image wrapped in anchor
if(preg_match('/^(<a).*(<img).*(<\/a>$)/', $insert))
$insert = str_replace('<a', '<a class="highslide" onclick="return hs.expand(this,config1)"', $insert);
return $insert;
}
add_filter('media_send_to_editor', 'custom_edit_media_insert');
However, I strongly engourage you to use external javascript for such purposes.
EDIT:
By your approach, giving every element onclick… code you are creating useless code. In another words, in mordern world amongst developers, you should use external javascript <script src="script.js"></script> and your function plate there like (via jQuery e.g.)
$('.parent a').click(function(){
return hs.expand($(this),config1);
});