I have one button in html template of text! plugin :
<input type="button" id="_print" value="Print">
<iframe name="theFrame"></iframe>
And this is the click event in my view of backbone :
checkOut : function(){
var params = [
'height='+screen.height,
'width='+screen.width,
'fullscreen=yes'
].join(',');
var popup = window.open('urlishere','theFrame', params);
popup.moveTo(0,0);
}
Is it possible to use window.open to open iframe?
Sorry, I didn't see the tag backbone. But if it works for you, here are my 2 cents
For print to work: http://jsfiddle.net/zyGfL/1/
HTML
<input type="button" id="_print" value="Print" onclick="checkout()">
<iframe name="theFrame"></iframe>
JS
function checkout(){
var params = [
'height='+screen.height,
'width='+screen.width,
'fullscreen=yes'
].join(',');
var popup = window.open("http://www.w3schools.com","_blank", params);
}
I am not sure how your Iframe is working currently. But for the print button to work, you have to do something like this.
Related
How can i bind the url result from the jquery to the href ? as you can see on the html below. Thank you.
JQUERY CODE
<script>
$(document).ready(function(){
$("#btnSearch").click(function(){
var yearArray = [];
$("input:checkbox[name=Year]:checked").each(function(){
yearArray.push($(this).val());
});
var makeArray = [];
$("input:checkbox[name=Make]:checked").each(function(){
makeArray.push($(this).val());
});
var url="http://example.com/results?Year="+yearArray.join()+"&Model="+makeArray.join();
alert(url);
});
});
</script>
HTML
<a href="/searchnew/{{ url }}"><button id="btnSearch" class="btn btn-cta margin-bottom-1x search-button cssBase"
type="button""
style="width: 262.5px;">Search</button></a>
You can simpy add href attribute after creating link. What i mean by this is
if your href tag is look like this
<a href="#" id="myurl">
$("#myurl").prop("href",url);
This will simply render your html like this
<a href="http://example.com/results?Year="......(your dynamic values here)">
You don't have to add tag on to button click. Instead, on click of button, within the function after you have prepared url, call
location.href = "searchnew/" + url;
In case you have the base url for the app, you can prepend as well to have the complete url with you.
Use id attribute for your a tag like this-
<a href="....." id="myLink" > ... </a>
And at the end of your jQuery code add the following:
var a = $('#myLink');
var href = a.attr('href');
a.attr('href', href + url);
Here's the Script.
javascript
function linkPageContact(clicked_id){
if(clicked_id === 'website-design-check'){
$('#website-design').attr('checked',true);
window.location.href = "/contact";
}
}
}
I want to check my checkboxes when I click the button with an id=website-design-check.
Here is my HTML.
first.html
<a href="/contact" target="_blank">
<button type="button" class="btn btn-success btn-block" id="website-design-check" onclick="linkPageContact(this.id)">Appointment</button>
</a>
Here's the second HTML file where checkbox is.
second.html
<input type="checkbox" aria-label="Checkbox for following text input" id="website-design" name="website-design">
Now how can I achieve what I want base on the description given above. Can anyone help me out guys please. I'm stuck here for an hour. I can't get any reference about getting a checkbox state from another page.
To do this, you can modify your button link and add in additional parameters that you can then process on the next page.
The code for the different pages would be like:
Edit: I changed it to jQuery, it should work now.
Script
function linkPageContact(clicked_id){
if(clicked_id === 'website-design-check'){
window.location.href = "second.html?chk=1";
}
}
second page
<input type="checkbox" aria-label="Checkbox for following text input" id="website-design" name="website-design">
<script type="text/javascript">
var url = window.location.href.split("?");
if(url[1].toLowerCase().includes("chk=1")){
$('#website-design').attr('checked',true);
}
</script>
since your checkbox is in another html page, so it's totally normal that you can't get access to it from your first html page!
what I can offer u is using the localstorage to keep the id and then use it in your second page to check if it's the ID that u want or not.
so change your function to this :
function linkPageContact(clicked_id){
localStorage.setItem("chkId", "clicked_id");
window.location.href = "/contact";
}
then in your second page in page load event do this :
$(document).ready(function() {
var chkid = localStorage.getItem("chkId");
if(chkid === 'website-design-check'){
$('#website-design').attr('checked',true);
});
You can't handle to other sites via JavaScript or jQuery directly. But there's another way. You can use the GET method to achive this.
First you need to add to the link an attribute like this in your first.html:
/contact?checkbox=true
You can change the link as you want with JavaScript.
Now it will refer to the same page but it can be now different. After that you can receive the parameter with this function on the second.html.
function findGetParameter(parameterName) {
var result = null,
tmp = [];
var items = location.search.substr(1).split("&");
for (var index = 0; index < items.length; index++) {
tmp = items[index].split("=");
if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
}
return result;
}
I got it from this post thanks to Bakudan.
EDIT:
So here is an short theory.
When the user clicks the button on the first page, then you change the link from /contact to /contact?checkbox=true. When the user get forwarded to second.html then you change the checkbox depending on the value, which you got from the function findGetParameter('checkbox').
As all have mentioned you need to use session/query string to pass any variable/values to another page.
One click of the first button [first page] add query string parameter - http://example.com?chkboxClicked=true
<a href="secondpage.html?chkboxClicked=true>
<button>test button</button>
</a>
In the second page- check for the query string value, if present make the checkbox property to true.
In second page-
$(document).ready(function(){
if(window.location.href.contains('chkboxClicked=true')
{
$('#idOfCheckbox').prop('checked','checked');
}
})
Add it and try, it will work.
Communicating from one html file to another html file
You can solve these issue in different approaches
using localStorage
using the query parameters
Database or session to hold the data.
In your case if your application is not supporting IE lower versions localStorage will be the simple and best solution.
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<a href="contact.html" target="_blank">
<button type="button" class="btn btn-success btn-block" id="website-design-check" onclick="linkPageContact(this.id)">Appointment</button>
</a>
<script>
function linkPageContact(clicked_id) {
localStorage.setItem("chkId", clicked_id);
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" aria-label="Checkbox for following text input" id="website-design" name="website-design">
<script>
$(document).ready(function () {
var chkid = localStorage.getItem("chkId");
if (chkid === 'website-design-check') {
$('#website-design').attr('checked', true);
}
});
</script>
</body>
</html>
I want to have one modal, only with content changing. In modal im showing articles via iframe. The problem is that my solution is a bit laggy, and you can see previous article before changing. Im using JS:
function switchTitleMod1(title,id) {
document.getElementById("titleMod1").innerHTML = title;
document.getElementById("iframe").src = "index.php?option=com_content&view=article&id="+id+"&tmpl=component";
}
The modal code:
<div id="informacje" class="uk-modal">
<div class="uk-modal-dialog" >
<a onclick="resetTitleMod1();" class="uk-modal-close uk-close"></a>
<div id="titleMod1" class="uk-modal-header uk-text-bold uk-text-large uk-text-center"><h2>Zapisz si? na kurs</h2></div>
<iframe id="iframe"style="width: 100%;height:650px" scrolling="auto" frameborder="0" src="index.php?option=com_content&view=article&id="34"&tmpl=component" hspace="0">
</iframe>
<div class="uk-modal-caption">Copyright by MRP-KODER</div>
This is how i call the modal:
<a onclick="switchTitleMod1('Szkolenia HACCP','42');" href="#informacje" data-uk-modal="{target:'#informacje',bgclose:false,center:true}" class="uk-button uk-button-medium uk-button-primary"> <i class="uk-icon-info uk-icon-justify"></i>Informacje</a>
My question is: How to create modal via Jquery and only adding deleting DOM. Link to the page: link
Via clicking "Informacje" You will see what the problem is.
I found solution by myself :) I didint use DOM model, but it works fine, for using diffrent modals only by changing button id.
var $jq = jQuery.noConflict();
$jq(document).on('click', '#info', open_info_modal).on('click', '#zapytaj', open_ask_modal);
function open_info_modal(e)
{
var articleId = $jq(e.target).data('id');
var articleTitle = $jq(e.target).data('title');
$jq('#modal').on({
'uk.modal.show':function(){
$jq('#title', $jq(this)).html('<h2>'+articleTitle+'</h2>');
$jq('span', $jq(this)).html('<iframe id="iframe"style="width: 100%;height:650px" scrolling="auto" frameborder="0" src="index.php?option=com_content&view=article&id='+articleId+'&tmpl=component" hspace="0">');
},
'uk.modal.hide':function(){
}
}).trigger('uk.modal.show');
}
function open_ask_modal(e)
{
var articleTitle = $jq(e.target).data('title');
$jq('#modal').on({
'uk.modal.show':function(){
$jq('#title', $jq(this)).html('<h2>'+articleTitle+'</h2>');
$jq('span', $jq(this)).html('<iframe id="iframe2"style="width: 100%;height:600px" scrolling="auto" frameborder="0" src="index.php?option=com_chronoforms5&chronoform=zapytaj-szkolenie&tmpl=component&name1='+articleTitle+'" hspace="0">');
},
enter code here'uk.modal.hide':function(){
}
}).trigger('uk.modal.show');
}
I am very new to AngularJs and I have created a pretty nifty Modal factory. What I am trying to accompish and cannot figure it out is in the "text" for the modal inject and iFrame so I can display other HTML pages. I want to be able to just call my factory and then just specify the URL and the factory will do the work. I have created a Plunker to show what I have, and my attempts at injecting the iFrame
http://plnkr.co/edit/KGz4rWXlxfbJmyzBBwyP?p=preview
<div class="modal-header">
<h3 class="modal-title">{{alert_data.title}}</h3>
</div>
<div class="modal-body">
<h3>{{alert_data.text}}</h3>
<iframe src="http://www.w3schools.com"width="100%" height="100%"frameborder="0"></iframe>
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
You're already passing scope to the modal in the 'alert_data' object, so just tack on the URL to it, expose it in the service as a parameter and bind it to the iframe src.
function alert(type, text, size, url) {
var template = type === 'success' ? 'template-success.html' : 'template-error.html';
var opts = {
size : size || 'sm'
};
var data = {
title : type === 'success' ? "OK" : "Ooops",
text : function(){return text},
url: url
};
return openModal(template, data, opts);
}
And then in the template:
<iframe ng-src="{{ alert_data.url }}" width="100%" height="100%" frameborder="0"></iframe>
You may also have to use the $sce service to trust the URL.
var url = $sce.trustAsResourceUrl("http://www.w3schools.com");
Here's an updated Plunkr as an example:
http://plnkr.co/edit/d1OLRdhc6vKr6OZa6GkN?p=preview
You could use use ng-src like this.
Note that you need to set your src as trusted by calling $sce.trustAsResourceUrl() (see this link for more information as to why it's needed). Line 27 and following:
controller: function ($scope, $uibModalInstance, $sce, alert_data) {
$scope.alert_data = alert_data;
$scope.iframeSrc = $sce.trustAsResourceUrl("http://www.w3schools.com");
js paste iframe:
var iframe = document.createElement('iframe');
iframe.setAttribute("src", "https://www.youtube.com/embed/test");
iframe.setAttribute("width", "100%");
iframe.setAttribute("height", "315");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
document.getElementById("wrapper_video").appendChild(iframe);
for paste in html you need to inject $sce
return $sce.trustAsHtml(iframe);
I've implemented a facebook like button into my (html) website. Now german data protection laws want webpages to be opt-in. Other websites do this by not immediately showing the facebook like but instead showing a button saying "activate facebook button" and when this button is clicked they replace it with the real facebook button.
So it requires two clicks, but this is ok for me. An example is this webpage.
I know html and php but got no clues about javascript (yet). I'd like to know how to implement this: how can I replace the fake button with the facebook one upon clicking?
Looking in their source, they site is using a function they called button2iframe - here it is:
function button2iframe(id,link){
//alert(id);
var substr = link.split("?");
var url = substr[0];
substr.reverse();
substr.pop();
substr.reverse();
var params = substr.join("?");
params = params.split("&");
var k;
var param = "";
var paramname = "";
for( var k=0; k<params.length; k++ ) {
param = params[k].split("=");
if(param.length>1){
if(param.length>2){
paramname = param[0];
param.reverse();
param.pop();
param.reverse();
param[1] = param.join("=");
param[0] = paramname;
}
param[1] = encodeURIComponent(param[1]);
}
params[k] = param.join("=");
}
params = params.join("&");
link = url+"?"+params;
jQuery(function ($) {
$("#"+id).html($('<iframe allowtransparency="true" frameborder="0" scrolling="no" src="'+link+'" id="iframe_'+id+'"/>'));
});
}
And this is what the associated markup for the facebook button looks like:
<li class="wpsoptin_facebook" id="wpsoptin_facebook_39429">
<div class="wpsoptin_medium">
<a class="wpsoptin_sharerlink" href="javascript:button2iframe('wpsoptin_facebook_39429','FACEBOOK LIKE BUTTON IFRAM URL GOES HERE')">Facebook aktivieren</a>
<div class="wpsoptin_sharerend"></div>
</div>
</li>
This code requires you include jQuery in your site as well.
try this if you dont want to use jquery, just remove the couple of line provided Nathan Anderson good answer
//jQuery(function ($) {
// $("#"+id).html($());
document.getElementById(id).innerHTML = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="'+link+'" id="iframe_'+id+'"/>'
///});