|
HTML - Center Popup Based On Browser Width
Similar TutorialsHi, I have the following problem i'm trying to solve with HTML: I have a simple table with 3 columns. I want the table to have a 100% width of the screen. Furthermore the center column must ALWAYS have a width of 1000. The left and right column should just be there too fill the gaps up if you have a wider screen than 1000. Setting these left/right columns to width "100%" doesn't work because than it would just make the left column fill up the space and the right column will have a width of 0. How can I solve this? Some example could would be highly appreciated Thanks, betonboor Hello; I am a graphic designer that codes pages quick and dirty entirely with tables. The one I am currently working on needs to be centered in all browser windows at all sizes. I understand that this shouldn't be hard, however everything that I have tried so far hasn't worked. My thoughts are that since it is built entirely in tables (with a java search tool) that I need to make a centered container and place the entire page inside of it. I have tried a few codes I've pulled from other forums with no luck temporary url (and I know the code is dirty) www.showcasepublishing.com/myoutandabout Thanks in advance Hi all, I'm currently using the script below to resize a user's browser window when the site is opened: Code: <script language="JavaScript"> <!-- window.resizeTo(850,630) --> </script> Is there a piece of code I can add to this so that the browser window cannot be resized? This isn't a popup window, just the standard window. Thanks in advance, Baskervillain. I have different stylesheets depending on screen resolution, so that everything is in place when the browser is maximized. This also includes a javascript code to swap out images based on screen resolution to avoid browser based image resizing. My menu uses mouseovers, but I can't figure out how to combine the mouseover command as well as the javascvript image swap. As an example, I'm looking to have a 76px image that will change to another 76px image via mouseover. Then if you have a larger screen, I'm looking to make that a 180px image that changes to another 180px image via mouseover. Here's my image swap code: Code: function loadPic()
{
if (screen.width <= 800)
{
document.getElementById('news').src="news800.png";
document.getElementById('about').src="about800.png";
document.getElementById('blog').src="blog800.png";
document.getElementById('film').src="film800.png";
document.getElementById('photos').src="photos800.png";
document.getElementById('access').src="access800.png";
document.getElementById('set').src="set800.png";
document.getElementById('the').src="the800.png";
document.getElementById('whole').src="whole800.png";
document.getElementById('world').src="world800.png";
document.getElementById('on').src="on800.png";
document.getElementById('fire').src="fire800.png";
}
and here's my mouseover code: Code: <a onmouseover="document.images['i1'].src='set1280.png'" onmouseout="document.images['i1'].id='news'" href="http://bweissnews.blogspot.com/" target="inside_frame"><img id="news" name="i1" border=0></a></div> Any help would be much appreciated! Thanks in advance. hello I wanted to make a pop up window for a link: so i put this btw <head> and </head> Code: <script language="javascript" type="text/javascript">
<!--
var win=null;
onerror = stopError;
function stopError(){
return true;
}
function o1281309901(){
myleft=(screen.width)?(screen.width-874)/2:100;mytop=(screen.height)?(screen.height-622)/2:100;
settings="width=874,height=622,top=" + mytop + ",left=" + myleft + ",scrollbars=no,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no,dependent=no";
win=window.open("http://www.christianwalser.com/videoplayer","",settings);
win.focus();
}
// -->
</script>
and then this btw <body> and </body> for the link to open the pop up: Code: <a href="javascript:o1281309901();">LINK It works fine with IE but not with other browser like Safari and FF: --> Its then resizable and the height and wheight arent correct anymore Thank you very much for your help hi, because im having trouble configuring my website to work seamlessly (the way i want it) with both firefox AND internet explorer, i was wondering if there was a way that i could make a script that would load the appropriate CSS file for that browser (that i would create of course) and because in internet explorer (havnt had chance to test in firefox) my website looks messed up in some resolutions is there a way i could create a script that would also choose the correct CSS for the users resolution? Thanks people, i know im asking a lot of you guys, but everyone ive spoken to seems so professional and know what they are doing Seasons greetings everyone! So I know if you use "%" to define your height and width with tables that it allows you the table to resize based upon a users browser size. My question is how can you do this with images? I tried setting my height and width for my image using "%" but then my image just becomes overly stretched. My professor said that I should create a table and than place the image within the table, and then set the table height and width using "%". The code below is what I tried. It didn't work though. Any ideas on how to do this? Code: <body>
<table width="100%" height="100%" border="0">
<tr>
<td height="100%" width="100%"><p align="center"><img src="images/Banner.png" align="center" class="source-image" /></p></td>
</tr>
</table>
</body>
Thank you for your help! Hi Just wondering if there is a non -java way of detecting a user's browser width and then redirecting to the appropriate version of my site? Cheers Shaun I actually feel a bit ridiculous because i can't solve a problem that will probably be as easy as hell... anyway, i have a table with some collspans and rowspans in it, but i can't seem to be able to set the width for the site in IE... Here's a simple representation of the table, since it's generated dynamically with PHP, so the number of rows and columns is not always the same...but the structure is: HTML Code: <table> <tr> <th rowspan=2 style="min-width=120px;">left column header</th> <th colspan=2 style="min-width=120px;">column 1 title</th> <th colspan=2 style="min-width=120px;">column 2 title</th> </tr> <tr> <td style="min-width=60px;">value1</td> <td style="min-width=60px;">value2</td> <td style="min-width=60px;">value1</td> <td style="min-width=60px;">value2</td> </tr> <tr> <td>row1 name</td> <td>row1 col1 value1</td> <td>row1 col1 value2</td> <td>row1 col2 value1</td> <td>row1 col2 value2</td> </tr> </table> So it should look a bit like this: Code: ------------------------------- | 120px | 120px | 120px | | |---------|---------| | |60px|60px|60px|60px| |---------|----|----|----|----| |rowname1 |val1|val2|val1|val2| |---------|----|----|----|----| |rowname2 |val1|val2|val1|val2| ------------------------------- there can be more rows with rowname, and more columns with the colspans... now in mozilla firefox this works just fine, but not in IE...even worse, if one of the values in the columns that are supposed to be 60px wide is negative, IE inserts a break between the '-' symbol and the numbers... i'm using HTML 4.01 Strict by the way... Perhaps it's just me, but I recently noticed this and I'm curious as to how it works. I don't even know if this is the right forum for this though. Take a look at these two pictures and websites. http://www.slidedeck.com/examples/reddal http://www.friendgiftr.com/ If you notice in the picture and the actual website, the first example does not show a tiny dotted border around the link that you click. But on the second site, clicking on a link will have that link surrounded by the thin dotted border. At least that's how it is for me on the latest version of Firefox and Internet Explorer. Is this something browser based? Or what? Why the inconsistency? Below are the two sites I will use to explain my problem. For reference, I used Mozilla Firefox 3.08 and Google Chrome 1.0.154.53 in my tests. Example 1: http://www.irishbyname.com/example1.htm Example 2: http://www.irishbyname.com/example2.htm When browsing the site in a browser other than Internet Explorer, example 1 and example 2 center to different locations on the page. In example 1, I set the height of the content area to be 200 px tall. In example 2, I set the height of the content area to be 500 px tall. When I have example 1 open in one tab and example 2 open in another, I can alternate between the two tabs and see a visual difference in alignment. The HTML code on both pages is exactly identical with the exception of the height of the content area. Can anyone tell me why the horizontal page center changes based on the height of the page? Can anyone tell me how to change my HTML to make certain the page centers correctly no matter how tall the page is? Thanks for your help in advance. Hey all, http://www.lindesigns.us/rma/rmaonline.php If you go to that site on Firefox, the "Return Code #" expands. But if you use IE, you'll see that it doesn't. I could add a fix in there for the fields if they were static, but if you see my javascript, they are dynamically loading fields. This "class":"wide" is not working: Code: invoiceInput.appendChild(createElement("input", {"type":"text", "name":"invoice[]", "size":"8", "class":"wide;"}));
I am using a script I found on a jQuery board (http://jsbin.com/acado/6), and it works for them, but not for me because my syntax is probably wrong. And they also are just using 1 field and not near-unlimited dynamically loading fields like I am. How would I add in a fix to have the browser 'only' use the expansion if the user is using IE6 or IE7? I searched on the boards but couldn't find the solution to this problem. Thanks in advance! im creatinh a box containing a text. The box must be wide enough to fill a text. menu.style.width = tekst.length - this functioin gives the number of letters in text. So if the text is "hello" then the width is 5 pixels. But i need the widith of pixels needed to fit the text in a box. How can i do that? Hi, Is there away to force my website to fit an Iphone screen when viewed on the iphone. At the moment the width doesn't full span the Iphones screen so it looks bad. http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5 Thanks alot Joe Hi, sorry for my english. I'm searching a script to make a particulary popup. In this link there is an example, is flash popup with spot Microsoft. LINK EXAMPLE POPUP I use this code but I search the code for flash popup not for img popup Code: <script>
Crea();
function Crea(){
var div = document.createElement('DIV');
div.id='Banner';
div.style.position ='absolute';
div.style.top = "250px"; // Distanza dall'alto
div.style.left = "200px"; // distanza da sinistra
div.onclick = Chiudi;
div.innerHTML='<img src=popup.jpg>'; // Percorso immagine
document.body.insertBefore(div, document.body.firstChild);
}
function Chiudi(){
var div=document.getElementById('Banner');
div.style.display='none';
}
</script>
Thanks We have an web application that currently uses standard javascript popups. If we change them to open in a new tab instead of popups, will popup blockers still treat the opening into a new tab as a popup? Thanks, s-one Can anyone shed some light on why this will not open in a new window to the specified measurements? PHP Code: <span>{literal}<script>function fbs_click() {u="{/literal}{$enc_url}{literal}";t="{/literal}{$title_short}{literal}";window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+enco deURIComponent(t)','sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><style> html .fb_share_button { display: -moz-inline-block; display:inline-block; padding:1px 20px 0 5px; height:15px; border:1px solid #d8dfea; background:url(http://b.static.ak.fbcdn.net/images/share/facebook_share_icon.gif?8:26981) no-repeat top right; } html .fb_share_button:hover { color:#fff; border-color:#295582; background:#3b5998 url(http://b.static.ak.fbcdn.net/images/share/facebook_share_icon.gif?8:26981) no-repeat top right; text-decoration:none; } </style> <a href="http://www.facebook.com/share.php?u={/literal}{$enc_url}{literal}&t={/literal}{$title_short}{literal}" class="fb_share_button" onclick="return fbs_click()" style="text-decoration:none;">Share on Facebook</a>{/literal}</span> It opens in a new tab as opposed to what I have specified 626x436. Any ideas welcomed. Geoserv. Hi it is possible to have a pop up appear when the mouse is passed over an image/link Also is this code complecated code because im only a novice. thanx. Hi guys, I am looking to do something specific. I really have no idea on how to do it. I have seen something on a site and I said to myself: "Ohh my gosh, I want this on my site!" It is like a html page that goes over another html page (such as a popup but for the whole page). I assume that the background is a png transparent image but huhhh.. How can I do such things? I want this popup to act as a "Error message displayer" kinda. Let's say a user try to login and enter an inccorect password. I want this popup to show up. Thanks, PS: Sorry if I am not clear but I think you get it with the picture. Thanks guys, This is a real newbie question. I'd like a one of my links to be a popup into a smaller window w/out the File, Edit, View, Address bar, etc. I can do it with java like win = window.open(blah blah blah) but can I do it w/just HTML? |
|||||||