Make side nav height match angular ui-view div height - javascript

Added some jquery to make one div that is in my index (master page) the full height as any content in any view. Basically, match div height of one to div height of another. My jquery code is:
var divHeight = $('.rightSide').height();
$('.tabNav').css('min-height', divHeight+'px');
This is applying to this html:
<div class="col-md-2 tabNav">
<ul class="tabTitle">
<p>Project tools</p>
<li class="tabCont">Welcome</li>
<li class="tabCont">Experiments</li>
<li class="tabCont">Interview Notes</li>
</ul>
<ul class="tabTitle">
<p>Hypothesis worksheets</p>
<li class="tabCont">Problem phase</li>
<li class="tabCont">Solution phase</li>
<li class="tabCont">Service phase</li>
<li class="tabCont">Growth phase</li>
</ul>
</div>
<div ui-view class="rightSide">
</div>
Notice that the div with angular directive ui-view has the class of "rightSide"? Why does this not give me the results I am after?

you javascript is OK, you're actually missing content in the .rightside div.
once you put should be ok. check this out: https://jsfiddle.net/Lqx6jp7q/1/
var divHeight = $('.rightSide').height();
$('.tabNav').css('min-height', divHeight+'px');

Related

Change Div background on active tab - jquery

I have a set of 4 tabs which display content under a main header. Currently i can only show the same header in all tabs as they sit below the header.
Each one is linked by a ID which displays the tabs content. How can i make the background on the header change with Jquery when the link is clicked?
my code is below.
<div class="my-header">
</div>
<div class="wrapper">
<ul class="tab-list">
<li class="tab-title"> Tab 1 </li>
<li class="tab-title">Tab 2 </li>
<li class="tab-title">Tab 3 </li>
<li class="tab-title">Tab 4 </li>
</ul>
<div class="content-1"></div>
<div class="content-2"></div>
<div class="content-3"></div>
<div class="content-4"></div>
</div>
you need something like this:
$('#clickMe').on('click', function() {
$('#changeMe').css('background-image', 'url(http://placehold.it/200x200/ff0000)');
})

Height of div with multiple toggles

I'm trying to write a piece of code that will add a scrollbar to a div if the expanded content is taller than the window height.
The html is roughly structured like this:
<nav class="col-md-2 col-sm-3 no-padding">
<div class="nav-container">
<div class="tocify1">
<ul class="tocheader nav nav-list">
<li class="multi flex-container active-top"><a class="open"><i class="fa fa-caret-right fa-rotate-90" aria-hidden="true"></i></a>Top Link</li>
<ul id="" class="tocsubheader nav nav-list">
<li class="active">Link 1</li>
<li class="">Link 2</li>
</ul>
</li>
</ul>
And the Css:
.nav-container{position: fixed;}
Here is the relevant code:
windowheight = $(window).height();
$('.open').click(function() {
$(this).parent().next('.tocsubheader').slideToggle().promise().done(function(){
sidenav = $('.tocify1').height();
if (windowheight < sidenav){
$('.tocify1').css({'height': windowheight, "overflow-y" : "scroll"});
}
else{
$('.tocify1').css({'height':'100%', "overflow-y" : "hidden"});
}
});
});
This works when one toggle is clicked, however when one toggle is open and another is clicked the sidenav height defaults to a seemingly arbitrary number less than the window height.
Any help would be appreciated.
Thank you.

How to display text / button at the end of tabs component using Bootstrap?

I've added a text and a button inside <ul> tag like this:
<body>
<div class="container">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Database</li>
<li role="presentation">Tasks</li>
<li role="presentation">Options</li>
<li role="presentation">Welcome, ${sessionScope.currentUser} <button type="submit" >Log out</button></li>
</ul>
</div>
</body>
And the result is:
If I wrap the text and the button inside <a> tag then the bottom line is pushed too far away. You can see there is a line at the bottom of "Database" tab.
I want the text and the button move to the end of the tabs component like the tabs of this forum. The text "2 Answers" has the same height with the tab "votes" and is in the edge of the tabs pane:
I know that I have to modify it with JavaScript, but I don't know how to do it.
Here's the answer and the result for you.
You can check it out here http://jsfiddle.net/vyy3zszj/
Or just take below
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<style type="text/css">
li.rightside {
float:right;
line-height:34px;
}
</style>
<div class="container">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Database</li>
<li role="presentation">Tasks</li>
<li role="presentation">Options</li>
<li class="rightside" role="presentation">Welcome, CurrentUser <button type="submit" >Log out</button></li>
</ul>
</div>
Somehow the defined css in this code snippet doesn't work. So I inserted above the body. FYI, you can use inline style for sure.
If I am understanding you correctly , you just would like the last 2 <li> elements all the way to the right , and the remaining ones to stay all the way to the left. To accomplish set the style of the last 2 <li> elements to "float:right"
replace this HTML with the existing HTML :
<body>
<div class="container">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Database</li>
<li role="presentation">Tasks</li>
<li role="presentation" style="float:right;">Options</li>
<li role="presentation" style="float:right;line-height:45px;">Welcome, ${sessionScope.currentUser}<button type="submit" >Log out</button></li>
</ul>
</div>
</body>`
UPDATED CODE , There are many ways to vertically align text, you can use vertical-align , line-height , padding's , and margin's. I adjusted the line-height to set the text in the middle

Show first div on page load and hide others and then show the rest on click of the menu items

I am working on a menu where on click of the navigation items, the div will be shown, but by default, the first div should be shown and rest hidden. They should be seen only on click of other navigation items.
Below is my code that I have tried so far.
The HTML:
<ul id="menu">
<li class="page_item current_page_item justClick">a</li>
<li class="page_item page-item-2 justClick">b</li>
<li class="page_item page-item-2 justClick">c</li>
<li class="page_item page-item-2 justClick">d</li>
<li class="page_item page-item-2 justClick">e</li>
<li class="page_item page-item-2 justClick">f</li>
<li class="page_item page-item-2 justClick">g</li>
<li class="page_item page-item-2 justClick">h</li>
<li class="page_item page-item-2 justClick">i</li>
</ul>
<div class="content">
</div>
<div class="content1">
cccc1
</div>
<div class="content2">
cccc2
</div>
<div class="content3">
cccc3
</div>
<div class="content4">
cccc4
</div>
<div class="content5">
cccc5
</div>
<div class="content6">
cccc6
</div>
<div class="content7">
cccc7
</div>
<div class="content8">
cccc8
</div>
<div class="content9">
cccc9
</div>
The Script:
$('.justClick').bind('click', function() {
$('div.content').html($('div.content' + ($(this).index()+1)).html());
});
The CSS:
.content {
background-color: red;
}
The JSFiddle link:
http://jsfiddle.net/6uzU6/
I am getting to achieve the onclick functionality on the click of navigation items on click of them, but all the div's are visible.
What I want, is that all the div's except first div (with the class .content) should be hidden and when you click on the navigation items, it should show up.
Try this:
$('div').not(".content,.content1").hide();
$('.justClick').bind('click', function() {
$('div').not(".content").hide();
$('div.content').html($('div.content' + ($(this).index()+1)).html());
});
DEMO
It seems like there is something missing in your code because there is no relation between the links and div you want to show. you will require more attributes on to maintain a relations between them.
A better approach would be apply a common class to all div like 'content-block' and class equal to use following code.
$(".content-block:not(:first)").hide();
and show respective div on click on link
$("#menu li").click(function(e){
$(".content-block").eq($(this).index()).show();
});
you can use other parameters as well to relate them instead of index.
Give attribute to div runat="server" and Id="dv1"
using property display block and none u can show or hide it

How to show specific div's from li-objects?

I' trying to create a <ul> with <li> objects to slide the UL away and show specific div's.
I have these div-tags:
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
And this list:
<ul class="meny">
<li id="show1">Show 1</li>
<li id="show2">Show 2</li>
<li id="show3">Show 3</li>
</ul>
Why doesn't this JS work?
$(function() {
$("#show1").click(function() {
$(".meny" ).toggle("slide");
$("#1").click("show");
});
});
I've been trying all night long...
EDIT
I'm trying to get my project to have a CLICK-event fired when you press a specific list object. When that is done, the whole ul should slide away and show a specified div.
See: http://aatw.se/test/booking.html
it should work too-
$("#1").css("display","block");
$("#1").click("show");
should be:
$("#1").show();
Firstly your div's are empty .
Next
$("#1").click("show");
Supposed to be
$("#1").show();
You can write up a single event handler to all the li's by using HTML-5 data attributes
HTML
<div id="1">This is Div 1</div>
<div id="2">This is Div 2</div>
<div id="3">This is Div 3</div>
<ul class="meny">
<li data-id="1">Show 1</li>
<li data-id="2">Show 2</li>
<li data-id="3">Show 3</li>
</ul>
JS
$(function() {
$("li").click(function() {
$(".meny" ).toggle("slide");
$("#" + $(this).data('id')).show();
});
});
Check Fiddle
as mentioned, you need to call the show function. Your divs being empty is not an issue. But you should hide them on page load, or set them display to none in your css.
here is a fiddle - http://jsfiddle.net/D6qUe/2
here's your updated code
$("#show1").click(function() {
$(".meny" ).toggle("slide");
$("#1").show();
});
$('div').click(function(){
$('.meny').toggle('slide');
$(this).hide();
});
possible css
div{width:100px;height:100px;background-color:#afa;border:1px solid #0f0;display:none;}

Categories

Resources