JavaScript - Table Disappears When Javascript Bookmark Code Removed

worked it out

We have an html page which brings in content dynmically using Ajax. So the page starts out with certain content, and when a particular link is clicked, the content is swapped out with new content. With this approach, the back button on the browser does not work, because the URL didn't actually change. How could a user bookmark the new page with the second set of content? Is this even possible?

Hi...

I am having a problem with the resize...

I use the script below to adjust the size of the frame. It works nicely for me. The only problem is, the frame initially jumps to the bookmark, and then on the reload, jumps to the top of the page.

Any ideas on how to keep the frame at the bookmark in the web page, instead of jumping back up to the top????

Thanks much in advance....

<script>
<!--
function resize_iframe(){
if ( window.frames["MainWindow"].document.body.scrollHeight=0 )
{
}
else
{
document.getElementById("MainWindow").height=100
document.getElementById('MainWindow').height=window.frames["MainWindow"].document.body.scrollHeight + 20
}
}
// -->
</script>



<IFRAME src="main.htm" frameborder="0" scrolling="no" ID=MainWindow NAME=MainWindow HEIGHT=800 WIDTH=1012 onLoad=resize_iframe();></IFRAME>

Hello folks,
I want to have a combobox with bookmark options. After you select a value from this combobox you can bookmark it with a push button. This should popup a bookmark dialog from the browser bookmark dialog. Can anybody help me?

Lets say we have 3 options in the value's. Google, Yahoo, Bing
When you select Google and you push Place bookmark you should get a browser bookmark dialog with a title "Google search site". The url would be just http://www.google.com/

I also want Yahoo with the url http://www.yahoo.com/ and the bookmark title Search at Yahoo! and Bing with the url http://www.bing.com and the title Search at Bing

I'm looking already for a while for this. Can anybody help me?

Thanks in advance!

grid

Hi

just wondering if someone could check my code. I have a flash document that is referenced in index.html file below. I want to create book marks to specific pages of the flash file. My code below opens it up at the first page but I want it to open at page 5. Any help would be appreciated?

Code:

<script language="javaScript">

function loadPage($page) {

    var load = window.open('/resources/default/html/Mag/index.html?page='+$page,'','scrollbars=no,menubar=no,height=800,width=1280,resizable=no,toolbar=no,location=no,status=no');

}

</script> 




  <LI><A   href="javascript:loadPage(5)">Face to face1</A></LI>

Hello,

I've searched high and low for some decent code that will allow a visitor to a website to bookmark the site through a hyperlink. The bookmarking is done through a javascript function that looks like this:

Code:

function OnBookmarkButtonClick (e)
{
    if (window.sidebar)
    { // Mozilla Firefox Bookmark
	    window.sidebar.addPanel("TimeSheet", window.document.location,"");	
	}
	else if (window.external)
	{ // IE Favorite	
	    window.external.AddFavorite( window.document.location, "TimeSheet");
	}
}

I need to add some detection for Opera, Safari, and Chrome. Please note that it must be feature detection, not browser detection. But as I said, I've searched high and low for this, and couldn't find anything.

Help is much appreciated.

My issue is that I have a javascript function applied on page load via an addLoadEvent function call in the head to every row (dynamic number of records retrieved) on a table. On every row of the table I also have an element (image or button) that performs a different function that is assigned on the element itself. Unfortunately, when I click the element it also performs the function that was applied to the row in the page load. Is there any way to not call this function on element click? I know usually you include code, but due to the nature of the work I am limited in that respect. Basically its:

Code:

<script type="text/javascript">
  addLoadEvent(function() { function1(1); })
  //function1 makes the table rows do something appearance wise.
</script>

<tr>
  <td></td>
  <td></td>
  <td>
    <img src="pics/delete.png" alt="Delete" onclick="function2();">
  </td>
</tr>

I apologize if my post doesn't conform to the general guidelines of proper posting on this board. I'm new on this site.

Hello everyone! I'm a student and am trying to write some very simple code. My problem is I use innerHTML in my script file to send some text to a div in my html. When it's sent it renders and then quickly disappears. I've attached my code. Any help is dearly appreciated.

There are two separate "files" .html & .js:
Code:

<?xml version = "1/0" encoding = "utf-8"?>
<!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.xhtm">
	<head>
		<!--  -->
		<!-- CS111 Quiz -->
		<title>CS111 Quiz</title>
		<script text = "text/javascript" src = "script.js">
		</script>
	</head>
	<body>
		<h1 align="center">Mike Overholt</h1>
		<br/>
		<br/>
		<form id="answers" name="answers" onSubmit="return quiz();">
			<table width="100%">
				<tr>
					<td align="center"><h3>1. What is 1+1?</h3></td>
					<td align="center"><h3>2. What is 2+2?</h3></td>
					<td align="center"><h3>3. What is 3+3?</h3></td>
				</tr>
				<tr>
					<td align="center">
						<input type="text" id="1" name="answer1" value=" " align="center"/>
					</td>
					<td align="center">
						<input type="text" id="2" name="answer2" value=" " align="center"/>
					</td>
					<td align="center">
						<input type="text" id="3" name="answer3" value=" " align="center"/>
					</td>
				</tr>
				<tr>
					<td align="center">
					</td>
					<td align="center">
						<input type="submit" id="submit" name="submit" value="submit" onClick="quiz();" align="center"/>
					</td>
					<td align="center">
					</td>
				</tr>
			</table>
		</form>
		<div id="div1" align="center" name="answer_box" style="border:2px; border-color:gray; border-style:solid; width:50%; margin-left:auto; margin-right:auto; height:200px;">
			<p id="p1"></p><br/>
			<p id="p2"></p><br/>
			<p id="p3"></p>
			<!--<script>alert(1);</script>-->
		</div>
	</body>	
</html>




//script.js
//Mike Overholt
//Quiz 1
function quiz()
	{
	var i=1;
	var ans=new Array();
	ans[1]=2;
	ans[2]=4;
	ans[3]=6;
	for(i=1;i<ans.length;i++)
		{
		var a=document.getElementById("p"+i);
		if(document.getElementById(i).value==ans[i])
			{
			a.innerHTML="You answered number "+i+" correctly!";
			}
		else
			{
			alert("You answered number "+i+" incorrectly, please try again.");
			}
		}
	}

Would anyone know why (and the fix) when I place my cursor over the scrolling thumbnails under the main slideshow rotator on my site they "disappear"?

http://americanwebmakers.com/demo_college

Thanks in advance!

Here's a noodle-scratcher:

I have a jwplayer in my page, and I've placed a short text describing it underneath it. Works fine in FF and Chrome, but in IE the text vanishes after you click the "Allow blocked content" permissions to allow activex controls.

This is what it looks like:
Code:

<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='450' height='277' 
id='single1' name='single1'><param name='movie' value='jwplayer/player.swf'><param name=
'allowfullscreen' value='false'><param name='allowscriptaccess' value='always'><param name=
'wmode' value='transparent'><param name='flashvars' value='file=myVideo.f4v&autostart=true'>
<embed  id='single2'  name='single2'  src='jwplayer/player.swf'  width='450'  height='277'
allowscriptaccess='always'  allowfullscreen='false'  flashvars='myVideo.f4v
&autostart=truevolume=50'/>
<br/>
Here is my description text.<br/>

If I place the text above the object, then it shows up fine. I'd rather not put it there, but I can if I can't figure the problem out.

Any thoughts? Why is IE destroying my text?

Thanks as always,
~gyz

Hi,

After much searching and head-scratching (JS is not my forte!), I adapted some code to do what I want - well, almost! So here I am back again. I need to have three divs on a page, with each separate div changing onClick. Below is the code so far.
Two problems:
1) when I open it in a browser window both divs show, then the one disappears when I click on the second div leaving only the numbers. How can I change it so that both divs remain open?

2) Instead of the numbers [1], [2], etc. to change the divs, I'd like to have to just click on one single 'click here for more' to display the next div then return to the first after the last one. Can this be integrated or is it too late?

Thank you!


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>
		<title>Switching Divs</title>
		
		<style>
		
#one {width: 500px; height: 100 px; border: 1px solid red; }
#two {width: 500px; height: 100px; border: 1px solid blue; }
#three {width: 500px; height: 100px; border: 1px solid purple; }
#four {width: 500px; height: 100px; border: 1px solid green; }

#five {width: 500px; height: 100 px; border: 1px solid red; }
#six {width: 500px; height: 100px; border: 1px solid blue; }
#seven {width: 500px; height: 100px; border: 1px solid purple; }
#eight {width: 500px; height: 100px; border: 1px solid green; }

#propertyfrance {float: left; color: #666666; font-family: tahoma arial, verdana, sans-serif; font-size: 11px; }

.propertytext {float: left; clear: right; width: 300px; height: 100px; border: 1px solid #000; }

.propertyphoto {float: left; width 200px; height: 100px; border: 1px solid #cceeff; text-align: center; }

#image-switch #one {
padding:0px;
}
#image-switch #two, #image-switch #three, #image-switch #four {
display:none;
}

#image-switch #five {
padding: 0px; }
#image-switch #six, #image-switch #seven, #image-switch #eight {
display:none;
}

</style>

<script type="text/javascript">
function switch1(div) {
if (document.getElementById('one')) {
var option=['one','two','three','four', 'five', 'six', 'seven', 'eight'];
for(var i=0; i<option.length; i++) 
{ obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div)? "block" : "none"; }
}
}

</script>

	</head>
	
	
	<body>

<h4>Switching divs (javascript)</h4>

<div id="image-switch">

<br>OnClick
<br>

<div id="one">
<div class="propertytext">We'll get some text in here for property 1</div>
<div class="propertyphoto"><img src="property1.jpg" height="100" width="180" alt="Property 1"></div>
</div>

<div id="two">
<div class="propertytext">We'll get some text in here for property 2</div>
<div class="propertyphoto"><img src="property2.jpg" height="100" width="180" alt="Property 2"></div>
</div>

<div id="three">
<div class="propertytext">We'll get some text in here for property 3</div>
<div class="propertyphoto"><img src="property3.jpg" height="100" width="180" alt="Property 3"></div>
</div>


<div id="four">
<div class="propertytext">We'll get some text in here for property 4</div>
<div class="propertyphoto"><img src="property4.jpg" height="100" width="180" alt="Property 4"></div>
</div>

<br>
<a onClick="switch1('one');"> [1]</a> 
<a onClick="switch1('two');"> [2]</a>
<a onClick="switch1('three');"> [3]</a>
<a onClick="switch1('four');">  [4]</a>
<br><br>

<div id="five">
<div class="propertytext">We'll get some text in here for property 5</div>
<div class="propertyphoto"><img src="property5.jpg" height="100" width="180" alt="Property 5"></div>
</div>

<div id="six">
<div class="propertytext">We'll get some text in here for property 6</div>
<div class="propertyphoto"><img src="property6.jpg" height="100" width="180" alt="Property 6"></div>
</div>

<div id="seven">
<div class="propertytext">We'll get some text in here for property 7</div>
<div class="propertyphoto"><img src="property7.jpg" height="100" width="180" alt="Property 7"></div>
</div>

<div id="eight">
<div class="propertytext">We'll get some text in here for property 8</div>
<div class="propertyphoto"><img src="property6.jpg" height="100" width="180" alt="Property 8"></div>
</div>

<br>
<a onClick="switch1('five');"> [5] </a>
<a onClick="switch1('six');"> [6] </a>
<a onClick="switch1('seven');"> [7] </a>
<a onClick="switch1('eight');"> [8] </a>

</div>

	</body>
</html>

So it took me forever but I finally found a floating menu that works with a horizontally scrolling page - but of course, there's still a little bug. View the page he
http://uconn.kappaphilambda.org/sisters.shtml

As you can see, the more you scroll right, the more the menu "compacts" itself, eventually disappearing altogether. Any ideas as to how to fix it?

You can view the code & script codes by viewing the source of the page.

Thanks in advance :]

Hi,

I have existing code that works in IE6 but not in IE8.
My jsp page has a table on it and every record in that table has a link displayed as short string.
Once you click on the link, the popup is displayed. The problem happens when the table has many records, the page becomes scrollable.
So if you click on eg. first 10 links you can see the popup, but further down you go, the popup moves down as well and it finally disappears from the screen.
It is still there just not visible. In IE6 it also moves but it stops at the bottom of the screen.

The code that is used for displaying popup:
var iGlobalPopup = window.createPopup();

//if this is for IE
if (isIEBrowser()) {
// Create the popup window
var lPopupDocument = iGlobalPopup.document;

// Create the html outline for the popup window
var lHtml = "<html><head>" +
"<div class='descTitle'>" + aTitle + "</div>" +
lSpan.innerHTML + "</div>" +
"</body></html>";

// Write the html to the popup window
lPopupDocument.open( "text/html", "replace" );
lPopupDocument.write( lHtml );
lPopupDocument.close();

var lXPos = window.event.x;
var lYPos = window.event.y;

// Show the window
iGlobalPopup.show(lXPos, lYPos, 400, 200, document.body);

What can I do to keep the popup visible on the screen?

Any help greatly appreciated.

Hello,

On some pc's in IE my website shows disbehaviour with the popup-menu. When your mousepointer hoovers over the transparent border, the popupmenu disappears. Please check http://www.exintec.nl/test. Perhaps if you visit the website with Internet Explorer you can see what I mean, but it might be showing good as well.

The menu is made with very little javascript and mainly CSS. I discovered the begin of the cause: when I don't use a transparent color for the border, it works fine. Also when I remove the underlying image (the sky-image) and still use transparent color it also works fine. How can this be? Using Z-index for the popup-window/menu and give it a real high number won't work. I really don't see it. Ofcourse I want to keep using the transparent color and the underlying image.

-------------------
Source code HTML:
---------------------
<ul id="menu">
<li onmouseover="toonPopUpMenu1()" onmouse-out="verwijderPopUpMenu1()"><a href="index.html" class="selected">OVER E<font co-lor="#548DD4">X</font>INTEC</a></li>
<li onmouseover="toonPopUpMenu2()" onmouse-out="verwijderPopUpMenu2()"><a href="afdelingen.html">DIENSTEN</a></li>
<li onmouseover="toonPopUpMenu3()" onmouse-out="verwijderPopUpMenu3()"><a href="waterstof_injectie.html">PROJECTEN</a></li>
<li><a href="werkwijze.html">WERKWIJZE</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>

<ul id="popupmenu1" onmouseover="toonPopUpMenu1()" onmouse-out="verwijderPopUpMenu1()">
<li><a href="index.html" class="selected">Bedrijf</a></li>
<li><a href="visie.html">Visie</a></li>
<li><a href="missie.html">Missie</a></li>
</ul>

-----------
CSS-code
-----------
#popupmenu1 {
position: absolute;
top: 25px;
left: 141px;
color: #FFFFFF;
display: none;
}

#popupmenu1 li {
border-bottom: solid transparent 4px;
list-style-type: none;
}

#popupmenu1 li a {

padding-left: 4px;
padding-right: 0px;
padding-bottom: 1px;
padding-top: 1px;
background-color: #000000;
display: block;
width: 155px;
height: 20px;
text-decoration: none;
text-align: left;
font-weight: 400;
color: #FFFFFF;
line-height: 20px;
}

#popupmenu1 li a.selected {
font-weight: 900;
}

#popupmenu1 li a:hover {
font-weight: 900;
color: #FFFFFF;
}

-----------------
JS:
-----------------
function toonPopUpMenu1() {
var PopUpVenster=document.getElementById('popupmenu1');
PopUpVenster.style.display = 'block';
}

function verwijderPopUpMenu1() {
var PopUpVenster=document.getElementById('popupmenu1');
PopUpVenster.style.display = 'none';
}

I have a map with hotspots, and when you hover over a hot spot, a hidden DIV appears. Thanks to my favorite coding forum, this one, I was able to successfully accomplish this first bit of code. The only problem I'm having now is getting the DIV to remain open while I move my mouse from the hotspot to the DIV. As soon as I move my mouse away from the hotspot, the DIV disappears. I need to put links in the DIVs, and users will need to be able to move their mouse away from the hotspot to click on the link, but currently can't.

I experimented with setTimeout, but didn't get too far. If anyone could help me, I'd appreciate it. I really need to get this working.

Code:

<img src="images/map.png" alt="" usemap="#map"/>
			
<map id="map" name="map">
<area shape="rect" coords="211,84,225,97" href="#" alt=""/>
<area shape="rect" coords="226,78,240,92" href="#" alt=""/>
<area shape="rect" coords="353,66,376,89" href="#" alt=""/>
</map>

<div id="hidden">
	<div class="location" style="left:25px; top:-290px;">
		<img src="images/location01.jpg" alt=""/>
	</div>
				
	<div class="location" style="left:25px; top:-275px;">				
		<img src="images/location02.jpg" alt=""/>
	</div>

	<div class="location" style="left:275px; top:-285px;">
		<img src="images/location03.jpg" alt=""/>
	</div>
</div> <!-- #hidden -->

Code:

function show(which) {
	var area = document.getElementById("map").getElementsByTagName("area");
	var locations = document.getElementById("hidden").getElementsByTagName("div");

	for (var a=0; a < area.length; ++a) {
		if(area[a] == which) locations[a].style.display="block";
		}
	}
					
function hide() {
	var locations = document.getElementById("hidden").getElementsByTagName("div");

	for (var d=0; d < locations.length; ++d) {
		locations[d].style.display="none";
		}
	}
					
function init() {
	var area = document.getElementById("map").getElementsByTagName("area");

	for (var a=0; a < area.length; ++a) {
		area[a].onmouseover = function() { show(this); }
		area[a].onmouseout = hide;
		}
	}

window.onload = init;