Need Help: js/ css active login-window setTimeout

[delicjous]

Hi everybody,

I need help with a small javascript.
I wanna activate the login-window at pageload and set a timeout to deactivate it again after a few seconds.

I try somthing like this but it didn't work:

<vb:if condition="$page['channelid'] == 1">
<vb:if condition="!$user OR $user['userid'] < 1">
<script type="text/javascript">
$(document).ready(function() {
    $("#main-navbar .username-container").addClass("b_menu__dropdown--active");, function(){
        setTimeout("$('#main-navbar .username-container').removeClass("b_menu__dropdown--active");", 5000);
    });
});
</script>
</vb:if>
</vb:if>

This script is in a template and the template is loading at the hook footer_before_body_end.
The template is loading but it isn't doing what it should do...

Would be nice to get some help.

Thanks

[Replicant]

when the template is called, are you passing the page and user variable reference to it?

ie: page=page, user=user, although not really necessary for something this simple. The channelid and userid are both available in the pageData javascript object on every page. Maybe moving the conditional from the template to an if statement in the javascript is in order.

[delicjous]

Hey Repli,

thanks for your quick answer. I have more trouble to get the script running then the conditionals meaningful.

The script should only loading at channel 1 and if the user is logged out. So the login-window show up for a while and disappear after that.

A friend ask and I thought it couldn't be that hard to do it.

Could be that the conditions are available in js but Iam not sure what is faster... load the script or get the conditionals.

What ever. The conditionals are ok for me... but I have to get the script running

Don't try but it should work in 1 condition...

<vb:if condition="$page['channelid'] == 1 AND !$user OR $user['userid'] < 1">
<script type="text/javascript">
$(document).ready(function() {
    $("#main-navbar .username-container").addClass("b_menu__dropdown--active");, function(){
        setTimeout("$('#main-navbar .username-container').removeClass("b_menu__dropdown--active");", 5000);
    });
});
</script>
</vb:if>

The script should add the class to display the login-form and after timeout remove the class to make the login-form disappear.

[Replicant]

This should do it(Tested on 5.2.2). The class b_menu__dropdown--active only highlights the button for the drop down login. This code shows the login box for 8 seconds give or take, but I'd suspect the timeout needs to be a little longer to give the user time to react.

<script type="text/javascript">
$(document).ready(function() {
  $(".js-menu__dropdown-submenu.b-menu__dropdown-submenu").css("display","block");

 
    setTimeout(function(){$(".js-menu__dropdown-submenu.b-menu__dropdown-submenu").css("display","none");console.log("Dropdown Timed Out")}, 8000);
}
);

</script>

[noypiscripter]

Wouldn't that break the dropdown functionality if you mess with the css directly to show/hide the login dropdown?

Why not just trigger a click event to the button and let the button do its thing to change the CSS to hide/show the login dropdown? No need to worry or know what css class to use or know how the dropdown is hidden or shown. Just programmatically click the button as if user is clicking it.

[delicjous]

Replicant you are the best! Big big thanks to you! It works perfectly and didn't break the onclick dropdown function or anything else. It works perfectly for me.

It is not to login directly... only to show where the login form actually is.
This friends forum is used by (I would say older generation) not that it-specials

So they told him they don't find the login... so this is my first and best thought.

Again... Big big thanks! It works perfect for me, but if anybody have another idea --> just tell me ;-)

[Replicant]

Originally Posted by noypiscripter

Wouldn't that break the dropdown functionality if you mess with the css directly to show/hide the login dropdown?

Why not just trigger a click event to the button and let the button do its thing to change the CSS to hide/show the login dropdown? No need to worry or know what css class to use or know how the dropdown is hidden or shown. Just programmatically click the button as if user is clicking it.

Great tip Glenn. I didn't even think about doing it that way even though you've directed the same advice to me in the past.