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');
}
Related
I am trying to get href link from google map as shown in screenshot. The link is inside iframe. It gives null/error value from this below code. Google map is embed using jquery.
I tried: `
var a_href = $(this).find('div .google-maps-link a').attr('href');
var hrefs = $('#mapDiv .google-maps-link').find('a').attr('href');
var href = $('.google-maps-link').find('a').attr('href');
var values = $("#mapDiv .google-maps-link a").prop('href');
var value = $("#mapDiv .gm-style .place-card .bottom-actions .google-maps-link
a").attr('href');
`
screenshot
Help me.
Update:
<div class="col-md-6" id="map-location">
<div id="dvmap"></div>
</div>
$(document).ready(function () {
$.ajax({
url: "#Url.Content("~/GMap/GetGMapDataInfo")",
method: "GET",
success: function (result) {
var json = JSON.parse(result.data);
$("#dvmap").html('<iframe name="frame1" scrolling="no" marginheight="0" marginwidth="0" id="gmap_canvas" src="' + json.MapLocation + '" width="520" height="400" frameborder="0"></iframe>');
},
error: function () {
}
});
});
I want to share this location (2880 Broadway)
In View large map which is in anchor tag. I need This href link.
For security reasons, you can not access the url of an iframe served on another domain.
Example this is my content
<iframe width="560" height="315" src="https://www.youtube.com/embed/H76_oByaDZk" frameborder="0" allowfullscreen></iframe>
Game of Thrones S7 XXXXXXXXXXXXXXXXXXXXXXXXXXXXX
My code is working , click button then loading iframe but i want to hide my iframe an html element .
this is my single.php
$id = md5(uniqid(mt_rand(), true));
$text = the_content_devturkeli('<p class="serif">Full Text »</p>');
$last = preg_replace('^<iframe(.*?)></iframe>^', 'Click To Watch <div style="display: none;" id="' . $id . '"><embed\\1>\\2</embed> Hide</div>', $text);
unset($id);
echo $last;
The video loading after click button , but i can not hide html source code
I tried a lot but i dont know how to do it . When you answering this question please tell me where should i add your code (function.php or smt) cause many times the website doesnt work when i add code . Have a good day .
Also i changed those
wp-includes/post-template.php
function the_content_devturkeli($more_link_text = null, $stripteaser = 0, $more_file = '') {
$content = get_the_content($more_link_text, $stripteaser, $more_file);
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
return $content;
}
And header.php
<script type="text/javascript">
function showBlock(blockId) {
document.getElementById(blockId).style.display = "block";
}
function hideBlock(blockId) {
document.getElementById(blockId).style.display = "none";
}
</script>
Which part should i edit those . I want to hide html source code until clicked
this part from content not all content .
<iframe width="560" height="315" src="https://www.youtube.com/embed/H76_oByaDZk" frameborder="0" allowfullscreen></iframe>
To hide the result html source code until clicked your desired button you need to use ajax. So in your button click function call your ajax and from that ajax call return your desired html code(iframe code in your case) and put that code in your html (using jQuery you can use html(returned_iframe_code), append(returned_iframe_code) or prepend(returned_iframe_code) etc. function) or javascript.
I am not providing you any code as you can implement the ajax code many way as you like. This is the idea you can achieve your requirements.
Thanks.
I want to laod my page in iframe but I found nothing
my formDemand.js:
$(document).ready(function() {
console.log("form demande............");
var chauffeur = JSON.parse(sessionStorage.getItem("chauffeur"));
console.log("data.userId"+chauffeur.userId);
console.log("SUCCESSSSSSSSSS::::::::::"+chauffeur.emailAddress);
$('#demande').html('<iframe src=http://147.282.192.216:8087/delegate/ticketservlet?mode=1&email='+ chauffeur.emailAddress+'name="myFrame"'+ 'id="idFrame" onload="'+trigger()+'">'+'</iframe>');
console.log("DDDDDDDDDDDDDDD::::::::::");
function trigger() {
alert("Chargé");
}
in formDemand.html
<div id="demande" style="padding-left:10px;padding-right:10px;background:#fff;width:400;height:900;" >
result:
what's the problem please??
Your src attribute is missing double quotes.
$('#demande').html('<iframe src="http://147.282.192.216:8087/delegate/ticketservlet?mode=1&email='+ chauffeur.emailAddress+'" name="myFrame" id="idFrame" onload="'+trigger()+'">'+'</iframe>');
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.
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+'"/>'
///});