Little Issue with Slide Up

HTML & CSS
21

Thanks Ryan, got that fixed up I believe now.

Got all pages up now, just the nav got to figure out and on the Services page when you click on Show Services it doesn’t slide up anymore and also only when you go to or leave the Services page a vertical scrollbar shows up I’m assuming thats because of the Services list is there way I can make it not show.

Thanks,

Mike

22

Got the navigation fixed :slight_smile:

So just the Services slide up issue and that vertical scrollbar on that page which only shows right now I can see in FireFox doesnt show in Chrome not sure about IE as not near a PC.

23

Hey guys,

Still trying to solve this issue.

I’ve gotten somewhat closer now by using the button tag instead of an a href when you go directly to the page it works perfectly…

http://redrhinorestoration.com/test/slide2.html

But if you start off at the homepage, then click on Services in the right navigation it doesn’t work…

http://redrhinorestoration.com/test/slide1.html

The only time it works is if you go directly to the page instead of going to any other page first.

Any ideas why this could be?

Regards,

Mike

24

Hi Mike,

I can’t seem to make any headway with this.

I think this is more of a javascript question now and would be best in the JS forum. It may be that when you load a new page the routine for the show services may need to be re-initialised again.

25

Thanks Paul,

Ive made a post in the Javascript forum. When posting in the Javascript I seem to have little success with replies there its less active then here.

Do you happen to know who a person I can PM about the question on the forums who may be familiar enough to help with this situation.

Thanks,

Mike

26

I know this is most likely javascript problem now but maybe someone here has bit more knowledge then me in jquery…

I had someone tell me this, but when I put it in still does not work…

this is pseudocode. You need to use $.ajaxComplete(); function. this would be triggered after every Ajax call you make on the page


$(document).ajaxComplete(function() {
  showBottom.onclick = function() {
                classie.toggle( this, 'active' );
                classie.toggle( menuBottom, 'cbp-spmenu-open' );
                disableOther( 'showBottom' );
            };

});

My Close button doesnt even work now. This is becoming more and more difficult then I imagined lol

27

Hi Mike,

Try using jquery for that menu using .on() which should apply to content added by ajax. You will need a later version of jquery though.


<!--<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>-->
<script src="http://code.jquery.com/jquery.js"></script>

Then change the code at the bottom of the page to this:


<script src="http://redrhinorestoration.com/wp/wp-content/themes/redrhino/js/classie.js"></script> 
<script>
			var
				menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
				showBottom = document.getElementById( 'showBottom' ),
				body = document.body;
		/*showBottom.onclick = function() {
				classie.toggle( this, 'active' );
				classie.toggle( menuBottom, 'cbp-spmenu-open' );
				disableOther( 'showBottom' );
			};
		*/
			function disableOther( button ) {				
				if( button !== 'showBottom' ) {
					classie.toggle( showBottom, 'disabled' );
				}				
			}
		</script> 
<script>
/*    $( ".services-tagger .ui-link" ).click(function() {
   	 $('.cbp-spmenu').removeClass('cbp-spmenu-open');
     });
*/
$( "body" ).on( "click", "#showBottom", function() {
			  $(this).toggleClass('active');
				$('#cbp-spmenu-s4').toggleClass('cbp-spmenu-open' );
				disableOther( $(showBottom) );
});			
$( "body" ).on( "click", ".services-tagger .ui-link", function() {
 $('.cbp-spmenu').removeClass('cbp-spmenu-open');
});
</script>

I can’t guarantee it will work but it shouldn’t be any worse. :slight_smile:

28

Hi Paul,

This worked perfectly but unfortunately the client decided not to go with sliding pages. Sorry for late response.

Had one other question, here is link to page, how can I style that Image Upload File button so its same across all browsers…

http://redrhinorestoration.com/wp/report-a-pothole/

29

Also, why can’t I seem to center the Submit button on this page…

http://redrhinorestoration.com/wp/report-a-pothole/

I have the div around it report-contact-submit to text-align: center so believe it should work correct?

30

You can’t :slight_smile:

The only way to have a consistent look is to use js and swap the element out for a normal html element and style that. There are a number of scripts around to do this.

http://viget.com/inspire/custom-file-inputs-with-a-bit-of-jquery
http://plugins.jquery.com/inputfile/

31

Looks like you centred it to me?

32

Thanks Paul.

Yup ended up getting it centered.