page scrolled to the div - javascript

I have a react component, which I am using as Modal and also as element in a page. It has radio buttons.
The problem is When the user is top of the page and modal is open. If the user selects anything in modal, the page is scrolled to another element (same component) in that page which will distract the user.
Since both elements are same, selecting in one will also selects in another. Thats understandable.
I tried, onChange for radio and e.preventDefault, but did not work.
Any suggestions would be helpful.
Closest i can reproduce is https://jsfiddle.net/3tbkLxcu/
Here, preventDefault works but not in my application.
When you click on label, it will scroll to the bottom.
<label htmlFor="test-id" onClick={this.handleClick.bind(this)}>Test radio</label>
handleClick(e) {
e.preventDefault();
}

I found a solution to you problem, just add the following css :)
.ReactModal__Body--open {
overflow: hidden;
}

Related

MatDialogRef textarea scrolls to bottom

I have an app where i use MatDialogRef to open a component as a dialog.
The dialog shows a long text, but for some reason, the textarea scrolls to the bottom.
This does not happen when it's not a dynamically created component.
Heres an example: https://stackblitz.com/edit/matdialogref-textarea-scroll-issue
I hope someone can explain whats happening and how to fix it, so the textarea stays in the top of the scroll.
Thanks in advance!
From #angular/material dialog docs:
Once a dialog opens, the dialog will automatically focus the first tabbable element.
You can control which elements are tab stops with the tabindex attribute
Just add a tabindex=0 on the modal div:
<div class="dialog" tabindex="0">
<textarea class="texta" [(ngModel)]="data"></textarea>
</div>
Here's a Working Demo for your ref.
Here's another thread for your ref:
angular 6 mat-dialog scroll down to bottom automatically

Toggle and focus element

I would like to hide a div and show it when the use select a drop button (like google showing questions in google search results). After some googling i found a way for this. I had used the below jquery to toggle between two states(show/hide) for a div.
function showDiv(a) {
$("#" + a).toggle("slow");
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Show
<div id="element" class="hidden">
Hidden content
</div>
Now the problem is that it first shows the div. When i click the link it hides. But that's not what i need. I need to hide the div and it should only be shown when i click the link. Also the focus on the div is lost when i toggle between the states which is bad. Can anybody help me correct this. I need to focus the div on show as well as hide.
Try this inside your showDiv(a) function:
$("#"+a).toggle("slow").focus()
If you want to remove focus:
$("#"+a).blur();

how to know which 'a href' link was clicked from previous webpage?

I'm kind of new here but I've regularly visited Stack Overflow to refer to stuff I've found myself wanting to ask (I tend to find 99.9% of what I'm asking has already been 'asked' on here heh)
but I wonder if this has.
I have a home page which has two div elements (styled as boxes with transition effects that reveal a styled a href link of their own).
basically these are links to tabbed content on the about us page.
first button has been assigned the id of learn-more-1 and the other learn-more-2. Observe below:
<a id="#learn-more-1" href="about-us.html#company-history"/>
<a id="learn-more-1" href="about-us.html#why-choose-us"/>
about-us.html has a tab container with two divs that are assigned the id's:
#company-history and #why-choose-us
and below these we have our content (a heading with the paragraphs containing respective info).
The issue I am having is, when ever we click either href link on the home page (styled as buttons btw..) we reach the about-us page no problem. Its that the tab container HOUSES the tab buttons but we don't see them. The tabbed content that's shown starts from the Heading.
I'm at wits end trying to understand what I'm missing.
My question is, Is there a way for me to use jQuery on the about-us page, i.e:
$document.ready(function() {
* psuedo code here *
if the user arrived here via clicking learn-more-1 button
make the tab button #company-history ACTIVE
and scroll up 50px ( so we can see the damn button as it only shows
us the heading and paragraph content of the tab container..)
else if the user arrived here having clicked learn-more-2 button,
make the tab button #why-choose-us ACTIVE
and scroll up 50px
};
Here's the thing, by default #our-company-history, On the about-us page is active. Meaning if you just visited about-us you will see that the tabbed container shows you the company history. So nothing is hidden.
Is there a way to perhaps, write a function that simply passes an argument to the about-us.html that will allow us to KNOW which a href ref button link was clicked so we can then work with it? Or am I over complicating something really simple here?
Would appreciate some direction here folks cheers!
EDIT:
Marat I HAVE to know if either a href link was clicked in the home page ! This way, and only this way do i show them the tabbed container and the content under the active tab. Make sense ? What you are proposing will fire automatically each time user clicks on the about-us.html page and show the tabbed container by default. NOT what we're gunning for my friend. So you see, I NEED a way to conditionally check IF the user arrived to the about-us.html page via either of those two a href links (from home page) and then open the respective tabbed content accordingly. BTW, currently when either a href link (styled as buttons) gets clicked in the home page, they DO arrive on the about-us page and onto the tabbed container but are unable to see the active and non active tab. This is all thats the issue.
Some code to show you algoritm
$(document).ready(function() {
var tabId = window.location.hash; // get id of destination tab
if(tabId) {
$("#our-company-history").hide(); // hide default tab
var tab = $(tabId); // get destination tab
$(window).scrollTop(tab.offset().top); // scroll to destination tab
tab.show(); // display tab-content
}
});

Do something with the particular element even though click event is fired on class name

I have a scenario where a dropdown launcher menu should appear on every row in a list page. I have tweaked the code here.
I want the popover (open) behavior be restricted for the click on the particular launcher-icon, though close action is perfect here.
the problem is when any icon is clicked, it shows all menus. My page has rows inflated from a database and every row has three such launcher icons.
I guess this block of code needs some tweaks:
// Click event handler to toggle dropdown
$(".button").click(function(event){
event.stopPropagation();
// How can I call toggle for the specific div element?
$(".app-launcher").toggle();
});
How can it be done?
You need to traverse the DOM to find the .app-launcher instance which is related to the clicked .button element, to do that use closest() and find(), like this:
$(".button").click(function(event){
event.stopPropagation();
$(this).closest('.launcher').find(".app-launcher").toggle();
});
Updated CodePen
I would also suggest looking in to using a single instance of .app-launcher and moving it around the DOM as required to DRY up your HTML code.

How to find where event handler added?

How can I found the trigger codes if there is a button which can do an event but it seems like has no set event handler?
For example widget toolbox buttons in bootsrap templates. The buttons have just a class but they are working well.
Where are the codes of this collapse function?
The actual code to animate the collapse is in this scss collapse transition
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
#include transition($transition-collapse);
}
...and the actual transition is set here.
There is javascript that toggles the class states between the following states as documented here:
.collapse - Closed state of the "dropdown" component and the query to know what elements to apply collapse toggle logic to.
.collapsing - Interim state between closed and open in which the css transition is applied.
.collapse.show - Open state of the "dropdown"
I assume that javascript logic is here for showing the "dropdown" when the [data-toggle]=collapse element is clicked in open state. Then the logic for hiding the "dropdown" is here. The show/hide logic is only toggling the css classes to correspond to the states above, which then triggers the css transition above.
Notice the toggle of class on the "dropdown" between clicks
As #A. Wolff said, the default action of a button is to submit a form, which will lead you to another web page, specified on that form.
Have a look at the form element described at W3Schools, you can basically
reach the same behaviour using the button element.
If you want to inspect what events are attached to your button, you can right click it and see the elements inspector.
If there are no events attached then nothing will be shown, also, if this button belongs to a form, the default action is not considered as a Javascript Event.
If you want to remove all listeners maybe you should take a look to this answer

Categories