Having issue with template switcher

JavaScript
1

Hi all.

I am a jquery newbie and trying to make a template switcher function.

Here is what i have so far:http://www.sumsy.com/testing/

If I click on “login page” or “member page” first, and then click on “Template 1” or “Template 2”, it wont work.

IE gave me “permission denied” js error. FF didnt give me error, but nothing happened.

Is it because after we click on the login or member page, the DOM elements has changed, so it doesnt work?

Please shred some light.

Thanks in advanced.


$(document).ready(function(){

	var templateframe = $('#templateframe').contents();

		noclick();
	
		$("#templateselect li a").click(function() { 
		var style = $(this).attr('rel');					  
									  
		templateframe.find('link').eq(0).attr("href", "styles/" + style + "/_css/main.css");
		alert(templateframe.find('link').eq(0).attr("href"));
		return false;
	});
	
		$("#pagenav li a").click(function() { 
		var page = $(this).attr('rel');					  
									  
		$('#templateframe').attr("src", "template/" + page + ".html");
		noclick();
		return false;
	});

	
	
		$('#applybtn').click(function(event) {
			var title = $('#sitetitle').val();

			if(title.length > 0){
	 			templateframe.find('.content h1').html(title);
			}
			
			
			event.preventDefault();

		});
		
function noclick(){
	
	    $('#templateframe').load(function(){
        //$('#templateframe').contents().find('.content h1').html('Hey, i`ve changed content of <body>! Yay!!!');
		$('#templateframe').contents().find('a').click(function(event) {

			alert("Demo Only");
			event.preventDefault();

		});
	    });	
	
	}
	
	
});
2 
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="utf-8">   
    <style>
        html body{width:100%;height:100%;padding:0px;margin:0px;overflow:hidden;font-family:arial;font-size:10px;color:#6e6e6e;background-color:#000}
        #header-bar{height:40px;background-color:#000;border-bottom:1px solid #191919;z-index:100;line-height:40px;margin-bottom:1px;padding-left:20px;}
        #preview-frame{width:100%;background-color:#fff}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script>!window.jQuery &amp;&amp; document.write('<script src="js/jquery-1.4.4.min.js"><\\/script>')</script>
    <script type="text/javascript">
    var calcHeight = function() {
        var headerDimensions = $('#header-bar').height();
        $('#preview-frame').height($(window).height() - headerDimensions);
    }
    $(function() {
        calcHeight();
        var iframe = $('#preview-frame'),
        selector = $("#switcher"),
        state,
        selected = state;
        selector.change(function(e){
            state = $(this).val();
            iframe.attr('src', state);
            e.preventDefault();
        });
        $("#refresh").click(function(e) {
                iframe.attr({
                    src: state
            });
            e.preventDefault();
        });
    });
    $(window).resize(function() {
        calcHeight();
    }).load(function() {
        calcHeight();
    });
    </script>
</head>
<body>
    <div id="header-bar">    
        <div class="switcher">
            <select name="switcher" id="switcher">
                <option value="page.html">Page</option>
                <option value="another-page.html">Another page</option>
            </select>
            <button type="button" id="refresh">Refresh</button>
        </div>
    </div>
    <iframe id="preview-frame" src="homepage.php" name="preview-frame" frameborder="0" noresize="noresize"></iframe>
</body>
</html>

change: page.html, another-page.html, homepage.php with your page