Say I have this text Click me, and I want a modal window, which contains an iframe to a website (eg., www.google.com) to come up whenever one clicks on the text.
How should I go about doing this? I did some googling and an example of the iframe
%iframe{:src => "http://www.google.com"}
But I am not sure how I could use it ...
Here's the structure of my view file (html.haml), I tried something like this (but it didn't work!):
...
%li
= User_name
= link_to 'Click me' %iframe{:src => "http://www.google.com"}
%li
...
Again, how do I open a popup when some one clicks on the 'Click me' text?
I am sure you do not want to use an iframe for displaying the content from a url, instead you want to shoe it in a pop up window. Yo can use fancybox-rails gem. after installing the gem as described in the readme add this in your view file
%li
= User_name
= link_to 'Click me', "http://www.google.com", :class => "iframe"
and this in your javascript file
$(document).ready(function() {
$("a.iframe").fancybox();
});
You can read more about the uses here. There are many other jquery plugins available for the same.
Use a link with its target attribute set to the value of the name attribute on your modal <iframe>:
Open Bing in an iframe
<iframe src="#" name="modal"></iframe>
Then in your JS:
var modalTriggers = Array.prototype.slice.call(document.querySelectorAll('a[target=modal]'));
var modal = document.querySelector('iframe[name=modal]');
modalTriggers.forEach(function(trigger){
trigger.addEventListener('click', function() {
modal.classList.toggle('active');
}, false);
});
And Some CSS:
iframe[name=modal] {
display: none;
width: 92%;
height: 92%;
position: fixed;
top: 4%; left: 4%;
background: white;
box-shadow: 0 2px 12px 6px rgba(0,0,0,.6);
}
iframe[name=modal].active {
display: block;
}
Demo (edit)
On MDN
there are a couple ways to do this if i understand you correctly. this is a simple approach if you include jquery into your html
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#clickMe').click(function(){
$('#myIframe').show();
});
});
</script>
</head>
<body>
<input id="clickMe" name="clickMe" type="button"/>
<iframe id="myIframe" style="display:none;" src="http://www.othersite.com/some/path?param1=value1¶m2=value2">
<p>Placeholder text; only shows up if the page DOESN'T render!</p>
</iframe>
</body>
</html>
you'd also want to style your iframe to behave like a modal window...there are lots of tutorials on that.... as well as handle the closing behaviors
this is a more in depth explanation http://www.jacklmoore.com/notes/jquery-modal-tutorial
Related
I have
<a class="zipbutton" onclick="window.open('www.site.com/zipfinder/','popupwindow'...>.
There are 2 input fields in my home page. From Zip code and To Zip code. Beside them are the anchor buttons that opens a page which the user can find zip code based on city and state then post the zip code to the corresponding text field. What I did was, I created 2 separate pages for each anchor button. Is there any way to combine them into one pop up window?
Here is the sample code for one of the pop up page:
<script language="Javascript" type="text/javascript">
function post_value(){
window.opener.document.getElementById("FromZip").value = document.getElementById("cityBox").value;
self.close();
}
</script>
and
function post_value(){
window.opener.document.getElementById("ToZip").value = document.getElementById("cityBox").value;
self.close();
}
You can always use the -
1) event.srcElement in Internet Explorer
2) event.target in most other browsers.
This will give the src element from where the click event originated in your case the anchor element.Put a filter on the element id and use only one popup.
Click here for more information.
Sample Code:-
<script language="Javascript" type="text/javascript">
function post_value(event){
if(event.target!=null)
{
var target=event.target.id;//This is the id of the element which triggered the event.
}
window.opener.document.getElementById("FromZip").value = document.getElementById("cityBox").value;
self.close();
}
Here is some example to do this. I'm using JQuery to do this.
Html form
<form>
<input type="text" id="FromZip" name="FromZip">
Zip code
<br>
<input type="text" id="ToZip" name="FromZip">
Zip code
</form>
<div id="zipcodes">
Close
<br>
<!--LOAD YOUR ZIP CODES HERE-->
<!--For Example-->
0001<br>
0002<br>
0003<br>
0004<br>
0005<br>
0006<br>
0007
</div>
Style for zipcodes container
<style type="text/css">
#zipcodes
{
display: none;
color:#000;
background-color: #eee;
text-align: left;
min-height: 100px;
box-shadow: 0px 0px 7px #000;
position: absolute;
width:200px;
height: 200px;
top:40%;
left:40%;
padding: 16px;
z-index:1000;
}
</style>
Here is the Jquery script.
Make sure add the jquery library within the head tag
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var zipbox;
//Open zipcode container
$(".button_open_Fromzipcode").click(function(e){
e.preventDefault();
$("#zipcodes").css("display","block");
zipbox="FromZip";//flag the return textbox
});
//Open zipcode container
$(".button_open_Tozipcode").click(function(e){
e.preventDefault();
$("#zipcodes").css("display","block");
zipbox="ToZip";//flag the return textbox
});
//Close zipcode container
$(".button_close_zipcode").click(function(){
$("#zipcodes").css("display","none");
});
$(".zipcode").click(function(){
$("#"+zipbox).val($(this).text());//Set selected zipcode to Textbox
$("#zipcodes").css("display","none");//Close zipcode container
});
});
</script>
I have two html pages, "page1.html" and "page2.html".
page1.html contains a css menu list which will link to page2.html. Part of sample code is below:
<div class="menu">
<ul>
<li>page1</li>
<li>page2
<ul>
<li><a href="page2.html" onclick="displaypdf1();" >pdf1</a></li>
<li>pdf2</li>
when click on one of the link , the tag in "page2.html". However i cannot achieve this. it does not load the pdf correctly.
displaypdf1() javascript function as below:
function display_cover(){
var myPDF = new PDFObject({
url: 'Cover.pdf',
pdfOpenParams: {
view: 'FitB',
viewrect:
'0,0,1000,900',
pagemode: 'none',
scrollbars: '1',
toolbar: '1',
statusbar: '1',
messages: '1',
navpanes: '1' }
}).embed('pdf_display');
}
i'm using pdfObject for opening pdf.
In short i wish to open a pdf file through page1.html css menu.PDF will then be displayed on page2.html in a tag How can i achieve that? Thank you!
You can do this with ajax as follows:
Page 1 HTML
<style>
.wrapper {background-color: #cdcdcd; width: 100%; height: 700px }
object {margin: 0; padding: 0; height: 100%; width: 100%; }
#target { width: 600px; height: 650px; }
input { position:relative; left:20px; }
</style>
<body>
<div class="wrapper">
<input type="button" value="Go">
<div id="target"></div>
</div>
</body>
The button is the trigger,. It can be triggered with an a ref or even a list item from a nav menu.
The id target can be placed in any page as well. I made it so that it displays in this same page but you can change it as you please.
Page 1 JS/JQUERY
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('input').click(function(){
$('#target').load('page2.html');
});
});
</script>
Hopefully this works for you
Page 2 HTML
This is the PDF in an object element that will be loaded as an external page inside your page without refreshing the page or in another page if you choose that.
<object data="https://bitcoin.org/bitcoin.pdf" type="application/pdf" width="50%" height="700px">
alt : page2.pdf
</object>
I tried with your suggestions and it works wonderfully on internet explorer but not chrome. Something wrong with .load. The page has displayed blank. Based on the concept that you had given, i managed to solve my problem!
JS/JQUERY
//script for display Cover.pdf
$(document).ready(function(){
$('#input').click(function(){
document.getElementById('project_details').innerHTML =
'<object type="application/pdf" data="pdf1.pdf" width=1000px height="810px" >
</object>'
});
});
I created a sample based on your idea with the JS above and it works. Hopefully this will be useful for someone else. Thanks lotusms.
I need your help.
I would like to design a javascript function, such that when I call it, it will open up a dialog box asking me to navigate to the selected file, once I click on the "open" button, it will then save the file's path into a var.
How do you do this? I would NOT like to the input type="file" method, as I dont require that particular input to be on my page.
ie:
function getlocation() {
var x = popup the open file dialog box and let the user select a file
}
The only way to allow the user to select a file is to use an <input type="file" />1. You don't have to have this element visible, just on the page.
When a user selects a file, all you can get from it is its name. You cannot get its path. Also, note that file upload elements are asynchronous. You need to use the onchange event (callback) to get the name.
You can hide the upload element using display: none, and then just have another JavaScript function programmatically trigger it. (NOTE: This method doesn't work in Opera, and possibly other browsers. It was tested in Chrome, Firefox, and IE 8/9)
<style>
#getFile{
display: none;
}
</style>
<input type="file" id="getFile" />
<button id="openFile" type="button">Click Me</button>
<script>
var uploadElement = document.getElementById('getFile'),
uploadTrigger = document.getElementById('openFile'),
openFileUpload = function(){
uploadElement.click();
},
alertValue = function () {
alert(uploadElement.value);
};
if (window.addEventListener) {
uploadTrigger.addEventListener('click', openFileUpload);
uploadElement.addEventListener('change', alertValue);
} else {
uploadTrigger.attachEvent('onclick', openFileUpload);
uploadElement.attachEvent('onchange', alertValue);
}
</script>
DEMO: http://jsfiddle.net/rJA7n/3/show (Edit it at: http://jsfiddle.net/rJA7n/3/)
Another method that should work in most browsers (including Opera) is to make the file upload element "invisible" and put an element on top of it. So, when you click on what you think is a button, you're really clicking on the upload element. AJAX uploaders (like http://fineuploader.com/) use this method to allow you to "style" upload buttons.
<style>
#getFile{
width: 100px;
opacity: 0;
filter: alpha(opacity = 0);
}
#openFile{
display: inline;
margin-left: -100px;
background-color: red;
height: 30px;
width: 100px;
padding: 10px;
color: white;
text-align: center;
}
</style>
<input type="file" id="getFile" />
<div id="openFile">Click Me</div>
<script>
var uploadElement = document.getElementById('getFile'),
alertValue = function(){
alert(uploadElement.value);
};
if(window.addEventListener){
uploadElement.addEventListener('change', alertValue);
}
else{
uploadElement.attachEvent('onchange', alertValue);
}
</script>
DEMO: http://jsfiddle.net/cKGft/4/show/ (Edit it at: http://jsfiddle.net/cKGft/4/)
1 Well, you can use drag and drop if you want to be really fancy. I made a quick demo of that here: http://jsfiddle.net/S6BY8/2/show (edit it at: http://jsfiddle.net/S6BY8/2/)
I am a new HTML developer, so can someone please describe briefly how to write a JavaScript function to open an image in (css) pop up with a close button?
Just to get you started I've set up an simple example for you, try it out here: http://www.lunarailways.com/demos/popup.html
<html>
<head>
<style>
#popup {
border: 1px solid gray;
border-radius: 5px 5px 5px 5px;
float: left;
left: 50%;
margin: auto;
position: fixed;
top: 200px;
z-index: 9999;
}
</style>
</head>
<body>
<h1>Your page</h1>
Open Image 1
Open Image 2
Open Image 3
<div id="popup" style="display:none">
<a id="popup-close" href="" class="button">Close</a>
<p>
<img id="image-placeholder" src="">
</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$(".popup-open").click( function(e) {
$("#popup:visible").hide(); //hide popup if it is open
e.preventDefault(); // don't follow link
$("#image-placeholder").attr("src", $(this).attr("href")); // replace image src with href from the link that was clicked
$("#popup").fadeIn("fast"); //show popup
});
$("#popup-close").click( function(e) {
e.preventDefault();
$("#popup").fadeOut("fast");
});
});
</script>
</body>
</html>
FanyBox, which is uses the jQuery library is the right tool for that.
In a simple way,
- place anchor and image tags in a div container.
- set display attribute of the div to "none".
- create displayMyPopup and closeMyPopup functions in js.
- set anchor's onclick attribute to closeMyPopup.
- in displayMyPopup function, set the div's display attribute to "block"
- in closeMyPopup function, set the div's display attribute to "none"
or you can use jquery's show/hide functions.
I guess jQuery library is a good start. Start with defining your HTML markup and then google image galleries and see what fits your bill.
Something like this:
<ul class="gallery">
<li><img src="path-small-image" alt="thumbnail" /></li>
</ul>
I am using ColorBox to launch a modal window on my site. In the modal a SurveyMonkey survey loads. At the end of the survey, depending on how people answer it, they will be offered a link to click. When clicked, we need to CLOSE the modal and then load a new page in the main site under the modal. Is there a way to do that by clicking a link in the modal?
THANKS for your help and expertise.
// put it in the base document
$(document).bind('cbox_closed', function(){
// navigate to new URI in a prefered way
});
// a little different way to achieve same result
$(".example9").colorbox(
{
onClosed:function()
{
// navigate to new URI in a prefered way
}
});
Additional example.
HTML:
<a id="base" href="#">Show colorbox</a>
<div style='display: none'>
<div id='divModal' style='padding: 10px; background: #fff; border: 1px solid red; z-index=100;'>This is test
<a id="google" href="#">google.com</a>
</div>
</div>
JavaScript:
$('a#base').colorbox({inline: false, href:'#divModal', width: "150px", height: "100px"});
$('a#google').click(
function()
{
$.colorbox.close();
window.location = 'google.com';
}
)