I have a div section, which is full of tags, on a event on the page I shrink the div section BUT if the user tabs into the div section, it moves so that the highlighted <a href> has focus, is there any way to lock a div section that it's contents don't move ?
So for example the code (psuedo not real) I have the following
<div>
<h4>Heading</hv>
Link 1
Link 2
Link 3
</div>
I shrink the div section so that only the h4 is displayed {overflow:hidden}, however the user can then tab to the elements and this scroll so that they are displayed in the the div "window" which is not what I want, so in effect I get <div>Link 1<div> where what I want to remain is <div><h4>heading</h4></div> in effect I want to stop the contents of the div sectio scrolling so that the selected element is displayed. I know that if they press return the selected link will be follow, but I'm not worried about this, just what is displayed
I hope thats cleared, you can see my problem if you go to link text click on the training section on the left and then back tab (shift tab) , the article section above changes.
Thanks
is there any way to lock a div section that it's contents don't move?
Not really*, but you don't really want that anyway. Even if you locked it in place, the invisible links would still accept focus, resulting in a confusing tab behaviour.
(*: short of something horrendous like changing the scrollTop of the overflowing element from JavaScript onfocus. Ugh.)
What you should probably do is put a div around the links, and set its display style to ‘none’ when the links are elided. That way they won't participate in the tabbing order.
From what I can make of your question, you want your div to stay fixed relative to the browser window. If this is the case, it can simply be done by declaring position:absolute for the div.
If you want something else, please clarify your question.
Related
So on my page I have a menu that is fixed to the top of the page. The menu is roughly 50px high and spans the entire width of the screen. In order to display the content of the page properly on load I set an arbitrary amount of padding to the top of the body content. Now, if I want to link to an element on the page using:
anchor text
Normally when these links are clicked, the element in question is displayed at the top of the browser window. However, since I have my fixed menu there, the content (or at least the first ~50px of it) is hidden by the menu.
Is there a way to offset the inner-page link so it doesn't bring the requested element to the very top of the page?
Using Javascript (jQuery), assuming your content div and your hyperlink have an id, and, assuming I understand your question:
$("#yourAId").click(function(){
$("#yourContentId").css("padding-top", $("#yourContentId").css("padding-top") + 50 );
});
I am using this:
http://www.useful-dates.com/search/
What script do I need to use so that the scrolled underneath scrolled div stays hidden and then appears when you click it and disappears when you click outside of the appears div?
Like this, but i have had no luck duplicating:
http://rob-bell.net/static/ddlist.html
Iv searched and tried all kinds of things on the net and no luck, please help.
Something has to be there in the background to catch the click. Looks like they used display: block with a fixed height/width in the working example, so that a click outside the drop-down would hit the "body" element, to which the event is attached.
In my page header, I have an image div with overflow:hidden.
In the content area, I have an bookmark anchor tag:
<a name="arghargh"></a>
At the top of the content area, I have a link to the bookmark:
go the the bookmark
When I click the link, the content disappears, leaving only everything outside of the content div.
I found this post describing the exact same issue. Based on that, I removed the overflow:hidden, and everything works fine, except that I need overlow:hidden for the page formatting to work correctly.
Help!
Update
It appears that, with overflow:hidden, the bookmark is causing the div to scroll internally, which moves all of the content up until the bookmark tag is at the top of the visible area. This is not cool.
Remove overflow:hidden and add <div style="clear:both"></div> as last inner element to keep the page formatting to work correctly.
Can't you just use id="arghargh" on the div instead of an anchor tag? Does the problem still occur then?
I have a scrollable area that contains popup menus. Conceptually, something like this:
<div style="overflow:auto; width:100px; height:100px">
... content here that's big enough to trigger scrollbars...
<div>
Click here
<div style="position:relative">
<div id="popup"
style="display:none; position:absolute; width:150px; height:150px">
... more content. This div gets shown and hidden by jquery on click events.
</div>
</div>
</div>
</div>
The problem is that when the popup menu pops up, it is also contained within the scrolling div, and doesn't show up outside the 100x100 pixel scrollable area no matter how high I make the z-index. I realize of course that in a sense that's exactly what I asked for when I told the outer div to be overflow:auto in the first place. But for my use case it isn't what I want - I want the popup menu to be "over the top" and able to extend outside the scrollable area, while still staying in the right place, which is to say, directly underneath the "Click here" link. Even though the "Click here" link can move around as the container is scrolled.
I also realize that there are some complicated workarounds I could employ, like putting the popup entirely outside the scrollable div and using javascript to position it. And then I'd need to react to scroll events to reposition it as the content is scrolled, etc. Quite apart from needing to write lots of code to re-implement what the "position:relative/position:absolute" gave me for free, that'd also require quite a bit of refactoring of my own code, so I'd rather avoid it.
I'm wondering if there's some simple trick I can apply to my inner div to tell it to disregard its container's "overflow" property, or, failing that, a handy jquery script that will implement the complicated stuff for me behind the scenes so I just need to call it to get the effect I'm after.
I'd say that it's not possible to do that without using JS to calculate the position of the link and then display the popup with a position:fixed..
The problem is that your popup is inside a div with overflow:auto and everything inside that div will affect the scroll, so to show the popup you'll need to take it outside that div, and the only way i know to do that is by using the position:fixed... (or maybe using position:absolute on the popup, and a wrapper div with position:relative that contains the text and the popups)
so i'll propose 3 solutions:
put the popup outside the div with scroll, and when the user clicks
on the link, display the popup
calculate the exact position of the link (x,y) and display the popup using position:fixed and the coordinates
use a nice and always-easy-to-use "message box" (e.g. http://csscody.com/demo/wp-content/demo/popup/demo.htm) I know that this is not exactly what you wanted, but.. i ran out of ideas =D
I hope this helps
Displaying a popup inside a of a div with "overflow: auto", "overflow: scroll" or "overflow: hidden" will always generate this kind of issues. By rule, an element child can't be displayed beyond the parent's borders in all these cases because the overflow property makes precisely that. Using "position: fixed" to the popup will solve your issue BUT if you scroll down you'll see how the popup is displayed in the old position, previous to the scroll event. To solve this you can use JQuery, as follows:
$(".your-popup-PARENT-class").live( {
mouseenter: function(event) {
event.stopPropagation();
var position = $(this).offset();
$(this).find(".your-popup-class").css("top", (position.top + 30) );
$(this).find(".your-popup-class").css("left", position.left);
$(this).find(".your-popup-class").css("display", "inherit");
},
mouseleave: function(event) {
event.stopPropagation();
$(this).find(".your-popup-class").css("display", "none");
}
});
This code segment finds your popup parent element on the DOM tree, saves the current position and display the popup in the same position of the parent. As you can see, you can add or remove needed pixels, (bold code in previous CSS top definition).
Hopefully, this will be hepful for someone else with this kind of issue.
Kind regards!
I'm not sure what the effect you're going for is, but if you remove the popup's container, then the popup will show up outside of the scrollable div.
<div style="overflow:auto; width:100px; height:100px">
... content here that's big enough to trigger scrollbars...
<div id="popup"
style="display:none; position:absolute; width:150px; height:150px">
... more content. This div gets shown and hidden by jquery on click events.
</div>
</div>
I don't have an answer to this but if you ever found a good answer I'd love to hear about it. I have a very similar issue (I've a list of options for the user to select to modify the item in the scrolling section. It doesn't look so good if I'm near the bottom of the list.
I am using ScrollTo and LocalScroll on my single page site, which scrolls in all directions. I have four large divs inside a wrapper, two on top and two below those. Each div is a 'page' of the site.
Onload, the page goes to the 'home' div anchor, at the bottom left of the window/page. My issue is that anytime I try to scroll horizontally from one of the bottom divs to another via my floating nav box, it flashes the content from the div above it before scrolling to the correct linked div.
There is no 'flicker' or 'flash' of any content when the scrolling originates from a top div.
Any help is very much appreciated!
It took some time and tons of Googling but I finally figured this out.
Comment from: Freelancer ID [Member]
I think i've got the problem..
If you put # in the HREF attribute of the A tag, then the window will go up on click to go the ID (which is nothing)
To fix this, Please try to use the following:
- Put "javascript:;" in the HREF attribute of the A tag.
- Or use DIV, SPAN... etc with cursor:pointer css style and onclick event.
This will fix it.
Source: http://blog.freelancer-id.com/index.php/2009/03/26/scroll-window-smoothly-in-jquery