I'm working on an iframe where I'm trying to overlay the iframe on top of a web page. The iframe is a floating button that remains on the bottom right of the webpage no matter where the user is on the page. The issue I'm having is that while scrolling works perfectly, the buttons and links on the base html page (where the iframe is called) are not functional anymore. The code for the iframe is here:
<iframe src="ka.html" title="KA"
style=" padding: 0px; margin: 10px 20px; position: fixed; bottom: 0px; overflow: visible; opacity: 1; border: 0px; z-index: 999998; transition-duration: 250ms; transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-property: opacity, top, bottom; right: 0px;"
height="100%" width="100%">
</iframe>
How can I get the base layer functionality working? I really appreciate any help I can get.
Related
I am having trouble positioning Menu Icon inside div. I am using Responsive full overlay navigation menu from https://navnav.co/ .
I am using this in my personal website but the menu icon is always at top-right of the page.
What i am trying to do is, when my website loads, i am displaying a full cover wallpaper.
and after scrolling down i have a navigation menu after the wallpaper ends.
I want to put that menu icon in that div only and not in top right of webpage.
.cd-nav-trigger {
/* hamburger icon */
position: fixed;
z-index: 3;
top: 12px;
right: 5%;
height: 44px;
width: 44px;
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
transition: transform 0.2s;
}
I have created a demo jsfiddle please check it. Its just a prototype.
https://jsfiddle.net/szn0007/zwds84ec/
Please also refer the screenshots.
In your fiddle, remove the position attribute
.cd-nav-trigger {
/*position: fixed;*/
}
This will position your menu icon wrt the menu container. position: fixed positions it wrt the page
I'm facing a weird issue I can't seem to figure. I'm using an iframe in a scroll box type widget, and it loads fine in Chrome.
However, in firefox the iframe loads but displays blank 80%+ of the time. And in safari, it displays blank until I move over it with my cursor.
What's really driving me crazy is it shows correctly time to time, but has the problem most of the time despite my best efforts.
Any ideas why?
The iframe loads in a corner box that scrolls up about 30% down the page.
Here's the outputted code of the whole scroll box on the page
<div id="lf-widget" class="scroll-triggered-box stb stb-bottom-right" style="position: fixed; right: 0px; border-top-width: 7px; border-top-style: solid; border-top-color: rgb(52, 152, 219); margin-right: 20px; z-index: 9999; visibility: visible; background-size: 50px; padding: 0px !important; background-image: url(https://s3.amazonaws.com/asdfasdf/assets/load.gif) !important; background-position: 50% 50%; background-repeat: no-repeat no-repeat;" data-trigger="percentage" data-trigger-percentage="0">
<iframe allowtransparency="true" src="http://app.asdfdsaf.com/asdfasdf/20/widget/#20?trigger=percentage&trigger-percentage=0" height="319" width="300" style="display: block !important;" frameborder="0" scrolling="no" id="lf-frame"></iframe>
<div class="triangle" id="triangle" style="border-color: #3498db transparent transparent transparent !important; margin-top: -1px;"><p class="inner-triangle">❯</p></div>
<span id="cf-close" class="stb-close">×</span>
</div>
Thanks for any input.
#main_nav ul ul ul {
top:-150;
}
It's not the best solution, but all your menus can be displayed without scrolling down.
A Better solution would be to write a javascript function that sets the top value to the negative value of the difference between the top edges of adjacent menus.
I am trying to build a sidebar navigation like the one used in the Wordpress admin dashboard. I like the option to collapse the sidebar but still see the icons. I'm using Zurb Foundation and jQuery. I finally have a solution that I think might work, but it's doing some funny things. The <li>s are all different widths, until I collapse and reopen the menu for the first time. Then they all stay the same size. So here are my questions:
How can I make the lis be the same size on the first load?
How can I make the main content resize and push over when the sidebar opens (instead of getting pushed down, which is what is currently happening)?
I want the sidebar to appear open on the first page load (with icons and titles), but then if the user toggles it closed (to just the icon view), it should stay closed as they navigate the site. How do I do that?
Here's a jsFiddle with my code.
Here you have a tutorial to do this, and works like a charm, you only need to adapt it to Foundation tutorial
In your particular case, since you want to have teh icons always visible, just open components.css and replace
.gn-menu-wrapper {
position: fixed;
top: 60px;
bottom: 0px;
left: 0px;
overflow: hidden;
width: 60px;
border-top: 1px solid #C6D0DA;
background: none repeat scroll 0% 0% #FFF;
transform: translateX(-60px);
transition: transform 0.3s ease 0s, width 0.3s ease 0s;
}
with
.gn-menu-wrapper {
position: fixed;
top: 60px;
bottom: 0px;
left: 60px;
overflow: hidden;
width: 60px;
border-top: 1px solid #C6D0DA;
background: none repeat scroll 0% 0% #FFF;
transform: translateX(-60px);
transition: transform 0.3s ease 0s, width 0.3s ease 0s;
}
This is a screenshot of the embedded html5 youtube iframe from my website.
Using chrome dev tools, I dug through the iframe DOM to the SVG element
(the play button).
Giving it { width:100%; height:100%;} fixes the issue and centers the element.
Of course I cannot do that in code (not same domain).
But maybe I'm missing something?
I haven't seen any questions about this, so I assume I'm doing something wrong.
this is my iframe:
<iframe id="zoommedia" src="http://www.youtube.com/embed/eqFwz_3BikM" frameborder="0" allowfullscreen="" style="height: calc(100% - 48px); opacity: 1;"></iframe>
css for iframe:
.zoomer #zoommedia {
background-color: rgba(24,24,24,1);
width: 100%;
height: 92%;
position: absolute;
top: 0;
left: 0;
z-index: 8;
text-align: center;
opacity: 0;
-webkit-transition: opacity 500ms ease;
transition: opacity 500ms ease;
}
I rather not give a direct link to my dev environment, but please let me know if any more info is needed. I'd appreciate a pointer in the right direction to get this issue resolved.
Thank you.
I don't have that much exp with css. I am testing the html in my iphone. The problem is that sometimes the div is not visible but still it responds to touches. When I debug in Safari by connecting it to a mac machine, it shows the div in the inspector but it is hidden on the device.
When I test the same on my ipad, And in portrait if my div is invisible and if I change the orientation, it becomes visible. I don't understand the magic thats happening here. Need some expert guidance on this. I want to display the HTML DIV and also need to enable touch. Please help.
Here is the css which I am using:
#container {
margin-left: 0px;
margin-top: -20px;
padding-right: 0px;
background-position: 0px -2px;
background-repeat: no-repeat;
position: absolute;
-webkit-transform-origin: 0px 0px;
-webkit-transition-timing-function: cubic-bezier(0.1, 0.25, 0.1, 1.0);
background-color: yellow;
-webkit-transform-origin-x: 0px;
-webkit-transform-origin-y: 0px;
-webkit-transition-duration: 0ms;
-webkit-transform: translate3d(0px, 0px, 0px);
}
It can be done using CSS pointer-events
Try setting
div
{
pointer-events: none;
}
For different view ports (different screen widths), prefer using css through Media Queries, it's the preferred method these days.