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
Related
I have a script which generates input boxes dynamically,
var gridBuilder = function() {
var html = [];
for (var index = 1; index <= gridSize * gridSize; index++)
{
html.push("<input id='id" + index + "' class='field' type='text' size='3' maxlength='3' name='name" + index + "'/>");
}
return html.join("");
};
I am applying the following CSS.
.field {
padding: 5px;
font-size: 15px;
text-shadow: 0px 1px 0px #fff;
outline: none;
background: -webkit-gradient(linear, left top, left bottombottom, from(#bcbcbe), to(#ffffff));
background: -moz-linear-gradient(top, #bcbcbe, #ffffff);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #717171;
}
My css is linked to the correct class isn't it? The issue is that none of the CSS defined in .field is showing up on my input.
I've put your javascript and css into a JsFiddle, and the style is being picked up. I put in an arbitrary gridSize because I wasn't sure what numbers would be normal.
Check it out here - http://jsfiddle.net/rTw8r/2/
However, there was a typo on your webkit gradient
it should be
-webkit-gradient(linear, left top, left bottom, from(#bcbcbe), to(#ffffff));
You had bottombottom instead of bottom
It works as expected for me !
I made you a jsFiddle so you can see if you are doing something different :)
http://jsfiddle.net/neYXk/3/
Maybee you are doing a document.write in a bad place an "overwriting" the core html includeing your css ?
You should start using http://jquery.com/ ! Makes js life so much easier :) !
Make sure your CSS file is used on your page.
I'm running into a bug where my modal won't open in the center window. The code i'm currently using to measure the middle is the following:
var id = j('#share-modal');
// show modal, resize
j(id).css('top', j(window).height()/2-j(id).height()/2);
j(id).css('left', j(window).width()/2-j(id).width()/2);
j('#share-modal').fadeIn(500);
CSS
#share-modal {
display: none;
font-family: Arial, sans-serif;
width: 537px;
height: 510px;
position: absolute;
background: #FFF;
z-index: 100;
box-shadow: 3px 3px 3px #333;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
This is the only code I put that is supposed to be centering the code, but I can't tell if something else is interfering.
View my Javascript here:
http://pastebin.com/wZeY5azT
You can view it here: www.paultibbs.com/varier
Scroll down and click on the "Share with friend" button.
If anyone can help me solve this bug, i'd be greatly appreciated!
From jQuery Docs:
var height = $(window).height();
var scrollTop = $(window).scrollTop();
http://docs.jquery.com/CSS/scrollTop
http://docs.jquery.com/CSS/height
via How do I determine height and scrolling position of window in jQuery?
You need to take into account the scroll position.
// Add the pageYOffset should fix the problem
j(id).css('top', (j(window).height()/2-j(id).height()/2) + window.pageYOffset);
You'll also have to maintain watch on the scroll event and regenerate the position in case they scroll up and down.
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.
I made this tiny video (please ignore if background noises)
http://www.screenr.com/Qvts
its 13 seconds but only need to see the animation going on in second 5; (or go keepyourlinks.com and wait few seconds untill you can se the same box and click)
The css -the item has both clases-
.keepeos .top {
border-radius: 0.2em 0.2em 0.2em 0.2em;
color: #000066;
font-size: 40px;
height: 120%;
padding-bottom: 3px;
padding-top: 3px;
position: relative;
right: 10%;
top: -4px;
width: 120%;
}
.caja_con_sombra {
box-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
}
And the javascript (posted the full script but commented on the only, in my opinion, relevant line.
<script type="text/javascript">
var variable;
function check_more(id){
var nID=$(".item_lista_links:first").attr("id"); //get the newest item's id
var tid= nID.replace('link', '');
$('#are_more').load('/includes/router.php?que=check_more&last='+tid+''); // check if newer
}
function buscar_nuevos(){
var nID=$(".item_lista_links:first").attr("id");
var id= nID.replace('link', '');
variable = setInterval('check_more('+id+')',15000); //start checking
}
function ver_nuevos(id){ // when found news and retrieving
clearInterval(variable);
$('#are_more').html(''); //clear div
/*THIS is basically the only relevant javascript line, i think */
$('#load_more').slideUp(100).load('/includes/router.php?que=load_more&last='+id+'',
function() {
variable = setInterval("check_more(139125)",15000);
$(this).slideDown(600); //start checking
return false;
});
}
</script>
So how can i prevent this shadow to expand the whole vertical animation?
I'm still not exactly sure what's going on, but I know how to fix it (at least for now). It might be due to the element sliding in mixed with a height issue in jquery for elements that are children in the sliding element, but I'm not sure. Either way:
Knowing that, here is a fix. In estilo.css , find
.keepeos {
height: auto;
}
Change that to:
.keepeos {
height: 18px;
}
This will work against you if that ever becomes multi-lined, so if you need to in the future, maybe you can switch the tag while sliding and then switch it back when it's done.
I am trying to get a small polyfill (https://github.com/heygrady/textshadow) to add text-shadow effect on Internet Explorer to work, but can't seem to figure out how to make it work. This is the code I'm using:
<script src="#Url.Content("~/Scripts/modernizr.custom.61772.min.js")" type="text/javascript"></script>
<script>
Modernizr.load({
test: Modernizr.textshadow,
nope: ['/Content/jquery.textshadow.css', '/Scripts/jquery.textshadow.js'],
complete: function () {
$('h1').textshadow('1px 1px 2px #111')
}
});
</script>
I do get an effect but it looks all wrong. I just end up with the original heading text all over again, with the exact same formatting as the original text, but offset towards the bottom by half a line height.
EDIT: So after some experimenting I found out that I can at least get the shadow effect by manually creating the CSS rules for the class, rather than relying on javascript to do so, like so:
h1 .ui-text-shadow-copy
{
color: #111; /* color */
filter:
progid:DXImageTransform.Microsoft.Blur(makeShadow=false,pixelRadius=2); /* blue */
left: 0px; /* left - blur */
top: 0px; /* top - blur */
}
But the positioning is still screwed up. With left 0px and top 0px the shadow is placed half a line below the text. With anything else pieces of the shadow is spread out around the page.
I got it to work but I had to override the css styling inside the .textshadow method to get it to look right. Here's what worked for me:
CSS for browsers that support text-shadow:
.ts {
text-shadow: 2px 2px 2px #111111;
-moz-text-shadow: 2px 2px 2px #111111;
-webkit-text-shadow: 2px 2px 2px #111111;
}
Modernizr.load:
Modernizr.load([
{// load jquery
load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
complete: function () {
if (!window.jQuery) {
Modernizr.load('/TimeTracker/Scripts/jquery-1.7.1.min.js');
}
}
},
{//other scripts that depend on jquery, including jquery ui
load: ['some.js','some.other.js']
},
{
test: Modernizr.textshadow,
nope: ['/url/to/jquery.textshadow.css','/url/to/jquery.textshadow.js']
},
'/url/to/file/that/contains/document.ready.js'
]);
document.ready.js:
var m = window.Modernizr;
function loadJqueryTextshadow() {
$('.ts').textshadow('2px -12px 2px #111111');
}
$(function(){
if (!m.textshadow) {
loadJqueryTextshadow();
}
}
The end result is close enough that the majority of users would never know the difference between IE, Chrome, and Firefox.
Try to use Microsoft DropShadow css filter for that:
h1 .ui-text-shadow-copy {
filter: progid:DXImageTransform.Microsoft.DropShadow(Color=#111111, OffX=1, OffY=1);
}
Where:
Color is RGB value for shadow
Offx - pixels for shadow offset by x
Offy - pixels for shadow offset by y
Simple answer: forget about text-shadow in IE. There is nothing available that can render close enough to other browsers.
you can use Css3Pie to text-shadow and border-radius:
http://css3pie.com/
Modernizr.load([
{
test: Modernizr.borderradius && Modernizr.boxshadow,
nope: 'PIE.htc' }
]); /*fine load modernizr*/