Hotlinks in JavaScript - javascript

I've been developing graphics in a graphics editor and I was able to add hot links to navigate through to different graphics, by entering the pathway to the graphic file. However there is now a new version of editor makes you publish the graphics online and view them from the web and the hotlink option is replaced with a button option. Instead of being able to enter the pathway of the graphic file I want to link to I have to enter a JavaScript script, that will run on click, and I have no clue how to get the JavaScript to work like the hotlink was working.
I have looked up tutorials on JavaScript but cant get any of the code to work on my button even simple things like alerts and prompts. If anyone has any idea how to these buttons work or if its possible for them to behave like the hotlinks from before that would be great.

Well it largely depends on your software, which you didn't mention here. However, if in the end it will be displayed in browser, you can try something like this:
For link, use javascript: alert('test'); and see if that gives you an alert box when you click it. If it does, problem solved.
If not, I am affraid you'll have to provide more information about your software before someone can offer some advice.

Related

How to Embed React/Angular application in a widget popup style

So this is more a design/tooling question (no code to show)
The Idea:
I have an idea for a web app that I'd like to implement using either React/Angular depending on the outcome of this discussion really. The idea is that I want to be able to bundle up my web application and embed it in any website with as little code as possible. The end result for the website it's embedded on would be a new 'widget style' button hovering in the corner which when clicked opened up my new React/Angular application in a pop up or layover modal style window.
To be clear, I want to, if possible provide the clients host website with as little code as possible such as:
<script src="https://myappurl.js"><script>
<some-new-element-in-html-body?> </some-new-element-in-html-body?>
This would then leave them with a widget style button that when clicked opened my app as a layover
The How:
Now I know there are probably a few ways of implementing this. I come from an Angular development background as a full stack dev so embedding apps within websites would be a new concept to me. I guess the outcome I want is similar to that of a chat widget application on a website.I'm struggling to find online the best solution or toolset for the job.
Web components seem to have popped up quite a lot. This would result in me having to provide the website with the tag and the new html element but could this then add a widget style button which triggered the application popup. I've also read that React/Angular bundle sizes may be too much for web components, even in smaller apps, so something like preact may be preferred? Again the same question above stands. This youtube video explains preact/react web components and wonder if its the best option - https://www.youtube.com/watch?v=PUGDzA1uP-Y&t=545s
iFrames are definitely an option if I wanted to simply mount my application with any other website. That said its not really what I'm after, as although I want the contained app, I also want to be able to add this custom widget style button to the host website, without having to edit the website directly.
UMD Libraries - again something else I've come accross but this is the most unclear, and how they differ or would benefit my specific scenario compared to web-components.Now I may be barking up the wrong tree completely, and if so could you kind people please point me in the right direction of what I should be looking at.
I may also need to consider 2 apps, one for rendering a button that loaded quickly annd then facilitated the popup / modal type layover, and then one which loaded up my application with one of the 3 methods mentioned above?
THANKYOU IN ADVANCE! :)

Modify Contents of Editable Div on Twitter Post

I'm writing a chrome extension which helps the user type things on twitter. When writing a tweet on twitter, twitter opens an editable div container. When the user types into it, twitter (which is using some web-framework presumably) generates sub-divs and spans with the text the user types and places them within the content-editable div.
The thing is when one manually changes the span value (for instance, through inspect elements), and then types something again, the value in the span will just revert back to what it previously was (before the inspect elements edit). This is probably because the actually typed string is stored somewhere in javascript, and everything gets overwritten again when the user types into the div.
I've been trying to find a way around this using JQuery but with no success. I don't really know how to start. If it were just a regular input tag, you could call something like $("input").val("new value"), easy-peasy... but I don't know how one could go about doing that for an editable div that gets updated by javascript running somewhere on the page.
For a while, I just thought it would be impossible...
BUT NOW I do know it is possible. If you download the Grammarly extension and use the Grammarly popup-editor (which opens a new window to edit text), then submit that, the twitter editable-content div updates appropriately and everything works like magic.
Sorry if this isn't a standard programming question, but I couldn't find anything on the web that comes close to what I'm trying to do. Maybe I'm just not experienced enough and am missing something really obvious. I tried looking at the twitter and Grammarly source code but it's all minified garbled javascript that I can't read...
Thanks for any help and insight!
EDIT: the twitter url in question is: https://twitter.com/compose/tweet The div in question is the one with contenteditable="true" attribute (you can search it in the inspector)

Javascript Tampermonkey and Captcha

This is my first post so don't be too hard on me.
I've made a script for Tampermonkey to do some tasks on a specific website. However, sometimes the captcha code appears and stop my script. It's a simple captcha, not images. So I thought about making another script to click on captcha and then merge the two of them.
Here is what I made so far for captcha
(function() {
'use strict';
setTimeout(function() { document.getElementsByClassName("recaptcha-checkbox-checkmark")[0].click(); }, 1000)})();
It works fine on https://patrickhlauke.github.io/recaptcha/ , here I tested it but on my website, it doesn't work.
Someone told me something like
"It works if you yourself interact with the site because then it
"activates" the box But if you do nothing and just let the script do
its thing, it doesn't/shouldn't work It's loaded on another document,
so it's inaccessible through the document object If it was that easy
to click the box, no one would use recaptcha - its existence is solely
based on being unclickable by simple JS scripts"
I didn't fully understand this. Is there any way I can make it work?

Windows with space to write text dont appear AJS

I have created custom Issue Tab Panel with field, where I can add comment when Ill press my custom button “add comment”
In my VM template I have
AJS.$("#add-comment-button").click(function(e) {
e.preventDefault();
AJS.dialog2("#add-status-comment").show();
});
This button works fine and window to write text appears, but… In other section in Issues --> Current Search —> Views (Detail Views), windows with space to write text dont appear when I click button “add comment”. It only appers in normal view of issue… Whats problem?
I'm not sure if I understand your question right so I'll give it a try. Maybe it helps in one or the other way.
As you didn't provide the code affecting the window I assume it is possible you are retrieving the issue key or issue id. There are some Jira JS calls that don't work in every view. The reason is unknown to me, but maybe if you use different calls it will work.
Here is the question and answer to this field availability problem on the atlassian community: https://community.atlassian.com/t5/Jira-questions/Get-issueID-in-JavaScript-in-Project-Screen-viewing-issue/qaq-p/824175
Otherwise you should provide some more information.
Regards
Chris

Get dropdown menu in google extensions popup

I try create extension to google chrome - this extension must create button, that will show popup when pressed. That popup will contain input form, i think, and when i start inputting request string that will show dropdown menu with 'fast results' of search. So.. i can't find way to do it. I have one idea - i create and and connect them. With help of JS i add s of received data from google. But, this is do not work if packed as google extension (see proof: https://code.google.com/p/chromium/issues/detail?id=161302 ). Have you any idea?
P.S. Sorry me for two points: my bad english (not my native language) and, maybe, bad question - i just trying to start work with JS and google extensions. Thx for all.
You see in that bug that it is marked as fixed in June. This means it's fixed in whatever was the development version then. It will take some time until it reaches Stable.

Categories

Resources