How to stretch this CSS menu to 100%

Question 1

Question by John Smith

Here’s a fantastic CSS menu:

The only disadvantage its not stretched to 100%… if it has 2 elements, it should be 50%/50%, if 4 items then 25%/25%/25%/25% just like they were table cells. How to do that? Im new to CSS

Answer

Answer by Starx

Starx

Modify its width as 100% will make the menu span to full width.

#myfantasticmenu { width: 100%; }

I simulated the change with firebug and the needed Style defination was

#nav {
    overflow: hidden; /* To clear the div */
    width: 100%;
}

And about the part, where you need 50/50 for two and 25 each when the item are 4, you will require some javascript to do so.

If you consider using jQuery then it will something like

childs= $("#myfantasticmenu").children('a'); //grab the list items
childs.css('width', (100/childs.length)+%);

If avoiding scripting is your MAJOR target, then bring tables into the games, they automatically do the behavior you need.

Question 2

Question by python

python

How can I disable the “Save Video As…” from the right-click menu to prevent from clients from downloading the video?

And, are there is more complete solutions that prevent the client from accessing the file path directly?

Thanks

Answer

Answer by Joseph the Dreamer

Joseph the Dreamer

In reality, you can’t. But you can make it harder to steal.

In my experience grabbing videos, I just use the debugger of the browser. I prepare the network tab and let the video load. Then I look for it in the loaded resources, grab it’s url, and open it in another tab to download it.

the routine was basically:

load the video
get the link
load it again but this time, not using the player

One thing you can do to prevent this method is to prevent the link from being reusable. Once the player loads using the disposable url, the server makes it unusable.

Similar to CSRF prevention, create a token and store it in the session. At the same time, place this token in a hidden input tag, cookie, or in the video link itself when generating the page. Then when the player loads, have it request for a access of the video using the token. If the token sent exists in the session, the server allow access to video. After access is allowed, delete that token from the server-side so that further use of the same token will be invalid.

To add to that, have the token expire on the server after several minutes of being unused, enough time for the page to use it for the video request but short enough for one to get the link and use it.

This method will NOT prevent:

Tools that pick up the file from the cache. Streamed videos (especially those done streaming) are stored in the cache of the browser.
This will not prevent tools that intercept the player’s video request. Some tools hijack the request that uses the token to gain access.

After scouring the net about customizing the context menu of an html5 video, i found this article. it mentions about having the video be overlayed by a div to prevent direct click on it (thus no right-click to the video). as for the controls, i believe one can build your own video controls in JS so that it is outside of the video (so that you can overlay the div in front of the video without covering the controls).

Answer

Answer by Starx

Starx

Simple answer,

YOU CANT

If they are watching your video, they have it already

You can slow them down but can’t stop them.

Question 3

Question by Narek

Narek

I have implemented my webpage menu by inline li-s of ul. li has a colored border and contains a. Now onmousehover I need to change color of the text inside a and move it 2px up by not moving the li border. How can I do that?

Answer

Answer by Starx

Starx

The trick is too remove the top padding a bit and increase the bottom padding a bit to maintain the markup integrity.

I have set up a simple example of what you want. Check it on the fiddle here

Question 4

Question by PD24

PD24

I have the following menu which cascades on hover but i need to add some conditional checks like if the mouse is on hover on the div then keep the menu sliding down.

Also if the mouse is hovered on the LI then check them menu down.

As you can see it just slides down and back up once you leave the “div”.

Im stuck… and have tried for hours searching for if statements etc, i just cant get the syntax correct.

my example

Answer

Answer by ShadowScripter

ShadowScripter

Here is a working example

HTML

<div id="leftWrap">
    <div id='accordion'>
        <ul>
           <li><div>Absorption</div>
               <ul style="display: none;">
                   <li>Accessories</a>
                       <ul style="display: none;">
                           <li>AA500AFG</li>
                           <li>AA500F</li>
                           <li>AA500G</li>
                           <li>AA990F</li>
                       </ul>
                   </li>
                   <li>Consumables</li>
                   <li>Products</li>
               </ul>
           </li>
           <li><div>Fluorescence</div>
               <ul style="display: none;">
                   <li>Accessories</li>
                   <li>Consumables</li>
                   <li>Products</li>
               </ul>
           </li>
       </ul>
    </div>
</div>

Javascript/JQuery

jQuery(document).ready(function() {
    $('#accordion ul > li').hover(function() {
        $(this).children("ul").slideToggle('slow');
    });
});

If you ask me, it gets really messy when you use mousehover/mouseenter for such things. I’d prefer using a click event after the first hover or something, this way the user won’t get annoyed by all that movement.

jQuery(document).ready(function() {
    $('#accordion ul:first-child > li').hover(function() {
        $(this).children("ul").slideToggle('slow');
    });

    $('#accordion ul:not(:first-child) > li').click(function(){
        $(this).children("ul").slideToggle('slow');
    });
});

Answer

Answer by Starx

Starx

^{I tried to fiddle in your fiddle, but the markup and css are a lot confusing.}

As Rikudo said, you should make the div, its child its much easier to do it that way. I have created a simplest accordion skeleton. You can see it here.

It does everything you want. However for the customizations and others things, I will leave it up to you.

Tag: menu

How to stretch this CSS menu to 100%

Question by John Smith

Answer by Starx

Prevent HTML5 video from being downloaded (right-click saved)?

Question by python

Answer by Joseph the Dreamer

Answer by Starx

YOU CANT

Move text baseline in <li> 2 px up

Question by Narek

Answer by Starx

if mouse on hover of div then display menu

Question by PD24

Answer by ShadowScripter

Answer by Starx

Please fill the form - I will response as fast as I can!