I need a iframe with link attached to that iframe. I have a iframe with src containing image file and id containing the url where i should be navigated. I should not use javascript or any php coding for link creation. when i paste that iframe in any page, its should be a clickable iframe.
adding tag doesn work in some browsers like chrome and firefox.
Eg:
<iframe src="imagepath" scrolling = "no" width="728" height="90" id = "redirect url"></iframe>
With the following HTML and CSS you get an iframe with a link overlay. You have to specify the redirect url in the a tag. If you you really have to specify it in the id of the iframe, you definitely need JavaScript.
Here's a demo how it looks like (only tested in Chrome): http://jsfiddle.net/2kA3J/
CSS:
#container {
position:relative;
width:400px;
height:400px;
}
#container a {
position:absolute;
width:100%;
height:100%;
}
#container iframe {
width:100%;
height:100%;
}
HTML:
<div id="container">
<iframe src="imagepath" scrolling="no" ></iframe>
</div>
Related
I'm developing an e-library website and I want to display book content (saved in pdf format). The problem is the user that open embeded pdf still able to copy the content by highlight the text. Where do I need to set the code?
I already put style="width:100%; height:100%; user-select: none; -webkit-user-select: none;"
this is my current code
<iframe src="http://localhost/ci_crud/upload/product/Proposal_Thesis.pdf#toolbar=0&navpanes=0&scrollbar=0" title="PDF in an i-Frame" frameborder="0" scrolling="auto" style="width:100%; height:100%; user-select: none; -webkit-user-select: none;"></iframe>
I'm trying to redirect to a url from another url I mean, I have an url http://www.domainA/Auth/Login and I want to redirect to http://www.domainB/Auth/Login but Keeping on browser http://www.domainA/Auth/Login . I'm working with WordPress and I get the first step with a plugin but I don't get the second step about keeping the old url. How can I do that?.
Thanks for your support
You can not redirect URL without changing adress bar.
You can iframe DomainB in domainA. With this approach you can get what you want.
Sample code of http://www.domainA/Auth/Login/index.html :
<iframe src="http://www.domainB/Auth/Login" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
Your browser doesn't support iframes
</iframe>
<div class="container" style="text-align: center"><iframe width="100%" height="450" src="https://www.youtube.com/embed/6c7Fx2PR9Dk" frameborder="0" allowfullscreen></iframe></div>
I inserted the above code into frontpage.php on wordpress to add an embedded youtube video. However I want to edit the height of the video player when the website is viewed from mobile mode. I tried adding .container {height: 250px !important;} in the media query but that doesn't change anything. I want to know how to either change the container size so that I can set the height to auto or add code to the media query to change the video player size. This website can be viewed at beautyinstitute.us
I also tried
#media screen and (max-width: 799px) {
.container .iframe{height:250px !important;}}
in the responsive.css
The iframe is an html element, not a class. So targeting it like
.iframe
won't work. Try this:
.container iframe {height: 250px;}
WordPress can retrieve width/height of your video and generate iframe code.
<?php
echo apply_filter('the_content', 'https://www.youtube.com/watch?v=6c7Fx2PR9Dk');
?>
If you want responsive video, try Fitvids.js, a jQuery plugin.
I am trying to open the pop-up when an image is clicked, rather than on button click.
How could it be done?
Its a gallery kind of thing, where the images are loaded categorically and when clicked on the image, a bpopup show up and the details of the products are shown
I tried that,
Please check the fiddle file http://jsfiddle.net/psps/NhRHC/
The problem that I am facing now is it opens up in the first image click, but not in the second image.
HTML
<img id="my-button" src="http://placehold.it/200&text=A">
<img id="my-button" src="http://placehold.it/200&text=B">
<!-- Element to pop up -->
<div id="element_to_pop_up">
<a class="b-close">x<a/>
Some text
</div>
CSS
#element_to_pop_up {
background-color:#fc0;
border-radius:15px;
color:#000;
display:none;
padding:20px;
min-width:400px;
min-height: 180px;
}
.b-close{
cursor:pointer;
position:absolute;
right:10px;
top:5px;
}
JS
its in that jfiddle link.
Using jQuery, you can do it like this -
$('#div img').click(function(){ $("#popup").bPopup(); });
This statement will make the images in the container element with id "div" open up a bPopup when they are clicked.
I have a problem with my facebook like button. Basically I have an ajax gallery on my page and so when the image changes I change my facebook button so that the button represents the url to the new image. But when I click share it just shares the original url even though it has changed. Here is an example:
When page loads the code for the facebook button is:
<iframe scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; width: 80px; height: 21px;" allowtransparency="true" src="http://www.facebook.com/plugins/like.php?href=http://go-style.co.uk/test-gallery/&layout=button_count&show_faces=false&width=80&action=like&font=lucida+grande&colorscheme=light"></iframe>
I then use jQuery to change the code to this:
<iframe scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; width: 80px; height: 21px;" allowtransparency="true" src="http://www.facebook.com/plugins/like.php?href=http%3A//go-style.co.uk/nggallery/page-7029/image/30&layout=button_count&show_faces=false&width=80&action=like&font=lucida+grande&colorscheme=light"></iframe>
Yet clicking on the new button likes the original url
Anyone know why this is happening?
Have you tried refreshing the iframe after changing it SRC?
$('#youriframe').attr("src", $('#youriframe').attr("src"));
It was a caching issue with facebook in the end!