|
Thanks to the link to the javascript tutorial. It looks like there is a lot of good info there. I just happened to come across that site if not the page yesterday.
I guess it makes sense that if java script is a language for web pages, access to local files would not be a good thing because of malware, etc.
I was playing around a little with putting a sample image online and putting the URL to it in the code I have. A complicating factor is that the images I want to use are SVGs. Most free hosting sites don't allow them as they are text files and can be full of code.
I did find where I could do this for free on GIT Hub or actually now it is a clone called GIT Hack. I just posted a different SVG than I had in mind. I wound up with a type mismatch error between the line I inserted it in and the last line. I still haven't sorted that out, but in looking into types and type mismatches is where I came across the site that the java script tutorial is on.
I also came across something called open layers which is a set of java script tools for working with layers which sounds like something I could use.
That said, I really would prefer though to create shareable file that includes the images and code, etc (not a link) so it is something that stands alone rather than online. I'd like to create something permanent. Free online things come and go, cease to be free, just change, etc. I don't want to have to pay perpetually either, in fact I won't be around forever either. One of the images I ultimately want to overlay is from the 1860s onto a more current Google Earth type map.
I think I can use photoshop pro to do something like this, but I think it costs a lot, think maybe anyone trying to view it might need it as well, etc.
So I guess I'll continue with java script for now.
Thanks again.
|
|
|
|
|
I think you should rethink what your trying to accomplish. Perhaps choose another path ...
I read your post and it makes little sense to me, where you used the word "Screen" instead of "browser" or "window".
JavaScript manipulates the DOM, which is a collection of HTML elements in a browsers view or tab. Most of the time, you create a web page using HTML, and if needed, you can write some JavaScript to move an element, change the word or color of a element. Or listen for events to occur, and fire a function when that event occurs. You can make web pages from 100% JavaScript, but it's time consuming, unless your app requires that level of sophistication. In other words it's really expensive to choose this method.
Consider writing a Windows app, or Mac app, you didn't say what platform you work with. Or take a lesson in HTML and how to create web pages first. I think your putting the cart in front of the horse here.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
I said screen but technically it would be browser which of course you look at on a screen.
I do have an example of something similar. I have played around a with some simple webpages in the distant past, but for the most part just used a WYSIYG editor.
I mainly run linux, but can do Windows.
I may reconsider using photoshop as an option. Maybe I can get access to the app somewhere, somehow. I think I've read photoshop pro can use georeferenced pdfs as layers which would line things up and should have the other features for panning and zooming, etc. that I want.
I'm basically trying to set it up like a GIS set of layers only I want to be able to share it with people without GIS or anything special. The old image is a perspective drawing of a town that I have warped to fit pretty well with a current hybrid map of the area.
It is a little cluttered and hard to read with all the layers turned on. However if there is a specific spot you are interested you can pan/zoom to it and then switch more layers on. Sometimes altering the transparency and other adjustments can help too.
For now, I will sort of pursue the java script method a little more as I look into photoshop.
I looked into this about a year ago and those were the only two options I found then. I looked a little more recently and see a number of places to make overlaid images, etc but they were all for online use. That would work, but the images need to be hosted, etc. I'd rather just make something that works, you may need to copy a whole folder somewhere in your computer to use it, but you wouldn't even need a connection to view it.
|
|
|
|
|
That sounds more like a game to me. Or gaming technology, I think you can layer things, I'm not a gaming programmer so I don't know, but I think it's possible. (I haven't gamed in decades now). You should be able to program hidden buttons that would change the picture like a transition of scene.
I did some quick research, and they have JavaScript Libraries that allow you to create Game like or 3D stuff. Babylon must be open source, could be a start.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
|
Referencing a local image file to display it in a web page involves using the correct file path in your HTML code. First, ensure the image file is saved in the same directory as your HTML file or in a subdirectory. Then, use the <img> tag in your HTML to reference the image. For example, if your image is named "image.jpg" and is in the same directory as your HTML file, you would use <img src="image.jpg" alt="Description of image">. If the image is in a subdirectory named "images," the reference would be <img src="images/image.jpg" alt="Description of image">. Ensure the file path is correct relative to the HTML file's location. Properly referencing local images allows them to be displayed correctly in web browsers.
|
|
|
|
|
how to set drop down down list and submit button in JavaScript
|
|
|
|
|
|
Not sure how this scored 2 upvotes... Richard gave the answer on the how-to.
|
|
|
|
|
Where are you seeing the upvotes? The message shows a score of "1.00/5 (3 votes)", meaning three people have down-voted it, and nobody has up-voted it.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
My bad, must have been a glass too many, sorry.
|
|
|
|
|
dropdown list and submit button
|
|
|
|
|
You seem to have mistaken this site for Google. Either type your search query into a search engine, or ask a proper question.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Dropdown list WITH a submit button, now there's a challenge..
|
|
|
|
|
|
You have to show the actual javascript code, and any errors in the browser console, if you want any kind of a useful answer.
The only reason alert won't show anything is because the code execution never makes it to that statement.
|
|
|
|
|
Making a fetch call and getting html back, like so:
<tr>
<td class="heading">JGServices</td>
<td class="numeric-amount">
<input type="text" size=10 value="99.00" onfocus="this.blur()">
</td>
<tr>
<tr>
<td class="heading">ShippingHandling</td>
<td class="numeric-amount">
<input type="text" size=10 value="25.00" onfocus="this.blur()">
</td>
<tr>
<tr>
<td class="heading">District</td>
<td class="numeric-amount">
<input type="text" size=10 value="123.00" onfocus="this.blur()">
</td>
<tr>
<tr>
<td class="heading">Penalty</td>
<td class="numeric-amount">
<input type="text" size=10 value="250.00" onfocus="this.blur()">
</td>
<tr>
...then using javascript to append it to the TBODY tag of the relevant table. I've tried two ways:
let T = document.getElementById('tblFees');
let t = T.querySelector('tbody');
let ih = t.innerHTML;
ih += data;
t.innerHTML = ih;
...and...
let T = document.getElementById('tblFees');
let t = T.querySelector('tbody');
t.insertAdjacentHTML('beforeend', data);
And in both cases, the browser renders it like this:
<tr>
<td class="heading">JGServices</td>
<td class="numeric-amount">
<input type="text" size="10" value="99.00" onfocus="this.blur()">
</td>
</tr>
<tr></tr>
<tr>
<td class="heading">ShippingHandling</td>
<td class="numeric-amount">
<input type="text" size="10" value="25.00" onfocus="this.blur()">
</td>
</tr>
<tr></tr>
<tr>
<td class="heading">District</td>
<td class="numeric-amount">
<input type="text" size="10" value="123.00" onfocus="this.blur()">
</td>
</tr>
<tr></tr>
<tr>
<td class="heading">Penalty</td>
<td class="numeric-amount">
<input type="text" size="10" value="250.00" onfocus="this.blur()">
</td>
</tr>
<tr></tr>
I can't figure out why or how to stop the extra, empty rows from appearing. Anyone have any ideas?
- Bill
Measure with a micrometer. Mark with a crayon. Cut with an ax.
|
|
|
|
|
What is data ?
From a cursory look, it seems likely to be a text-string which holds "<tr></tr>"
Updating the innerHTML of an element is discouraged, since it causes a complete recalculation of it and its children for the purposes of display. A better approach is to create elements and then append them to their parents.
Depending on the quantity of content to be added, the <template> may be the best way of creating all the new elements.
As a simple example, let's create a link
let a =document.createElement('a');
a.textContent = "Goto google homepage";
a.href = "<a href="https:
document.body.appendChild(a);
Which, is a much better approach than:
let parent = document.body;
parent.innerHTML += "<a href='www.google.com'>Goto google homepage</a>"
|
|
|
|
|
Quote:
<tr>
<td class="heading">JGServices</td>
<td class="numeric-amount">
<input type="text" size=10 value="99.00" onfocus="this.blur()">
</td>
<tr>
<tr>
... Your HTML has no closing </tr> tags; instead, it has two opening <tr> tags.
The browser will do its best to cope with this invalid HTML; a new opening <tr> tag will automatically terminate the previous row and start a new one.
But since you have two of them in a row, you end up with a blank row every time you have <tr><tr> .
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Richard Deeming wrote: <tr><tr>. Reminds me of the policemen's song in The Pirates of Penzance.
|
|
|
|
|
Making a fetch call and getting html back, like so:
<tr>
<td class="heading">JGServices</td>
<td class="numeric-amount">
<input type="text" size=10 value="99.00" onfocus="this.blur()">
</td>
<tr>
<tr>
<td class="heading">ShippingHandling</td>
<td class="numeric-amount">
<input type="text" size=10 value="25.00" onfocus="this.blur()">
</td>
<tr>
<tr>
<td class="heading">District</td>
<td class="numeric-amount">
<input type="text" size=10 value="123.00" onfocus="this.blur()">
</td>
<tr>
<tr>
<td class="heading">Penalty</td>
<td class="numeric-amount">
<input type="text" size=10 value="250.00" onfocus="this.blur()">
</td>
<tr>
...then using javascript to append it to the TBODY tag of the relevant table. I've tried two ways:
let T = document.getElementById('tblFees');
let t = T.querySelector('tbody');
let ih = t.innerHTML;
ih += data;
t.innerHTML = ih;
...and...
let T = document.getElementById('tblFees');
let t = T.querySelector('tbody');
t.insertAdjacentHTML('beforeend', data);
And in both cases, the browser renders it like this:
<tr>
<td class="heading">JGServices</td>
<td class="numeric-amount">
<input type="text" size="10" value="99.00" onfocus="this.blur()">
</td>
</tr>
<tr></tr>
<tr>
<td class="heading">ShippingHandling</td>
<td class="numeric-amount">
<input type="text" size="10" value="25.00" onfocus="this.blur()">
</td>
</tr>
<tr></tr>
<tr>
<td class="heading">District</td>
<td class="numeric-amount">
<input type="text" size="10" value="123.00" onfocus="this.blur()">
</td>
</tr>
<tr></tr>
<tr>
<td class="heading">Penalty</td>
<td class="numeric-amount">
<input type="text" size="10" value="250.00" onfocus="this.blur()">
</td>
</tr>
<tr></tr>
I can't figure out why or how to stop the extra, empty rows from appearing. Anyone have any ideas?
- Bill
Measure with a micrometer. Mark with a crayon. Cut with an ax.
|
|
|
|
|
I have been racking my brain trying to figure this out. All I want to do is have a element come from the right edge of screen into the center of the screen slowly. I'm trying to use the "transition" method via javascript and I'm just lost. I want this to happen as soon as a click on a button control. Please help!!!
Thanks!
|
|
|
|
|
Sometimes I use JavaScript to animate elements, and other times I use CSS to assign the object with animation parameters. Using CSS to animate an element is extremely simple. You specify the CSS property that you want to animate. For example, if I wanted to animate an element from point A, to point B on the screen, I would set the element's CSS parameters to animate any change in the element's top/left CSS value. From there, it's only a matter of setting the element's top or left position to a different value, and the animation occurs entirely on its own. Make sure that the div element you want to move has its position property set to "absolute", otherwise, the element will not be able to change its location on the screen. I'll include some JavaScript code that I've written which will provide you with an example.
function default_config_elem_for_animation(elem_id) {
var element = null;
var animations_on = null;
animations_on = global_animations_on;
if (animations_on === true) {
element = document.getElementById(elem_id);
if (element !== null) {
element.style.transitionProperty = "left, top, width, height, box-shadow";
element.style.transitionDuration = "0.3" + "s";
element.style.transitionDelay = "0.007" + "s";
element.style.transitionTimingFunction = "cubic-bezier(0, .55, .45, 1)";
}
}
}
|
|
|
|
|
Dear all,
I'm currently dealing with unit tests using Jasmine/KarmaRunner.
I'm wondering whether it is possible, that I can be shure,
that a tested method does not make other calls than the monitored.
I'v learned so far, how I can check the count, arguments and order
of calls from the tested method, which I expect.
But what if someone inserts a new line into the tested method,
that is unknown in the test und does "strange other things"...
Is there something like "Jasmine.allCalls( object, 'method')...?
Thx in advance and best regards!
Please stay objective and friendly
|
|
|
|
|
Perhaps you want to look at code coverage? Following in google returns results for me (addins for Jasmine.)
javascript jasmine code coverage
|
|
|
|
|