Suppose I have a div whose content is dependent on the button click on top of that. The content of three button clicks are stores in variables one, two and three.
<div id="onebutton"></div>
<div id="twobutton"></div>
<div id="threebutton"></div>
<div id="content"></div>
Using jQuery, when the onebutton div is clicked, I put the HTML content of variable one into the content div:
$('#content').html(one);
Now, what sometimes happens is that the content is present in the div, but it does not show. It sometimes shows when I hover the mouse over the div and gets shown in parts (i.e. the browser shows only some part of the div where my mouse is).
There is a tool called Active X-Ray Googles. When I activate it and take my mouse over the content div, it is also shown.
I do not know what is wrong. I have tested it in 20 versions of Chrome, but it does not work on one of them. The version it does not work on is the latest version of Mac OS X Mavericks on a MacBook Pro Retina.
Related
I saw a good website template and started making a website. The link is: https://html5up.net/lens. In the process, I observed a typical UI bug, where in if a user scrolls down the page and clicks on "X" of the image (to see fullscreen image),toggles back, scrolls to the top of the page, the content which was visible before disappears though it still appears in the DOM.
I saw the js function written for the toggle, it's straightforward and works fine until we don't scroll on the web page. Please see bug screenshot.Screenshot of the bug
This is a known, ongoing issue with Chrome and CSS visibility. You can 'fix' this by updating the CSS of the affected children, ie. changing classes or simply setting the visibility of the child element manually. I believe this to be because Chrome automatically prevents the rendering of the divs because at the time they are called to be shown, they are off screen and not viewable.
When I physically use the mouse to click on my div, then pageUp and pageDown scroll the div. However, when I programmatically trigger a click on the div, then pageUp and pageDown fail to scroll the div. How can I get pageUp and pageDown to scroll the div without the user having to physically click in the div?
Details:
What I am trying to do is to let the user pageDown to the bottom of the div, then one more pageDown loads the next set of content into the div and auto-scrolls to the top; and vice versa for pageUp. It works great as long as the user has clicked inside the div. I am trying to make it so they don't have to actually click in the div to be able to scroll via pageDown or pageUp.
I am certain that the programmatic click is happening because the click event listeners get triggered. My pageUp listener also works to load the previous set of content (because the scroll bar starts out at the top).
I am developing within Node-Webkit (Chrome) and angular.js, but cross-browser support is also necessary.
Things I have tried:
$('#div').click();
$('#div')[0].click();
$('#div').trigger('click');
$('#div').focus();
$('.focusableThingInsideDiv').focus();
$('#div').scroll(); //just trying random things at this point
I have also tried stopping the default browser behavior and implementing the scroll myself (via setting scrollTop). This technically works. However, I would prefer not to override the default behavior if possible.
The page up and page down work, after you click on the div, because it gains focus. So, although it does not show as a focused element after clicking, you still want the $('#div').focus() line.
The tricky part is that to be able to focus on a div programatically you need to give it a tabindex. Something like <div tabindex="0">...</div> will make the focus suddenly work in Chrome.
Other browsers (IE and Firefox) do not seem to required this. The focus() will work from the start but adding tabindex=0 will not hurt.
I'm building a site which has a mobile branch .
I succeed to build the site as many browsers from PC's can take the same view and work fine .
now I'm moving to build the site as the mobile can browse the site from maybe mobile chrome or Firefox mobile. I did that but I'm facing a small problem .
many pages of the site has text boxes which you know if you click on it using the mobile
-for example galaxy note 2 - the soft keyboard will show it self on the screen ,two things happens during this process :
1- the screen will zoom itself until reach the specific text box that you have clicked on.
solution : I solve it by this command
,so now the screen will not zoom itself.
2- If I have a page which have an including file ,the main div will change his position until reach the above div -included file- and the hall page will be not ordered .
first I will she a brief example about what I mean :
note :my back end is php using Yii framework ,just for info ^_*
page.php:
<div id="div1" style="width:100%;position:relative;margin-bottom: 10px"><?php
if (Yii::app()->user->isGuest)
include 'flash.php'; ?></div>
<div id="div2" style="width:100%;position:relative;margin-bottom: 10px">
<form action="getup" method:"post">
<input type="text" name="text1" >
<input type="text" name="text2" >
// submit button
</form>
now after this brief code , i will show you exactly what is happening , when browse the page from mobile chrome browser the page will be ordered ,but if you click on any text box as text1 for example , what occurs is that DIV2 will move itself up above DIV1
-included file- because the soft keyboard will show it self on the second half on the screen.
after this example i will oppose my question :
my question is : is there any code -CSS or Java Script - will stop the rising process which is happening to the DIV2 after the soft keyboard show it self on the mobile screen?
Perhaps this behavior is related to css you're using? Try removing position:relative from your inline style, maybe it will help. Another thing is that input should be self closing tags and div2 closing tag is missing. You don't need to set width of the div tag to 100% as it is its default value.
I've got a minor issue with a legacy app. It displays a graph and when you move the mouse over a point on the graph, it displays some info in a tooltip as well as on the status bar at the bottom of the browser (it's an IE-only app). But it doesn't always display the info; sometimes you have to move the mouse off the point and back on again to get it to display. Back when the app was written, the developers used onmousemove to display the info, instead of onmouseover. Not really sure why so I changed it to onmouseover to see if it makes a difference and it seems to work more reliably, except that now the info doesn't show up on the status bar. Instead, the href info displays (the points on the graph are clickable to drill-down on that point).
Here is some simple sample HTML that displays the problem:
<html>
<script language="JavaScript">
function display(txt) {
window.event.srcElement.title = txt;
window.status = txt;
}
function reset() {
window.status = window.defaultStatus;
}
</script>
<body>
This is mouseover text.
<br/><br/>
This is mousemove text.
</body>
</html>
Is there a way to make the onmouseover event actually display the info on the status bar instead of showing the href info? When using onmousemove, the status bar very briefly shows the href info and then changes to the specified text. Is this just an issue with the order that the two events work?
If the <a> (anchor) in your app has no (real) href, you can replace it with any other html element. (<span> for example); the anchor isn't adding anything (from behavior perceptive), except default styling.
When replacing the anchor with another element some
additional styling is maybe needed. For styling I added the class 'link'
<span class="link" onclick="alert('do something');" onmouseover="display('Displaying mouseover!');" onmouseout="reset();">This is mouseover text.</span>
css:
span.link
{
color:blue;
text-decoration:underline;
}
I know this won't fix the problem with onmouseover + <a> but it gives
you the guarantee that the 'href' is never shown in the statusbar and the JavaScript functions will work.
That looks correct as far as I can tell. One thing you may want to check into is that modern browsers have disabled the ability to change status messages. This is done for various reasons - the primary one being security. If you mouse over a link, you should see where the link goes - not some hidden text that prevents you from knowing where you're heading next. You can change the settings on the browser to ensure that you see status messages.
In Internet Explorer:
Go to Tools > Internet Options
Click the Security tab
Ensure that the Internet option is selected/highlighted
Click Custom Level... (this launches the security settings for the Internet zone)
Scroll down until you see Allow status bar updates via script (under the Scripting option). Click Enable
Click OK to save this screen
Click OK again
Of course, you could always go another route and just make the tooltip show the coordinates rather than the status bar. Have you tried that? That's just basic HTML (using the alt attribute).
In my opinion the problem is that you are trying to make the legacy app remain a legacy app.
window.status: Sets the text in
the status bar at the bottom of the
browser or returns the previously set
text.
But its obslete now.
For example if you wanna make it work in Firefox, you have to follow this.
To allow scripts change the the
status bar text, the user must set the
dom.disable_window_status_change
preference to false in the
about:config screen.
chrome extension - popup page has links. need to show the description on hover of the links as a popup to the left side of the link(means the description div will come outside of the extension wondow).(popup page has popups)
similar to vertical drop down menu...
should work in the chrome extension.
I tried a lot , but its not working in chrome....
I have an idea for firefox ....
take a main div .
Take 2 more divs inside the main div both of same size and also give the positions properly.
show the links in the 1st div and the descriptions in the 2nd div...
Make the 2nd div's background = transparent. (CSS property)
and on hover of the links show the respective description div in 2nd div in front of the links..
Try it out......
Your link text
You need the TITLE in your links... this will display inside your popup...
"Nothing in the popup can be outside the window." as kinlan said.