We have a Here Map inside a flexbox. When a button is added below the map, the map gets resized (as expected) to be smaller, but as a result the map center (center coordinates on the map) shift. Is there a built-in way to ensure that the map center coordinates don't change on resize?
Ie. Before they'd be at 22.2 (lat), 74.7 (long) but after the move be at 22.3, 74.7. (Note: just example numbers for simplicity. Actually lat / lng is more along the lines of 22.22327181024894 74.7043131363445.)
I was planning on adding in some logic that detects if the size changes to save the existing coordinates before adding in the button and then resetting the map center to the previous coordinates, but would rather use something built in if possible to prevent the reload.
Also, not sure where exactly to re-apply the center if we do our own solution.
We are using:
<script src="https://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
Any advice would be appreciated! Thanks!
Upon adding the button and therefore after the container is resized, make sure to call the following instruction:
map.getViewPort().resize();
However make sure that the resize call is triggered after the container is effectively resized
Related
Is it possible to force an element (lets say a div) atop every single other element as well as fullscreen (from video tag/iframe).
At the moment I'm trying with:
position: absolute
z-index: 2147483647
But it doesn't seem to go over fullscreen. (Tested on Chrome - 61.0.3163.100)
Why do I want to do this?
I want to display a kind of Notification I guess over fullscreen, so when they are watching an embed youtube video on the site, I can show them a notification that they normally wont see and might miss when in fullscreen.
It seems this has changed since recent releases of chrome as other SO answers proceed to give the suggestion I tried above and it has worked for them. Seemingly chrome changed something stopping this from working.
Seems to actually be because im trying to do this with a Angular Material component and for some reason something doesnt allow this to occur.
After checking it seems chrome doesn't even change anything to do with z-index in :-webkit-full-screen yes setting z-index on the fullscreen item and/or the div, wont work still.
Minimal, Complete and Verifiable example:
https://jsfiddle.net/ea3rbmo4/
Updated: https://jsfiddle.net/bw2ytwwb/
This one shows you exactly whats wrong, the red div goes in front, but the md-toast fails to.
<html ng-app="app">
<head>
<!-- AngularJS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.js"></script>
<style>
md-toast {
z-index: 2147483647!important;
position: absolute!important;
}
</style>
<!-- Angular Controllers -->
<script>
var app = angular.module('app', ['ngMaterial', 'ngAnimate']);
app.controller('body', ['$scope', '$mdToast', function($scope, $mdToast) {
$mdToast.show(
$mdToast.simple()
.textContent("Test123")
.position('top right')
.hideDelay(999999)
);
}]);
</script>
</head>
<body ng-controller="body" layout="column" layout-align="center center" layout-fill style="background:#22282b">
<video controls="" autoplay="" name="media" type="video/mp4" src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4"></video>
</body>
</html>
<iframe height=468 width=1584 src="//docs.google.com/spreadsheets/d/1hUgiZqpgjqqtpnYY6Q1IeoUYlpXlCRUeARpN3cWX87g/gviz/chartiframe?oid=2131305794" seamless frameborder=0 scrolling=no></iframe>
Even after changing width to 100%, it doesn't make it responsive. I am embedding this graph on WordPress website.
Put div around that iframe (as parent element), and set CSS "transform: scale(0.5)" to that div.
<div style="transform: scale(0.5, 0.5);">
<iframe ...>
</div>
It will resize whole frame, including its content.
I have done a bit of looking around on the web for you and have several solutions. One of the most popular seems to be to use JQuery in order to resize the iFrame correctly.
A link to the script is found here: jQuery Responsive iFrame's
<!-- Activate responsiveness in the "child" page -->
<script src="/js/jquery.responsiveiframe.js"></script>
<script>
var ri = responsiveIframe();
ri.allowResponsiveEmbedding();
</script>
<!-- Corresponding code in the "parent" page -->
<script src="/js/jquery.js"></script>
<script src="/js/jquery.responsiveiframe.js"></script>
<script>
;(function($){
$(function(){
$('#myIframeID').responsiveIframe({ xdomain: '*'});
});
})(jQuery);
</script>
From there just make the iFrame have an ID of myIframeID or simply change the text in the script above to accommodate this.
Should this not work for you I would suggest using my Google Search string to finding other possible solutions: responsive iframe width
Good Luck!
I'm extremely confused and I've been trying to do this for a while. This is just for a simple tumblr theme. I'm trying to make it so viewers can click a link and when it's clicked, the background image of the page switches.
This is the page, eiramanaik.tumblr.com
The background image is shown, and when clicked, I want it to change to this: http://i50.tinypic.com/23lz49h.jpg
I've looked through everything, and even if I understood the coding, I didn't understand how to apply it, as I am very new to html in general.
Please help!
if you want to use jquery is: (first you have to put id into your link as id="link")
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#link').click(function(){
$('#id_background').attr('src','23lz49h.jpg');
});
});
</script>
I have an image that I will use as the button. I need some code that will make the page scroll smoothly down 400px every time the image is clicked.
I think JQuery or Javascript would do the trick, I am not really sure because I do not know them.
It would be even better in fact, if instead of button, I could just have a keyboard shortcut. Just like Google on Google+, "J" and "K" are used to move up and down the posts. This is exactly what I am trying to achieve. Every post in my site will be the same height so that might make it easier to code.
Just bind an animate function to the click event of your image or button and let it animate the scrollTop property with 400.
For example, place this button on your page:
<input type="button" value="Scroll" id="scroll" />
And use this piece of JavaScript:
$('#scroll').click(function() {
$('body').animate({scrollTop: +400}, 1000);
})
Just make sure jQuery is loaded and it will work.
Load jQuery by adding this just before the body end tag:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
And the best way to include the JavaScript snippet is to place the following between the script rule above and the body end tag.
<script type="text/javascript">
$(document).ready(function() {
$('#scroll').click(function() {
$('body').animate({scrollTop: +400}, 1000);
})
});
</script>
How to show loading image when a big image is being loaded?
As an example in Orkut when viewing a photo in user photo album there is a loading image shown over the photo until the Photo is completely loaded.
I need to implement that feature.
My question is how implement that feature?
Is it possible without using JQuery?
Please help.
Wrap your image in a div (or whatever you want) and set it's background image to be an animated gif or whatever loading image you want. When the image finishes loading it will cover up the background image. Easy and can be reused wherever you want.
<div class="loading">
<img src="bigimage.jpg" alt="test" />
</div>
CSS:
.loading{
background:transparent url(loadinggif.gif) center center no-repeat;
}
Here's a basic technique that you can expand upon to do more elaborate stuff with
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
onload = function()
{
// Create an image object. This serves as a pre-loader
var newImg = new Image();
// When the image is given a new source, apply it to a DOM image
// after it has loaded
newImg.onload = function()
{
document.getElementById( 'test' ).src = newImg.src;
}
// Set the source to a really big image
newImg.src = "http://apod.nasa.gov/apod/image/0710/iapetus2_cassini_big.jpg";
}
</script>
</head>
<body>
<img id="test" src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" >
</body>
</html>
Edit: Apparently, this has been deprecated. Nothing to see here, move along.
No JavaScript or CSS is necessary for this. Just use the built-in, but seldom heard-of, lowsrc property for img elements.
<img src="giant-image.jpg" lowsrc="giant-image-lowsrc.gif">
The basic idea is that you create an additional very compressed, possibly black and white version of your normal image. It gets loaded first and when the full resolution image is downloaded, the browser replaces it automatically. The best part is you don't have to do anything.
Check it out here: http://www.htmlcodetutorial.com/images/_IMG_LOWSRC.html
You could use the jQuery Lazy Loading plugin. It allows you to specify a loading image and delays the loading of large images until they are scrolled into view.
Time ago I made something like this for a similar problem:
<script>
function imageLoaded(img) {
document.getElementById('loadingImage').style.visibility='hidden';
img.style.visibility='visible';
}
</script>
...
<img id='loadingImage' src='loading.gif'/>
<img src='bigImage.jpg' style='visibility:hidden;' onload='javascript:imageLoaded(this);'/>
I think this approach has some useful advantages:
The loading image is hidden. Imagine your big image isn't so big as you expected...
You are able to do some extra things in javascript function. In my case, I stretched image width, height or both, depending on its size.