wongadob

Ah never noticed the ones on messageitem.

OK here it is <div class = "messageitem" x-blackberry-focusable="true" onmouseover="style.backgroundColor='#880000';" onmouseout="style.backgroundColor='#ffffff';" data-bind = "click: showthread.bind($data, thread())"> <div class="picture" data-bind="html: picurl"></div> <div class="textpart"> <div class="mi_name" data-bind = "click: initMemberProfile.bind($data, userID())" x-blackberry-focusable = "true" onmouseover = "this.style.color='#444444'; this.style.backgroundColor='#ff0000'; this.parentNode.parentNode.style.backgroundColor='#00ff00';" onmouseout = "this.style.color='#16509e'; this.style.backgroundColor='transparent'; this.parentNode.parentNode.style.backgroundColor='#880000';"> <p data-bind = "text: user"></p> </div>

From the color coding of the code I posted above it would appear they are ?

Yeah I was missing the 'this.' But that does not solve the problem. Interestingly the missing this. did not seem to make any difference. Maybe it assumes this. if it is part of element. Yes I am accessing the element itself in this instance. I make the element itself have a red background (this is test to show navigation is working) but I also want to access the 'parent.parent' element to switch its red background off! Thanks

I think the 'this' in this instance should be OK should it not as it is inline actually IN the element.

Hmm not working - Here is my code <div class = "messageitem" id = "thrdmes" x-blackberry-focusable="true" onmouseover="style.backgroundColor='#880000';" onmouseout="style.backgroundColor='#ffffff';" > <div class="picture" data-bind="html: picurl"></div> <div class="textpart"> <div class="mi_name" data-bind = "click: initMemberProfile.bind($data, userID())" x-blackberry-focusable="true" onmouseover="style.color='#444444'; this.style.backgroundColor='#ff0000'; this.parentNode.parentNode.style.backgroundColor='#00ff00';" onmouseout="style.color='#16509e';this.parentNode.parentNode.style.backgroundColor='#880000';"><p data-bind = "text: user"></p></div> <div data-bind = "html: readicon" ></div> I did not put the rest of the div in here because it goes on to do all sorts of other fields I did not want to confuse things., This is the definition from the div I want to access - messageitem to the element I want to highight, but unhighlight main messahe Thanks

so I guess using this.parentNode.parentNode.style.backgroundColor = "#ccc" would work ?

if it is any help it is 2 'parents' up how could I change this document.getElementById('bigOne').style.backgroundColor='#ccc'" to select the item that is its 'grand-parent' so to speak?

Also not sure how to access the ID as it is in a knockout.js for each tempate. i.e. it generates many items of the same div. I tried adding an ID thinking it might add a number suffix but it doesn't. I tend to use class to identify for CSS but that does not matter because they all have the same CSS rules, but of course the onmouseover is specific to the one div. Wongadob

I will try to change it using the ID, but I thought maybe the system would auto change it back since technically the mouse is still over it. I can't use hover as it does not work with the system I am using Webworks for Blackberry web apps Thanks Wongadob

Imagine a list of facebook posts. Within those post are a number of elements that are clickable - lets say like and reply for example. I am using a cursor based system so i need to be able to highlight the main message, then the like and then the reply. But the like and the reply are contained in the same div as the actual message (a big container div) I need to change the background of each element as it passes over, I have to use onmouseover as they are not form input elements so I believe I can't use onfocus. But when I put the cursor over the like icon I want the background colour of the main message to become unhighlighted. Currently I have onmouseover and onmouseout events on each element. Is there any way to say on mouse over this element, unhighlight that element (even though the mouse is technically still over it) and still have it return to being highlighted when the mouse is off the like element? Any help much appreciated etc... wongadob

Thanks, think I may have to add the new invivible divs with higher z-values, thanks.

Sorry but not sure that I understand that, The container has to be at a fixed position. it is 34 pixels from the top and 5 in from the right. (top right corner of the page). This is the code so you understand what it is doing (if you didn't already) <div id = "iconslist"> <ul> <li> <a href ="display-notifications.html"> <img id = "icon-note" src = "art/icon-notification.png" alt = "Notifications"/></a></li> <li> <a href ="display-private.html"> <img id = "icon-privmess" src = "art/icon-messages.png" alt = "messages"/></a></li> <li> <a href ="display-groupselect.html"> <img id = "icon-grp" src = "art/icon-group.png" alt = "Logout"/></a></li> <li> <a href ="index.html"> <img src = "art/icon-home.png" alt = "Logout"/></a></li> </ul> </div> <div id = "unread_container"> <div id = "unreadbox_notifications" class = "unread_box"><span id = "unread_notifications" data-bind = "text: cntNotifications"></span></div> <div id = "unreadbox_private" class = "unread_box"><span id = "unread_private" data-bind = "text: cntPrivate"></span></div> <div id = "unreadbox_group" class = "unread_box"><span id = "unread_group" data-bind = "text: cntGroup"></span></div> </div> Then the css is as follows... #iconbar ul { margin-right: 5px; margin-top:1px;}#iconbar li { list-style-type: none; float: right; border: 0;}#iconbar a { display: block; border: 0;}#iconbar a img { border: 0;}#iconbar a:active, a:link, a:hover, a:visited { border: 0;}#unread_container{position: fixed;z-index:100;clear: right;float: right;top: 34px;right: 5px;height: 12px;font-size: x-small;}.unread_box{float: right;width: 20px;margin-left: 19px;margin-right: 5px;background-color: red;opacity:0.7;color: white;border-radius:2px;text-align:center;} so there are 3 icons all floated right with fixed widths

I have a div that is semi transparent and displays a counter above an icon which I need to be clickable. The counter takes up about 3/4 of the image when visible. However it is preventing the icon below from being selected when clicked on as the new div area is blocking the click. Is there any way that you can make the div invisible to the mouse click too so it will select the icon(anchor) underneath?

Test.html @dsonesuk I have given it another bash and still get the same results. As I say tried in all browsers I have. IE9, Firefox 7.1, Chrome 15.0.874.120m (strange version no?). I also tried all IE version number if defs that you highlighted. Hmmm. I feel I might have to use the Javascript approach if viable. I have attached the file, would you be so kind to give it a whirl to see if it works on yours or am I doing some strange shinanigans. BTW it does kind of work sometimes, when you boot it up the headers are fixed for a few seconds then if you are moving up and down it stops working. This is only for a very small amount of time (working).

Hmm, What do you think about the Javascript idea? I have had a bit of a dig and it seems possible.

I have copied and pasted into a txt doc named test.html and it does not fix the top headers in the Y. Works fine in the X as I would like it to, but the headers are not fixed in the X. I have tried in Mozilla, IE & Chrome same result. All I have done is a straight copy and paste. No edits. Then after that did not work uncommented in IE 8 mods and same result? Do you think it would be possible to do in Javascript? Hide header div scroll bar, but then set based on bottom div scrollbar location. Can you even do that. is there a javascript event that is called each frame or an event that is called when a scrollbar is scrolled? Ta

Sorry to take so long to get back on this one. I did try the theories you suggested here, but cannot get them to work with mine. However I did notice that your headings are not fixed in the Y which is really important as that is why I wanted to do the fixed header in the first place so that the table headings always stay on the screen when scrolling in the Y. So the user always knows what the heading is. Any further thoughts on this one? Thanks

Hello all, I have a table that I want to have fixed headers when scrolling vertically and yet they scroll along with the body when scrolling horizontally. The data is too wide to fit within one screen, even on some of the larger resolution screens. it;s actual with is about 2400px. Firstly it is not actually one table, but two tables with identical formatting so that they can go into two divs. The top div which I want to stay static when scrolling verticallly and the bottom div which is relative. It all works lovely until I scroll horizontally. The bottom div obviously scrolls, but the top one does not. (because it is fixed) I have searched the internet and read many articles, but surprisingly non are doing what I want to do. There are plenty of examples of fixed windows, but non that are fixed in only 1 direction. I can't see how somebody somewhere has not wanted to do this, surely somebody must have big tables and would like their headers to always be visible. Please tell me I am being stupid and overlooking something. I have attached my CSS file and underneath there are details of the main ID's and what they are #SuperFixedDiv { position: fixed; top: 0px; left: 0px; right: 0px; min-width: 1024px; z-index: 25; background-color: #FFFFFF; } #header { border: 0px; background-image: url("Art/Gradient-background-header.jpg"); background-repeat: repeat-y; float: left; width: 100%; min-width: 1024px; height: 5em; margin: 0px; padding: 0px; clear: both;}#pagetitle { float: left; clear: left; background-color: transparent;}#pagetitle h1{ font-family: "Verdana","Kalimati","Sans-serif"; font-weight: bold; font-size: xx-large; color: #ffffff; padding: 4px; margin: 0px; } #companylogo { float: right; clear: right; z-index: 50; background-color: transparent;}#menu { border: 0px; background-color: #FFFFFF; width: 100%; min-width: 1024px; height: 1em; margin: 0px; padding: 0px; clear: both;}#menu ul { margin-right: 0px;}#menu li { list-style-type: none; float: right; width: 7em; border: 0;}#menu a { display: block; border: 0;}#menu a img { border: 0;}#menu a:active, a:link, a:hover, a:visited { border: 0;} h1{ font-family: "Verdana","Kalimati","Sans-serif"; font-weight: bold; font-size: x-large; color: #ffffff; padding: 2px; margin: 0px; } h2{ font-family: "Verdana","Kalimati","Sans-serif"; font-weight: bold; font-size: large; color: #000000; padding: 0px; margin: 0px;} .tmainviewtable { background-color: #009EE0; font-family: "Arial","Arial","Helvetica","Sans-serif"; font-size: medium; color: #FFFFFF; height: 3em; width: 2500px; min-width: 1024px; max-width: 2500px; border-top: 1px black solid; border-bottom: 1px black solid; } .tloc { width: 110px; border-left: 1px black solid; } .tsite{ width: 110px; border-left: 1px black solid; } .tbusunit { width: 180px; border-left: 1px black solid; } .titem { width: 200px; border-left: 1px black solid; } .taction { width: 200px; border-left: 1px black solid; } .tspecial { border-left: 1px black solid; width: 130px; } .tFM { width: 50px; border-left: 1px black solid; } .tcompliant { width: 90px; border-left: 1px black solid; } .tdatecomp { width: 120px; border-left: 1px black solid; } .tdatereview { width: 120px; border-left: 1px black solid; } .tfreq { width: 100px; border-left: 1px black solid; } .tremedial { width: 100px; border-left: 1px black solid; } .tcnw { width: 120px; border-left: 1px black solid; } .tcomments { width: 160px; border-left: 1px black solid; } .tinforce { width: 180px; border-left: 1px black solid; } .tlastchange { width: 180px; border-left: 1px black solid; } .tnotes { width: 180px; border-left: 1px black solid; } #bottomhalf { position: relative; top: 160px; z-index: 0; margin: 0;}.dmainviewtable { background-color: #CCCCFF; font-family: "Arial","Arial","Helvetica","Sans-serif"; font-size: small; width: 2500px; min-width: 1024px; max-width: 2500px; color: #000000; height: auto; text-align: center; border: 1px white solid; border-collapse:collapse; } .dsitetitle { color: #FFFFFF; background-color: #9999CC; width: 100%; height: 2em; text-align: left; font-size: medium; font-weight: bold; border: 1px white solid; padding-bottom: 1px; } .dloc { width: 110px; border-left: 1px white solid; border-bottom: 1px white solid; } .dsite { width: 110px; border-left: 1px white solid; border-bottom: 1px white solid; } .dbusunit { width: 180px; border-left: 1px white solid; border-bottom: 1px white solid; } .ditem { width: 200px; text-align: left; border-left: 1px white solid; border-bottom: 1px white solid; } .daction { width: 200px; text-align: left; border-left: 1px white solid; border-bottom: 1px white solid; } .dspecial { width: 130px; border-left: 1px white solid; border-bottom: 1px white solid; } .dFM { width: 50px; border-left: 1px white solid; border-bottom: 1px white solid; } .dcompliant { width: 90px; border-left: 1px white solid; border-bottom: 1px white solid; } .ddatecomp { width: 120px; border-left: 1px white solid; border-bottom: 1px white solid; } .ddatereview { width: 120px; border-left: 1px white solid; border-bottom: 1px white solid; } .dfreq { width: 100px; border-left: 1px white solid; border-bottom: 1px white solid; } .dremedial { width: 100px; border-left: 1px white solid; border-bottom: 1px white solid; } .dcnw { width: 120px; border-left: 1px white solid; border-bottom: 1px white solid; } .dcomments { width: 160px; text-align: left; border-left: 1px white solid; border-bottom: 1px white solid; } .dinforce { width: 180px; text-align: left; border-left: 1px white solid; border-bottom: 1px white solid; } .dlastchange { width: 180px; text-align: left; border-left: 1px white solid; border-bottom: 1px white solid; } .dnotes { width: 180px; text-align: left; border-left: 1px white solid; border-right: 1px white solid; border-bottom: 1px white solid; } The main sections areSuperFixedDev which is a container that holds all the bit that I want to be fixed. Within that II have header, pagetitle, logo, menu;s and the headers of the tablebottomhalf - This is a container that holds all the table rows that contain the data and all the sub column ID's that start .dxxxxxxx I think I may need to set up a 3rd dev for just the table headers that is some form of hybrid of the two, But a bit lost on this at the moment. Any help appreciated as always