Why does this page freez up?

Bruce Gust
Bruce Gust used Ask the Experts™
on
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?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2010

Commented:
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 Developer

Author

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?
Top Expert 2010
Commented:
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.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

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...
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.
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 Developer

Author

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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial