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.
Related
Right now I am planning on using this on every page, but it is not loading the nav and I'm not sure why.
<!-- This is in my main HTML that I want nav in-->
<div id="nav-placeholder"></div>
<script>
$(function(){
$("#nav-placeholder").load("NavBar.html");
});
</script>
<!-- this is the NavBar.html file-->
<header>
<div class="header-row">
<div class="header-column d-lg-none">
<div class="header-row">
<h1 class="font-weight-semibold text-7 mb-0">
<a href="index.html" class="
text-decoration-none text-color-light
custom-primary-font
">Dynamic</a>
</h1>
</div>
</div>
</div>
</header>
it's not a terrible practice, depending on what components you are going to use inside this method. E.g., Navbars and footers, no problem.
Have a look on this question: How to separate html text file into multiple files?
I am creating a website and would like to use this ready made slider on my page. I have added it to my code, however, the left button does not work. The right button works but the hover disappears on mobile view.
I am new to web development and therefore still learning. If someone could help that would be much appreciated. The CodePen for this slider is https://codepen.io/bryan-erwin/pen/dJEYVr
<header>
<div class="container" id="container">
<div class="caption" id="slider-caption">
<div class="caption-heading">
<h1>Example</h1>
</div>
<div class="caption-subhead"><span></span></div><a class="btn"
href="#"></a>
</div>
<div class="left-col" id="left-col">
<div id="left-slider"></div>
</div>
<ul class="nav">
<li class="slide-up">
<a id="up_botton" href="#"><</a>
</li>
<li class="slide-down">
<a id="down_button" href="#">></a>
</li>
</ul>
</div>
</header>
I would like the left button to go to the previous slide and the right button hover to work on all views
Your javascript code is incomplete you are listening to the right side button click event by this code:
let down_button = document.getElementById('down_button');
down_button.addEventListener('click',function(e){
e.preventDefault();
clearInterval(autoplay);
nextSlide();
autoplay;
});
you have to add code for the left side button also like this:
let up_button = document.getElementById('up_button');
up_button.addEventListener('click',function(e){
e.preventDefault();
clearInterval(autoplay);
prevSlide(); // you have to create this function
autoplay;
});
for this, you have to also add an id="up_button" to the left side button.
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/
Ok so, I've gone through maybe 20 different stackexchange answers to each of these problems, and I still can't solve it, so it's about time I ask and hopefully somebody can point me out of these woods:
I am making a simple website, and I wanted to make like an overlay screen that contains a loading/progress bar, and just progresses over the course of 3 seconds at most before it fades away and reveals the site. I also wanted to add a logo in the middle of it just above the bar. I looked at some video in arabic, but it got out of hand sort of, I didn't know what he was saying, but I thought I could try his code and modify it, but that didn't work either.
Also, I've got a jumbotron in the code I call "jumbotronTwo", and basically what it is supposed to do is that when you click the menu icon and the dropdown menu appears, you click on one of the options, and then the menu should scroll back and the jumbotron should appear. So far I've just been able to make the jumbotron itself and color it, resize it, fill it with text etc., I tried using some javascript and jquery to make it appear and disappear "onclick", but none seemed to work, i'm starting to think maybe it has to do with what libraries I've got?
I have no idea what could be trumping it, so I need somebody to take a look at the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twenty Eight Interiors</title>
<meta name="description" content="Wiredwiki App">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
</head>
I think these up here are important to show, in case I forgot some library or something so you can point it out. I've got some CSS as well but cut it out, if you need to see it too I can show it. Here's the "meat and potatoes":
<body>
<!-- jumbotron-->
<div class="jumbotron" id="jumbotronOne">
<div class="container text-center">
<img src="Untitled.png">
</div>
</div>
<!-- Navbar -->
<nav class="navbar navbar-inverse" id="my-navbar" style="font-family:Webdings;">
<div class="container">
<div class="navbar-header" id="oneDiv">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" id="iconButton">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
<font color="white">MENU</font>
</div><!-- Navbar Header -->
<div class="collapse navbar-collapse" id="navbar-collapse" align="center">
<ul class="nav navbar-nav" id="firstOne">
<li>Design Process</li>
<li>Profile</li>
<li>Contact Info</li>
</ul>
<ul class="list-inline" id="secondOne">
<li><img src="facebook.png" hspace="30"></li>
<li><img src="twitter.png" hspace="30"></li>
<li><img src="instagram.png" hspace="30"></li>
</ul>
</div>
</div><!-- End Container img src="twitter.png"-->
</nav><!-- End navbar -->
<div class="jumbotron" id="jumbotronTwo">
<div class="container">
<h2>Headline goes here in one, two or three lines like this</h1>
<p>...</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
I even had problems with making the javascript work for the glyphicon, I want it to change when I click it, and again; i have no idea what I'm doing wrong, tried lots of potential solutions from stackexchange, but this too seems to point to that it's something else.
Thanks in advance
If it's just a splash page then add a div at the top of your body and wrap your existing page in a div with display:none...
<body>
<div id="loader">
<h4>Logo and progress bar here...</h4>
</div>
<div id="your-page" style="display:none">
<!--Your existing content here...-->
</div>
Then add a little jquery...
jQuery(document).ready(function(){
$( "#loader" ).delay(800).fadeOut(400, function(){
$( "#your-page" ).fadeIn(400);
});
});
See working example here.
If you want to make animating your progress bar easy then I recommend this plugin.
For the glyphicon use the following js...
$( "#iconButton" ).click(function(){
$(this).html('<span class="glyphicon glyphicon-menu-cheeseburger"></span>');
});
Obviously replace the cheeseburger with whatever icon you want to use! See fiddle here for this bit (without the actual icons but you should get the idea).
I see you are loading both jQuery 1.11.2 and 2.1.3, which adds additional loading time as well. This is of course not good and I would suggest just using 3.1.1
In that case #DevFox second code would need to be updated as following, since (document).ready is not supported anymore.
$(function(){
$( "#loader" ).delay(800).fadeOut(400, function(){
$( "#your-page" ).fadeIn(400);
});
});
In my web application using jQuery and jQuery UI (1.10.2 and 1.10.4 respectively), I use the CSS in jQuery CSS in /js/jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.min.css of the zip file from the jQuery site. I had a topNav bar like so before I got the jQuery-based autocomplete function to work:
MyProfile Link1 Link2 | search box | Logout
My search box is 300px and my fonts are 12px, and the width of the div container above is 700px and BEFORE I added jQuery autocomplete support, it was something like this:
<div class="topNav">
<div class="left">
<a href...>MyProfile</a>>  
<a href...>Link1</a>>  
<a href...>Link2</a>>  
</div>
<input id="searchBox" name="searchBox" type="search" >
<div class="right">
<a href...>Logout</a>
</div>
</div>
It was all well aligned then (all of topNav in one line).
Now, after adding jQuery support like so:
<div class="topNav">
<div class="left">
<a href...>MyProfile</a>>  
<a href...>Link1</a>>  
<a href...>Link2</a>>  
</div>
<!-- div-ing the input searchBox was the only change: -->
<div class="ui-widget">
<input id="searchBox" name="searchBox" type="search" >
</div>
<div class="right">
<a href...>Logout</a>
</div>
</div>
And now, the search box has decided it will appear in the next line, and the Logout also appears in the second line, like so:
MyProfile Link1 Link2
| search box | Logout
Any help on how to horizontally align after jQuery autocomplete support is appreciated.
I followed the approach in the accepted answer in this SO post. That seems to have solved my problem. The CSS properties of .ui-widget (the jQuery div element) can be additionally changed (for font size etc.) in your application, that is another way you can remove the issues from including that dependency.