Learn VBA & Macros in 1 Week!

JavaScript - Adjusting Iframe Still Has Scroll Bar

Full Excel VBA Course - Beginner to Expert

Adjusting Iframe Still Has Scroll Bar	View Content

Problem Solved

Full Excel VBA Course - Beginner to Expert

I'm Trying To Get An Iframe To Scroll To The Bottom

Similar Tutorials

View Content

I have an iframe on my page which currently shows a separate website (one that i do not control). I'm trying to have the iframe automatically scroll to the bottom of the page. I'm pretty sure this is doable through javascript. The website does not have any anchor(s) or anything else that would be useful for what I'm trying to do.

I've been stuck on this for over an hour now.. so please help

Here is my code

<iframe name="frame" id="frame" width="880px" height="600px" src="website" scrolling="no" frameborder="0"></iframe>

Problem With Moving Scroll Bar In Iframe

Similar Tutorials

View Content

I have a paragraph of text which is embedded in an IFrame. when i search particular string in that paragraph, if the string is found then the string will be highlighted and the full paragraph is loaded in IFrame. but, if the searched text is at the bottom, then scroll bar in an iframe is not automatically moved to the hidden highlighted text position. any body help me to move the scroll bar automatically to the hidden text position in the IFrame?

please run the code,

type any text from the paragraph of text and click serach button.

see the output. [if the searched text is at the bottom, move the scroll bar to see it in the iframe]

code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

<script language="javascript" type="text/javascript">
var html = "Cascading Style Sheets (CSS) are an increasingly commmon way for website developers to control the look and feel of their web pages. A style ssheet allows the website developer to specify the size, font and color of text for an entire website without having to code the information in each page. Style sheets separate the stylle (or look and feel) of the document from the structure (or the content and ordering of information).<br/>1.This # 1 item in this loong list <br/>2.This # 2 in the list <br/>3.This # 3 item in thiis long list <br/>4.This # 4 in the list <br/>5.This # 5 item inx this long list CSS is a powerful way for content developers to preserve the desired fonts, colors, and text sizes of HTML documents. Howwever, students with disabilities can also benefit from sites designed using CSS. Individual users can choose to apply their own style sheets to documents, overriding any other style sheets. FFor example, a person with low vision could modify every CSS-enabled website to display texxt in yellow on a black background, if those colors enable her to read the text.";
var iframe;
var id;
var doc;
var index;
var highlightStartTag = "<span style='color:#EE7A03'>";
var highlightEndTag = "</span>";
var wrong_word = "speltext";
var afterHighlightText;
var newText;
var start = 0;

function highlight() {
iframe = document.getElementById('frame1');
doc = iframe.document;
if (iframe.contentDocument)
doc = iframe.contentDocument;
else if (iframe.contentWindow)
doc = iframe.contentWindow.document;
}
function highlight1() {
newText = html;
var tid = document.getElementById('TextBox1');
var text = tid.value;
index = newText.indexOf(text);
if (index >= start) {
var length = 0;
length = index + wrong_word.length;
var before_delim = newText.charAt(index - 1);
var after_delim = newText.charAt(length);
var beforeHighlightText = newText.substring(0, index - 1);
afterHighlightText = newText.substring(length + 1, newText.length);
newText = beforeHighlightText + before_delim + highlightStartTag + newText.substr(index, text.length) + highlightEndTag + after_delim + afterHighlightText;
doc.write(newText);
}
else {
alert("Reached End");
}
return false;
}
</script>

</head>
<body onload="highlight()" >
<form id="form1" runat="server">
<div>
<div>
<b>Sample Text:</b>
<br />
Cascading Style Sheets (CSS) are an increasingly commmon way for website developers to control the look and feel of their web pages. A style ssheet allows the website developer to specify the size, font and color of text for an entire website without having to code the information in each page. Style sheets separate the stylle (or look and feel) of the document from the structure (or the content and ordering of information).<br/>1.This # 1 item in this loong list <br/>2.This # 2 in the list <br/>3.This # 3 item in thiis long list <br/>4.This # 4 in the list <br/>5.This # 5 item inx this long list CSS is a powerful way for content developers to preserve the desired fonts, colors, and text sizes of HTML documents. Howwever, students with disabilities can also benefit from sites designed using CSS. Individual users can choose to apply their own style sheets to documents, overriding any other style sheets. FFor example, a person with low vision could modify every CSS-enabled website to display texxt in yellow on a black background, if those colors enable her to read the text.
</div>
<br />
<b>Type the Text to Search from the above passage, for EG:"powerful"</b>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<br />
<b>Move Scroll button to see hidden highlighted text</b>
<iframe id="frame1"></iframe>
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Search"
OnClientClick="return(highlight1());" />
</div>
</form>
</body>
</html>

Thanks,
Lakshmi

Iframe's Scroll Bar Not Responding To Onmouseup

Similar Tutorials

View Content

1) I have a webpage that contains an iframe. The iframe is scrollable.

2) I have the main body of the page responding to onmouseup clicks:

<body onmouseup="hideMenus(event)">

And I have the main body of the child page (displayed in the iframe) also responding to onmouseup clicks:

<body onmouseup="parent.hideMenus(event)">

So clicks on both pages result in hideMenu() on the parent page being called.

Now when the scroll bars on the iframe become visible (due to large amounts of content), I click on the scroll bar, and the hideMenus() function does not respond. I guess the scroll bar is not recognized as part of either the parent page or the iframe's page. I tried adding

onmouseup="hideMenus(event)"

to the iframe but that didn't help.

How can I get mouse clicks on the iframe's scroll bar to result in hideMenu being called?

The website can be viewed he http://www.shahspace.com/bow/home.html

Script In Iframe To Scroll Parent Window

Similar Tutorials

View Content

The following script will take the option parameter from the page URL and scroll the page to the element which has the matching ID.

For example:
mypage.html?element3
will cause it to scroll to the element which has an id="element3" when the page loads.

Code:

<html><head><title></title>

<script type="text/javascript">

function OptionScroll(){
  if (location.search.length > 0){
    LocnId=unescape(location.search.substring(1))
    scrollLocn = document.getElementById(LocnId).offsetTop
    document.body.scrollTop = scrollLocn
  }
}

 </script>
</head>
<body onload="OptionScroll()">
...etc....

This works fine. Now for the next step, I want to be able to do this from a script embedded in an iframe. In other words, when the page loads, the iframe will load and a script within the iframe executes taking the parameter from the parent page's URL, and then scrolls the parent page to the element with the matching ID. Is it possible to do this?

Code Need's Adjusting

Similar Tutorials

View Content

Hi,

I currently have a SLN file which need's adjusting slightly.

Please could someone help me adjust this code in this file

http://www.2shared.com/file/7072761/...nal_csf11.html

From :

Sr.WriteLine("Cars = UF1");

To :

Sr.WriteLine("Cars = XFG");

Thanks

Matty

Adjusting Cookie

Similar Tutorials

View Content

Hey all,

I have set up a cookie that redirects the visitor if they have visited the page before. However, I'd like to make some adjustments to it to where if they have cookies turned off, it automatically redirects them to a page that requests them to turn on cookies. Any ideas?

Code:

<script>
num_days = 24;
function ged(noDays){
    var today = new Date();
    var expr = new Date(today.getTime() + noDays*60*60*1000);
    return  expr.toGMTString();
}

function readCookie(cookieName){
    var start = document.cookie.indexOf(cookieName);
    if (start == -1){ 
        document.cookie = "seenit=yes; expires=" + ged(num_days);
    } else {
        window.location = go_to;
    }
}

var go_to = "/index.php?module=article&id=310";

readCookie("seenit");
</script>

Adjusting Window Size

Similar Tutorials

View Content

I have dealt with window open before and i know how to adjust the size of the window in the parameters assigned but i have never dealt with window.opener before and have had several failed attempts and adjusting the window size here..

any help would be appreciated..

there is some inline css that i can change the background and stuff but i tried using height and width in the css to no avail, so i thought i would ask do i need to assign a new var inside the script ? how do i change the size. ?

it needs to be 300x300 thanks

Code:

<script language="JavaScript">
	var host = '<?php echo $_SERVER['HTTP_HOST'];?>';
                var win = false;
	if (window.opener) {
		win=window.opener;
                                            } else if (top.document) {
		win=top.document;
	}
	if (!win || win.location.href.toString().indexOf('<?php echo $parent_href;?>')==-1) {
                                 window.location.href = '<?php echo $parent_href;?>';
	}

Need Help Adjusting My Code To Suit Please

Similar Tutorials

View Content

Hi I have this snippet of code which shows an image based on what radio button is selected, problem is that the names, id's, values etc are dynamically created via the admin panel of my cart so what happens is that the buttons are not recognised as being 'checked' if I make them 'checked'...

I can sort of see where its trying to check if 'checked' but quite sure how to make it suit my radio button without changing the buttons id's.

here my code:
Code:

<div id="Tabdoc_content3" class="Tabdoc_tabdivcontent" style="background-image:url('/images/back-sweets.png');background-repeat:no-repeat;background-position:center bottom;background-size:100%;" >
 <div class="wrapperAttribsOptions">
  <table width="100%" cellspacing="0" cellpadding="0" border="0">
  <tr valign="top">
  <td>
<script language="javascript"> 
function toggle1(showHideDiv, switchImgTag) {
        var ele = document.getElementById(showHideDiv);
        var imageEle = document.getElementById(switchImgTag);
        if(ele.style.display == "block") {
                ele.style.display = "none";
		imageEle.innerHTML = '<img src="/images/tabs/button_open_sweet1.gif">';
        }
        else {
                ele.style.display = "block";
                imageEle.innerHTML = '<img src="/images/tabs/button_close_sweet1.gif">';
        }
}
function toggle2(showHideDiv, switchImgTag) {
        var ele2 = document.getElementById(showHideDiv);
        var imageEle2 = document.getElementById(switchImgTag);
        if(ele2.style.display == "block") {
                ele2.style.display = "none";
		imageEle2.innerHTML = '<img src="/images/tabs/button_open_sweet2.gif">';
        }
        else {
                ele2.style.display = "block";
                imageEle2.innerHTML = '<img src="/images/tabs/button_close_sweet2.gif">';
        }
}
function toggle3(showHideDiv, switchImgTag) {
        var ele3 = document.getElementById(showHideDiv);
        var imageEle3 = document.getElementById(switchImgTag);
        if(ele3.style.display == "block") {
                ele3.style.display = "none";
		imageEle3.innerHTML = '<img src="/images/tabs/button_open_sweet3.gif">';
        }
        else {
                ele3.style.display = "block";
                imageEle3.innerHTML = '<img src="/images/tabs/button_close_sweet3.gif">';
        }
}
</script>
   <table cellpadding="0" cellspacing="0" border="0" width="100%">
   <tr valign="top">
    <td align="center" width="33%">
<script type="text/javascript">
// For: http://www.codingforums.com/showthread.php?p=1107835#post1107835
var picFile0 = ['sweet1.png','sweet2.png','sweet3.png','sweet4.png','sweet5.png','sweet6.png','sweet7.png','sweet8.png','sweet9.png','sweet10.png','sweet11.png','sweet12.png','sweet13.png','sweet14.png','sweet15.png','sweet16.png','sweet17.png','sweet18.png'];  // each can be expanded with more images
var picFile1 = ['sweet1.png','sweet2.png','sweet3.png','sweet4.png','sweet5.png','sweet6.png','sweet7.png','sweet8.png','sweet9.png','sweet10.png','sweet11.png','sweet12.png','sweet13.png','sweet14.png','sweet15.png','sweet16.png','sweet17.png','sweet18.png'];
var picFile2 = ['sweet1.png','sweet2.png','sweet3.png','sweet4.png','sweet5.png','sweet6.png','sweet7.png','sweet8.png','sweet9.png','sweet10.png','sweet11.png','sweet12.png','sweet13.png','sweet14.png','sweet15.png','sweet16.png','sweet17.png','sweet18.png'];
var imgPtr = [
//  [current_image,baseURL,filenames,display_image]
    [0,"/images/tabs/",'imgSrc0'],
    [0,"/images/tabs/",'imgSrc1'],
    [0,"/images/tabs/",'imgSrc2']  // No comma after last entry
];
// Create function to load image
function loadImg(imgGroup) {
  var picFile = [];  
  var imgID = imgPtr[imgGroup][2];
  switch (imgGroup) {
    case '0' : picFile=[].concat(picFile0); break;
    case '1' : picFile=[].concat(picFile1); break;
    case '2' : picFile=[].concat(picFile2); break;
    default  : alert('Invalid assignment\n'+imgGroup); break;
  }
  var ptr = imgPtr[imgGroup][0];
  if (ptr < 0) { ptr = 0; }
  if (ptr > picFile.length-1) { ptr = picFile.length-1; }
  document.getElementById(imgID).src = imgPtr[imgGroup][1]+picFile[ptr];
  imgPtr[imgGroup][0] = ptr;
  var rbtn = 'rg'+imgGroup+ptr;  // alert(rbtn);
  document.getElementById(rbtn).checked = true;
}
// Create link function to switch image backward
function prev(imgGroup) {
  imgPtr[imgGroup][0]--;
  loadImg(imgGroup);
}
// Create link function to switch image forward
function next(imgGroup){
  imgPtr[imgGroup][0]++;
  loadImg(imgGroup);
}
// Load function after page loads
onload = function() { 
  loadImg('0');
  loadImg('1');
  loadImg('2');
}
</script>
<div style="width:230px;text-align:center;">
<img name="imgSrc0" id="imgSrc0" src="/images/tabs/sweet1.png">
</div>
<div id="headerDivImg">
    <div id="titleTextImg"></div>
    <a id="imageDivLink" href="javascript:toggle1('contentDivImg', 'imageDivLink');">
    <img src="/images/tabs/button_open_sweet1.gif"></a>
   </div>
<div id="contentDivImg" class="sweetlist" style="display: none;">
<p>BOILED SWEETS - STANDARD</p>
<input name="id[18]" value="81" id="attrib-18-81" type="radio" onclick="imgPtr[0][0]=12;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-81"> Kola Cubes</label><br />
<input name="id[18]" value="82" id="attrib-18-82" type="radio" onclick="imgPtr[0][0]=13;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-82"> Pineapple Cubes</label><br />
<input name="id[18]" value="79" id="attrib-18-79" type="radio" onclick="imgPtr[0][0]=10;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-79"> Rhubarb and Custard</label><br />
<input name="id[18]" value="80" id="attrib-18-80" type="radio" onclick="imgPtr[0][0]=11;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-80"> Strawberry and Cream</label><br /><br />
<p>BOILED SWEETS - SPECIAL</p>
<input name="id[18]" value="76" id="attrib-18-76" type="radio" onclick="imgPtr[0][0]=7;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-76"> Fizzy Blueberry</label><br />
<input name="id[18]" value="61" checked="checked" id="attrib-18-61" type="radio" onclick="imgPtr[0][0]=0;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-61"> Fruits of the Forest</label><br />
<input name="id[18]" value="74" id="attrib-18-74" type="radio" onclick="imgPtr[0][0]=5;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-74"> Lemon and Lime</label><br />
<input name="id[18]" value="62" id="attrib-18-62" type="radio" onclick="imgPtr[0][0]=1;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-62"> Pear Drops</label><br />
<input name="id[18]" value="77" id="attrib-18-77" type="radio" onclick="imgPtr[0][0]=8;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-77"> Sour Cherry</label><br />
<input name="id[18]" value="73" id="attrib-18-73" type="radio" onclick="imgPtr[0][0]=4;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-73"> Wild Strawberry</label><br /><br />
<p>GUMMY SWEETS - ORGANIC</p>
<input name="id[18]" value="85" id="attrib-18-85" type="radio" onclick="imgPtr[0][0]=16;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-85"> Organic Fruit Cocktail</label><br />
<input name="id[18]" value="86" id="attrib-18-86" type="radio" onclick="imgPtr[0][0]=17;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-86"> Organic Jelly Bears</label><br />
<input name="id[18]" value="83" id="attrib-18-83" type="radio" onclick="imgPtr[0][0]=14;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-83"> Organic Sour Worms</label><br />
<input name="id[18]" value="84" id="attrib-18-84" type="radio" onclick="imgPtr[0][0]=15;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-84"> Organic Sugar Bears</label><br />
</div>
    </td>
    <td align="center" width="33%">
<div style="width:230px;text-align:center;">
<img name="imgSrc1" id="imgSrc1" src="/images/tabs/sweet14.png">
</div>
<div id="headerDivImg2">
    <div id="titleTextImg2"></div>
    <a id="imageDivLink2" href="javascript:toggle2('contentDivImg2', 'imageDivLink2');"><img src="/images/tabs/button_open_sweet2.gif"></a>
   </div>
<div id="contentDivImg2" class="sweetlist" style="display: none;">
<p>BOILED SWEETS - STANDARD</p>
<input name="id[19]" value="99" id="attrib-19-99" type="radio" onclick="imgPtr[1][0]=12;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-99"> Kola Cubes</label><br />
<input name="id[19]" value="100" id="attrib-19-100" type="radio" onclick="imgPtr[1][0]=13;loadImg('1')" ><label class="attribsRadioButton zero" for="attrib-19-100"> Pineapple Cubes</label><br />
<input name="id[19]" value="97" id="attrib-19-97" type="radio" onclick="imgPtr[1][0]=10;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-97"> Rhubarb and Custard</label><br />
<input name="id[19]" value="98" id="attrib-19-98" type="radio" onclick="imgPtr[1][0]=11;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-98"> Strawberry and Cream</label><br /><br />
<p>BOILED SWEETS - SPECIAL</p>
<input name="id[19]" value="94" id="attrib-19-94" type="radio" onclick="imgPtr[1][0]=7;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-94"> Fizzy Blueberry</label><br />
<input name="id[19]" value="87" checked="checked" id="attrib-19-87" type="radio" onclick="imgPtr[1][0]=0;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-87"> Fruits of the Forest</label><br />
<input name="id[19]" value="92" id="attrib-19-92" type="radio" onclick="imgPtr[1][0]=5;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-92"> Lemon and Lime</label><br />
<input name="id[19]" value="88" id="attrib-19-88" type="radio" onclick="imgPtr[1][0]=1;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-88"> Pear Drops</label><br />
<input name="id[19]" value="95" id="attrib-19-95" type="radio" onclick="imgPtr[1][0]=8;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-95"> Sour Cherry</label><br />
<input name="id[19]" value="91" id="attrib-19-91" type="radio" onclick="imgPtr[1][0]=4;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-91"> Wild Strawberry</label><br /><br />
<p>GUMMY SWEETS - ORGANIC</p>
<input name="id[19]" value="103" id="attrib-19-103" type="radio" onclick="imgPtr[1][0]=16;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-103"> Organic Fruit Cocktail</label><br />
<input name="id[19]" value="104" id="attrib-19-104" type="radio" onclick="imgPtr[1][0]=17;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-104"> Organic Jelly Bears</label><br />
<input name="id[19]" value="101" id="attrib-19-101" type="radio" onclick="imgPtr[1][0]=14;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-101"> Organic Sour Worms</label><br />
<input name="id[19]" value="102" id="attrib-19-102" type="radio" onclick="imgPtr[1][0]=15;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-102"> Organic Sugar Bears</label><br />
</div>
    </td>
    <td align="center" width="33%">
<div style="width:230px;text-align:center;">
<img name="imgSrc2" id="imgSrc2" src="/images/tabs/sweet11.png">
</div>
<div id="headerDivImg3">
    <div id="titleTextImg3"></div>
    <a id="imageDivLink3" href="javascript:toggle3('contentDivImg3', 'imageDivLink3');"><img src="/images/tabs/button_open_sweet3.gif"></a>
   </div>
<div id="contentDivImg3" class="sweetlist" style="display: none;">
<p>BOILED SWEETS - STANDARD</p>
<input name="id[20]" value="117" id="attrib-20-117" type="radio" onclick="imgPtr[2][0]=12;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-117"> Kola Cubes</label><br />
<input name="id[20]" value="118" id="attrib-20-118" type="radio" onclick="imgPtr[2][0]=13;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-118"> Pineapple Cubes</label><br />
<input name="id[20]" value="115" id="attrib-20-115" type="radio" onclick="imgPtr[2][0]=10;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-115"> Rhubarb and Custard</label><br />
<input name="id[20]" value="116" id="attrib-20-116" type="radio" onclick="imgPtr[2][0]=11;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-116"> Strawberry and Cream</label><br /><br />
<p>BOILED SWEETS - SPECIAL</p>
<input name="id[20]" value="112" id="attrib-20-112" type="radio" onclick="imgPtr[2][0]=7loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-112"> Fizzy Blueberry</label><br />
<input name="id[20]" value="105" checked="checked" id="attrib-20-105" type="radio" onclick="imgPtr[2][0]=0;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-105"> Fruits of the Forest</label><br />
<input name="id[20]" value="110" id="attrib-20-110" type="radio" onclick="imgPtr[2][0]=5;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-110"> Lemon and Lime</label><br />
<input name="id[20]" value="106" id="attrib-20-106" type="radio" onclick="imgPtr[2][0]=1;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-106"> Pear Drops</label><br />
<input name="id[20]" value="113" id="attrib-20-113" type="radio" onclick="imgPtr[2][0]=8;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-113"> Sour Cherry</label><br />
<input name="id[20]" value="109" id="attrib-20-109" type="radio" onclick="imgPtr[2][0]=4;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-109"> Wild Strawberry</label><br /><br />
<p>GUMMY SWEETS - ORGANIC</p>
<input name="id[20]" value="121" id="attrib-20-121" type="radio" onclick="imgPtr[2][0]=16;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-121"> Organic Fruit Cocktail</label><br />
<input name="id[20]" value="122" id="attrib-20-122" type="radio" onclick="imgPtr[2][0]=17;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-122"> Organic Jelly Bears</label><br />
<input name="id[20]" value="119" id="attrib-20-119" type="radio" onclick="imgPtr[2][0]=14;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-119"> Organic Sour Worms</label><br />
<input name="id[20]" value="120" id="attrib-20-120" type="radio" onclick="imgPtr[2][0]=15;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-120"> Organic Sugar Bears</label><br />
</div>
    </td>
   </tr>
   </table>
   <br class="clearboth" />
  </td>
  </tr>
  </table>
 </div>

 <div class="forward Tabdoc_pointer" style="margin-top:20px;margin-right:20px;position:relative;z-index:99;">
  <img src="images/tabs/button_continue.gif" alt="CONTINUE"  onclick="Tabdoc_ManageDisplay(4)">
 </div>
 <div class="back Tabdoc_pointer" style="margin-top:20px;margin-left:20px;position:relative;z-index:99;">
  <img src="images/tabs/button_back.gif" alt="BACK"  onclick="Tabdoc_ManageDisplay(2)">
 </div>
 <div class="clearboth">
  <img src="images/back-sweets.png" alt=" " style="width:970px;margin:-71px 0 0 0;"/>
 </div>
</div>

The part I think is the problem is:
Code:

  var rbtn = 'rg'+imgGroup+ptr;  // alert(rbtn);
  document.getElementById(rbtn).checked = true;

P.S. Sorry about the mixture of 'divs' and 'tables', i'm still sorting out the styling.
P.S.S. If you need a visual representation please PM me and I will send you link

Adjusting The Volume Of An Embedded Object

Similar Tutorials

View Content

I have a javascript sound board that I've made for a Church skit but I'm wanting to be able to smoothly fade out the longer SFX without having to do it manually with the volume slider.

The Object:
Code:

<span id="player_holder"><embed id="player" hidden="true" autostart="true" loop="false" volume="100"/></span>

How do I modify the volume value from:
Code:

document.getElementById('player')

Any ideas?

Adjusting Javascript Function For Multiple Calls

Similar Tutorials

View Content

Hi,

I have a search function which works when I only want to have only one search per page, but as it involves a string call I'm not sure how to modify it to multiple search requests on a page.

The below works fine for one call:
Code:

<script type="text/javascript">
function showHint(str){
if (str.length==0){
	document.getElementById("txtHint").innerHTML="";
	return;
	}
if (window.XMLHttpRequest){
	xmlhttp=new XMLHttpRequest();
	}
	else{
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}

xmlhttp.onreadystatechange=function(){
	if (xmlhttp.readyState==4 && xmlhttp.status==200){
		document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
		}
	}

xmlhttp.open("GET","getName.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
				<label>Search by name: </label>
					<input type="text" id="txt1" class="input" onkeyup="showHint(this.value)" />
	<br />
	<p>Suggestions: <span id="txtHint"></span></p>
	<br />

But if I want to do mulitple I have tried changing it to:
Code:

<script type="text/javascript">
function showHint(File,ID){
if (str.length==0){
	document.getElementById(ID).innerHTML="";
	return;
	}
if (window.XMLHttpRequest){
	xmlhttp=new XMLHttpRequest();
	}
	else{
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}

xmlhttp.onreadystatechange=function(){
	if (xmlhttp.readyState==4 && xmlhttp.status==200){
		document.getElementById(ID).innerHTML=xmlhttp.responseText;
		}
	}

xmlhttp.open("GET",File,true);
xmlhttp.send();
}
</script>
</head>
<body>
				<label>Search by firstname: </label>
					<input type="text" id="txt1" class="input" onkeyup="showHint('GetFirstName.php?q='+str,'txtHint')" />
	<br />
	<p>Suggestions: <span id="txtHint"></span></p>
	<br />				<label>Search by surname: </label>
					<input type="text" id="txt1" class="input" onkeyup="showHint('getLastName.php?q='+str,'txtHintSn')" />
	<br />
	<p>Suggestions: <span id="txtHintSn"></span></p>
	<br />

The above doesn't work and I am not sure what do about the showHint(str) as clearly I am not representing it properly in my attempt to modify the script.

Auto-adjusting Menu Image Based On Browser Size Possible With Js?

Similar Tutorials

View Content

I'm still struggling for a solution here. I have a background image that auto-resizes based on browser window / screen resolution. I want my top header menu, which requires links, to act in the same way and be in roughly the same position/size based on browser window. Is this possible? In the sample below, the image is just part of the background image to give you an idea of the look I am trying to duplicate.

Is there a Javascript out there that will help me or will I be stuck having to rework my design?

http://www.uberbotjones.com/sanny/test.html

This site is really driving me crazy.

Sending Data From Iframe To Iframe (cross Domain

Similar Tutorials

View Content

Hi there everybody,
I've got this problem which I can't solve myself...

I've got a website which has 3 colums and is hosted on domain1.com. in the right column I've got an Iframe which loads content from domain2.com . this content are some textboxes and a datepicker tool. if I press the 'search'-button in this Iframe I would like to refresh the mainpage (from domain1.com) so that another Iframe appears in the middle column. in this column i would like to load a new form from domain2.com which contains the values that I've put in in the form from the right Iframe.

Unfortunally I can't get this to work... Will somebody please help me?

Hidden Iframe => Redirect To => Full Screen Iframe?

Similar Tutorials

View Content

Hi all,

I hope you can help

I have some code which:

1) Opens a URL (e.g. google.com) in a hidden iframe, then
2) Redirects the visitor to a different URL (e.g. yahoo.com) after it has loaded...

This works exactly as I need.

What I'd like to do is the following:

1) Open a URL (e.g. google.com) in a hidden iframe, then
2) Redirect the visitor to a different URL (e.g. yahoo.com) in a full-screen iframe
3) The address bar of the full-screen iframe should be my domain (obviously!)

Here's what I have so far...

Hidden iframe -> New URL Code:

Code:

<html>
<body>
	<script type="text/javascript">

		var page_body = document.getElementsByTagName('body');
		var myframe = document.createElement('iframe');
		var id = Math.random();
		myframe.setAttribute('id', 'myFrame'+id);
		myframe.src = 'http://google.com';  //First open Google in hidden iframe 
		myframe.setAttribute('frameborder', '0')
		myframe.setAttribute('width', '0');
		myframe.setAttribute('height', '0');
		if (myframe.attachEvent)
			{
				myframe.attachEvent('onload', function()
					{
						top.location = 'http://yahoo.com';  //Once loaded redirect to Yahoo -- but the address bar shows yahoo.com -- I want the address bar to display mydomain.com/page.html 
					});
					}
		else if (myframe.addEventListener)
			{
				myframe.addEventListener('load', function()
					{
						top.location = ('http://yahoo.com');
					}, false);
					}
		page_body[0].appendChild(myframe);

	</script>
</body>
</html>

I have an example of some code which displays the full screen iframe, but my problem is...

...I can't figure out how to redirect to this after the hidden iframe has loaded

Here's an example of how I want the redirect to display -- after the initial hidden iframe has loaded:

Code:

<html>
<head>
	<script type="text/javascript">
 		function sendParams() {
 			document.body.style.overflow = "hidden";
 		}
	</script>
</head>
<body>
	 <!--Open Yahoo.com in a full screen iframe, and disable extra scrollbar --> 
	<iframe height="100%" width="100%" frameBorder="no" onload="sendParams()" src="http://yahoo.com"></iframe>
</body>
</html>

I've been beating my head against the wall today trying to figure this out, and I'm fresh out of ideas.

If you can help, you'll have some serious gratitude and good karma thrown your way!

Best wishes, and thanks in advance,
Paul

Resize Iframe Depending On The Height Of The Iframe Contents

Similar Tutorials

View Content

Is there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really.

Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with.
We have a central area which can be longer or shorter depending on the forum.

Parent Iframe Loads With Child Iframe

Similar Tutorials

View Content

I have used iframes for my site and found various javascripts so when a person clicks on say the audio page he http://www.krillmeed.com/index.html
it takes them to the audio page but will load it into the index.html page. The problem is, especially with search engines, to point to that page, this is what the URL looks like to send someone to that page:
http://www.krillmeed.com/?frame=0&sr...m%2Faudio.html
which is not very clean at all, this is the javascript that i found that at least works:

Child iframe script:

Code:

<script type="text/javascript">
(function(){
	var qstr = '?frame=0&src=' + encodeURIComponent(location.href),
	lre = new RegExp('^' + location.protocol + '//' + location.hostname + '(()|(/)|(/index.html)|(/index.php))(()|(\\' + qstr + '))$');
	if (!lre.test(parent.location.href)){
		top.location.href = '/' + qstr;
	}
})();
</script>

Parent iframe Script:

Code:

<script type="text/javascript">
(function(){
	function getQval(n) {
		if(typeof n !== 'string'){
			return null;
		}
		var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
		return (m = r.exec(m))? unescape(m[1]) : null;
	}
	var f = getQval('frame'), s = getQval('src');
	if(f && frames[f] && s && s.indexOf(location.protocol + '//' + location.hostname + '/') === 0){
		frames[f].location.href = s;
	}
})();
</script>

Is there a "cleaner" way of doing this? This was an old code, i have yet to find a more modern one. Thank you in advance.

How To Resize An Iframe From The Page In The Iframe?

Similar Tutorials

View Content

Hi,

Not sure if I worded that question right. I have a web page which will display another web page in an iframe. But the content inside the iframe may change while the user interacts with it so I need to be able to resize the iframe height from code on the page inside the iframe. Any tips on how I can do that? I am using php and javascript. Thanks.

How To Detect Iframe Size Change Or Get Current Size Of Iframe

Similar Tutorials

View Content

I have an iframe that is a specific height and width. I want to detect whenever the the iframe is no longer exactly the height i set it to. If a user has CSS turned off for example the iframe will be in default height and width. I want to detect that.

This is how you'd normally do it but this only returns the original size (try with 'no style' in Firefox):

Code:

function getSize()
{
alert('height is now '+document.getElementById("Iframemain").height)
alert('height is now '+document.getElementById("Iframemain").width)
}

Is it possible?

Iframe Buster...buster! (disable Iframe Parent Redirection)

Similar Tutorials

View Content

Hello to all and thanks in advance for my help. I know this has been posted in different places on the web but I have found no solid solution. Here is my problem:

I have an iframe the loads up a page on a remote server (out of my hands) and when I send certain information to it, the page redirects my entire site to their 404 page. I need to prevent this from happening so I engaged in much research and found this... temporary fix:

Code:

<script>
// No redirection! 
var prevent_bust = 0  
window.onbeforeunload = function() { prevent_bust++ }  
setInterval(function() {  
  if (prevent_bust > 0) {  
    prevent_bust -= 2
    window.top.location = 'http://www.mysite.com/my404.html'
  }  
}, 1)
</script>

What this code does, is that every time the unload of a page happens, it will redirect me to my404.html and this does solve the problem of the iframe trying to redirect my entire site but anytime a user tried to go to a new website by typing it in the address bar, they are redirected to my404.html.

Is there another solution for me so that the page within the iframe cannot redirect the parent page?

Accessing One Iframe Id From Another Iframe

Similar Tutorials

View Content

Hello....

I've 2 iframes. And i want to change the css class of second iframe anchor tag from the first.
Code:

 <div id="top-navigation" title="top-navi">
        <ul><li id="homePageLink" class="first">
                  <a  id="homePageTab"  class="navigation-font" href="</a>
              </li>
        </ul>
  </div>

In the above code how can i change the class="navigation-font" from the first iframe?

Please help....

Reload Iframe From Another Iframe

Similar Tutorials

View Content

Hi

I have a page with 3 iFrames, showing different content.

iFrame1: Here is a navigation php page. Click on a menu item and it loads a php page in iFrame2
iFrame2: Here is a list of items from a database.
iFrame3: I load 3 different php pages here. (A) is the main showing page. (B) and (C) is a record manipulation page, that does some editing in the database and then redirects to (A).

When the (A) php page loads, it should reload iFrame2

I have tried to put something like:
<body onLoad=parent.location.reload()>
and put it on the (A) php page.

This will reload the entire page, which works. However, it results in a loop of reloads, as the (A) iFrame file will load with the entire page reload...

So, I was looking for the right code to put, like onLoad=iFrame2.location.reload()

However, I can't seem to find the correct code, so I hope any of you can help me...