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>
Related
Hy, i'm trying to build an Electron app that uses Semantic UI. At the moment, i'm trying to implement a tabular menu as shown in the basic tab example, and this is the behavior i'm trying to implement: https://semantic-ui.com/modules/tab.html#basic-tabs.
My code seems to be all right but the menu isn't behaving as expected. In the image below you can see that the content of the div's just appears down the others, as a normal div html section.
Well, in my research i found that we have to put somethiing like
<script>
var $ = require('jquery');
$('.item').click(function(){
$('.active').removeClass('active');
$(this).addClass('active');
});
</script>
And i did, just don't know if the right way. After that the functionality of changing the pressed button is working, i.e. if i press the "second" button the ui render correctly, lik image below. And so on with the other possible tabs.
I've already did the following steps:
-> Import jQuery via NPM with npm install jquery --save and this gave me "jquery": "^3.5.1" on my package.json file.
My full code is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./Semantic-UI-CSS-master/semantic.css">
</head>
<body>
<div class="ui visible left demo vertical inverted thin sidebar labeled icon menu">
<a class="item" href="index.html">
<i class="tint icon"></i>
Análise
</a>
<a class="item" href="resultados.html" style="color: aquamarine;">
<i class="chart bar icon" style="color: aquamarine;"></i>
Gráficos
</a>
</div>
<div class="pusher">
<div class="ui basic segment">
<div style="width: 80%; margin: 2%;">
<div class="ui top attached tabular menu">
<a class="item active" data-tab="hidrogenio">
Níveis de hidrogenio
</a>
<a class="item" data-tab="etano">
Photos
</a>
<a class="item" data-tab="etileno">
Etileno
</a>
</div>
<div class="ui bottom attached segment" data-tab="hidrogenio">
<p>First Tab</p>
</div>
<div class="ui bottom attached segment" data-tab="etano">
<p>Second Tab</p>
</div>
<div class="ui bottom attached segment" data-tab="etileno">
<p>Third Tab</p>
</div>
</div>
</div>
</div>
<script>require('./js/renderer')</script>
</body>
<script>
var $ = require('jquery');
$('.item').click(function(){
$('.active').removeClass('active');
$(this).addClass('active');
});
</script>
</html>
I don't know why the div with the data-tab aren't working as expected and remain "hidden" until we press the respective button...
I'd appreciate so much the help! Thanks.
after looking on your code and checking the documentation which I post below the basics:
<!-- The basic format for a tabular menu -->
<div class="ui top attached tabular menu">
<a class="active item" data-tab="first">First</a>
<a class="item" data-tab="second">Second</a>
<a class="item" data-tab="third">Third</a>
</div>
<div class="ui bottom attached active tab segment" data-tab="first">
First
</div>
<div class="ui bottom attached tab segment" data-tab="second">
Second
</div>
<div class="ui bottom attached tab segment" data-tab="third">
Third
</div>
and the JS code:
// the require js code to make semantic read that html as a tabular menu
$('.menu .item')
.tab()
;
I don't see the required JS part on your code, just the actions your script will run when you click an item. You really need the JS code part I posted in order for that to work.
I am trying to make a responsive sticky navigation bar which will shorten when the screen gets too small (for mobile). The navigation bar works fine without the hamburger bars on my laptop, but i am struggling to implement the following code on W3C with my code.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav
the following is a link to jsfiddle with the HTML, CSS and Javascript code I am using.
HTML
https://jsfiddle.net/cpeotvsf/25/
below is my code
<body>
<div class="top-container">
<h1>testing header</h1>
<h3>Scroll down to see learn more.</h3>
</div>
<div class="header" id="myHeader">
<div class="navbar" id="Mynavbar">
Home
<div class="dropdown">
<button class="dropbtn">Services
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Red or Black Tarmac Drives and Paths
Fencing and Gates
Shingle and Coloured Gravels
Drainage Work
Patios and Crazy Paving
Block Paved Driveways and Paths
Turfing and Artificial Grass
Brick and Purbeck Stone Walls
Decking and Rockeries
</div>
</div>
Gallary
Before and After
Testimonials
Contact Us
<a href="javascript:void(0);" class="icon" onclick="myFunctionn()">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
The CSS and Javascript I am using are in the jsfiddle link above
Any help on this would be greatly appreciated
Your js is fine but jsFiddle keeps the script's load-type on load rather than at the bottom of the page so the onClick can't find the following function:
function myFunctionn() {
// place this script below your body content.
}
To make the above function run properly in jsFiddle, just click JavaScript + No-Library (pure JS) ▼ and change the load type to bottom of body then re-run the script.
jsFiddle with load type updated: https://jsfiddle.net/cpeotvsf/35/
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.
I making page with tabs . And i ahve to make tabs inside tabs which Right now i am making it as button as I am not getting how to make it as tabs. Can anyone suggest me how to make it pls.
Below is my piece of code;
<div id="container">
<!-- Start Tabs !-->
<div class="tab-container">
<div id="c1">
Projects <!-- This is your actual tab and the content is below it !-->
<div class="tab-content"> <!-- tab-container > div > div in the CSS !-->
<button id="create">Create</button>
<button id="edit">Edit</button>
</div>
</div>
just make it with the help of css in short give it backgroud-color or backgroud-image, gradient on button and more and more you can also place div also at the place of button. As you want that's it .... its tutorials also present easily
I'm about 2 months new to programming and Twitter Bootstrap, so please be kind!
I've done a lot of digging and searching, but am not sure I am using the correct terms so I figure I'd ask directly.
I am trying to create an Expand/Collapse all button that will expand or collapse all items under a Title Header. The items under a title header include a text piece and an image. I want to be able to expand/collapse the text piece by clicking on the Title Header. I want to be able to expand/collapse the text AND the image by clicking on the button.
The problem is: I want to button to expand/collapse everything regardless if the text piece is expanded or collapsed.
This is the jsfiddle: http://jsfiddle.net/mcfly303/XXXYn/1/
As you can see, the button will toggle items open or closed opposite of their current state. Is there a way to do a "universal" expand/collapse, regardless if the nested items are expanded or collapsed?
Basically I'd like the "toggle all" button to result only in a) the title or b) the title and the image.
Thanks in advance for any help!!!!
my html:
<div class="well sidebar-nav" id="sidebar">
<ul class="nav nav-list">
<li>Toggle All
</li>
</ul>
</div>
<div class="accordion" id="accordion1">
<div class="accordion-group">
<div class="row-fluid">
<div class="span9">
<div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
<h2>COOL HAND LUKE</h2>
</a>
</div>
</div>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<div class="mainList"> Paul Newman Movies <i class="icon-white icon-th-list"></i>
</div>
</div>
</div>
</div>
</div>
<div id="collapseMain" class="accordion-body collapse in">
<div class="accordion-inner">
<div class="row-fluid">
<div class="span12">
<img src="http://www.samefacts.com/wp-content/uploads/2012/12/CoolHandLuke_135Pyxurz.jpg" alt="">
</div>
</div>
</div>
</div>
my javascript:
$('.expandcollapse').click(function () {
$('.collapse').each(function (index) {
$(this).collapse("toggle");
});
});
EDIT: So I partially figured it out. jsfiddle: http://jsfiddle.net/mcfly303/XXXYn/4/
I split to button into two separate buttons to clearly label each function I want to achieve.However, there is still a kink. Namely on loading, the FIRST CLICK on the Title View button will toggle the text open and the picture closed. And also on load, the first click on the Title and Image button will toggle the text open and keep the image open.
After the first click, everything works fine, which to clarify (and edit my misstatement above) is:
Click on TITLE VIEW - collapses all except the Title. Click on the Title will expand/collapse the text piece
Click on TITLE AND IMAGE VIEW - expands to Title and Image. Click on the Title will expand/collapse the text piece
If anyone can please help with this last kink of the "first click problem" I would really appreciate it!
Thanks.
Updated JS:
var isCollapsed = false;
$('.expandcollapse').click(function () {
var collapseCommand = isCollapsed ? "show" : "hide";
$('.collapse').each(function () {
$(this).collapse(collapseCommand);
});
isCollapsed = !isCollapsed;
});
I also added the in class to #collapseOne so the page displays correctly initially.
Edit:
New code based on your edit:
$('.titleView').click(function () {
$('#collapseOne, #collapseMain').collapse('hide');
});
$('.fullStubView').click(function () {
$('#collapseOne, #collapseMain').collapse('show');
});
Unless I'm missing something, seems like this solves the problem. jsFiddle