Develop Reference

javascript (window.open) opens maximized in all browsers but not in chrome

I am using the following code to open a maximized pop up window, i don't want to open it full screen (F11), I need it just maximized, exactly like pressing the button between minimize and close.
<a onclick="javascript:w= window.open('https://www.facebook.com/mywifemylove','_blank','channelmode =1,scrollbars=1,status=0,titlebar=0,toolbar=0,resizable=1');" href="javascript:void(0);" target="_blank">Maximized on Chrome</a>
It's working fine for all browsers but not Chrome, Here is a jsfiddle for testing

With the exception of IE, browsers do not support going fullscreen with JS. This is intentional:
https://developer.mozilla.org/en-US/docs/Web/API/window.open#FAQ
"All browser manufacturers try to make the opening of new secondary
windows noticed by users and noticeable by users to avoid confusion,
to avoid disorienting users."
You can manually set the size of the window to the screen size but you may have to deal with things like frame border thickness.
Relevant SO question:
How to open maximized window with Javascript?
Working code for max size window on latest versions of IE, FF or Chrome:
window.open('http://www.stackoverflow.com','_blank','height='+screen.height+', width='+screen.width);

You can open window tab with below code:-
window.open(src, "newWin", "width="+screen.availWidth+",height="+screen.availHeight)

function openMax() {
var wihe = 'width='+screen.availWidth+',height='+screen.availHeight;
window.open("ht*p://www.example.com/",
"foo",
"screenX=1,screenY=1,left=1,top=1," + wihe);
}

I think following code is helpful to you.
<a id="popupLink" href="#"> link name</a>
jquery.click(function(e){
e.preventDefault();
var newTab =window.open('','_blank','channelmode=1,scrollbars=1,status=0,titlebar=0,toolbar=0,resizable=1');
newTab.location = "https://www.facebook.com/mywifemylove";
newTab.focus();
});

Unfortunately, I don't think you can actually use it in chrome. I've also tried it but couldn't get it to work in chrome.
I know it is really helpful to actually make it maximize more quickly that makes it so the user don't have to click the button but that is how chrome works.
Here is a jsfiddle example that will be as close as possible to maximization. It is always good to try to make alternative options. Here is the code from the onclick attribute. You can insert all your previous code to that argument as well, just removed that to show what I changed to it.
javascript:w= window.open('https://www.facebook.com/mywifemylove','_blank',`height=${screen.height},width=${screen.width}`);
Here is also a w3School documentation of the arguments as well, just in case you wanna look through it and see what's supported and what is not.

Strange image re-size issue

I am using the Twitter Bootstrat Freelance theme (http://startbootstrap.com/templates/freelancer/) and have incorporated Own Carousel.js (http://www.owlcarousel.owlgraphic.com/demos/demos.html).
All is working well apart from whenever I click an image to view it in a modal window, it appears the wrong size - until I resize my browser window, or refresh the page, or eg press f12. It then seems to 'fix itself'.
Not sure if this is a js conflict issue or I am doing something silly (I am quite new to js). I have looked at the console and can't see any errors, I have also tried different versions of jquery and bootstrap however no difference.
I have created a jsfiddle here http://jsfiddle.net/johnny_s/34L6t/2/
If you view the jsfiddle, try click an image and once it opens in the modal window, resize the screen slightly and you will see what I mean. It somehow suddenly fixes itself.
I would appreciate any help or direction on this issue, as I am trying to create a personal project which needs to be finished quite soon :s

Need to include the following external js files.
Thanks to #Sebsemillia for the help
owl.autorefresh.js
owl.autoplay.js

Can I write HTML code to Window.showModalDialog()?

I use :
Window.showModalDialog(...)
to open a dialog window,
I want show some HTML code in this window, but I don't have a file. (Can't use URL to visit)
like show "hello world!" in this dialog window.
Can I do it?

Interesting question!
I'm not an expert in modal dialogs, but I don't think you can, because it's in the nature of a modal dialog to block any further code from being executed until the window is closed again.
I thought about using a data: URI that you could use as the first argument to showModalDialog instead of a normal URL:
window.showModalDialog("data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D" ....);
but according to the MSDN page on data: URIs, that will not be supported in Internet Explorer. (see the "Remarks" section on the linked page)
It might work in Firefox, though: More on data URIs at Mozilla Developer Central
Update: It works in Firefox: JSFiddle but, as expected, not in IE. You only get a blank window there.

Good question and answer. (+1)
I just thought I'd add, that if you do need to enter HTML into a modal dialog, you may want to look into using a Javascript library to accomplish it. I've used Dojo's "dijit.Dialog" several times with HTML, including images, form controls etc... You can style it however you like, and it works well cross-browser.
You can check out a few example of dijit.Dialog's use over at DojoCampus.
Cheers.

Why wont this js code work in Chrome and Safari?

I have an iframe on my index.html and this iframe is dynamic.
on my index.html I have a form, which when submitted, shows the results inside the iframe.
The problem is the Iframes height also has to be dynamic for the website to look "clean".
So in the Iframes php page, I have this code:
<body onload="parent.resize_iframe(document.body.scrollHeight)">
And in the index.html (which is the parent in this case) I have this function:
function resize_iframe(new_height){
byId('iframe001').style.height=parseInt(new_height) + 20 + 'px';
}
The problem here is not the function, but that Safari and Chrome thinks the scrollHeight is something alot bigger than it is.
I have tried alerting the scrollHeight, and the nr is always around 2000px in Chrome and Safari, but in other browsers it is dynamic as it should be (500, 300, 800 etc)...
Any ideas?
UPDATE:
I noticed when I click a link on the index, and then click the browser back button, the iframe DOES resize correctly in SAFARI and CHROME.
But I must click back in the browser for it to work...
SEE THIS QUESTION FOR FURTHER INFORMATION: Can't figure out why Chrome/Safari can't get the ScrollHeight right here

I am not sure but however I want to say what I want say. Safari and Chrome both webkit based browsers so its normal to behaviour like that. So I guess that they calculating the height adding padding and margin to normal height. please google it "webkit calculated style"

Sometimes javascript does not work as expected when the page has validation errors.
First try validating your markup (HTML).
If validating does not work, try using jQuery.
jQuery is cross-browser compatible; you should get the exact same result on every browser.

Everything showed good, except the tabs. (HTML,CSS,JS)

Iam working on a website and I dont have any clue why the tabs doesnt work when I upload the website. Because when I view the website normal it does work perfectly.
By the way: The tabs are working with a jquery script.
This is the website URL: http://bmvisuals.poshh.nl/
Greetings.
Edit: I mean some of the tabs doesnt appear.

Your About me tab does not show up because your server is case sensitive.
Aboutme.jpg != Aboutme.JPG
You should check out CSS Sprites. There is a flicker when you hover over a tab (the first time) because the browser has to load the hover image. With CSS Sprites an image map is used and all the images are loaded at once so the hover is seamless.
As an aside, your site does not scroll vertically. When my window is smaller than your site, the bottom gets cut off and there is no way for me to see it.

Firstly, nice site. Secondly your tabs are totally borked for me. I am using Linux Ubuntu and Firefox 3. Not sure about the fix though. Just thought I would mention it.

Using Firebug, I see some resources give a 404 error:
http://bmvisuals.poshh.nl/Scripts/Lightbox/images/lightbox-ico-loading.gif
http://bmvisuals.poshh.nl/Scripts/Images/PhotoGallery/PhotoGalleryContainerBackground.png
http://bmvisuals.poshh.nl/Images/Tabs/Aboutme.jpg
http://bmvisuals.poshh.nl/Images/Tabs/HomeActive.png
On a side note, the page doesn't work if javascript is disabled. I would suggest using the noscript tag to show a message saying javascript is required. The other option is to make the page work without javascript.