Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    413
    Thanks
    17
    Thanked 2 Times in 2 Posts

    experience using jquery.address.1.5 ?

    I'm trying to incorporate a script to make jquery pages crawlable, but the script is quite a bit over my head!

    Here's the basic function I have at the moment:
    Code:
    $("#top_nav li a, #footer_info").on("click", function(e){
    	
    				// prevent the a href from doing what it naturally does.
    				e.preventDefault();
    
    				// highlight active nav link & turn off others				
    				$('.current').attr('class','link1');
    				
    				
    				
    				// set the hashtag in url
    				window.location.hash = $(this).attr('name');
    				
    				// which page chosen?
    				var loadpage = 'inc/'+$(this).attr('name')+'.php';
    				var footer = 'inc/footer.php';
    				
    				// fade out the main box	
    
    								
    				if(loadpage == "inc/index.php"){
    					
    					$('#main_center_box,.header_content').css({opacity:1}).stop().animate({ opacity: 0 }, 700, function() { /* animation complete */ });
    					$('#starting_point, .places-slideshow,#full-size-background').css({display:"block"}).stop().animate({ opacity: 1 }, 1400, function() { /* animation complete */ });
    					$('#main_center_box').css({zIndex:"-1"});
    					$("#starting_point_link").attr('class','');
    				 
    				} else {
    					$('#main_center_box,#footer_links').stop().animate({ opacity: 0, zIndex:0 }, 700, function() { 
    						$(this).attr('class','current');
    						// now load the page that matches navigation selected
    						$('#main_center_box').css({zIndex:1 }).load(loadpage).stop().animate({ opacity: 1}, 700, function() { /* animation complete */ });
    						$('html,body').scrollTop(0);
    					});
    				}
    	});
    right now, I just have a simple jquery script that fades out the box, loads content and fades it back in. I want to keep that visual transition, but
    my head spins a little when I look at the address script. Also, it seems to be for loading xml. I want to load in php files. How do I include this scripting, into my page?

    The sample page:
    Code:
    <?php
        
        class Crawling {
           
            const fragment = '_escaped_fragment_';
            
            function Crawling(){
    
                // Initializes the fragment value
                $fragment = (!isset($_REQUEST[self::fragment]) || $_REQUEST[self::fragment] == '') ? '/' : $_REQUEST[self::fragment];
             
                // Parses parameters if any
                $this->parameters = array();
                $arr = explode('?', $fragment);
                if (count($arr) > 1) {
                    parse_str($arr[1], $this->parameters);
                }
            
                // Adds support for both /name and /?page=name
                if (isset($this->parameters['page'])) {
                    $this->page = '/?page=' . $this->parameters['page'];
                } else {
                    $this->page = $arr[0];
                }
                
                // Loads the data file
                $this->doc = new DOMDocument();
                $this->doc->load('data.xml');
                $this->xp = new DOMXPath($this->doc);
                $this->nodes = $this->xp->query('/data/page');
                $this->node = $this->xp->query('/data/page[@href="' . $this->page . '"]')->item(0);
                
                if (!isset($this->node)) {
                    header("HTTP/1.0 404 Not Found");
                }
            }
            
            function base() {
                $arr = explode('?', $_SERVER['REQUEST_URI']);
                return $arr[0] != '/' ? preg_replace('/\/$/', '', $arr[0]) : $arr[0];
            }
            
            function title() {
                if (isset($this->node)) {
                    $title = $this->node->getAttribute('title');
                } else {
                    $title = 'Page not found';
                }
                echo($title);
            }
            
            function nav() {
                $str = '';
                
                // Prepares the navigation links
                foreach ($this->nodes as $node) {
                    $href = $node->getAttribute('href');
                    $title = $node->getAttribute('title');
                    $str .= '<li><a href="' . $this->base() . ($href == '/' ? '' : '?' . self::fragment . '=' . urlencode(html_entity_decode($href))) . '"'
                        . ($this->page == $href ? ' class="selected"' : '') . '>'
                        . $title . '</a></li>';
                }
                echo($str);
            }
        
            function content() {
                $str = '';
                
                // Prepares the content with support for a simple "More..." link
                if (isset($this->node)) {
                    foreach ($this->node->childNodes as $node) {
                        if (!isset($this->parameters['more']) && $node->nodeType == XML_COMMENT_NODE && $node->nodeValue == ' page break ') {
                            $str .= '<p><a href="' . $this->page .
                                (count($this->parameters) == 0 ? '?' : '&') . 'more=true' . '">More...</a></p>';
                            break;
                        } else {
                            $str .= $this->doc->saveXML($node);
                        }
                    }
                } else {
                    $str .= '<p>Page not found.</p>';
                }
                
                echo(preg_replace_callback('/href="(\/[^"]+|\/)"/', array(get_class($this), 'callback'), $str));
            }
            
            private function callback($m) {
             return 'href="' . ($m[1] == '/' ? $this->base() : ($this->base() . '?' . self::fragment . '=' . urlencode($m[1]))) . '"';
            }
        }
        
        $crawling = new Crawling();
    
    ?>
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="fragment" content="!">
    <title><?php $crawling->title(); ?> | jQuery Address Crawling</title>
    <link type="text/css" href="css/styles_defaultxxx.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-2.0.0.js"></script>
    <script type="text/javascript" src="js/jquery.address-1.5.min.js"></script>
    <script type="text/javascript">
    $.address.crawlable(true).init(function(event) {
    
    // Initializes plugin support for links
    $('a:not([href^=http])').address();
    
    // Adds a simple hover effect
    $('.nav a').hover(function() {
    $(this).addClass('hover');
    }, function() {
    $(this).removeClass('hover');
    });
    
    }).change(function(event) {
    
    // Identifies the page selection
    var page = event.parameters.page ? '/?page=' + event.parameters.page : event.path;
    
    // Highlights the selected link
    $('.nav a').each(function() {
    if ($(this).attr('href') == (page == '/' ? '#' : '#!' + page)) {
    $(this).addClass('selected').focus();
    } else {
    $(this).removeClass('selected');
    }
    });
    
    var handler = function(data) {
    $('.content').html($('.content', data).html()).parent().show();
    $.address.title(/>([^<]*)<\/title/.exec(data)[1]);
    };
    
    // Loads the page content and inserts it into the content area
    $.ajax({
    url: location.pathname + '?<?php echo(Crawling::fragment); ?>=' + encodeURIComponent(event.value),
    error: function(XMLHttpRequest, textStatus, errorThrown) {
    handler(XMLHttpRequest.responseText);
    },
    success: function(data, textStatus, XMLHttpRequest) {
    handler(data);
    }
    });
    
    });
    // Hides the page during initialization
    document.write('<style type="text/css"> .page { display: none; } </style>');
    </script>
    </head>
    <body>
    <div class="page">
    <h1>jQuery Address Crawling</h1>
    <ul class="nav"><?php $crawling->nav(); ?></ul>
    <div class="content"><?php $crawling->content(); ?></div>
    </div>
    </body>
    </html>

    Here's my page:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="css/styles_default.css" type="text/css" media="screen"/>
    <script type="text/javascript" language="javascript" src="js/jquery-2.0.0.js"></script>
    </head>
    
    <body>
    
    	 
    	 <?php include 'inc/header.php'; ?>
    	 <!-- below is the navigation, pulled out of the header include for this posting -->
    	 
    	<ul id="top_nav">
    			<span id="header_left">
    			<li class="nav_item logo_li">
    				<a id="home" class="logo" href="index.php" name="index">
    					<img src="images/logo.png">
    				</a>
    			</li>
    			</span>
    			
    			<span id="header_right">
    			<li class="nav_item">
    				 <a  id="index" class="link1" href="#" name="index" rel="address:/home">Back to home</a>
    			</li>			
    			
    			<li class="nav_separator"> / </li>	
    				
    			<li class="nav_item">
    				<a id="now_releasing" class="link1" href="#" name="now_releasing" rel="address:/now_releasing">
    				NOW RELEASING
    				</a>
    			</li>
    			
    			<li class="nav_separator"> / </li>	
    				
    			<li class="nav_item">
    				<a id="portfolio" class="link1" href="#"  name="portfolio" rel="address:/portfolio">
    				PORTFOLIO
    				</a>
    			</li>
    			
    			<li class="nav_separator"> / </li>	
    			
    			<li class="nav_item">
    				<a id="strategy" class="link1" href="#" name="strategy" rel="address:/strategy">
    				STRATEGY
    				</a>
    			</li>
    			
    			<li class="nav_separator"> / </li>	
    			
    			<li class="nav_item">
    				<a id="contact" class="link1" href="#" name="contact" rel="address:/contact">
    				CONTACT
    				</a>
    			</li>
    		
    			</span>
    						
    	</ul>
    
    
    	 <div id="main_center_box" class="">
           <!-- here's where content will load -->		
    
    		<?php include 'inc/footer.php'; ?>
    	</div>
    	<script type="text/javascript" language="javascript" src="js/functions.js"></script>
    		
    			
    </body>
    </html>
    Last edited by turpentyne; 05-24-2013 at 04:04 PM.


 

Posting Permissions

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