I am trying to display a button if the src attribute of an iframe on the same page contains a certain text.
See jsFiddle for example.
I am basically trying to only show the "download MP3" button if the iframe has a valid soundcloud url as src attribute.
The one thing all valid soundcloud iframes have in common is: all src urls start with
//w.soundcloud.com/player/?url=https%3A%2F%2Fsoundcloud.com%2F
You can get the dom element, and check it's src attribute.
Something like that:
const src = document.getElementById('ifrm').src;
if (src.indexOf('some')) {
console.log('YAY');
} else {
console.log('Not Yay')
}
<iframe src="https://some-site.com" id="ifrm" />
consider the following code snippet:
var btn = document.getElementById("buttonId");//get the button
var src = document.getElementById("iframeId").src; // get the src
var url = "//w.soundcloud.com/player/?url=https%3A%2F%2Fsoundcloud.com%2F"
if(src.indexOf(url) !=-1){ //this will return -1 if false
btn.style.display = "inline-block";//show the button
}else{
btn.style.display = "none";//hide the button
}
or you can use regular expression test function :
var btn = document.getElementById("buttonId");//get the button
var src = document.getElementById("iframeId").src; // get the src
var patt = //"/w.soundcloud.com/player/?url=https%3A%2F%2Fsoundcloud.com%2F"/;
if(patt.test(src)){ // will return true if found
btn.style.display = "inline-block";//show the button
}else{
btn.style.display = "none";//hide the button
}
hope it helps
Related
hey there i'm making a simple webpage which requires to download an output image file at the last step..
but i don't know how can i add download button dynamically at correct time, because at starting of a page there is no need of download button..
so i have main.js file:
which looks something looks like this:
let img_code=document.getElementById('img_code');
let textbox=document.getElementById('textbox');
let gen_button_img=document.getElementById("img_button");
gen_button_qr.addEventListener("click",()=>
{
var trailer=textbox.value;
var url='www.example.com';
var result= url.concat(trailer);
if (navigator.onLine)
{
if(trailer.length<=1725 && trailer.length>0)
{
if((trailer !="0")&& (trailer.replace(/\s/g, '').length))
{
image_code.src=result;
alert("Image Generated successfully");
/**/
}
else
{
alert("You cannot create this file spaces only or only with single 0");
}
}
else
{
alert("Maximum charecter limit is exceeded!! ");
}
}
else
{
alert("No Internet Connection");
}
});
So, i have the question is there any way to dynamically add the button which takes file URL as input and download that file through web browser's downloader?
Note=>
I can easily save the result by right click on the picture and save image option; but i want to add an extra button to download the same file.
Most of the things explained in comments so read it first
// arrow function to create and append download button into any element
// it only takes url of file that will download.
const createBtn = (URL) => {
// create button element
const downloadBtn = document.createElement("button");
// you can set any name of id according to your choice
downloadBtn.setAttribute("id", "downloadBtn");
// create anchor element
const downloadLink = document.createElement("a");
// set any thing in inner text
downloadBtn.innerText = "Download Image";
// set download attribute to true
downloadLink.setAttribute("download", true);
// set url with URL
downloadLink.setAttribute("href", URL);
// append button element into anchor element
downloadLink.appendChild(downloadBtn);
// get that element in which download button will append
const container = document.getElementById("container");
// append download button into any element of your choice
container.appendChild(downloadLink);
};
// url of file
const URL = "https://images.pexels.com/photos/863963/pexels-photo-863963.jpeg?cs=srgb&dl=pexels-blaque-x-863963.jpg&fm=jpg"
// call createBtn function with URL
createBtn(URL);
<!-- The element in which download button will be appended -->
<div class="container" id="container"></div>
I am not 100% sure that this will work!
It also not work in stack snippet because iframe tag.
Try to use it locally.
I have a code that asks a user to input a URL and append it to a div using javascript and it works fine. what I was trying to add was editing the user entered URL, specifically change the width and height of the iframe entered by the user then appending it. My current code is attached below. Any help is appreciated. Thanks in advance.
function input() {
globalThis.urlInput = prompt("Enter embed URL:");
if ( urlInput == "") {
alert("No URL Inputted");
} else {
appendUrl();
}
}
function appendUrl(){
document.getElementById("add_to_me").innerHTML += urlInput;
document.getElementsByTagName('iframe').width= "300px";
document.getElementsByTagName('iframe').height= "300px";
}
<button onclick="input()">Input</button>
<div id="add_to_me"></div>
I think this is what you're trying to do;
function input() {
globalThis.urlInput="";
urlInput = prompt("Enter embed URL:");
if ( urlInput == "") {
alert("No URL Inputted");
} else {
appendUrl();
}
}
function appendUrl(){
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src",urlInput );
ifrm.style.width = "300px";
ifrm.style.height = "300px";
ifrm.style.frameborder = "0";
ifrm.allowFullScreen = true;
document.body.appendChild(ifrm);
}
<button onclick="input()">Input</button>
Basically what I do is I create the iframes dynamically and prompt multiple times for url, width and height which I then set on the newly created iframe DOM-Element.
As far as I know it is generally considered bad practice to use global variables. So I edited your code to inject the user input from user function input() into
appendiFrame(input).
Here's my extended code (consider the comments):
function input() {
// create local variable
var input = { url: '', width: '0', height: '0'} // creates dictionary containing input
input.url = prompt("Enter embed URL:")
if ( input.url == "") { // test if url was given
alert("No URL Inputted")
return // return if empty
}
input.width = prompt("Enter width:")
input.height = prompt("Enter height:")
appendiFrame(input)
}
function appendiFrame(input){
iframe = document.createElement('iframe') // create iframe dynamically
iframe.src = input.url;
iframe.width= input.width
iframe.height= input.height
document.getElementById('add_to_me').appendChild(iframe)
}
<button onclick="input()">Input</button>
<div id="add_to_me"></div>
In order to test it you need to also enter the protocol (https) as part of the url. The site also must not send the X-Frame-Options: sameorigin HTTP-header as e.g. Google does or else your browser won't load the iframe.
You might also perform some checking whether the inputs entered are valid.
im new to angular and i have to add a button to an app so when i click, it should start downloading a file already recorded.
i have this code
var _RecordStopCallback = function(blob){
if (!blob && blob.length==0){
$scope.isRecorded = false;
return;
}
$scope.recordObj.recordedData = blob;
const url = URL.createObjectURL(blob);
var el = $("#downloads").html("");
var hf = $("<a></a>");
hf.attr({
src:url,
href:url,
download:$scope.recordFilename
}).html($scope.recordFilename);
hf.appendTo(el);
$scope.isStoping = false;
$scope.recordStatus = false;
$scope.isRecorded = true;
$scope.recordStatusText = "Start";
$scope.streamError = "";
_changeStatusText();
$scope.$apply();
$scope.saveProcess();
and in the HTML file this:
<div ng-show="isRecorded" class="color-info"> Recorded File : <span id='downloads'></span>
<button ng-click="{{recordFilename}}" class="btn-circle btn-circle-default">
<i class="zmdi zmdi-download"></i></button>
this line:
<span id='downloads'></span>
displays the recoded filename and makes it as a link so when you click on it you can directly donwload it, but i dont know how to make the button do the same thing?
any help would be appreciated!
You may register a callback for the button getting clicked and there you can create the same link you showed in your question, style it as hidden, insert it into the DOM and call .click() on it.
Inserting into DOM is required as some browsers will not start the download otherwise.
I am a programming fool,
All I need is to be able to toggle two images, one which acts as the 'up state' of a button and then 'onclick' the second image appears and remains until it is clicked again whereby it is replaced by the the 'upstate image'.
Please don't mock me for this pitifull attempt which fails miserably. Here is my code.
function change() {
if (window.document.pic.src == "imgd1.svg"){
window.document.pic.src ="imgd1over.svg";
}
else if(window.document.pic.src == "imgd1over.svg"){
window.document.pic.src ="imgd1.svg";
}
<img src ="imgd1.svg" name ="pic" id = "test" onclick ="change()"/>
Thank you in anticipation.
Check this demo.
function change(image) {
if (image.src.indexOf("imgd1.svg") > -1){
image.src ="imgd1over.svg";
}
else{
image.src ="imgd1.svg";
}
}
In the fiddle case the image.src wasn't just the image's name, but the full url: http://fiddle.jshell.net/_display/imgd1.svg. So I have used indexOf() to check if the image's source constains the string you want.
Besides, I have changed the way change() function references to the image:
<img src ="imgd1.svg" name ="pic" id = "test" onclick ="change(this)"/>
Using change(this) will set the own image as the first parameter of the event, so you don't need to get it in the window object or event with getElementById or whatever.
function change() {
var image = document.getElementById("test");
if (image.src.indexOf("imgd1.svg") > -1 ){
image.src = "imgd1over.svg";
}
else if(image.src.indexOf("imgd1over.svg") > -1 ){
image.src = "imgd1.svg";
}
}
Here is the working code:
<img src ="imgd1.svg" name="pic" onclick="change();"/>
<script>
function change() {
if (window.document.pic.src == "imgd1.svg"){
window.document.pic.src ="imgd1over.svg";
}
else if(window.document.pic.src == "imgd1over.svg"){
window.document.pic.src ="imgd1.svg";
}
}
<script>
See the full demo:
http://jsfiddle.net/jswsze5q/
Try this:
<script>
function change() {
var img1 = "imgd1.svg",
img2 = "imgd1over.svg";
var imgElement = document.getElementById('test');
imgElement.src = (imgElement.src === img1)? img2 : img1;
}
</script>
<img src="imgd1.svg" id="test" onclick="change();"/>
Example: jsfiddle
Try using Jquery
var flag = 0;
function change(){
if(flag){
$("#img").attr("src","img1.png");
flag = 0;
}
else{
$("#img").attr("src","img2.png");
flag = 1;
}
}
Simplest toggle option
where variable flag acts as flag which detects which image is active
img is the id of image control.
Code to include Jquery from google CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
I am working on a web application, and i need to adjust a People Picker dialog height. currently to keep firing the script when the user open/close the dialog , i set a timer (2 seconds for the script to run), as follow:-
var interval = null; //Defines the start interval variable
$(document).ready(function () { // jQuery needed for this
/* People Picker Fix Starts */
if (navigator.appVersion.indexOf("MSIE 10") > -1) { // IE 10 Specific condition for People Picker Bug
interval = setInterval(adjustPeoplePicker, 2000);
}
/* People Picker Fix Ends */
});
function adjustPeoplePicker() {
if ($('.ms-dlgFrame').contents().find('#resultcontent').length > 0) {
$('.ms-dlgFrame').contents().find('#resultcontent').css('height', '350px');
$('.ms-dlgFrame').contents().find('#MetadataTreeControlTreeSearch').css('height', '350px');
//clearInterval(interval);
}
}
here is the realted markup for the dialog to open:-
<a id="ctl00_ctl41_g_a4fb58d0_ad0d_40cf_a4a3_ccabea410e43_ff141_ctl00_ctl00_UserField_browse" href="javascript:" onclick="__Dialog__ctl00_ctl41_g_a4fb58d0_ad0d_40cf_a4a3_ccabea410e43_ff141_ctl00_ctl00_UserField(); return false;" title="Browse">
<img alt="Browse" src="/_layouts/15/images/addressbook.gif" title="Browse">
</a>
so my question if i can fire the script only when the user click on <a> that have an <imag> inside it where the imag src = addressbook.gif , instead of keeps firing the script every 2 seconds??
$('a img').on('click', callScriptForImage);
....
// it is executed every time, but will call function adjustPeoplePicker()
// only if src attribute includes addressbook.gif, as you asked
function callScriptForImage(e){
var src = $(this).attr('src');
// read image src attribute
if( /addressbook\.gif/.test(src)){
// if src attribute includes addressbook.gif, call function
adjustPeoplePicker();
}
}
You could also listen for clicks on image that have that src attribute, with:
$('a img[src$="addressbook.gif"]').on('click', adjustPeoplePicker);
This way it is a lot cleaner.
<html>
<head>
<script>
function setClick(){
var tL = document.querySelectorAll("img[src*='addressbook.gif']"); //Getting all images which src contains addressbook.gif
for(var i=0, j=tL.length;i<j; i++){
//Just to visualize
tL[i].style.outline = '1px solid red';
//We actually click on the parent (a) and not the img so we set the click on the a tag
//The other tags will keep your normal onclick settings.
tL[i].parentNode.onclick = function(){
//Put your special script for those cases.
//adjustPeoplePicker() //Some version of this.
return false
}
}
}
</script>
</head>
<body onload = 'setClick()'>
<a href = 'https://www.google.com'><img alt = 'Browse' src = 'https://www.google.com/images/srpr/logo11w.png' /></a>
<a href = 'https://www.google.com'><img alt = 'Browse' src = 'https://www.google.com/images/srpr/logo11w.png?test=addressbook.gif' /></a>
<a href = 'https://www.google.com'><img alt = 'Browse' src = 'https://www.google.com/images/srpr/logo11w.png' /></a>
</body>
</html>
https://jsfiddle.net/7u3m2cng/1/
I am assuming you're asking to check to see whether the <img> src = addressbook.gif and NOT the href of <a>?
If that is the case, this should work for you:
$('a img').on('click', function () {
//Check to see if if the href matches addressbook.gif
var src = $(this).attr('src');
var regex = /addressbook\.gif/i;
if (regex.test(src)) {
// Execute your code here.
} else {
//Put anything else you want here
}
});
Hope this helps!
JRad The Bad