SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    having issue with template switcher

    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.

    Code:
    $(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. #2
    SitePoint Member ciamis's Avatar
    Join Date
    May 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool

    HTML Code:
    <!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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •