Member Avatar for RazorRamon

Ok this is as basic a jquery coding as you can get.. Why does div id=tx show on load??? I'm testing this on wamp localhost...www folder. Any help?? Is there anything i need to do to save the ? is in the same folder as this page.

<html>
<head>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$('#tx')hide();
	});
	</script>
</head>
<body>

<div id="tx">
fjdskla
</div>



</body>
</html>
  • 3 Contributors
  • 2 Replies
  • 206 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by Member #905211

Dani AI

Generated

Quick diagnosis: the page is showing the div because a JavaScript syntax error prevents your script from running. As noted, the selector/method call in the snippet is malformed so execution stops and the element stays visible. That explains the behaviour even when jQuery is included.

Practical checklist to fix and harden the page:

  • Fix the syntax error so the jQuery call actually runs.
  • Open the browser console (F12) and look for errors; a syntax error or "jQuery is not defined" will be obvious there.
  • Verify the jQuery file actually loads from the path in your script tag (use the Network tab: it should return 200). If you serve the page via WAMP, open it as ... not file://.
  • If you want the element hidden immediately (so it never flashes before JS runs), hide it with CSS and reveal it with JS once everything is ready — this avoids a FOUC (flash of un-styled content), which is what was warning about.

Small snippets you can use to verify and implement these quickly:

if (typeof jQuery === 'undefined') {
  console.error('jQuery not found — check script src and that the file loads over http');
} else {
  console.log('jQuery version:', jQuery.fn.jquery);
}

A CSS-based approach to prevent flashing:

.hidden { display: none; }
<div id="tx" class="hidden">...</div>
document.getElementById('tx').classList.remove('hidden');

Final notes: keep the script include path correct (or use a CDN copy of jQuery), place your script just before </body> to avoid needing ready wrappers, and always check the console for the first clue. Fix the small syntax mistake first — everything else is straightforward after that.

Recommended Answers

All 2 Replies

Member Avatar for MartinRinehart

1) Move your script from the <head> to the bottom of the <body>. Then you won't need '$(...).ready'. See Souders book High Performance Web Sites if you need more reasons.

2) Don't use jQuery if you don't have to. Hiding/showing a div is simply a matter of switching it's 'display' style between 'block' and 'none'. Write yourself a little function if you'll do this often:

var tx_div = document.getElementById( 'tx' );
hide( tx_div );

function hide( div ) { div.style.display = 'none'; }

3) If you want the div hidden initially, use a stylesheet or an inline style:

<div id="tx" style="display: none">
Member Avatar for Member #905211

You are missing a dot.

$('#tx').hide();
        ^

Hopefully the arrow lined up properly.

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.