I have an <iframe> that displays video content when a menu item is clicked. The position of the iframe is correct when I open the page in Chrome. However, the iframe and side menu div shifts out of position when I open the page in Safari and Firefox. I need to have them open correctly in all browsers for a presentation. Here is my temp page:
http://www.foxsportsgraphics.com/Lab-presentation/new.html#
Excuse my messy code. I am fairly new to doing web pages from scratch.
Related
when I'm in the inspect state (press Ctrl+Shift+I on google chrome) in the google chrome there is a problem:
my page has a navbar menu, when I'm on the large screen there is no problem but whenever I resize the page, that navbar is shown in the right of the page(you can't see unless you scroll horizontally)
but I don't have this problem when I see my page normally without seeing the inspection of google chrome.
in the CSS I've hidden scroll horizontally (in the body I've written overflow-x: hidden)
I want to fix this issue because whenever an employer sees that in the inspect of google chrome that will not be so good.
I am working on one website. There is chat box which display well in firefox. But not in google chrome. I have try many trick but i cant fix it. Will you give me some solutions for it.
The site is http://ng.whoosmart.com/index.php?route=product/product&product_id=53
Its opencart site when you open this url in firefox its display well when you scroll down page it is in the footer.
But when you open in google chrome then its not display when you scroll down to page.
Add chatbox div in the end just before closing of body tag it will position correctly on chrome.
I have an iframe element that contains PDF document the element itself is benaeath a dropdown menu.
|Menu|
<iframe />
it is UI and I can not give you the exact explanation but I believe that you can imagine it. Everytime I click on the "Menu" dropdown a dropdown is generated. No matter that this dropdown has higher z-index attribute it always shows behind the iframe element. This happens in Chrome and IE. I don't know why but it works on Firefox. In other topics I saw that there is a solution if the content was a youtube video but it didn't work for me.
I'm using youtube iframe to embed videos on a site of mine. I'm using the iframe so that visitors to the site that don't have flash installed will see a html5 capable player.
Everything plays and runs as expected until you right click on the video and select and option like "copy embed HTML" and the video jumps off to the left of the iframe.
Upon inspecting the source, it seems like there is a div with class .player-actions-container that has a css rule of left: 101% if i remove this rule the player jumps back to its starting position.
demo
http://www.neilcremins.com/yt_test/
unclicked image
http://www.neilcremins.com/yt_test/unclicked.png
clicked image
http://www.neilcremins.com/yt_test/clicked.png
Your concern over lack of Flash presence is at this time unwarranted.
I developed a website which displays full webpages within a lightbox when certain images are clicked - the pages relate to the images. The pages are inside an IFRAME which is inside the lightbox's content div.
The problem is this: when the page inside the lightbox is longer than the height of the lightbox and the site is being viewed on iPhone/iPad, there appears to be no way to scroll the interior page - scrolling gestures scroll the outermost page (the one that the lightbox is overlaying). Mobile Safari has no scrollbars, depending entirely on gestures for scrolling, so the interior/overlayed lightbox IFRAME seems to be unscrollable.
Are there any solutions to this? Do I need to special-case mobile browsers and open a new browser window or navigate entirely to the IFRAME'd page instead of using the lightbox?
This seems to be a real shortcoming of mobile Safari!
(Not really relevant but perhaps useful info - the site is Drupal-based; the lightbox is the Lighbox2 module.)
While not addressing the pretty serious problem of unnoticeable content on mobile safari, I would like to mention you can usually scroll this kind of content with a two-fingered scroll/swipe.
As for your case, I would do a mobile browser detect and present the user with a new browser window.