JavaScript - Dynamically Change Div Height After While Displaying
I'm developing a site for my wife's acupuncture practice (http://www.acupunctuurfengyun.be.
Since I have two monitors (one wide screen, one square) attached to my computer I can verify how it will look in different resolutions. While doing so I came across a nasty thing: in some resolutions the content div is very small and not using all of the full browser window (left after the header section). Is it possible to make a change to the CSS min-height and max-height while the page is being loaded? I've looked into lots of samples but all depend on a click or mouse over event and didn't want to work with onload in the body tag. I've also thought about putting the stuff in the PHP part of my code but I am lost at this moment on how to do this. Could someone help me out here? Similar Tutorialsi want to set the second container's height according to the first container's.but how to achieve the height of the container dynamically. thank you! Hi, I try to change script source dynamically. When I use the following code, it works fine, and the script is executed Code: <script type="text/javascript"> document.write('<script src="http://gamestoenjoy.com/site/test.php"'); </script> However when I use the following code, it doesn't work, the script isn't executed Code: <script type="text/javascript"> var url = "http://gamestoenjoy.com/site/test.php"; document.write('<script src=url>'); </script> The only difference between the codes is that in the first code I use constant sting, and in the second code I use variable, in order to make the source dynamic. Please help me to solve this problem. Hello, I have been looking for this all day - Change currencies throughout the page when choosing between countries or currencies from dropdown menu. What I basically need is a dropdown menu which shows countries or currencies. When you select anyone of it like USD all the prices throughout the page are changed to USD. Now if you change it AUD/CAD/PKR etc they will be changed accordingly. A very good example of this is: http://creativeon.com. When you change currency from right top dropdown menu - it changes the currencies of all the packages in the main content. I am a HTML developer and do not know much about javascripting. Please help me. P.S. I have searched codingforums.com too and found only two links which are not of my use because they are currency converter: http://www.codingforums.com/showthread.php?t=196577 http://www.codingforums.com/showthread.php?t=196373 Best Regards and Thanks in Advance. Hi Guys, I am new to this forum,based on the combobox value,I am creating a textboxes dynamically in jsp .Based on the count of textboxe's the textarea content comes with <value1> like this... Here i tried like this, <html> <head> <script> function copy_data(val,id,textareaValue){ var enteredText = val; alert("enteredText -----------"+enteredText); var boxId= id; alert("boxId-----------"+boxId); var textValue= textareaValue; alert("textValue-----------"+textValue); var beforeBrac = textValue.substring(0,textValue.indexOf("<")); alert("beforeBrac -----------"+beforeBrac ); var inbracket = textValue.substring(beforeBrac.length+1,textValue.indexOf(">")); alert("inbracket -----------"+inbracket); if(boxId = "1"){ inbracket = val; } alert("inbracket -----------"+inbracket); var afterBrac = textValue.substring(textValue.indexOf(">"),textValue.length); alert("afterBrac -----------"+afterBrac ); var fstr = beforeBrac +"<"+inbracket +afterBrac ; if(boxId == "1"){ document.getElementById('txtArea').value = fstr; alert("final str value is"+fstr); } } </script> </head> <body> <input type="text" name ="a" id="1" onkeyup="copy_data(this.value,this.id,document.getElementById('txtArea').value)"/> <input type="text" name ="a" id="2" onkeyup="copy_data(this.value,this.id, document.getElementById('txtArea').value)"/> <textarea rows="2" cols="20" id="txtArea"> At W3Schools you <will> find all <the> Web-building tutorials <you> need, from basic HTML to advanced <XML>, SQL, ASP, and PHP. </textarea> </body> </html> three text boxes with some value [ value1 ] [value2] [value3 ] this is the text area content:- At W3Schools you <will> find all <the> Web-building tutorials <you> need, from basic HTML to advanced XML, SQL, ASP, and PHP. the output should be :- At W3Schools you <value1> find all <value2> Web-building tutorials <value3 > need, from basic HTML to advanced XML, SQL, ASP, and PHP... But i can't get it exactly..When i enter or delete the value it should replaced in the proper <> correctly.. If i enter the value in 1st textbox it should replace the value 1st <>.same for others also...Any Idea's ?Plz suggest me ... Hi , I am new to javascript and have coded an invoice page through help from some available content on web. here is my requirement My form contains inputs "item ,rate quantity,price" in a tabular form where one can dynamically add or delete rows.And the requirement is that when Quantity is entered the Price should change to Price=Quantity*Rate on tab out So I have used a Javascript onchange() and this works fine for the first displayed row. but for dynamically added rows this does not happen, I am not able change the price value for dynamically added rows. Code is as below direct_invoice.html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <script type="text/javascript" src="js/direct_invoice_table.js"> </script> <html> <head> <title>Direct Invoice</title> </head> <body leftmargin="0" topmargin="0"> <p align = "center" font='30'><input type="text" name="company_name" size="20" maxsize="20" /> <b> Invoice</b></p> <table id="Client_Details"> <tr> <th>Client Name:</th> <td><input type="text" name="client_name" size="20" maxsize="20" /></td> </tr> <tr> <th>Client Address:</th> <td><input type="text" name="address_line1" size="20" maxsize="40" /></td> </tr> <tr> <td></td> <td><input type="text" name="address_line2" size="20" maxsize="40" /></td> </tr> <tr> <th>Pin Code:</th> <td><input type="text" name="client_pin" size="7" maxsize="7" /></td> </tr> <tr> <th>City/State/Country:</th> <td><input type="text" id="client_city" size="10" maxsize="30" /></td><td>/</td> <td><input type="text" id="client_state" size="10" maxsize="20" /></td><td>/</td> <td><input type="text" id="client_country" size="10" maxsize="20" /></td> </tr> <tr> <th>Email Address:</th> <td><input type="text" name="client_city" size="10" maxsize="30" /></td> </tr> <tr> <th>TIN/PAN:</th> <td><input type="text" name="tin_or_pan" size="10" maxsize="20 " /></td> </tr> </table> <table align="center" width = "75%"> <tr> <td align = "center"> <!--- very imporant to give the table an id ---> <!--- otherwise it won't know where to edit ---> <table border="1" id="mySampleTable"> <tr> <th>Item No</th> <th>Item Name</th> <th>Description</th> <th>Unit Cost</th> <th>Quantity</th> <th>Price</th> <th> <font color="RED">Delete</font></th> </tr> <tr> <td>1</td> <td><input type="text" name="itemname[]" size="40" "maxsize="100"/></td> <td><input type="text" name="description[]" size="20" " maxsize="100" /></td> <td><input type="text" id = "unitcost[]" name="unitcost[]" size="10" maxsize="100" /></td> <td><input type="text" id = "quantity[]" name="quantity[]" onchange="dynamic_onc();" size="4" maxsize="100" /></td> <td><input type="text" id = "price[]" name="price[]" size="10" maxsize="100" /></td> </tr> </table> <table id="totaltbl" align="right"> <tr> <td></td> </tr> <tr> <th>Vat %</th> <td><input type="text" name="total" size="3" maxsize="3" /></td> </tr> <tr> <th>Total</th> <td><input type="text" id = "total" name="total" size="20" maxsize="100" /></td> </tr> </table> </td> </tr> </table> <form action="save_entry.php" name="eval_edit" method="post" format="html"> <p> <input type="button" value="Add Row" onclick="addRow();" /> <input type="button" value="Calculate Total Amount" onclick="Totalcal();" /> <input type="button" value="Print" /> </p> </form> <p align = "left" font='100'> <b>Company Name: </b> <input type="text" name="company_address_line1" size="20" maxsize="20" /> </p> <p align = "left" font='100'> <b>Company address line: </b> <input type="text" name="company_address_line2" size="20" maxsize="20" /></p> <p align = "left" font='100'> <b>Company Location: </b><input type="text" name="company_address_location" size="20" maxsize="20" /></p> </body> </html> *************** The below is the javascript function that i wrote Code: function addRow() { // grab the element, i.e. the table your editing, in this we're calling it // 'mySampleTable' and it is reffered to in the table further down on the page // with a unique of id of you guessed it, 'mySampleTable' var tbl = document.getElementById('mySampleTable'); // grab how many rows are in the table var lastRow = tbl.rows.length; // if there's no header row in the table (there should be, code at least one //manually!), then iteration = lastRow + 1 var iteration = lastRow; // creates a new row var row = tbl.insertRow(lastRow); // left cell // insert a cell var cellLeft = row.insertCell(0); // here we're just using numbering the cell, like anything else you don't // have to use this, but i've kinda noticed users tend to like them var textNode = document.createTextNode(iteration); // takes what we did (create the plain text number) and appends it the cell // we created in the row we created. NEAT! cellLeft.appendChild(textNode); // right cell // another cell! var cellRight1 = row.insertCell(1); // creating an element this time, specifically an input var el = document.createElement('input'); // a data type of text el.type = 'text'; // the name of the element itemname, and because this is dynamic we also // append the row number to it, so for example if this is the eigth row // being created the text box will have the name of itemname8. super fantastic. // the exact same thing with a unique id el.id = 'itemname[]'+ iteration; // set it to size of 40. setting sizes is good. el.size = 40; // same thing as earlier, append our element to our freshly and clean cell cellRight1.appendChild(el); var cellRight2 = row.insertCell(2); var e2 = document.createElement('input'); e2.type = 'text'; e2.id = 'description[]' + iteration; e2.size = 20; e2.maxsize = 100; cellRight2.appendChild(e2); var cellRight3 = row.insertCell(3); var e3 = document.createElement('input'); e3.type = 'text'; e3.id = 'unitcost[]' + iteration; e3.size = 10; e3.maxsize = 100; cellRight3.appendChild(e3); var cellRight4 = row.insertCell(4); var e4 = document.createElement('input'); e4.type = 'text'; e4.id = 'quantity[]'+ iteration; e4.size = 4; e4.maxsize = 100; cellRight4.appendChild(e4); var cellRight5 = row.insertCell(5); var e5 = document.createElement('input'); e5.type = 'text'; e5.id = 'price[]'+ iteration; e5.size = 10; e5.maxsize = 100; cellRight5.appendChild(e5); // var cellRight7 = row.insertCell(7); // var e7 = document.createElement('input'); // e7.type = 'CHECKBOX'; // e7.id = 'cancel[]'; // cellRight7.appendChild(e7); var cellRight6 = row.insertCell(6); cellRight6.innerHTML = " <input type='button' value='Delete' size='6' onclick='removeRow(this);'/>"; e4.onclick = dynamic_onc(); } function removeRow(src) { /* src refers to the input button that was clicked. to get a reference to the containing <tr> element, get the parent of the parent (in this case case <tr>) */ var oRow = src.parentElement.parentElement; //once the row reference is obtained, delete it passing in its rowIndex document.all("mySampleTable").deleteRow(oRow.rowIndex); } function countRow() { var Rowcount = document.getElementById('mySampleTable').rows.length; document.eval_edit.count.value = Rowcount-1; } function CalculatePrice() { var Rowcount = document.getElementById('mySampleTable').rows.length; document.eval_edit.count.value = Rowcount-1; } function onc() { var a= document.getElementById('unitcost[]'); var b= document.getElementById('quantity[]'); var c = Math.ceil(a.value*b.value); alert(b); document.getElementById('price[]').value =c; } function dynamic_onc() { alert('Jay' ); e5.value =7; } function Totalcal() { var a= document.getElementById('unitcost[]'); var b= document.getElementById('quantity[]'); var c = Math.ceil(a.value*b.value); alert(b.value); document.getElementById('price[]').value =c; } I want to be able to display a table of images, all the same size, click on any one and show a corresponding htm pages in an iframe, click outside the ifram or on it to close it; click on another image and on and on... So far, I am able to hide the initial iframe and/or display it inline but am unable to show it above the table that holds the images. It is not difficult to do this using screen-captured images of the htm pages but I am looking for a dynamic way of doing this either with javascript or php or just plain html. The htm pages contain a recipe with an photo and text in a <table>. If needed, I could whip up a small demo. Any help would be much appreciated. I just placed this div named iframe_container in a table cell. There's an iframe and another div inside of it and when I went to fine tune the alignment I discovered I could change the width of the div but not the height I can set it to 200 or 1000, it doesn't make the slightest difference. It seems to be clinging to the outside of the iframe. I can make it bigger by inserting breaks after the iframe but then the compass_rose div loses its absolute position for some reason I searched the page for height tags that might be interfering with this but I've turned up squat. I took the height specs off the table but still no effect. Can anyone spot the problem? <td style="width: 800px; height: 700px" valign="top" class="style3" align="left"> <div id="iframe_container" style="width:1000px; height=700; position: relative; overflow-x:auto; overflow-y:hidden"> <div id="compass_rose" style="top: 5px; left: 1200px; position: absolute; z-index: 2; visibility:visible;"><img alt="Compass Rose" src="compass_rose_animated2.gif" width="80" height="80" /></div> <iframe id="viewer" width="1600" height="635" src="front_page2.jpg" marginwidth="1" marginheight="1" name="viewer"></iframe> </div> </td> </tr> </table> Hey guys, so i have a comment section. And what i want to do is if the height of the comment box is larger then lets say 100px. I want to set the height of the comment box to 50px and then display a "read more" button. And this read more button would toggle and allow the height to be "auto" and not set to 50px. so my html would look like this Code: <div class="comment-section"> <div class="comment"><p>This is where text would go. </p></div> <div class="read-more">Read More</div> </div> I have the class "read-more" set to "display:none" How would i do this? This is what i have / was trying and have been unsuccessful Code: <script type="text/javascript"> $(function(if ($".comment".style.height > 100px;){ { $".comment".style.height = 50px; $".read-more".style.display = block; } }); </script> I am trying to customize this scrollbar so that it will fit all screen resolutions and I was wondering how I could do this by somehow customizing the JavaScript files created by Nathan Faubion or if I could do this using other JavaScript variables (var widthPercentage) to change the pixels to percentages? Please let me know what you think. Thank you very much! One of the pages on the website I'm using the JavaScript on: http://www.clintshipley.com/about.html Code: JavaScript file jsScroller.js: //Created by Nathan Faubion http://www.n-son.com/scripts/jsScrolling/ function jsScroller (o, w, h) { var self = this; var list = o.getElementsByTagName("div"); for (var i = 0; i < list.length; i++) { if (list[i].className.indexOf("scroller-content") > -1) { o = list[i]; } } //Private methods this._setPos = function (x, y) { if (x < this.viewableWidth - this.totalWidth) x = this.viewableWidth - this.totalWidth; if (x > 0) x = 0; if (y < this.viewableHeight - this.totalHeight) y = this.viewableHeight - this.totalHeight; if (y > 0) y = 0; this._x = x; this._y = y; with (o.style) { left = this._x +"px"; top = this._y +"px"; } }; //Public Methods this.reset = function () { this.content = o; this.totalHeight = o.offsetHeight; this.totalWidth = o.offsetWidth; this._x = 0; this._y = 0; with (o.style) { left = "0px"; top = "0px"; } }; this.scrollBy = function (x, y) { this._setPos(this._x + x, this._y + y); }; this.scrollTo = function (x, y) { this._setPos(-x, -y); }; this.stopScroll = function () { if (this.scrollTimer) window.clearInterval(this.scrollTimer); }; this.startScroll = function (x, y) { this.stopScroll(); this.scrollTimer = window.setInterval( function(){ self.scrollBy(x, y); }, 40 ); }; this.swapContent = function (c, w, h) { o = c; var list = o.getElementsByTagName("div"); for (var i = 0; i < list.length; i++) { if (list[i].className.indexOf("scroller-content") > -1) { o = list[i]; } } if (w) this.viewableWidth = w; if (h) this.viewableHeight = h; this.reset(); }; //variables this.content = o; this.viewableWidth = w; this.viewableHeight = h; this.totalWidth = o.offsetWidth; this.totalHeight = o.offsetHeight; this.scrollTimer = null; this.reset(); }; JavaScript on HTML page: <script type="text/javascript" src="Scripts/jsScroller.js"></script> <script type="text/javascript" src="Scripts/jsScrollbar.js"></script> <script type="text/javascript"> var scroller = null; var scrollbar = null; window.onload = function () { scroller = new jsScroller(document.getElementById("scroller"), 550, 275); scrollbar = new jsScrollbar (document.getElementById("scrollbar-content"), scroller, false); } </script> Ahoy, Lemme try to explain this as best as I can. Bullet points might help: When someone clicks on an image here (http://gta.kwivia.co.uk/gta-iv/), the rest of the images collapse and become invisible Below the image, some links appear Also, there will be a "show other images" button which will then show the rest of the images http://gta.kwivia.co.uk/gta-iv/ I will appreciate all solutions to this problem. If you need to know anything, simply ask me. Hi, I need to re-size a div to be 100% of the browser but taking into account the height of an existing header div. Currently it works but it doesn't factor the height of the above header div, and therefore scrolls off the page (the height of the header div) I need to manipulate ( subtract the height value of the header) in the javascript somehow. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <script type="text/javascript"> function SetHeightOfDiv(){ var theDiv = document.getElementById('content'); theDiv.style.height = BrowserHeight()+"px"; } function BrowserHeight() { var theHeight; if (window.innerHeight) { theHeight = window.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { theHeight = document.documentElement.clientHeight; } else if (document.body) { theHeight = document.body.clientHeight; } return theHeight; } </script> </head> <body style="height:100%; background-color:blue; margin:0; padding:0; color:#ffffff; font-size:15px; text-align:center; font-family:monospace,arial" onload="SetHeightOfDiv()"> <div id="wrapper" style="height:100%; width:900px; background-color:yellow; margin-left:auto; margin-right:auto; overflow:hidden"> <div id="header" style="margin-top:0px; height:130px; width:890px; margin-left:5px; background-color:red; position:fixed"> <p>The FIXED HEADER</p> </div> <div id="content" style="margin-top:132px; background-color:grey; width:890px; margin-left:5px"> <p>THE BODY - that extends below the browser window (possibly the height of the header)</p></br> <p>So how do we manipulate the Javascript to 'Subtract' the height of the HEADER?</p></br> <p style="text-align:left; padding-left:10px"> function SetHeightOfDiv(){ <br> var theDiv = document.getElementById('content');<br> theDiv.style.height = BrowserHeight()+"px";<br> }<br> </br> function BrowserHeight() {<br> var theHeight;<br> if (window.innerHeight) {<br> theHeight = window.innerHeight;<br> }<br> else if (document.documentElement && document.documentElement.clientHeight) {<br> theHeight = document.documentElement.clientHeight;<br> }<br> else if (document.body) {<br> theHeight = document.body.clientHeight;<br> }<br> return theHeight;<br> }</p> </div> </div> <!--end of wrapper--> </body> </html> Thanks http://www.***.com/5.html i cant get a caption specific to each image to display under the arrows when the image changes. it is especially hard for me because i have to edit the javascript which confuses the **** out of me. it seemed so simple.... thanks for any help ps i cant start an id with a digit? it doesnt seem to cause any problems...why is it stated that this cannot or shouldnot be done? hello, I'm trying to load the ads on my site dynamically and have ran into an issue and was hoping for some help. First - I can get the ads to load using vanilla javascript with the code below. Code: var ifrm = document.createElement("iframe"); ifrm.setAttribute("src", OAS_url + "adstream_sx.ads/" +sitePage + "/" + uniqid() + "@" + pos); var ifrmId = "ifrm_" + uniqid(); ifrm.setAttribute("id", ifrmId); ifrm.setAttribute("marginwidth", 0); ifrm.setAttribute("marginheight", 0); ifrm.setAttribute("frameborder", 0); ifrm.setAttribute("scrolling", 0); ifrm.setAttribute("height", container.scrollHeight + (container.offsetHeight - container.clientHeight)); ifrm.setAttribute("width", container.scrollWidth + (container.offsetWidth - container.clientWidth)); container.appendChild(ifrm); But since the site is using jquery I wanted to develop it out that way. So I have the following code, Code: iRandom = oas.uniqid(); sAdURL = opt.url + 'adstream_mjx.ads/' + opt.sitepage + '/1' + iRandom + '@' + sPos + '?' + opt.query; $('<iframe />', { src: sAdURL, id: sPos }).appendTo(thisAd); I figured the reason this isn't working is the difference between appendChild and appendTo and the fact that things are jquery objects. So again the top code block renders the ads and the lower code block just shows the javascript code from the ad provider. Any help to get this to work in jquery would be grateful. Thanks ok i have a script which will make a copy of the html in a div and place it into another div the problem with this it creates a duplicate element with the same id so what i want to know is can i create a new id based off old ids using a generic type script Code: function scope(e) { var popin = document.getElementById('popin'); popin.innerHTML = "<div class='container'>"+e.innerHTML+"</div>"; popin.style.display = "block"; } this code is designed for taking content in a small div and placing it into a larger div to increase the viewing area so what i would need is sumthing that can look for Code: id="sum text" and maybe amend it to Code: id="sum textP" or sumthing to that extent if sum1 could point me in the right direction that would be great if my post is not clear enough just ask me to be more specific or sumthing and i will see what i can do to try and make it more clear if needed Hi Guys, I am using the following bit of code to toggle information inside a webpage. Is there a way i can make this code more dynamic so that i do not have to use the next() function to initiate slidetoggle()? I would like to have it so i can pass an ID through to the function and it will then toggle my box but i can't figure it out. Javascript is not my strong suite. Here the function Code: function initMenu() { //$('.items_wrapper').hide();//object to be hidden $('.headline').click(//object to be clicked function() { $(this).next().slideToggle('slow'); //alert("doesn't work"); } ); } $(document).ready(function() {initMenu();}); I would like to create a link inside .headline such as .ViewItems If you need to see the code let me know and i will post it. --EDIT-- Right Now my code is like this and you click headline Code: <div class='headline'></div> <div class='items_wrapper'> </div> I would like it work with an internal element like this, so i can't use next() Code: <div class='headline'><div class='selector'>Click Here</div></div> <div class='items_wrapper'> </div> Thanks in advance. note: this is not homework Hi all, Currently I am doing this: Code: var e = document.getElementById('id'); e.style.color = '#ff0000'; e.style.fontFamily = 'sans-serif'; e.innerHTML = time; ...blah blah... What I'm actually doing is inserting the current time into an existing DIV and updating it every second. THAT all works. What I want to do is also set an event for that div.... something like this: e.event.onclick = 'runThisCode()'; Of course, the above doesn't work... and I'm not even sure what to ask for doing a Google search... because I get no hits (or maybe it's not possible). So, is it possible, and if so, how? Thanks! -- Roger p.s. I really don't want to edit the code itself (where that div is) because it's part of another app that may change as they update it and I don't want to have to re-patch every new release. I have an input box "product" besides it there is an add input button which adds another input box product upon clicking.This array of input boxes I have created is through document.createElement('input'). My autocomplete is working for the initial input box....now when I click add Input button for the generated box also the autocomplete shld work...how do I make it work?? PS:Autocomplete script is working so I didnt post it here.... I just want it to make it working dynamically created i/p boxes Hi guys, I created a form that contains about 10 form fields and would like to add the option to dynamically add more sets of those 10 fields if a user clicks a word or a button but I need help. I'm a beginner when it comes to JavaScript and would appreciate any help. This is what I need to generate dynamically. Can someone give me an idea of how to get started please? Code: <div id="dynamicInput"> <ul> <li>1</li> <li><input name='textfield1' type='text' size='10' /></li> <li><select name='commodity' width='100' style='width: 100px'> <option>Option 1</option> </select></li> <li><input name='textfield2' type='text' size='5' /></li> <li><input name='textfield3' type='text' size='10' /></li> <li><input name='textfield4' type='text' size='10' /></li> <li><input name='textfield5' type='text' size='10' /></li> <li><input name='textfield6' type='text' size='5' /></li> <li><input name='textfield7' type='text' size='5' /></li> <li><input name='textfield8' type='text' size='5' /></li> </ul> </div> How do I dynamically create a <select> with <options> in Javascript?
|