I want to have a fixed container (a leaflet map) that a list with informations about the selected map item can be scrolled over.
I came up with this
https://jsfiddle.net/m5ntbyxs/5/
My list, that can be scrolled over the map, should start at the bottom of the screen and able to scroll up until it reveals all its content. I am using a translate to position the list further down on the screen. When no item is selected on the map, the list should scroll back down and not be visible. Just setting the transform: translateY(100vh) does only work, when the user has not previously scrolled up the list. Then the amount the user would have scrolled the list, would still be visible.
But it has another problem: it uses fixed layout, which takes the container out of the flow so it can not live properly in an app shell that also displays a title bar and nav bar.
Is there a way to achive this kind of effect without fixed element?
jQuery is not an option to solve this.
made it work like so:
html :
<div class="box">
<div class="menu"><h1>div.menu</h1></div>
<div class="map">
<p class="title">div.title</p>
<div class="out" id="scroll">
<li class="empty"></li>
<li>a line of text</li>
<li>a line of text</li>
<li>a line of text</li>
<li>a line of text</li>
<li>a line of text</li>
<li>a line of text</li>
<li>a line of text</li>
<li>a line of text</li>
<li>a line of text</li>
<li>a line of text</li>
<li>etc...</li>
</div>
</div>
<div class="down"><p>div.down</p></div>
</div>
css :
body {
background-color: darkslategray;
text-align: center;
box-sizing: border-box;
width: 100%;
height: 100vh;
}
.box {
color: gainsboro;
width: 100%;
height: 100%;
min-height: 200px;
display: flex;
flex-flow: column nowrap;
}
.menu {
text-align: center;
border: solid 1px;
padding: 10px 0 0;
flex: 1 1 auto;
order: 1;
&>h1 {
border: solid 1px;
}
}
.map {
display: block;
background: teal;
text-align: center;
position: relative;
overflow: hidden;
flex: 10 10 auto;
order: 2;
&>.title {
position: absolute;
border: solid 1px;
background: teal;
margin: 0 1%;
width: 98%;
padding: 16px 0;
font-size: 24px;
z-index: 2;
}
&>.out {
overflow-y: auto;
position: absolute;
height: 100%;
width: 98%;
margin: 0 1%;
display: block;
border: solid 1px white;
z-index: 1;
&::-webkit-scrollbar {
display: none;
}
&>.empty {
content: "";
margin: 0;
height: 90%;
margin: 5px;
border: solid 1px;
position: realtive;
background: none;
}
&>li {
list-style-type: none;
padding: 10px;
margin: 5px;
border: solid 1px;
font-size: 16px;
}
}
}
.down {
text-align: center;
display: block;
position: relative;
border: solid 1px;
flex: 1 1 auto;
order: 3;
}
Related
When I hover over the main Icon of the first ul of my nav part, the dropdown menu appears in perfect location, however, when I hover over the sub menu items, a slight indentation appears that I can't seem to find the cause for.
Hovering over the three dots "..." icon:
Hovering over the sub item of the menu:
you can clearly see the indentation when I hover over the sub menu which I colored violet upon hover over, which is exactly when the indentation will occur.
.main-navigation {
position: absolute;
right: 0px;
margin-top: -20px;
margin-right: 15px;
width: 2em;
height: 2em;
color: #D9D9D9;
border: 1px solid #D9D9D9;
/* padding: auto; */
align-content: center;
}
.firstLevelul{
padding-left: 0;
list-style: none;
justify-content:flex-end;
}
.firstLevela{
display: block;
text-align: center;
font: normal small-caps 100 20px/1.8em 'Helvetica Neue';
text-decoration: none;
}
.firstLevela:hover{
color: #D9D9D9;
width: 1.5em;
height: 1.5em;
}
.secondLevelul{
display: none;
}
.secondLevela{
display: block;
}
.secondLevelli:hover{
background-color: violet;
}
.firstLevelli:hover > .secondLevelul{
display: block;
width: 200px;
height: 200px;
background-color: white;
border: 1px solid #D9D9D9;
margin-left: -169px;
}
<nav class="main-navigation">
<ul className="firstLevelul">
<li className="firstLevelli">
<MoreHorizIcon className="editDropDownIcon" />
<ul className="secondLevelul">
<li className="secondLevelli"><a className="secondLevela" href="#">sub menu</a></li>
<li className="secondLevelli"><a className="secondLevela" href="#">sub menu</a></li>
<li className="secondLevelli"><a className="secondLevela" href="#">sub menu</a></li>
</ul>
</li>
</ul>
</nav>
This was a little hard to work with as you didn't provide much code.
But I believe the issue is based on your height: 1.5em in the firstLevela:hover selector in CSS.
I made this incredibly rudimentary JSFiddle to demonstrate
https://jsfiddle.net/t7gj9qx2/
Yes, that is due to em height, which gets height from the parent element font size. It is preferable to use rem or px.
I am working on a E-learning shiny web application which lets students learn R functions easily. The user should be able to drag and drop grids into the blanks provided to answer a particular question syntactically. I have written the HTML file, including the styling and javascript in it. I have used the includeHTML("index.html") function to include the HTML file to the ui.R part of the application. Now, I need to implement communication between the ui.R and server.R in such a way that when the user drags and drops all the grids in the desired blanks and clicks the "Submit" button, the concatenated version of the function needs to go to the server side, R interpreter needs to evaluate the statement and then send back the output which needs to be displayed to the user. How do I send the concatenated message from webpage to server.R? Evaluate the function? And how do I send back the output back to the web page?
Example: Q. Write a function in R for sum of two digits:
sum, diff, mean, median, etc
1,2,3,4,5...
( ) . , / : " ' { } [ ] ( )
My HTML, CSS and Javascript file is as follows:
E-learning 'R' The function for sum of any two digits in 'R' syntax is:
span { width: 50px; display: inline-block; height: 20px; background: #ffffff; }
body {
font: 13px Verdana;
background-color: grey;
}
ul.numbers {
list-style: none;
padding: 10px;
background: grey;
}
ul.symbols {
list-style: none;
padding: 10px;
background: grey;
}
ul.functions {
list-style: none;
padding: 10px;
background: grey;
}
ul.numbers li {
display: inline-block;
margin: 0 10px;
padding: 10px;
background: #FFF706;
}
ul.symbols li {
display: inline-block;
margin: 0 10px;
padding: 10px;
background: #18FC7A;
}
ul.functions li {
display: inline-block;
margin: 0 10px;
padding: 10px;
background: #FF99F7;
}
p {
padding: 10px;
color: black;
background-color: #0680FF;
}
answer span{
width: 100px;
}
.quiz-wrapper {
position: relative;
display: block;
width: 510px;
height: 450px;
}
.quiz-wrapper p.question-description {
background: #19286C;
color: white;
padding: 25px 20px;
}
.quiz-wrapper ul.options {
position: relative;
display: inline-block;
vertical-align: top;
width: 165px;
list-style: none;
border: 1px solid #19286C;
text-align: center;
padding: 0;
margin: 0;
}
.quiz-wrapper ul.options li {
border: 1px solid transparent;
padding: 6px 8px;
}
.quiz-wrapper ul.options li.title {
background: #19286C;
color: white;
}
.quiz-wrapper ul.options li.option {
display: block;
position: relative;
z-index: 50;
font-size: 13px;
}
.quiz-wrapper .answers {
display: inline-block;
width: 335px;
font-size: 13px;
line-height: 20px;
}
.quiz-wrapper .answers .target {
display: inline-block;
width: 110px;
background: lightblue;
margin: 0 3px;
text-align: center;
}
.quiz-wrapper button[type="submit"] {
display: block;
position: relative;
margin: 10px auto;
padding: 10px;
background: #19286C;
border: none;
color: white;
font-size: 16px;
}
.lightbox-bg {
display: none;
position: absolute;
z-index: 100;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
}
.status {
display: none;
position: absolute;
z-index: 110;
text-align: center;
width: 80%;
top: 220px;
left: 47px;
}
.status p {
background: white;
padding: 30px;
}
<body>
<ul class="numbers">
<li class="number" data-target="wrong1">0</li>
<li class="number" data-target="wrong2">1</li>
<li class="number" data-target="right3">2</li>
<li class="number" data-target="right5">3</li>
<li class="number" data-target="wrong3">4</li>
<li class="number" data-target="wrong4">5</li>
<li class="number" data-target="wrong5">6</li>
<li class="number" data-target="wrong6">7</li>
<li class="number" data-target="wrong7">8</li>
<li class="number" data-target="wrong8">9</li>
</ul>
<ul class="functions">
<li class="function" data-target="right1">sum</li>
<li class="function" data-target="wrong9">median</li>
<li class="function" data-target="wrong10">mean</li>
<li class="function" data-target="wrong11">sqrt</li>
<li class="function" data-target="wrong12">log</li>
<li class="function" data-target="wrong13">min</li>
<li class="function" data-target="wrong14">max</li>
<li class="function" data-target="wrong15">abs</li>
<li class="function" data-target="wrong16">round</li>
<li class="function" data-target="wrong17">add</li>
</ul>
<ul class="symbols">
<li class="symbol" data-target="right2">(</li>
<li class="symbol" data-target="right6">)</li>
<li class="symbol" data-target="right4">,</li>
<li class="symbol" data-target="wrong18">.</li>
<li class="symbol" data-target="wrong19">/</li>
<li class="symbol" data-target="wrong20">?</li>
<li class="symbol" data-target="wrong21">+</li>
<li class="symbol" data-target="wrong22">=</li>
<li class="symbol" data-target="wrong23">-</li>
<li class="symbol" data-target="wrong24">*</li>
</ul>
<p id="answer">Message is: <span id = "display"></span> </p>
<script>
$(document).ready(function() {
$("span").droppable({
accept: "ul > li",
classes: {
"ui-droppable-hover": "ui-state-hover"
},
drop: function(event, ui) {
var dragedElement = ui.draggable.text();
$(this).addClass("ui-state-highlight");
$(this).html(dragedElement);
$(this).addClass('matched');
}
});
$("ul li").draggable({
helper:"clone",
revert: "invalid"
});
})
</script>
ui.R:
library(shiny)
shinyUI(fluidPage(
includeHTML("index.html")
))
server.R:
library(shiny)
shinyServer(function(input, output) {
observeEvent(input$res){
eval(res);
print(res);
}
})
I have made a nav out of css drawn circles as anchor elements. They all have varying amounts of text in them causing them to spill out of the circles. So I have used a JS solution to horizontally align the text to the middle of the circle. The problem I now have is that the circles baselines are unequal depending on how many lines of text are in them. Is there an easy css solution to this. Or will I have to calculate and amend the heights of each list item with javascript as well?
.html
<ul class="list-inline nav-horizontal">
<li role="presentation" class="active">
#1
</li>
<li role="presentation">
#2
</li>
<li role="presentation">
#3
</li>
<li role="presentation">
#4
</li>
<li role="presentation">
#5
</li>
</ul>
.css
.list-inline {
display: inline-block;
padding: 6px;
}
.stylish {
display: block;
width: 140px;
height: 140px;
border-radius: 50%;
border: 8px solid #ED1B24;
font-size: 20px;
color: #BBAE92;
text-align: center;
text-decoration: none;
background: none;
line-height: 1.1em;
}
.stylish:hover, li.active .stylish {
color: #fff;
text-decoration: none;
background: #ED1B24;
}
.js
$("a.stylish").contents().wrap("<span>");
$("a.stylish span").css({
position : "relative",
"top" : function() {
return ($(this).parent().height() - $(this).height()) / 2
}
});
How about this? http://jsfiddle.net/hd8donbn/3/
.nav-horizontal li:before {
content:'';
display: inline-block;
vertical-align: middle;
height: 100%
}
.stylish {
display: inline-block;
text-decoration: none;
color: #ED1B24;
vertical-align: middle;
max-width: 90%
}
If its ok i will explain everything :D
I found a simple css solution. Adding vertical-align:text-top; to the class of .list-inline li solved the issue
well, not to be rude here, but i've written a markup of my own to cater to you needs, disregarding what you've given in your question. Hope you find it usefull:
HTML
<ul>
<li class="active">small</li>
<li>medium content</li>
<li>a bit larger content<`enter code here`/li>
<li>really large hunk of content</li>
<li>this is a rrrrreeeeaaaalllllllyyyyy big chunk, with a long word too</li>
</ul>
css
*{
margin: 0;
padding: 0;
}
ul {
display: inline-block;
list-style: none; /*remove markers for `li`*/
}
li {
border-radius: 50%; /*border-radius 70px;*/
overflow: hidden; /*hide overflowing text, if any*/
float: left; /*puts things in line, with their tops aligned. */
/*If `display:inline-block` is used, it will match the bottoms at same level. try it*/
border: 8px solid #ED1B24;
display: block;
height: 140px;
text-align: center;
width: 140px;
}
li a{
padding: 0 5px; /*prevent border cutting*/
word-wrap: break-word; /*breaks long words*/
text-decoration: none;
color: #BBAE92;
/*the next 4 allow a child to be centered vertically*/
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
li.active,
li:hover{
cursor: pointer; /*makes it look like a link*/
background: #ED1B24;
}
li.active a,
li:hover a{
color: #fff;
}
and some minor js
$('li').click(function(){
$(this).child('a').click();
});
Right, so I have a basic Jquery script that adds a "fixed" class to the nav bar when the user scrolls past the nav bar (154 pixels down). The issue is, the content below the nav bar then jumps up by 35 pixels (the height of the nav bar). I've tried adding a div class with a padding of 35px that shows when the user scrolls past the nav bar, which, although fixed other display problems, still allowed the content to lift up by 35 pixels. Here's what I have so far:
The jQuery that adds the fixed class, and the jQuery that shows the padding:
<script>
var num = 154; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('ul.nav').addClass('fixed');
} else {
$('ul.nav').removeClass('fixed');
}
});
</script>
<script>
var num = 154; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.padd').show();
} else {
$('.padd').hide();
}
});
</script>
The HTML:
<body ONMOUSEWHEEL="OnMouseWheel()">
<p><img src="images/BannerPicture.png" alt="Leisure in mk logo" width="1024" height="150"></p>
<ul class="nav">
<li class="nav">
Home
</li>
<li class="nav">
Centre MK
</li>
<li class="nav">
Music
</li>
<li class="nav">
More Stuff</li>
</ul>
<div class="pad">
</div>
<div class="padd">
</div>
<div class="Informationbox">
text and shizz
</div>
And finally, the CSS:
ul.nav {
border: 1px solid #ccc;
border-width: 1px 0;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
width: 1024px;
display: table;
table-layout: fixed;
vertical-align: middle;
height: 35px;
vertical-align: middle;
margin-right: auto;
margin-left: auto;
background-color: #C60;
font-size: 25px;
}
/* this styles each link when the mouse is NOT hovered over */
li.nav {
display: table-cell;
vertical-align: middle;
height:100%;
align-items: center;
vertical-align:middle;
line-height:35px;
margin-right: auto;
margin-left: auto;
transition:.4s;
}
li.nav a {
display: block;
height: 100%;
width: 80%;
text-decoration: none;
vertical-align: middle;
align-items: center;
vertical-align: middle;
margin-right: auto;
margin-left: auto;
transition:.4s;
}
li.nav a:hover {
line-height: 25px;
transition:.4s;
}
ul.nav.fixed {
position: fixed;
top: 0;
left: 50%;
margin-left: -512px;
margin-right: 0;
}
.padd {
padding-bottom: 40px;
display:none;
}
.Informationbox {
background-color: #FF9900;
border: 1px solid #FFF;
width: 1024px;
margin-right: auto;
margin-left: auto;
}
add top 35px to the "nav" after block when u scrolles down using jquery.. and need to remove it when scrolls top..
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('ul.nav').addClass('fixed');
$('.your_div').css({"top" : "35px"});
} else {
$('ul.nav').removeClass('fixed');
$('.your_div').css({"top" : "0px"});
}
});
I have this layout
I have 2 problems:
The height of div 2 is not same as div 1 or 3, i tried this solution
from stack overflow, but its not working.
The menu to be set in div 2 is responsive, but on shrinking the width, it
list down, which pushes the carousel even below, screwing the whole
design..... is there any method i can make the mid_div responsive
by not shrinking but instead create a horizontal scroll in that div
only (depending on screen size) ??
CSS
#h_scroll {
margin: 0 auto;
margin-top: 10px;
width: 80%;
}
#h_scroll_banner {
display: inline-block;
width: 100%;
}
#h_scroll .fltlft {
float: left
}
#h_scroll .fltryt {
float: right
}
#h_scroll .mid_div {
width: 100%;
background-color: #F11181;
height: 100%;
}
#h_scroll .mid_div ul {
list-style: none;
display: inline-block;
margin: 0 auto;
}
#h_scroll .mid_div li {
list-style: none;
display: inline-block;
}
#h_scroll .mid_div li a {
display: block;
line-height: 20%;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
padding: 4%;
width: 20%;
}
HTML
<div id="h_scroll">
<div id="h_scroll_banner">
<div class="fltlft" id="div_height_to_get">
<img src="image/scroll_banner_left.jpg" style="width:100%; height:auto" id="div_height_to_get" />
</div>
<div class="fltryt">
<img src="image/scroll_banner_right.jpg" style="width:100%; height:auto" />
</div>
<div class="mid_div" id="div_height_to_set">
<ul>
<li> Links </li>
<li> Links </li>
<li> Links </li>
<li> Links </li>
<li> Links </li>
</ul>
</div>
</div>
If you have full control over the source, here is my solution (JSFiddle preview):
HTML
<div class="wrapper">
<div class="banner-left"></div>
<div class="banner-mid">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div class="banner-right"></div>
<p>This is some content under the menu</p>
</div>
CSS
.wrapper {
margin: 40px auto;
width: 600px;
}
.banner-left, .banner-right {
background: #eee;
float:left;
height: 50px;
width: 50px;
}
.banner-left {
margin-left: -50px;
}
.banner-right{
margin-right: -50px;
}
.banner-mid {
float:left;
margin-bottom: 20px;
width: 100%;
}
.banner-mid > ul {
background: #ddd;
list-style:none;
margin: 0;
padding: 0;
height: 50px;
width: 100%;
}
.banner-mid > ul > li {
float:left;
line-height: 50px;
padding-left: 10px;
}
Since your banner flairs don't have any content in them, why not use a ::before and ::after? I don't see the need why all 3 divs need to be the same height and using generated content you can just have the slideshow positioned based on margins from .mid_div.
.mid_div {
position: relative;
}
.mid_div::before, .mid_div::after {
display:block
width: 50px; /* image width */
height: 50px; /* image height */
content: '';
position: absolute;
top: 0;
left: -50px;
background: url(image/scroll_banner_left.jpg);
}
.mid_div::after {
left: 100%;
background: url(image/scroll_banner_right.jpg);
}
As for you wanting a scrollbar, use overflow-x: auto on the .mid_div and for the .mid_div ul have a set pixel width for it and whenever .mid_div gets smaller the content won't reflow. You could also try white-space: nowrap on the ul also while having the li {display: inline}.
The answer to your first question, making all the divs the same height, you need to do this:
div1, div2, div3 { display: table-cell; }
For your second answer you could apply a min width to the divs/div and set the overflow to scroll.