I have the following legacy code creating a popup "autocomplete" box under a form input, using results returned from an AJAX call. This code works fine in Firefox 6 and IE9 - it pops up a little div (styling is what Chrome shows in Developer Tools):
<div id="theDiv" style="position: absolute; left: 0px; top: 21px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: green; border-right-color: green; border-bottom-color: green; border-left-color: green; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-image: initial; background-color: white; z-index: 1; visibility: hidden; "><div style="visibility: visible; ">[...autocomplete text here...]</div></div>
I can see this <div> in FF and IE, but Chrome displays a <div> that appears to be collapsed down to its borders. Oddly, if I set a breakpoint using Developer Tools in the javascript code below at the this.oDiv.style.visibility = "visible"; line, Chrome creates the <div> and shows it with the collapsed-down-to-borders size, but if I switch to the Elements tab in Developer Tools to try to see why, Chrome seems to recalculate something and my <div> suddenly appears and is correctly displayed. If I refresh, things are broken again.
Is this a Chrome bug, or is there something wrong with my code?
The relevant code:
AutoComplete.prototype.onchange = function()
{
// clear the popup-div.
while ( this.oDiv.hasChildNodes() )
this.oDiv.removeChild(this.oDiv.firstChild);
// get all the matching strings from the AutoCompleteDB
var aStr = new Array();
this.db.getStrings("", "", aStr);
// add each string to the popup-div
var i, n = aStr.length;
for ( i = 0; i < n; i++ )
{
var iDiv = document.createElement('div');
var myText = document.createTextNode(aStr[i]);
iDiv.appendChild(myText);
iDiv.FormName = this.FormName;
iDiv.onmousedown = AutoComplete.prototype.onDivMouseDown;
iDiv.onmouseover = AutoComplete.prototype.onDivMouseOver;
iDiv.onmouseout = AutoComplete.prototype.onDivMouseOut;
iDiv.AutoComplete = this;
iDiv.style.visibility = "visible";
this.oDiv.appendChild(iDiv);
}
this.oDiv.style.visibility = "visible";
}
Looks like "theDiv" is absolutely positioned, so to be absolutely sure :) you need to specify not only its top and left but also right and bottom (or width and height.) Please see this for more details on the element rendering in your case.
I am not sure if this is what you need. But I had a similar issue. I was dynamically adding input boxes on my page on a button click event.
When the input boxes were not getting added on button click event in Chrome my script tag was as follows :
<script type="text/x-javascript" language="javascript">
Notice that the type is text/x-javascript .
And then I changed it to text/javascript and it worked then.
I just solved this issue so don't know the difference between the two types.
Related
I have made div "button" which has fixed style so it would always stay at one place even when scrolling page. Here is the code
var backButton = document.getElementsByClassName("go-back");
for(i = 0; i < backButton.length; i++) {
backButton[i].style.cursor = "pointer";
backButton[i].onclick = function() {
hideIstorija();
hideVerta();
hideSarasas();
showStarting();
}
}
.go-back {
position: fixed;
background-color: rgba(0,0,0,0.5);
bottom: 0%;
margin: 50px;
padding: 25px;
border-radius: 100px;
}
<div class="go-back">
<
</div>
When the page is fully scrolled up, it works as intended, but after scrolling a bit down button stops working. Any ideas how to deal with this?
here might be multiple cases depending on other content. It's possible the button is actually obscured by some transparent element on top of it, especially if the cursor doesn't change while hovering over it. Adding z-index: 100 (or some other arbitrarily big number) can help.
I am trying to change a class of a element and my view gets distorted?
How do I solve it.
I have created the fiddle for the same Jsfiddle
Issue Description:
I have a custom textbox. I have a reference value at top left corner of it.
If I enter value greater or less than the reference value , I show a box asking for reason.
It works perfectly fine, but when I try to add some extra functionality , like changing the color of the div in right top corner of textbox by changing the class of the div , the view is distorted and not as it was expected.
In the fiddle I can commented the code in javascript section at line 73,74,77,78
function changeClassOfCommentToRed(divId){
//$("#"+divId).removeClass();
//$("#"+divId).addClass("commentCornerRed");
}
function changeClassOfCommentToGreen(divId){
//$("#"+divId).removeClass();
//$("#"+divId).addClass("commentCornerGreen");
}
if I uncomment the above line for extra functionality , I get a distorted view as in following image
You only need to remove the classes you want to change:
function changeClassOfCommentToRed(divId){
$("#"+divId).removeClass("commentCornerGreen commentCornerRed");
$("#"+divId).addClass("commentCornerRed");
}
function changeClassOfCommentToGreen(divId){
$("#"+divId).removeClass("commentCornerGreen commentCornerRed");
$("#"+divId).addClass("commentCornerGreen");
}
And in your CSS you need to address your arrow pseudo element not the element itself:
.commentCornerRed:after {
...
}
.commentCornerGreen:after {
...
}
With this changes, only the color of the arrows is changed, not the color of the box.
Try to specify which class to remove in your removeClass :
removeClass('classToRemove');
If I get what question correctly. I think this commentCornerRed class got width: 0 and height: 0. you can have the same properties as .arrow_box
.commentCornerRed {
position: absolute;
width: 0;
height: 0;
display: block;
border-style: solid;
border-width: 0 10px 10px 0;
border-color: transparent #ff0000 transparent transparent;
padding-left: 36px;
cursor: pointer;
}
You can make it like this.
.commentCornerRed {
position: absolute;
background: #bcb476;
border: 1px solid #08090a;
z-index: 1;
margin-left: 50px;
margin-top: -40px;
}
I made a silly mistake. I was passing the wrong id for class name. Got the desired result by passing the right id at line 85 and 87 in javascript section.
changing from
function handleCommentBox(event){
if(checkIfReasonSelected(returnIdPrefix(event)+"r1")){
changeClassOfCommentToGreen(returnIdPrefix(event)+"r1");
}else{
changeClassOfCommentToRed(returnIdPrefix(event)+"r1");
}
}
to
function handleCommentBox(event){
if(checkIfReasonSelected(returnIdPrefix(event)+"r1")){
changeClassOfCommentToGreen(returnIdPrefix(event)+"c1");
}else{
changeClassOfCommentToRed(returnIdPrefix(event)+"c1");
}
}
solved the problem. Thanks people for helping.
I have used this CKEditor in flex.
<ckeditor:CKEditor id="editor1" width="100%" height="100%">
<ckeditor:htmlText>
<![CDATA[
]]>
</ckeditor:htmlText>
</ckeditor:CKEditor>
This editor is in one screen. Which reload every when i come back to that screen.
When i load first time then CKEditor working fine. I can add text to that editor like:
editor1.htmlText = "<some html text>"
Ans also i can clear the text using.
editor1.htmlText = "";
Problem:
But, when i go to another screen and come back to editor screen again then it behave weird. I can not add html text and also can not clear.
on first load it looks in inspecting element like:
<div id="ck0" style="position: absolute; background-color: transparent;
border: 0px none; visibility: hidden; left: 312px; top: 114px;">
While when i reload that screen then.
<div id="ck0" style="position: absolute; background-color: transparent;
border: 0px none; visibility: hidden; left: 312px; top: 114px;">
<div id="ck1" style="position: absolute; background-color: transparent;
border: 0px none; visibility: visible; left: 312px; top: 114px;">
There are displayed two editor previous is not removed and new load with ck1 id.
It will always add new editor with increment in id like ck1, ck2 and so on., even if i remove it.
Don't know why this happens. I tried all the things but didn't succeeded.
Any help would greatly appreciated.
Edit: In body it will added following code:
<body onpageshow="event.persisted && (function(){var allInstances = CKEDITOR.instances, editor, doc;for ( var i in allInstances ){ editor = allInstances[ i ]; doc = editor.document; if ( doc ) { doc.$.designMode = "off"; doc.$.designMode = "on"; }}})();">
When I'm using an javascript alert it's going on top of the browser, not in center position in current version of chrome. How can I control it, and make it center with javascript. In firefox and IE,it's working just fine.
My current chrome version 30.0.1599.66
I want to position the alert box in exact center of the browser for all type of browsers and for all versions. Please help........
Any other simple idea on providing alert so that it could be centered, would also be appreciable...
Being dependent upon the browsers for the alerts is not a good choice for any. They change rapidly and are not the same for different browsers.
What i have found useful is to use Alertify JS for all the alert needs. You can customize it for your needs and it looks fabulous anyway.
Since it is a default box, u cannot position it, though u can create your own and position it accordingly..
try this
http://jqueryui.com/dialog/
You want alert() dialog position in center. Try this simple script.js
// alertMX - improve alert()
$("<style type='text/css'>#boxMX{display:none;background: #333;padding: 10px;border: 2px solid #ddd;float: left;font-size: 1.2em;position: fixed;top: 50%; left: 50%;z-index: 99999;box-shadow: 0px 0px 20px #999; -moz-box-shadow: 0px 0px 20px #999; -webkit-box-shadow: 0px 0px 20px #999; border-radius:6px 6px 6px 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; font:13px Arial, Helvetica, sans-serif; padding:6px 6px 4px;width:300px; color: white;}</style>").appendTo("head");
function alertMX(t){
$( "body" ).append( $( "<div id='boxMX'><p class='msgMX'></p><p>CLOSE</p></div>" ) );
$('.msgMX').text(t); var popMargTop = ($('#boxMX').height() + 24) / 2, popMargLeft = ($('#boxMX').width() + 24) / 2;
$('#boxMX').css({ 'margin-top' : -popMargTop,'margin-left' : -popMargLeft}).fadeIn(600);
$("#boxMX").click(function() { $(this).remove(); }); };
Include Jquery and use javascript:
alertMX('Hello!');
You cannot control the way browser display alert. Instead, you should write your own function to display div with your message. It could be something like that:
function customAlert(msg) {
var alertDiv = "<div style='position: fixed; top: 20px; left: 20px;'>"+msg+"</div>";
document.getElementsByTagName('body')[0].appendChild(alertDiv);
}
Ofcourse you should do some calculation there to properly position the div where you want. Also it would be much easier if you use jQuery or some other js framework...
[Edit]
Try something like that if you want to force popup from JS.
Popup example
Sorry for the unclear title, I can't formulate a better concise explanation.
I have a list, and within each list item is a link which opens an othersiwse hidden <div> using the following jQuery:
$('a.showreranks').click(function () {
$('body').append('<div class="overlay"></div>');
$('#rerank_details').slideToggle(300);
return false;
});
rerank_details being the id of the div and showreranks being the class of all the links.
This is the CSS of the div:
#rerank_details {
display: none;
background: white;
position: absolute;
border: 1px solid black;
border-radius: 6px;
width: 305px;
padding: 15px;
overflow: hidden;
top: 50%;
left: 50%;
height: 200x;
text-shadow: none;
z-index: 50;
}
So, you see, the opened div is centered when it's opened. It is then populated with info relating to the list item that was clicked but you don't need to worry about that. What I need help with is the following - I don't want the div to be centered on the screen. Instead I'd like it to be positioned right below the link that was clicked. Note that there could be a lot of links on the page, one below the other and the vertical distances could be irregular. How do I accomplish this?
I think that this is what you are trying to do:
http://jsfiddle.net/SO_AMK/r7ZDm/
The answer has already been accepted, but perhaps this is a cleaner version. The animations are all fixed.
if it doesn't have to be within the normal flow of the DOM just use absolute positioning and the event object.
function(event){
var box = //get a handle to box
box.style.position = 'aboslute';
box.style.left = event.page.x;
box.style.top = event.page.y;
}