First, I am using Wordpress for this project but I don't think this issue is WP-related.
I am using a WP plugin called Local Market Explorer that inserts an iFrame with a Google map and local amenity information, i.e. restaurants. The iFrame and content is served by Walkscore.com via its API.
I would like to fade the page's container div in using the Scriptaculous Appear effect. This effect requires setting "display: none" for the container div using inline CSS on the page. However, as soon as the iFrame containing the map is faded in, the map contained in the iframe moves outside of the iFrame display. Removing "display: none" or setting "display: inline" returns the iFrame to the correct map display but renders the Appear effect unfunctional.
I suspect the map moved outside the iframe's display boundaries rather than simply not displaying because a horizontal scrollbar appears. When the map is displayed correctly, it has a vertical scrollbar but no horizontal one.
What confuses me is that the Scriptaculous fade works fine as implemented in a tabbed content script called Stereotabs. The tab content fades in without affecting the map display. I note, however, that the Stereotabs code doesn't use inline CSS for the Appear effect. The Stereotabs js code is available via the preceding link. Using Scriptaculous Appear with inline CSS makes the map move regardless of whether Stereotabs is active or not.
My question is: why does setting the display property to 'none' using inline CSS cause Scriptaculous to disturb iFramed Google map contents? All the other iFramed, ummapped contents (i.e. Yelp, Schools, Zillow stats, etc, appears correctly.
The code is below, but I don't know how useful it will be because of the WP-shortcode. Please pardon me for not being able to present complete code...that is one of the many drawbacks and annoyances of working with Wordpress.
<html>
<head>
<script src="http://www.mysite.com/wp-includes/js/prototype.js"></script>
<script src="http://www.mysite.com/wp-includes/js/scriptaculous/scriptaculous.js"></script>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
new Effect.Appear('content-wrap', {delay:1.0});
}
</script>
<div id="content-wrap" style="display: none">
<?php echo do_shortcode('[lme-module module="walk-score" zip="30312"]'); ?>
</div>
</body>
</html>
Thanks for any help.
Van
This issue is experienced on multiple ajax frameworks (I am doing the same with with jquery) on multiple browsers.
I would conclude this is an issue with google maps.
Related
I am experiencing a strange rendering problem with the select2 plugin when the fixed-header class is applied to the body tag. I have manage to replicate the problem with the demo files distributed with the template. I have checked it with versions 1.8.6.2 and 1.8.7.1
To see the problem please navigate to file:////DEVELOPER/HTML_Full_Version/plugins.html click on the turning gears on the top right side of the screen and check the "Fixed Header" checkbox. Then scroll down to "Plugins & Enhancers" widget and try to open (drop-down) any of the select2 combos (the problem appears in both of them either single select or multiple select).
More specific when the drop down box appears it goes over the input element and occupies its space instead going under it. The problem doesn't appear if the drop down box needs to go on top of the input element due to lack of space below it.
Please take a look at the following screenshots demonstrating the problem:
Single select
Multiple select
Please note that the problem doesn't appear on the on-line demo that can be found here http://192.241.236.31/themes/preview/smartadmin/1.8.x/ajax/index.html#ajax/plugins.html which is very strange but indicates that this isn't browser specific (I use Firefox), nevertheless I tried to find what the differences are between the local files and the on-line source but to no avail.
Thank you.
When you initiate plugin select2, set Json parameter {"dropdownParent": object} with the value of the object of another wrapper (not body tag) that has CSS property position:relative. For example, in case with smartadmin template, it can be $('.jarviswidget').
The problem is that body class .fixed-header sets for tag header CSS property position: fixed. Automatically generated HTML code after select2 plugin initialization also has styles position: absolute ..., and it moves select2 tags down because, by default, additional select2 HTML code is generated directly in body tag, exactly before body closed.
.
var parentElement = $(".jarviswidget");
if ($('.select2').length) {
$('.select2').select2({
"dropdownParent": parentElement,
"allowClear": !0,
"width": "100%"
});
}
Is it possible to have a non-scrolling iFrame inside a scrolling div, and have anchor links inside the iFrame work correctly? The anchor links inside the iFrame should scroll to the spot inside the iFrame, I don't need/want them to point to elements on the parent page.
Here is my jsFiddle with a simple example:
http://jsfiddle.net/shopguy/WjmHG/
and the code for it:
<div style="width: 100%; height: 300px; overflow: auto;">
<iframe style="width: 100%; height: 2000px;" src="http://www.hypergurl.com/anchors.html" scrolling="no"></iframe>
</div>
I have no association with that hypergurl.com link used in my example, it was just the first example I could find of a page with an anchor by id/name syntax link in it.
If you load the JSFiddle and click the "Jump to Bottom" link inside the iFrame, it does nothing (testing with FireFox 19.0.2). When testing with various pages it never works in FireFox, in Chrome it sometimes works the first time it is clicked, but then if you scroll up and click again it doesn't work. In IE8 it works (scrolls) most of the time.
Scrolling works correctly all of the time if I let the iFrame itself have the scrollbars (remove scrolling="no"). This isn't a practical solution for me though, as I have content outside of the frame that I want to scroll with it. In my real code I dynamically set the height of the iFrame to fill its content, this way it appears to be more like content on my page.
Additional info as to why I need to do this:
I'm creating a web-based email client and so far there seems to be the least amount of issues if I display the HTML body of emails inside an iframe, vs trying to display inside a table cell or div inside my page. I'd like for these type of links to work. I do have some control over the content, it comes from my server and I can modify it some (but don't want to hack it too much). For example, I already modify all links to open in a new window (but not links that start with #, so that isn't my issue).
I know GMail doesn't use iFrames, but my XFINITY (by Comcast cable) web-based email client does, and they managed to get these to work (but so far haven't figured out what all they are doing).
Check out this post: Jump Link Inside an iFrame
If your iframe has a different domain then you will be unable to use a javascript solution to solve this, but if it is then you can add the target="_parent" attribute to all the anchors within the iframe.
var iframe = document.getElementById('iframeId');
var doc = (iframe.contentDocument)? iframe.contentDocument: iframe.contentWindow.document;
var anchors = doc.getElementsByTagName('a');
for (var i = 0; i < anchors.length; i++)
anchors[i].target = '_parent';
I've recently added code to this library to sort out all the issue with Anchor Links inside an iFrame.
https://github.com/davidjbradshaw/iframe-resizer
It intercepts all requests for in page navigation and scrolls the parent page to the correct position. If it doesn't find the anchor in the iFrame, it bubbles it up to the parent page and looks for it there.
I wonder what could be the better way to simulate double buffering for some possibly complex SVG. I'm reloading often a modified SVG, and I'd like to get rid of the load delay. I was thinking of using two overlapped DIVs and toggle visibility after onLoad. There is some better alternative?
edit
Now I have implemented two SVG instances in DIVs overlapped, with style display toggling (block/none). It almost worked in FF (nice, smooth morphing, just initial display resulted in reduced area), but Chrome refuses to get me the ScreenCTM transform I need for syncing shapes position. I guess those problems (partial area render in FF, no render in Chrome) are related. Now I'm experimenting with visibility:hidden instead.
edit
toggling visibility give acceptable results. Thanks everybody for the help so far.
edit
I've found a problem, that make me here again for an helping hand:
I'm using Boostrap for non SVG related UI, and the toolbar behaves really strange: when I switched visibility on the 2^ DIV (initially hidden), no event arrives to the toolbar. Switching again to the 1^, events are ok.
I found that using position:absolute or position:fixed is the same (for the events problem, of course), and top:0 it's the 'culprit'. Using any value > 0 let the event flow, but the DIV goes invisible. So the intial question make sense: any better method than switch visibility? or a hint on html structure? Currently my HTML looks like
<div class="row-fluid" style="height:800px;background-color:cyan">
<div id="flowchart" style="visibility:visible;width:100%;height:100%"></div>
<div id="flowchart_x" style="visibility:hidden;width:100%;height:100%;position:absolute;top:0"></div>
</div>
I have markup like this on somepage.html:
<div class='someclass' id='hashtag1'>
<h1>somecontent</h1>
</div>
<div class='someclass' id='hashtag2'>
<h1>somecontent</h1>
</div>
<div class='someclass' id='hashtag3'>
<h1>somecontent</h1>
</div>
And links like this on another page (let's call it someotherpage.html):
<a href='somepage.html#hashtag1'>first content div</a>
<a href='somepage.html#hashtag2'>second content div</a>
<a href='somepage.html#hashtag3'>third content div</a>
However when I click on one of these links I don't see the expected behaviour - the page loads as normal but the scrollTop of the window doesn't match these divs. I've tried changing the IDs as they had hyphens in the to start with, this didn't make any difference - I've also tried changing what element the ID is on, i.e changed the <h1> to have the ID, then changed the <h1> to an anchor, but no luck.
When I'm already on the page, if I edit the hasthag and hit enter, it works as expected - changing the scrolltop of the window to the element with the ID of the hashtag without refreshing the page - but it doesn't work on the first hit.
Am I missing something obvious here?
EDIT:
Using FF 9.0.1 on Mac OSX
Turned JS off using web developer toolbar
changing or removing CSS doesn't seem to make any difference
UPDATE:
This works fine if I enable javascript - which is exactly when it doesn't need to work.
I have this as a catch for users with no javascript / disabled js. WTF, firefox?
Given your specific example, it seems to me that the scrollTop only changes when the page is already long enough to require scrolling.
When all the content is in view, the scrollTop position remains at the top of the document however when the page requires some scrolling, the scrollTop scrolls as far as the document can already scroll.
If scrolling to the required ID does not exceed the total possible scroll position, then the element in question will apear at the top of the page, otherwise the document will only scroll to it's maximum (based on its content).
Hashtags don't work with ids. You have to put a tags like this: <a name="foo"></a>. Then you can link to them using go to foo. Same goes for linking between multiple pages.
I am developing a Google Chrome extension.
Extension shows a dialog box (jquery ui, as a div) inside any webpage, in the dialog box user can add some content [HTML content without body, without styles info].
The problem i am facing is, that the styles specified in the webpage are getting applied to the jquery dialog and the content user is adding.
For ex. when i launch my plugin on stackoverflow webpage, all text become center aligned, etc etc.
What is the best way to get rid of parent styles inside a div?
you should look into the reset stylesheets almost every CSS framework comes with. You can take that reset stylesheet and apply all of the reset styles to your specific DIV:
div.YourDiv, div.YourDiv * {
margin:0;
padding:0;
border:0;
...
}
which should reset both YourDiv and all elements below. After that, you can get started w/ styling the sub elements as you see fit.
I've done that using an IFRAME, which basically creates a whole new html document inside a box, without the styles from the "parent" page. The other option is to redefine all the styles in your div, but that's very tedious and ugly.