MyBB Community Forums

Willing to pay to have this done. PM me if interested.

Hey everyone,

I am trying to accomplish something that IMO seems very basic, but my Javascript ineptitude is getting in the way.

Basically, I want #control_menu to disappear when the element #posts is in view. To accomplish this, I found this plugin: http://remysharp.com/2009/01/26/element-...nt-plugin/

However, my code doesn't seem to work. Can anyone point me in the right direction? Maybe there's an easier way to do this?

<script type="text/javascript">
jQuery.noConflict(); 
$('#posts').bind('inview', function (event, visible) {
  if (visible == true) {
$('#control_menu').css({ 'display': 'none'});
  } else {
$('#control_menu').css({ 'display': 'inline'});
  }
});
})(jQuery);
</script>

A couple of things: Be sure to include the plugin after jQuery. Note that .bind() is deprecated, .on() is the preferred method now. And your last line doesn't make sense, it looks like you had a self-invoking anonymous function in there at some point but removed it. I cleaned it up:

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
	$('#posts').on('inview', function(event, visible) {
		if (visible == true) {
			$('#control_menu').css({ 'display': 'none'});
		} else {
			$('#control_menu').css({ 'display': 'inline'});
		}
	});
});
</script>

Either way you don't quite need a plugin for this. This should do the trick I think:

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
	if($('#posts').is(':visible')) {
		$('#control_menu').css({ 'display': 'none'});
	} else {
		$('#control_menu').css({ 'display': 'inline'});
	}
});
</script>

Neither of those works for me Hm

Thanks for your help though, I don't know anything about jQuery, just trying to make do with the scraps I find

Also, if you get a flash of the menu before it hides you can try regular JS:

var controlMenu = document.getElementById("control_menu");
var posts = document.getElementById("posts");
if(posts && posts.style.display != "none" && posts.style.visibility != "hidden"){
    controlMenu.style.display = "none";
} else {
    controlMenu.style.display = "inline";
}

Also not working ...

---

You can try it yourself. Click here to activate new theme: http://harajuju.net/?action=quickthemeoc&style=19

Then click here to see the page where it should activate.

http://harajuju.net/Topic-Attachment?pid=60799

The bar should disappear when you reach the discussion section.

Also the code I gave has to go in the footer, after the elements are created (Can be changed but not too important).

OK, I added it to the footer. But now the #control_menu is permanently set to display:none;. It needs to be only when #posts is in the viewport.

var controlMenu = document.getElementById("control_menu");
var posts = document.getElementById("posts");
if(posts || posts.style.display != "none" || posts.style.visibility != "hidden"){
    controlMenu.style.display = "none";
} else {
    controlMenu.style.display = "inline";
}

Sorry about that, should have tested it. This one works though ^ . http://jsfiddle.net/S97sg/


(Oh, I think I'm misunderstanding what you asked for. xD)

When Div A is within the viewport, I need to change the style of Div B to display: none;. If Div A leaves the viewport, Div B needs to become visible again. Is that clear?

Maybe this could work: http://pixeltango.com/resources/web-deve...on-events/

Willing to pay $10 for a decent solution to this, please PM me if interested. And only PM me if you're pretty decent with jQuery. Thanks.