I know there a fixed position for the zoomControl, but they are not enough for where I need to put it.
Can I style it with CSS? Such as top:80px; right:20px;
Yes you can do it with jQuery. If you see the HTML source for the map generated, it can be observed that the various controls the map provides don't have a ID attribute to manipulate them. However we can use the title attribute of each element to modify them as per our need. See this solution where in a click on the map div adds a top:50px to the bar in zoom control -
**DEMO
jQuery-
$("div[title='Click to zoom']").css("top","50px");
});
Similarly you can capture other controls in the map and add css to them as per your need.
One point to note here is that you can't us the $(document).ready() to change the css on page load since the map actually takes time to load and by then the zoom bar isn't in the DOM. So I used a map click event to add the css. You can use other events to manipulate the css of the zoom control or other controls.
Related
How can I go about creating a form which pops up when the user clicks a button on a Jade template? I tried the following in HTML, which works:
http://www.formget.com/how-to-create-pop-up-contact-form-using-javascript/
Now to use this in my Node.js project would I need to create a separate Jade file for the form itself? That is what I tried and then I tried to display the form like this:
function div_show() {
alert("Test");
document.getElementById('abc').style.display = "block";
}
Unfortunately that does not work. What is the recommended approach for creating a pop up form in Jade? I am really confused with Jade and I can't seem to find a good tutorial for this, there are loads for HTML...
Thanks for the help!
Normally for this you would use:document.getElementById('abc').style.visibility="visible";
To hide your table use:document.getElementById('abc').style.visibility="hidden";
When using the 'style' attribute you are using plain css commands. Make sure your default div style settings have it 'hidden', if that is what you want.This display:block;visibility:hidden;' must exist in your default settings for that div style so the DOM has a clear path to what it is controlling. By itself 'display:block;' does not hide or make objects visible, it is mostly about the shape the div creates as a container for objects.
As an option you can use:
document.getElementById('abc').style.display="block";
To hide your table use:document.getElementById('abc').style.display="none";
For this you would set your div style settings to 'display:none;visibility:visible;.
In this case 'display="none"' removes the object from all display layers and could allow other objects to fill in it's space. When it is visible it will push other objects on the same z-index out of the way. If it has a higher z-index, say +100 higher, it will pop-up above the other objects on the page. The 'visibility' attribute only controls the objects visibility, it does not remove it from the display memory. It can still take up space even though it is not visible. The 'opacity' attribute does about the same thing, except it allows you to also make an object as transparent as you like.
Today I read about HTML5's color input and I thought I'd give it a try:
<input type="color" name="background" id="background" value="#ff0000">
When I click the input (in chrome and firefox, on windows), a color picker appears. However, it is positioned in the top left corner of my screen, not above the input.
Is this a known issue and will this be 'fixed' in the future? Is it possible to position the color picker through code? Or is this something that browsers can't do much about and that users have to live with?
The positioning of the input of type color is browser-specific implementation, in the official documentation there is no given rule for user-agents (i.e. browsers) how to position it over the page's element. This makes custom positioning via CSS for example, or JavaScript not possible.
However, there are some other rules (for example, there is always a color picked, and there is no way to set the value to the empty string.)
Keep in mind when using the input of type color, that Internet Explorer and Safari browsers do not support it yet.
One more caveat is that when creating a custom picker control, use 0-size instead of display: none. Otherwise browser will place the picker in the corner (out of the Visual DOM tree).
<input type="color" width="0" height="0" value="#ff0000">
<button onClick="/* logic to show the picker */">Pick a colour</button>
I had this same question. I wanted to create a Theme editor and wanted to do this. Like the VS Code when editing a CSS file.
I figured out some strategies for solving this problem:
Method A using positioned iframe and signalling changes between iframe and parent.
Figure out the absolute screen location where you want your picker to open.
Create a <input type=hidden with an id like signalColor. And monitor this id for changes.
Move a hidden <div with the absolute position and size where you need the color picker.
Place an iframe in the <div with the code to create a colour picker. Also, in the Iframe you will need an input with your initial color.
Set the color of the initial color within the iframe and then show the div.
Use the following post to figure out when to signal the new color or if cancelled.
https://lugolabs.com/articles/how-to-use-a-color-picker-in-javascript
Method B using window.open(…)+ Ajax
Figure out the absolute screen location where you want your picker to open.
Generate a random token file name.
Open a new Window with needed position and size, loading in any into the HTML you will need. Embed in the script the token file name and pass ajax credentials you will be using. Add references to JQuery, etc. Create a loop in the parent DOM to detect when the window is closed.
When the operator clicks on a new selection detect the click and capture the new colour value.
Send an ajax message with the new colour to the host. Saving the value in the token file.
Then close the window which then triggers the parent to use ajax to request the token file.
Here's a hacked solution which worked for me.
After page load ("AfterViewInit" in Angular), I picked all inputs with the type color.
One of them should be the color input I was applying to. For me it was the first one.
Then, I changed its style attribute.
See the code below:
let colorPickerInputs = document.querySelectorAll('input[type=color]');
if (colorPickerInputs)
colorPickerInputs[0].setAttribute('style', 'position: absolute; top: 20px; opacity: 0;');
I have a simple demo page working with video.js and haven't changed a thing with it yet. I would like to have it so that I can hover over it and see a menu appear, much like the way vimeo does with their menu for sharing etc.
I am trying to work out if this should be done on the html / css side of things, or if there is funcationality in video.js itself to add menus. A quick example would be great if there is one online somewhere that I can be linked to.
Thanks in advance
One way would be to use the video.js ready event to modify the DOM.
If you inspect the DOM when the ready event fires from your video.js instance, you'll notice that your video tag has been wrapped with a div, and the id you used has been transferred to that div.
If you have enabled controls, you'll notice that the video element also has sibling elements in your new wrapper div. These are the controls video.js adds.
You can create additional controls, and add those as siblings to the video element (alongside the ones video.js creates).
So, a quick example would look like this (using jQuery, although this could be done without it):
var vimeoMenu = '<ul id="vimeo"><li id="like"></li><li id="later"></li><li id="share"></li></ul>';
var videoId = "example_video";
var playerInstance = videojs(videoID).ready(function(){
// Add elements to DOM
var playerWrapper = $("#" + videoId);
playerWrapper.append(videoMenu);
});
Using CSS, you can position the controls in the top right (like Vimeo). Video.js adds a class to the wrapper element that you can use to show / hide your controls. By default, hide your elements (display, visibility, opacity, etc.). When the class of the instance changes to .vjs-user-active, you can show your elements. Video.js uses a 1 second transition (if you want to match it perfectly).
$('#popupDiv').popup("open");
This programmatically opens a JQueryMobile pop up, but I want to know if it is possible to change or set my popup's settings, such as data-position and data-transition along with my code above. Thanks.
You can do:
$('#popupDiv').popup("open", {positionTo: '#mydiv'});
'origin' is not working for me in version 1.2 though.
see: http://jquerymobile.com/demos/1.2.0/docs/pages/popup/methods.html
Straight from the jQuery Mobile Docs:
Positioning options By default, popups open centered vertically and
horizontally over the thing you clicked (the origin) which is good for
popups used as tooltips or menus. The framework also applies some
basic collision detection rules to ensure that the popup will appear
on-screen so the ultimate position may not always be centered over the
origin.
For situations like a dialog or lightbox where the popup should appear
centered within the window instead of over the origin, add the
data-position-to attribute to the link and specify a value of window.
It's also possible to specify any valid selector as the value of
position-to in addition to origin and window. For example, if you add
data-position-to="#myElement" the popup will be positioned over the
element with the id myElement.
<a href="#positionWindow" data-rel="popup" data-position-to="window" data-transition="slideup">
<div data-role="popup" id="positionWindow">
<p>I am positioned to the window.</p>
</div>
You can add data-transition="slideup" (or the transition of your choice) to the link, as well as other positioning options outlined in the docs link at the top of my answer.
yeah the right way to do this is use event.target like this
$('#popup').off('taphold').on('taphold', function (e) {
$('#popupDiv').popup("open", e.target);
});
incidentally, this code then places a popup if you tap hold the button and a click event is like this would mean a normal click still works
$('#popup').on('tap', function (){
var url = $(this).attr('url');
window.open( url, '_parent');
});
nb: I added "url='google.com'" to the markup and made href='#'
I've read docs about positioning controls on the map(TOP, TOP_LEFT, etc), but Is there any way to make custom position? For example: left: 20px; top: 200px;
I just want to have in top_left corner my logo and zoom control right under logo.
And how to remove pan control in navigation controls? I want to have only zoom control in default style(not minimized).
Thank you.
Although the question is rather old, with almost 3k views it still seems to draw interest - So, here is my solution:
Wrap the controls!
First we have to find the container-element, where Google puts the control. This depends on which controls we want to use on the map. Google doesn't use unique ids for those containers. But all the controls have the class "gmnoprint" in common. So just counting the elements with "gmnoprint" does the job. Say we only want to use the "ZoomControlStyle.SMALL"-control. It's always the last element with "gmnoprint".
Now, we can simply style the element - Right? No. As soon as you zoom or resize the map, Google resets the styling of the controls. Bad luck, but: We can wrap a container around the controls and style this container!
Using jQuery, this is a really simple task:
$('div.gmnoprint').last().parent().wrap('<div id="newPos" />');
We only have to make sure, the control is fully loaded by the time we try to wrap it. It's not totally bulletproof I guess, but using the MapsEventListener "tilesloaded" does a pretty good job:
google.maps.event.addDomListener(map, 'tilesloaded', function(){
// We only want to wrap once!
if($('#newPos').length==0){
$('div.gmnoprint').last().parent().wrap('<div id="newPos" />');
}
});
Check out http://jsfiddle.net/jfPZH/ (not working, see Update Feb 2016)
Of course if you don't like the initial flicker and want a more reliable version you can do all kinds of improvements like fadeIn etc: http://jsfiddle.net/vVLWg/ (not working, see Update Feb 2016)
So, I hope some of you will find this useful - Have fun!
Update: With this method you can position any other control (e.g. the controls of the Drawing Library) as well. You just have to make sure to select the right container! This is a modified example: http://jsfiddle.net/jP65p/1/ (somehow still working)
Update: As of Feb 2016 Google seems to have changed the positioning of the map controls. This does not break my solution. It just needs some adjustment. So here are the updated fiddles:
Simple: http://jsfiddle.net/hbnrqqoz/
Fancy: http://jsfiddle.net/2Luk68w5/
It is extremely simple, just add this to your css file!
div.gmnoprint { padding-top: 50px; }
It will move the control 50px down with no hacks or anything!
You can create a custom control for your logo, and add it to the map to position it. You can't set the location of the control directly beyond the constants, but you can offset the location using padding on your control div.
http://code.google.com/apis/maps/documentation/javascript/controls.html
set
panControl : false,
in the ZoomControlsOptions which you set