Why does this page freez up?

Head out to http://brucegust.com/kitchen/stunt_double.php

I've got a code in place that makes the main browser turn grey while simultaneously revealing a pop up window.

It works great when there's only one product, but I ran into a snag when I attempted to loop through a number of products...

the screen sticks to the top the user's monitor
after you close it, the whole  screen freezes

Obviously, I'm missing something. What do you think? Why does my pop up window not play nicely with everything else?
Bruce GustPHP DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

zephyr_hex (Megan)DeveloperCommented:
Does the problem not happen when you comment out the pop up?  If so, can you please post the code for the pop up and the code for how it's triggered.
Bruce GustPHP DeveloperAuthor Commented:
Hey, Zephyr!

First off, "Yes!" If I remove the hidden div and the corresponding Javascript that goes along with revealing the code, then the page can be navigated (moved up and down) without any problem.

As I was reviewing the code in order to answer your first question, I had an epiphany. And while I think my logic is sound, I don't know how to fix it.

I have multiple buttons, all of which have an id of "button." As I mentioned earlier, when there's only one product on the page, the code works great. But when I have multiple "buttons," it's then when my page fails.

Is that a problem? It seems like and "id," by default, needs to reference a unique entity. If that's the cast, then that would explain why my page is failing.

How can I loop through things so that my id's don't overlap and I can accomplish the same functionality?
zephyr_hex (Megan)DeveloperCommented:
I don't know if it's causing your problem, but it's certainly invalid HTML to have multiple elements with the same ID.  It can cause unexpected behavior.  You'll need to fix the ID problem to see if it resolves the freeze.

You should reference your elements by class instead of ID.

Here is a generic example:

HTML:

<input type="button" class="btn" value="button 1">
<input type="button" class="btn" value="button 2">
<input type="button" class="btn" value="button 3">
<div id="result"></div>

Open in new window


JQUERY:

$('.btn').click(function() {
  $('#result').text('Button clicked: ' + $(this).val());
});

Open in new window


Fiddle Demo of this example is here.
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

lenamtlCommented:
Hi,
You are calling jquery tree times, keep only one and this should be the first link of js in your code other js should be after.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
or
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
or
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

but not all...
Slick812Commented:
you have several HTML and javascript things that are not a good fit for the page set-up (display structure), and the click operations you need for this.
I BIG non-fit is that you include this code in the pop function -
        $('body').css({'overflow':'hidden'});

this is what causes your page to NOT scroll (freeze) after you show a modal thing (an EMPTY modal box?). I do not think you need that code line at all, if you are sure you need that overflow hidden, then in the closePop function you will to add
        $('body').css({'overflow':'visible'});

You have so many <table> in your code it is difficult to be able to see what all of the parts of your page are for.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Slick812Commented:
there are MODALS that are part of the JQUERY add ons, , , this is a widely used and versatile modal dialog (info exchange, a page JS to user, user to page) that you might should experiment with to see how useful it can be -
         https://jqueryui.com/dialog/

ALSO, , bootstrap offers an internal (included in bootstrap js-css) MODAL box set-up to use, please go to -
      http://www.w3schools.com/bootstrap/bootstrap_modal.asp
and maybe click on the green "Try It Yourself"  button - to see what you can change in their demo code to get a modal of different sizes and display.

OH and in your current page build, you have no way to load the specific product information for all the different products you have there, this can get a little difficult to do, depending on where the product info for display in modal is stored (in the javascript on that page, or on the server)
Bruce GustPHP DeveloperAuthor Commented:
Gentlemen!

I tool your collective counsel and crafted a JQuery function that does the trick, however...

While my page doesn't freeze and the use of "classes" rather than "id's" is no longer happening, my pop up isn't centered and the greyed out effect doesn't extend to the bottom of the page.

Wondering if y'all might help me with that.

Thanks!

http://www.experts-exchange.com/questions/28930351/How-can-I-get-this-grey-screen-to-extend-all-the-way-down-to-the-bottom-of-my-page.html
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.