It's like
<img src="somesrc" file="filepath" />
The src is not the correct url, how can I load the img using the url in file attribute for all images?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>
<body>
<img src="wrongsrc" file="http://www.hi-pda.com/forum/uc_server/data/avatar/000/52/56/39_avatar_middle.jpg"></img>
<script >
$("img").each(function(){
var filepath = $(this).prop("file");
if (filepath) this.src=filepath;
});
</script>
</body>
</html>
I change my code to this, but it does not work.
Using jQuery to edit all of your images:
$(function() {
$("img").each(function(){
var filepath = $(this).attr("file");
if (filepath) this.src=filepath;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="wrongsrc" file="http://www.hi-pda.com/forum/uc_server/data/avatar/000/52/56/39_avatar_middle.jpg"></img>
<img src="wrongsrc" file="http://www.hi-pda.com/forum/uc_server/data/avatar/000/52/56/39_avatar_middle.jpg"></img>
<img src="wrongsrc" file="http://www.hi-pda.com/forum/uc_server/data/avatar/000/52/56/39_avatar_middle.jpg"></img>
<img src="wrongsrc" file="http://www.hi-pda.com/forum/uc_server/data/avatar/000/52/56/39_avatar_middle.jpg"></img>
Add an id to each image
For HTML
<img SRC="somesource" id="1" />
<img SRC="somesource" id="2" />
<img SRC="somesource" id="3" />
For JavaScript
(document).ready(function (){
$("img").each(function() {
var id = $(this).attr('id')
$(this).attr('src', ''+id+'_image.png');
});
});
Rename your images like 1_image.PNG, 2_image.PNG and so on
It sounds confusing but may work, inform if it works, on a mobile device so can't test it myself.
The above answer is right, it goes will when I run it in chrome in a PC.But when I put that code in ios, it seems there is a little problem about using jQuery in ios.Maybe I did not using jQuery in the right way.I solved my problem using the method below:
<script type="text/javascript">
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
if(imgs[i].getAttribute("file")!=null&&imgs[i].getAttribute("file")!=undefined){
imgs[i].src=imgs[i].getAttribute("file");
}
}
</script>
Please use another version of jQuery and it will work fine.
jQuery("img").each(function(){
var filepath = jQuery(this).attr("file");
if (filepath) this.src=filepath;
});
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<img src="wrongsrc" file="http://www.hi-pda.com/forum/uc_server/data/avatar/000/52/56/39_avatar_middle.jpg">
Related
I'm trying to convert a excel file (which user upload it in a input file tag) to a html table tag.
I found a code on "redstapler" but it doesn't work.
I don't know where is the problem.
<html>
<head>
<script src="jquery.min.js"></script>
<script lang="javascript" src="xlsx.full.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="navbar"><span>Red Stapler - SheetJS </span></div>
<div id="wrapper">
<input type="file" id="input-excel" />
</div>
<script>
$('#input-excel').change(function(e){
var reader = new FileReader();
reader.readAsArrayBuffer(e.target.files[0]);
reader.onload = function(e) {
var data = new Uint8Array(reader.result);
var wb = XLSX.read(data,{type:'array'});
var htmlstr = XLSX.write(wb,{sheet:"sheet no1", type:'binary',bookType:'html'});
$('#wrapper')[0].innerHTML += htmlstr;
}
});
</script>
</body>
</html>
It works for me...
I downloaded and embedded the xlsx.mini.js from https://github.com/SheetJS/sheetjs
Make sure your path is correct here:
<script type="text/javascript" src="js/xlsx.mini.js"></script>
And also check the name of your sheet which you want to read.
sheet:"sheet no1"
For example:
Now how can I run this code from var v?
The code:
var v = <iframe src="https://www.youtube.com/embed/wpxqcq6b"><iframe>
You will have to use innerHTML function of Javascript to achieve this. Check below code for reference. You will need a placeholder in the document to insert the <iframe> element, here I've used div with id=placeiframe.
<html>
<head>
<script type="text/javascript">
function insertiFrame(){
var v = "<iframe src='https://www.youtube.com/embed/wpxqcq6b'><iframe>";
document.getElementById("placeiframe").innerHTML = v;
}
</script>
</head>
<body>
<div>
<b>Example of iFrame insertion via Javasript</b><br/>
<input type="button" onClick="insertiFrame();" value="Insert iFrame below"/><br/>
<div id="placeiframe"></div>
</div>
</body>
</html>
<body>
<div>
<b>Example of iFrame insertion via Javasript</b><br/>
<input type="button" onClick="insertiFrame();" value="Insert iFrame below"/> <br/>
<div id="placeiframe"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
<script>
function insertiFrame(){
var v = "<iframe src='https://www.youtube.com/embed/wpxqcq6b'><iframe>";
$("#placeiframe").append().html(v);
}
</script>
I am trying to implement a button that plays audio. I don't want to have the slider.
Is there anyway to rid of the slider, or maybe use an image of a button instead?
Current code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Music</title>
<style type="text/css">
body {
color:transparent;
}
</style>
</head>
<body onLoad="RandomSong();">
<audio id="content" src="background1.mp3" controls></audio>
<script>
function RandomSong() {
var Music = ["background1.mp3","background2.mp3","background3.mp3","background4.mp3","background5.mp3"];
var randomCode = Math.floor(Math.random()*Music.length);
document.getElementById("content").value = "mp3=" + Music[randomCode] + "&showslider=0&width=5&loop=1&autoplay=0&volume=50";
}
</script>
</body>
</html>
There is a simple JQuery solution to this:
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#track1').click(function(){
$('#wrap').append('<embed id="embed_player" src="audio.wav" autostart="true" hidden="true"></embed>');
});
});
</script>
<img name="track1" src="images/track1.png" width="180" height="180" border="0" id="track1" alt="" />
<div id="wrap"> </div>
Src: Check out this similar post with an answer from #blasteralfred: Play sound file when image is clicked
I'm into making word games for kids, I been playing around with this code for How to make an image that plays audio when cicked. I hope this will help you
I'm using Notepad++ this code works in Google Chome
<!DOCTYPE html>
<html>
<script>
var audio1 = new Audio("/Sound 1/Samples 1Sounds/CAT.wav ");
audio.oncanplaythrough = function(){}
audio.onended = function(){}
</script>
<input type="image" id="myimage"style="height:200px;width:200px;"src="/Picture 1/Samples Pictures/cat.jpg"
onclick="audio1.play()">
<script>
var audio2 = new Audio("/Sound 1/Samples 1Sounds/dog.wav ");
audio.oncanplaythrough = function(){}
audio.onended = function(){}
</script>
<input type="image" id="myimage" style="height:200px;width:200px;"src="/Picture 1/Samples Pictures/dog.jpg"
onclick="audio2.play()">
</html>
I'm wanting to create a "Latest Video" block on my website, but I only need the YouTube thumbnail image and MAYBE the title of the video. I found a method for doing an embed for the latest video itself, but I'm uncertain if I can modify it for just the thumbnail.
<!DOCTYPE html>
<html>
<head>
<title>YouTube Recent Upload Thing</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<div id="static_video"></div>
<script type="text/javascript">
function showVideo(response) {
if(response.data && response.data.items) {
var items = response.data.items;
if(items.length>0) {
var item = items[0];
var videoid = "http://www.youtube.com/embed/"+item.id;
console.log("Latest ID: '"+videoid+"'");
var video = "<iframe width='420' height='315' src='"+videoid+"' frameborder='0' allowfullscreen></iframe>";
$('#static_video').html(video);
}
}
}
</script>
<script type="text/javascript" src="https://gdata.youtube.com/feeds/api/users/urusernamehere/uploads?max-results=1&orderby=published&v=2&alt=jsonc&callback=showVideo"></script>
</body>
</html>
Can this be repurposed for my idea? And how can I do it if it can't? I have basic HTML and CSS knowledge, with a very limited understanding of javascript and php. If I can just get something that will swap the thumbnail and ideally display the title, I can handle styling and implementation. Also interested in the same for specific playlists' most recent addition, but that doesn't have to happen.
Not sure if this is what you mean but you can try something like:
<div onclick="this.style.display='none'; this.nextSibling.style.display='block';"><img src="image.png" style="cursor:pointer" /></div><div style="display:none">
<!-- Embed code here -->
</div>
.load() only works on files coming from a server, so it will work later as I'm going to put this on a server
Edit: This code works on firefox but not on chrome
I've been trying to use ajax to load a webpage after selecting an option but the script doesn't even seem to load
here's the script + html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="DaVinciRace.css" />
<title> Da Vinci Race 2014-2015 </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
</head>
<body style="background:#f2f2f2;">
<div id="logo">
<img src="Resources\DVRLogo.png"/>
<!-- <p class="text">Da Vinci Race</p> -->
</div>
<div id="options" style="background:#0c0c0c; float:right;">
<div class="menu">
<div class="chronometre" ></div>
</div>
</div>
<div id="DVRChrono">
</div>
<script>
$(document).ready(function(){
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
})
});
</script>
</body>
</html>
the document "Chronometre.html" is in the same folder as this html page
I feel like I'm missing something obvious but can't for the life of me figure out what it is
Try this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<script>
(function($){
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
})
})(jQuery)
</script>
This isn't adding a click handler:
$("#options").on("click", ".chronometre", function() {
// code
});
Because it executes before the #options element exists on the page. The code is executing without error, the jQuery selector simply isn't finding anything. So there are no elements to which a handler can be attached.
You can fix this either by moving the code to the end of the page or by wrapping it in the document.ready handler:
$(function() {
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
});
});
Additionally, your script tags are broken. Each tag should have either a src or content, but not both. Separate them:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
// your code
</script>