|
JavaScript - Where Did I Go Wrong Trying To Dynamically Adjust A Div
I have been over this code several times and through as many tutorials as I can fine and I still can not figure out why it does not work. Is anyone here able to point out my error?
The objective of the code is to get the size in pixels of the viewport when the browser loads page, and when the browser window is resized. After obtaining that number I want to use it to set the size of my DIV to 770px if the viewport has gotten shorter than than 770, and to auto if my viewport is larger than 770. Note, I am not posting the HTML or CSS code because it seems like this should be simple - I will gladly post that code if it turns out my question is not simple. Code: <script language="JavaScript" type = "text/javascript">
<!--
function inspectview() {
var viewportheight;
// most modern browsers
if (typeof window.innerWidth != 'undefined')
{
viewportheight = window.innerHeight;
}
// IE6 in standards compliant mode
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportheight = document.documentElement.clientHeight;
}
// older versions of IE
else
{
viewportheight = document.getElementsByTagName('body')[0].clientHeight;
if (viewportheight <= 770){
document.getElementById("bg").style.height = "770px";
} else {
document.getElementById("bg").style.height = "100%";
}
}
window.onload = inspectview;
window.onresize = inspectview;
//-->
</script>
Thank you in advance -Alaric_ Similar TutorialsHi people, I'm new to this and I was wondering how to adjust the iframe height by itself if my html height increases. My html code includes a facebook comment at the bottom of my page and the comment will show making it expand the height once users post comments. On the other hand, I'm using a CMS that have its own iframe. I've tried many solutions that can be found on the web but none works. It only can work if I don't put in CMS. Is it possible to adjust the iframe height using CMS or there is no way? I hope you guys understand what I'm trying to say. Hope to hear from you guys soon. Thanks alot. Hello, I'd like to make an iframe that will automatically get the height of the webpage it is on (not the source url) - I'm not talking the browser viewport but the entire document - so basically the height in pixels minus a certain value to prevent the iframe from sliding out - example: Code: <iframe src="http://google.com/" height="CURRENT DOCUMENT'S HEIGHT MINUS 50" width="FIXED"></iframe> Maybe it is better to achieve this function in php - or any other way? And perhaps there is some better way than an iframe - like a container of some sort that can automatically expand to the webpage's length... Thanks in advance! Hello! Please take a look at my site: Test Flyout Lists As I hover over Item 15, I want it to be like, "Okay, this list I'm about to display is going to be too long, so let's disregard the 'top: 10px' line in the CSS and instead have the submenu sit with its last item right at the bottom aligned with the bottom of the gradient." That way, we know for sure that the submenu will not reach past the height of the body, and the last item will be visible. The bottom of the last item's cell should "hug" the bottom of the page/gradient. Can I do this in JavaScript? I'm looking to do the following in javascript. Either on image_load OR on mouseover of an image, I would like to transition the exposure (or gamma, or brightness) of the image from over-exposed, down to the regular image. If that doesn't make sense, please see an example at: http://www.entheosweb.com/Flash/Phot...20/default.asp The coding for the example in Flash (Actionscript 3.0) is as follows: Code: function changeColor()
{
var colorComponent = 400;
onEnterFrame = function ()
{
myColor = new Color(big_mc_image);
myColTr = new Object();
colorComponent = colorComponent + (100 - colorComponent) / 6;
myColTr = {ra: colorComponent, ga: colorComponent, ba: colorComponent};
myColor.setTransform(myColTr);
big_mc_image._visible = true;
if (Math.round(colorComponent) == 100)
{
delete this.onEnterFrame;
colorComponent = 400;
}
}
;
}
But as you can see, they use a built-in "TRANSFORM" function. In JAVASCRIPT, is it possible to affect the brightness/exposure of an image??? I know that alpha/opacity can be manipulated and would love to have this effect in my html/javascript code. I've attached the following code (simple fade in/fade out of an image). But would basically like to replace "OPACITY" with "EXPOSURE". Code: function fade(eid)
{
var element = document.getElementById(eid);
if(element == null)
return;
if(element.FadeState == null)
{
if(element.style.opacity == null
|| element.style.opacity == ''
|| element.style.opacity == '1')
{
element.FadeState = 2;
}
else
{
element.FadeState = -2;
}
}
if(element.FadeState == 1 || element.FadeState == -1)
{
element.FadeState = element.FadeState == 1 ? -1 : 1;
element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
}
else
{
element.FadeState = element.FadeState == 2 ? -1 : 1;
element.FadeTimeLeft = TimeToFade;
setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
}
}
I haven't come across any .js files that I can download. Know of any? i want to adjust text size according to a page without scrollers. e.g the page should be shown that its scrollers are off and the text on the page spread from top to bottom.
I had a thread on here earlier in which one of you helped me immensely. As I mentioned in that thread, I know very little about javascript. The code I was given basically handles one user, and does it very well. I have since attended a meeting in which I was asked to have multiple users on one page. For example: My current code handles the following: Name - Hours - series of radio button choices. My updated request is the following: Name - Hours - series of radio button choices Name - Hours - series of radio button choices Name - Hours - series of radio button choices Name - Hours - series of radio button choices etc. up to 15 total users. I have tried to adjust the javascript, but with my lack of knowledge in this area I keep breaking it. Any help would again be greatly appreciated, here is my code: Code: <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Jared Daily Sales Goal Calculation Worksheet</title>
</head>
<script type="text/javascript">
var IE = navigator.appName == "Microsoft Internet Explorer";
var nSets = "";
var answeredQ = [];
function advanceTo(nextQ,nQ){
var currAns = answeredQ[nQ.name.replace(/q/,"")-1];
if (currAns != "-" && currAns != nQ.value)
{
var nFloor = nQ.parentNode.parentNode.id.replace(/f/,"")-1;
for (i=0; i<nSets.length; i++)
{
if (i > nFloor)
{
nSets[i].style.display = "none";
}
}
}
nSets[nextQ-1].style.display = "";
answeredQ[nQ.name.replace(/q/,"")-1] = nQ.value;
}
function init(){
nSets = document.forms[0].getElementsByTagName('fieldset');
for (i=1; i<nSets.length; i++)
{
nSets[i].style.display = "none";
answeredQ[answeredQ.length] = "-";
}
}
IE ? attachEvent('onload', init, false) : addEventListener('load', init, false);
</script>
<style type="text/css">
body {background-color: #ffffff; margin-top: 60px;}
fieldset {border: 0px}
td { font-family:Arial, Helvetica, sans-serif;
font-size:12px;}
h1 { font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;}
</style>
<body>
<cfform action="" method="post">
<!--- Header --->
<table border="1">
<tr>
<td>
<table align="left">
<tr bgcolor="#E5E5E5">
<td>Name</td>
<td>Hours</td>
<td colspan="4"></td>
</tr>
<!--- Emp 1 --->
<tr bgcolor="#ffffff">
<td valign="top"><input name="" size="10"></td>
<td valign="top"><input name="" size="10"></td>
<td valign="top">
<fieldset id="f1">
<!-- Question 1 -->
<label><input type="radio" name="e1q1" value="Diamond1" onclick="advanceTo(2,this)">Diamond</label>
<label><input type="radio" name="e1q1" value="Perimeter1" onclick="advanceTo(3,this)">Perimeter</label>
</fieldset>
</td>
<td valign="top">
<fieldset id="f2">
<!-- Question 2 -->
|<label><input type="radio" name="e1q2" value="GM1">GM</label>
<label><input type="radio" name="e1q2" value="AGM1">AGM</label>
<label><input type="radio" name="e1q2" value="DDM1">DDM</label>
<label><input type="radio" name="e1q2" value="FT1" onclick="advanceTo(4,this)">Full Time</label>
<label><input type="radio" name="e1q2" value="PT1" onclick="advanceTo(4,this)">Part Time</label>
</fieldset>
</td>
<td valign="top">
<fieldset id="f3">
<!-- Question 3 -->
<label><input type="radio" name="e1q3" value="PDM">PDM</label>
<label><input type="radio" name="e1q3" value="RL">RL</label>
<label><input type="radio" name="e1q3" value="FT1" onclick="advanceTo(4,this)">Full Time</label>
<label><input type="radio" name="e1q3" value="PT1" onclick="advanceTo(4,this)">Part Time</label>
</fieldset>
</td>
<td valign="top">
<fieldset id="f4">
<!-- Question 4 -->
|<label><input type="radio" name="e1q4" value="Tenured1">Tenured</label>
<label><input type="radio" name="e1q4" value="NonTenured1">Under 2 Years</label>
</fieldset>
</td>
</tr>
</table>
</td></tr></table>
</cfform>
</body>
</html>
Hey I was wondering, I have a box with tabs at the bottom. As you click the tabs, different stories appear in the box. However, I have the box in a fixed length. So if stories are longer, then they disappear beneath the visible line of the box. When I had it auto-adjusting though, the box would change based on the story I was clicking on. It gets weird. Is there a way to have the box auto-adjust based on the largest amount of text and have it stay that height regardless on what story you pick? I hope this makes sense. Thanks! KZ I'm wondering if anyone out there has a jquery solution to using an iframe that automatically adjusts it's height of the child and also works cross domain. Any help would be greatly appreciated. Please try a search on my webpage (search box is located at top of sidebar on the left): http://www.americanchic.net/help Here is the code implemented on the search results page: Code: <div id="cse-search-results"></div> <script type="text/javascript"> var googleSearchIframeName = "cse-search-results"; var googleSearchFormName = "cse-search-box"; var googleSearchFrameWidth = 500; var googleSearchDomain = "www.google.com"; var googleSearchPath = "/cse"; </script> <script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script> The original code (from my Google custom search control panel) included a FrameWidth of 600 and I changed it to 500 but it didn't make a difference. Any ideas? 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. 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 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. 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 Can anyone let me know how can I get the href info dynamically I have 2 different webistes, just want to show those website urls dynamically <html> <body> <a href="http://www.yahoo.com" target="_blank">YAHOO</a> <a href="http://www.Google.com" target="_blank">Google</a> <script type="text/javascript"> document.write(href url of yahoo); document.write('href url of google); </script> </body> </html> thanks for help in advance Hi, Here are sample divisions: Code: <style type="text/css">
#grandparent {width:100px;}
#parent {overflow:auto; height:100px; }
.child {overflow:hidden; margin-left:10px;}
</style>
<div id="grandparent">
<div id="parent">
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
</div>
</div>
The <div class="child"> width value is always 10 pixels less than <div id="parent"> width value. How can it be calculated so any width value is given to <div id="parent">, its child gets 10 pixels less than that? Any help is very much appreciated! Mike 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've done some googling and have come across some information, but I'm not quite sure how to apply it to my problem. I have a PHP page saturna.php with six frames on it using the frameset commands. I would like to somehow make it so that when I click on something in one frame (with one PHP page loaded in it - game.php), it automatically/dynamically updates one of the other PHP pages (inventory.php) in another frame. What will happen is when the thing is clicked on in game.php, an entry will be added to the database, and the second PHP page (which retrieves information from the database) will notice that there is a new relevant record, and will add it to the inventory.php page in the table I have constructed there. From my googling it seems I need to use JavaScript to do this, but I'm not quite sure how - any ideas ? Thanks very much! I have the index page which contains the menus with hrefs. Now i have to generate the hrefs dynamically and the problem is the menus are created by the plugin so i can edit that file So i was thinking of loading the new url in hidden elemenst and when the page loads then chnage the hrefs of those menus. I want to ask that where on the page should i display the hidden elements so that when the page loads then by using JS i can chnage the href of few menu items I was thinking of doing that on the top of page but that does not look nice to have any element before body Hi, I am quite new to JS and is currently building a website with a little of JS Function. Ok, so I have a Page tat consists of 10 images. Each images when on mouse over, will display a larger version on the images, using JS(onmouseover). Then, I will have a next button that will replace all the images, using Ajax, which means my page will not be reloaded. The problem comes here when I have to replace all the onmouseover effect. I can replace all the thumbnails without problem, but the onmouseover I have problem replacing. Is there anyway that I can dynamically replace all the onmouseover? Any help will be appreciated. Thanks Hi I am new to javascript programming. Is it possible to append an event handler to a tag dynamically. <input type="button" id="cmdNext" value="Next Page"> i want to be able to programatically loop through the buttons on a page and then add the onClick event. So my finally result will be the following: <input type="button" id="cmdNext" value="Next Page" onClick="CheckValues()"> Since i am new (if possible) can someone provide detail code example so i can break it down and study it before i implement. |
|||||||