Bootstrap container not shown

JavaScript
1

I’m not sure if Bootstrap is blocking jQuery container.
I have Javascript:

  $('#announcementWrapper').click(function(event)
   {
    event.stopPropagation();
    $('#signup').toggle();
   }
  );

  $(document).click(function(event)
   {
    var formContainer = $("#signup");
    var btnLink = $("#announcementWrapper");
    if (formContainer.has(event.target).length === 0 && btnLink.has(event.target).length === 0) {
     formContainer.hide();
    }
   }
  );

and HTML:

<div id="announcementWrapper"><a href="#signup" class="button">Sign Up Now</a></div><!-- .announcementWrapper -->

<section class="">
<div class="hide" id="signup">

<div id="signupContainer">

dsdsdss

</div><!-- .signupContainer --></div><!-- .signup -->
</section>

Why script will work inside pure HTML but with the framework like Bootstrap it will not be shown event?

Need help.

2

“Oh, what a tangled web we weave when first
we choose to employ Bootstrap and jQuery.”

Apologies to Walter Scott. :smiley:

coothead

1 Like
3

It seems to work to hide and show the text as expected even with bootstrap added. Was there something else going on that you were referring to?

Maybe put up a codepen of the problem so we can see for ourselves (you can add bootstrap and jquery via the codepen settings).

4

It is a part from design. When I click it will be shown URL with the /#signup. I need to test further.
When you click button, it will be executed HTML but bottom code will not be executed. Strange that Javascript error is not shown inside console.

<a href="#signup" class="button">Sign Up Now</a>

If I add log error, will this show an issue?

    console.log($err);
    return $err;

Thank you for the message.

5

Hi,

Still not enough information to answer correctly i’m afraid.

I’ve put your above code into a codepen (as I asked you to do) so that you can say what is wrong and what you want.

(Note that the only change was that I added the collapse class to the element with .hide as that’s how bootstrap hides it initially).

1 Like
6

I have tested a few options:

  1. CSS was removed.
  2. Your suggested code is working with without any issue.
  3. Inside application it will not work as it will constantly show /#signup. As I understand it is allowed inside bootstrap. As it is a part of testing code I can not show the whole HTML or CodePen.io.
  4. As your code is working it seems some other issue as /#signup should not be shown inside URL.
7

Did you add the collapse class as I mentioned?

When you say it will show constantly are you referring to the fact that it’s displayed on page load or that you can’t hide it once shown.

Either way we probably can’t help if something you haven’t shown us is causing the error. :slight_smile:

8

Thank you for the message!
I have validated all points again and I made two mistake:

  1. I did not refresh template and your important code was missing:
  <div class="collapse hide" id="signup">

  1. I see complexity and version: I used * Bootstrap v3.0.0 and .hide but there is seen huge resource about hidden element: https://stackoverflow.com/questions/35351353/missing-visible-and-hidden-in-bootstrap-v4

  2. It works collapse but need to test as it will be still shown /#signup

9

If you are using bootstrap3 then you just need the collapse class and not the hide class to hide and show.

e.g.

<div class="collapse" id="signup">

10

I have removed hide in Bootstrap3. It works collapse and div element is showing display: none and display: block for the container. Do you have any clue why is showing /#signup. Is it a conflict inside other CSS or other Javascript?

It seems to me the same issue as a script to the top where you put element called HREF and #. If scroll to the top does not work it will be shown inside URL like /#toTheTopButton

It is strange for me as local script works but server side will show up /#signup

11

If I understand correctly then you shouldn’t be using links for actions anyway but rather use a button.

e.g.

12

You are excellent developer. I do not get it. My button works now. Is this jQuery and Javascript event issue or Bootstrap issue as link will not work but button is detected?

  $("#signup").toggle();
13

Not sure what you are asking exactly but it should all be working.

You should use a link when you want to go somewhere (a destination) but when you want an action to happen (such as showing or hiding something) then a button should be used.

Read this:

Of course it can be tricky of you are opening a modal which is basically another section then you can make a case for a link or a button.

If you don’t want a url to appear in the address bar then you probably need a button. The js takes care of the rest as it doesn’t care if the element is a link or a button or anything else.

1 Like
14

Thank you for all support.

1 Like
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.