i'm writing calendar , pulling event information out of database. then, i'm doing processing (server-side) try , make clashing "event" divs overlap sensibly on calendar. i'm passing data browser, jquery positions "event" divs.
because overlap, thought i'd jquery pop each div front (by changing css z-index property) on mouseover, pop on mouseout.
this involved 1st use of jquery data binding, works ok, there's problem: when mouse on (simple text) content within 1 of "event" divs, jquery treats though i'm mousing out of div itself.
i've made another, simpler page test jquery's behaviour, , in page mouseover behaviour i'd expect.
any ideas workarounds, problems code or bugs appreciated - thanks!
here's code page:
<html> <head> <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="/js/jquery-ui-1.8.9.custom.min.js"></script> <script type="text/javascript"> var minx = 200; var miny = 200; function renderevent(id, content){ $('body').append('<div class="event" id="event_' + id + '">' + content + '</div>'); return true; } function positionevent(id, starttime, endtime, x, ofs, w){ x += 30; ofs = ofs - 1; $('#event_' + id) .position({ 'my': 'left top', 'at': 'left top', 'of': '#time_' + starttime, 'offset': x + ' ' + ofs }) .width(w) .height( ((endtime - starttime) * 60) + (endtime - starttime - 2) - ofs ) return true; } function bindeventdata(id){ var zindex = '9' + (1000 + id); $('#event_' + id) .css('z-index', zindex) .bind("mouseout", {z: zindex}, function(e){ $(e.target) .css('z-index', e.data.z); //.css('-moz-box-shadow', 'none') //.css('-webkit-box-shadow', 'none') //.css('box-shadow', 'none'); }); return true; } function bindeventevents(){ $('div.event').mouseover(function(e){ $(e.target) .css('z-index', '9999999'); //.css('-moz-box-shadow', '0px 3px 3px #999') //.css('-webkit-box-shadow', '0px 3px 3px #999') //.css('box-shadow', '0px 3px 3px #999'); }); } $(document).ready( function(){ var json = [ {"id":0,"start_time":10,"end_time":16,"x":0,"ofs":0,"w":65,"content":"event #0:<br />10:00 - 16:00"}, {"id":1,"start_time":10,"end_time":12,"x":26,"ofs":3,"w":65,"content":"event #1:<br />10:00 - 12:00"}, {"id":2,"start_time":10,"end_time":15,"x":52,"ofs":6,"w":65,"content":"event #2:<br />10:00 - 15:00"}, {"id":3,"start_time":13,"end_time":19,"x":0,"ofs":0,"w":65,"content":"event #3:<br />13:00 - 19:00"}, {"id":4,"start_time":15,"end_time":18,"x":0,"ofs":0,"w":65,"content":"event #4:<br />15:00 - 18:00"}, {"id":5,"start_time":16,"end_time":17,"x":0,"ofs":0,"w":65,"content":"event #5:<br />16:00 - 17:00"}, {"id":6,"start_time":16,"end_time":19,"x":26,"ofs":3,"w":65,"content":"event #6:<br />16:00 - 19:00"}, {"id":7,"start_time":17,"end_time":18,"x":0,"ofs":0,"w":65,"content":"event #7:<br />17:00 - 18:00"} ]; if(json.length > 0){ for(i = 0; < json.length; i++){ oevent = json[i]; id = oevent.id; starttime = oevent.start_time; endtime = oevent.end_time; x = oevent.x; w = oevent.w; ofs = oevent.ofs; content = '<span class="event_text">' + oevent.content + '</span>'; r = renderevent(id, content); r = positionevent(id, starttime, endtime, x, ofs, w); r = bindeventdata(id); } bindeventevents(); } } ); </script> <style> body { font-family: arial, helvetica, sans-serif; } .time_wrapper { background-color: #ccf; border-top: 1px solid #99c; width: 180px; min-height: 60px; font-size: 0.65em; } .event { background-color: #cfc; border: 1px solid #6c6; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; font-family: arial, helvetica, sans-serif; font-size: 0.7em; width: 100px; padding: 2px 1px; } </style> </head> <body> <div id="wrapper"> <div class="time_wrapper" id="time_9">09:00</div> <div class="time_wrapper" id="time_10">10:00</div> <div class="time_wrapper" id="time_11">11:00</div> <div class="time_wrapper" id="time_12">12:00</div> <div class="time_wrapper" id="time_13">13:00</div> <div class="time_wrapper" id="time_14">14:00</div> <div class="time_wrapper" id="time_15">15:00</div> <div class="time_wrapper" id="time_16">16:00</div> <div class="time_wrapper" id="time_17">17:00</div> <div class="time_wrapper" id="time_18">18:00</div> <div class="time_wrapper" id="time_19">19:00</div> </div> </body>
not sure why behavior you're seeing happening, however, modified use hover instead of mouseenter , mouseout , works.
function bindeventdata(id){ var zindex = '9' + (1000 + id); $('#event_' + id) .css('z-index', zindex) .hover(function(e){ $(this).css('z-index', '9999999'); }, function(e){ $(this).css('z-index', zindex); } ); return true; } fiddle: http://jsfiddle.net/zxwqd/2/
Comments
Post a Comment