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.
Related
I added a button to open a modal when clicked. It works when at the top of the page but when you scroll further down and try to click it, the button no longer opens up the modal. I've put only the code used for the modal and button without the rest of the site code into it's own file to test it and it works just fine so it has to be something somewhere else in the code affecting it.
Here's the GitHub link: https://github.com/xman2156/TOH
Your button appears early in the markup, and is positioned but doesn't have a z-index set. However, it has later siblings which are also positioned without z-index set, notably <div class="tab">, which means it will appear on top of your button in the z-index and block clicks through to it.
If you apply z-index: 1; to your button, that will move it in front of the div that's currently in the way. If you need to ensure it's always on top of other content, you might find it useful to wrap the rest of your content in a single element that creates a separate stacking context, for example by applying position: relative;.
For some more information on stacking contexts and using z-index, here is a link that I find is a useful reference: What no one told you about z-index
set z-index:1000 for both #info and #infoBtn
it'll solve your problem. I tried it.
I have a popup on my page, it display on clicking any div on the page.
There are multiple divs, with which this popup is associated.
Now the issue is if i click on div, popup gets open, but if i scroll, popup also scroll and come to wrong div.
How to make it fixed to its associated div after click?
Here is a quick example. I'm hoping this is something like what you're talking about. When the first box is clicked, an alert pops up and stays with the first box when scrolling.
I used simple jQuery to create the popup.
$('.box').click(function() {
$('.alert').css('display', 'block');
});
http://jsfiddle.net/d8xwev9o/
I added the facebook Like button to my website and am having an issue. When the Like button is clicked, the box that pops up doesn't overlay the other content like it does on most websites, instead creating a vertical scrollbar in the container (expanding it).
This issue actually exists on facebook's own website:
https://developers.facebook.com/docs/reference/plugins/like/
If you scroll about half way down the above page and click the Like button, the same issue happens:
The only difference there is that they have overflow set to hidden, instead of auto.
How can this be fixed?
Add to your CSS file:
.fb-like{overflow:hidden;}
This should solve the problem.
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
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.