SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 28
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2014
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript and Jquery compatibility issues

    Hi! I have a Jquery slider plugin on my website called Nivo-Slider. I'm having two separate issues with it and I was hoping to get help with both or just one of them.

    First, the slider doesn't load at all on IE 8 or 9. I believe the problem arises from having another plugin that handles my navigation. When I delete the navigation plugin, the slider loads. This doesn't happen on IE11, chrome or Firefox. With these browsers both plugins load together with no problem.

    The other problem I have is similar. On another page, I have a map plugin called maplace. The plugin will not load on any browser in the presence of Nivo Slider. When I get rid of the slider the maps show up just fine.

    So in summary, I have two different pages. On one of them, the slider doesn't load for IE8 and IE9. On the other page, the maps plugin doesn't load (for any browser) when the slider is there.

    Here is the code for my Nivo Slider plugin:

    Code:
    <script type="text/javascript">
    	$(function() {
    $('#slider').nivoSlider({directionNav: false, controlNav: false, controlNavThumbs: false});});
    </script>
    Here is the HTML markup:

    Code:
    <div id="wrapper">
    <div class="slider-wrapper theme-default">
                <div id="slider" class="nivoSlider">
                    <img src="images/slide-1.png"  />
                    <img src="images/slide-2.png"  />
                   
                </div>
       </div>
    Here is the navigation plugin that conflicts on IE8 and IE9:

    Code:
    <script type="text/javascript">
    
    /***********************************************
    * Dynamic Ajax Content-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
    var loadedobjects=""
    var rootdomain="http://"+window.location.hostname
    var bustcacheparameter=""
    
    function ajaxpage(url, containerid){
    var page_request = false
    if (window.XMLHttpRequest) // if Mozilla, Safari etc
    page_request = new XMLHttpRequest()
    else if (window.ActiveXObject){ // if IE
    try {
    page_request = new ActiveXObject("Msxml2.XMLHTTP")
    } 
    catch (e){
    try{
    page_request = new ActiveXObject("Microsoft.XMLHTTP")
    }
    catch (e){}
    }
    }
    else
    return false
    page_request.onreadystatechange=function(){
    loadpage(page_request, containerid)
    }
    if (bustcachevar) //if bust caching of external page
    bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
    page_request.open('GET', url+bustcacheparameter, true)
    page_request.send(null)
    }
    
    function loadpage(page_request, containerid){
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
    document.getElementById(containerid).innerHTML=page_request.responseText
    }
    
    function loadobjs(){
    if (!document.getElementById)
    return
    for (i=0; i<arguments.length; i++){
    var file=arguments[i]
    var fileref=""
    if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
    if (file.indexOf(".js")!=-1){ //If object is a js file
    fileref=document.createElement('script')
    fileref.setAttribute("type","text/javascript");
    fileref.setAttribute("src", file);
    }
    else if (file.indexOf(".css")!=-1){ //If object is a css file
    fileref=document.createElement("link")
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", file);
    }
    }
    if (fileref!=""){
    document.getElementsByTagName("head").item(0).appendChild(fileref)
    loadedobjects+=file+" " //Remember this object as being already added to page
    }
    }
    }
    
    </script>
    And here is the html markup for it:

    Code:
    <ul id="menu" >
    <li><a href="javascript:ajaxpage('home.html', 'contentarea');" class="home"></a></li>
        <li><a href="javascript:ajaxpage('aboutus.html', 'contentarea');" class="aboutus"></a></li>
        <li><a href="javascript:ajaxpage('newcustomer.html', 'contentarea');" class="newcustomer"></a></li>
        <li><a href="javascript:ajaxpage('electronicordering.html', 'contentarea');" class="electronicordering"></a></li>
        <li><a href="javascript:ajaxpage('links.html', 'contentarea');" class="links"></a></li>
        <li><a href="javascript:ajaxpage('forms.html', 'contentarea');" class="forms"></a></li>
        <li><a href="javascript:ajaxpage('contactus.html', 'contentarea');" class="contactus"></a></li>
    </ul>

    Lastly, here is the code for maps plugin:

    Code:
    <script type="text/javascript">
                new Maplace({
                    locations: [
                        {
                            lat: 33.8583,
                            lon: -117.8678,
                            title: 'Anaheim',
                            html: [
                                '<h3>Anaheim</h3>',
                                '<p>1361 N RedGum St, Anaheim CA 92806<br>(714) 630-5954</p>'
                            ].join(''),
                            zoom: 8
                        },
                        {
                            lat: 34.2358,
                            lon: -118.5739,
                            title: 'Chatsworth',
                            html: [
                                '<h3>Chatsworth</h3>',
                                '<p>20233 Corisco St, Chatsworth CA 91311<br>(818) 998-3001</p>'
                            ].join(''),
                            zoom: 8
                        },
    					{
                            lat: 32.8142,
                            lon: -117.1247,
                            title: 'San Diego',
                            html: [
                                '<h3>San Diego</h3>',
                                '<p>4000 Ruffin Road Suite K, San Diego CA 92123<br>(858) 292-1622</p>'
                            ].join(''),
                            zoom: 8
                        }
    					,
    					{
                          	lat: 34.9137,
                            lon: -120.4632,
                            title: 'Santa Maria',
                            html: [
                                '<h3>Santa Maria</h3>',
                                '<p>1459 W. Fairway Dr., Santa Maria CA 93455<br>(805) 922-4445</p>'
                            ].join(''),
                            zoom: 8
                        }
    					,
    					{
                            lat: 34.5011,
                            lon: -117.3279,
                            title: 'Victorville',
                            html: [
                                '<h3>Victorville</h3>',
                                '<p>15400-B Tamarack Road, Victorville CA 92392<br>(760) 243-5666</p>'
                            ].join(''),
                            zoom: 8
                        }
    					,
    					{
                            lat: 36.1605,
                            lon: -115.1050,
                            title: 'Las Vegas',
                            html: [
                                '<h3>Las Vegas</h3>',
                                '<p>3101 Builders Ave., Las Vegas, NV 89101<br>(702) 452-2440</p>'
                            ].join(''),
                            zoom: 8
                        }
    					,
    					{
                            lat: 33.1677,
                            lon: -117.2202,
                            title: 'Vista',
                            html: [
                                '<h3>Vista</h3>',
                                '<p>2055 Thibodo Rd, Vista CA 92081<br>(760) 599-0791</p>'
                            ].join(''),
                            zoom: 8
                        }
    					,
    					{
                            lat: 33.6224,
                            lon: -117.7194,
                            title: 'Laguna Hills',
                            html: [
                                '<h3>Laguna Hills</h3>',
                                '<p>23561 Ridge Route Suite P, Laguna Hills CA 92653<br>(949) 699-3308</p>'
                            ].join(''),
                            zoom: 8
                        }
    					,
    					{
                            lat: 34.4245,
                            lon: -118.4998,
                            title: 'Santa Clarita',
                            html: [
                                '<h3>Santa Clarita</h3>',
                                '<p>26846 Oak Ave Unit R, Santa Clarita CA 91315<br>(661) 424-9396</p>'
                            ].join(''),
                            zoom: 8
                        }
                    ],
                   map_div: '#gmap-list',
    			   controls_type: 'list',
    			controls_title: 'Choose a location:'
                }).Load();
            </script>
    And here is its HTML markup:

    Code:
    <div id="gmap-dropdown"></div>
    <div id="gmap-list" class="gmap"></div>

    I recognize this is probably a lot of code to look at, but I have been pulling my hair for days with this one. Any feedback would be appreciated. Let me know if you need more info.

    Thanks!

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Would it be possible for you to provide a link to a page where we can see these problems?

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2014
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi! Thanks for your reply. You can go here to look at the page. Let me know if you need any more info.

    Melissa

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Sorry it took me a while to get back to you.

    When I go to the page you link to and inspect the source code I see:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Cal State Auto Parts - Serving Our Customers Since 1971</title>
    <link href="csap.css" rel="stylesheet" type="text/css" />
    
    </head>
    
    <body class="body" align="center" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
    
    <div id="container">
    <!--header begins here-->
    <div id="header"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false&amp;libraries=geometry&amp;v=3.7"></script>
    
    <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
    <script src="maplace.min.js"></script>
    
    <script type="text/javascript">
    	$(function() {
    $('#slider').nivoSlider({directionNav: false, controlNav: false, controlNavThumbs: false});});
    </script>
    You should only have one doctype declaration per page.
    If you are using AJAX to fetch content, then you should make sure that the pages that are being fetched just contain the relevant HTML, not extra doctypes and <body> elements.

    I don't have IE to test on (running Linux), but I could imagine that this is the sort of thing that would cause it to fall over and die.

    HTH

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2014
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did what you told me and I cleaned up the code. Still, the maplace script is not getting loaded by Ajax, only outside of it.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    No you didn't

    When I go to the page you link to and view the source, I see:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Cal State Auto Parts - Serving Our Customers Since 1971</title>
    <link href="csap.css" rel="stylesheet" type="text/css" />
    
    </head>
    
    <body class="body" align="center" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
    
    <div id="container">
    <!--header begins here-->
    <div id="header"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    ...

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2014
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Woops! My bad. I didn't upload my changes to the live site. Check now http://calstateautoparts.com/beta

    Thanks!

  8. #8
    SitePoint Enthusiast
    Join Date
    Mar 2014
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I figured it out. Instead of using the Dynamic Ajax script I used Jquery to load the maps into place. Now I have a bunch of positioning issues but everything is loading correctly.

    http://calstateautoparts.com/beta

    Thanks for your help!

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Excellent!
    That would have been my next suggestion
    Thanks for taking the time to let us know what worked.

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    I had another look at this page and noticed that the url doesn't change when you add the new content via AJAX.

    E.g.
    home: http://calstateautoparts.com/beta
    about: http://calstateautoparts.com/beta
    contact: http://calstateautoparts.com/beta

    Don't you think that might be a bit problematic for your users?
    For example what if someone wanted to link to a specific page in your site?

  11. #11
    SitePoint Enthusiast
    Join Date
    Mar 2014
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was wondering the same thing. I know there is some way I can modify my jquery function to load content and update the url at the same time... Do you happen to know what that is? I would also like for it to load home.html by default...

    Thank you for the observation.

    Code:
    jQuery(function($){
    	function drawmap(){
    		new Maplace({
    	                locations: [
    	                    {
    	                        lat: 33.8583,
    	                        lon: -117.8678,
    	                        title: 'Anaheim',
    	                        html: [
    	                            '<h3>Anaheim</h3>',
    	                            '<p>1361 N RedGum St, Anaheim CA 92806<br>(714) 630-5954</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    },
    	                    {
    	                        lat: 34.2358,
    	                        lon: -118.5739,
    	                        title: 'Chatsworth',
    	                        html: [
    	                            '<h3>Chatsworth</h3>',
    	                            '<p>20233 Corisco St, Chatsworth CA 91311<br>(818) 998-3001</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    },
    						{
    	                        lat: 32.8142,
    	                        lon: -117.1247,
    	                        title: 'San Diego',
    	                        html: [
    	                            '<h3>San Diego</h3>',
    	                            '<p>4000 Ruffin Road Suite K, San Diego CA 92123<br>(858) 292-1622</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                      	lat: 34.9137,
    	                        lon: -120.4632,
    	                        title: 'Santa Maria',
    	                        html: [
    	                            '<h3>Santa Maria</h3>',
    	                            '<p>1459 W. Fairway Dr., Santa Maria CA 93455<br>(805) 922-4445</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                        lat: 34.5011,
    	                        lon: -117.3279,
    	                        title: 'Victorville',
    	                        html: [
    	                            '<h3>Victorville</h3>',
    	                            '<p>15400-B Tamarack Road, Victorville CA 92392<br>(760) 243-5666</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                        lat: 36.1605,
    	                        lon: -115.1050,
    	                        title: 'Las Vegas',
    	                        html: [
    	                            '<h3>Las Vegas</h3>',
    	                            '<p>3101 Builders Ave., Las Vegas, NV 89101<br>(702) 452-2440</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                        lat: 33.1677,
    	                        lon: -117.2202,
    	                        title: 'Vista',
    	                        html: [
    	                            '<h3>Vista</h3>',
    	                            '<p>2055 Thibodo Rd, Vista CA 92081<br>(760) 599-0791</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                        lat: 33.6224,
    	                        lon: -117.7194,
    	                        title: 'Laguna Hills',
    	                        html: [
    	                            '<h3>Laguna Hills</h3>',
    	                            '<p>23561 Ridge Route Suite P, Laguna Hills CA 92653<br>(949) 699-3308</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                        lat: 34.4245,
    	                        lon: -118.4998,
    	                        title: 'Santa Clarita',
    	                        html: [
    	                            '<h3>Santa Clarita</h3>',
    	                            '<p>26846 Oak Ave Unit R, Santa Clarita CA 91315<br>(661) 424-9396</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    	                ],
    	               map_div: '#gmap-list',
    				   controls_type: 'list',
    				controls_title: 'Choose a location:'
    	            }).Load();
    	}
    	$('.menuitem').click(function(e){
    		$('#contentarea').load(this.href, $(this).data('loadfunc') || null);
    		e.preventDefault();
    	});
    	$('#contactus').data({loadfunc: drawmap});
    });
            </script>

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    My first idea would be to use a hash.
    This would give you urls like:

    home: http://calstateautoparts.com/beta
    about: http://calstateautoparts.com/beta/#about
    contact: http://calstateautoparts.com/beta/#contact

    Would that be acceptable?

  13. #13
    SitePoint Enthusiast
    Join Date
    Mar 2014
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes! How do I implement it on my code?

    Thank you

  14. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Well, the jQuery's .load() takes a callback function as a second parameter, which is executed after post-processing and HTML insertion has been performed.
    You can change the url from within this callback.

    Code:
    $('.menuitem').click(function(e){
      $('#contentarea').load(this.href, function(){
        location.hash=this.id;
      });
      e.preventDefault();
    });
    Then when the page loads:

    Code:
    var hash = location.hash;
    if(hash){
      $(hash).trigger("click");
    }
    will ensure that the correct content is loaded if a hash is present at the end of the url.

    This relies on the hash being the same as the menu item's id.

  15. #15
    SitePoint Enthusiast
    Join Date
    Mar 2014
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for the dumb question, but what do you mean by
    the hash being the same as the menu item's id.
    I made the changes and the url only shows #contentarea at the end... What am I missing?

    Also, the map is not loading anymore. Do I need to change that code as well?

    My code looks like this now

    Code:
    <script type="text/javascript">
    jQuery(function($){
    	function drawmap(){
    		new Maplace({
    	                locations: [
    	                    {
    	                        lat: 33.8583,
    	                        lon: -117.8678,
    	                        title: 'Anaheim',
    	                        html: [
    	                            '<h3>Anaheim</h3>',
    	                            '<p>1361 N RedGum St, Anaheim CA 92806<br>(714) 630-5954</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    },
    	                    {
    	                        lat: 34.2358,
    	                        lon: -118.5739,
    	                        title: 'Chatsworth',
    	                        html: [
    	                            '<h3>Chatsworth</h3>',
    	                            '<p>20233 Corisco St, Chatsworth CA 91311<br>(818) 998-3001</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    },
    						{
    	                        lat: 32.8142,
    	                        lon: -117.1247,
    	                        title: 'San Diego',
    	                        html: [
    	                            '<h3>San Diego</h3>',
    	                            '<p>4000 Ruffin Road Suite K, San Diego CA 92123<br>(858) 292-1622</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                      	lat: 34.9137,
    	                        lon: -120.4632,
    	                        title: 'Santa Maria',
    	                        html: [
    	                            '<h3>Santa Maria</h3>',
    	                            '<p>1459 W. Fairway Dr., Santa Maria CA 93455<br>(805) 922-4445</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                        lat: 34.5011,
    	                        lon: -117.3279,
    	                        title: 'Victorville',
    	                        html: [
    	                            '<h3>Victorville</h3>',
    	                            '<p>15400-B Tamarack Road, Victorville CA 92392<br>(760) 243-5666</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                        lat: 36.1605,
    	                        lon: -115.1050,
    	                        title: 'Las Vegas',
    	                        html: [
    	                            '<h3>Las Vegas</h3>',
    	                            '<p>3101 Builders Ave., Las Vegas, NV 89101<br>(702) 452-2440</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                        lat: 33.1677,
    	                        lon: -117.2202,
    	                        title: 'Vista',
    	                        html: [
    	                            '<h3>Vista</h3>',
    	                            '<p>2055 Thibodo Rd, Vista CA 92081<br>(760) 599-0791</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                        lat: 33.6224,
    	                        lon: -117.7194,
    	                        title: 'Laguna Hills',
    	                        html: [
    	                            '<h3>Laguna Hills</h3>',
    	                            '<p>23561 Ridge Route Suite P, Laguna Hills CA 92653<br>(949) 699-3308</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                        lat: 34.4245,
    	                        lon: -118.4998,
    	                        title: 'Santa Clarita',
    	                        html: [
    	                            '<h3>Santa Clarita</h3>',
    	                            '<p>26846 Oak Ave Unit R, Santa Clarita CA 91315<br>(661) 424-9396</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    	                ],
    	               map_div: '#gmap-list',
    				   controls_type: 'list',
    				controls_title: 'Choose a location:'
    	            }).Load();
    	}
    	var hash = location.hash;
    if(hash){
      $(hash).trigger("click");
    }
    	/*$('.menuitem').click(function(e){
    		$('#contentarea').load(this.href, $(this).data('loadfunc') || null);
    		e.preventDefault();
    	});*/
    	
    	$('.menuitem').click(function(e){
      $('#contentarea').load(this.href, function(){
        location.hash=this.id;
      });
      e.preventDefault();
    });
    	$('#contactus').data({loadfunc: drawmap});
    });
            </script>
    Thank you!

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Yeah, that code wasn't tested.

    Here's some that is:

    Make a template (index.html):

    Code:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
      </head>
      <body>
        <h1>My site</h1>
        <nav>
          <a href="#home">Home</a>  |  
          <a href="#about">About</a>  |  
          <a href="#contact">Contact</a>
        </nav>
    
        <div id="contentArea"></div>
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>
          $("a").on("click", function(e){
            var page = this.href.replace("#", "") + ".html",
                hash = $(this).prop("hash");
    
            $('#contentArea').load(page, function(){
              location.hash = hash;
            });
    
            e.preventDefault();
          });
    
          $("a[href='#home']").trigger("click");
        </script>
      </body>
    </html>
    Make the content:

    home.html:

    Code:
    <p>Home</p>
    about.html:

    Code:
    <p>About</p>
    contact.html:

    Code:
    <p>Contact</p>
    Here's a demo.

    HTH

  17. #17
    SitePoint Enthusiast
    Join Date
    Mar 2014
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So do I just add your code to my function like this?

    Code:
    jQuery(function($){
    	function drawmap(){
    		new Maplace({
    	                locations: [
    	                    {
    	                        lat: 33.8583,
    	                        lon: -117.8678,
    	                        title: 'Anaheim',
    	                        html: [
    	                            '<h3>Anaheim</h3>',
    	                            '<p>1361 N RedGum St, Anaheim CA 92806<br>(714) 630-5954</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    },
    	                    {
    	                        lat: 34.2358,
    	                        lon: -118.5739,
    	                        title: 'Chatsworth',
    	                        html: [
    	                            '<h3>Chatsworth</h3>',
    	                            '<p>20233 Corisco St, Chatsworth CA 91311<br>(818) 998-3001</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    },
    						{
    	                        lat: 32.8142,
    	                        lon: -117.1247,
    	                        title: 'San Diego',
    	                        html: [
    	                            '<h3>San Diego</h3>',
    	                            '<p>4000 Ruffin Road Suite K, San Diego CA 92123<br>(858) 292-1622</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                      	lat: 34.9137,
    	                        lon: -120.4632,
    	                        title: 'Santa Maria',
    	                        html: [
    	                            '<h3>Santa Maria</h3>',
    	                            '<p>1459 W. Fairway Dr., Santa Maria CA 93455<br>(805) 922-4445</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                        lat: 34.5011,
    	                        lon: -117.3279,
    	                        title: 'Victorville',
    	                        html: [
    	                            '<h3>Victorville</h3>',
    	                            '<p>15400-B Tamarack Road, Victorville CA 92392<br>(760) 243-5666</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                        lat: 36.1605,
    	                        lon: -115.1050,
    	                        title: 'Las Vegas',
    	                        html: [
    	                            '<h3>Las Vegas</h3>',
    	                            '<p>3101 Builders Ave., Las Vegas, NV 89101<br>(702) 452-2440</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                        lat: 33.1677,
    	                        lon: -117.2202,
    	                        title: 'Vista',
    	                        html: [
    	                            '<h3>Vista</h3>',
    	                            '<p>2055 Thibodo Rd, Vista CA 92081<br>(760) 599-0791</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                        lat: 33.6224,
    	                        lon: -117.7194,
    	                        title: 'Laguna Hills',
    	                        html: [
    	                            '<h3>Laguna Hills</h3>',
    	                            '<p>23561 Ridge Route Suite P, Laguna Hills CA 92653<br>(949) 699-3308</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                        lat: 34.4245,
    	                        lon: -118.4998,
    	                        title: 'Santa Clarita',
    	                        html: [
    	                            '<h3>Santa Clarita</h3>',
    	                            '<p>26846 Oak Ave Unit R, Santa Clarita CA 91315<br>(661) 424-9396</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    	                ],
    	               map_div: '#gmap-list',
    				   controls_type: 'list',
    				controls_title: 'Choose a location:'
    	            }).Load();
    	}
    	/*$('.menuitem').click(function(e){
    		$('#contentarea').load(this.href, $(this).data('loadfunc') || null);
    		e.preventDefault();
    	});*/
    	$("a").on("click", function(e){
            var page = this.href.replace("#", "") + ".html",
                hash = $(this).prop("hash");
    
            $('#contentArea').load(page, function(){
              location.hash = hash;
            });
    
            e.preventDefault();
          });
    
          $("a[href='#home']").trigger("click");
    	$('#contactus').data({loadfunc: drawmap});
    });
            </script>

  18. #18
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    In principle, yes.
    You should also make sure that the href attribute of the anchor tags, matches the file names of the pages you want to load.

    Let me know when you've got it working and we can add some code to look for a hash on page load and redirect the user accordingly.
    E.g. if someone tries to access http://calstateautoparts.com/beta/#about directly, then we need to make sure that the correct page is displayed.

  19. #19
    SitePoint Enthusiast
    Join Date
    Mar 2014
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! I think I got that part up. The URL is not changing yet. How do I get that working?

    Also, my drawmap function is not working anymore so the maps are not displayed on contact us. Do I have the wrong syntax now that my function has been modified?

    Code:
    $("a").on("click", function(e){
            var page = this.href.replace("#", "") + ".html",
                hash = $(this).prop("hash");
    
            $('#contentarea').load(page, function(){
              location.hash = hash;
            });
    
            e.preventDefault();
          });
    
          $("a[href='#home']").trigger("click");
    	  
    	$('#contactus').data({loadfunc: drawmap});

  20. #20
    SitePoint Enthusiast
    Join Date
    Mar 2014
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wait.. The URL is now changing. My href was missing the hash symbol before the name. You say there's a bit of code we can add so that users can access a certain page directly?

    My maps are still not loading in the contact us page.


    Thank you!

  21. #21
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by melitica View Post
    You say there's a bit of code we can add so that users can access a certain page directly?
    Yup:

    Code:
    function getHash(){
      return window.location.hash
    }
    
    $("a").on("click", function(e){
      var page = this.href.replace("#", "") + ".html",
          hash = $(this).prop("hash");
    
      $('#contentArea').load(page, function(){
        if(page.match("home.html")){
          history.pushState('', document.title, window.location.pathname);
        } else {
          location.hash = hash;
        }
      });
    
      e.preventDefault();
    });
    history.pushState
    var hash = getHash();
    if(hash){
      $("a[href='" + hash + "']").trigger("click");
    } else {
      $("a[href='#home']").trigger("click");
    }
    Now if you access http://calstateautoparts.com/beta/#about in your browser directly, you will stay on that page and not be redirected to the home page.

    Also, I have made home.html the default and used history.pushState, so that it doesn't display as #home

  22. #22
    SitePoint Enthusiast
    Join Date
    Mar 2014
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the function! However, I made the changes and now it doesn't seem to be working at all. What am I missing? Also, how do I put the maps on contact us? I need to incorporate that function into the script you gave me.

    http://calstateautoparts.com/beta

    Thanks so much!

  23. #23
    SitePoint Enthusiast
    Join Date
    Mar 2014
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I incorporated it into my code better. Yet, how do I get the maps running?

    Code:
    <script>
    jQuery(function($){
    	function drawmap(){
    		new Maplace({
    	                locations: [
    	                    {
    	                        lat: 33.8583,
    	                        lon: -117.8678,
    	                        title: 'Anaheim',
    	                        html: [
    	                            '<h3>Anaheim</h3>',
    	                            '<p>1361 N RedGum St, Anaheim CA 92806<br>(714) 630-5954</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    },
    	                    {
    	                        lat: 34.2358,
    	                        lon: -118.5739,
    	                        title: 'Chatsworth',
    	                        html: [
    	                            '<h3>Chatsworth</h3>',
    	                            '<p>20233 Corisco St, Chatsworth CA 91311<br>(818) 998-3001</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    },
    						{
    	                        lat: 32.8142,
    	                        lon: -117.1247,
    	                        title: 'San Diego',
    	                        html: [
    	                            '<h3>San Diego</h3>',
    	                            '<p>4000 Ruffin Road Suite K, San Diego CA 92123<br>(858) 292-1622</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                      	lat: 34.9137,
    	                        lon: -120.4632,
    	                        title: 'Santa Maria',
    	                        html: [
    	                            '<h3>Santa Maria</h3>',
    	                            '<p>1459 W. Fairway Dr., Santa Maria CA 93455<br>(805) 922-4445</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                        lat: 34.5011,
    	                        lon: -117.3279,
    	                        title: 'Victorville',
    	                        html: [
    	                            '<h3>Victorville</h3>',
    	                            '<p>15400-B Tamarack Road, Victorville CA 92392<br>(760) 243-5666</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                        lat: 36.1605,
    	                        lon: -115.1050,
    	                        title: 'Las Vegas',
    	                        html: [
    	                            '<h3>Las Vegas</h3>',
    	                            '<p>3101 Builders Ave., Las Vegas, NV 89101<br>(702) 452-2440</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                        lat: 33.1677,
    	                        lon: -117.2202,
    	                        title: 'Vista',
    	                        html: [
    	                            '<h3>Vista</h3>',
    	                            '<p>2055 Thibodo Rd, Vista CA 92081<br>(760) 599-0791</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                        lat: 33.6224,
    	                        lon: -117.7194,
    	                        title: 'Laguna Hills',
    	                        html: [
    	                            '<h3>Laguna Hills</h3>',
    	                            '<p>23561 Ridge Route Suite P, Laguna Hills CA 92653<br>(949) 699-3308</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                        lat: 34.4245,
    	                        lon: -118.4998,
    	                        title: 'Santa Clarita',
    	                        html: [
    	                            '<h3>Santa Clarita</h3>',
    	                            '<p>26846 Oak Ave Unit R, Santa Clarita CA 91315<br>(661) 424-9396</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    	                ],
    	               map_div: '#gmap-list',
    				   controls_type: 'list',
    				controls_title: 'Choose a location:'
    	            }).Load();
    	}
    	
    	function getHash(){
      return window.location.hash
    }
    
    $("a").on("click", function(e){
      var page = this.href.replace("#", "") + ".html",
          hash = $(this).prop("hash");
    
      $('#contentarea').load(page, function(){
        if(page.match("home.html")){
          history.pushState('', document.title, window.location.pathname);
        } else {
          location.hash = hash;
        }
      });
    
      e.preventDefault();
    });
    history.pushState
    var hash = getHash();
    if(hash){
      $("a[href='" + hash + "']").trigger("click");
    } else {
      $("a[href='#home']").trigger("click");
    }
    	  
    	$('#contactus').data({loadfunc: drawmap});});
            
    </script>

  24. #24
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    I just looked at the page in question, but it seems that no content is being injected when you click the navigation links.

    If you make it so that I can see the error, then I'll be happy to have a look for you.

  25. #25
    SitePoint Enthusiast
    Join Date
    Mar 2014
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm so sorry. There were some issues updating the site. You can now go here and notice how the maps function is not loading.

    This is how the code looks:

    Code:
    <script>
    jQuery(function($){
    	function drawmap(){
    		new Maplace({
    	                locations: [
    	                    {
    	                        lat: 33.8583,
    	                        lon: -117.8678,
    	                        title: 'Anaheim',
    	                        html: [
    	                            '<h3>Anaheim</h3>',
    	                            '<p>1361 N RedGum St, Anaheim CA 92806<br>(714) 630-5954</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    },
    	                    {
    	                        lat: 34.2358,
    	                        lon: -118.5739,
    	                        title: 'Chatsworth',
    	                        html: [
    	                            '<h3>Chatsworth</h3>',
    	                            '<p>20233 Corisco St, Chatsworth CA 91311<br>(818) 998-3001</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    },
    						{
    	                        lat: 32.8142,
    	                        lon: -117.1247,
    	                        title: 'San Diego',
    	                        html: [
    	                            '<h3>San Diego</h3>',
    	                            '<p>4000 Ruffin Road Suite K, San Diego CA 92123<br>(858) 292-1622</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                      	lat: 34.9137,
    	                        lon: -120.4632,
    	                        title: 'Santa Maria',
    	                        html: [
    	                            '<h3>Santa Maria</h3>',
    	                            '<p>1459 W. Fairway Dr., Santa Maria CA 93455<br>(805) 922-4445</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                        lat: 34.5011,
    	                        lon: -117.3279,
    	                        title: 'Victorville',
    	                        html: [
    	                            '<h3>Victorville</h3>',
    	                            '<p>15400-B Tamarack Road, Victorville CA 92392<br>(760) 243-5666</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                        lat: 36.1605,
    	                        lon: -115.1050,
    	                        title: 'Las Vegas',
    	                        html: [
    	                            '<h3>Las Vegas</h3>',
    	                            '<p>3101 Builders Ave., Las Vegas, NV 89101<br>(702) 452-2440</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                        lat: 33.1677,
    	                        lon: -117.2202,
    	                        title: 'Vista',
    	                        html: [
    	                            '<h3>Vista</h3>',
    	                            '<p>2055 Thibodo Rd, Vista CA 92081<br>(760) 599-0791</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                        lat: 33.6224,
    	                        lon: -117.7194,
    	                        title: 'Laguna Hills',
    	                        html: [
    	                            '<h3>Laguna Hills</h3>',
    	                            '<p>23561 Ridge Route Suite P, Laguna Hills CA 92653<br>(949) 699-3308</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    						,
    						{
    	                        lat: 34.4245,
    	                        lon: -118.4998,
    	                        title: 'Santa Clarita',
    	                        html: [
    	                            '<h3>Santa Clarita</h3>',
    	                            '<p>26846 Oak Ave Unit R, Santa Clarita CA 91315<br>(661) 424-9396</p>'
    	                        ].join(''),
    	                        zoom: 8
    	                    }
    	                ],
    	               map_div: '#gmap-list',
    				   controls_type: 'list',
    				controls_title: 'Choose a location:'
    	            }).Load();
    	}
    	
    	function getHash(){
      return window.location.hash
    }
    
    $("a").on("click", function(e){
      var page = this.href.replace("#", "") + ".html",
          hash = $(this).prop("hash");
    
      $('#contentarea').load(page, function(){
        if(page.match("home.html")){
          history.pushState('', document.title, window.location.pathname);
        } else {
          location.hash = hash;
        }
      });
    
      e.preventDefault();
    });
    history.pushState
    var hash = getHash();
    if(hash){
      $("a[href='" + hash + "']").trigger("click");
    } else {
      $("a[href='#home']").trigger("click");
    }
    	  
    	$('#contactus').data({loadfunc: drawmap});});
            
    </script>
    The link is: http://calstateautoparts.com/beta/#contactus
    Last edited by Mittineague; Jun 17, 2014 at 14:31.


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
  •