I have a web-page that contains a hidden <div> using display: none; and I have a button on the page, that when clicked will change the visibility of the <div>, and overlay it on top of everything else (because it has a z-index set).
Within this <div>, I have a Google Map embedded using an iFrame with the Google Map pin dropped on the location I am trying to show to my users.
The problem
Because the Google Maps iFrame is loading on the page load and while the <div> is hidden, it means that when the <div> is shown the Google Map is not aligned properly (the pin and central location are now in the top left hand corner)
The solution I am looking for
I know that some people are probably going to tell me ways in which I "should" recode my entire page. What I am actually looking for is some sort of onClick function I can set that will reload the iFrame so that the map is properly centered.
Things to know
This iframe has a Google Maps page as its src. i.e. a URL rather than a link to a file in my site.
Any help would be greatly appreciated! A lot of code I have looked at searching the net seems to work at refreshing a specific file that is referenced rather than an external URL.
Would it work if I embedded the map in another HTML file, and then placed that HTML file as the frame source?
I had this similar issue and solved it by changing the css style of the div through jquery, and changing the place where I put the iframe of google map.
The problem
The jquery code:
<script type="text/javascript">
$(function(){
$("#map_link").click(function(event) {
event.preventDefault();
$("#map").slideToggle();
});
});
</script>
The HTML:
I had the link and the google map iframe loaded inline into a div with a display:none css style. Because a display:none style makes the div width:0 and height:0, the address requested in google map doesn't display properly.
<a id="map_link" href="#">See map.</a>
<div id="map" style="display:none">google_map_iframe_here</div>
The solution
The jquery code
<script type="text/javascript">
$(function() {
$("#map_link").click(function(event) {
event.preventDefault();
$("#map").slideToggle();
$("#map").html('google_map_iframe_here').css('display','block');
});
});
</script>
The HTML: The div where I used to put the map now is empty, because I load the map only when clicking on the link, and at that moment I change the css style from display:none to display:block, so the map shows well.
<a id="map_link" href="#">See map.</a>
<div id="map" style="display:none"></div>
Hope this helps!
Have a good coding day!
I'm no pro, but I removed the onload="initialize()" from the body tag and changed it to onclick="initialize()" in the button that unhides the div. This seems to work now.
I'm not using an iframe (I'm using version 3 of the Google Maps API), but just had the same "not aligned properly" issue due to a 'hidden' div. My fix, instead of using display: none, which removed it from the DOM entirely, I used visibility, and height like so:
.myMapDiv {
visibility: hidden;
height: 0px;
}
I believe what's happening is that because 'visibility: hidden' actually keeps the element in the DOM still, the map is able to render as intended. I've tested it out in FF/Chrome/IE 7-9 and seems to be working so far without issue.
After hours of searching on the Internet and getting no results I decided to try what I put in as my final side note on my question and it worked!
I simply made a second file called map.html and inside the code was literally:
<html>
<iframe> </iframe>
</html>
with obviously the Google Maps source and then in my main page I had the src for the iframe linked to pages/map.html instead of the Google Map link.
instead of hiding the div with display:none, use something like position: absolute; top: -9999px; left: -9999px
then, when you want to show the content for that div, set those properties to position: static; top: auto; left: auto or something like that
You can simply refresh the iframe like this:
var myIframe = jQuery('#myIframe');
myIframe.attr('src',myIframe.attr('src')+'');
I had the same problem, my solution was to set both the div & the iframe to 0px height and then have it changed to the desired height when toggled.
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var ifr = document.getElementById("iframe");
var text = document.getElementById("displayText");
if(ele.style.visibility == "visible") {
ele.style.visibility = "hidden";
ele.style.height = "0px";
ifr.style.height = "0px";
text.innerHTML = "<img src='#' border='0' width='180' height='65'>";
}
else {
ele.style.visibility = "visible";
ele.style.height = "420px";
ifr.style.height = "420px";
text.innerHTML = "<img src='#' border='0' width='180' height='65'>";
}
}
</script>
<div id="mb">
<a id="displayText" href="javascript:toggle();"><img src="#" border="0" width='180' height='65'></a>
</div>
<div id="toggleText" style="visibility: hidden; height: 0px;">
<p><iframe id="iframe" style="height: 0px;" src=#" width="650">
</iframe></div>
<script type="text/javascript">
$(document).ready(function (){$("#showMap").slideUp();})
</script>
<script type="text/javascript">
function showMap()
{
$("#showMap").slideToggle();
}
</script>
Show / Hide Map
<div id="showMap" style="margin-left:15px; width:615px; height:400px;">
<?php require_once "map.php";?>
</div>
There is a solution using both css and jQuery.
First you need a wrapper div without height which will include the iframe.
In this way the iframe will load normally without be visible at all.
Next using jQuery you can display/hide the iframe.
HTML
<div id="map-show">Show Map</div>
<div id="map-hide">Hide Map</div>
<div id="map-wrapper" style="height:0; overflow:hidden;">
<div id="gmap">
<iframe width="850" height="650" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="xxx"></iframe>
</div>
</div>
CSS
.hidden {
display: none;
}
jQuery
$(document).ready(function() {
$('#map-show').on('click',function(){
// Remove class hidden from map - Display map
$('#gmap').removeClass('hidden');
// Set height to map container div - ONLY one time needed
$('#map-wrapper').css('height', 'auto');
});
$('#map-hide').on('click',function(){
// Add class hidden to map - Hide map
$('#gmap').addClass('hidden');
});
});
I have been struggling with something like this as well. Where I initially add a class .hidden which is display: none;. But when I toggle .hidden, the map is not centered. I found that waiting until the map is fully loaded, using the idle event listener before adding the class .hidden solved all my display issues.
google.maps.event.addListenerOnce(map, 'idle', function(){
// do something only the first time the map is loaded
$mapContainer.addClass('hidden');
});
reference:
How can I check whether Google Maps is fully loaded?
You could use visibility hidden and use jQuery to show and hide it.
$('click-button').click(function(){
var visibility = $("hidden-div").css("visibility");
if (visibility == "hidden")
$("hidden-div").css("visibility","visible");
else
$("hidden-div").css("visibility","hidden");
});
Here is a solution that does not require any programming at all!
When getting the embed code, click "customize and preview embedded map", and then just drag the map down and to the right so that the push pin is in the lower right corner and then grab the new embed code.
When the map centers in hidden mode, it will still come up correctly when expanded. (not perfect I know, but if all you really want is for the push pin to show on the map, totally works)
Same issue, easy solution.
css hidden leave a space in html flow. I don't know if a css position outside the screen is well accepted on every device and get a block perfectly hidden.
jquery is nice working with block width and height.
css:
#map {overflow:hidden; float:left;}
html:
show
hide
<div id="map">
<iframe width="100%" src="http://maps.google.com/maps f=q&source=s_q&hl=en&geocode=&ie=UTF8&iwloc=A&output=embed ...>
</div>
javascript:
var w=sames as gmap width;
var h=sames as gmap height;
$(document).ready(function(){
$("#map").width(0);
$("#map").height(0);
$("#btn_show").click(function(){
$("#map").show();
$("#map").width(w);
$("#map").height(h);
});
$("#btn_hide").click(function(){
$("#map").hide();
});
})
I encounted the same problem.
Solution
Using iframe as an external source works.
online demo
http://jsbin.com/nogomi/1
Make sure that iframe element's name attribute is the same as a element's target attribute
Inspired from https://developers.google.com/maps/documentation/javascript/
in CSS:
#googleMap { visibility: hidden; }
Original
beim Klick der die Karte öffnen soll jQuery:
EDIT
jQuery when you click to open the map:
$('#googleMap')
.css('display','none')
.css('visibility','visible')
.fadeIn(500);
});
Related
I'm having to develop a html page on a platform called Unily which doesn't allow me to use any JS or CSS (other than inline). The page is long and I want to use anchors for them to navigate back to the top of the page. This is fine when you click top the first time, but because the url is now #TOP if you scroll down and click on a #top link again, it does nothing.
Is there any way at all without using JS that I can get this to work multiple times?
You can use inline javascript to do this.
<html>
<script type="text/javascript">
function scrollTo(anchor) {
location.hash = anchor;
location.hash = "";
}
</script>
<style>
div a { display: block; min-height: 1000px; background-color: blue;}
</style>
<body>
<div>
<a id="loc1">text</a><br>
</div>
go to Loc 1
</body>
</html>
The above snippet doesn't work when embedded but you can easily copy it to an html file on your computer and run it in your local browser. It works and doesn't even modify the URL so you can avoid ugly #'s in your URL.
I currently have a div with some information in it. See the example below:
<div class="verstuurd" onclick="alert('clicked!');">
<div class="titel"><span>Title</span><img src="imageurl"/></div>
<div class="image"><img src="imageurl"/></div>
<div class="tekst"><p>some text</p></div>
<div class="hover">
VISIBLE TEXT
</div>
<div class="delen">
VISIBLE AFTER HOVER
</div>
</div>
</div>
The :hover function works perfectly and the "delen" part is shown and the "hover" part is hidden. I only got a problem on mobile devices. If I scroll down the page on a mobile device and I touch the div, the hover will be triggered.
The answer I am looking for is; how am I able to use :hover on PC's and some sort of click event on mobile devices? So that I have to click in order to change the content and a second click will trigger the onclick of the div.
As an example of my inspiration see the website.
If you hover an item it will show the heart icons. PC uses this with hover and mobile needs a click to be shown. Unfortunately I can't find the source code which triggers this.
Are you talking about, you want an onClick="theFunctionNameToBeCalled()" fired when a div is touched (specifically on a mobile device?)
if you want that, you can use
$( "#divIdToBeTouced" ).click(function() {
//do something with a function here
});
or you could use plain ol' JavaScript to do the task.
<!DOCTYPE html>
<html>
<head>
<title>Coty's Title</title>
</head>
<body>
<div id="divIdToBeTouched" onmouseover="theFunctionToBeCalled()" onClick="theFunctionToBeCalled()">
I'm a div
</div>
<script>
var i = 0;
function theFunctionToBeCalled(){
i++;
if(i == 2) {
//do what you wanted once the onClick event was fired
alert("i == 2");
//now make sure to reset the flag that was made so it will work next time
i = 0;
}
else {
//change the content
alert("i == 1");
}
//do something interesting here if you want to
}
</script>
</body>
</html>
paste that code on this page http://www.w3schools.com/html/tryit.asp?filename=tryhtml_default? and you can try it out on a browser computer
and try it on a mobile device and it should work
I tested it
Now make the hover event also call this function and it'll cover both evens
Extra info:
I've heard arguments with two possible paths to go from here and some say one way is "dangerous", I'll list the sides below If you wanted to know...
cont'd
the other argument is there needs to be an event listener added instead of a direct function call
This seems more safe. I think because it can help hide the function call its self..? I'm not sure.
Hope this helps
I'm using a combination of html and very basic jQuery in order to make an img that functions like a button so that when the img is clicked, the src of the image (src1) changes to another src (src2, that being the image of the button having been pushed down).
I'm trying to make it so that if that same image (now src2) is clicked, then it changes back to the original src (src1).
I hope that wasn't a headache to understand, and I can clarify if needed.
Here's what I have for code:
<!--Html-->
<body>
<img id="pixelbutton" src="images/pixelbutton.png" onClick="pixelbuttonclick()" />
</body>
/* jQuery */
function pixelbuttonclick() {
var pixelbutton = document.getElementById("pixelbutton");
if (pixelbutton.style.src=="images/pixelbutton.png") {
document.getElementById("pixelbutton").src="images/pixelbutton_press.png";
}
else if (pixelbutton.style.src=="images/pixelbutton_press.png") {
document.getElementById("pixelbutton").src="images/pixelbutton.png";
}
}
I'm a huge noob, so less complicated answers, if possible, are appreciated.
I recommend to place your function in head section for consistency if you haven't.
Your "pixelbutton.style.src" was wrong since the src is an attribute and not in css, but manipulating URL is rather difficult. I agree with Amareswar's answer to use background image in css.
Another way I did this is using the jQuery code:
<script type="text/javascript">
$(document).ready(function(){
$("#pixelbutton").click(function(){
$("#pixelbutton").css({'display':'none'})
$("#pixelbutton2").css({'display':'block'});
})
$("#pixelbutton2").click(function(){
$("#pixelbutton2").css({'display':'none'})
$("#pixelbutton").css({'display':'block'});
})
})
</script>
and modifying your body code:
<img id="pixelbutton" src="images/pixelbutton.png" />
<img id="pixelbutton2" src="images/pixelbutton_press.png" style="display: none;" />
Instead of repalcing URL can use a div with background-image css property and set another class on click of the div with another image as background image
So, here's the problem: I have a quite long page with an iframe in the middle. Now, if an anchor is clicked in the iframe, the entire page is scrolled to the iframe, which is what I want to avoid.
Here's an example: http://jsfiddle.net/ymbV7/1/
Don't scroll down the page, but scroll the iframe until you can see the "Contents" menu, and try any of the links (for example "Features").
I need the external page not to scroll, while the iframe has to correctly scroll to the clicked anchor.
Any ideas?
So you are telling that you want to move to a particular paragraph when clicked on the link which describes the link detail right?
According to what I understand you can do like this.
Click here
Instead of Click here you can write Features, as of what I saw in http://jsfiddle.net/ymbV7/1/
now to link to the place where it should move all you need to do is this:
<h2><a name="exactline">Linking Directly from Features</a></h2>
<p>To override this behaviour, certain standard techniques can be used. In particular, you will need to create named anchors in the body of the text at the point where you want to link to.
</p>
"exactline" is the link name given to the para or heading you what to refer.
It scrolls only the iframe and not the whole Page..
refer this link for more clearance
http://www.thesitewizard.com/html-tutorial/link-to-specific-line-or-paragraph.shtml
I tried and it worked for me
Trying various combinations of setting the frame's location or hash still unfortunately resulted in the parent scrolling.
So this is what I ended up doing since the iframe's content was on the same domain so there wasn't a cross-site issue navigating the frame DOM.
I modified the links in the parent so instead of doing target="myiframe", I added an o'clock function to do the scrolling bypassing the default implementation (which seems to cause the parent to jump to the iframe).
<a onclick="linkFunction(this, event);return false;"...
The link function looks like this:
/// for scrolling iframe without jumping parent page
function linkFunction(atag, event) {
event.preventDefault();
var iframe = document.getElementById('myiframe');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var name = atag.href.split('#')[1]; // get the hash
var anchor = innerDoc.getElementsByName(name)[0]; // find the corresponding anchor tag
// get position of the anchor relative to the current scroll position
var offset = anchor.getBoundingClientRect().top
// jump scroll the iframe content to the anchor
iframe.contentWindow.scrollBy(0, offset)
}
No JQuery and still works properly if javascript disabled (just reverts to the default parent jumping).
Hope this helps someone else.
Maybe it's a bug in chrome, because this issue not happen in the latest IE and Firefox.
It happended when clicked anchor in iframe, and browser try to align the anchor to the top of the window.
I solved this issue use JavaScript（jQuery）：
$('body').on('click', 'a', function(e) {
if($(this).attr('href').startsWith('#')) {
e.preventDefault();
}
});
I hope it can help you & good luck!
Try to put your content into a table like this:
<table cellpadding=0 cellspacing=0 height="100%" width="100%">
<tr>
<td>
Header
</td>
</tr>
<tr>
<td>
<iframe src="http://en.wikipedia.org/wiki/jQuery" height=600 width="90%"></iframe>
</td>
</tr>
<tr>
<td>
Footer
</td>
</tr>
</table>
Refer to http://www.webdeveloper.com/forum/showthread.php?t=212032
I think if you did <a target="name of iframe" href="#name of anchor">Click here</a> it would work because then the link is opening in the iframe and this is possibly why the anchor was making the whole page scroll to the iframe. Hope I helped and hope it works! :)
Yes, you have to watch the links and do it using JQuery.
$(document).on('click', 'A[href^="#"]', function(){
var hash = $(this).attr('href');
var o = $(hash);
if (o.length) {
// move it
$("html,body").stop().animate({ scrollTop: o.offset().top }, 300, 'swing');
if (window.frameElement) {
// it has parent window => stop bubbling (will not change document location)
return false;
}
}
});
When you set an html element to have display: none, the content inside that element (e.g. images and flash) wont be loaded by Firefox until the element is set to be displayed.
But Internet Explorer dont behave like that. It loads everything inside hidden elements from start.
Is there a way to prevent IE from loading such content without using javascript?
Don't insert any content into that element? Only load it using ajax when the user makes is visible.
As my question regarded a solution not using javascript, I'll answer my own question and just say there is no way so far to prevent IE from loading external files that are part of hidden content.
As the other answers suggest it, there are ways to avoid the problem, but not to solve it. So the answer to my specific question is "NO".
Actually if you set the visibility to hidden, ie won't load it.
Here is an example of what ZippyV is talking about (with a twist)... copy and paste the code below into a new file with an HTML extension and run it!
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h1>This is the title</h1>
<p>This is a paragraph</p>
<div id="hidden-content"></div>
<p>Another paragraph</p>
<input type="button" id="add-content" value="Add Hidden Content" />
<script type="text/javascript">
$(document).ready(function() {
$("#add-content").click(
function() {
var info = unescape('%53%68%68%68%2E%2E%2E%20%73%65%63%72%65%74%20%69%6E%66%6F%72%6D%61%74%69%6F%6E');
$("#hidden-content").html(info);
}
);
});
</script>
</body>
</html>
The twist is that the hidden content to be displayed is first escaped (using the Javascript escape() function). Also, you can place the javascript in a separate file!
display: none should be hiding the element contents from ie as well as any other browsers.
Did you close all the tags?
function hide_show_content(el_ID){
//try <element hidden> property NOT IExplorer
try{el_ID.hidden = ((el_ID.hidden) ? false : true);}catch(_e){}
//try style=display:none for IExplorer
try{
if(el_ID.style.display==""){return;}
el_ID.style.display = ((el_ID.style.display=="none") ? "inherit" : "none");
}catch(_e){}
}
<span id="text#1" style="display:none;" hidden>TEXT TO BE HIDDEN or SHOWN laiter.</span>
Click to show TEXT