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);
});
});
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.
So I have about 20 projects to show on my website and since I don't want to create 20 HTML files for each of them, I use this script to link people to the specific projects they click on. And so the link is like: http://mywebsite.com/projects.html?option="project1"
The problem I notice is that it usually displays the first project for about 1 second or longer before it shows the project I click on, I don't know what's the cause, I don't know if it's a glitch. Is there a way to fix it?
The script and my html:
$(document).ready(function() {
var url = window.location.href;
option = url.match(/option=(.*)/)[1];
showDiv(option);
});
function showDiv(option) {
$('.boxes').hide();
$('#' + option).show();
}
<a href="projects.html?option=haivinh" class="permalink">
<div class="desktop-3 mobile-half columns">
<div class="item">
<h3>Sleep infographic</h3>
<span class="category">Motion graphics</span>
<div class="imgwrapper">
<div class="imgcon">
<img src="images/thumb_item07.gif" />
</div>
<div id="view">view</div>
</div>
</div>
<!-- // .item -->
</div>
<!-- // .desktop-3 -->
</a>
HMTL of the project page:
<div class="container">
<div class="boxes" id="haivinh">
<div class="sidebar full-width">
<div class="desktop-6 tablet-12 columns">
<!--
.sidebar here is to used to apply the same CSS styles (padding, margin, font-size, and etc) applied to "left-sidebar" and "right-sidebar" templates
-->
<div class="box-info">
<h4 class="border-top">
Metro train ad</h3>
<p>The poster was made to promote the upcoming metro train system opening in Ho Chi Minh city in 2017. The idea is that our daily lives would be so much easier and more enjoyable going to work or school with Metro. </p>
</div>
<!-- // .box-info -->
</div>
<!-- // .desktop-6 -->
</div>
</div>
My guess would be that you default to showing project 1. You can tell this because your showDiv() function starts with a .hide(). As your function is not run until document.ready, you may see the initial setup for a short period before the function is run.
To fix this, make sure everything is hidden before running your js.
I just implemented imageScroll.js on my website and for the images in between my paragraphs it works fine. When entering the website I would like to have the first image with the parallax effect as well. The images are either loaded via the data-image html tag or via image option (JS).
When I set the image as "background", I think the image is fix and the parallax effect can't be applied. But when I load the image into a div, as I do it with the other two images in between my paragraphs, it shifts the menu as well as the welcome text below.
I tried to realize it with z-index, but couldn't make it run yet.
Does anyone of you have an idea for me how I could make this happen?
Thanks a lot in advance!
Eric
I didn't see the wood for the trees. Just had to put everything inside the div from the parallax:
<div class="img-holder" data-image="../images/other/home-min.jpg" data-image-mobile="../images/other/home-min.jpg">
<!-- Home Page -->
<div id="home" class="container-fluid">
<div class="row">
<nav class="navigation">
<div class="col-md-3"><a class="navigation" href="#about">About</a></div>
<div class="col-md-3"><a class="navigation" href="#portfolio">Portfolio</a></div>
<div class="col-md-3"><a class="navigation" href="#contact">Contact</a></div>
<div class="col-md-3"><a class="navigation" href="#blog"></a></div>
</nav>
</div>
<div id="welcome" class="row">Welcome</div> <!--Welcome Text-->
</div>
</div>
maybe someone else is also confused and perceive this as helpful.
Cheers
Eric
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 trying to implement Twitter Bootstrap Carousel plug in. It looks and auto cycles correctly, but the slide effect between items does not work. It simply statically replaces one item with the next. While it's functional, this is a less than pleasing UX. Thoughts?
<div class="span7">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="img/CoachellaValley.png" alt="">
<div class="carousel-caption">
<h4>Sponsor 1</h4>
</div>
</div>
<div class="item">
<img src="img/CoachellaValley2.png" alt="">
<div class="carousel-caption">
<h4>Sponsor 2</h4>
</div>
</div>
<div class="item">
<img src="img/CoachellaValley3.png" alt="">
<div class="carousel-caption">
<h4>Sponsor 3</h4>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
[...]
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script type="text/javascript">
$(function(){
$('#myCarousel').carousel();
})
</script>
Try this:
Remove all the following js scripts you have loaded in your document:
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
And just keep the following in that same order (jQuery goes first)
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap.js"></script>
The problem i believe is that, aside from loading the same script files multiple times (the bootstrap js file has all the plugins included already so no need to include the min version (save it for production for now) or the single separate script files), you're not loading the transition script included inside the bootstrap.js file because of the order that your scripts are loading in.
After struggling with this for a while I have found a solution - you just need to include
bootstrap-transition.js
and the slide animation will work.
Deal is if I am using class="carousel" for carousel container and
$('.carousel').carousel('slide',{interval:1000});
it works only for one left\right click and works pretty much fine (but only for one time).
If use class="carousel slide"
and
$('.carousel .slide').carousel('slide',{interval:1000});
then carousel switching but without slide animation effect.
Your Code is Correct..
In my system this code working fine..
There is no definition for class "slide" in Bootstrap 3..But without "Slide" class ,carousel images will change with out any animation effect..
Add this script in you code
<script>
$(document).ready(function () {
$('.carousel').carousel();
});
</script>
Check the Bootstrap CSS & JS Reference in you code..
and also check the order of the Reference files
You can follow this order:-
bootstrap.css
bootstrap-theme.css
jquery-1.9.1.js
bootstrap.js
The script block will not work with out JQ Library..So add JQ Library file correctly ..
And Ensure that the JQ file loaded before the script working..For that you can add the reference at the top of your page
Even though this question was answered successfully - I came here looking for an answer to a similar problem.
My first item in the carousel was sliding left, like normal, but the second item wasn't behind it. Once the first item was off the screen, the second item would just appear, not slide in. Then it would disappear, and the first item would slide in properly.
If you're having this issue, check that you don't have position:relative; on the .item div.
I added that like so:
.carousel-inner > .item {
position:relative;
height:495px;
}
Turns out that messes things up. Removing position:relative; fixed the issue. Now sliding is smooth and correct.