#1
  1. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,657
    Rep Power
    171

    CSS if toggled and form submitted. Bad title, I know.


    Hi;

    By clicking on View results on map I simply open the map using
    Code:
    // Map
    $('#show_map').click(function() {
    $('#map').slideToggle('slow', function() {
    
    });
    });
    // Map
    How can I keep the map open (div style display block) if its has been opened and any of the forms on the page have been submitted while the map has been opened?

    Thank you
  2. #2
  3. Did you steal it?
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    14,053
    Rep Power
    9398
  4. #3
  5. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,657
    Rep Power
    171
    Originally Posted by requinix
    Like if the page reloads?
    Yes. Submit via forms to filter the results.
  6. #4
  7. Did you steal it?
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    14,053
    Rep Power
    9398
    Cookies are a pretty easy way of doing it, especially since they're so easy to set in Javascript.
    Code:
    document.cookie = "name=value"; // no, won't overwrite other cookies. crazy I know
    Then make your PHP not set display:none if the cookie is set.
  8. #5
  9. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,657
    Rep Power
    171
    Originally Posted by requinix
    Cookies are a pretty easy way of doing it, especially since they're so easy to set in Javascript.
    Code:
    document.cookie = "name=value"; // no, won't overwrite other cookies. crazy I know
    Then make your PHP not set display:none if the cookie is set.
    But what happenes when you click on the icon 3 times? How do I know if I should SET or UNSET it? Please look at View on Mp icon here
  10. #6
  11. Did you steal it?
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    14,053
    Rep Power
    9398
    Then allow me to slightly change what I said. Slightly.
    Originally Posted by requinix
    Cookies are a pretty easy way of doing it, especially since they're so easy to set in Javascript.
    Code:
    document.cookie = "name=value"; // no, won't overwrite other cookies. crazy I know
    Then make your PHP not set display:none if the cookie is set to display it.
    There. Now it's not a matter of showing if the cookie is present but showing if the cookie contains a specific value.
  12. #7
  13. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,657
    Rep Power
    171
    Originally Posted by requinix
    Then allow me to slightly change what I said. Slightly.

    There. Now it's not a matter of showing if the cookie is present but showing if the cookie contains a specific value.
    Hey getting there. Just need a little bit more help.

    It creates the cookie like you said.
    Code:
    <a class="view-map" href="#" id="show_map" onclick="document.cookie = 'map=open';">View results on map</a>
    <?php if($_COOKIE['map']=='open')
                {
                    $map_display=='block';
                }
            else
                {
                    $map_display=='none';	
                }
    ?>
    <div style=" <?php echo $map_display;?>">Map</div>
    But not exactly completed! Why? Because when I click on the View Results on Map and set the cookie to open, I also need to change the value of open to close, so if I re-click it, it changes to close like this
    Code:
    <a class="view-map" href="#" id="show_map" onclick="document.cookie = 'map=close';">View results on map</a>
    But not sure how to change the value OPEN to CLOSE.

    Does it make sense? I hope it does and we are not talking about 2 entirely different things.

    Please guide how I can do it.

    Thank you
  14. #8
  15. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,657
    Rep Power
    171
    Got it sorted. Pretty sure can be done in a more optmised way.

    PHP Code:
    if($_COOKIE['map']=='open')
        {
           
    $map_message "change_map_show_button('show_view_button') ; document.cookie = 'map=close';";
           
    $map_display='style="display:block"';
        }
    else
        {
           
    $map_message "change_map_show_button('show_hide_button') ; document.cookie = 'map=open';";
           
    $map_display='style="display:none"';    
        } 
    Code:
    function change_map_show_button(action)
    		{
    			$.post('reloads/map_hide_show.php', { action: action },function(output){$('#map_hide_show').html(output).show('slow');});	
    		}
    Code:
    <span id="map_hide_show">
    	<a class="view-map" href="#"  onClick="<?php echo $map_message;?>">View results on map</a>
    </span>
    map_hide_show.php
    Code:
    <script>
    // Map
    $('.view-map').click(function() 
    	{
    		$('#map').slideToggle('slow', function()
    			{
    
    			}
    		);	
    	}
    );
    // Map
    </script>
    <?php
    	if($_POST['action']=='show_hide_button')
    		{?>
    			<a class="view-map" href="#"  onClick="change_map_show_button('show_view_button') ; document.cookie = 'map=close';">View results on map</a>
    <?php } 
    	else
    		{?>
    			<a class="view-map" href="#" onClick="change_map_show_button('show_hide_button') ; document.cookie = 'map=close';">View results on map</a>
    <?php }
    //echo $_COOKIE['map'];?>
  16. #9
  17. No Profile Picture
    Dazed&Confused
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2002
    Location
    Tempe, AZ
    Posts
    506
    Rep Power
    128
    A bit of a data dump but wanted to post this since I saw this thread. I updated my hide/show Javascript a few days ago to something more modern. The use case doesn't match yours 100%, but it's close and some things might be applicable.

    Notes:
    1. My site has multiple show/hide areas, all of which I wanted to store state on. But I didn't want a full cookie for every single one. The below "store" function is a wrapper for .cookie() that handles multiple name/value pairs within a single cookie, based on the passed name.

    2. This is a purely Javascript-based show/hide function. State of the area will be set on page load, either using .hide() or .show(). Visually it looks best to have the area hidden by default ( display: none; ) and have the Javascript show it, versus the opposite in which the user might see the content before it disappears.

    3. No in-line Javascript is required; functionality is added dynamically based on class name by jQuery.

    HTML Example:
    Code:
                  <div class="toggleBlockHeader2">
                    <div class="button"><img src="" class="toggleTrigger" target="fc-24" /></div>
                    <div class="title">Beta Discussions</div>
                  </div>
                  <div id="fc-24" class="toggleBlockContent2">
                    ... area to show/hide ...
                  </div>
    Underlying Javascript:
    Code:
    	/* .cookie wrapper to allow multiple key/value pairs per named cookie, only non-null values stored */
    	$.cookie.json = true;
    	function store(name,variable,value){
    		var values = $.cookie(name);
    		if ( values === undefined ){ values = {}; }
    		if ( value !== undefined ){
    			if ( value === null ){ delete values[variable]; } else { values[variable] = value; }
    			if ( Object.size(values) ){ $.cookie(name,values); } else { $.removeCookie(name); }
    		}
    		return values[variable];
    	}
    
    	$('img.toggleTrigger').each(function(){
    		var target = $(this).attr("target");
    		$(this).click(function(){
    			var button = this;
    			var visible = ($('#'+target).css('display') != 'none');
    			if ( visible ){
    				$(button).attr('src','/themes/gs1/images/expand.png');
    			} else {
    				$(button).attr('src','/themes/gs1/images/collapse.png');
    			}
    			$('#'+target).toggle('fast',function(){ store('toggleTrigger',target,(!visible?null:false)); });
    		});
    		if ( store('toggleTrigger',target) == false ){
    			$('#'+target).hide();
    			$(this).attr('src','/themes/gs1/images/expand.png');
    		} else {
    			$('#'+target).show();
    			$(this).attr('src','/themes/gs1/images/collapse.png');
    		}
    	});

IMN logo majestic logo threadwatch logo seochat tools logo