Doctype/Javascript/Cross-browser help, Web Development: Sagefix Boards

Current Location : Home > Web Development > JavaScript > Doctype/Javascript/Cross-browser help

Main Menu

SageFix - Let's Fix

Board Categories

Web Site Designing

Graphics

Web Development

.NET

-	Classic ASP

-	JavaScript

PHP

WebSite Management

-	Promotion Techniques

-	Search Engine Optimization

Databases

MySQL

Tutorials

Database Connection Strings

Contact Us

1 - 5 of 5 [Total 1 Pages]

Doctype/Javascript/Cross-browser help Jul 16, 2009, 03:46

I got some Javascript code, which doesn't work with the doctype that makes the rest of my site work (XHTML-transitional). In fact, it doesn't work with any doctype, unless if I put it in like this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

That's the only way to get that code to work. If I make it XHTML, for example, it'll stop working already. If I fill it in like this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

it'll stop working in Firefox, but still works in IE.

The thing is, with that working doctype declaration, the positioning of everything else's ****ed. Width's different between IE and Firefox then.

This is the code that requires the change in doctype:

JavaScript Code:

$pics = "SELECT id, link FROM pics WHERE project_id = " . $project->id;
    $pics = mysql_query($pics);
 
    echo '<div class="project_contents">
        <div class="main_pic">
            <img src="pics/pic01.png" alt="Thumb" id="main_pic" />
        </div>
 
        <div id="links" onmouseover="tijd';
        echo " = setInterval('NaarLinks()',10);";
        echo '" onmouseout="clearInterval(tijd);"></div>    
        <div id="rechts" onmouseover="tijd =';
        echo " setInterval('NaarRechts()',10);";
        echo '" onmouseout="clearInterval(tijd);"></div>        
 
        <div id="thumbs_cont">
            <div id="thumbs_schuif">';
            
        while (list($id, $link) = mysql_fetch_array($pics)) {
                echo '<div class="thumb"><a onclick="';
                echo "set_pic('" . $link . "')";
                echo '"><img src="photos/thumbs/' . $link . '" /></a></div>';
        }
        echo '<div class="clearer"></div>
            </div>
        </div>
 
    </div>';
?>
    <script type="text/javascript">
        links.style.left = thumbs_cont.style.left;
        rechts.style.left = thumbs_cont.offsetLeft + thumbs_cont.clientWidth  - rechts.

	Jul 16, 2009, 10:15	2
	One thing to try is to give the elements both id and name attributes. Also, it might work better if you use "document" eg. JavaScript Code: document.links.style.left = document.thumbs_cont.style.left;

	Jul 16, 2009, 12:41	3
	One thing that could cause you problems is that document.links is predefined in JavaScript to be an array of all the link tags in the page.

Jul 16, 2009, 12:57

Woops, nasty little thing I didn't notice. Still doesn't work with that, though. Code's this now:

JavaScript Code:

$pics = "SELECT id, link FROM pics WHERE project_id = " . $project->id;
    $pics = mysql_query($pics);
 
    echo '<div class="project_contents" id="contents">
        <div class="main_pic" id="div_main">
            <img src="pics/pic01.png" alt="Thumb" id="main_pic" />
        </div>
 
        <div id="links" onmouseover="tijd';
        echo " = setInterval('NaarLinks()',10);";
        echo '" onmouseout="clearInterval(tijd);"></div>    
        <div id="rechts" onmouseover="tijd =';
        echo " setInterval('NaarRechts()',10);";
        echo '" onmouseout="clearInterval(tijd);"></div>        
 
        <div id="thumbs_cont">
            <div id="thumbs_schuif">';
            
        while (list($id, $link) = mysql_fetch_array($pics)) {
                echo '<div class="thumb" id="' . $id . '"><a onclick="';
                echo "set_pic('" . $link . "')";
                echo '"><img src="photos/thumbs/' . $link . '" /></a></div>';
        }
        echo '<div class="clearer" id="clear"></div>
            </div>
        </div>
 
    </div>';
?>
    <script type="text/javascript">
        document.getElementById("links").style.left = document.getElementById("thumbs_cont").style.left;
        document.getElementById("rechts").style.left = document.getElementById("thumbs_cont").offsetLeft + document.getElementById("thumbs_cont").clientWidth  - document.getElementById("rechts").clientWidth;
        
        var stap = document.getElementById("thumbs_schuif"

Jul 16, 2009, 13:25

Quote:

One thing that could cause you problems is that document.links is predefined in JavaScript to be an array of all the link tags in the page.

I changed those to "linkerkant" now, but the problem still exists. There's something wrong with the positioning of those elements, as the set_pic() function works, but the NaarLinks and NaarRechts ones don't with a decent doctype set (in Firefox, they do in IE)

1 - 5 of 5 [Total 1 Pages]