I have a menu on the left side of a slider. The slider's height is in direct correlation to the size of the image file that it loads. I want the menu's parent element to be at an equal height to the slider at all time.
I tried to code this with CSS and I looked around on here and realized that doing it with CSS is impossible. So, I tried to code it with Java, but it isn't right.
Any help with this would be amazing!
--Update--
This part is an edit. I tried a few of the suggestions, however they are not working. The slider changes height as it responds to the width of the screen. So, when I drag it out, it will change and the menu is left shorter than the slider. If I max-height the slider, the width will not display at 100% of the 60% allowance.
I believe what I need is a snippet of jquery that:
- grabs the nav element
- detects the height of the .Slider
- makes the nav element the same height as the .Slider element.
I have tried the js code below, but it didn't work.
Does anyone know how to do this?
Here is the code:
window.jQuery( function() {
window.jQuery('nav').height(window.jQuery('.Slider').height ())
});
nav {
display: block;
float: left;
width: 40%;
height: 100%;
}
nav ul {
background: lightgreen;
}
nav ul li {
display: inline;
width: 100%;
height: 33.3333%;
margin-left: 0;
}
.Slider {
display: block;
float: right;
width: 60%;
}
<div id="wrapper">
<nav>
<ul>
<li>
Item 1
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
</ul>
</nav>
<div class="Slider">
Pics are here.
</div>
</div>
I think you just need a clearfix, or I don't understand the question. Try this:
.theParent:after {
display: block;
clear: both;
content: "";
}
not only this is possible with CSS, there are thousands of ways to do this. This is just one of those:
.wrapper {
background: lightgreen;
position:relative;
width:100%;
height:100%;
padding:0;
}
nav {
display: block;
float: left;
width:40%;
height:100%;
margin:0;
padding:0;
}
nav ul {
margin:0;
padding:0;
height:100%;
}
nav ul li {
display: block;
width: 100%;
}
.Slider {
display: block;
float: right;
width: 60%;
margin:0;
padding:0;
}
.Slider img {
width:100%;
height:auto;
}
.clear {
display:block;
clear:both;
float:none;
}
and some tiny changes in your HTML
<div class="wrapper">
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
<div class="Slider">
<img src="http://www.open.edu/openlearn/sites/www.open.edu.openlearn/files/design-nutshell-homepage.jpg" alt="" />
</div>
<div class="clear"></div>
</div>
(pay attention to that .clear div, which is the main reason why you probably had problems)
IN this case, since I notices you used percentages, I also added responsive behaviors.
fiddle to see it in action
You can use a little Jquery to solve this situation.
Just before the tag, you can add:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('nav').css('height','100%');
</script>
GOT IT!!!! So friggin' happy right now!!
var maxHeight = 400;
$("div").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$("div").height(maxHeight);
Related
I have created a page with different background colors. What I'm trying to achieve is to change color fixed nav links on different sections. Like I've given custom class of light and dark respectively to the sections. And want to change color of nav links as the sections scrolls.
I'm a newbie to js and jquery, please let me know how can i achive this, I'm getting ideas to how to do, but i'm not able to execute it (or write it in a proper way)
This is what I have yet
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>FAQ</li>
<li>Contact Us</li>
</ul>
</div>
<div class="one m-light"></div>
<div class="two m-dark"></div>
<div class="three m-light"></div>
<div class="four m-dark"></div>
<style>
.nav{
position:fixed;
}
.nav li {
display: inline-block;
list-style: none;
height: 60px; /* should be the same as line-height */
line-height: 60px;
padding: 0 40px;
}
.nav-link {
color: #000;
text-decoration: none;
mix-blend-mode:difference !important;
}
.one, .two, .three, .four{
height:100vh;
width:100%;
}
.one{
background:#f1f1f1;
}
.two{
background:#050505;
}
.three{
background:#f4f4f4;
}
.four{
background:#030303;
}
</style>
<script>
$(document).ready(function(){
var scroll_pos = 0;
var darkSection = $('.m-dark')
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(darkSection > scroll_pos) {
$('.nav-link').css('color', '#000');
} else {
$('.nav-link').css('color', '#fff');
}
});
});
</script>
I have a created a box where I want to horizontally scroll the content from left to right on mobile and I wanted to swipe using touch and hide the scrollbar, here is a working JSfiddle
Should I try any JSplugin to handle this or is this something doable easily? Please suggest
.spotlight_graphs {
bottom: 30px;
clear: both;
left: 0;
margin-left: auto;
margin-right: auto;
max-width: 360px;
overflow: auto;
position: absolute;
right: 0;
width: 100%;
background-color:#cbcbcb;
overflow:auto;
padding:10px;
}
.spotlight_graphs > ul {
font-size: 0;
list-style: outside none none;
margin: 0;
padding: 0;
text-align:left;
width:200%;
}
.spotlight_graphs > ul > li {
max-width: 90px;
width: 33%;
display:inline-block;
background-color:#dec8c8;
height:100px;
margin:0 5px 5px 0;
border:1px solid #333333;
}
.spotlight_graphs > ul > li > .graph_detail {
color: #404040;
float: left;
font-size: 14px;
text-align: center;
text-transform: uppercase;
width: 100%;
}
<div class="spotlight_graphs">
<ul>
<li>
<div class="graph_detail"> This is dummy title </div>
</li>
<li>
<div class="graph_detail"> This is dummy title </div>
</li>
<li>
<div class="graph_detail"> This is dummy title </div>
</li>
<li>
<div class="graph_detail"> This is dummy title </div>
</li>
<li>
<div class="graph_detail"> This is dummy title </div>
</li>
</ul>
</div>
If you are using webkit browser such as chrome and safari, you could easiy add the following code to your CSS. Demo -> https://jsfiddle.net/xzc7khk0/5/
::-webkit-scrollbar { display: none; }
I think the easiest way to get this is using only CSS and baiscly rotating the items 90deg.
you can find it explained really well here:
Here's a link! where you can find this solution explained really well.
Another solution is to place the div that has the scrollbar into another div that has a height less than the scrolling div and overflow hidden in order to cover the scrollbar like this:
.hideScroll {
height: 129px;
overflow: hidden;
position: relative;
}
I edited your fiddle here: https://jsfiddle.net/xzc7khk0/6
You can do it with CSS as #Stan George said.
But this css is only for mobile, because you want to disappear scrollbar in mobile, so apply css on your scrollable div.
.spotlight_graphs::-webkit-scrollbar{
background-color:transparent;
}
it will disappear the scrollbar not scrolling.
Easy to do with css Webkit
html {
overflow: scroll;
overflow-x: hidden;
}
.spotlight_graphs::-webkit-scrollbar {
width: 0px; //remove scrollbar width
background: transparent; //optional: it will make scrollbar invisible
}
I am trying to create a mobile navigation (toggle type) on a breaking point 768px.
My mark up is:
<div class="tm_menu_mobile">
<div class="menu_icon">
<div class="three_line"></div>
<div class="three_line"></div>
<div class="three_line"></div>
</div>
<div style="clear:both;"></div>
<div id="nav">
<div class="navigasi_menu">
<div class="navigasi_list">
<div class="nav-menu">
<ul>
<li class="page_item page-item-7">Home</li>
<li class="page_item page-item-2">Sample Page</li>
<li class="page_item page-item-9">test page 1</li>
</ul>
</div>
</div>
</div>
</div>
</div>
this mobile navigation should be hidden screens wide above 768px. So I put following java script code in to the header:
/* Mobile navigation*/
jQuery(document).ready(function() {
$('#nav').hide();
$('.menu_icon').click(function() {
$('#nav').slideToggle('fast');
return false;
});
});
and I put following CSS code into my style sheet:
/* Primary mobile menu */
.tm_menu_mobile {
display: block;
margin: 15px auto !important;
width: 98.5% !important;
background:#0071B7;
padding:6px;
height:auto;
overflow:hidden;
}
/* avoiding horizontal scroll bar across the site */
.navigasi_menu {
width: 100%
}
.navigasi_menu li {
float: none;
text-align: center;
border-bottom: 1px solid #fff;
}
/* Making navigation li one below another */
.navigasi_menu li:hover {
width: 100%
}
.tm_menu_mobile .menu_icon {
width:50px;
height:50px;
border-radius: 10px;
border:2px solid #000;
float:right;
margin-right:10px;
}
.menu_icon .three_line {
float:none;
width:36px;
height:5px;
background:#fff;
margin:9px auto;
}
.tm_menu_mobile #nav {
display: inline-block;
}
but toggle not working.
Also when I hovering the navigation in 768px screen it's not stable... it's 3rd li comes above the 1st..
but the same js fiddle work here the sample js toggle I tested
and the site I am trying is bit different. SITE
How can I get it work?
the issue is related to wordpress??
Try this :
<script type="text/javascript">
/* Mobile navigation toggle*/
jQuery(document).ready(function() {
jQuery('.tm_menu_mobile #nav').hide();
jQuery('.menu_icon').click(function() {
jQuery('.tm_menu_mobile #nav').slideToggle('fast');
return false;
});
});
</script>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
how can I set up a HTML Page with two content sides? Without <frames> !
In example:
On the left side should be the menu for the navigation.
On the right side should be the content of the page.
Example menu:
<div id="page">
<div id="menuleftcontent">
<ul id="menu">
<li> first</li>
<li>second</li>
</ul>
</div>
<div id="maincontent">
<div id="firstcontent">first</div>
<div id="secondcontent">second</div>
</div>
</div>
The menu on the left side should be a fix content and the right content should be changeable.
I have made a sketch:
Thanks in advance
Re-arrange the code so that (i) main content appears before sidebar in HTML source order (ii) add a clearing div (iii) change the href attribute of menu links:
<div id="page">
<div id="maincontent">
<div id="firstcontent">firstcontent</div>
<div id="secondcontent">secondcontent</div>
</div>
<div id="menuleftcontent">
<ul id="menu">
<li>first</li>
<li>second</li>
</ul>
</div>
<div id="clearingdiv"></div>
</div>
Then use the following CSS:
#page {
margin-left: 200px;
}
#maincontent {
float: right;
width: 100%;
background-color: #F0F0F0;
}
#menuleftcontent{
float: left;
width: 200px;
margin-left: -200px;
background-color: #CCCCCC;
}
#clearingdiv {
clear: both;
}
For the obscure part of your question, you need to use JavaScript to show/hide divs. While it is possible to use vanilla JavaScript, the jQuery library makes it much easier:
$(function () {
$("#maincontent > div:gt(0)").hide();
$("#menu a").on("click", function (e) {
var href = $(this).attr("href");
$("#maincontent > " + href).show();
$("#maincontent > :not(" + href + ")").hide();
});
});
Demo here
just apply some css to your html like this :
#page{
width: 1280px;
display: inline;
}
#menuleftcontent{
float: left;
width: 420px;
}
#maincontent{
float: left;
width: 960px;
}
width are some example ;)
Here is a sample of how you can implement splitting your contents. Although, there are many ways to do this actually :)
JS Fiddle
#page {
width: 100%;
}
#menuleftcontent {
float: left;
width: 25%;
}
#maincontent {
float: left;
width: 75%;
}
you can use below css for your html to display it in left and right frame structure
#menuleftcontent
{
width: 30%;
float: left;
}
#maincontent
{
width: 70%;
float: left;
}
#page
{
width : 100%;
clear : both;
}
If you are asking about how to split page vertically without frames. There is an answer for you https://stackoverflow.com/a/11662564/841037
If you are finding a solution to make every page have the fixed content on the left. Then you may seek for something called page template or master page in your backend web framework.
The best you can do is make 2 divs. One with float: left, give that a fixed width, and then create another with a margin-left with the same width as your menu.
CSS:
#leftie {
width: 200px;
background: red;
float: left;
}
#rightie {
margin-left: 200px;
background: green;
}
HTML:
<div id="leftie">
This is your menu
</div>
<div id="rightie">
This is your main content
</div>
Working example:
http://fiddle.jshell.net/xynw4/show/
Fiddle URL:
http://jsfiddle.net/xynw4/
here is an exemple of CSS to style your HTML :
<style>
.page{width:100%; min-height:900px;}
.menuleftcontent{min-width:20%;float:left;height:900px;border:dotted 1px red;}
.maincontent{min-width:78%;float:left;height:900px;border:dotted 1px blue;}
</style>
<div id="page" class="page">
<div id="menuleftcontent" class="menuleftcontent">
<ul id="menu">
<li><a href="showfirstcontent" </a>first</li>
<li><a href="showsecondcontent" >second</a></li>
</ul>
</div>
<div id="maincontent" class="maincontent">
<div id="firstcontent" >first</div>
<div id="secondcontent">second</div>
</div>
</div>
i want to Design Menu bar as shown below, i have created whole list in ul but how to set different height ,width for center .Please help i tried code below but middle part is not increasing,
<nav id="Edit_panel">
<ul>
<li class="menubar" title="redo">
<div id="link">redo</div>
</li>
<li class="menubar" title="undo">
<div id="link">undo</div>
</li>
<li class="menubar" title="cut">
<div id="link">Cut</div>
</li>
<li class="menubar" title="copy">
<div id="link">Copy</div>
</li>
<li class="menubar" title="paste">
<div id="link">paste</div>
</li>
<li class="menubar" title="select">
<div id="link">select</div>
</li>
<li class="menubar" title="hand">
<div id="link">hand</div>
</li>
<li class="menubar" title="zoomin">
<div id="link">zoomin</div>
</li>
<li class="menubar" title="zoomout">
<div id="link">zoomout</div>
</li>
<li class="menubar" title="addimage">
<div id="link">Add img</div>
</li>
</ul>
</nav>
css:
#Edit_panel {
background-color: gray;
height:25px;
display: inline;
}
ul
{
background-color: #D8D8D8;
height:30px;
}
li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
text-align: center
}
Just add another class to elements You want to increase and set diferent height.
And remove duplicated ids.
First of all, you cannot have multiple elements with the same id, so you should change all
id = "link"
to
class = "link"
or delete those id's
Another mistake is putting height to the ul in css. The 30px height of ul means, that you want the whole list to be 30px high. You want to define the height for li elements, not the whole ul.
Instead of:
ul
{
background-color: #D8D8D8;
height:30px;
}
li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
text-align: center
}
Should be:
ul
{
background-color: #D8D8D8;
}
li {
height:30px;
display: inline-block;
margin-right: 10px;
margin-left: 10px;
text-align: center
}
If you want some elements to have different height or width, you can add some class to them, and define height for the class, for example:
<li class="menubar higher" title="paste">
<div id="link">paste</div>
</li>
And then in CSS you add:
.higher {
height: 50px;
}
Then your elements will be 30px high, and elements witch also have "higher" class, will he higher than others;]
you can give different heights to your elements by jquery. Use this demo for it.
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style>
.test
{
height:25px;
}
</style>
<script>
$(document).ready(function(e) {
$("li").eq(5).addClass("test"); // In 'eq' 5 is a index of li element and it starts from 0 to n-1
});
</script>