I'm using Harvest's "chosen" plugin, and it's working fine until the browser window increases too far in width-- then for some reason it calculates that left should be -9000 and renders off screen.
Furthermore, I can no longer get it to close by clicking outside of the dropdown area.
Screenshot below-- what can be seen of the dropdown is circled in red. Has anyone else run into this problem?
I just realized what's going on.
When you're outside of the input/dropdown, the dropdown is still rendered, but given a left of -9000px.
My browser width is currently about 9400 px.
Still don't actually know why it's not closing, though.
EDIT: edited the src to use show/hide instead of left and it works now....
Related
Site description
I have a page where a list of 10 div are showing at once while 100 are in the source document. On the bottom is a button that - if clicked - hides these 10 div and shows the next 10 div. The button itself is a styled link with href="#top" where the id belongs to my navbar on top.
Problem
If I use Chrome it doesn't jump to top every time I click on the button. Sometime it jumps and sometimes it just show the new divs without the jump to top.
What works
If I use Firefox there's no problem.
Question
How can I figure out where's the problem - I mean, could there be an error somewhere else in my code that leads to this behaviour (no jump to #top) - or is there an alternative way to tell the users browser to jump to top that I should or could use?
Instead of using anchors and links to them (because your anchors might change positions, or work different between browsers), you should use Javascript, using the window.scrollTo() function:
HTML
<button onclick="scrollToTop()">Go to Top</button>
Javascript
function scrollToTop(){
window.scrollTo(0, 0);
}
Note that scrollTo() takes two parameters; the top and left position to scroll to. Also scrollTo() is not animated, it will scroll instantly to the position that you set.
I am using ui-select (Version: 0.8.3, angularjs) library in order to display a drop down list.
I have a situation when i click on a text area there is JavaScript that changes the height of the div to a larger height so it can be scrolled up.
the problem is that when it occures the dropdown remains open and does not close.
after a little of debugging i saw that the OnDocumentClick is not being called once the height is to big.
if i don't change the height of the div, it is working correctly.
Is there any other solution possible?
Thanks.
I have encountered a strange bug using my OpenCart website in Chrome. The product images are not showing up but I see the white area where they should come.
If a product doesn't have an image it's aligned to the left but in this case I can see the white area where the picture normally is.
And here's the crazy part, if I click on inspect element, suddenly the image appears.
Some css code
.product-list .image {
float: left;
margin-right: 10px;
overflow: auto;
}
In the CSS you need to set the width and height attributes.
That is weird. Regardless, things to check:
Z-index: The outer box that surrounds the image might be "above" the image itself. Add z-index to the image with a value of 9999 to check
Position: if it's parent container or god knows what else has a weird position it could be affecting where the child element, in this case an image is appearing.
Disable JS - Javascript might be causing an issue here, try disabling it to check.
Also, when you use chrome dev tools, you are technically "hovering" on the image. And you say it suddenly appears. So I'd take a look at your :hover rules as they apply to images. A lot of sites will use a sprite technique that shows one image in normal state, and then shift the background to a different part of the same image on hover. Your normal state could be empty and the hover then moves the bkgd position to the image you want.
Let me know how this turns out.
More scenarios to replicate this issue
1. Close inspect if not already opened.
2. Resize inspect if already opened.
3. Resize browser window.
Just to follow up on this issue, Mary's answer is the correct one, but for our circumstances it was important not to set a width and height in order to maintain responsiveness. But apparently setting width and height to auto works just as well, even though it makes no difference in appearance.
So, since opening the Web Inspector resizes the page in some cases, you should look into:
resize handlers on JavaScript side that might be causing your images to show up
media queries that satisfy certain width and only show images then on CSS side
Picture element having media queries that
aren‘t covering the width you are viewing this with.
For me this was the Picture element having a gap in its media attribute definitions (<source media=(min-width: 1824px)">).
For some reason the Facebook Like button on my webpage has only a small hotspot, I'm only able to click in the area just under where it says 'like' rather than the whole Like button.
http://www.melbournedodgeball.com.au/team/3
If I go to a page for a team that does not exist, the problem is not there:
http://www.melbournedodgeball.com.au/team/300
Any ideas why this could be the case?
Upon inspection with chrome inspector, it seems your
<h2> Ya Mum!</h2>
element is somehow blocking part of the like button where it is clickable. if you could somehow shrink the width or get it to stop flowing over the like button, the problem will be solved.
Edit: Tried changing font size for h2 and it also made the whole "like" button clickable.
Looks like its the position:absolute on the iframe, try just using float and you should be right.
I'm sorry if the title is not very good, any suggestions are welcome.
The entire page is an iframe onto another website (in this case, jquery.com just for demo purposes). I have an overlay "Hello World", and if you click on the X it minimizes it (click again it will open it).
My issue in this case is that it covers the scrollbar on the right.
I assume the reason is I have a CSS positioning the sidebar at right:0, however since it's an iFrame it doesn't count the scrollbar.
What are my options for working around that?
I thought of giving it some extra space, but how do I know if the page really has a scrollbar, or how big the scrollbar is?
Is there a way to place the overlay at a position WITHIN the iframe instead?
There is no way to detect the remote page's height or even if a scrollbar is present or not. Your only option, besides moving the sidebar to the left, is detecting the browser's scrollbar width and permanently shifting the overlay off the right edge this amount.
yes. just set the right to 40 for example right: 40px;
There is an example here that shows you how to detect if an iframe has a scrollbar:
How can I detect a Scrollbar presence ( using Javascript ) in HTML iFrame?
And there is also an example here that measures the scrollbar width
http://4umi.com/web/javascript/scrollbar.php
Once you know these you can place your overlay however many pixels from the right