WordPress.org

Ready to get started?Download WordPress

Forums

WP Flexible Map
[resolved] Tabs Hiden map broken (14 posts)

  1. JAVOB
    Member
    Posted 1 year ago #

    Hi, I have this in my code:

    <ul class="tabs-nav">
    <li><a href="#description" id="descriptionlink">Description</a></li>
    <li><a href="#location" id="locationlink">Location</a></li>
    </ul>
    
    <?php
    echo "<div id='description' class='content'>";
    echo get('description');
    echo "</div>";
    echo "<div id='location' class='content'>";
    flexmap_show_map(array(
    'center' => get('ubicacion_latitud').','.get('ubicacion_longitud'),
    'width' => 580,
    'height' => 400,
    'zoom' => 16,
    'title' => get('descripcion_nombre'),
    'description' => get('descripcion_ubicacion'),
    'directions' => 'false',
    'hidepanning' => 'false',
    'hidescale' => 'false',
    'maptype' => 'roadmap',
    ));
    echo "</div>";
    ?>
    
    <script>
            //Tabs
    	$(document).ready(function() {
                //add active class to the first li
                $('.tabs-nav li:first').addClass('active');
                //hide all content classes.
                $('.content').hide();
                //show only first div content
                $('.content:first').show();
                //add the click function
                $('.tabs-nav li').click(function(){
                	//remove active class from previous li
                	$('.tabs-nav li').removeClass('active');
                	//add active class to the active li.
                	$(this).addClass('active');
                	//hide all content classes
                	$(".content").hide();
                	//find the href attribute of the active tab
                      var activeTab = $(this).find("a").attr("href");
                	//fade in the content of active tab
                	$(activeTab).fadeIn(700);
                	return false;
    		});
    	});
    </script>

    I've seen this solution in FAQ

    <script>
    jQuery(function($) {
    
    $('div.ui-tabs').bind('tabsshow', function(event, ui) {
        $("#" + ui.panel.id + " div.flxmap-container").each(function() {
            var flxmap = window[this.getAttribute("data-flxmap")],
            flxmap.redrawOnce();
        });
    });
    
    });
    </script>

    How could apply this in my case?, I'm not very good with jQuery.

    Thanks for the great help.

    http://wordpress.org/extend/plugins/wp-flexible-map/

  2. webaware
    Member
    Plugin Author

    Posted 1 year ago #

    Have you tried just dropping it into your code, after the block above?

    You might need to change "div.ui-tabs" to just ".ui-tabs", depending on what element is containing the ui-tabs nav and content on your page.

    cheers,
    Ross

  3. JAVOB
    Member
    Posted 1 year ago #

    Hi, thanks for the prompt reply but I am using jQueryUI to generate the effect tab, I put the code is all I use to hide and show the content to click on the menu.

    I tried putting the code and changing the 'ui-tabs' for the 'tabs-nav', but not it works for me, I hope you can help me as it is only me that is missing.

  4. webaware
    Member
    Plugin Author

    Posted 1 year ago #

    Basically, you need to capture an event for when the tab is shown, and tell the map to refresh.

    When you use jquery-ui tabs, it adds classes to the elements on your page so that its CSS styles have effect. That class ".ui-tabs" is added to whatever element is containing your HTML snippet, above. So, if you use the code snippet from the FAQ but replace "div.ui-tabs" with ".ui-tabs", it should work. "tabs-nav" won't work, because it is the level below where the tabs object actually lives.

    Are you able to share a link to your website, so that I can see what the browser sees?

  5. JAVOB
    Member
    Posted 1 year ago #

    Hello, here is the entire structure to use in my article.

    http://pastebin.com/2YP2iaKv

    I hope you can help me, thanks.

  6. webaware
    Member
    Plugin Author

    Posted 1 year ago #

    G'day,

    1. Don't load jquery yourself; just enqueue it by calling wp_enqueue_script('jquery'); from an enqueue_scripts action

    2. Don't give your div a class "ui-tabs", this is done automatically by jquery-ui when it attaches to your page structure.

    After you fix the above, do the tabs work? If not, get them working first, then we can try to get your map working. If you have the page on the Internet where I can see it in a browser, it will be easier to diagnose.

  7. JAVOB
    Member
    Posted 1 year ago #

    Hello, here is the LINK of the website I'm developing, I am using the code in the file ¨single-{custom-post-type}.php¨ and I'm using jQueryUI because I do not need to generate the effect tab, as you will realize, I hope you can help me out.

    Greetings.

  8. webaware
    Member
    Plugin Author

    Posted 1 year ago #

    Aha! There's an error in the code in my FAQ, a "," that should be a "." and it causing the script to fail!

    Thanks for finding the bug for me :)

    This is what the code should be:

    <script>
    jQuery(function($) {
    
    $('div.ui-tabs').bind('tabsshow', function(event, ui) {
        $("#" + ui.panel.id + " div.flxmap-container").each(function() {
            var flxmap = window[this.getAttribute("data-flxmap")];
            flxmap.redrawOnce();
        });
    });
    
    });
    </script>

    cheers,
    Ross

  9. JAVOB
    Member
    Posted 1 year ago #

    Hi, glad that you found the problem but as I told you I'm not using jQueryUI to generate the effect tab, so this does not work, please give a look to this link you shared code.

    http://pastebin.com/2YP2iaKv

  10. webaware
    Member
    Plugin Author

    Posted 1 year ago #

    OK, right. So what you want to do is tell the map to resize when you click on a tab with the map in it. Like this:

    //...
    $(activeTab).fadeIn(700);
    $("div.flxmap-container", activeTab).each(function() {
        var flxmap = window[this.getAttribute("data-flxmap")];
        flxmap.redrawOnce();
    });
  11. JAVOB
    Member
    Posted 1 year ago #

    Hey, it worked ... I almost cried with emotion :'(
    thank you very much for the help, for having me patience and especially your time is the most valuable.
    Thank you for creating a good plugin like this.

    PS: Is there any way to put an image in the description?

  12. webaware
    Member
    Plugin Author

    Posted 1 year ago #

    Yay!

    To get an image in the infowindow, you'll need to use a KML map. My plugin adds the description as text nodes, so any HTML is encoded, sadly.

  13. JAVOB
    Member
    Posted 1 year ago #

    Hello, thank you again, but pass it to detract KML easy administration, I hope you can implement it in a straightforward manner to further improve this super plugin.

    Thanks for everything and I give resolved the issue by.

  14. webaware
    Member
    Plugin Author

    Posted 1 year ago #

    The plugin actually used to allow HTML in the description, but all recent versions ensure that the description is safely encoded. I will add a new attribute to allow an HTML block to be used as the description again soon.

    cheers,
    Ross

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags