Member Avatar for alipica

I have no clue why this is happening. When I load a certain page on my site, my content loads twice. Basically, my content appears to flash once.

I can't figure out what's going on, but it seems to deal with the following code. The page calls urlCheck().

// display correct content
function chooseContent(num) {
	highlightButtons(num);
	obj = document.getElementById('portSample' + num);
	obj.style.display = 'block';
}

// highlight the correct buttons relating to content.
function highlightButtons(num) {	
		obj = eval('document.port' + num);
		obj.src = portThumbActive[num-1];
		obj.name = ('active');
		
		obj = eval('document.nav' + num);
		obj.src = navActive[num-1];
		obj.name = ('active');
}
function urlCheck() {
	// store url in a string
	url = window.location.href;
	
	// check url for #1, #2 etc
	for (var c=1; c<= portThumb.length; c++) {
		hashNum = url.search('#' + c);
		if (hashNum != -1) {
			obj =  document.getElementById('port' + c);
			strName = obj.name;
			
			// if correct content is already displayed, don't reload it.
			if (strName.search('active') == -1) {
				chooseContent(c);
			}
		}
	}
}

Let me know if you want more info. If a link to the page would be useful let me know.

  • 3 Contributors
  • 6 Replies
  • 2K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by alipica

Dani AI

Generated

What you are seeing is not a real reload. Hyphenator walks the DOM after the page loads, injects soft hyphens, and briefly toggles visibility on the elements it is processing. That redraw can look like a flash or a second load, which matches what noticed across browsers. Two quick ways to make it stop:

  • Scope or exclude hyphenation. By default Hyphenator targets elements with the class "hyphenate" and skips anything marked "donthyphenate". Put your portfolio container outside Hyphenator’s reach, or only add "hyphenate" to long-text areas (e.g., article copy), not the whole page or dynamic panels.

Example:

<div id="portfolio" class="donthyphenate"> ... </div>

This uses Hyphenator’s built-in exclusion class so the portfolio section will not be hidden/redrawn during hyphenation. (hwk-rhein-main.de)

  • Defer your init until hyphenation finishes. If you must keep Hyphenator on the page, run your hash logic only after hyphenation completes:
Hyphenator.config({
  onhyphenationdonecallback: function () {
    // safe place to call urlCheck() or chooseContent(...)
  }
});

The library exposes onhyphenationdonecallback for exactly this case. (hwk-rhein-main.de)

A couple of hardening tips building on ’s debugging idea: make urlCheck idempotent (bail if the requested item is already active), and avoid eval when grabbing elements; prefer document.getElementById or document.images['port' + n] to prevent side effects.

Longer-term: modern browsers support CSS hyphenation without JS. If you do not need client-side hyphenation here, you can usually drop the script and rely on:

.hyphenate { hyphens: auto; }

Make sure the text has a correct lang attribute for the hyphenation dictionary to kick in. (developer.mozilla.org)

References: Hyphenator’s element selection, exclusion class, intermediate visibility toggle, and completion callback are documented in its configuration/merge tool and README. (hwk-rhein-main.de)

Recommended Answers

All 6 Replies

Member Avatar for vsmash

the url of the page would be helpful

Member Avatar for alipica

Okay. Here is the url:

When I click from my homepage to the portfolio page is when it loads the content twice. Let me know if you need more info. I still have no clue what's happening! I've googled everything I could think of...

Member Avatar for alipica

I forgot to mention that I haven't started testing my site in other browsers yet. I've been working in FF.

Member Avatar for Airshow

When I click from my homepage to the portfolio page is when it loads the content twice. Let me know if you need more info. I still have no clue what's happening! I've googled everything I could think of...

Hard to say why it does that double load thing. I see it in IE too so it's not just FF.

I would suspect hypehenator. Try commenting out the line Hyphenator.run(); and see if it still misbehaves.

Airshow

Member Avatar for vsmash

There's some javascript error when you click the portfolio link.
Stick this on your page, it might help:

function globalError() {
            var foo="\r\n" + arguments[0] + " in " + arguments[1] + " at line " + arguments[2];      
			alert(foo);
        }
        window.onerror = globalError;
Member Avatar for alipica

Thank you guys! It seems to be the hyphenator script. I don't even need that script for the portfolio page, so it's not a problem to relocate the function call.

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.