Problems with Sidebars and #pusher in Semantic UI - javascript

Please, help me with this issue.
I have a sctructure.
<div id="toolbar" class="toolbar overlay-displace-top clearfix toolbar-processed">
...
</div>
<div class="ui left sidebar vertical inverted menu overlay" id="ls">
...
</div>
<div class="ui right sidebar vertical inverted menu overlay" id="rs">
...
</div>
<div class="ui fixed top attached inverted menu">
...
</div>
<div id="page">
...
</div>
When I am clicking on toggle button, I am having problems... Semantic-ui puts all divs to #pusher without #ls and top fixed menu.
Administration toolbar is invisible, because is inside #pusher.
I don't want #rs and toolbar inside #pusher.
<div class="ui left sidebar vertical inverted menu overlay" id="ls">
...
</div>
<div id="pusher">
<div id="skip-link">
Skip to main content
</div>
<div id="toolbar" class="toolbar overlay-displace-top clearfix toolbar-processed">
...
</div>
<div class="ui right sidebar vertical inverted menu overlay" id="rs">
...
</div>
</div>
<div class="ui fixed top attached inverted menu">
...
</div>
How can I solve this problem?
Thanks!!!

I see you have two divs named "ls", I assume the second one was meant to be called "rs", that would be why it is moved into #pusher

We needs add class "Pusher" instead id. Thats all.

Related

How to display an icon only when the overflow of a container is active

I am trying to add a scroll arrow below specific divs that have overflow on them and only when the overflow is active. There are different containers with different heights and I only want this scroll arrow to appear on the ones that have overflow on them, is there a way to do this dynamically?
I have created a JS Fiddle to show my html, so basically when the 'slide' content exceeds the 900px max height it gets overflow but I want it to then display the arrow or the opposite effect and hide the arrow if overflow isnt active!
https://jsfiddle.net/h7r16cah/
<div class="large-12 columns">
<div id="" class="large-9 columns page-content-right">
<div class="slider">
<div class="slide-large-content">
</div>
<div class="slide-small-content">
</div>
</div>
</div> <!---end page content right -->
<div class="large-9 columns">
<div class="scrollarrows-container">
<div class="chevron"></div>
<div class="chevron"></div>
<div class="chevron"></div>
</div>
</div>
</div>
</div><!---end large 12 cols -->
Any help would be appreciated, and if you need more information let me know!
Thanks in advance

Struggling with Semantic UI sidebars

I am very new to HTML/CSS/JS and I have started implementing Semantic UI. I'm struggling with the documentation as it seem more geared towards a more experienced user.
I'm trying to create a single page application that has two sidebar menus, one on the left and one on the right. I'd like the right one to be hidden by default and visible when a button is clicked. I'd like it appear over top of the content and not push it to the left. I'd like the right hand menu to be out by default, but be collapsible with a button press. The following is as far as I've gotten, which is close but the right menu still pushes the content left with the right menu out. There is also a overlay, which is called a Dim. I'm guessing that I have to write the JS desperately and call it using the onClick, which would then allow me to further define the setting for the menu, but I'm not sure how best to do this. Any help would be greatly appreciated as I've been at this for many
hours now.
This a good example of what I am attempting to achieve: http://egemem.com/theme/kode/v1.1/blank.html
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="semantic/out/semantic.min.js"></script>
<!-- RIGHT MENU -->
<div class="ui left sidebar menu inverted vertical">
<a class="item">1</a>
<a class="item">2</a>
<a class="item">3</a>
</div>
<!-- RIGHT MENU -->
<div class="ui right sidebar menu inverted vertical dimm">
<a class="item">1</a>
<a class="item">2</a>
<a class="item">3</a>
</div>
<div class="pusher">
<!-- BODY -->
<button id="sidebar_left_toggle" onclick="$('.ui.left.sidebar').sidebar('toggle');">
show sidebar
</button>
<button id="sidebar_right_toggle" onclick="$('.ui.right.sidebar').sidebar('setting', 'transition', 'overlay').sidebar('toggle');">
show sidebar
</button>
</div>
I solved this myself after finally finding an answer to another question. Here is what I determined in case it helps a fellow beginner out.
<!-- LEFT MENU -->
<div class="ui left vertical inverted sidebar menu visible">
<a class="item">1</a>
<a class="item">2</a>
<a class="item">3</a>
</div>
<!-- RIGHT MENU -->
<div class="ui right vertical inverted sidebar menu">
<a class="item">1</a>
<a class="item">2</a>
<a class="item">3</a>
</div>
<div class="pusher">
<div class="ui container">
<!-- BODY -->
<button id="left-sidebar-toggle">
show sidebar
</button>
<button id="right-sidebar-toggle">
show sidebar
</button>
</div>
</div>
<script>
$('.ui.left.sidebar').sidebar({
dimPage: false,
transition: 'push',
exclusive: false,
closable: false
});
$('.ui.left.sidebar')
.sidebar('attach events', '#left-sidebar-toggle');
$('.ui.right.sidebar').sidebar({
dimPage: false,
transition: 'overlay',
exclusive: false,
closable: false
});
$('.ui.right.sidebar')
.sidebar('attach events', '#right-sidebar-toggle');
</script>

how to use div to layout page

I am using div to layout a page. The page has two columns. The first column is a map. The second column contains three rows of graphs. I used the code below. The result gives me just one column (instead of two) with four rows. What am I doing wrong?
<!-- This is where the map will live -->
<div id="map-container" style="width:1000px; height:500px"></div>
<!-- CHARTS!!! -->
<div class="row">
<!-- row chart -->
<div class="col-md-1">
<div id="rowchart2" class="dc-chart"></div>
<center><div class="title">Severity</div></center>
</div>
<!-- Histogram-->
<div class="col-md-2 col-md-offset-1">
<div id="rowchart" class="dc-chart"></div>
<center><div class="title">Histogram(Delta Speed)</div></center>
</div>
<!-- row chart -->
<div class="col-md-4 col-md-offset-0">
<div id="rowchart3" class="dc-chart"></div>
<center><div class="title">Direction</div></center>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
Column 1:
<div id="map-container" class="col-md-12" style="width:100%; height:500px"></div>
</div>
<div class="col-md-6">
OTHER DATA HERE
</div>
</div>
</div>
Assuming you're using Bootstrap here, you need to layout your two columns within a single row so that they will sit side by side. For example, if you want to have two columns that are equal widths, you could use:
<div class="row">
<div class="col-md-6">
<!-- Map Here -->
</div>
<div class=col-md-6">
<div>Chart 1</div>
<div>Chart 2</div>
<div>Chart 3</div>
</div>
</div>
There are always 12 columns in a row, so using "col-md-6" for each column results in two equally sized columns.
Within the second column, you could nest more rows and columns to give you more control:
<div class="row">
<div class="col-md-6">
<!-- Map Here -->
</div>
<div class=col-md-6">
<div class="row">
<div class="col-md-12">Big Chart 1</div>
</div>
<div class="row">
<div class="col-md-6">Small Chart 2</div>
<div class="col-md-6">Small Chart 3</div>
</div>
</div>
</div>
For an example layout, here's a JSFiddle: http://jsfiddle.net/q3vdex96/2/
In your example, you're setting the map to have a width of 1000px. You shouldn't set an explicit width in this way - let Bootstrap handle the sizing using its grid system. Bootstrap's responsive CSS means your charts and map will collapse into a single column on a small screen, and will automatically expand into the correct layout as the screen size increases.
You aren't showing your CSS so part of what I say is just a wild guess.
First, the center element is obsolete. Don't use that.
Second, div elements are block level and will extend the entire width of the page by default. This is why you only get one column but, as I said, without a link or a jsfiddle with the complete markup, it's all a guess.

Bootstrap 3 Collapse events not triggering

I am creating a menu for mobile devices and am trying to use Bootstrap 3's collapse feature.
I already have a collapse working on a different page, so I copied over the structure, gave the panel group a different id, and changed the 'data-parent's and 'panel-collapse' ids appropriately. However, this new accordion just does not work. The 'in' class does not get applied to the target .panel-collapse div, and the hrefs (ex: #navCollapse(x) ) are appearing in the address bar, instead of the normal functionality.
Here is the problematic code. (trimmed to 2 panels for brevity. Still not working as is)
<div class='panel-group' id='accordionNav' >
<div class='panel'>
<div class='panel-heading'>
<a data-parent='#accordionNav' data-toggle='collapse' href="#navCollapse1"> <h3>About</h3></a>
</div>
<div class='panel-collapse collapse in' id='navCollapse1'>
<div class='panel-body'>
<p>Test test ets ejkfbduskfgsalf jydasl</p>
</div>
</div>
</div>
<div class='panel'>
<div class='panel-heading'>
<a data-parent='#accordionNav' data-toggle='collapse' href="#navCollapse2"><h3>Donors</h3></a>
</div>
<div class='panel-collapse collapse' id='navCollapse2'>
<div class='panel-body'>
<p>Test test ets ejkfbduskfgsalf jydasl</p>
</div>
</div>
</div>
</div>

How can I get the scrollbar to stay at the bottom?

I have a web application that performs certain task, and have created a tabbed box in the web app that will print any log information to the designated area.
As you can see from the code below I have three tabs, and when one is clicked I have javascript and jQuery display the div area associated with that tab. Under each div area there is a nested div that will be used for the log to print to.
All is working great other than the scroll bar not staying at the bottom.
I have tried:
HTML:
<div id="main" class="main">
<div id="tabbed-box"class="tabbed-box">
<ul id="tabs" class="tabs">
<li>Tail</li>
<li>Access Log</li>
<li>Conduit Log</li>
</ul>
<div id="tail_box" class="tabbed-content">
<div id="tail_print" class="print-area"></div>
</div>
<div id="access_content" class="tabbed-content">
<div id="access_log_print" class="print-area"></div>
</div>
<div id="log_content" class="tabbed-content">
<div id="log_keywords" class="keywords"></div>
<div id="log_print" class="print-area"></div>
</div>
</div>
jQuery:
document.getElementById("access_log_print").scrollTop = document.getElementById("access_log_print").scrollHeight;
But with no luck. All of the div's with class="print-area" I need the scroll bar to be at the bottom.
If you are using jQuery then you can try this.
$('.print-area').each(function(){
$(this).scrollTop($(this).prop('scrollHeight'));
});

Categories