Benjamin,
I know. I thought the preferred method for event handling was to use the
bind method. Isn't .hover() just a short cut for what I've done? Always
happy to learn something new. :o)
Thanks,
Chris
On 7/26/07, Benjamin Sterling <[EMAIL PROTECTED]> wrote:
Also,
this:
$(function(){
$(".ActionSelection").bind("mouseover",function(){
$(this).addClass("Underlined");
$(this).addClass("ActiveLinkColor");
}).bind("mouseout",function(){
$(this).removeClass("Underlined");
$(this).removeClass("ActiveLinkColor");
}).bind("click",function(){
DisplayScreen($(this).attr("method"));
});
});
can be writen:
$(function(){
$(".ActionSelection").hover(function(){
$(this).addClass("Underlined")
.addClass("ActiveLinkColor");
},
function(){
$(this).removeClass("Underlined"). removeClass
("ActiveLinkColor");
}).bind("click",function(){
DisplayScreen($(this).attr("method"));
});
});
On 7/26/07, Christopher Jordan < [EMAIL PROTECTED]> wrote:
>
> Hi folks,
>
> I'm having trouble with a bit of jQuery/CSS stuff, and I'm hoping
> someone here could explain what the heck I'm doing wrong. I am not by any
> stretch a CSS guy. I do what I can to get by. Also (and I know this sticks
> in lots of people's craw), this only *has to* work in IE. This is an
> internal app for a company who does not use FF or any other browser.
>
> I've got the following in my main index file:
>
> <script src="/Include/JS/jquery.js"></script>
> <script>
> $(function(){
> $(".ActionSelection").bind("mouseover",function(){
> $(this).addClass("Underlined");
> $(this).addClass("ActiveLinkColor");
> }).bind("mouseout",function(){
> $(this).removeClass("Underlined");
> $(this).removeClass("ActiveLinkColor");
> }).bind("click",function(){
> DisplayScreen($(this).attr("method"));
> });
> });
> ...
> </script>
>
> then...
> <body>
> <div class="MainWrapper"> <!--- This creates the border and
> colors that we're used to on our submodals --->
> <div class="LeftPanel">
> <div class="ActionHeader">Add New</div>
> <div class="ActionSelection"
> method="displayAddCancelCode">Cancel Code</div>
> <div class="ActionSelection"
> method="displayAddCancelReason">Cancellation Reason</div>
> <br>
> <div class="ActionHeader">Edit/Delete</div>
> <div class="ActionSelection"
> method="displayEditCancelCode">Cancel Code</div>
> <div class="ActionSelection"
> method="displayEditCancelReason">Cancellation Reason</div>
> </div>
> <div class="RightPanel">
> <div class="StatusBar"></div>
> <div class="RightPanelContent"></div>
> </div>
> </div>
> </body>
>
>
> The relevant CSS is: (don't mind the #someVar# it's a ColdFusion thing.
> Those are evaluated to actual colors before they hit the browser)
> div.MainWrapper{
> height : 413px;
> width : 100%;
> margin : 2px 0px 0px 0px;
> padding : 3px;
> border : 3px solid
> #ThisMasterConsoleTableBorderColor#;
> background-color: #ThisMasterConsoleTableBackgroundColor#;
> }
> div.LeftPanel{
> float : left;
> border-right : 1px solid #ThisMasterConsoleTableBorderColor#;
> width : 150px;
> height : 400px;
> }
> div.RightPanel{
> float : right;
> border : 1px dashed ##A0A0A0;
> width : 400px;
> height : 400px;
> }
> div.StatusBar{
> color : ##A0A0A0;
> font-weight : bold;
> width : 100%;
> height : 15px;
> border-bottom : 1px dashed ##A0A0A0;
> text-align : right;
> }
>
> /* Generic Classes */
> .ActionHeader{
> font-weight : bold;
> color : #ThisMasterConsoleHeaderTextColor#;
> background-color: #ThisMasterConsoleHeaderBackgroundColor#;
> padding : 3px;
> margin-right : 3px;
> cursor : default;
> }
> .ActionSelection{
> padding-left: 5px;
> cursor : pointer;
> }
> .Underlined{
> text-decoration: underline;
> }
> .ActiveLinkColor{
> color: green;
> }
>
> Okay, so I've got a nice box with a three pixel border around it and it
> sits in a browser window sized just right leaving a two-pixel space between
> the edge of the window and the three pixel border. When I mouseover one of
> the ActionSelection divs the text contained within dutifully underlines and
> changes color. However, the MainWrapper also seems to get two pixels taller
> leaving me with a three pixel border on the top, left and right and a one
> pixel border on the bottom! :o( The two pixel margin between the browser
> window's bottom edge and that one remaining pixel of the bottom three pixel
> border however, remains unchanged.
>
> I can attach some before and after screen shots if that would help.
> Unfortunately, the code resides behind a firewall, and is not accessible to
> the public. :o(
>
> Can anyone help me, please?
>
> Many Thanks,
> Chris
>
> --
> http://cjordan.us
--
Benjamin Sterling
http://www.KenzoMedia.com <http://www.kenzomedia.com/>
http://www.KenzoHosting.com <http://www.kenzohosting.com/>
--
http://cjordan.us
