z-index problem

670 views
Skip to first unread message

Peter

unread,
Sep 7, 2012, 6:36:25 AM9/7/12
to jsp...@googlegroups.com
I am having problems with the z-index of connectors/endpoints. Even though the indices are properly set, the connectors and endpoints are still above the text and not behind. Any ideas?

The code:

html:
<div id='asd'>Lorem ipsum <span id='first'>whatever</span> random text and then <span id='second'> following stuff</span></div>

css:
#asd{position:relative; z-index:9999;}

js:

var endpointOptions = { isSource:true, isTarget:true, endpoint:"Dot", paintStyle:{ fillStyle:"#F39814",radius:7 }, enabled:false }; 
var div1Endpoint = jsPlumb.addEndpoint(document.getElementById('first'), { anchor:"AutoDefault" }, endpointOptions ); 
var div2Endpoint = jsPlumb.addEndpoint(document.getElementById('second'), { anchor:"AutoDefault" }, endpointOptions );  
jsPlumb.importDefaults({ConnectorZIndex:1});
jsPlumb.connect({ 
                    source:div1Endpoint,
                    target:div2Endpoint,
                    connector:[ "Flowchart", { stub:[40, 60], gap:10 } ],
                    paintStyle:{ lineWidth:4, strokeStyle:'#F39814' }
                });

Simon Porritt

unread,
Sep 7, 2012, 6:40:58 AM9/7/12
to jsp...@googlegroups.com
are you sure the z indices are correct?  the only z-index directive in that snippet is for an element with id 'asd'.

Peter

unread,
Sep 7, 2012, 6:54:08 AM9/7/12
to jsp...@googlegroups.com
Yes, that is the "wrapper" for the dynamically loaded text. As the spans should inherit from it, I believe this has to be fine. However, the connector is displayed in front of the spans and the text as well.

Simon Porritt

unread,
Sep 7, 2012, 7:06:42 AM9/7/12
to jsp...@googlegroups.com
so the elements you are connecting are children of 'asd' ?  but what is the parent of the jsPlumb elements?  The same?

It's usually a good idea to set explicit z-index values for your nodes and for the jsPlumb elements.

Peter

unread,
Sep 7, 2012, 7:14:43 AM9/7/12
to jsp...@googlegroups.com
Yes, the elements I'm connecting are the children of 'asd', in this case the spans 'first' and 'second'. I've added jsPlumb.importDefaults({ConnectorZIndex:1}); to set the z-index of jsPlumb elements to one, and everything within 'asd' has a z-index of 9999. How do you set explicit z-index values for the jsPlumb elements? Could you maybe try if it works for you?

Simon Porritt

unread,
Sep 7, 2012, 7:18:07 AM9/7/12
to jsp...@googlegroups.com
You should use CSS for this.

Peter

unread,
Sep 7, 2012, 7:31:15 AM9/7/12
to jsp...@googlegroups.com
Still no change...

<html>
    <head>
        <style type='text/css'>
            #asd{position:relative;z-index:9999;}
        </style>
        <script type="text/javascript" src="../../web/jquery.min.js"></script>
                <script type="text/javascript" src="../../web/jquery-ui-1.8.22.custom.min.js"></script>
            <script type="text/javascript" src="../../web/jquery.jsPlumb-1.3.13-all-min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {

var endpointOptions = { isSource:true, isTarget:true, endpoint:"Dot", paintStyle:{ fillStyle:"#F39814",radius:7 }, enabled:false }; 
var div1Endpoint = jsPlumb.addEndpoint('first', { anchor:"AutoDefault" }, endpointOptions ); 
var div2Endpoint = jsPlumb.addEndpoint('second', { anchor:"AutoDefault" }, endpointOptions );  

jsPlumb.importDefaults({ConnectorZIndex:1});
jsPlumb.connect({ 
                    source:div1Endpoint,
                                        target:div2Endpoint,
                                                            connector:[ "Flowchart", { stub:[40, 60], gap:10 } ],
                                                                                paintStyle:{ lineWidth:4, strokeStyle:'#F39814' }
});
$('._jsPlumb_endpoint, ._jsPlumb_connector, ._jsPlumb_overlay').css('z-index','1');
});
</script>
</head>
<body>
<div id='asd'>Lorem ipsum <span id='first'>whatever</span> random text and then <span id='second'> following stuff</span></div>
</body>
</html>

Simon Porritt

unread,
Sep 7, 2012, 7:38:40 AM9/7/12
to jsp...@googlegroups.com
i don't see what you have done here. you've still got a single z-index directive for the 'asd' element and nothing for the nodes of jsplumb stuff.

Peter

unread,
Sep 7, 2012, 7:42:10 AM9/7/12
to jsp...@googlegroups.com
I have put it on jsfiddle -> http://jsfiddle.net/qwJ6X/

(the jsplumb stuff -> $('._jsPlumb_endpoint, ._jsPlumb_connector, ._jsPlumb_overlay').css('z-index','1'); )

ashwin acharya puthige

unread,
Sep 7, 2012, 9:56:45 AM9/7/12
to jsp...@googlegroups.com
Sounds like what you want is zindex = -1 .
Try  .... _jsPlumb_overlay').css('z-index','-1');  in your css .

Peter

unread,
Sep 7, 2012, 10:05:39 AM9/7/12
to jsp...@googlegroups.com
Thanks, that really works! Although I'm still surprised why the previous solution did not work, yet logically was sound.
Reply all
Reply to author
Forward
0 new messages