Why when I open a submenu page scroll up? - javascript

I am creating a menu for the mobile, that when I click on an item in a submenu appears. The problem is that if I do this when the page is scrolled a bit, the page scrolls back up ... (whether open or close the submenu).
This obviously does not happen when the page is not scrolled
This is the code:
http://jsfiddle.net/qsq4y9d8/3/
this a css of submenu item
.lisottomenu {
letter-spacing: 0.02em;
display: block;
background: #E4BF85;
border-top: 1px solid #fff;
font-size: 14px;
list-style-type: none;
width:100%;
}
this css of item parent
ul li.leaf {
background: #646464 none repeat scroll 0 0;
border-top: 1px solid #a0a0a0;
display: block;
font-size: 15px;
letter-spacing: 0.02em;
list-style-type: none;
position: relative;
}
This is the problem:
(the problem is the auto-scroll)
I hope you can help me, even though the code is a bit long and I do not write well in English ...

Per my comment:
Any <a> with an href containing a "#" places a # in the URL which in turn looks for an empty anchor. Since one doesn't exist, it defaults to scrolling to the top.
Remove the "#" from your links and it won't scroll to the top anymore
Change
Link
to
Link
and it should stop scrolling to the top.

You have so many elements being created and removed and styles erased and added to the elements every time the menu is clicked, I think the browser just tries to refresh the layout or something.
Try adding and removing classes that show and hide your sub menus, and have your elements in your html from the start, instead of creating and destroying so much (unless they need to be dynamically generated from the server or something)

The problem is that the sub menu is making the entire window higher, so it has to make this scroll just when you are closing the sub-menu.
It is just how the browser reacts to this kind of height change.
One solution would to give the side menu defined max-height, and overflow-y:scroll.
#content, #sidebar-first {
display: inline;
float: left;
position: relative;
overflow-y: scroll;
max-height: 370px;
}
This way, when the the sidemenus are opening it wont affected the height of the document.
fiddle - http://jsfiddle.net/qsq4y9d8/9/

Related

How can I make my tree view elements overflow past the parent div's width?

I am using bootstrap-treeview to try to make a nice treeview within my MVC project. This control is available on NuGet so its easy to get started with it. The left hand div shows the tree and the right hand div shows the content of each element when clicked:
<body>
<div id="tree" style="position:absolute; width: 20%; height: 100%; overflow: scroll"></div>
<div id="content" class="list-group-item node-tree" style="position: absolute; left: 20%; width: 80%; height: 100%">This is where content goes once you click on a file or folder element.</div>
</body>
There is a slight problem, though. The content of the div with the ID = tree gets cut off:
Ideally, I would like these list elements to overflow to the right, beyond the size of the div with the ID = tree, as you can tell, because I have set overflow: scroll, so I do not want any text to wrap to a new line.
On runtime, it appends list elements as follows...
These list elements seem to have the following CSS:
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
}
I have tried adding white-space: nowrap; to this CSS, which makes the text do what I want (and overflow with a scrollbar), but the background and border of each list element stay at the width of the parent (which is not what I want; I want them to also overflow all scrollable width just like I did with the text)!
What can I do to make each element of this list properly overflow past the bounds of the parent div they all exist under?
Edit: I've tried putting overflow:visible on all parent levels as well, but it did not work. It removed the vertical scroll bar and kept all list item background borders still restricted to the width of the tree div. I also found that setting width = 10000px on the .list-group-item CSS partially gives me what I want as well, but obviously this makes the backgrounds too wide and the scroll bar becomes too elongated. I want the width of all list elements to be equal to the width of the widest overflowing content.
I figured it out. I had to change the display to table-row-group and I had to add white-space: nowrap:
.list-group-item {
position: relative;
display: table-row-group;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
white-space: nowrap;
}
Add overflow:visible to the parent element(s). You may need this at multiple levels, as each parent element could potentially restrict the content.

Is it possible to prevent hidden elements jumping into view on focus

I've been tasked to create an accessible/responsive carousel and have come across an issue in Chrome regarding the focus of hidden elements.
As per this jsfiddle (http://jsfiddle.net/ft1oosep/); if you tab until the hidden element gets focus you'll see the link is hoisted into view without any update to the css properties of the element.
For the carousel, this causes problems as I need to keep track of where the carousel is at any given time. I've attempted to blur on focus but even that seems too late. Is there an easy solution to this problem or am I going to develop some complex focus/tab management?
Thanks in advance
(Please, no responses suggesting carousels are a bad idea... Its the task I've been set)
Example Code:
<style>
body {
background-color: #f2f2f2;
font-family: 'Arial';
font-size: 13px;
}
div {
width: 200px;
height: 200px;
overflow: hidden;
background-color: #ffffff;
}
a {
width: 200px;
height: 200px;
text-align: center;
background: #A6C6DD;
display: block;
color: #ffffff;
text-decoration: none;
}
a:last-child {
background: #746F9E;
}
</style>
<p>Pressing tab forces hidden link into view.</p>
<div>
Visible Link
Hidden Link
</div>
In my case, I added a dynamic tabindex attribute, so that when the tab-able elements where hidden, it was tabindex="-1" (prevent all tabbing) and when visible it becomes tabindex="0" (tab-able in the normal browser tab-order).
The code will likely be specific to the instance, but in general, set the tabindex attribute of the problmatic element to tabindex="-1" on render, then in the event that makes the problmatic element visible set tabindex="0" on that element whenever it is visible (and back to tabindex="-1"` once hidden again.)
Accessibility note: very rarely should anything other than -1 (disable tabbing) or 0 (normal tabbing flow) be used for tabindex values.
Would adding a node with js after the first link gets blurred be of any help ? So while the carousel is running there is no node there until tabbed through.

CSS - Auto-height div

I have some expanding content in my #main (or) #panel (got this from a template) div, but when you expand it, it pops to the unknown, under the page...
How could I make my main div expand with my content.
CSS
#main
{
position: relative;
overflow: hidden;
}
I also have some JS/Ajax scripts that expand the page to the right size when you switch page, could they affect...?
See live demo here! (The (i) button)
The divs expand when you click on them.
A few times it worked on another computer, but very randomly..
Tell me if you need the scripts or more code.
Basically, everything's wrapped in .main -> .panel
Simple: When the div is expanded, expand the main div's height to fit it.
.panel
{
position: relative;
display: table-cell;
width:100px;
vertical-align:middle;
}
The problem is not with the main div, but the class panel.
.panel {
padding: 3.5em 2.5em 3.5em 2.5em;
position: absolute; // I'm the problem
top: 0;
left: 0;
width: 45em;
}
This is also a problem.
#me .pic img {
position: relative; // I'm evil
display: block;
height: 100%;
}
My debugging may have been awry though, since it doesn't want to play nice and stick with what I want it to do sometimes.
Let me know if this helps in some way, and if you need help debugging anything from there.
EDIT
Your problem may just be a matter of recalling the Script that you use to re-size the main div when the script that displays the hidden divs content goes off. That should re-size the page to fit the new content.
I can't locate where this script goes off, so if you can provide it, I could figure it out.
If your question is actually "how do I make my main div's height change dependent on it's contents" then all you need to do is remove overflow: hidden; from the css class.

Slide a list element with jQuery without effecting other list elements

I am trying to slide up a list element and reveal more content which appears to be hidden "under" the list element, but when the animation occurs all other list elements jump down slightly. When I remove the content under the list element but leave the animation everything works fine.
How can I make this work without effecting the other elements in the list?
It is difficult for me to explain this, so here is a fiddle of what I am talking about: http://jsfiddle.net/YNBxz/1377/
click on any one of the blocks in the view section to see the animation.
If you comment out the jQuery(this).children('.block-content').slideToggle(500); you can see what it SHOULD look like during the animation.
You need to change the positioning of .block-content to position: absolute. That will fix the sliding of the other li elements. Then, to fix the positioning of the .block-content, remove width: 100%, change the right positioning to right: 0, and add top: 45px. The css for .block-content is then:
.block-content {
font-size: 12px;
font-family: Helvetica, sans-serif;
display: block;
background: #333;
padding: 10px;
position: absolute;
top: 45px;
right: 0px;
height: 120px;
}
Also, if you want the bottom of .block-content to line-up with the bottom of the li's, change the jquery to animate to 140px, not 115px.
You can see the results: http://jsfiddle.net/YNBxz/1379/

jQuery slide jumps around on some divs

I am building a little website so here is my problem :
I've got a first header div which contains header stuff. It has position relative and stuff inside is position absolute, but I think that we don't really care about this one.
Just below I've got my main container div with no defined positioning and some <h1> and <p> in it. Each h1, on click, opens some content below with jQuery slide.
This is the code. The sliding part is
$("#container_" + tabName).slideToggle
The point is that on the which i called "buggy" in the example, and also on all other in my dev version, the jQuery slide is jumpy at the beginning and end of the animation.
I've done some search I found that I had to put a defined width but it didn't change anything.. Tried a lot of stuff already but I really don't find how to do that.
See this fiddle: http://jsfiddle.net/8s9VB/
.container_projects .mainSmallText{
padding-top: 25px;
}
.container_projects .mainSmallSubText{
font-weight: bold;
}
#container_professionalXP{
line-height: 3px;
padding-bottom: 20px;
}
#container_professionalXP .mainSmallText{
padding-top: 30px;
}
Well it's basically the problem with the margin inside your paragraph. I've edited one part of it and added padding in the div rather than margin inside the paragraph. Here's one part I've edited:
#container_professionalXP{
line-height: 3px;
margin-bottom: 20px;
padding-top:30px;
}
#container_professionalXP .mainSmallText{
margin: 0px;
padding:0px;
}

Categories