Mentio JS menu being added to bottom of the page - javascript

I'm trying to implement a Twitter style #mention interface using Angular JS and a library called MentioJS ()
The issue i'm having, is that after content is dynamically added to the page, I'm getting a rogue menu on the bottom of the page. I was able to replicate on the documentation page here:
http://jeff-collins.github.io/ment.io/?#/
By just hitting "Submit" at the bottom without changing anything. In Chrome, I see the default menu that opens in the first input show up again at the bottom of the page.
Any ideas why this might be happening?

I've encountered the same issue, as many others I think.
I've emptyed the array with the options for mentio-items (after pressing submit), which worked for me.
I`m sure this is not the right solution, but it fullfiels my needs.

I had the same issue with with ment.io, but as #Mihai Lazar pointed out after clearing array on submit, issue was resolved.
Regards..

Related

Auto selection when website load (using react)

so everytime I load the website for the first time, there is a selection box in the menu and I do not have an idea from where is coming from.
I am using react and react burger menu https://www.npmjs.com/package/react-burger-menu
I upload a picture to show you.
Here is just a sandbox with bad design but I manage to reproduce the error.
The error comes when I use the option isOpen={true}
Every time I reload the page, you can see there is a selection at the start.
https://codesandbox.io/s/lively-dawn-gqtqjv?file=/src/App.js
Thanks for your help and hope my question is not that weird or bad.
I tried with css selector to undo this but nothing works.
According to the document, you can disable the autoFocus by
<Menu disableAutoFocus />
Please refer to Focusing the first menu item: https://www.npmjs.com/package/react-burger-menu
Example code based on your codesandbox: https://codesandbox.io/s/sharp-herschel-15wrd2?file=/src/App.js
Yes I got your issue, basically focus selector outline property is active for 'a' tag you can solve that issue by adding following css snippet in style.css(I tested it & perfectly work on your provided problem)

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

Why are my JQuery Modal boxes not in there default position?

Until recently any modal box I displayed was dead center in the page. Which I assume is the default and is what I wanted.
Recently some change I made someplace in my code is causing the modal to open on the left bottom of the page, just poking up above the bottom of the screen.
I've explored all the code I've changed in the past weeks and can't find it. I also had updated the 'jquery.modal.min.css' file to the current version v0.9.1 so replaced that with the previous version. But that didn't fix it either.
I'm the first to admit I do not understand how to use the 'Web Inspector' effectively. If this is how I can track down the issue please be specific on its use.
well, you need to provide a fiddle so we can see any example of your code. That been said:
do you use GIT( you might be able to version back ALL files that might have been touched, keep in mind any new changes are gone).
are you the only Developer working on this? is there another developer, who could have added something locally with a !important? May be someone forgot to open or close a bracket, in your css/html/structure
my 2 cents

Angular JS Angular input dropdown control not getting rendered properly

I am using your Angular JS Input Dropdown control, and I've followed the code example you put on your demo page to implement the control on a page in my PHP Laravel based website. I have found a problem with the implementation, though, and I was unable to identify what triggered it or how to fix it, so I was hoping that one of you may be of some assistance.
The issue consists of the control not getting rendered into the page until I refresh the page, then it shows up and works perfectly fine, right until I leave the page and get back to it; forcing me to refresh the page every time I re-enter it to be able to use the control.
To elaborate further, the control does not get rendered, but the page acknowledges that there is supposed to be a control on the page, which is why it displays a white blank space at the position where the control is supposed to be. So, I am pretty sure that it's a rendering issue.
The website is using Voyager which has a navigation sidebar, and if the page is entered via the sidebar button, the issue occurs, while if it was entered directly through the url bar or refreshed, then it works fine.
Has this ever happened to anyone before, and if so, how should I go on about fixing it? If not, then what do you propose might be the issue?
Thanks for taking your time to read this issue, and have a wonderful day.
Link to Angular control repository: https://github.com/hannaholl/angular-input-dropdown
EDIT: This issue was self-fixed.
Solution: Manually bootstrap Angular JS.
This issue was self-fixed.
Solution: Manually bootstrap Angular JS.

How to prevent js scroll to top on click

I'm having trouble with what I believe to be a javascript or jQuery issue.
I have build a css checkbox label that when clicked reveals a form on the page.
The problem I'm having is that when the label is clicked, if the user has scrolled down before clicking, the page scrolls to top.
I believe this is a JS issue, maybe coming from the theme I am using, but my JS skills are close to none so I would really appreciate any help.
You can view the page here:
http://urlgone.com/5504c5/
and the "Scroll to top" happens when clicking on the "sign up" blue text.
I've tried adding this JS code as suggested in another post, but that didn't solve the issue.
$("#slidingFormBtnId").click(function(e) {
e.preventDefault();
// Do your stuff
});
I think your issue in that you are attempting to use jquery incorrectly inside Wordpress. Your console states $ is not a function.
You can view this page for some help: https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/ but basically you should wrap your jquery in:
jQuery(document).ready(function( $ ) {
// code here
}

Categories

Resources