Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I got this code online and wanted to change the image source from an online picture, to the one i have on my root folder. But everytime i change the file location, image doesnt appear.
var firstreel=new reelslideshow({
wrapperid: "myreel", //ID of blank DIV on page to house Slideshow
dimensions: [1310, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i30.tinypic.com/531q3n.jpg"], //["image_path", "optional_link", "optional_target"]
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg"] //<--no trailing comma after very last image element!
],
Place it to a folder without spaces in its path or replace the spaces in your path with %20 (url encoded space char)
If the html / js is palced inside your "Project AMBIENT" folder you dont have to use the full path. You can use "./Photos/xyz.ext" or depends on where the files are placed "../Photos/xyz.ext"
You can't use a local file path:
C:\Users\Rizal\Desktop\Project AMBIENT\Photos\b.jpg
you have to use a file that is hosted on a web server:
www.x.com/images/stuff.jpg
try using file:///C:\Users\Rizal\Desktop\Project_AMBIENT\Photos\b.jpg
you will have to properly escape the whitespace in Project Ambient or rename it to Project_AMBIENT or something like that.
File URI scheme
Update
Put the following in a file called "img_form.html" and double click it:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<form id="target" action="javascript:return false;">
<input type="text" value="http://i30.tinypic.com/531q3n.jpg" />
<input type="submit" value="Go" />
</form>
<br>
<img id="image"/>
<script>
$('#target').submit(function() {
$('#image').attr('src', $("input:first").val());
});
</script>
</body>
Now change the text in the input form to some local url:
Unix:
file:///Users/snies/Pictures/043.jpg
Windows:
file://localhost/c:/some/folder/foo.jpg
file:///c:/some/folder/foo.jpg
and press the button.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 months ago.
Improve this question
I am building a web app and I need to copy an HTML div and everything inside it into a new tab. I am writing this code in JavaScript. So far I have been working on creating a blob and then creating a file to download. This approach copies all the HTML code I need BUT it does not copy the text that has been inputted into any text fields. As I understand, the problem is that the entered text is not part of the HTML code so it cannot be copied. However I cannot find another approach to this, please assist. Thank you
You can use Element.setAttribute() on those elements before serializing your DOM tree. For example:
input.setAttribute("value", input.value)
This will copy the mutable value (not serializable) to the attribute (which is serializable).
Here's a snippet demonstration:
const input = document.querySelector('input');
console.log('initial:', input.outerHTML);
input.value = 'hello world';
console.log('before:', input.outerHTML);
input.setAttribute('value', input.value);
console.log('after:', input.outerHTML);
<input type="text">
(Inspired by comment by #vanowm)
First, copy the html (say inside a DIV)
Then you'll need loop through all input fields and read their value so you can apply them.
So the code is like this (amend to suit your further needs):
<div id=container><html>
<input type=text name=text1 id="text1">
<br><input type=text name=text2 id="text2">
</html></div>
<textarea id=target style="width:100%;height:200px;"></textarea>
<input type=button name=go onclick="trigger();" value="Parse">
<script>
function trigger(){
target0=document.getElementById('container').innerHTML;
text1= document.getElementById("text1").value;
text2= document.getElementById("text2").value;
target0=target0.replace('id="text1"', 'id="text1" value="' + text1 + '"');
target0=target0.replace('id="text2"', 'id="text2" value="' + text2 + '"');
document.getElementById("target").innerHTML=target0;
}
</script>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I'm trying to make a website. But I need to make a syntax highlighting program that Categorize commands based on what they do. For example, one group would be I/O, another one would be Control commands. And you would color the text based off of what type of command it is. Please I need help.
<html>
<head>
<div class=“io”>Text goes here</div>
div.io {
color: #0A0A0A;
</head>
<!--
PREFIX = 'lang/'
SUFFIX = '.js'
-->
<body onload="sh_highlightDocument('lang/', '.js');">
<!--
CLASS = 'sh_java'
PREFIX + CLASS + SUFFIX = 'lang/' + 'sh_java' + '.js'
= 'lang/sh_java.js'
-->
<pre class="sh_java">
public class X {}
</pre>
</body>
</html>
There are a few problems with your code above:
You are writing your <div> in the <head> section, which is invalid HTML
You are using curly “ ” quotes on your <div> class declaration, which won't work
In addition to this, your question is incredibly vague. There don't appear to be any 'control commands' in your question.
Having said that, it sounds like you're trying to turn the text in the io class red, and some additional content in a control-commands class green.
This can be done with JavaScript's .getElementsByClassName() method and .style property as follows:
function change() {
document.getElementsByClassName('io')[0].style.color = 'red';
document.getElementsByClassName('control-commands')[0].style.color = 'green';
}
<div class='io'>IO</div>
<div class='control-commands'>Control Commands</div>
<br />
<button onclick="change()">Change</button>
Keep in mind that .getElementsByClassName returns a Node List, so you need to access the first index of that with [0] as above.
Hope this helps!
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
am new to web development i have developed one website and now i want to place a text field on top corner and give options to pick a city and display content based on selected city. for example: in a web page i should have a text box, if i enter some city name it should display tat cities contents (use case: if i select Delhi it should display Delhi's content, if i select Mumbai it should display Mumbai's content how can i achieve this task ) any code, any references can be appreciated, Thanks in advance. (HTML, javascript, java anything is ok)
Here is something like what you want, you can make a popup instead of a dropdown if you want. Tell me if you need anymore help, or need to understand the code. This code is based of Dmitriy Lishtvan's answer for this question. I just made it relate to your question.
$(function(){
$('.selectOption').change(function(){
var selected = $(this).find(':selected').text();
//alert(selected);
$(".desc").hide();
$('#' + selected).show();
}).change()
});
.desc {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selectOption">
<option>--Choose One---</option>
<option>Chennai</option>
<option>Washington</option>
<option>Hamburg</option>
</select>
<div id="changingArea">
<div id="Chennai" class="desc"><iframe height=900 width=900 src="https://en.wikipedia.org/wiki/Chennai"></iframe></div>
<div id="Washington" class="desc"><iframe height=900 width=900 src="https://www.washingtonpost.com"></iframe></div>
<div id="Hamburg" class="desc"><iframe height=900 width=900 src="https://www.tripadvisor.com/Tourism-g187331-Hamburg-Vacations.html"></iframe>
</div>
</div>
In Java you can use the TextField class to have the user input. Then you can use a JButton and then when the user clicks the button the corresponding content(Organize the content with an array).
Link to info about TextFields
https://docs.oracle.com/javase/tutorial/uiswing/components/textfield.html
Also JButton
https://docs.oracle.com/javase/tutorial/uiswing/components/button.html
Good Luck!
I think this is what you want
`http://jsfiddle.net/XCUDF/`
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I'm looking for a plugin to insert a selected tag in an input box, but all what I found are plugins to create automatically tags after typing them.
Output example :
If a user click a tag (eg : name1), the tag is inserted in an input box. It is particulary usefull to save time when you want to translate sthg for example.
Do you know if such plugin exist? Any idea?
You can use Selectize.js. You have the ability to predefine the set of tags or allow users to enter new ones. You can block the choice of creating new ones by having an option create: false
try this
<!DOCTYPE html>
<html>
<head>
<title>jQuery : click a tag and populate an input box with it</title>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<input type="text" id="testbox" value="My Name is " />
<div>
{<i id="Name1">Name1</i>}
{<i id="Name2">Name2</i>}
{<i id="Name3">Name3</i>}
</div>
<script type="text/javascript">
$(document).ready(function(){
$("i").click(function(){
var value = "My Name is";
var al = $(this).text();
var text = value + " " + al;
$("#testbox").val(text);
});
});
</script>
</body>
</html>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am a beginner to Javascript. Sorry for asking here, but I couldn't find a tutorial for this, and I hope someone can point me in the right direction.
I have an HTML page that has an unordered list on it. I have an input form that allows the user to submit a message. When the user submits a message, I want it to be added to the unordered list. This will be a permanent change to the website.
How do I make Javascript interact with the HTML like that?
---- Example:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li>example 1</li>
<li>example 2</li>
</ul>
<form>
<input type='text' name='Message' value="">
<input type='submit'>
</form>
</body>
</html>
The question's a little vague and I think it would be helpful to understand the concepts rather than have the specific code.
What you're trying to achieve, if you just want to manipulate the HTML using javascript, is to have an understanding of how JS can work with the DOM.
You do this by targeting elements. And you can target them either by their element type (div), a CSS classname, or most commonly by an id tag attribute.
In the example you've got above, when you submit the form you will need to call a function that will target the message input, grab its value. Then target the unordered list and append the HTML to the end of it containing the new message.
Since you're new, I would recommend learning jQuery. It'll get you up and running pretty quickly and you won't have to deal with as much diversity in varying browser implementations.
This will be a permanent change to the website.
NO this wont be..you probably need to store them in you db then.Following is just a demo of how to append to unordered list
HTML,
<ul id='message'>
<li>msg 1</li>
<li>msg 2</li>
</ul>
<form onsubmit='appendMessage(); return false;'>
<input type='text' id='message_text' value="" />
<input type='submit' />
</form>
JS
function appendMessage() {
var node = document.createElement("LI");
var message = document.getElementById('message_text').value;
var textnode = document.createTextNode(message);
node.appendChild(textnode);
document.getElementById("message").appendChild(node);
}
DEMO
var button = document.getElementsByTagName("input")[1];
button.onclick = function (){
var ul = document.findElementByTagName("ul")[0];
var li = document.createElement("li");
li.appendChild(document.createTextNode(this.value));
ul.appendChild(li);
};
Perhaps you could use LocalStorage and some of the functions above to archive that.
Here are a few examples of how to use LocalStorage and how to handler with objects(html tags with content for example).
http://coding.smashingmagazine.com/2010/10/11/local-storage-and-how-to-use-it/
Storing Objects in HTML5 localStorage
The drawnback´s are the support for older browsers and that the changes will only be available for the client where the changes where made.
The best aproach, it´s to combine the changes in javascript with some kind of storage(localstorage, SQL, NoSQL)
http://www.mongodb.org/ <--- NoSQL database