I have an iframe element that I'd like to make resizable and draggable. I'd also like for the user to be able to drag it around by clicking and dragging inside the iframe.
Here is a jsfiddle:
http://jsfiddle.net/t9DT8/9/
iframe element is wrapped into a container div. The container div is made resizable and draggable.
The problem is that when using pointer-events: none on the iframe, it passes the click event nicely, but then when dragging it around it becomes glued to the cursor and click events doesn't come through anymore. Try dragging the youtube video in jsfiddle for the demo.
Question: how to make iframe element draggable so that you can drag it by clicking inside the iframe element, and it would let you go once you stop dragging?
HTML:
<div class="demo">
<div id="resizable" class="ui-widget-content">
<iframe width="100%" height="100%" src="//www.youtube.com/embed/9ZkWjkvaKpA" class="ui-widget-content" frameborder="no" id="test" allowfullscreen></iframe>
</div>
</div>
JS:
$(function () {
$("#resizable").resizable({
helper: "ui-resizable-helper"
});
$("#resizable").draggable();
});
And CSS:
#resizable {
width: 150px;
padding: 15px;
cursor: move;
z-index: 1;
}
.ui-resizable-helper {
border: 10px solid #efefef;
margin: -10px;
}
#resizable iframe {
pointer-events: none;
z-index: 100;
}
Update: The solution appears to work fine on Firefox, "gluing" problem is only reproducible on Chrome :/
Related
Here, my code works fine in IE10 but the scroll bar appears in chrome as well as the firefox.
it navigates to the link only when it is clicked by the border of the iframe. Moreover, the iframe is not clickable. Help me out....
<style>
.icon-remove-sign {
position: absolute;
top: 0;
right: 0;
</style>
$(document).ready(function(){
$('i.icon-remove-sign').on('click',function(e){
e.preventDefault();
pdfID = $(this).closest('.imagewrap')[0].id;
$('#dialog').dialog('open');
alert('Deleting '+pdfID+'');
$(this).closest('.imagewrap')
.fadeTo(300,0,function(){
$(this)
.animate({width:0},200,function(){
$(this)
.remove();
});
});
});
});
<div class="imagewrap">
<iframe src="http://team358.org/files/website/Basic_HTML_Tutorial.pdf#scrollbar=0&scrolling=0" width="150" height="100" scrolling="no"></iframe>
<i class=" icon-remove-sign"></i>
</div>
The scrollbar belongs to the PDF plugin, not to the <iframe>. So, as far as I know, you cannot control its appearance using HTML or CSS. That is also why the link only works when you click on the border : the border still belongs to the HTML page, but the PDF plugin doesn't delegate the clicks it receives back to the browser (I can't imagine how it could!)
Also, putting an <iframe> inside an <a> tag ? I've never seen that before and I'm not sure why you would want to do this.
Maybe you want to set your iframe to be the target of your link, like this ?
<iframe width="100%" height="100%" name="pdf_frame"></iframe>
<a href="http://team358.org/files/website/Basic_HTML_Tutorial.pdf"
target="pdf_frame">HTML Tutorial</a>
http://jsfiddle.net/p75wM/2/
EDIT : now that I understood your question, I think you'll find good information here : (also check out the update to that post)
<style>
.iframe_thumb {
position : relative;
overflow : hidden;
}
.iframe_thumb a {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
z-index : 10;
}
.iframe_thumb .delete {
postion : absolute;
top : 5px;
right: 0;
z-index : 11;
}
</style>
<div class="iframe_thumb">
<iframe src="http://team358.org/files/website/Basic_HTML_Tutorial.pdf#scrollbar=0&scrolling=0" width="100" height="100" scrolling="no"></iframe>
<img src="images/delete.png" />
</div>
Use a container div with style
<style>
#container{width: 500px; height: 300px; overflow: hidden;}
iframe{width: 518px; height: 318px;}
</style>
<body style="margin:0px; padding:0px; overflow:hidden;">
<div id="container">
<a href="http://team358.org/files/website/Basic_HTML_Tutorial.pdf">
<iframe src="http://team358.org/files/website/Basic_HTML_Tutorial.pdf" frameborder="0" scrolling="no" >
</iframe></a>
</div>
I want to change the parent of an iframe which is used for embedding a YouTube video.
When I change the parent:
Firefox and Chrome: Player stops playing and displays a new (stopped) player in new parent.
IE: Player continues playing and displays a new (stopped) player in second div. So user sees a stopped player but hears video.
Here is the sample fiddle: https://jsfiddle.net/mehmetatas/znuUf/1/
try {
var div1 = $('#div1')
var video = div1.find('.video')[0];
var div2 = $('<div id="div2"></div>');
$(video).appendTo(div2);
div2.appendTo($('.parent'));
div1.remove();
}
catch (e) {
alert(e.message);
}
It seems like iframe content is getting refreshed when parent changes.
Is it possible to video continues playing in new parent?
If not, Firefox and Chrome's behavior is OK, then how can I fix IE's behavior?
What I can think of is you use classes instead of ids in you HTML/CSS like this:
<input id="btn" type="button" value="move"></input>
<div class="parent">
<div class="div1">
<div class="video">
<iframe width="300" height="200" src="http://www.youtube.com/embed/98LHnO0xiMY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
and
.div1 {
position: absolute;
top: 50px;
width: 300px;
height: 200px;
border: solid 3px green;
}
.div2 {
position: absolute;
top: 50px;
left: 325px;
width: 300px;
height: 200px;
border: solid 3px red;
}
This way in your js script you simply need to state:
var div1 = $('.div1')
div1.removeClass('div1')
div1.addClass('div2')
this way your div will be positioned as the new div2 class says and move without stopping or refreshing.
HERE IS THE UPDATED FIDDLE
Hope this is what you were looking for.
Is it possible to manually scroll a JPG inside a div with 'little hand' cursor by grabbing and draging the actual image?
Just when for example you have long horizontal bitmap and want to show it in small window so people scroll like in photo editors when you zoom in.
You need some JavaScript magic to do this. Check this out: http://jsfiddle.net/bCuGM/.
<style type="text/css">
#container {
width: 400px;
height: 400px;
overflow: hidden;
cursor: pointer;
}
#draggable {
width: 1024px;
height: 819px;
}
</style>
<div id="container">
<div id="draggable">
<img src="http://farm3.staticflickr.com/2593/3884464511_a77144821e_b.jpg">
</div>
</div>
<script>
$("#draggable").draggable();
</script>
You can do it by using javascript and a bit of css.
On your image add a css rule with :
cursor: pointer;
using javascript, add mousedown, mousemove and mouseup events on your image. Then use javascript to change the scroll on the parent div
I'm relatively new to Web dev. The question is generic, but I'll pose specific user-cases.
Use-case 1:
I have a div element on a web page. When the page loads the first time, this div runs a small 5 sec animation. What I wish to do is, when this animation ends, I want the same div to contain some other element - it could be an image, a link, another animation etc.
That is, one container - the div - hosting multiple elements on a time-scale. First 5 secs animation , followed by an image or a link.
What Javascript methods will allow me to do so?
Use-case 2:
Again, I have a div element in a page. Now this div element is like a tabbed browser - you click on a different tab to view a different web page. Similarly, I wish to make this a "tabbed" div. As in, when the user hovers the mouse on tab 1, the div would show a video, when hovered over tab 2, it would show another video in the same div - that is, replacing the old video. The tabs can be considered as a fancy looking link.
Or, in the first place, is there an alternative to 'div' to do the things mentioned above?
Thanks,
SMK.
Solution for use case 2 -
This is a slightly lengthy solution but its extremely flexible and can be scaled up to any number of tabs very easily
We will divide the solution into 3 parts - The CSS, HTML and JQuery.
Lets take a look at the CSS part first
<style>
#tab_holder {
width: 350px; !important
}
#tab_holder .tabs {
float: left;
height: 20px;
padding: 5px;
border: 1px solid #eee;
border-bottom: none;
width: 50px;
cursor: pointer;
border-radius: 5px 5px 0 0;
}
#tab_holder .tabs:hover {
background-color: #eee;
}
#tab_holder #content_holder {
width: 400px; !important
margin: 0 0 0 0;
border: 1px solid #000;
padding: 10px;
float: left;
border-radius: 0 5px 5px 5px;
}
.content {
visibility: hidden;
}
</style>
Let us now take a look at the HTML part of this solution
<div id="tab_holder">
<div id="tab1" class="tabs">Video1</div>
<div id="tab2" class="tabs">Video2</div>
<div id="tab3" class="tabs">Video3</div>
<div id="content_holder">
<div id="main_content">Select a tab to see the video..</div>
</div>
</div>
<!-- These are divs in which you put your actual content.
They are always hidden -->
<div id="content1" class="content">
<iframe width="200" height="200" src="http://www.youtube.com/embed/4Z6YUGGlwtA?rel=0" frameborder="0" allowfullscreen></iframe>
< /div>
<div id="content2" class="content">
<iframe width="200" height="200" src="http://www.youtube.com/embed/s13dLaTIHSg?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div id="content3" class="content">
<iframe width="200" height="200" src="http://www.youtube.com/embed/I1qHVVbYG8Y?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
You can see that each tab is represented by a div which is using the "tabs" class from the CSS section. If you need to add a new tab, all you have to do is add a new div and give is a new id. For example to add a forth tab, you can say -
<div id="tab4" class="tabs">Video4</div>
It is as simple as that.
Now the thing I like about this approach is that you can place the content to be displayed also in div's, rather that nesting it under jquery. In this case we use the div's with the id content1 content2 content3
This gives you the flexibility to expand as you enter content into the div and use normal markup without getting confused and at ease.
These div's are not visible as we have set their visibility to hidden is CSS.
If you add a new tab div you must also add a new content div.
Now we move onto the JQuery part -
$(document).ready(function (){
/* Add the listeners. */
$("#tab1").mouseover(function (){
switch_content('content1')
});
$("#tab2").mouseover(function (){
switch_content('content2')
});
$("#tab3").mouseover(function (){
switch_content('content3')
});
});
function switch_content(name){
$("#main_content").fadeOut('fast',function (){
$("#main_content").html($("#"+name).html());
$("#main_content").fadeIn('fast');
});
}
The above JQuery function is extremely straight forward. Each tab is attached a action listener which is fired by a mousover event. So if you add another tab with the id=tab4 and its respective content div with the id=content4 then all you have to add in the jQuery is:
$("#tab4").mouseover(function (){
switch_content('content4')
});
So it becomes very easy to expand the code.
You can find a working demo of this on my website demo section
Tips -
Avoid using hover because it creates an annoying user experience due to accidental hovers and it is hard for mobile platforms to emulate this event. Most of them fall back to click. So I suggest use the click event instead.
If you must use, make use of the HTML video tag and pause the video using JS if the user hovers on another tab. This will render a better user experience.
Here is an example for use-case 1.
In your html you need to include the 5 second animation, i persume this is a gif? Although it can be any content. For the sake of this example i will show it as a div.
The html i have used:
<div id="example">
<div id="somecontent"> </div>
<div id="morecontent"> </div>
</div>
The CSS:
#example
{
width:500px;
height:500px;
background-color:#f00;
padding:10px;
}
#somecontent
{
width:200px;
height:200px;
background-color:#fff;
}
#morecontent
{
width:200px;
display:none;
height:200px;
background-color:#000;
}
and the javascript(using jQuery):
setTimeout(function() {
$("#somecontent").fadeOut("slow", function() {
$("#morecontent").fadeIn("slow");
});
}, 5000);
Have a look at this jsfiddle for it in action - http://jsfiddle.net/fntWZ/
For use case 2 it will be more complicated. Try having a look for some different plugins that could help with this
answer for use-case:1
css :
<style>
#myDiv {
height:0;
width:0;
position:absolute;
border:1px solid red;
}
</style>
script :
$(document).ready(function(){
$("#myDiv").animate({width:"100px", height:"100px"},5000, function(){
var image = new Image();
image.src = "dropdownContainerBottomMiddle.png"; //your image src goes here
$("#myDiv").append(image);
//you can append more content by using setTimeout function
setTimeout(function(){
var anc = "stackoverflow";
$("#myDiv").append(anc);
}, 1000);
});
});
html:
<div id="myDiv"></div>
I am using an iframe and in the iframe I am loading a dynamic image. I want to use that image as a link to the respective article. Actually this is a news site.
I already have used many stuffs like:
<iframe src="dynamic url"></iframe>
does work with IE but not with safari and FF.
and
some tweets like
div.iframe-link {
position: relative;
}
a.iframe-link1 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
code:
<div class="iframe-link">
<iframe src="file" width="90px" height="60px" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0" allowtransparency="true" noscaling="true">
</iframe>
</div>
worked in FF and Safari not in IE7,8.
SO can anybody suggest what to do..
any help would be appreciated.
The Iframe is loading a dynamic address of image like::::
<div class="news_img01">
<div onclick="window.open('URL','_self')" style="cursor: pointer;"><br>
<iframe scrolling="no" height="60px" frameborder="0" width="90px" noscaling="true" allowtransparency="true" marginwidth="0" marginheight="0" src="thumbnails/1188.gif">
</iframe>
</div>
</div>
so i cant add tag inside but already wrapped tag inside . it worked for IE but not for others like FF, Safari..
You could create a overlay to make the area over a iframe clickable. This worked for me.
<div style="position:relative;">
<iframe src="somepage.html" width="500" height="500" />
</div>
I found this code snippet from this thread here:
https://forums.digitalpoint.com/threads/how-do-i-make-this-iframe-clickable.2320741/
According to your earlier comments, you were using the iframe in order to crop an image of unknown size to a 60 by 90 pixel box. To do this, use the overflow:hidden css attribute on the a tag, which slices off any content not fitting within the border-box.
<div class="news_img01">
<a href="URL"
style="display: block; width:90px; height:60px; overflow:hidden;">
<img src="thumbnails/1188.gif" />
</a>
</div>
Why don't you enclose <iframe> inside a <div> and add an onClick event on the containing <div> to navigate the user to the desired page?
<div onClick=""> <!-- Or just bind 'click' event with a handler function -->
<iframe ...></iframe>
</div>
By adding the following css rule, it will work as if the iframe were a clickable link.
div {
cursor: pointer
}
iframe {
pointer-events: none; // This is needed to make sure the iframe is not interactive
}
Set css property pointer-events to none on iframe tag.
a {
display : block; /* or inline-block */
}
a iframe {
pointer-events : none;
}
<a href="https://stackoverflow.com/questions/3317917/use-iframe-as-a-link">
<iframe src="https://www.africau.edu/images/default/sample.pdf"></iframe>
</a>
If the iframe is loading an HTML page, just put your <a> tags in the source of that.
If it is just loading an image, why are you not using an <img> tag?
I would recommend using jQuery to select the image element in that iframe and wrap it with <a> tag so it's clickable.
I believe it's possible to attach an onHTMLReady listener to the document inside the iframe. Then wait for the iframe to load and then make the image clickable
$(frames[0].document).ready(function(){ /*find and wrap with a-tag goes here*/ });
I have the same problem and I solved it with this code:
div.iframe-link {
position: relative;
float: left;
width: 960px;
height: 30px;
}
a.iframe-link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #ffffff;
opacity: 0.1;
filter:Alpha(opacity=10);
}
For me,it works for all browsers and IE8 as well.
Hope it helps :)
I faced such type of problem and solved by this:
a.iframe-link1 {
position:absolute;
top:0;
left:0;
display:inline-block;
width:90px;
height:60px;
z-index:5;
}