There are many popup on a page which have overflow:auto property
Structure is -
<div id="popup1">
<div>SomeHTMLSTRUC</div>
<div>SomeHTMLSTRUC</div>
<ul class="scroll"></ul>
</div>
<div id="popup2">
<div>SomeHTMLSTRUC</div>
<div>SomeHTMLSTRUC</div>
<ul class="scroll"></ul>
</div>
This ul has this class of scrolling property.
Now once if I scroll to bottom in one of the popup. How do I set scroll to top when the next time I open another popup popup?
Add
document.getElementById('popup1').children[0].scrollTop = 0;
before the code to open the popup. This assumes that <ul> is the first any only immediate child of the <div>.
Working demo: http://jsfiddle.net/sdz8nc3j/
EDIT: With the recent update to the question making the <ul> the third child, you need to change the [0] to [2]. You could also just find the <ul> instead of relying on the number of children:
document.getElementById('popup1').getElementsByTagName('ul')[0].scrollTop = 0;
Working demo: http://jsfiddle.net/sdz8nc3j/3/
I also made a jQuery version, although it doesn't really save you anything. It also searches for the <ul>.
$popup1 = $("#popup1");
$popup1.click(function(){
$popup1.children('ul').scrollTop(0);
});
Working demo: http://jsfiddle.net/sdz8nc3j/1/
Use this:
document.getElementById("popup1").childNodes[2].scrollTo(0, 0);
This works if the UL is the third child!
jQuery version:
$("#popup1").find("ul").scrollTo(0, 0);
Related
I am trying to implement a custom combobox dropdown using angular 4 in my web application.
I have used this custom combobox as one of the field in to list of line items using divs.
Here, I wanna open dropdown in last line item of list, but it exceeds the window screen.
How to make the full dropdown visible to user automatically while opening combobox at the bottom of the page?
<div style="height: 56px; margin-left: 7px; min-width:220px" [style.width]="columnsHeaderWidth.division">
<div style="width:180px; height: 56px; max-width:180px; cursor: pointer;">
<combo-box [id]="'division-'+user.uuid" [userOption]="true" [isSelected]="false"
[magicLabelHack]="'projectTypeLabel'"
[includeMagicLabel]="false"
bind-placeHolder="'Select division/group...'"
icon="wizard:chevrondown"
[source]="divisions" [selectedValue]="user.divisionId" (onSelected)="onChangeDivision($event,user,user.division.id)"
[isIconItemList]="true" [itemListWidth]="'230px'"
[changeStyle]="true"
(click)="rowClick(user)" (onFocusVisible)="tabFocus($event, user)">
</combo-box>
</div>
</div>
Snapshot:
Use a template variable with some vanilla JS calculation :
<div #div style="left: 500px;"></div>
<p *ngIf="div?.getBoundingClientRect().x + div?.getBoundingClientRect().width > totalWidth">
The div is out of bounds
</p>
Stackblitz (change the style.left of the div to see it work)
English is just enough broken so I can't decipher what is it that you exactly want, so I assumed that you wanna scroll to the bottom of that dropdown?
In the screenshot you posted I can see the page scroll bar being near the top, I presume that dropdown stretched the page vertically so the end of it is actually visible.
Under those two assumptions, the simplest vanilla solution is to target the last option in dropdown and scroll to it.
el.scrollIntoView() is a vanilla solution where el is the DOM element you are after.
Description of options available in the documentation here: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
if you have it in Angular4, you can get the DOM element via var el = ang4ele.nativeElement
It is hard to test this to make it bulletproof for your case before posting due to your code being incomplete (showing only the template part).
Currently, I'm working on the single webpage and got some issue with the final output which is when clicking the link menu, it does not go to the targeted div position(correct me if I'm wrong). And when clicking again the link, it will go to the other position.
I follow this tutorial, callmenick
Here is the reproduction of it, jsfiddle
<nav>
<ul>
<li>Overview</li> <- when any click link, and then click again, there's some action happen. *bugs?*
<li>Tech Spec</li>
<li>Support</li>
</ul>
</nav>
Now I get it,
the Problem is that the fixed nav is not part of the document flow anymore.
Therefore it won't reserve height. Or in other words the rest of the elements don't know its there anymore. Just like display: none;
You need to find a way to push the elements down by the height of the fixed nav but only if the nav is fixed.
There are a couple ways to to that, but it depends on the layout.
First way that comes to mind is applying padding-top: ?px; to the #product-nav, via JS as soon as fixed is applied to the nav.
edit:
https://jsfiddle.net/ju648br4/4/
I see no issue on my machine, but this feature can be approached in a different way. See my example below, this might solve the issue
Add anchor class
Add data attribute
Make global function that scrolls to certain point
So for instance
<div id="button-name"></div>
becomes
<div id="button-name" class="scrollAnchor" data-anchor-dest="#section-more-info"></div>
Now there is a JavaScript action required, this one reads the data-anchor-dest attribute and scrolls to it.
$(".scrollAnchor").click(function(e){
e.preventDefault();
anchorDestination = $(this).data("anchor-dest");
smoothScrollTo(anchorDestination);
});
function smoothScrollTo(element)
{
$("html, body").stop().animate({
scrollTop: $(element).offset().top
}, 1000);
}
Now the usual question, how compatible is it? This compatible, I have tested this myself in IE9 and it works.
This answer may be more of a teardown than a fix, but I hope this helps
What you need to do is to add your missing Buy section and in your navigation add href to the link, like:
<nav>
<ul>
<li>Overview</li>
<li>Tech Spec</li>
<li>Support</li>
<li>Buy</li> <!-- You are missing your href attribute here -->
</ul>
</nav>
All the rest seems to work fine.
I have a simple HTML structure, which works fine in most browsers, but in IE 10 / 11 the top div is not shown.
As can be seen from the code segment below, I use knockout to control the visibility of the div that contains the problematic div (ClassA) by adding a class to make it visible and add animation. Except for the first div, everything else contained in the parent (ClassA) works fine.
<div class='ClassA' data-bind="css: { 'classB': isVisible } ">
<div class='selectionHeader'>
<h2 class='selectionTitle'>Select Data</h2>
</div>
<div class='selectionContent'>
...
The div is there in the DOM in IE, but is not taking up space and when you hover over it, it shows above the div that contains it, instead of being inside it.
I found that if I play with the div's display status in IE's developer tools, going to display:none and then back, the div suddenly shows, but this does not persist and if I reload the page, it's hidden again.
I tried clearing the cache but that did not help.
Anyone have any idea what's going on here?
Thanks in advance!
I get an unordered list by a cms that I want to style.
It works well, but only for the first <li id="link-18"> element. My goal is it to style the <ul> blocks all the way trough, like the first one. See http://jsfiddle.net/UyrdS/3/ (the second and third link shows the toggled <ul> block not on top)
If the second link (level 2 two) is clicked, the toggled new <ul> block shows beside the navigation, but not on top like the level 1 one links does it with his children element <ul>
You can change your css to generate a nice submenu
nav ul>li>ul {
display: none;
margin-left:2em;
}
See the example on http://jsfiddle.net/WrcMX/
I think this is what you wanted
alllinks = $("ul>li>ul");
$('nav a').on('click', function(e) {
alllinks.hide(); //First hide all the links
e.preventDefault();
if ($(this).parent().children('ul').size() > 0) {
$(this).parent().children('ul').toggle();
}
});
I gave up. I'm a pretty worse inquirer :)
Thanks for the answers. Kudos to you all for spending your time. This fiddle is the closest to my question.
http://jsfiddle.net/UyrdS/6/
But it's not dynamic. It has a static width. That is still the problem.
I've inherited a large project that already has a large markup base coupled with a short deadline, so a complete rewrite is out of the question. As such, I have an issue that needs to be resolved ASAP:
(Forgive my cryptic shorthand in advance)
I have a header that contains an UL and a DIV.
div id="header"
ul id="nav"
<a li />
<a li />
<a li />
/ul
div id="promotion"
p
/div
/div
I want the background-image (ie., the entire DIV) to be a link, so I added this to the markup:
div id="header"
a id="overlay"
...
And the CSS for that reads something like this (not the exact CSS, I don't have access to the file while I'm at home):
a#overlay {display: block; width: xxx, height: xxx, z-index: -1
Now here's the kicker: the UL and the other DIV need to be positioned above "overlay," because they have their own links in them. This works in FF3 and IE8, but not IE6/IE7. I'm looking for a generic solution to this problem that is compatible in IE6/IE7 (and dropping IE6 is not an option, this is a BIG client)
Any suggestions? Here it is in simple terms: header --> link overlay --> ul with links --> other elements on top of link overlay
You could use JavaScript to attach a click handler to that background instead of relying on a link.
document.getElementById('overlay').onclick = function() {
window.location = 'http://www.google.com/';
}
IE6/7 does not respect the z-index stacking context as you'd expect. Have you tried setting a higher index on the child elements of the parent anchor?
Here's the generic solution I came up with after reading the link Tate Johnson provided.
I tested it and can confirm that it works in IE5.5/6/7/8, FF3, Chrome and Safari.
I was overlooking the fact that you need to declare the position of each element if you're going to use z-index. Setting everything to position: relative (except for the link, which is set to position: absolute) did the trick.