I have an embedded MC Map (Bluemap) that I have access to, embedded in my main site using an IFrame. Scrolling to zoom when mouse is over the map zooms the map, but ALSO scrolls the parent page simultaneously, which I obviously want to prevent. I have used Dynmap (another MC map plugin) from an external site which worked and only zoomed on mouse over.
Here is my Iframe:
<iframe src="https://bluemap.aternix.com/" title="Bluemap" id="bluemapframe"></iframe>
Here is my live site to demonstrate the current Bluemap Iframe:
https://aternix.com/mc-server
I have tried overflow-behavior: contain and numerous JS scroll and focus targeting scripts to prevent parent document from scrolling when mouse is over the frame but neither of these have worked. I was hoping some simple CSS targeting of the Iframe or even elements within the Iframe (which I have access to as its self hosted) would do the trick but nothing has worked thus far. I currently run vanilla JS.
Related
I'm the webmaster of http://concretetoboggan.uwaterloo.ca and a first-time web designer, so I sort of stumbled my way through CSS. I've been having a peculiar problem.
If you go to the link (for the first time), the page stalls for a noticeable 2-3 seconds on the main slideshow before loading the rest of the page. It's really distracting and seems easily fixable, but I can't fix it.
Here's the Net timeline of the site, as you can see, Firebug shows a mysterious gap.
The sequence of events that the page performs is (supposed to be):
Load jQuery at start of page
Load page
Display the first image of slideshow (the rest of the images are loaded into divs with a 'hidden' class, presumably the browser does this async)
Continue loading page
Remove 'hidden' class on DOM ready
Load jQuery bxSlider on DOM ready
Each of the slideshow slides is composed of a div with an img tag inside and a caption bar sub-div absolutely positioned at bottom:0.
I've tired the following optimizations, which helped slightly-to-not-at-all:
Remove the table that is loaded below the slideshow (seems to speed things up a bit, still stalls)
Reduce the size of the images loaded (speeds things up a bit, still stalls)
Put the img 'src' in a 'dsrc' attribute and then reassign it on DOM ready (still stalls)
Put the images in background: CSS of div (unwanted layout issues)
Oftentimes, the 'stalling' is due to the page not having sufficient information to calculate the layout, because it doesn't know the dimensions of the images until it's loaded them.
If your happen the know the dimensions of your images, you can avoid this particular problem by changing your <img> tags from...
<img src="myimage.jpg"/>
...to...
<img src="myimage.jpg" width="640" height="480"/>
...or whatever they happen to be.
However, there are a zillion other reasons why the page might be stalling.
Update
Another thing that you can sometimes do to speed things up: if you're loading a script with the <script> tag which isn't required to render the page, but is only used to process subsequent user input, you can defer the script loading until after the page has rendered by adding the defer attribute, e.g. change...
<script src="http://someslowsite.com/somescript.js">
...to...
<script src="http://someslowsite.com/somescript.js" defer="defer">
...but if you need the script to render the page, then this won't be possible. If you think the user will be able to load the script from your site faster than a third-party site, then make a copy and host it yourself.
Im looking to create a landing page that emulates DropBox (in wordpress). I was wondering how they achieved the effect of clicking the play button that overlays the background box that then turns into a video?
I see from the source that they are using JW player but again no clue on where to start with this. Are there skins you can buy that allow this? Any ideas to lead me in the right direction are appreciated.
Thanks
Can be done easily with jquery and css. First, absolute position both divs centrally on the page so that when visible one is on top of the other, then set the video div css to "display:none;". Then you can use jquery to show the video and hide the play button on click, something like this:
$(function(){
$('#play-btn').click(function(){
$('#play-btn').hide();
$('#video').show();
});
});
Simply done mi amigo. Bare in mind they don't have to be centered, they just have to be positioned one above the other...
I have 2 div's, one div has swf object & other has tabular data. Both are on same page. I would like to toggle them, if video display table div is hide, and if table then video div will hide.
This is working fine, but when toggle to table div video get started from start. I want to pause the existing video.
So please let me know how can I pause it without restart it.
If you are hiding the div with CSS (display:none;) the SWF file will start rendering as if you are opening the page for the first time or reloading it. First try to use (visibility:hidden;) but you will have to set the position to absolute because this way will preserve div's space on the page.
If this didn't help there is a bridge between javascript in the page and SWF files where you can ask for where the video is playing now before you hide the div, store this on the page, then when you restore the div you can tell SWF to seek to the stored time.
check this as a sample for javascript/AS3 interactions:
http://circlecube.com/2010/12/actionscript-as3-javascript-call-flash-to-and-from-javascript/
I'm developping a card game.
I have an ASP.NET page with some 52 small images (the cards), say 300 Kbytes in total.
When the page loads for the 1st time the effect is ugly: User can see each card being loaded in turn.
Moreover, only some images are to be displayed after page loads.
Hence the big issue:
I can't make the images hidden from ASP.NET since if hidden they are simply NOT rendered within the "dynamically generated" aspx page!
And of course when I use a js function fired from windows.onload event, then the user will see all the images before I can hide them in javascript!
The dirty way would be to create a Div that would be displayed in front of all other objects since I use absolute positioning.
I'm quite sure you all gurus, you have better ideas!...
If all of the images are enclosed in a single element (say, a div) then you can set its CSS to display: none by default so that even during page rendering it won't show to the user. Then, when all of the content is loaded, display it to the user. Something like this:
<style type="text/css">
#imageContent { display: none; }
</style>
<div id="imageContent">
<!-- your images are here -->
</div>
<script type="text/javascript">
// assuming jQuery because, well, come on
$(document).load(function() {
$('#imageContent').show();
});
</script>
Now, this makes no guarantees that it won't take a long time for the images to load, resulting in the user not seeing any of them for a while. And if some of them fail to load then I'm not sure what would happen. I imagine the event will still fire once the DOM gives up on trying to load the failed resources.
Naturally, you'll want to style around all of this so that the transition from no images to all images is a smooth user experience. If it takes a few moments then the user may already be interacting with the page when the images suddenly load and move stuff around (I haven't seen your page, so maybe that's not an issue.)
So you'll want to test something like this one a known slow connection or with known broken images to see how it all behaves.
I have a small idea of how such things oftenly done in different jQuery libraries.
The idea is to pack all the cards in ONE image and show different patrs of the image by setting this image as a background of the div and change offsets.
Google does so, for instance. Take a look:
http://www.google.ru/images/nav_logo83.png
This is the elements used at SERP
I am working on a Joomla 1.5 website and a little self-contained php application, which I want to show within an IFRAME inserted in an article. The template I am using for the website has a dark grey background and the IFRAME shows grey background when loaded in Firefox (I don't quite know why this is so, but I like it like this). However, when the page is loaded in IE, the IFRAME has white background (understandably).
How can I make the IFRAME copy the background color of its parent document also in IE?
Also, I have another unanswered question related to IFRAME usage and Joomla 1.5, which I would like to point your attention to.
If the self-contained application is on the same domain as the article page, you could access the top frame (with the article) through javascript - like this:
document.body.style.backgroundColor = getComputedStyle(window.top.document.body);
Computed style can be get as described in this article.
Your other option is to add a query string parameter for the iframe, like bgcolor= - this is a more widget-like approach, and will make the stand-alone application more configurable. I personally recommend this approach - it will not rely on javascript and it will not flicker if the execution gets slow.