Member Avatar for QWaz

Hi,
I'm a real javascript newbie, good with php.

I am trying to utilize onmouseover, and onmouseout with div's and text.

the goal is: when you hover over some text in a <div> it displays other text and then if you hover off it, it keeps the text there. It's exactly like the home page for mint.com if thats helps explain it.

Not sure how to write the function that shows one div when another is hovered.

What I have got to so far is:

function toggle(id,id){
    d=document.getElementById(id);
    d.innerHTML=document.getElementById(id);
}


<a href="" onmouseover="toggle('thetext1','thetext')" onmouseout="toggle('thetext1','thetext1')">Hover Here</a>

<div id="thetext">
Text in here with other divs to style it. 
</div> 

<div id="thetext1">
Text in here with other divs to style it.
</div>

Not sure if I am close or way off.
Thanks for you help.

Cheers,

Qwaz

  • 3 Contributors
  • 2 Replies
  • 285 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by Airshow

Dani AI

Generated

A simple, robust pattern is to update a single preview area on the first hover (or keyboard focus) and not change it on mouseout. That gives the "hover to change, keep the change" behavior described by without needing an onmouseout reversal. Inline handlers can work, but the duplicate-parameter bug pointed out is a real syntax problem; the wrapper show/hide idea from is a good model for organizing content. A cleaner, unobtrusive approach is to store the preview text on each trigger element (data attributes), listen for enter/focus events, and write that content into a dedicated preview region.

Keep these points in mind: use textContent for plain text and innerHTML only for trusted markup; add keyboard support (focus) so the feature is accessible; place the script after the DOM or run on DOMContentLoaded; and prevent default link navigation if anchors use href="#".

Example (minimal, unobtrusive, persistent preview):

<!-- HTML -->
<nav id="menu">
  <a href="#" data-preview="Preview for item 1">Item 1</a>
  <a href="#" data-preview="Preview for item 2">Item 2</a>
  <a href="#" data-preview="Preview for item 3">Item 3</a>
</nav>

<div id="preview" role="region" aria-live="polite">Default content</div>

<!-- JS (run after DOM ready) -->
<script>
document.addEventListener('DOMContentLoaded', function () {
  var menu = document.getElementById('menu');
  var preview = document.getElementById('preview');

  // mouseover with delegation keeps last hovered content (no mouseout reversal)
  menu.addEventListener('mouseover', function (e) {
    var a = e.target.closest && e.target.closest('a[data-preview]');
    if (a && menu.contains(a)) preview.innerHTML = a.getAttribute('data-preview');
  });

  // keyboard support
  Array.prototype.forEach.call(menu.querySelectorAll('a[data-preview]'), function (a) {
    a.addEventListener('focus', function () { preview.innerHTML = this.getAttribute('data-preview'); });
    a.addEventListener('click', function (ev) { ev.preventDefault(); });
  });
});
</script>

Troubleshooting: if nothing changes, confirm element IDs/selectors, ensure the script runs after the HTML, and check that data-preview content is present. For untrusted content, sanitize before assigning to innerHTML or use textContent.

Recommended Answers

All 2 Replies

Member Avatar for Taywin

Qwaz:

The way you implement javascript argument is ambiguous. You must not have the same argument name, or the script will not know which argument you are calling. In this case, you have 2 of id arguments in your function definition.

Do the div 'thetext' and 'thetext1' have their own style with text inside? Or only text inside has its own style? You could, however, utilize CSS to it instead. One way to do it is to hide all your contents you want to select for display inside a hidden div. Then, you use the toggle to replace innerHTML to whatever you want including the style of it. An example is below.

// CSS part
<style type="text/css">
div.style1 {
  /* add your style here */
}
div.style2 {
  /* add your style here */
}
div.noShow {
  display: none;
  visibility: hidden;
}
</style>

// JavaScript part
<script type="text/javascript">
function toggle(aTag, divId) {
  var el = document.getElementById(divId)
  if (el) {  // element exist
    aTag.innerHTML = el.innerHTML
    aTag.className = el.className
  }
}
</script>

// HTML part
<a href="" onmouseover="toggle(this, 'thetext1')" onmouseout="toggle(this, 'thetext2')">Hover Here</a>
<div class="noShow">
  <div id="thetext1" class="style1">
  Content of text 1
  </div>
  <div id="thetext2" class="style2">
  content of text 2
  </div>
</div>

Normally, I would not do it this way. Because the text display is a constant (never change), I usually pass text to the function right away. However, in your case, it looks like you want to have different style on the text. This could also achieve by using span tag, and then the code would be a bit different.

Edited by Taywin because: n/a
Member Avatar for Airshow

QWaz,

Something like this maybe:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
#explainWrapper {
	width: 300px;
	height: 60px;
	padding: 2px;
	border: 2px solid #336699;
}
.explain {
	display: none;
	font-family: verdana;
	font-size: 10pt;
}
.explain h2 {
	margin: 0;
	background-color: #336699;
	color:#fff;
	text-align:center;
	font-size: 14pt;
}
.explain p {
	margin : 3px;
}
ul.horiz {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
ul.horiz li {
	display: inline;
	padding-right: 2px;
}
ul.horiz li a {
}
ul.horiz li a {
	text-decoration: none;
	padding: 0 15px;
	color: #ccddff;
	background-color: #336699;
	font-family: verdana;
	font-size: 10pt;
}
ul.horiz li a:hover {
	color: #fff;
}
</style>

<script>
function show(id){
	var wrapper = document.getElementById('explainWrapper');
	if(wrapper) {
		var items = wrapper.getElementsByTagName('div');
		for(var i=0; i<items.length; i++) {
			items[i].style.display = (items[i].id === id) ? 'block' : 'none';
		}
	}
}

onload = function(){
	show('explain1');
}
</script>
</head>

<body>

<div id="explainWrapper">
	<div class="explain" id="explain1"><h2>Title 1</h2><p>Text 1 Text 1 Text 1 Text 1 Text 1.</p></div>
	<div class="explain" id="explain2"><h2>Title 2</h2><p>Text 2 Text 2 Text 2 Text 2 Text 2.</p></div>
	<div class="explain" id="explain3"><h2>Title 3</h2><p>Text 3 Text 3 Text 3 Text 3 Text 3.</p></div>
</div>

<ul class="horiz">
	<li class="first"><a href="" onmouseover="show('explain1')" onclick="return false">Item 1</a>
	<li><a href="" onmouseover="show('explain2')" onclick="return false">Item 2</a>
	<li><a href="" onmouseover="show('explain3')" onclick="return false">Item 3</a>
</ul>


</body>
</html>

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.