CSS/JQuery Help

[Pho3nix]

Alright so I have this code :

<style type="text/css">
/* PM and HDI Menu*/
#OnlineServices{position:relative; display:block; height:40px;margin:6px 0;z-index:1000}
.OS-container-collapsed{height:38px; width:298px; overflow:hidden;  position: absolute; top:0; right:0; display: block; border: 1px #ccc solid;background-color:#eee; background-image:url(/_layouts/images/MNetImages/icon-expandmenu.png); background-position:255px 0px; background-repeat:no-repeat;}
.OS-container-collapsed:hover{background-color:#f8f8f8;}
.OS-container-expanded{ height:auto; width:620px; overflow:visible; position:absolute;  top:0; right:0; display: block; border: 1px #ccc solid;background-color:#eee; background-image:none; -moz-box-shadow: 0px 1px 2px #999;-webkit-box-shadow: 0px 1px 2px #999;box-shadow: 0px 1px 2px #999; float:right;z-index:1000}
.OS-title {padding: 10px;font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;font-size: 14px;color: #333;cursor: pointer;}
.OS-tip {overflow:hidden;padding: 5px 0 10px;background-color:white;position:; left:-1px; width:620px; z-index:100}
.OS-tip-col {display: block;width: 300px;float: left;margin-left: 10px;}
.OS-tip-col-title {font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;font-size: 12px;color:#999;text-transform:uppercase;margin:5px 0;display:block;}
.OS-tip ul {margin:0;padding:0;list-style: none;font-size: 11px;font-family: Tahoma, Arial, sans-serif;}
.OS-tip li {margin:0; padding:0 0 0 15px;background: url('li-separator.gif') no-repeat 0 4px;display: block;}
.OS-tip li> a {color: #0f7495;display: inline-block;padding: 2px 3px;text-decoration:none;}
.OS-tip li > a:hover {color: white;background-color: #0f7495;}
</style>

<br />
<div id="OnlineServices">
<div class="OS-container-collapsed" id="OS-container">
<div class="OS-title">
Project Manager Toolkit and How Do I?</div>
<div class="OS-tip">
<div class="OS-tip-col">
<strong class="OS-tip-col-title">Project Manager Toolkit</strong>
    <br />
<ul>
<li>
     <a href="http://google.co.za" onfocus="OnLink(this)">
     Acronyms</a></li>
<script type="text/javascript">
    $(document).ready(function(){
     var timer;
        $('#OS-container').hover(
            function(){
             if(timer) {                         
               clearTimeout(timer);
               timer = null
               } 
                timer = setTimeout(function(){
                    $('#OS-container').removeClass('OS-container-collapsed');
                    $('#OS-container').addClass('OS-container-expanded');
                }, 500);
            },
            function(){
             if(timer) {                         
               clearTimeout(timer);
               timer = null
               } 
                $('#OS-container').removeClass('OS-container-expanded');
                $('#OS-container').addClass('OS-container-collapsed');
            });

    });
</script>

Using it on a SharePoint Site From a Custom Editor WebPart but it doesn't seem to work for some reason. Anyway I could drop the javascript and use just CSS to make the hover work?

 

[rorz0r]

I'm assuming you are actually pulling in the jquery library somewhere?

What does "OnLink" do?

You won't be able to have the 500ms delay if you're using pure CSS but you can do it. Pretty much just put all your "-expanded" stuff in a :hover.

 

[guest2013-1]

I'd recommend dropping the JS and just use CSS for the hover

 

[Nefertiti]

Are there any javascript errors? I assume you are referencing jquery somewhere else, but the order of the scripts could be wrong. Where are you referencing the jquery libary, in one of the master pages?

 

[Pho3nix]

I'd recommend dropping the JS and just use CSS for the hover

Will look into this

Are there any javascript errors? I assume you are referencing jquery somewhere else, but the order of the scripts could be wrong. Where are you referencing the jquery libary, in one of the master pages?

Yep, referencing them in my master page but still nothing

 

[Nefertiti]

Will look into this

Yep, referencing them in my master page but still nothing

and any javascript errors? If you use firefox error console what does it list?

I had to do reference my jquery in the header area, but after all the other javascripts (including sharepoints) loaded. that solved my problem once before.. error messages will help...

 

[Murdoc]

http://jsfiddle.net/AKnuj/

Think its the jquery reference

Can you fire an alert on doc.ready?

 

[russellO]

http://jsfiddle.net/AKnuj/

Think its the jquery reference

Can you fire an alert on doc.ready?

I think it is your reference as well. I copied your html+css and added the Google hosted library to the top and it worked perfectly.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

My personal opinion is to keep the jQuery and not do it solely in CSS. Separate the layers. It's easy for some designer to come along and update the look + feel of your site and break the hover.