HTML - Making Browser Window Cling To Image/video Size

Hi!

I have a page that contains a text area. What I want it to do is to change its size according to the size of the browser window.

How can I make it do that?

I did it once but just can't seem to remember how I did it.

Thanks

Hello, first post. HELLO!

my video widget playlist on my index is a different size on my index.php but the correct size throughout the rest of my site. Its quite annoying, can anyone shed any light on this issue?

thanks.

http://www.brewrecords.net

HTML Code:

<?php get_header(); ?>

<div id="content">

    <div id="homepagetop">

        <div class="textbanner">
            <?php $recent = new WP_Query("cat=" .ot_option('hp_top_cat'). "&showposts=1"); while($recent->have_posts()) : $recent->the_post();?>
            <h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
            <?php endwhile; ?>
        </div>

        <div id="homeslider">
            <?php include(TEMPLATEPATH."/includes/slider.php");?>
        </div>

        <div class="homewidgets">

            <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Homepage Top Right') ) : ?>
                <div class="widget">
                    <h4>Widget Area</h4>
                    <p>This section is widgetized. To add widgets here, go to the <a href="<?php echo admin_url(); ?>widgets.php">Widgets</a> panel in your WordPress admin, and add the widgets you would like to <strong>Homepage Top Right</strong>.</p>
                    <p><small>*This message will be overwritten after widgets have been added</small></p>
                </div>
            <?php endif; ?>

        </div>

    </div>

    <div id="homepage">

        <?php include(TEMPLATEPATH."/sidebar_left.php");?>

        <div class="homepagemid">

            <h3><?php echo cat_id_to_name(ot_option('hp_mid_cat')); ?></h3>

            <?php $recent = new WP_Query("cat=" .ot_option('hp_mid_cat'). "&showposts=" .ot_option('hp_mid_num') ); while($recent->have_posts()) : $recent->the_post();?>

                <div class="homepagecontent">

                    <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_post_thumbnail( 'home-thumbnail' ); ?></a>
                    <h4><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h4>
                    <?php the_excerpt(); ?>

                </div>

            <?php endwhile; ?>

        </div>

        <?php include(TEMPLATEPATH."/sidebar_right.php");?>

    </div>

</div>

<!-- The main column ends  -->

<?php get_footer(); ?>

Hi All,

I am using the object tag to run a video in the browser . The height and width component should decrease the size of the video . For most of the cases it is working fine . But for cases cases it is not able to compress the video . I am using quick time engine to run the video.

<object data="URL" width="500" height="500">
</object>

Hi.

This is something I have pondered on for a very long time and wish to know how to resolve. I have no idea if it is possible but I think I have seen it done before.

I need a piece of code for a frame that will automatically readjust itself to the page that is targeted in the frame, but will only go so far as the parameters I set it to. To me, it sounds like a rather complicated code and I'm really not sure whether it is possible, but if it is, it would be extremely useful for forum pages that are set to be inside a webpage.

What I want to achieve with this, is to have the frame to be able to extend itself inside the page, without putting a scrollbar on the actual frame. The page I have isn't actually structured with frames, so I would like to keep it that way. I have no idea if this IS possible but I would like to know.

Thanks,

KGB.

how do you make it so the video is displayed in the middle of the browser? (I already got it in the center but I want it in the middle of the browser as well) Thanks.

<center>
<OBJECT ID="MediaPlayer" WIDTH="100" HEIGHT="100" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject"></div></div>

<PARAM NAME="FileName" VALUE="http://www.htmlcodetutorial.com/graphics/heart.avi">
<PARAM name="ShowControls" VALUE="false">
<param name="ShowStatusBar" value="false">
<PARAM name="ShowDisplay" VALUE="false">
<PARAM name="autostart" VALUE="true">
<EMBED TYPE="application/x-mplayer2" SRC="http://www.htmlcodetutorial.com/graphics/heart.avi" NAME="MediaPlayer"
WIDTH="100" HEIGHT="100" ShowControls="0" ShowStatusBar="0" ShowDisplay="0" autostart="1"> </EMBED>10:00 AM

11/4/2008
</OBJECT>
</center>

I have a nice little HTML5 demo that plays a video in a canvas that is not displayed.
As part of the demo, I copy "frames" from the hidden canvas into a resized canvas that is displayed. My "custom" code to manipulate the video frames works fine.

What doesn't work depends on the browser, but also the source of the video.
If the source of the video is on the local disk along with the html file, it plays fine and it loops fine in both Safari, Chrome. Opera and Firefox.

If the source of the video is on the web, either as a local (to the website) where the html file is stored, or if the html file is local but the video is on the web, then Safari works fine. Chrome displays the video ONE time and then stops. The loop does not work. Remember, same code, works fine if all data is local. Changing the source URL of the video to a website is the ONLY change.

Opera and Firefox do not display anything except the box rectangle when the video source is on the web. Firefox gives the error:
Quote:
Error: uncaught exception: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: file:///Volumes/Olorin/sliceNdice/demow.html :: processFrame :: line 34" data: no]
No errors show up in Opera, but no video is displayed.

The Code: (or a snippet, actually)
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html><head><title>HTML5 Video Deom</title> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">

var video;
var copy;
var copycanvas;
var draw;
var VID_WID = 640;
var VID_HIGH = 360;
var OUT_WID = 480;
var OUT_HIGH = 320;

function init(){
	video = document.getElementById('sourcevid');
	copycanvas = document.getElementById('sourcecopy');
	copy = copycanvas.getContext('2d');
	var outputcanvas = document.getElementById('output');
	draw = outputcanvas.getContext('2d');
	setInterval("processFrame()", 33);
}
function processFrame(){
	//get video image
	copy.drawImage(video, 0, 0);
		// manipulate image here
	draw.drawImage(copycanvas, 0,0);
}
</script></head>

<body onload="init()" style="margin:0px;">
	<div><br/><br/></div>
	<div style="display:none">
		<video id="sourcevid" autoplay loop=loop>
			<source src="http://catalystart.reststop.com/html5/BigBuckBunny_640x360.mp4" type="video/mp4"/>
			<source src="http://catalystart.reststop.com/html5/BigBuckBunny_640x360.ogv" type="video/ogg"/>
		</video>
		<canvas id="sourcecopy" width="640" height="360"></canvas>
	</div>
	<div>
		<canvas id="output" width="480" height="320" style="border: solid 5px #666666"></canvas>
	</div>
</body>
</html>

Works if all files are local, shows box outline if all files are on the web:
Code:

<video id="sourcevid" autoplay loop=loop>
	<source src="BigBuckBunny_640x360.mp4" type="video/mp4"/>
	<source src="BigBuckBunny_640x360.ogv" type="video/ogg"/>
</video>

Fails:
Code:

<video id="sourcevid" autoplay loop=loop>
	<source src="http://catalystart.reststop.com/html5/BigBuckBunny_640x360.mp4" type="video/mp4"/>
	<source src="http://catalystart.reststop.com/html5/BigBuckBunny_640x360.ogv" type="video/ogg"/>
</video>

Note: Safari works in both cases, as long as all files and website are reachable.
Chrome works to play the video ONCE, then stops.
Firefox and Opera show an empty outline, but no video.

I'm not a cross-browser expert. I will accept any and all possible solutions to try.
In the meantime, I will continue to see if I can find the problem. Obviously, I want it to work from a website.

ok i have a page that opens another page without the toolbars, however the issue is that i dont know how to make them different sizes, like this page im including here is too small for what is actually on the page. I have to maximize the window. How do i html the code for the size page i want it to be. I hope I am sayong that correct.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home Certification</title>



</head>

<script language="JavaScript"> 
function loadMainWindow() 
{ 
   var win = window.self; 
   win.opener = window.self; 
   var newloc = "http://clas0as21.corp.cox.com/sdchealtop/framework/frameset.asp"; 
   var ih = (window.window.screen.availHeight - 60) - 100; 
   var iw = (window.window.screen.availWidth - 10) - 100; 
   var it = ((window.window.screen.availHeight - 60) - ih) / 2; 
   var il = ((window.window.screen.availWidth - 10) - iw) / 2; 
   var features = 
"directories=no,menubar=no,location=no,toolbar=no,status=yes,scrollbars=yes*,resizable=yes" 
+ ",width=" + iw + ",height=" + ih + ",top=" + it + ",left=" + il + ""; 
   v1 = new Date(); 
   v2 = Date.parse(v1); 
   v3 = "pg" + v2; 
   var oNewWindow = window.open(newloc, v3, features); 
   oNewWindow.focus(); 
   win.close(); 


} 


function window.onload() 
{ 
   try 
   { 
      loadMainWindow(); 
   } 
   catch(e) 
   { 
      popUpMessage.style.display = 'You Are Being Redirected!'; 
   } 

} 


</script> 

I have made a link from an image to open a detail of the image in a new page. Everything works OK but the only problem I've got is that the new browser window that opens is too big, the image is nestled up in the right hand corner.

Is there a way I can controll the size of the new browser window so that it only displays the image with a minmul white space around it?

Thanks in advance to anyone who can help.

Dyfrig

Hello,

This is gonna be difficult for me to explain, but here we go.

I am wondering how I create a page that automatically (as far as possible) re sizes when you make the window bigger and smaller. So that the use of scrollbar is minimal. Do you understand what I am trying to say? Kind of floating in a way.

I am using dreamweaver and am gonna code this site in xhtml strict (right choice?).

Have a nice day,
helen

Hello,

I've been working in Dreamweaver on what I think is a pretty simple project, but am stuck figuring out the following:

On the system that I used to create the html code, the following produces exactly what I intend... a mouseover event that opens a window that is 800x600:

<a href="#" onmouseout="dave.close()" onmouseover="dave=window.open('Adrift in Manhattan.htmL','test','width=800,height=600')"><font
size="2" face="Georgia, Times New Roman, Times, serif">Adrift in Manhattan
</font></a><br />
<br />

When I "mouseover" on one of my other systems, the window opens full screen - not the 800x600 I want.

What am I missing?

Thanks,
bob

I have a form and once on submit it redirect to another php page. I would like to know how I can go about making the redirect php page a pop up window and have the pop up window at a specifiied size and at the same time reload the original php page. Anyhelp is appreciated. Thank you.

Hi There,

our site content is 720 pixels wide.

When the user clicks ona button, it opens a new HTML window that is 720 pixels wide. Good.

This first page is long, so there are scroll bars (both horz and vertical)

But when the user clicks on the next page, which only has a little content, the scroll bars are gone, but the window width size stays the same, and you see a 10-pixel strip of background hanging on to the right side (where the vert scroll bar was on the previous page)


So my question is: When you click to go to a new HTML page... can you also tell the window to "fit to content" or something like that?

see what I'm saying:
start he

http://www.studio209.com/stumptown_e...own_store.html

click on "Blank Packaging"

Then click on "View cart"


Thanks!!

Hi Guys,

When the site is loaded in Internet Explorer when the window is not maximised upon maximising the window certain elements are no longer in the correct place, its like they stay where they loaded.

I can only think that it would have something to do with the CSS Background Positioning on some div's.

Any incite to what might be wrong would be appreciated.

Cheers

-Matt

Hi, i just need some help finding the html to make a proxy browser. I want to make 1 like the following:

w**.browser9.com
w**.netunlocker.com

Type in an address in the field and you can anonymously browse webpages, i would be greatfull if someone could help me achieve this. Another example is this:

h**p://images.google.com/imgres?imgurl=http://files.myopera.com/Idonotlikebroccoli/albums/3758/thumbs/noob.jpg_thumb.jpg&imgrefurl=http://forums.xbox.com/2/5985406/ShowPost.aspx&h=240&w=320&sz=18&hl=en&start=1&tbnid=OC6cVqwzswW4TM:&tbnh=89&tbnw=118&prev=/images%3Fq%3Dnoob%26svnum%3D10%26hl%3Den%26sa%3DN

Google has a sort of browser at the top of the page so on any log files it would look like you visited google but your actually visitin another page through google.

Will be very greatfull for some help.

Regards, Sami.