|
JavaScript - Resize Problem
Hello Frnds,
I made a website, but when I resize my window the content get disturbed. How to stop it. Please gimme suggestion ASAP Similar TutorialsI have 3 sections next to each other on my site, if some1 adds more text then a section can display the section is resized to fit that text. The other 2 should adopt the other section(s) height. now it's all working if I use it once, but if I add more text twice, the section is not resized - this is the code I'm using to resize the sections: Code: // JavaScript Document
function adjustT()
{
var s1 = document.getElementById('section1');
var s2 = document.getElementById('section2');
var s3 = document.getElementById('section3');
if (document.getElementById('section1').offsetHeight != 380)
{
document.getElementById('section2').style.height =
document.getElementById('section3').style.height =
document.getElementById('section1').offsetHeight + 'px';
}
else if (document.getElementById('section2').offsetHeight != 380)
{
document.getElementById('section1').style.height =
document.getElementById('section3').style.height =
document.getElementById('section2').offsetHeight + 'px';
}
else if (document.getElementById('section3').offsetHeight != 380)
{
document.getElementById('section1').style.height =
document.getElementById('section2').style.height =
document.getElementById('section3').offsetHeight + 'px';
}
}
the original height of each section is 380px Hi all let me start off by saying: "AAAAAAHHHHHHHAAAAAAA" Feel better now! I have an iFrame which loads individual pages from my site, I am using javaScript to tell the iFrame to resize to the size of the page that is being loaded, the problem is when I click on the link the iFrame does not resize but if I click on the link again it does resize! The fuction is called but only the second time round. Also the none of the script works in FireFox! HELP PLZ! My Code: Code: <SCRIPT LANGUAGE=javascript>
<!--
function reSize()
{
try{
var oBody = ifrm.document.body;
var oFrame = document.all("ifrm");
oFrame.style.height = oBody.scrollHeight + (oBody.offsetHeight - oBody.clientHeight);
}
//An error is raised if the IFrame domain != its container's domain
catch(e)
{
window.status = 'Error: ' + e.number + '; ' + e.description;
}
}
//-->
</SCRIPT>
<body onload="reSize()" onresize="reSize()">
<li>
<a href="home.html" rel="nofollow" target="info" onclick="reSize();">
<img src="css/images/home.gif" width="40" height="40" alt="" class="nav_menu_image" />
<span class="nav_title">Home</span>
<br/>
</a>
</li>
<iframe onresize=reSize() id=ifrm src="home.html" name="info" frameborder="0"
padding="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" width="500px"
allowTransparency="true" noresize>
</iframe>
i have this code included within a .php file on my website. I realised that my %age rules defining the width of my website page dont really work once i get to wider sizes so i want to use a fixed width page design using css code (only once wide enough) to achieve this. Please have a look at my code and tell me what im doing wrong i cant find anything wrong with my js. If js is anything like python i may need to change the output from a string to an integer or something along those lines. I can easily just doc.write the width but i cant get it to compare properly Code: <script type="text/javascript">
if (document.body.clientWidth > 1280)
{document.write('<link href="wdestyle.css" rel="stylesheet" type="text/css" />')};
else
{document.write('<link href="nrostyle.css" rel="stylesheet" type="text/css" />')};
</script>
Hi' there Is there anyway to make a custom resize function that resizes one of my div elements on the webpage the same amount of pixels as the browser window gets resized? This is the code my js script. I don't know how to edit the size in this script. My pic is around 300x300. Please teach me thanks a lot. Javascript if ($(".brandbtnch").size()>0) { $(".brandbtnch").click(function(){ var id=$(this).attr("data-id"); var data=$(".data"+id).html(); $(".brandbigpicl").html(data); }); } I just want to resize the pic edit with this script. Thanks is it possible to make a textarea resize with text? so if e.g the text overflows, the text-area is automatically resized so that there's no scrolling? It needs to resize automatically as the user is typing (more or less), he/she shouldn;t click on any buttons to resize it
I was wondering if anyone knows of a javascript which re-sizes an image live as the user changes their browser window like the front page of the Louis Vuitton website? We would like it to fill the users browser window when they first load their page and then change size as they adjust their browser window. If not in javascript then if anyone knows of a flash script that would good, just prefer to just javascript. http://www.louisvuitton.com/ Thanks all Chris Hello, I have build a tree view forum, I have used the iframe tag to import it to my wordpress blog . I have a script that determine the size of the iframe on load: Code: <script language="JavaScript">
<!--
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('the_iframe').contentWindow.
document.body.scrollHeight;
//change the height of the iframe
document.getElementById('the_iframe').height=
the_height;
}
//-->
</script>
The problem with the script is that the forum(tree view forum) only shows topics. I have another script that displays the contents of any issue only while clicking (Void). In actual the contents of each issue is charging ahead - but the resize function of the Iframe script not see it. How do I fix it, that the size of the Iframe will change automatically? Thanks alot I'm centering a section of html between a header and a footer on window load and resize. However, there are some strange issues happening. I'll list a couple and the code below. I also have an external header.php, footer.php, and profile.css that are used, but I don't want to post unnecessary code. If needed, I'll be glad to post it up though. Any help would be greatly appreciated. This one has got me stumped. -If the window is reduced lower than full screen, as the window is lengthened the footer will jump over the last line of text in the middle content. -If the window is loaded in a reduced window, then fullscreened, sometimes the middle content will not recenter. HTML Code: <?php
session_start();
require($_SERVER['DOCUMENT_ROOT']."/phpFiles/UserFunctions.php");
//Checks for logout function
if(isset($_GET['logout'])){
logOut();
header('Location: http://'.$_SERVER['HTTP_HOST']);
}
//Checks if user is not logged in
if(isset($_SESSION['loggedIn']) != True){
header('Location: http://'.$_SERVER['HTTP_HOST']);
}
//Checks if user has saved new account information
if(isset($_POST['accountSaved'])){
accountChangeSave($_POST['firstName'],$_POST['middleName'],$_POST['lastName'],$_POST['agency'],$_POST['password'],$_POST['email']);
}
?>
<!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" dir="ltr" xml:lang="en" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="css/main.css"/>
<link type="text/css" rel="stylesheet" href="css/profile.css"/>
<script type="text/javascript" src="jsFiles/main.js"></script>
<title>Home</title>
</head>
<body>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
<div id="wrap">
<!-- Header Include -->
<?php
require($_SERVER['DOCUMENT_ROOT']."/phpFiles/header.php");
?>
<div id="main">
<!-- Administrator profile -->
<?php
if($_SESSION['userType'] == 'admin' or $_SESSION['userType'] == 'superAdmin'){
?>
<div id="middleContent">
<div id="welcomeText"> Welcome <?php echo($_SESSION['firstName']) ?></div>
<div id="horizontalBorder"> <img src = "images/welcomeBorderHorizontal.png"/></div>
<div id="linkImages">
<a href="javascript:void(0)" onclick="setAccountValuesJS(); openLightBox('accountBoxContent');">
<img id="leftLinkImage" src ="images/silhouette.png"/>
</a>
<img id="verticalBorder" src="images/welcomeBorderVertical.png"/>
<a href="" id="rightLinkImage"><img src="images/groupSilhouette.png"/></a>
</div>
<div id="linkText">
<div id="leftLinkText">My Account</div>
<div id="rightLinkText">Manage Users</div>
</div>
</div>
<!-- Basic user profile -->
<?php
}else{
?>
<div id="middleContent">
<div id="welcomeText"> Welcome <?php echo($_SESSION['firstName']) ?></div>
<div id="horizontalBorder"> <img src = "images/welcomeBorderHorizontal.png"/></div>
<div id="linkImages">
<a href="javascript:void(0)" onclick="setAccountValuesJS(); openLightBox('accountBoxContent');">
<img id="leftLinkImage" src ="images/silhouette.png"/>
</a>
<img id="verticalBorder" src="images/welcomeBorderVertical.png"/>
<a href="" id="rightLinkImage"><img src="images/briefcase.png"/></a>
</div>
<div id="linkText">
<div id="leftLinkText">My Account</div>
<div id="rightLinkText">Apps</div>
</div>
</div>
<?php
}
?>
</div>
</div>
<!-- Footer Include -->
<?php
require($_SERVER['DOCUMENT_ROOT']."/phpFiles/footer.php");
?>
</body>
</html>
CSS Code: /*Site Wide*/
body {
margin: 0;
padding: 0;
color: #ffffff;
font-family: Gill Sans, sans-serif;
background-color: #F1F1F1;
height:100%;
}
html{
overflow:scroll;
height:100%;
}
img{
border-width:0px;
}
#wrap{
min-height:100%;
}
a:link {
text-decoration: none;
color: white;
}
a:visited {
color: white;
text-decoration: none;
}
a:active {
color: white;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: white;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
/*Middle Content*/
#main{
overflow:auto;
padding-bottom: 170px;
}
#middleContent{
position:relative;
width:100%;
min-width:900px;
text-align:center;
}
#error{
size:x-large;
color:black;
font-weight:600;
}
/*header.php*/
#header{
background-image: url("../images/backgroundOrange.jpg");
position: relative;
height: 100px;
width: 100%;
min-width:900px;
}
#navigationBar {
height:1em;
font-family: sans-serif;
position: absolute;
font-size: 18px;
top:40px;
right:0%;
}
#topLogo {
position: absolute;
top: 18px;
}
/*footer.php*/
#titleText{
font-size:large;
font-weight:2;
}
#footer{
position: relative;
background-color:#1F1F1F;
color:#ffffff;
min-width:900px;
margin-top:-170px;
height: 170px;
width:100%;
clear:both;
}
#bottomCopyright{
position:relative;
top:150px;
color: #BBBBBB;
font: sans-serif;
width:100%;
text-align:center;
font-size:small;
margin:auto;
}
#infoImageContainer{
position:relative;
float:left;
margin-top:50px;
left: 20px;
}
#infoImage{
position:relative;
height:40px;
}
#infoTextContainer{
position:relative;
float:left;
height:50%;
margin-top:1.5em;
left: 40px;
}
#infoText{
font-size:small;
position:relative;
height:3em;
}
#contactImageContainer{
position:relative;
float:right;
height:50%;
margin-top:50px;
right: 170px;
}
#contactImage{
position: relative;
height:35px;
}
#contactTextContainer{
position:relative;
float:right;
height:50%;
margin-top:1.5em;
left: 40px;
}
#contactText{
font-size:small;
position:relative;
height:3em;
right:20px;
}
#networkLinksContainer{
position:relative;
margin:auto;
height:50%;
margin-top:40px;
width:100%;
text-align:center;
}
#networkLinks{
position: relative;
height:54px;
margin:auto;
width:300px;
text-align:center;
top:40px;
}
/*Account Box*/
#fade{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
min-width:900px;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
#boxWrapper{
position:absolute;
top:0px;
left:0px;
width:100%;
margin:auto:
}
#accountBoxContent{
display: none;
position: relative;
margin:auto;
width: 250px;
height: 430px;
padding: 16px;
background-color: #DBDBDB;
z-index:1002;
overflow: auto;
}
#editTitle{
height:50px;
font-size:X-Large;
font-weight:bold;
color:#282828;
vertical-align:inline-middle;
}
#editAccountLine{
color:#282828;
background-color:#282828;
height:1px;
}
#editAccountForm{
text-align:right;
position:relative;
top:30px;
color:#282828;
font-size:small;
font-weight:bold;
}
#editAccountLinks{
position:relative;
top:20px;
text-align:center;
}
#editAccountLinks > a{
color:#282828;
text-decoration:none;
}
#changeLinks{
position:relative;
bottom:3px;
font-size:x-small;
color:blue;
}
#formatText{
position:relative;
bottom:6px;
text-align:left;
font-style:italic;
}
#password{
background-color:#EBEBE4;
color:#545454;
}
#email{
background-color:#EBEBE4;
color:#545454;
}
Javascript Code: var firstName;
var middleName;
var lastName;
var agency;
var password;
var email;
//Vertically centers the middle content div
function setMiddleContentPos() {
var window = document.body.scrollHeight;
var header = document.getElementById('header').scrollHeight;
var footer = document.getElementById('footer').scrollHeight;
var middle = document.getElementById('middleContent').scrollHeight;
var center = window - header - footer;
var top;
if(window-header-footer-middle > 50){
top=center/2-middle/2;
document.getElementById('middleContent').style.top=top+'px';
}
}
//Vertically centers the middle content div
function setLightBoxPos(contentId) {
var winHeight = getWindowHeight();
if(winHeight > 0){
var contentElement = document.getElementById(contentId);
var contentHeight = contentElement.offsetHeight;
if(winHeight - contentHeight > 0){
//[Window height]/2 - [Lightbox Height]/2
contentElement.style.top = (winHeight/2 - contentHeight/2)+'px';
}
else{
contentElement.style.top = '0px';
}
}
}
//Open and Close Lightbox
function openLightBox(contentId){
document.getElementById(contentId).style.display='block';
document.getElementById('fade').style.display='block';
setLightBoxPos(contentId);
}
function closeLightBox(contentId){
document.getElementById(contentId).style.display='none';
document.getElementById('fade').style.display='none';
}
//Set account values in js vars based on form
function setAccountValuesJS(){
firstName = document.getElementById('firstName').value;
middleName = document.getElementById('middleName').value;
lastName = document.getElementById('lastName').value;
agency = document.getElementById('agency').value;
password = document.getElementById('password').value;
email = document.getElementById('email').value;
}
//Set account values in form based on js vars
function setAccountValuesForm(){
document.getElementById('firstName').value = firstName;
document.getElementById('middleName').value = middleName;
document.getElementById('lastName').value = lastName;
document.getElementById('agency').value = agency;
document.getElementById('password').value = password;
document.getElementById('email').value = email;
}
//Checks a string for prescence of illegal characters
//Illegal Characters: > < ' " \ / &
function stringIsClean(string){
if(string.indexOf('>') != -1 || string.indexOf('<') != -1 || string.indexOf("'") != -1 || string.indexOf('"') != -1 ||
string.indexOf('&') != -1 || string.indexOf('/') != -1 || string.indexOf('\\') != -1){
return true;
}
else{
return false;
}
}
//Saves account information
function saveAccount(){
firstNameTest = document.getElementById('firstName').value;
middleNameTest = document.getElementById('middleName').value;
lastNameTest = document.getElementById('lastName').value;
agencyTest = document.getElementById('agency').value;
passwordTest = document.getElementById('password').value;
emailTest = document.getElementById('email').value;
if(stringIsClean(firstNameTest) || stringIsClean(middleNameTest) || stringIsClean(lastNameTest) || stringIsClean(agencyTest) ||
stringIsClean(passwordTest) || stringIsClean(emailTest)){
document.getElementById('formatText').style.color = 'red';
}
else{
setAccountValuesJS();
document.getElementById('accountSaved').value = 'true';
document.getElementById('accountForm').submit();
}
}
//Sets middle content to adjust on load and resize
window.onload = function() {
setMiddleContentPos();
}
window.onresize = function() {
//setLightBoxPos('accountBoxContent');
setMiddleContentPos();
}
Hello everyone, My problem consist in that I want to avoid re-loading the whole page, and only re-load the portion of the website that needs to be. Similar to listed below; website Banner (Solid) Menu bar (Solid) Div content (Changeable) The main problem is that no matter what I do, I can't make the innerHTML cover the whole <div> </div> It remains the same very small size, no matter what I put within the div. Far from its full size potential (plenty of space left). Head script Code: PHP 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"> <html> <head> <script type="text/javascript"> //<![CDATA[ // written by: Coothead function updateObjectIframe(which){ document.getElementById('one').innerHTML = '<'+'object id="foo" name="foo" type="text/html" data="'+which.href+'"><\/object>'; } //]]> </script> <link rel="stylesheet" type="text/css" href="main_stylesheet.css" media="screen, projection" /> </head> Here is the html portion. PHP Code: <div id="one" style="background-color:#C0C0C0;position:relative;height:2000px;width:800px;float:left;"></div> Here is the link placed elswhere on the website (The solid menu bar) PHP Code: <li><a href="http://www.google.com" onclick="updateObjectIframe(this); return false;">Forums</a></li> It's not Google that I want to use, however a PHPBB forum. But I found that the same problem occurs on no matter what I put in this innerhtml, the javascript gets limited to the same little box in the upper left corner of my div. Can't change size, no matter what I tried to do. I'm suspecting it has something to do with CSS, however I spended a whole night (and now day) trying to work this out, I really don't get much further. I realize I should spend a couple of more nights when new to JS, however this kind script I consider like a foundation to a house, it's important before moving on with learning, maybe I'm wrong though. Anyone who can help with this issue? Would be very much appreciated, Thank you! jQuery(window).resize(function(){ window.location.href=window.location.href; }); this code was work all browsers but not work IE6. if anyone knows reply.. Hey everyone My project was to create 4 buttons , 2 for div 1 and 2 for div 2. The two divisions have overflow container so that the information will never leak outside the div. At the moment I have it so the style is 1x1 with opacity to 0 , then when visitors want to find information about a subject they press a button to move the div to a possition , opacity to 1 and the size is changed and the other button to return it. Ive hit many problems and for my project I need to follow these lines, Ive found that I cant make javascript resize the same div more than once after a while. could someone help me with this, Im trully baffled. Hello awesome coders! I am here in need of your help. I have a site with a lot of videos, from different sources, in different sizes, only thing they have in common is <div id="player">. Due do different sources, each video player is different. Some have embed code, some have object, some have iframe, some have both/all. Is it possible to create a script that will: Change the height and width of object, embed, iframe within the div. Is there another way to resolve this issue without changing all video code manually. Hi, I got some JavaScript code from the net to resize DIV's depending on the window-size. It works perfectly in FF, but it won't work in IE. Code: function Resize(){
var winW = 630, winH = 460;
if (parseInt(navigator.appVersion)>3) {
if (navigator.appName=="Netscape") {
winW = window.innerWidth-30;
winH = window.innerHeight-200;
}
if (navigator.appName.indexOf("Microsoft")!=-1) {
winW = document.body.offsetWidth-30;
winH = document.body.offsetHeight-200;
}
}
var topHeight = document.getElementById('top').offsetHeight;
var setHeight = document.getElementById('settings').offsetHeight;
var headersHeight = document.getElementById('headers').offsetHeight;
var leftWidth = document.getElementById('left_column').offsetWidth;
document.getElementById('container').style.width=winW+"px";
document.getElementById('container').style.height=(winH-topHeight-setHeight)+"px";
document.getElementById('headers').style.width=(winW-leftWidth)+"px";
document.getElementById('data').style.width=(winW-leftWidth)+"px";
document.getElementById('data').style.height=(winH-topHeight-setHeight-headersHeight)+"px";
}
I've been working on this for some days. I would appreciate any help I can get. Erik Hey all! My supervisor is tasking me with having a webpage resize the windows media player dynamically based on the users resolution. I have tried everything I can think of to make this happen but no luck. Is this even possible? I'm using the following code to embed the video: Code: <object
classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,1112"
type="application/x-oleobject" width="800" height="600" align="left"
standby="Loading Microsoft Windows Media Player components..." id="mediaPlayer">
<param name="AutoStart" value="1" />
<param name="FileName" value="../../../videos/Welcome_1.wmv" />
<param name="ShowDisplay" value="False" />
<param name="ShowControls" value="True" />
<param name="ShowStatusBar" value="False" />
<param name="Loop" value="False" />
<embed
src="../../../videos/Welcome_1.wmv"
width="800"
height="600"
autostart="1" align="left" type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
name="mediaPlayer"> </embed>
</object>
I've tried creating variables and substituting those for the width and height of the object code e.g., Code: <script type="text/javascript">var _width=screen.width; var _height=screen.height;</script> followed by Code: <object
classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,1112"
type="application/x-oleobject" width=_width height=_height align="left"
standby="Loading Microsoft Windows Media Player components..." id="mediaPlayer">
<param name="AutoStart" value="1" />
<param name="FileName" value="../../../videos/Welcome_1.wmv" />
<param name="ShowDisplay" value="False" />
<param name="ShowControls" value="True" />
<param name="ShowStatusBar" value="False" />
<param name="Loop" value="False" />
<embed
src="../../../videos/Welcome_1.wmv"
width=_width
height=_height
autostart="1" align="left" type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
name="mediaPlayer"> </embed>
</object>
but of course, this doesn't work. Is it even possible?? If so, your help is greatly appreciated. Thank you, M. I have an asp.net textbox. I need to use javascript so that there are no postbacks. I would like to click the button and the textbox height kept increases each time the user clicks the button. So far I can toggle: function resize(){ var textbox = $get('<%=txtWhoTo.ClientID %>'); textbox.style.height = textbox.style.height == '56px' ? '23px' : '56px'; } I would like to increase the height 56px each time the clicks the button. How do I resize a textarea to a certain length for text without the scroll bar, it this possible with CSS or do I have to use jQuery?
This is my second post in codingforums.com I found help from many members that make me very happy and I take the code from Amphiluke Thanks for all Now I need another help to make two things First I want to merge 2 forms in 1, so instead of following forms: Code: <form action="#" onsubmit="location.href='http://www.mysite.com/article/'+this.indx.value; return false;"> <input name="indx" type="text" size="3" /> <input name="btn" type="submit" value="Go" /> </form> <form action="#" onsubmit="location.href='http://www.mysite.com/news/'+this.indx1.value; return false;"> <input name="indx1" type="text" size="3" /> <input name="btn" type="submit" value="Go" /> </form> I need to make it one with two radio buttons to choose which URL you want to open (Article or News) Second I need this form to be in space size 160x57 so the result will be nearly as this pictu Your help will be highly appreciated Hello, everyone. I have a question regarding an issue I have with the regions on the page. I would like to know how could I resize them... I know there is no HTML or CSS modality, therefore the only solution has to come from Javascript. Image I have four flags on a page and each of those are links to other pages. However, when I resize the page, drag its border lines and so on, everything gets messed up. Any idea how to solve this? Or at least other options, like Tables, Divs, anything that can resize and accept links? Thanks for your time. hi, how can i write this if/ else condition in jquery?? if window resize, run this code, Code: $(window).resize(function(){
var height_window = $(window).height();
var width_window = $(window).width();
var margin_left = (width_window/2) - (840/2);
$('.slide').css({width:width_window+'px'});
$('.content').css({marginLeft:margin_left+'px'});
$('#enter').click(function () {
$('#container').animate({marginLeft:'-'+width_window+'px'}, 600);
return false;
});
$('#back').click(function () {
$('#container').animate({marginLeft:'0px'}, 600);
return false;
});
});
else run this, Code: var height_window = $(window).height();
var width_window = $(window).width();
var margin_left = (width_window/2) - (840/2);
$('.slide').css({width:width_window+'px'});
$('.content').css({marginLeft:margin_left+'px'});
$('#enter').click(function () {
$('#container').animate({marginLeft:'-'+width_window+'px'}, 600);
return false;
});
thanks, Lau |
|||||||