I want to run a javascript function with the pre loaded text from database. This function is about to display the image from youtube. Once a pasted link is correct. It will show the thumbnail automatically.
But I want a picture to display with the pre-text link from a database.
Here is the function :
function youtube_parser(url) {
var regExp = /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/;
var match = url.match(regExp);
if (match && match[1].length == 11) {
urllink = match[1];
imagelink = "<img src=\"http:\/\/img.youtube.com\/vi\/"+urllink+"\/hqdefault.jpg\">";
} else {
//urllink = "test"
}
document.getElementById("ytimagelink").value = urllink;
document.getElementById("ytimage").innerHTML = imagelink;
}
HTML
<div><strong>Insert YouTube url:</strong></div>
<input type="text" id="ytlink" onkeyup="youtube_parser(this.value)">
<hr>
<div><strong>Output: YouTube video id:</strong></div>
<input type="text" id="ytimagelink" value="">
<div><strong>Output: Thumbnail</strong></div>
<div id="ytimage"></div>
Fiddle : http://jsfiddle.net/PMrLR/7/
This function will work as I put the url in #ytlink because there is a onKeyUp property to trigger the function.
So, I expect this function to work with the pre-loaded text without doing anything to it again.
Your function will work as it is, just give it the text you loaded from the database as it's argument:
// ...get data from the database somehow, and then:
youtube_parser(url_from_database);
You'll have to wait for the document to load first, and then call the youtube_parser(yourUrl). Do it like this in VanillaJS
document.addEventListener("DOMContentLoaded", function() {
youtube_parser('https://www.youtube.com/watch?v=OnXTf8FNUrc');
});
Here is the snippet for you, show it and click run button
function youtube_parser(url) {
var regExp = /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/;
var match = url.match(regExp);
if (match && match[1].length == 11) {
urllink = match[1];
imagelink = "<img src=\"http:\/\/img.youtube.com\/vi\/" + urllink + "\/hqdefault.jpg\">";
} else {
//urllink = "test"
}
document.getElementById("ytimagelink").value = urllink;
document.getElementById("ytimage").innerHTML = imagelink;
}
document.addEventListener("DOMContentLoaded", function() {
youtube_parser('https://www.youtube.com/watch?v=OnXTf8FNUrc');
});
body {
font-family: arial, helvetica, sans-serif;
font-size: 18px;
}
<div><strong>Insert YouTube url:</strong>
</div>
<input type="text" id="ytlink" onkeyup="youtube_parser(this.value)">
<hr>
<div><strong>Output: YouTube video id:</strong>
</div>
<input type="text" id="ytimagelink" value="">
<div><strong>Output: Thumbnail</strong>
</div>
<div id="ytimage"></div>
Related
I have the following script that is not giving me the result I want. JSFiddle link at the bottom.
Note: This is not my image. I grabbed it randomly from imgur.
I expect:
<img src="https://i.imgur.com/MiOeWrk.jpg" style="max-width:800px;">
But I get this, I believe, but I'm unable to write this in a code block while debugging, for some reason.
<img src="http://thisismydomain.com/https://i.imgur.com/MiOeWrk.jpg" style="max-width:800px;">
Here's my script. Please advise:
<div>Show Image</div>
<div id="jsdebug">jsdebug</div>
<div id="video_aba">video_aba</div>
<script>
function viewimage(ytlink, uid) {
var imagelink = ytlink;
document.getElementById("jsdebug").innerHTML = imagelink;
var uid = uid;
if (imagelink.length == 0) {
imageembed = "<strong>Sorry, unable to load.</strong>";
} else {
imageembed = "<img src=\"/" + imagelink + "\" style=\"max-width:800px\">";
}
document.getElementById("video_aba").innerHTML = imageembed;
}
</script>
https://jsfiddle.net/gde5630h/
The problem is what your image link coded . It's like this imageembed = "<img src=\"/" + imagelink + "\" style=\"max-width:800px\">";
/ => this will prepend to your current domain url eg.if your domain is localhost it will goes localhost/https://i.imgur.com/MiOeWrk.jpg
So remove / from your image link
Your attribution is not correct. href should be replaced with onclick event.
"href" is not used for javascript events. It is used to link the webpages.
javascript events are onclick, onhover, onmouseenter, etc.
function viewimage(ytlink, uid) {
var imagelink = ytlink;
var uid = uid;
if (imagelink.length == 0) {
imageembed = "<strong>Sorry, unable to load.</strong>";
} else {
imageembed = `<img src="${ytlink}" style="width:800px">`;
}
document.getElementById("video_aba").innerHTML = imageembed;
document.getElementById("jsdebug").innerText = imageembed;
}
a {
color: blue;
text-decoration: underline;
cursor: pointer;
}
<div>Show Image</div>
<div id="jsdebug">jsdebug</div>
<div id="video_aba">video_aba</div>
i have building a Giphy Gif search app through giphy API and it works fine just each time when i tried to type something new in the search text and the new search result won't pop out unless i reload the page.
the HTML code as following:
<html>
<head>
<title>My Giphy Search App</title>
<style>
.container-image {
width: 30%;
display: inline-block;
float: left;
margin-right:3%;
}
</style>
</head>
<body>
<div class="container container-padding50">
<input type="text" class="js-userinput container-textinput" placeholder="refresh the page if you wanna searching more">
<button class="js-go container-button">Go!</button>
</div>
<div class="js-container">
</div>
<script src ="javascript/main.js"></script>
</body>
the js code in main.jsfile as:
document.querySelector(".js-go").addEventListener("click",function(e){
var input = document.querySelector("input").value;
searchGiphy(input);
});
document.querySelector(".js-userinput").addEventListener("keyup",function(e){
var input = document.querySelector("input").value;
if(e.which == 13){
searchGiphy(input);
}
});
function searchGiphy(searchResult){
var url = "http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=" + searchResult;
var GiphyAJAXCall = new XMLHttpRequest();
GiphyAJAXCall.open("GET",url);
GiphyAJAXCall.send();
GiphyAJAXCall.addEventListener("load",function(e){
var data = e.target.response;
pushToDOM(data);
});
}
function pushToDOM(input){
var response = JSON.parse(input);
var imageUrls = response.data;
var container = document.querySelector(".js-container");
imageUrls.forEach(function(image){
var src = image.images.fixed_height.url;
container.innerHTML += "<img src=\"" + src + "\" class=\"container-image\">";
});
}
I am pasting all the js code above and wondering am i wrong with the ajax calling here? Could some one help me with this?
You are appending the results to the end of the current html instead of replacing what is already there. Instead use another variable to build the new html string you are constructing and then when you are done replace the innerHTML of the container with the new string.
function pushToDOM(input){
var response = JSON.parse(input);
var imageUrls = response.data;
var container = document.querySelector(".js-container");
var html = "";
imageUrls.forEach(function(image){
var src = image.images.fixed_height.url;
html += "<img src=\"" + src + "\" class=\"container-image\">";
});
container.innerHTML = html;
}
im basic developer just wanted to push images one after other when an new image is been selected by user ,
following is my javascript :-
preview.js
<script language="javascript" type="text/javascript">
$(function () {
$("#fileupload").change(function () {
if (typeof (FileReader) != "undefined") {
var dvPreview = $("#dvPreview");
dvPreview.html("");
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
$($(this)[0].files).each(function () {
var file = $(this);
if (regex.test(file[0].name.toLowerCase())) {
var reader = new FileReader();
reader.onload = function (e) {
var img = $("<img />");
img.attr("style", "height: 100px; width: 100px; margin-top: 20px;");
img.attr("src", e.target.result);
dvPreview.append(img);
}
reader.readAsDataURL(file[0]);
} else {
alert(file[0].name + " is not a valid image file.");
dvPreview.html("");
return false;
}
});
} else {
alert("This browser does not support HTML5 FileReader.");
}
});
});
</script>
Html
Index.html
<div id='file'>
<label for="fileupload" style="margin-right:5px;">Group Image/Logo</label><br>
<input id="fileupload" type="file" multiple="multiple"/>
<div id="dvPreview">
</div>
</div>
This code displays the image perfectly , but only in single instance( thumbnail gets changed every time he selects an image) .
What is neccessary to just push & show the thumbnail of all the images that user wants to upload ? .
Searching google , Points which can be usefull :-
using Array &
using foreach loop
Any one can explain the proper syntax ? It would be great . Thank you .
JSFIDDLE
I have the following code for making the button not visible and it works for a second and then button comes again. The links on navigates on the same page
I have tried "return false;" but then my navigation doesn't work.
What to do for keeping the button hidden?
JavaScript
function btn_hide(){
document.getElementById("btn_shfaqe").style.display="none";
}
html
test1
You have to do two things; Return the function and return false, like this:
javascript
function btn_hide(){
document.getElementById("btn_shfaqe").style.display="none";
return false;
}
html
test1
Here's a DEMO
EDIT according to comment
You are better off hiding the button serverside, but if you really want to use javascript you can do this on page load:
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
window.onload = function() {
var vid_id = getParameterByName('vid_id');
if (vid_id == 0 || vid_id == 5) {
document.getElementById("btn_shfaqe").style.display="none";
}
}
It is an anchor tag . I will navigate you to another page .
If you don't want to navigate to another page you may use
javascript:void(0)
as
<a href="javascript:void(0)" onclick="btn_hide();">
Try this fot javascript :
<script>
function visibilite() {
var targetElement = document.getElementById(\'div_connexion\');
targetElement.style.display = "none";
}
</script>
and this in the html :
<div id="div_connexion"><a class="connexion" href="javascript:visibilite();">Connexion</a></div>
I have this on my website and when I click on the div it desapear until the user refresh the page.
The links on navigates on the same page I have tried "return false;" but then my navigation doesn't work.
You want to hide the link and still be able to navigate?
There are two ways of solving the problem:
Server-side: add a parameter to your url, like so: ?tip=fin&vid_id=0&hideButton=1 and on server side apply the display: none; style to your element if it is set. If you're using PHP, something along the lines of the following should do the trick:
<?php if (isset($_GET['hideButton'])) { echo 'style="display: none;"'; }
Client-side: write some flag value to localStorage when button is clicked. When the page is loaded, check if the flag is set. If it is set - hide the anchor.
// Onclick handler:
myButton.addEventListener('click', function () {
localStorage.setItem('hideButton', 'yes');
}, false);
// Onload handler:
window.addEventListener('load', function () {
if (localStorage.getItem('hideButton') === 'yes') {
myButton.style.display = 'none';
}
});
Using one of these ways will hide the link while keeping navigation working. You don't even need to hide the button in the onclick event handler.
Please try with thw below code snippet.
<head runat="server">
<title></title>
<script type="text/javascript">
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
function btn_hide() {
document.getElementById("btn_shfaqe").style.display = "none";
}
</script>
</head>
<body>
<div>
<button id="btn_shfaqe" style="display: none">
jayesh</button>
test1
<script type="text/javascript">
if (getParameterByName("tip") == "") {
document.getElementById("btn_shfaqe").style.display = "";
}
</script>
</div>
</body>
</html>
I got a webpage with some homemade search engine which is supposed to look for some data in a server-side text file. I use JS to parse this file, it works well except for the very 1st time I use it... The culprit seems to be my fetchText() function which doesnt return anything the first time. Note that if I add a alert() inside the fetchText() it works correctly (see note in JS source code). I guess the IFRAME is not fully loaded or something. What can I do ?
Webpage code
<form style="margin-top:15px; margin-left:15px;width:200px;">
<input type="text" value="NGR_" id="srcTxtInput" style="margin-top:0px;margin-left:0px;width:100px;"/>
<input type="button" value="Go" onclick="SearchString('./Coordinates.txt')" />
</form>
<div id="searchResults" style="vertical-align:right;margin-top:25px;">
<select size="4" id="select_list" onchange="Selec_change();" ondblclick="Selec_change();" style="visibility: hidden; width:250px;margin-left:8px;" ></select>
<img id="closeImg" src="./close.png" height="15px" width="15px" style="opacity:0.5;visibility:hidden; margin-left:235px;margin-bottom:5px;margin-top:5px;vertical-align:top;" alt="Close results" title="Close results" onclick="HideSearch();" onmouseover="this.style.cursor='pointer';"/>
</div>
JS code
function SearchString(txtFile){
var slist = document.getElementById('select_list');
var str = trim(document.getElementById('srcTxtInput').value.toUpperCase());
if(str == "" ){
slist.options.length = 0; //empty list
HideSearch();
exit;
}
var txt = fetchText(txtFile);
//DO SOMETHING
}
function fetchText(txtFile) {
var d = document;
var txtFrame = d.getElementById('textReader');
txtFrame.src = txtFile;
**//Note that if I add *alert(txtFrame.src)* here the function works the 1st time**
var text = '';
if (txtFrame.contentDocument) {
var d = txtFrame.contentDocument;
text = d.getElementsByTagName( 'BODY')[ 0].innerHTML;
}
else if (txtFrame.contentWindow) {
var w = txtFrame.contentWindow;
text = w.document.body.innerHTML;
}
return text;
}
Since loading page content like that is an asynchronous operation, you can't expect the contents to be there immediately after setting the "src" attribute of your <iframe>. You'll have to put the code that searches through the text in a "load" event handler on the frame document.
That means you'll write something like:
fetchText(textFile, function(theText) {
// DO SOMETHING
});
and modify "fetchText()" to be more like this:
function fetchText(txtFile, whenLoaded) {
var d = document;
var txtFrame = d.getElementById('textReader');
txtFrame.onload = function() {
var text = '';
if (txtFrame.contentDocument) {
var d = txtFrame.contentDocument;
text = d.getElementsByTagName( 'BODY')[ 0].innerHTML;
}
else if (txtFrame.contentWindow) {
var w = txtFrame.contentWindow;
text = w.document.body.innerHTML;
}
whenLoaded(text);
};
txtFrame.src = txtFile;
}