I have 3000 images in a folder. All named 1000.jpg 1001.jpg and so on.
From 1000 to 3000.
I would like to make a html file and to have a text box and when i input the number (ie, 1000) it will show me the file 1000.jpg.
Also when i would click the file it will hide this.
I need this to properly manage the warehouse and to have the pattern images on my mobile.
Thanks
maybe this can help you--
<input type="number" id="my-input">
See the Image
<Script>
$("#b").click(function() {
var s=$("#my-input").val()
$("#b").attr("href", s+".jpeg");
}
});
</script>
So, what it does is that it takes the value of "#my-input" and appends the value of href attribute to the filename.
You can have some thing like this.
document.getElementById("imageid").src= folderPath + document.getElementById("inputID").value + ".jpg";
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="imageName">
<input type="button" id="view" value="View"/>
<div id="imageDiv">
</div>
<script>
$("#view").on("click", function()
{
var image=$("#imageName").val();
$("#imageDiv").html("<img src='"+image+".jpg'></img>");
});
</script>
</body>
</html>
Assuming that this HTML and the images are in the same folder. If the images are in a different folder, change this line:
$("#imageDiv").html("<img src='"+image+".jpg'></img>");
For ex: if the images are in a folder called images:
$("#imageDiv").html("<img src='images/"+image+".jpg'></img>");
Related
I'm trying to put text on my page. can I input a text file?
<div class="container">
<input type="file" src="pone.txt">
</div>
like this well not like this as this don't work, please help, thanks a newbie.
you can use an iframe inside of a paragraph to do it, like i am showing below
<p><iframe src="name_of_your_text_file.txt"></iframe></p>
</body>
You can use the embed HTML element.
<embed src="phone.txt">
MORE INFORMATION ON EMBED TAG
If you have access to a server side scripting language, it would be a little neater to do:
<div>
<?php include('phone.txt'); ?>
</div>
If you want to use jQuery you can do it via:
$(function () {
$.get('/phone.txt', function (data) {
consile.log(data);
});
});
You cannot easily do that with HTML alone. You have to employ some JavaScript.
<!DOCTYPE html>
<html>
<body>
<input type='file' name='pone' id='pone'>
<pre id='sameOutput'> </pre> //this will render the text file as it is in the file directly on the webpage.
<script type='text/javascript'>
document.getElementById('pone').addEventListener('change', function (){
var myfile= new FileReader();
myfile.onload = function (){
document.getElementById('sameOutput'). textContent = myfile.result;
}
myfile.readAsText(this.files[0]);
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!-- $("input#post_id").on("change", function(){ // Whenever this field changes
var post_id = $("input#post_id").val(); // Get the value of the field
$("a#link").attr("href", "https://stackoverflow.com/questions/" + post_id); // Update the href in the link to match the id inserted in the input field
}); -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Enter the DP ID below </label>
<br>
<input id="post_id" type="text">
<a id="link" href='https://www.google.com/search?'+post_id.value>Click to redirect</a>
</body>
</html>
How to create a link incorporating user input from the input box
I'm trying to attempt a similar mechanism but as I'm too new to HTML, I'm unable to quickly club it with jquery.
Appreciate any help! Thanks!
My sample query - https://www.w3schools.com/code/tryit.asp?filename=GPZYOB9C4JFW
When I initially tried this approach the url generated had [ input object HTML ] something like this instead of the user input string.
You need to put the jQuery code inside a <script> tag after the one that ooads the jQuery library.
Also put the code inside $(document).ready() so it runs after the HTML is fully loaded.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("input#post_id").on("change", function() { // Whenever this field changes
var post_id = $("input#post_id").val(); // Get the value of the field
$("a#link").attr("href", "https://stackoverflow.com/questions/" + post_id); // Update the href in the link to match the id inserted in the input field
});
});
</script>
</head>
<body>
<label>Enter the DP ID below </label>
<br>
<input id="post_id" type="text">
<a id="link" href='https://www.google.com/search?'>Click to redirect</a>
</body>
</html>
You just need to have <script> tag and jQuery document ready tag $(function() { to make it work.
<script>
$(function() {
$("input#post_id").on("change", function(){ // Whenever this field changes
var post_id = $("input#post_id").val(); // Get the value of the field
$("a#link").attr("href", "https://stackoverflow.com/questions/" + post_id); // Update the href in the link to match the id inserted in the input field
});
});
</script>
I have a div that should be displayed as such, but when you click on the div, I need it to transform into an input field.
This is what I have before that div is clicked:
<div>This is the content.</div>
I wan this to become the following when it's clicked:
<input>This is the content.</input>
And to change back when the user clicks elsewhere.
Is such a thing possible with Angular? I looked into using ng-change as a HTML tag, however I couldn't seem to get it going.
Any help is appreciated.
Try this
<div ng-click='toggleShowInput()' ng-hide='showInput' >This is the content.</div>
<input ng-show='showInput'>This is the content.</input>
and controller has function like
function cntrl($scope){
$scope.showInput = false;
$scope.toggleShowInput = function()
{
$scope.showInput = !$scope.showInput;
}
}
If you use Angular, you should write both element and toggle one for the other when the user click :
<!DOCTYPE HTML>
<html ng-app>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>
<div ng-show="!inputIsOn" ng-click="inputIsOn = true">Click here</div>
<input ng-show="inputIsOn" type="text">
</body>
</html>
Nope, but the good news is that you don't need that to happen!
In your controller:
$scope.showInput = false;
$scope.myContent = "This is the content";
Back in your HTML file:
<div ng-hide="showInput">{{myContent}}</div>
<input ng-show="showInput" ng-model="myContent" type="text" />
<button ng-click="showInput = true" />
Now when the button is clicked, the input field will display, but the text will not.
Okay, I am working on my final for a webpage design class. We can ONLY use HTML, CSS, and JAVASCRIPT. No AJAX or anything else.
I need a little help.
I have a text box. I want the user to be able to paste an (image) url into it, and it will automatically update an image on the page to the image url they pasted.
Is this possible?
Can I use OnChange in the textbox to update my image url? What do I put in each?
Here is my textbox
<input id="usrimg" onChange="??(What do I put here)??" type="text"/>
and here is the image source I want to change OnChange in the text input
imageObj.src = "??What goes here??";
I know it is a late answer but,
have you tried something like this?
I know it is not the best solution, but it is something...
<script language="JavaScript" type="text/javascript">
function show_prompt() {
var image_url = prompt("Please enter an image url","http://hasselt-graphix.be/images/HGX.png");
document.write("<!-- The rest of your html page --><img src=\"" + image_url + "\" width=\"400px\"><!-- The rest of your html page-->");
}
</script>
<form>
<input type="button" value="Change picture" onclick="show_prompt();" />
</form>
Hope it helps
<script language="JavaScript" type="text/javascript">
function changeUrl(el) {
var el = document.getElementById('inputid').value;
var im = document.getElementsByTagName(img);
im.src = el;
}
</script>
<input type="text" id="inputid" value="" onBlur="changeUrl(this.value)"/>
Based on some other code I found from this site (This Question here - Get URL and save it | Chrome Extension)
I was wondering on how to display the URL of a current page in a input box. My coding is below
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<script>
chrome.tabs.getSelected(null, function(tab) {
document.getElementById('currentLink').innerHTML = tab.url;
});
</script>
</head>
<body>
<div class="links">
<div id="currentLink">Getting Current URL...</div>
<input type="text" id="currentLink" value="Loading...">
</div>
</body>
</html>
(I've cut some features out).
But my question is, how can I get the URL to display in the input box, it displays when I use "div id" but not when I use "input id" any ideas why?
You have to set the value attribute of inputs.
document.getElementById('currentLink').value = tab.url;