I have a function where onclick, I want the iframe to append to another div within my website. So when the user clicks 'watch-youtube-video', this will then grab the iframe from 'youtube-video' and append just the src to the 'fixed-player' iframe src.
I have tried using the below jQuery but I am hitting an error. Could anyone please help?
HTML
<div class="fixed-player"><iframe src=""></div>
<div class="span-row wow scale-anm all animated">
<div class="portal-img ">
<div class="youtube-video">
<iframe frameborder="0" height="100%" width="100%" src="https://youtube.com/embed/10zsTgv8MxA?autoplay=1&mute=1&controls=0&showinfo=0&autohide=1&loop=1" allowautoplay="" allowfullscreen="" data-origwidth="100%" data-origheight="100%" style="width: 0px;">
</iframe>
</div>
</div>
<div class="portal-cont ">
<div class="top-cont ">
<div class="main-button grey-btn watch-youtube-video">
Watch Video
</div>
</div>
</div>
</div>
jQuery
$('.watch-youtube-video').on('click', function(){
$('.overlay').fadeIn();
$('.youtube-viewer-pop').fadeIn();
$(this).parent().parent().parent().find("iframe").attr("src").appendTo('fixed-player');
});
To set the src attribute of a jQuery object, you should be using the .attr() method instead, i.e.: .attr('src', <SOURCE>) instead:
const src = $(this).parent().parent().parent().find("iframe")[0].src;
$('.fixed-player').attr('src', src);
Related
I am currently using Vue JS and the data is coming from API .
to call a data from API I use this method {{services.service_picture}}.
But the problem is I am unable to display the image with this method below.
Can you please send some ideas on how to display it using Vue JS
<div id="main" v-cloak>
<div class="col-sm-5">
<p v-for="picture in services.service_picture"></p>
<img :src="path + '/images/services/'+ picture" class="img-circle" alt="Services" /> </div>
</div>
var main = new Vue({
el: "#main",
data: {
services: [],
path: 'https://examplemyapisource.com'
},
});
API from https://examplemyapisource.com
[
{ "service_picture": "18_1516090191.jpg", } ]
You try here:
<div id="main" v-cloak>
<div class="col-sm-5">
<p v-for="picture in services"></p>
<img :src="path + '/images/services/'+ picture.service_picture" class="img-circle" alt="Services" /> </div>
</div>
Credits to Huang Hong
<img :src="path+'/images/services/'+services.service_picture" class="img-circle" alt="Services">
Note the your v-for only includes the element, therfore you cannot use 'picture' inside the element.
<p v-for="picture in services.service_picture"></p>
<img :src="path + '/images/services/'+ picture" class="img-circle" alt="Services" />
You need to make these changes to get a perfect image.
Here you closed the <p> tag before the image.close that <p> tag after image
<div id="main" v-cloak>
<div class="col-sm-5">
<p v-for="picture in services">
<img :src="path + '/images/services/'+ picture.service_picture" class="img-circle" alt="Services" /> </div>
</p>
</div>
is it possible to make small box file preview in html?
Fo example I have list of attached files: doc, jpeg, pdf... and I want to show small file content near every file title.
Here what I have tried with so far:
<div ng-repeat="attachment in vm.item.attachments" class="attachedFile" layout="row" layout-align="start center" ng-init="url = vm.showAttachment(attachment.path)">
<div flex="5">{{attachment.user_id}}</div>
<div layout="column" flex >
<span class="attachmenTitle">{{attachment.path}}   </span>
<div class="attachedTime">{{vm.getCommentTime(attachment.timestamp)}}</div>
<div ng-click="vm.deleteAttachment(attachment.path, vm.item._id, vm.item.container_id)" aria-label="metadata" class="deleteAttachment">
delete
</div>
</div>
<div class="attachedFilePreview" flex="10">
<iframe id="viewer" src={{url}} frameborder="0" scrolling="no" width="40" height="60"></iframe>
</div>
<div flex="5" class="padding-left-10">
<md-icon md-font-icon="zmdi zmdi-download"></md-icon>
</div>
</div>
How to make show some file preview in iFrame?
I try build app by JQM and I use widget Navbar, until now I used by IFrame but it works not good.
My question is, what can I replace instead of IFrame ?
<div data-role="navbar" class="nav-glyphish-example">
<ul>
<li>
<a href="#info_tab" class="infoButton ui-btn-active" data-icon="custom"
id="infoMenu"> </a></l`enter code here`i>
<li><a href="#calendar_tab" class="calendarButton"
data-icon="custom" id="calendarMenu"></a></li>
<li><a href="#picture_tab" class="picturesButton" data-icon="custom"
id="pictureMenu"> </a></li>
<li></li>
</ul>
</div>
<!-- End Navigation Bar -->
<!-- iFrames -->
<div id="iFramesDIV">
<div id="info_tab" class="fullScreen ">
</div>
<div id="calendar_tab" class="fullScreen hide">
<iframe id="calendarFrame" src="tab_pickadate/calendar.html"
scrolling="no" frameborder="0" class="fullScreen"></iframe>
</div>
<div id="picture_tab" class="fullScreen hide">
<iframe id="pictureFrame" src="" scrolling="no" frameborder="0"
class="fullScreen"></iframe>
</div>
<div id="buy_tab" class="fullScreen hide">
<iframe id="buyFrame" src="tab_buy/buy.html" frameborder="0"
class="fullScreen"></iframe>
</div>
</div>
<!-- End iFrames -->
</div>
<!-- End Content-->
Please help me :)
To use iframes you will need to include JQM library in the source of Iframe. Try including JQM in "tab_pickadate/calendar.html" path. I also worked with Iframes and JQM together.
I need extract value of attribute src from this HTML.
For example from this HTML:
<div class="css_telo js_telo">
<div class="css_teloV">
<div class="css_vlavo">
<div class="css_info css_zena">
<a class="css_foto big_foto" href="" title="Fotka: endoskopia"><span><img id="PPAsrc" src="http://m3.aimg.sk/profil/v_08c261dabb82e3eaded3e54c28c49e35.jpg?13922246241392224624" width="176" height="220" alt="Fotka: endoskopia" /></span></a>Zmeniť fotku
</div>
<div class="por_0">
<div class="css_album css_menubox edit c_prazdne" id="m_fotoalbumy">
<h3>Fotoalbumy<small> (0)</small></h3>
</div>
</div>
<div class="por_1">
<div class="css_album c_video xcss_akt css_menubox edit" id="m_videoalbumy">
<h3>Videoalbumy<small> (0)</small></h3>
</div>
</div>
<div class="por_2">
<div class="css_priatelia css_menubox edit" id="m_userFriends">
<h3>Priatelia<small> (0)</small></h3>
</div>
</div>
</div>
I need get this:
http://m3.aimg.sk/profil/v_08c261dabb82e3eaded3e54c28c49e35.jpg?13922246241392224624
I tried this XPATH expression:
//div[#class="css_telo js_telo"]/div[#class="css_teloV"]/div[#class="css_vlavo"]/div[#class="css_info css_zena"]/a/span/img/#src
But it not work. Where is problem?
it seem like its the only src on the page, you can simply do:
//img/#src
or more specific:
//img[#id="PPAsrc"]/#src
I have an iframe links within an html page as shown below:
<TABLE border="0" width="900">
<tr valign="top">
<td width="300" ALIGN=center>
<div class="item_list">
link
</div>
</td>
<td width="300" ALIGN=center>
<div class="item_list">
<iframe src = 'http://www.flipkart.com/affiliate/displayWidget?affrid=WRID-137232779171598318' frameborder = 0, height=250, width = 300 > </iframe></a><br>
</div>
</td>
<td width="300" ALIGN=center>
<div class="item_list">
<iframe src = 'http://www.flipkart.com/affiliate/displayWidget?affrid=WRID-137232785207215857' frameborder = 0, height=250, width = 300 > </iframe>
Now when i click within an iframe link , it open the link, but when i click back, it automatically redirect me to that iframe link. Can anyone suggest me what's the problem i'am having?
In your case I would implement my own controls for each iframe. Delegate this work to some buttons on your page instead:
<div id="view_iframe">
<iframe id="viewer" name="viewer" width="100%" height="600" src="some.html">
<p>Your browser does not support iframes.</p>
</iframe>
<input type="button" id="back" class="button" onClick="viewer.history.back();" value="<<" />
<input type="button" id="frwrd" class="button" onClick="viewer.history.forward();" value=">>" />
</div>
note - viewer is iframe id
note that both buttons, are positioned absolutely to align with iframe on page resize.
anyway, here are what the iframe controls for this:
// For an iframe's window
iframe.contentWindow.history.back();
iframe.contentWindow.history.forward();
or
iframe.contentWindow.history.go(-1); // back
iframe.contentWindow.history.go(1); // forward