|
JavaScript - How Can I Get The Chrome Height Of A Browser Window?
Hi,
I am trying to get the Chrome Height of a browser window. I tried window.outerHeight - window.innerHeight but that gives me the height of the chrome plus the status bar. Does anyone know of a way to just get the height of the chrome of a browser window? Or, get the screen coordinates of the inner body of the browser window. Because, then I can subtract those coordinates from screenX and screenY. Thanks for your help. Similar TutorialsHi All, I need to show/focus the parent window which is in back when click a link from child window in Chrome.This problem is in Chrome browser only. We have used the below code self.blur(); Window.opener.focus(); But this is not working in Google Chrome. Please suggest me some workaround to achieve this. Thanks in Advance Reply With Quote 12-19-2014, 09:26 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts Window is not defined. window is. JavaScript (and the DOM) is case sensitive. You must pay attention to upper/lower case spelling, carefully. By the way, you shouldn't need the blur() call. If you focus on some window (any window) then any other focus should be lost. I am looking to have a link open a closeable window that is contained within a browser window. If you click on the "sizing charts" link on this website, this is exactly what I am looking to do: http://www.bella.com/mapper.php?pageid=40 The window is contained within the current browser window, it can be dragged around, but not outside the parameters of the browser window. Is there a title for this technique that I can research? Not looking to waste anybodys time, but if I can get steered in the right direction it would be greatly appreciated. Thanks Hi Ive found out how to force another browser window to open at a certain size when a link is clicked. Here's the whole line of code including the layer, the javascript and the image, <div id="Layer6" style="position:absolute; width:10px; height:8px; z-index:6; left: 561px; top: 310px"><a href="javascript:;" onClick="MM_openBrWindow('navigation%20instructions.htm','','width=50,height=50')"><img src="images/info.gif" width="15" height="15" border="0"></a></div> How do I adapt this so I can also specify the x&y co-ordinates of the opened window relative to the window that launched it. thanks alot Masten Hi I am not sure if this is a javascript issue but, Google Chrome version : 10.0.680 with one particular website, when I click around the pages, chrome tries to download the page, so for example, say the page is called contact.html, it ends up trying to download a file calling it cr.download contact.html What is happening here - any ideas? Does that sound like a javascript issue to you? Thanks! i am trying to find out how to check if your browser is google chrome and if it is to display in div id tag called google else display download google chrome. I have searched the web and found nothing on this. can you help me? Its the only thing im stuck on. Code: <script type="text/javascript">
document.getElementById("google").style.backgroundImage="url('images/poweredbygoogle.jpg')";
</script>
Hi Friends, I am really tired with Chrome , one of my window.open() Stuff work fine in FF and Opera in Fedora O.S. But Chrome Did not , my code is like: <script type="text/javascript"> function getpage(id, type){ $.ajax({ type: "POST", data: "key="+id, async: false, url: "<?php echo site_url(); ?>/server/precp/"+type, success: function (msg) { window.open("<?php echo site_url(); ?>/server/cplogin/"+msg, "autologin"); } }); } </script> and it call in another JavaScript function like: function doKeyup(id,e) { if(e == 13) { //alert("e:"+e); var cp = $("table#serverdata tbody tr#container_tr.row_no td:nth-child(7) a#cp").html(); var dc = $("table#serverdata tbody tr#container_tr.row_no td:nth-child(7) a#dc").html(); if(cp != null || dc != null ) { var firstId = $("table#serverdata tbody tr#container_tr.row_no td:nth-child(1) input[type=checkbox]").val(); } if(cp != null) { alert("Enter here"); getpage(firstId,'cp'); return false; } and it firstly call from onkeyup as : <input type="text" name="find_text0" id="find_text0" autocomplete="off" <?php if ('B' == $sb_pos) { ?> onfocus="document.getElementById('find_text1').value='';" <?php } ?> onkeyup = "return doKeyup('0',event.keyCode);" /> Please Give me a Solution ASAP. Thankfully Anes On my site we have image galleries that pop up over top of the page in a higher z-index and position:fixed, and another div between the gallery and background with opacity set to about 85%. The image gallery div has a close button, and I was asked to make the gallery also close by pressing ESC, so I added this: igevt=function(evt){checkclosegal(evt)} window.addEventListener('keypress',igevt, false) and checkclosegal: function checkclosegal(evt) { if(evt.keyCode==27) { closebgeagal() window.removeEventListener('keypress',igevt, false) } } This works perfectly in Firefox and Opera, but Chrome and Safari don't fire the event (not worried about ie right now - I know it uses attachEvent). Could it have something to do with the gallery being in a higher z-index? Please help, thanks! Hello, I have used a free javascript from javascriptkit.com for a "highlighter scroller" in my site. But the programe is only working in Internet explorer. When i use Mozila or google chrome, it is not appearing/working. Can anyone suggest me that how it will work in other browser also. here is the code that i used: Code: <div style="position:relative;left:0px;top:0px"> <span id="highlighter" style="position:absolute;left:0;top:0;font-size:15px;font-family:Calibri;background-color:lime;clip:rect(0px 0px auto 0px)"></span> </div>
<script type="text/javascript">
/*
Highligher Scroller script- By JavaScript Kit
For this and over 400+ free scripts, visit http://www.javascriptkit.com/
This notice must stay intact
*/
var tickercontents=new Array()
tickercontents[0]='<a href="ln.htm">IJSG Welcomes the Kingdom of Morocco as its new Member</a>'
var tickdelay=3000 //delay btw messages
var highlightspeed=10 //10 pixels at a time.
////Do not edit pass this line////////////////
var currentmessage=0
var clipwidth=0
function changetickercontent(){
crosstick.style.clip="rect(0px 0px auto 0px)"
crosstick.innerHTML=tickercontents[currentmessage]
highlightmsg()
}
function highlightmsg(){
var msgwidth=crosstick.offsetWidth
if (clipwidth<msgwidth){
clipwidth+=highlightspeed
crosstick.style.clip="rect(0px "+clipwidth+"px auto 0px)"
beginclip=setTimeout("highlightmsg()",20)
}
else{
clipwidth=0
clearTimeout(beginclip)
if (currentmessage==tickercontents.length-1) currentmessage=0
else currentmessage++
setTimeout("changetickercontent()",tickdelay)
}
}
function start_ticking(){
crosstick=document.getElementById? document.getElementById("highlighter") : document.all.highlighter
crosstickParent=crosstick.parentNode? crosstick.parentNode : crosstick.parentElement
if (parseInt(crosstick.offsetHeight)>0)
crosstickParent.style.height=crosstick.offsetHeight+'px'
else
setTimeout("crosstickParent.style.height=crosstick.offsetHeight+'px'",100) //delay for Mozilla's sake
changetickercontent()
}
if (document.all || document.getElementById)
</script></td>
Inside body I have used <body onload="populate();start_ticking()"> for multiple script in a page. Thank you in advance. Regards, Nazmul Karim Khan Hi, I have some JavaScript that is being used to open a new window and display a PDF file. This is working fine apart from the title of the new window being open. I am using the window.open function and I have set the title of the page using the document.write function (see code below). The code works fine for FF and IE but for some reason Google Chrome just displays 'Untitled - Google Chrome' Code: <body>
<a href="javascript:openNewWindow();">Click Here</a>
<script type="text/javascript">
function openNewWindow()
{
var pdfWindow = window.open('', "window",
'resizable=1,scrollbars=0,width=800,height=600');
pdfWindow.document.write('<html><head><title>Window Title</title></head>');
pdfWindow.document
.write('<body><iframe src="" id="ifrm" name="ifrm" width="100%" height="100%"></iframe>');
pdfWindow.document.write('</body></html>');
pdfWindow.document.close();
}
</script>
</body>
Note: I have also tried adding - pdfWindow.document.title="Title"; - to the JavaScript, with no luck. Is there anything specific that is required for Chrome or am I just missing something?? Thanks in advance for any help! How does one get inline styles placed by javascript to work in Google Chrome? Works in Firefox and Opera, I know that Chrome is receiving the correct data by using alerts, but it is not putting the style object in the HTML.
I'm having trouble getting Google Chrome to print the correct content when I change the content of a modal page with JavaScript. This is my code: JavaScript: Code: function printCoupon(couponID)
{
var originalContents = document.body.innerHTML;
var printable = document.getElementById(couponID);
var printContents = printable.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
document.getElementById(couponID).scrollIntoView(true);
}
HTML: Code: <body>
<div id="coupon1"><p>Coupon 1 contents</p></div>
<div><a href="javascript:void(0)" onclick="printCoupon('coupon1');return false;">Print Coupon</a></div>
<div id="coupon2"><p>Coupon 2 contents</p></div>
<div><a href="javascript:void(0)" onclick="printCoupon('coupon2');return false;">Print Coupon</a></div>
</body>
This works in IE8 and FF 3.6, but Chrome 16 prints the original content, not the printable content. UPDATE: I just discovered another problem with this script. In IE9, the parent page is printed along with the modal (the modal looks transparent), instead of just the modal. Hi there, I hope I post this in the right section. I'm trying to do a redirect using the below code: <script type="text/javascript"> window.location.href = "http://google.com" </script> FF and IE work as they should. Chrome doesn't. The request above to http://google.com, gets a 'canceled' status in Chrome browser > Development tools > "Network". I've tried several other functions: location.href = url location.replace(url) document.location = url location.assign(url) window.open(url, '_self') Same code pasted within a local html file works fine. Below is the redirect request that it's canceled by chrome: http://pastebin.com/hD36M1RG Any clues? Thanks hi guys im looking for help with a soloution that will enable me to set a divs min-height to 350px then when the window is resized it will increase over that 350 this supose to allow people with larger resoloutions to see more of the content. make sense any ideas? cheers. Hello, I was wondering if there is a way to prevent the browser window from scrolling when you are scrolling inside an overflow auto div and reach the end of the div's scroll? Right now I have a few people complaining about a div that loads scrolling info on the screen and when they scroll down using the mouse wheel and get to the bottom of the div then the rolling of the mouse wheel starts scrolling the browser window. It would be nice if the browser could see that your cursor is over the div and even though it reaches the end, not scroll the window unless you move the cursor outside of the div that you are currently scrolling. Any ideas or is this just something we have to deal with? Thanks Hello, First I want to say I have no experience with coding, I develop eLearning via Adobe Captivate. We recently implemented a new LMS from PeopleSoft. This new LMS is launching the eLearning in a small browser window probably 500x400 without the ability to resize this. I am wondering first, if it's possible to edit the htm/js file that Captivate produces, and if anyone is aware of code that could then be entered into the htm/js file to resize the browser upon launch? Thanks! hey guys im just building a portfolio website for my self and i wanted to create something that could work well across a number of devices and screen sizes. i recently came across this website http://tillwiedeck.com/ and noticed that the menu positions itself according to the size of the browser window. This works really well when viewing it on devices such as ipads and iphones. My question is that does anybody know if there is any way i could make an object always position itself at say 25% of the windows width and another object always position itself at 75% of the windows width. really hope i'm making myself clear. thanks heaps Hi, this will probably make a bit more sense it you read my topic in the HTML section (http://www.codingforums.com/showthread.php?t=57093) where I had a problem with two floating divs, in the end the solution was to give both on my floating divs a fixed width. Now, the menu bar div will always be 150 pixels and i wanted the remaing width to be taken up by the main content div. This script here seems to work very wel in firefox but in ie I get scrollbars. This seems to be because firefox returns the actuall width of the viewing 'frame' while IE seems to give the width of the window itself. PHP Code: <script type="text/javascript"> onload = function getBrowserWidth() { if (!document.all) { var width = document.body.offsetWidth; var newWidth = width - 150; document.getElementById('main').style.width = newWidth; } } </script> After a bit of playing with it I found that IE seems to return in offsetWidth about 19 more pixels than the actual size of the viewable 'frame', can anyone confirm this? Now, when the browser window is resized I want the width of the element to be resized as well, which meant I had to add to the body tag <body onresize="getBrowserWidth();"> is there a better way to attach the function to when the window is resized? I am not sure how Opera and Safari return offsetWidth and if they do it like mozilla, or need special values like IE does to make it fit. Thanks for all of your help with any of these 'mini' questions Hi Everyone, I am using javascript to find the browser window's innerheight and outerheight(ie both document body + task bar ,statusbar,menubar etc)I am using the following command for the calculation of the above thing var browserOuterheight; var browserInnerHeight; var browserWidth; var yCordinate; var xCordinate; if (typeof (window.outerHeight) == 'number') { browserOuterheight = window.outerHeight; alert("browserOuterheight " + browserOuterheight) browserInnerHeight = window.innerHeight; alert("browserInnerHeight " + browserInnerHeight) yCordinate = browserOuterheight - browserInnerHeight; alert("yCordinate" + yCordinate); xCordinate = 1 } This one works perfectly for the following browser's GoogleChrome,Safari,Firefox with small problem on Firefox Following is the problem The window.outerheight and window.innerHeight returns different values , a)when the script is run locally on the same browser b)when the script is run after publishing the page on the server and ran from the same browser. This issues do not come for other browser except firefox.For other browser the outerheight and innerheight comes same, before and after the script is published on the server. The firefox browser version used is : firfox 3.6.16 Os is Windows Xp Best Regards, Sagar Singh Hi folks, I've got a chat program which relies on a column in a MySQL database to see if he/she has logged out or not. But if you close the browser window, the computer still thinks you're online. I wrote this in the JavaScript section cos I think it would definitely need Javascript. So any help for updating the database in any way? Thanks!! Lucas |
|||||||