Is this possible without the help of javascript?
Typically we have menu bars at the top of the page - we place them as a child of body and then absolutely position them e.g. top: 10px; right: 10px;.
What if we want to achieve the same goal but as a context menu further down the page?
I have started a fiddle to give an idea - here there's no positioning, we just have the default of overflow: visible.
I can't absolutely position it because I don't know the x,y due to the dynamic nature of the content that precedes it.
The only way I can think of is go down the traditional route of the top nav bar, and with javascript find the x,y of it's container and position it there. However I would need to manage that if the content that precedes it changes then it's position needs to change also.
Does anyone know of a "stick-to" jquery method. Or even better achieve it with pure css?
Thanks
here's my crude fiddle - click "one" http://jsfiddle.net/hHR23/1/
I think you want this but I'm not certain from your description:
http://jsfiddle.net/samih/hHR23/2/
Notice this:
.section {
height: 58px;
background-color: yellow;
position: relative;
}
And this:
.menu {
position: absolute;
}
Now your menu will follow with the "dynamic" page because the absolute position is relative to the "position: relative" container.
Another approach - Fiddle.
HTML
<div class='header'>Header</div>
<div class='floatingmenu'>
<ul class="menu">
<li>One
<ul class="sub-menu">
<li>one a</li>
<li>one b</li>
<li>one c</li>
<li>one d</li>
<li>one e</li>
<li>one f</li>
<li>one g</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
CSS
.header {
height: 40px;
background-color: blue;
}
.floatingmenu {
width: 30%;
height: 30%;
background-color: green;
color: white;
border: 10px solid white;
border-radius: 10px;
margin: 20px auto;
}
.footer {
height: 200px;
background-color: yellow;
}
Related
I have spent about an hour trying to find a solution that can work, however, none of them come close to my desired goal. I am not expecting someone to spend the time creating it for me (its a lot of work), but I want to know how I can achieve it. Links or js fiddle would be amazing.
So this sidebar I am working on. It should have three states.
The first and second state show up on table onwards.
The default state is when the sidebar is loaded.
The second state is what happens when the user clicks on one of the icon images that are seen in the first image. It now expands to show the additional navigation. (Ex. Icon says Friends, and the new menu that appears has a list of like 10 people).
The Third state only appears on mobile. It basically eliminated the icon sidebar seen in the Default State (first image)
I appreciate any advice on how to solve this. I have tried so many different things and none come close to what I want.
Is this what you are looking for?
var titles = $('.title');
titles.each(function() {
$(this).on('click', function() {
$(this).next().toggleClass('active')
})
});
$('.toggle').on('click', function() {
$('.sidebar').toggleClass('hide');
});
.toggle {
position: fixed;
z-index: 1000;
}
.sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 200px;
padding-top: 20px;
border-right: 1px solid black;
}
.group {
margin-top: 16px;
}
.title {
cursor: pointer;
border-bottom: 1px dashed black;
}
.list {
max-height: 0;
overflow: hidden;
}
.list li {
margin-top: 4px;
}
.active {
max-height: 400px;
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle">Button</button>
<div class="sidebar">
<section class="group">
<h3 class="title">Click me first.</h3>
<ul class="list">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</section>
<section class="group">
<h3 class="title">Maybe click me.</h3>
<ul class="list">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</section>
<section class="group">
<h3 class="title">Nope - click me!</h3>
<ul class="list">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</section>
</div>
I have made a single page which has a navbar and with links pointing to section id in the page.
However, when I click on the link the section of the page scrolls down till the top of the section and due to my sticky navbar, the top part of my section goes behind it.
How do I create an offset height which would match my navbar height so that the div is visible at the right position?
Here is my a screenshot of what is happening.
Also, is there a way to smoothly scroll till the section? What is the easiest method to achieve this?
My example code:
HTML:
<nav>
<ul>
<li>Section 1</li>
<li>Sction 2</li>
<li>Section 3</li>
</ul>
</nav>
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
<div id="section3">Section 3</div>
Offsetting anchor hash tag links to adjust for fixed header
HTML :
Goto Section I
<!-- Some more content -->
<h3 id="section1" class="offset">Section I</h3>
<p>Section specific content</p>
CSS:
.offset:before {
display: block;
content: " ";
height: 150px; /* Give height of your fixed element */
margin-top: -150px; /* Give negative margin of your fixed element */
visibility: hidden;
}
Give padding-top to that section which is equal to the header height. Like if your header has a height: 40px then give padding-top: 40px to that section.
Have a look at the snippet below:
body {
margin: 0;
padding-top: 50px;
}
nav {
background: #eee;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
li {
padding: 15px;
}
.sec {
height: 200px;
margin-bottom: 30px;
background: #ff0;
padding-top: 48px;
}
<nav>
<ul>
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</nav>
<div id="section1" class="sec">Section 1</div>
<div id="section2" class="sec">Section 2</div>
<div id="section3" class="sec">Section 3</div>
Hope this helps!
The following image is the effect that I am going to implement. I used jquery ui sortlist so that the items within the box can be dragged and sorted. However, I cannot wrap a div around the sortlist. Actually I have come across the same problems whenever I using bootstrap columns. I cannot easily wrap div around the content, and format the inside elements if columns are used.
Here it is my HTML code:
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<div class="summary-theme">
<p>Theme1</p>
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</div>
</div>
CSS:
/* SUMMARY BOXES */
.summary-theme{
display:block;
margin-top:10px;
margin-bottom: 40px;
width:100%;
background: #fff;
box-shadow: 1px 1px 2px #A7A7A7;
}
.summary-theme .connectedSortable{
border:0px;
}
.summary-theme p{
display:block;
float:left;
margin:-20px -15px;
background: #0CBD94;
border: 4px solid #FFFFFF;
}
The box can wrap successfully if I set the overflow to be 'hidden'. But in that case, the tag <p> will not show properly because it is negative margins.
Things look alright when they are not wrap by Bootstrap Columns. Sorry I don't know how to write an online demo with Bootstrap features. So do you have any ideas how to fix the div wrap problem?
Thank you!
Where overflow: hidden can't be used, the next option is to go for a common clearfix, such as:
.summary-theme:after {
content: "";
display: table;
clear: both;
}
I'm not familiar with BS, but it might already have a class for this that you can just reuse.
I have a div with a fixed position (a top panel) which shall also contain a settings menu at the far right (currently via floating).
When hovering over the settings-image, I want to display a menu below the image.
I want the menu to be aligned to the right side just like the image.
<div id="panel" style="position:fixed">
<panel-entry 1>
<panel-entry 2>
<panel-entry n>
<div id="settings" style="float:right/snapped to the right side>
<img src=settings>
<ul>
<li>setting 1</li>
<li>setting 2</li>
<li>setting n</li>
</ul>
</div>
</div>
Any idea using jQuery very much appreciated, feel free to rearrange any html.
No jQuery necessary, just give your #panel a width:
#panel {
position: fixed;
width: 100%;
}
#settings {
float: right;
}
See DEMO.
Aside from your example not being HTML, I would anyhow correct the conceptual approach. There is no jQuery required for such a task, which can be done entirely in CSS.
You want your #panel to first of all contain a <ul> which will contain <li>s, which will be your <panel-entry>, those should be set as inline-block.
The #settings should be one of those, perhaps with a special class or id (we'll keep settings for now). You can position: absolute this to right: 0, or have it float. Don't use an image element for this, but rather use a background-image.
Inside this element, you will have a submenu: i.e. another <ul> with display: none, a position:absolute, right: 0 and top: X, so that X doesn't overlap with your #panel.
Next, you want to make the element visible on :hover of li#settings.
Here's a working demo
Basic HTML
<div id="panel">
<ul>
<li>Panel entry 1</li>
<li>Panel entry 2</li>
<li>Panel entry n</li>
<li id="settings">
<ul>
<li>setting 1</li>
<li>setting 2</li>
<li>setting n</li>
</ul>
</li>
</ul>
</div>
Basic CSS
#panel {
position: fixed;
top: 0;
width: 100%;
}
#panel > ul > li {
display: inline-block;
}
#panel > ul > li > ul {
display: none;
position: absolute;
top: {X};
right: 0;
}
li#settings {
background: url({youricon}) no-repeat top center;
position: absolute;
right: 0;
min-width: {youricon-x};
min-height: {youricon-y};
}
li#settings:hover > ul{
display: block;
}
I'm working with a CMS that parses variables into content using placeholders, e.g.
<td>
[[TITLE]]
<br />
[[DESCRIPTION]]
</td>
The problem is that this will make one long table row. Because of the way the code is written, I can't get it to insert a <tr> after every few columns. Is there any way to wrap the rows (even using DIVs to emulate tables)?
Even any jquery/mootools/prototype features that could be adapted to do this?
Found the solution: Use <ul> and <li> styled with CSS and put a <div> around it.
Short example:
<style>
#nav-menu li
{
height: 20px;
float: left;
width: 100px;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}
#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}
#nav-menu {
/* You can change this width and the list will wrap */
width: 400px;
border: 1px solid red;
}
</style>
<div id="nav-menu">
<ul>
<li>Services</li>
<li>About us</li>
<li>Contact us</li>
<li>Services</li>
<li>About us</li>
<li>Contact us</li>
<li>Services</li>
<li>About us</li>
<li>Contact us</li>
</ul>
</div>
As for JQuery and tables there are plenty of options on the 'table'.
http://webdesignledger.com/resources/12-useful-jquery-plugins-for-working-with-tables
http://plugins.jquery.com/project/Plugins/category/54