I have a horizontal scroll-able div with list items.which looks like below. I want the list to be autofocused when user clicks on any list items. Presently, the list item sits at its position. Is there any way in Javascript or Jquery to autofocus the list item ?
Following are the CSS which I used for making this horizontal scroll div
on ul
white-space: nowrap;
overflow-x: auto;
on li
display: inline-block !important;
float: none;
You can try this, $(YourElement).trigger("focus").
Or even most easy, $(YourElement).click();
Dont forget to use the :active pseudo class in your css code for 'YourElement'.
Related
I'm using superfish jquery plugin. I'm trying to make the second submenu to have the same height as the first submenu. I also want to position the second submenu just under the menu as indicated in the screenshot. But i don't know how to do it. I've tried making the parent as display: contents but if I do that everything just stops working
This can be solved by adding just two css-rule.
By default all submenus (i.e. the <ul>s) are absolutely positioned with respect to the parent <li> element. So, to make the third level submenu positioned with respect to the top level menu, unset position: relative; on all second level <li>s:
.sf-menu ul li {
position: unset;
}
To make the second submenu at least as high as the first submenu, you can set min-height on the second submenu's ul:
.sf-menu ul li ul {
min-height: 100%;
}
You might want to set the background color on that css rule or do some further styling to fit your needs.
I'm using CSS to bring down a header element when the user hovers over it. Is it possible to also bring down the rest of the page so that the header overlaps absolutely nothing? How would this be done?
Example of header here: http://dev.handyvet.org/VetProsDevSite/_MASTER/views/vetpro%20users/vet_pro_registration_3.html
Thanks!
You just need to use the height of the nav div, like this:
nav {
width: 100%;
height: 50px;
background: #000;
color: #fff;
}
.active {
height: 200px;
}
I made you a very simple fiddle: http://jsfiddle.net/rnc8L53L/
I used jQuery to toggle the .active class, on the nav when the button is pressed. The .active class overrides the "height:50px" rule , which is the initial state of the nav class.
It's just a very simple example that. It can be done with Javascript too but the event handling is a little more complex. Hope it helps.
You can move the whole page instead of header. Set negative top margin for page as default and decrease it's value when you need it
I wonder if it is possible to give a span a maximum width.
I tried using the following css
display: block;
max-width: 300px;
But the width gets ignored when the text content of the SPAN doesn't fit into the span.
I would like to cut the visible part of the span to the defined max-width.
Is this possible?
Any suggestions?
You'll want to use whitespace: nowrap and overflow: hidden on your span to force it all on one line and truncate the text.
JSFiddle
http://jsfiddle.net/JZYWg/
You have to handle the overflow to avoid expanding.
e.g. Adding:
overflow: hidden; or overflow: auto;
Add overflow:hidden to the css of your span. This will make the text cut off
More info
If I use display: inline-block - the span wraps at 300px or you can use overflow: hidden as suggested by others.
See: http://jsfiddle.net/U6R2A/
I am using Html and Css to create DropDown Menu in Vertical Direction as shown here.
[http://jsfiddle.net/techspartan/8u8NH/][1]
I am using div to divide my page in two parts such that menu is displayed on left side followed by some content in the remaining space. For example if width of webpage is 1024px than I am allocating 200px to menu and remaining 824px to div that has content. But after using div I am not able to navigate to submenu "3.4.1" and "3.4.2" as shown in the url posted above as I can understand this is happening because the submenu is crossing the space allocated to it.
So how can I solve this problem and I don't want to allocate more width to my menu and that menu should be followed by content.
Any help would be most welcome.
Thanks.
Quick fix is to ensure that the Z-Index is for your nav is higher than the z-index for your content.
The reason it's closing in your fiddle because once you touch the text, you're no longer hovering over your nav but instead hovering over your text.
#nav li {
background-color: #000000;
margin-top: 1px;
position: relative;
width: 125px;
border-radius: 15px;
z-index:10;
}
Increasing z-index on the #nav li fixes this issue.
Fiddle
I'm having trouble left aligning the last row of a 'ul' element inside a fluid container. I have the container centering properly with the page but it ends up centering the last row of elements when they are not fully populated. Can't seem to figure out the solution.
I'm using Twitter Bootstrap at the very core with container-fluid for the outer div. And centering the list elements like so:
ul {
text-align: center;
list-style:none;
}
ul li {
display: inline-block;
}
I've tried using text-align: justify and centering the div with margins but it doesn't seem to move with the resizing of the page. Suggestions?
Here are two screenshots of what's happening:
JS Fiddle Example: http://jsfiddle.net/Z9uqQ/
Last line should be aligned left with the same vertical edge as 1.
If I understand correctly margin: 0 auto will do:
ul {
width: 90%;
margin: 0 auto;
}
Demo: http://jsfiddle.net/elclanrs/GdAvm/