Im havin a big problem.
Im programming a website for a company in germany.
Since there are so many sites on the page i took an iframe in my index.html file instead of using a div tag because this would need a lot more time since i need to write the div stuff on every page.
Every Browser like IE,Chrome,Opera and also Safari shows the website like i want it to be shown.
But Firefox shows the iframe part in a small window in the left upper side of the window.
So you cant see any content or even 100x bigger than normally and in a quite small window.
So do I have to change anything in my code or do i need to add something?
The bigger problem is actually that the man who is able to start the server doesnt want to start it for let the website goin online because that doesnt work on firefox.
He explained the problem to me that way. but my program (mirabyte) shows everything in the right way (ALSO FIREFOX) so what can I do now because I need to let him try every small change i will do. So it would be nice if anyone does know the EXACT answer because he or she already had the problem.
Any ideas?
Thank you so much
Sasse
Make sure that if you have the iframe in any sort of container, that container also has the applicable height attribute. Also make sure that the iframe height is applied to both the HTML and the body tags.
Beyond that, we would have to see the part of your code where you're declaring the iframe to say anything more specific.
Related
Basically, I want to display a screenshot of a website inside an iphone frame. And I also want this to be responsive.
I have a rough idea but wouldn't know the best way of positioning the image, I'd probably be using the 'overflow-y' css property and set it to scroll, and set the height, so that my long image will scroll inside the iphone frame, however my problem is getting the image to be the right size of the iphone. Is this some javascript witchcraft I'm yet to discover? thanks!
P.S. Don't say that 'this has been asked before and link this because none of the examples actually work so I can't understand it, and don't know if they're trying to achieve the same thing.
Would leave this as a comment, but not enough rep.
You should probably just try it out for yourself and then post your code if you're having any issues.
If you really have nowhere to start go to codepen and search for 'iphone'.
So I searched quite some time for an answer to that now, but so far was not able to find any. This is my first time really looking into HTML5 video questions, so please forgive me if my question is totally stupid.
I read quite a few things about this awesome video tag and how it works. However, I only find the info that the controls parameter enables the whole control bar or not, and then it seems to be up to the browser, which controls exactly are shown.
To make even more clear what I am talking about, in Chrome, the full screen Button looks like this:
I found this example here: http://www.w3schools.com/html/html5_video.asp
And as you can (probably) see, the button is there, when you open this site. However, as soon as you click the "Try it yourself" button right below it, the full screen button is not shown anymore, and that is, despite the code seems to be basically the same.
I understand that this is inherent to the browser how it handles it. However, the behaviour is exactly the same in at least Firefox, so I am wondering: What is the logic behind this? Is there any way to "trick" the browser into allowing the fullscreen button?
Some points that I (I think) have already ruled out as the source of the problem:
The actual size of the video being larger than the player
Some CSS tricks like setting the width to a specific value and max-width to 100%
Any ideas?
That is because the video in your second example is inside an iframe, which is quite restrictive as to how you can manipulate the content inside of it.
I imagine adding the allowfullscreen attribute to an iframe would show a different result r.e. video controls.
I am trying to perform a scrolling effect.
On scroll, the next page section should cover the current one.
So the current section is docked to the top of the screen and while the next section arrives the current is progressively covered but doesn't move.
Basically I am trying to reproduce the effect I found on this website:
http://www.squarespace.com/seven/interface
It works only with css (I tried with js disabled)
I've tried to reverse engineer it but I am not successful so far.
If someone had so advices I would greatly appreciate.
Main idea is that every <section> has height and position: relative and 'overflow: hidden'. But every tag inside those sections has position: fixed.
I tried looking at the site with JavaScript turned off and got nothing but a blank screen and a scroll bar (same in Chrome, Firefox, and Safari/iOS). Furthermore, Chrome tells me that all kinds of functions get called as you scroll. Unless there is some serious trickery here, squarespace.com seems to be using JavaScript.
Though you may be able to pull of something like the checkbox-hack to set and/or animate the top of different sections, I don't think the result for the minority of users validates the development time.
I put together a small fiddle which should help you on your way if you want something like the website you linked to. Notice that this is still usable if you disable or comment out the JavaScript.
https://jsfiddle.net/kx94my17/1/
I think I have a VERY basic question here. I've been trying to figure this out for a while now: I'm working with an html-template called "Oyster HTML" and I've been trying to disable all functions (or css) that make the site adjust to the window size.
This is the link to the demo of the template:
http://www.gt3themes.com/website-templates/oyster/portfolio_masonry_listing.html
As you decrease the window's width in your browser, you'll see that - for example on the right side of the header - the menu-content adjusts. (doesn't get overlapped)
Same thing happens here: https://learn.wu.ac.at
Now, on 'common' websites like www.ebay.com this is not the case (content gets overlapped by window and doesn't adjust to window resize)
My question: Is this a JavaScript issue? or CSS? (I tried disabling all .js and all .css but the content still adjusted.) Now if it's not in JS or CSS, where can I change this?
As I said, this might be a very basic (or even dumb) question, but I've been trying to wrap my mind around this for quite some time now, and I just couldn't figure it out)
Thanks a lot in advance!!
I have a site with a header div and an iframe used to display a map in the rest of the page, resizing to the maximum space it can under the header div.
I can get the method working on Firefox and Chome, but the iframe won't fill the div on IE9. Anyone know what the issue is? Rather than post html, here's a few links to the problem page and the old page I'm re-designing that does work in the same way in IE9.
New problem page (doesn't resize div in IE9):
http://permitmap.paydirt.co.nz/devtest/permitmap.html
Old page using the same technique that does work in IE9:
http://permitmap.paydirt.co.nz/
It might be my abuse of Twitter's Bootstrap? I use bootstrap it as it's meant to be used on normal content pages, but this page is a one-off that needs to display a map in as much of the page as possible while still following the styling for the header as the rest of the site.
And my use of tables for layout is also bad practice I know, but it's the only method I've found to achieve the desired effect with the iframe (believe me, I've tried a lot of ideas out that don't use tables!).
Thanks in advance any CSS / HTML gurus out there that can help!
How much time is lost making IE behave like other browsers!? Microsoft must cost the planet an incredible amount in lost man hours and extra expense supporting IE.
Ah, just noticed I had to solve this issue with the original page.
Removing the DOCTYPE element from the top of the page resolves the issue in IE9!