In my page I have a frame .I need to design the frame independently and just place it in my page.I does not want to specify the frames style in the page where it included.But in the frame's style sheet.
I desinged the frame as follows
http://jsfiddle.net/Hf2pR/
In my page I included the frame as follows
http://jsfiddle.net/9Lckh/
The problem is that the width of the frame is not 20% (I specified 20%).
How to solve this?
How to independently design a frame and use it by just including it?
Hey you can define your iframe width properties as like this
<iframe class ='cLeft' src = './leftPanel.html' FRAMEBORDER="0" SCROLLING="yes" width="20%">
</iframe>
Live Demo
http://jsfiddle.net/9Lckh/1/
or This
iframe
{
border:none !important;
width:20%;
}
Related
I am using iframe on my site. Now I want to make the scroll on the right side of the iframe invisible. I've searched the whole internet but all the codes I've found don't work.
This is my iframe
<iframe src="../pages.php" width="100%" height="650px" class="gitartik"></iframe>
last piece of code I tried
.gitartik{
overflow-y: scroll;
}
.gitartik::-webkit-scrollbar {
width: 0px;
}
``
CSS of the parent frame cannot affect an iframe, you have to include it in the source of the page loaded by the iframe.
JavaScript of the parent frame can add CSS to the page in the iframe, if both pages come from the same origin (which seems to be the case in your example).
To do so First of all remove this part below from the code
.gitartik::-webkit-scrollbar {
width: 0px;
}
Then go to your html and find the iframe for example:
<iframe src="exampleisfake.co.in">
Then edit the iframe tag as shown below:
<iframe src="exampleisfake.co.in" scrolling=no>
add just like shown above:
scrolling=no
I'm trying to make the scroll disappear to the iframe. The iframe came from another website domain. and the iframe is dynamic so every time it has a different content/output.
**Addition:**so the iframe is dynamic /product{any number could be here} that's why it's hard to add a fixed height.
also the height of for example URL/product1 = 2000px, URL/product2 = 2300px.
I did try this code:
<div style="overflow:hidden;>
<iframe src="https://www.example.com/product1"></iframe>
</div>
or
<iframe src="https://www.example.com/product1" style="overflow:hidden;"></iframe>
both doesn't work.
Also, I did try to use scrolling="no" attribute but that doesn't load the whole content.
I tried getting the height of iframe but it's throwing me a cross-origin frame error since its different domain.
Maybe anyone experienced this already? Thank you.
Work Properly. Its work for me.
<iframe src="<<URL>>" height="500" width="600" scrolling="no" style="overflow: hidden"></iframe>
I used the following code to embed a google map at www.tastysfreshburgersandfries.com/locations but there are white bars above and below it and I can't seem to figure out how to remove them. Any help with fixing that would be great.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3431.7169822552632!2d-81.45959308200993!3d30.670097134060587!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88e4fee54019994b%3A0xbe6be3a817d34edf!2sTasty's+Fresh+Burgers+and+Fries!5e0!3m2!1sen!2sus!4v1476217073308" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
.wpb_content_element { margin-bottom: 35px}, you can play with it and also, .vc_row-has-fill+.vc_row-full-width+.vc_row>.vc_column_container>.vc_column-inner { padding-top: 35px; } that also needs to be changed.
But I would suggest you to create a separate class and apply it instead of messing with existing CSS styles, as I can see its from other framework.
You have padding on the row that has the iframe (it isn't the iframe which generates the white bars). Look this
I can figure you are using Visual Composer. First do a click on the pencil who is in the upper right corner of the row to see the Row Settings.
Then go to Design Options tab, and check what values do you have on the padding section.
I am just wondering, is there anyway to resize a video that is inside an iframe? Below is the code I am working on, when I tried to resize the iframe, it only resizes the wrap and not the player itself therefore creating a scrollbar. Is there anyway to resize the video player itself?
<iframe width="600" height="370" src="http://online.fairytail.tv/s/googplayer.php?skintype=nemesis1&to=1002MJumgQZG&autostart=false&id=108994262975881368074/Ft1#5832691710150899906"></iframe>
iframe{
width: 600px; height: 370px;
}
you cant style the elements inside iframe from another domain
unless they give you the ability to change some parameters in url or something...
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
Here's your WORKING DEMO
$("button").click(function () {
$('embed').attr('width', '800');
$('embed').attr('height', '600');
});
Stackoverflow is not a code generator, that's why I only gave you a clue not a simple solution. It would be better if you can work out something and become your own knowledge. Id doesn't mean I don't really know how to.
so i have a swf with a simple animation- the div used to contain it has a border that changes color when you hover- i want the whole thing to link to a new page when clicked- but right now it only works when you click on the border.
heres what i have so far
(a href="http://" class="noDecoration" )
(div id="ink" class="galleryBox" )
(/a)
-the div displays the swf object is it possible to do this from html?
thanks
One solution to the problem would be to place the link inside the div, and position it on top of the swf as an overlay.
Just make sure that the swf has the wmode param set to transparent as otherwise you won't be able to put HTML object on top of the swf. I usually use swfObject to embed my swfs, incase you didn't know about it.
HTML
<div id="ink" class="galleryBox">
<object width="500" height="500" type="application/x-shockwave-flash" data="filename.swf">
<param name="wmode" value="transparent">
</object>
</div>
CSS
#ink {
position:relative; width:500px; height:500px;
}
#ink a {
display:block; position:absolute; top:0; left:0; width:100%; height:100%;
}
flash objects capture mouse clicks, so you'd have to put the link navigation code inside the flash code, usually an onRelease and gotoUrl (I'm not a flash developer, i don't know specifics).
The only way i could think to do this would be a hack and not supported in all browsers, you would put a semi-transparent div ontop of the flash content, and that would have the link. the problem is that most linux flash players and others will simply always be on top, no matter the z-index you set.