Stop Iframe page from redirecting - javascript

http://kenzshop.com/lightbox/
User types url in input field, and clicks "Go To" button. Page should just view in iframe. But when typing in a url like espn.com the clicking button, page will momentarily display, then the whole page (kenzshop.com/lightbox) will redirect to espn.com.
Also, when I try yahoo.com in the iframe, nothing at all happens. Is something mis-coded here? Or just something within those sites not allowing them to be viewed in iframes?
Also, not sure if it is ok to ask this in same thread, but is there a way of the user clicking the Enter Button on the keyboard creating the same effect as having to click the "Go To" button?
<script type="text/javascript">
<!--//
function urlink(iframe,src){
document.getElementById(iframe).src = src;
}
//-->
</script>
< / head>
<div style="background-image: url('https://s3.amazonaws.com/cloud-host.mobi/preview- iphone4g.png'); width: 327px; height: 730px; padding: 135px 28px 0px 33px; background-repeat: no-repeat;">
<form>
<div style="position:relative; top:9px; left:2px;"><input style="float:left;"type="text" size="40" value="http://" name="url">
<input type="button" onclick="urlink('I1',this.form.url.value)" value="Go To"></div>
</form>
<iframe id="I1" src="" style="height: 489px; width: 327px;" frameborder="0" marginwidth="0" scrolling="yes" width="320" height="240"></iframe>
</div>
Thanks!!
Ken

espn.com probably has some JavaScript to break itself out of an iframe. I'm afraid there's not much you can do there. Most sites do not have this, though.
For the enter button, use a <form> tag with the action parameter. Wrap it around your <input> box.
See http://www.w3schools.com/tags/tag_form.asp for examples.

Related

how to create a simple popup window displaying only text, on a web site

I'm not a programmer, I've created a web site using a major hosting service's application. I want to insert code into a box provided by the hosting service that allows you to paste any HTML code.
I want to create a link on the site that opens a popup window to display text that I hard-code into the code. I don't want to jump to another HTML page.
I found the following code below that allows me to jump to another HTML page (it was set to CNN.com as an example). Is there a way to replace the action of jumping to another HTML page, with opening the popup and displaying the following example text "hello world". (please note in the code below, I deleted the opening and closing "a" tags at the beginning and end of the code since their inclusion causes problems when I type this question out on this web site).
Pop-up Window
Thanks
Easy to make popup window without Jquery. Just copy this code and paste. and clicl the open text. Popup shown.
<p>To display the box, click on the link <a href="#" onClick="document.getElementById('shadowing').style.display='block';
document.getElementById('box').style.display='block';">open</a>
</p>
<div id="shadowing"></div>
<div id="box">
<span id="boxclose" onClick="document.getElementById('box').style.display='none';
document.getElementById('shadowing').style.display='none'">close </span>
<div id="boxcontent">
And this is the static content of the box. <br><br>
Dynamic content in the next demo...
</div>
</div>
<style type="text/css">
#shadowing{display: none;position: fixed;top: 0%;left: 0%;width: 100%;height: 100%; background-color: #CCA; z-index:10; opacity:0.5; filter: alpha(opacity=50);}
#box {display: none;position: fixed;top: 20%;left: 20%;width: 60%;height: 60%;max-height:400px;padding: 0; margin:0;border: 1px solid black;background-color: white;z-index:11; overflow: hidden;}
#boxclose{float:right;position:absolute; top: 0; right: 0px; background-image:url(images/close.gif);background-repeat:no-repeat; background-color:#CCC; border:1px solid black; width:20px;height:20px;margin-right:0px;}
#boxcontent{position:absolute;top:23px;left:0;right:0;bottom:0;margin:0 0 0 0;padding: 8px;overflow: auto;width:100%;height:100%; overflow:hidden;}
</style>
You can place the function in the <head> section OR you can pull the function from a .js file. This will open a window and load the url you want. It won't redirect the original page as you use the # instead of the actual url.
<script>
function popup(){
window.open('http://www.cnn.com','1426494439650','width=440,height=300,toolbar=0,menubar=0,location=1,status=1,scrollbars=1,resizable=1,left=0,top=0')
}
</script>
link

Youtube video shows on click of image

I've looked at a few implementations of this and so far none have worked so I'm resorting to posting. The concept is: a placeholder image which once clicked changes into the video and autoplays.
Current HTML:
<div id="ytvideo" style="display:none;">
<iframe width="939" height="528" id="ytvideo" frameborder="0" allowfullscreen></iframe>
</div>
<img class="aligncenter size-full" id="homevideo" alt="placeholder" src="/wp-content/uploads/2013/10/placeholder.jpg" width="940" height="548" />
Current JS:
jQuery(document).on('click','#homevideo',function(e){
jQuery('#ytvideo').show();
jQuery('#homevideo').hide();
jQuery('#ytvideo').attr("src","www.youtube.com/embed/[myvidid]?autoplay=1");
jQuery("#ytvideo").attr('src', jQuery("#ytvideo", parent).attr('src') + '?autoplay=1');
});
I've looked at trying to reload the iframe but that doesn't seem to work.
Any ideas?
MARKED: FIXED
You forgot the protocol - www.youtube.com/… would link to folder on the server.
With protocol it works fine – I’d suggest creating the whole iframe dynamically though, because with an empty src attribute at the beginning it would load the same page it is embedded in.
<div id="ytvideo" style="display:none;"></div>
<!-- replaced your image with a span here for fiddle -->
<span id="homevideo" data-vidid="mbOEknbi4gQ">click me</span>
$(document).on('click','#homevideo',function(e){
$('#homevideo').hide();
$('#ytvideo').html('<iframe width="939" height="528" id="ytvideo" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/'+$(this).attr("data-vidid")+'?autoplay=1"></iframe>').show();
});
http://jsfiddle.net/HuVqm/
As discussed in one of the comments, you can get both the img and the video from the api.
This would be good if you didn't want to maintain the image, just wanted it to pull through from YouTube. (However I am not sure that YT provide an image as large as 939 so in your case you might still want to use your own image). I have put in a random channel name 'RIDEChannel' feel free to change that with your channel name.
<div id="vid"></div>
$.getJSON("http://gdata.youtube.com/feeds/api/users/RIDEChannel/uploads?max-results=1&v=2.1&alt=jsonc&callback=?", function (myvid) {
var vid = $("#vid");
$.each(myvid.data.items, function (i, item) {
vid.append("<img width='300' height='250' src='" + item.thumbnail.hqDefault + "'>");
$(document).on("click", "#vid img", function (event) {
vid.append("<iframe width='300' height='250' src='http://www.youtube.com/embed/" + item.id + "?autoplay=1' frameborder='0'></iframe>");
$(this).hide();
});
});
});
So the problem laid with the youtube url missing the http:// prefix and also for the fact that the iframe name was the same as the div it was enclosed in. (How silly of me) Thus it was attaching the SRC to the div, not the iframe.
Working DEMO
Try this,
First you cannot have same id for more than one elements <div id="ytvideo" and <iframe id="ytvideo"
[myvidid] in http://www.youtube.com/embed/[myvidid]?autoplay=1 should be replaced with the id of the video
html
<div id="ytvideo1" style="display:none;">
<iframe width="939" height="528" id="ytvideo" frameborder="0" allowfullscreen></iframe>
</div>
<img class="aligncenter size-full" id="homevideo" alt="placeholder" src="http://thefabweb.com/wp-content/uploads/2012/12/6191814472_fa47c79b67_b-900x600.jpg" width="940" height="548" data-vid='DBNYwxDZ_pA'/>
code
jQuery(document).on('click','#homevideo',function(e){
jQuery('#ytvideo1').show();
jQuery('#homevideo').hide();
jQuery('#ytvideo').attr("src","http://www.youtube.com/embed/"+$(this).data('vid')+"?autoplay=1");
});
If you have more than 1 video, it could be useful to store the url to the video in the html and use a class instead of an id.
Also, if you put the preview image into the background, behind the video, it will stay there until the iframe has loaded, reducing that "flickering" effect when clicked.
I also restructured the markup a bit to reduce redundancy, here I specify the size of the video and the video id only once.
Also, you should use jQuery's .one('click') instead of .click(), since you want that event listener removed after it has fired the first time.
html:
<div class="ytvideo"
data-video="73sgatbknvo"
style="width:939px; height:528px; background-image:url(http://lorempixel.com/939/528/)">
<div class="seo">
Have a meaningful description of the video here
</div>
</div>
CSS:
.ytvideo {
background-position: center;
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
}
.ytvideo iframe {
border-style: none;
height: 100%;
width: 100%;
}
.ytvideo .seo {
display: none;
}
jQuery:
$('.ytvideo[data-video]').one('click', function() {
$(this).html('<iframe allowfullscreen src="//www.youtube.com/embed/'+$(this).data("video")+'?autoplay=1"></iframe>');
});
If you want to support browsers with no script support, you'd have to add a "noscript" element in the .ytvideo div that already contains the iframe.
fiddle:
http://jsfiddle.net/6ARc7/

jQuery mobile: Hide virtual keyboard after closing popup

I'm using jQuery mobile in a project and need a popup with a textarea on it:
<div data-role="popup" id="popupDialog" data-overlay-theme="none" data-theme="a" style="width: 350px; max-width:350px;" class="ui-corner-all" data-dismissible="false">
<button id="dialogCloseButton" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Close</button>
<div data-role="content" class="ui-corner-bottom ui-content" style="text-align: center; margin: auto;">
<textarea id="textArea" data-theme="b" style="resize: none; max-width: 100%; max-height: 150px; width: 100%; height: 150px; padding-bottom: 5px;"></textarea>
<button data-theme="a">Ok</button>
</div>
</div>
I'm opening the popup like this:
$('#popupDialog').popup('open');
When I now enter text in the textarea and close the popup using the button, the virtual keyboard won't hide on my iPad running iOS 6.1.
I tried this hack, which didn't work for me.
When I blur the textarea before closing the popup, the textarea will automatically get the focus again (you can test this on my example site using the "Blur"-button).
Edit: removed link to example.
This works for me:
$('#textArea').blur();
$('#popupDialog').attr("tabindex",-1).focus();
It's pretty self-explanatory. The 2nd line will de-focus all input fields, and it relies on jQuery. I found that calling blur() on the single focused textfield didn't always work. Either one of these lines should work independently, but both of them together cannot be stopped!
var hideKeyboard = function() {
document.activeElement.blur();
$("input").blur();
};

How to open a File Dialog or Browse Files Window using Scripts?

I like to show an image or any elements of html and initialize a height to it. When i used a file type of input in html behind of an image like this :
<img src="image.png">
<input type="file" name="image" id="booksimage" style="opacity: 0">
So input element disappeared and when I clicked on image File Open Dialog opened but it works in a height of a normal input element. when I set a height of 100px to input element it dose not work more than.
When I see that problem of html, I decided to Use Javascript or Jquery to solve problem, I searched an find some similar issues like :
How to open a file / browse dialog using javascript?
but solution is for special browsers and firefox doesn't support it.
Is there any other way for open File Browser Dialog by clicking on an image?!
$('img').click(function() {
$('input[type="file"]').click();
});
Unluckily browser don't allow to open the browse file dialog without the specific event triggered by the click on an input tag with type="file" There are some ways to work aorund this, but it won't surely work on every browser you've got.
<style type="text/css">
#file-image {
position: relative;
width: 40px;
height: 40px;
overflow: hidden;
}
#file-image input {
height: 100%;
position: absolute;
top: 0;
right: 0;
-moz-opacity: 0;
filter: alpha(opacity: 0);
opacity: 0;
}
</style>
<div id="file-image">
<input type="file">
<img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" width="40" height="40" />
</div>
This might be a couple of years late, but here's is a way of doing it without any Javascript and it's also compatible with any browser.
<label>
Open file dialog
<input type="file" style="display: none">
</label>
In case you find problems, you may need to use the for attribute in the label pointing to the id of the input.

How to scrollTop a span outside an iframe from within the iframe

My site is affiliated in another site iframe.
The hosted site got the iframe on fix height inside a span with a scroll (don’t ask why).
I’m looking for a way to change the span scroll (with JS) from within the iframe (where my site is).
I know it can be done because I use JqueryUI dialog with position:top (inside the iframe)
which scrolls the span to the top (outside the iframe)
Html:
<body style="overflow:hidden;">
<span style="float: left; height:488px; overflow-y:auto;">
<table>
<tr>
<td>
<iframe id="Iframe" name="Iframe" src="Login.aspx"
width="775px" height="4000px"></iframe>
</td>
<td style="width: 200px; height: 600px; font-size: 25px; border: 1px solid #000000;" valign="top">Side Bar</td>
</tr>
</table>
</span>
window.parent.$("span").whateverYouWantToDo();
works only if iframe content is in the same domain as main window.
When there is a different domain You can only catch the load event from the main window. Try reacting on that.
And see what You can do with
document.location.hash
it might be accessible from the main window, but it's not cross browser

Categories

Resources