Dividing my page in 2 vertical columns (html or css) - html

It's the first time I design a website so I need help with dividing my page into 2 vertical parts.
Basically, I want to have this page : http://elishaabargel.com/denim and this page http://elishaabargel.com/denim2 combined. I mean that I want the flash animation on the left and the links to the technical drawings and sketches on the right, down on the page.
The first page already contains the html and css codes of the right part but it just doesn't appear.
How can I do this?

There are many ways to divide a page into two parts you could either use iframes, divs, or a table. The most simple would be a table.
<table width=100% height=100%><tr><td width=50%>Put page1 here</td><td width=50%>Put page2 here</td></tr></table>
Also if you are loading two completely full pages it might just be best to use an iframe.
<iframe src="pg1.html" style="position:absolute;top:0;left:0;width:50%;height:100%;"></iframe>
<iframe src="pg2.html" style="position:absolute;top:0;left:50%;width:50%;height:100%;"></iframe>

I thought I should add the simplest template (using divs) that worked for me here:
<div id="container" style="width:100%;">
<div id="left" style="float:left; width:50%;"> This is left panel </div>
<div id="right" style="float:right; width:50%;"> This is right panel </div>
</div>
You can change the css style options (like width) appropriately to suit your needs.

You can use bootstrap for division of your page.
<div class="container">
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
</div>
If you need 100% width, you can use container-fluid and row-fluid.. I hope this will help you.

I did this in a bit of a rush, and im sure some bits are incorrect like the alignment of your pics on the right being at the top rather than the bottom also the popups are not the same size as your original popups... But it does fix your original issue of the two panels.
<!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 runat="server">
<title>Elisha Bargel</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="fashion, design, student, shenkar, college, portfolio, creation, mode">
<meta name="description" content="Fashion designer Elisha Abargel: projects, pictures, contact.">
<style type="text/css">
#flashContent { width:100%; height:100%; }
body {background-color: #FFFFFF;}
h1 {font-family:Cursive; color: #000000;}
p {font-family:Cursive; font-size: 14pt; font-style: normal; font-weight: normal; color: #000000;}
.link {color: #000000;}
.alink {color: #000000;}
.vlink {color: #000000;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="MainTitle" style="text-align: center;"><img alt="" src="http://elishaabargel.com/photos/logo2.jpg"></div>
<div id="MainLinks" style="text-align: center;">projects - contact</div>
<div id="LeftPanel" style="width: 800; height: 100%; float: left;">
<h1>Denim Project</h1>
<div id="flashContent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="800" height="612" id="denimproject" align="middle">
<param name="movie" value="http://elishaabargel.com/photos/flashgalleries/denimproject.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="http://elishaabargel.com/photos/flashgalleries/denimproject.swf" width="800" height="612">
<param name="movie" value="http://elishaabargel.com/photos/flashgalleries/denimproject.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</div>
<div id="RightPanel" style="width: 200; height: 100%; text-align: left; vertical-align: bottom; float: right;">
<img alt="technical drawings of the denim project" style="width: 349px; height: 150px; vertical-align: bottom;" src="http://elishaabargel.files.wordpress.com/2012/12/sketchesdenim.jpg"><br />
<img alt="technical drawings of the denim project" style="width: 349px; height: 150px; vertical-align: bottom;" src="http://elishaabargel.files.wordpress.com/2012/12/technicaldrawingsdenim.jpg">
</div>
</div>
</form>
I'm sure yu can put your JQuery code block back to address the popups being of incorrect size.

Related

Embedd a flash element and make unclickable

I am trying to embed this flash banner in side but url on it is messed up.
So I placed an invisible div on it with the correct url .
The trouble is when I click on it, I get transferred to both the correct url and the incorrect one.
<div class="invisible" onmousedown="window.open('http://ags.gns.co.il/cdn/DigitalCloud/iMarkets/2012/Gadi_Back_To_News/?Media=maof')" style="z-index:10000">
<object type="application/x-shockwave-flash" data="http://s-maof.com/stuff/Imarkets_150x75.swf" width="150" height="75">
<param name="movie" value="http://s-maof.com/stuff/Imarkets_150x75.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="loop" value="false" />
</object>
</div>
You are not overlaying the flash, you are just containing it !
try this html:
<div class="invisible">
<a class="overlay" href="http://ags.gns.co.il/cdn/DigitalCloud/iMarkets/2012/Gadi_Back_To_News/?Media=maof"></a>
<object type="application/x-shockwave-flash" data="http://s-maof.com/stuff/Imarkets_150x75.swf" width="150" height="75">
<param name="movie" value="http://s-maof.com/stuff/Imarkets_150x75.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="loop" value="false" />
</object>
</div>​​​
now we set the link to overlay the flash
.invisible{
position:relative;
width:150px;
height:75px;
}
.​overlay{
z-index:10000;
display:block;
width:150px;
height:75px;
position:absolute;
top:0px;
left:0px;
background:red;
opacity:0.3;
}​
DEMO
you can remove the opacity and background, they are just for demonstration.

How to download a .swf file from a page's html code? [closed]

Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
There is one html page that contains only a .swf file that can be streaming from there:
http://tvoy-start.ru/uroki/1nedel/1nedel.html
Here is that page source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- saved from url=(0025)http://www.techsmith.com/ -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="DC.date" content="2011-09-15 11:37:43 " />
<meta name="DC.language" content="ENU" />
<meta name="DC.title" content="1nedel" />
<title>Создано Camtasia Studio 6</title>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("csSWF", "9.0.115", "expressInstall.swf");
</script>
<style type="text/css">
body
{
background-color: #1a1a1a;
font: .8em/1.3em verdana,arial,helvetica,sans-serif;
text-align: center;
}
#media
{
margin-top: 40px;
}
#noUpdate
{
margin: 0 auto;
font-family:Arial, Helvetica, sans-serif;
font-size: x-small;
color: #cccccc;
text-align: left;
width: 210px;
height: 200px;
padding: 40px;
}
</style>
</head>
<body>
<div id="media">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="900" height="420" id="csSWF">
<param name="movie" value="1nedel_controller.swf" />
<param name="quality" value="best" />
<param name="bgcolor" value="#1a1a1a" />
<param name="allowfullscreen" value="true" />
<param name="scale" value="showall" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="autostart=false&thumb=FirstFrame.png&thumbscale=45&color=0x1A1A1A,0x1A1A1A" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="1nedel_controller.swf" width="900" height="420">
<param name="quality" value="best" />
<param name="bgcolor" value="#1a1a1a" />
<param name="allowfullscreen" value="true" />
<param name="scale" value="showall" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="autostart=false&thumb=FirstFrame.png&thumbscale=45&color=0x1A1A1A,0x1A1A1A" />
<!--<![endif]-->
<div id="noUpdate">
<p>The Camtasia Studio video content presented here requires a more recent version of the Adobe Flash Player. If you are you using a browser with JavaScript disabled please enable it now. Otherwise, please update your version of the free Flash Player by downloading here.</p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<!-- Users looking for simple object / embed tags can copy and paste the needed tags below.
<div id="media">
<object id="csSWF" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="900" height="420" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0">
<param name="src" value="1nedel_controller.swf"/>
<param name="bgcolor" value="#1a1a1a"/>
<param name="quality" value="best"/>
<param name="allowScriptAccess" value="always"/>
<param name="allowFullScreen" value="true"/>
<param name="scale" value="showall"/>
<param name="flashVars" value="autostart=false"/>
<embed name="csSWF" src="1nedel_controller.swf" width="900" height="420" bgcolor="#1a1a1a" quality="best" allowScriptAccess="always" allowFullScreen="true" scale="showall" flashVars="autostart=false&thumb=FirstFrame.png&thumbscale=45&color=0x1A1A1A,0x1A1A1A" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed>
</object>
</div>
-->
</body>
</html>
I wonder, where in the page's source, if it’s possible at all, can I find the link so that I could download that .swf file onto my computer?
Yes it's specified as "movie" param under object tag.
You can reach it at http://tvoy-start.ru/uroki/1nedel/1nedel_controller.swf
However, the swf file may have some server side control that doesn't allow you to see streaming if you aren't on that website. Just try.
EDIT: Forgot, you have to save the page, in my browser (firefox) is File->Save page with name
On internet explorer is the engine wheel icon->File->Save as
On other browsers, I don't know at the moment

Issue with flash video size in html

I am trying to put a 1024x168 flash video(swf) in a web page and but the video is getting clipped, I wish to have scroll bar appear whenever it overflows. Below is my code:
<!DOCTYPE html>
<html>
<head>
test
</head>
<body>
<div style="overflow: auto;">
<object id="M97012085" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" style="overflow: auto; align:middle;" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0">
<param name="movie" value="path_to_swf" />
<param name="loop" value="false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="transparent" />
<param name="play" value="false" />
<embed bgcolor="#ffffff" align="middle" name="M97012085 loop="false" src="path_to_swf" width="100%" height="100%" style="overflow: auto; align:middle;" play="false" wmode="transparent" quality="high" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</body>
</html>
Please advice how can I have the scrollbars appear when video overflows ?
I think by setting the height and width to 100% on your object you are telling it to fill up the whole div, which is why you don't get scrollbars.
Try setting the actual dimensions for the height and width and then when a video's dimensions are larger then the div you should see the scrollbars.

I'm trying to use CSS to position my Flex app but it's not working

I'm trying to position my Flex app so that its in the bottom 40% vertically, and the left 70% horizontally. This is how I define the flash section in CSS:
#flashContent { display:none;position:absolute; top:60%;width:70%;height:40%;}
Here is the HTML:
<div id="flashContent">
<p>
To view this page ensure that Adobe Flash Player version
10.0.0 or greater is installed.
</p>
<script type="text/javascript">
var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"
+ pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" );
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="434" height="100%" id=app name>
<param name="movie" value=link_to_the_file />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data=link_to_the_file width="434" height="100%">
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--<![endif]-->
<!--[if gte IE 6]>-->
<p>
Either scripts and active content are not permitted to run or Adobe Flash Player version
10.0.0 or greater is not installed.
</p>
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</noscript>
</div>
But it's still just appearing in the top-left corner. What am I doing wrong?
Thanks for reading.
Please don't use the values in percentage in flex. If you want to put your stuff in centre, then we have horizontalAlign and for vertically, we have verticalAlign properties.
Specify left, top, bottom and right in numbers only,

How to embed a SWF file in an HTML page?

How do you embed a SWF file in an HTML page?
The best approach to embed a SWF into an HTML page is to use SWFObject.
It is a simple open-source JavaScript library that is easy-to-use and standards-friendly method to embed Flash content.
It also offers Flash player version detection. If the user does not have the version of Flash required or has JavaScript disabled, they will see an alternate content. You can also use this library to trigger a Flash player upgrade. Once the user has upgraded, they will be redirected back to the page.
An example from the documentation:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject dynamic embed - step 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
</script>
</head>
<body>
<div id="myContent">
<p>Alternative content</p>
</div>
</body>
</html>
A good tool to use along with this is the SWFObject HTML and JavaScript generator. It basically generates the HTML and JavaScript you need to embed the Flash using SWFObject. Comes with a very simple UI for you to input your parameters.
It Is highly recommended and very simple to use.
<object width="100" height="100">
<param name="movie" value="file.swf">
<embed src="file.swf" width="100" height="100">
</embed>
</object>
How about simple HTML5 tag embed?
<!DOCTYPE html>
<html>
<body>
<embed src="anim.swf">
</body>
</html>
This is suitable for application from root environment.
<object type="application/x-shockwave-flash" data="/dir/application.swf"
id="applicationID" style="margin:0 10px;width:auto;height:auto;">
<param name="movie" value="/dir/application.swf" />
<param name="wmode" value="transparent" /> <!-- Or opaque, etc. -->
<!-- ↓ Required paramter or not, depends on application -->
<param name="FlashVars" value="" />
<param name="quality" value="high" />
<param name="menu" value="false" />
</object>
Additional parameters should be/can be added which depends on .swf it self. No embed, just object and parameters within, so, it remains valid, working and usable everywhere, it doesn't matter which !DOCTYPE is all about. :)
If you are using one of those js libraries to insert Flash, I suggest adding plain object embed tag inside of <noscript/>.
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/VhtIydTmOVU&hl=en&fs=1&color1=0xe1600f&color2=0xfebd01"
style="width:640px;height:480px;margin:10px 36px;">
<param name="movie" value="http://www.youtube.com/v/VhtIydTmOVU&hl=en&fs=1&color1=0xe1600f&color2=0xfebd01" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="wmode" value="opaque" />
<param name="quality" value="high" />
<param name="menu" value="false" />
</object>
I use http://wiltgen.net/objecty/, it helps to embed media content and avoid the IE "click to activate" problem.
As mentioned SWF Object is great. UFO is worth a look as well
This one will work, I am sure!
<embed src="application.swf" quality="high" pluginspage="http://www.macromedia.com/go/getfashplayer" type="application/x-shockwave-flash" width="690" height="430">
What is the 'best' way? Words like 'most efficient,' 'fastest rendering,' etc. are more specific. Anyway, I am offering an alternative answer that helps me most of the time (whether or not is 'best' is irrelevant).
Alternate answer: Use an iframe.
That is, host the SWF file on the server. If you put the SWF file in the root or public_html folder then the SWF file will be located at www.YourDomain.com/YourFlashFile.swf.
Then, on your index.html or wherever, link the above location to your iframe and it will be displayed around your content wherever you put your iframe. If you can put an iframe there, you can put an SWF file there. Make the iframe dimensions the same as your SWF file. In the example below, the SWF file is 500 by 500.
Pseudo code:
<iframe src="//www.YourDomain.com/YourFlashFile.swf" width="500" height="500"></iframe>
The line of HTML code above will embed your SWF file. No other mess needed.
Pros: W3C compliant, page design friendly, no speed issue, minimalist approach.
Cons: White space around your SWF file when launched in a browser.
That is an alternate answer. Whether it is the 'best' answer depends on your project.
I know this is an old question. But this answer will be good for the present.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>histo2</title>
<style type="text/css" media="screen">
html, body { height:100%; background-color: #ffff99;}
body { margin:0; padding:0; overflow:hidden; }
#flashContent { width:100%; height:100%; }
</style>
</head>
<body>
<div id="flashContent">
<object type="application/x-shockwave-flash" data="histo2.swf" width="822" height="550" id="histo2" style="float: none; vertical-align:middle">
<param name="movie" value="histo2.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffff99" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</object>
</div>
</body>
</html>
Thi works on IE, Edge, Firefox, Safari and Chrome.
<object type="application/x-shockwave-flash" data="movie.swf" width="720" height="480">
<param name="movie" value="movie.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</object>
This worked for me:
<a target="_blank" href="{{ entity.link }}">
<object type="application/x-shockwave-flash" data="{{ entity.file.path }}?clickTAG={{ entity.link }}" width="120" height="600" style="visibility: visible;">
<param name="quality" value="high">
<param name="play" value="true">
<param name="LOOP" value="false">
<param name="wmode" value="transparent">
<param name="allowScriptAccess" value="true">
</object>
</a>
Use the <embed> element:
<embed src="file.swf" width="854" height="480"></embed>
You can use JavaScript if you're familiar with, like that:
swfobject.embedSWF("filename.swf", "Title", "width", "height", "9.0.0");
--the 9.0.0 is the flash version.
Or you can use the <object> tag of HTML5.