Photoshop Question posted in
The official user guide can be found here.

jquery event not work with many div on Opera and Chrome – Photoshop

On my webside I create several div with id="bigger". This div should enlarge div id="text" and load inside (using ajax) next subweb.
Here is part of my code:

        /*ajax*/
    function ajax(src, cont){
            $.ajax({
                url: src,
                context: document.body,
                success: function(responseText) {
                    $(cont).html(responseText);
                    $(cont).find("script").each(function(i) {
                        eval($(this).text());
                    });
                }
            });
    }

    /*bigger div*/
    $(document).ready(function(){
        $('div#bigger').click(function(){
            $("#text").animate({ 
            width: "1050px",
            left:"150px",
            padding:"0"
            }, 1500 );
            $('#infbox').css('display','none');
        })
    })
    <!--it's work-->
                            <div id="bigger" onClick="ajax('gallery.php', '#text')" class="slide">
                            <span id="galdesc"><p>G<br />A<br />L<br />E<br />R<br />I<br />A</p></span>
                            <img src="img/slideshow/galler2y.png" class="img" />
                        </div>
                        <div id="bigger" onClick="ajax('website.php', '#text')" class="slide">
                            <span id="webdesc"><p>S<br />T<br />R<br />O<br />N<br />Y<br /><br />W<br />W<br />W</p></span>
                            <img src="img/slideshow/website.png" class="img" />
                        </div>
                        <div id="bigger" onClick="ajax('applications.php', '#text')" class="slide">
                            <span id="webdesc"><p>P<br />R<br />O<br />G<br />R<br />A<br />M<br />Y</p></span>
                            <img src="img/slideshow/applications.png" class="img" />
                        </div>
                </div>
            </div>
        </div>
        <div id="cont">
            <div id="menu" onClick="ajax('textpl.txt','#text')"><p>MENU</p></div>
            <div id="teleadr">
                <p>e-mail:<a   href="mailto:[email protected]"> makowskaewa&#64;o2.pl</a>&nbsp; &#124; &nbsp; tel: 607079560</p>
            </div>
            <div id="infbox">
                <div id="inf">
                    <p>NA STRONIE:</p>
                    <ul>
<!--this three not work on Opera and Chrome-->
                        <li><div id="bigger" onClick="ajax('gallery.php','#text')"><p>galeria</p></div></li>
                        <p>Moje prace wykonane głównie przy wykorzystaniu programów graficznych takich jak Photoshop, Gimp oraz Blender.</p><br />
                        <li><div id="bigger" onClick="ajax('website.php','#text')"><p>webmastering</p></div></li>
                        <p>Stworzone przeze mnie strony www.</p><br />
                        <li><div id="bigger" onClick="ajax('applications.html','#text')"><p>programowanie</p></div></li>
                        <p>Kilka prostych programów napisanych przy wykorzystaniu php oraz baz danych.</p>
                    </ul>
                </div>
            </div>
            <div id="text">

Everything works correctly on Firefox, but when I use Opera or Chrome I can use only three first div id="text". When I try use second three div, that should load the same subweb like earlier div, there is no reaction. Even pseudo-classes :hover does not work, and firebug doesn’t seem to see these elements.
I tried change id="bigger" to class="bigger", and several ways to connect jquery with not one but every div with one id.

I don’t have idea what to do, maybe somebody could to help me. I hope I wrote everything correctly, because my english isn’t perfect.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Problem solved. It's incorrectly css. #infbox had position:absolute and z-index:-1, so it's cover by another layers and I did it, because then jquery effect looks better. After removed z-index:-1 everything work and look ok.


  2. 0

    Each ID has to be unique on that page. Having multiple elements with the same ID will give you problems, no matter what.

    If you change your divs again to have class="bigger" instead of id="bigger" and then you adapt your code, you should get a lot further already:

    $(document).ready(function(){
        $('div.bigger').click(function(){
            $("#text").animate({ 
            width: "1050px",
            left:"150px",
            padding:"0"
            }, 1500 );
            $('#infbox').css('display','none');
        })
    })

    Make sure that the #text ID is unique as well! It won’t work if it isn’t unique! Same for #infobox

    You also should close your <div id="text"> with </div>, but that might just be your example code that was cut too tightly.

    Global standard of ID attribute

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search