triggering function on tab click

[robbrandtMember]

I have a fairly simple tab setup in which I am using gmap3 to display a google map. It seems a common thing that when a google map is displayed within a hidden div (such as a tab pane) the tiles aren’t positioned correctly and a “resize” is required when the div is shown. gmap3 has a trigger for that, “resize”, documented here:

http://gmap3.net/en/catalog/16-misc/trigger-62

I have tried to implement that in jqxtabs but it’s not working. Here’s my code:

<script type="text/javascript">
        jQuery(document).ready(function () {
            var theme = theme;
            // Create jqxTabs.
            jQuery('#jqxTabs').jqxTabs({ width: '600px', height: 1200, position: 'top', theme: theme });
            
            jQuery("#my_map").gmap3({
            	  getroute:{
            	    options:{
            	        origin:"48 Pirrama Road, Pyrmont NSW",
            	        destination:"Bondi Beach, NSW",
            	        travelMode: google.maps.DirectionsTravelMode.DRIVING
            	    },
            	    callback: function(results){
            	      if (!results) return;
            	      jQuery(this).gmap3({
            	        map:{
            	          options:{
            	            zoom: 13, 
            	            center: [-33.879, 151.235]
            	          }
            	        },
            	        directionsrenderer:{
            	          container: jQuery(document.createElement("div")).addClass("googlemap").insertAfter(jQuery("#my_map")),
            	          options:{
            	            directions:results
            	          }
            	        }
            	      });
            	    }
            	  }
            	});
            jQuery('#jqxTabs').bind('selected', function (event) {
            	jQuery('#jqxTabs').gmap3({trigger:"resize"});
         	});
        });
    </script>

The html is like this:

    <div id='jqxWidget'>
        <div id='jqxTabs'>
            <ul>
                <li style="margin-left: 30px;">Preview</li>
                <li>Coaches</li>
                <li>Stadium</li>
                <li>Roster</li>
                <li>Schedule</li>
            </ul>
            <div>
                
            </div>
            <div>
                JavaServer Pages (JSP) is a Java technology that helps software developers serve
                dynamically generated web pages based on HTML, XML, or other document types. Released
                in 1999 as Sun's answer to ASP and PHP,[citation needed] JSP was designed to address
                the perception that the Java programming environment didn't provide developers with
                enough support for the Web. To deploy and run, a compatible web server with servlet
                container is required. The Java Servlet and the JavaServer Pages (JSP) specifications
                from Sun Microsystems and the JCP (Java Community Process) must both be met by the
                container.
            </div>
            <div>
                <div style="float:left;">
    			<a class="stadium" href="{$pubdata.stadiumphoto.url}"><img class="imagedropshadow" src="{$pubdata.stadiumphoto.thumbnailUrl}" title="{gt text='Image'}" alt="{gt text='Image'}" /></a><br/>
    			<script>
    				jQuery('a.stadium').colorbox({maxWidth:"100%",maxHeight:"100%",close:"Close"});
				</script>
    			</div>
    			<div style="float:left;width:270px;margin-left:10px;">
    				<h3>{$pubdata.stadium|safehtml}</h3>
    				<h4>{gt text="Stadium Address"}</h4>
            		<span class="z-formnote">{$pubdata.stadiumaddress|safehtml}</span>
            		<h4>{$pubfields.stadiumcapacity|clip_translate}:</h4>
            		<span class="z-formnote">{$pubdata.stadiumcapacity|safetext}</span>
            		<h4>{$pubfields.stadiumsurface|clip_translate}:</h4>
            		<span class="z-formnote">{$pubdata.stadiumsurface|safehtml}</span>
    			</div>
    			<div id="my_map" style="width:500px; height:350px;"></div>
            </div>
            <div>
                
            </div>
            <div>
                Schedule
            </div>       
        </div>     
        
    </div>

Suggestions?

[Peter StoevKeymaster]

Hi robbrandt,

You may look at this demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtabs/integration.htm?web. It shows how you should use jqxTabs, if you wish to display widgets within the Tabs.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts