I've been searching the solution for this issue for many days.
1st Splash Page have time out duration then it loads the the home page with list of links. The links are showing but the icons (awesome-icons) are not loading and the transition that i set on each li is not loading as well.
once the page is loaded, if i refresh it all the content with the transition effects are working. I'm using animate.css for list animation.
Can someone figure out the issue?
SPLASH PAGE CODE
<!DOCTYPE html>
<html>
<head>
<title>Splash</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/myapp.css">
<link rel="shortcut icon" href="favicon.ico">
<script src="js/jquery.js"></script>
<script src="_assets/js/index.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on('pageinit','#splash',function(){
// the .on() method does require jQuery 1.7 + but this will allow you to have the contained code only run when the #splash page is initialized.
setTimeout(function(){
//$.mobile.pageContainer.pagecontainer("change", "home.html", {transition: "animated fadeOut"});
$.mobile.changePage("home.html", "animated fadeOut");
}, 4000);
});
</script>
</head>
<body>
<div data-role="page" id="splash">
<div data-role="content">
<img src="images/uos_logo.svg" alt="startup image" style="width: 100%; height: 100%" />
</div>
</div>
<!-- /page -->
</body>
</html>
HOME PAGE CODE
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<link rel="stylesheet" href="css/myapp.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="shortcut icon" href="favicon.ico">
<script src="js/jquery.js"></script>
<script src="_assets/js/index.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="content">
<ul id="myTabs" class="animated slideInUp">
<li class="clr1"><i class="fa fa-angle-right"></i> 1</li>
<li class="clr2"><i class="fa fa-angle-right"></i> 2</li>
<li class="clr3"><i class="fa fa-angle-right"></i> 3</li>
<li class="clr4"><i class="fa fa-angle-right"></i> 4</li>
<li class="clr5"><i class="fa fa-angle-right"></i> 5</li>
<li class="clr6"><i class="fa fa-angle-right"></i> 6</li>
<li class="clr7"><i class="fa fa-angle-right"></i> 7</li>
<li class="clr6"><i class="fa fa-angle-right"></i> 8</li>
<li class="clr5"><i class="fa fa-angle-right"></i> 9</li>
<li class="clr4"><i class="fa fa-angle-right"></i> 10</li>
<li class="clr3"><i class="fa fa-angle-right"></i> 11</li>
<li class="clr2"><i class="fa fa-angle-right"></i> 12</li>
<li class="clr1"><i class="fa fa-angle-right"></i> 13</li>
<li class="clr2"><i class="fa fa-angle-right"></i> 14</li>
<li class="clr3"><i class="fa fa-angle-right"></i> 15</li>
<li class="clr4"><i class="fa fa-angle-right"></i> 16</li>
</ul>
</div>
</div>
<!-- /page -->
<script type="text/javascript">
$('ul#myTabs li').each(function(i){
var t = $(this);
setTimeout(function(){ t.addClass('animated slideInUp'); }, (i+1) * 120);
});
</script>
</body>
</html>
By default jQM loads pages into the current DOM via AJAX and only gets the first DIV with data-role="page". So any scripts/css in the second page are not loaded.
As you intention is to completely replace the splash with the first page, you could just use
location.assign("home.html");
If you really want the nice transition, just include the splash page within your first page as a separate data-role="page" div, or include all the scripts from home within the data-role="page" div so they get loaded into the dom.
Related
I'm doing a drop-down list where, when I hover over a specific element, I should highlight only the selected one, unfortunately the whole list is highlighted in my mind, I know the problem is that in one li there is also a new list to make a drop down menu, Unfortunately, I can not deal with it. It's actual result jsfiddle code
<div class="nav">
<ul>
<li class="parent">
<a class="parent_click">Driving</a>
<ul class="sub_list">
<li class="test">
<a class="sub_click">Type of Car</a>
<ul class="sub_sub_list">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</li>
<li class="test">
<a class="sub_click">Tracks</a>
<ul class="sub_sub_list">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</li>
<li class="teset">Type of driving</li>
</ul>
</li>
</ul>
</div>
</div>
My CSS:
.sub_list, .sub_sub_list {display:none;}
li:hover{
background-color:red;
}
My JS
$(".sub_list").slideUp();
$(".parent_click").click(function() {
$(".parent_click").not(this).next().slideUp()
$(this).closest(".parent").find(".sub_list").slideToggle();
return false;
});
$(".sub_click").click(function() {
var elem = $(this).next()
$(".sub_sub_list").not(elem).slideUp();
$(this).closest(".test").find(".sub_sub_list").slideToggle();
});
Try using anchor for hover instead of li. It will be simplest and easiest solution. While you can play with code if you want complicated solution...
See below snippet.
$(".sub_list").slideUp();
$(".parent_click").click(function() {
$(".parent_click").not(this).next().slideUp()
$(this).closest(".parent").find(".sub_list").slideToggle();
return false;
});
$(".sub_click").click(function() {
var elem = $(this).next()
$(".sub_sub_list").not(elem).slideUp();
$(this).closest(".test").find(".sub_sub_list").slideToggle();
});
.sub_list, .sub_sub_list {display:none;}
a:hover{
background-color:red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8"/>
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<title>Hello, world!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="nav">
<ul>
<li class="parent">
<a class="parent_click">Driving</a>
<ul class="sub_list">
<li class="test">
<a class="sub_click">Type of Car</a>
<ul class="sub_sub_list">
<li><a>List 1</a></li>
<li><a>List 2</a></li>
<li><a>List 3</a></li>
</ul>
</li>
<li class="test">
<a class="sub_click">Tracks</a>
<ul class="sub_sub_list">
<li><a>List 1</a></li>
<li><a>List 2</a></li>
<li><a>List 3</a></li>
</ul>
</li>
<li class="teset"><a>Type of driving</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"
></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
I'm currently working in a "Quote Machine" as part of freeCodeCamp projects. I'm trying to use a list to get three list items behaving as buttons, one next to the other by using the bootstrap class "in-line" however it is not working since each of the li occupy one row. This is my code so far with no CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Random Quote Machine</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css"
integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<h1>Random Quote Machine</h1>
<h5>WARNING: These quotes might inspire you</h5>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="quote-box">
<p id="quote">Test quote</p>
<p id="author">Anonimous</p>
</div>
<ul class="col-md-12 list-inline">
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fas fa-quote-left"></i>Get Quote</li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>
And this is the result in the browser:
list-inline not rendering
Thank you in advance for any feedback
You need the list-inline-item class on the items...
<div class="col-md-12">
<ul class="list-inline">
<li class="list-inline-item"><i class="fab fa-twitter"></i></li>
<li class="list-inline-item"><i class="fab fa-facebook-f"></i></li>
<li class="list-inline-item"><i class="fas fa-quote-left"></i>Get Quote</li>
</ul>
</div>
https://www.codeply.com/go/uzJ5wlWfr0
Also, the UL should go inside the col-md-12. See the Bootstrap Documentation.
Problem:
Fitting five links inside a navigation using Materialize CSS. Right now, three links fit and I can even add a fourth. But when I add five links in total, the last two break.
Minimal Working Example (MWE):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<title>Materialize</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<header>
<nav class="indigo" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo"><i class="material-icons md-36">flight_takeoff</i> Logo</a>
<ul class="right hide-on-med-and-down">
<li class="active">Home</li>
<li>About</li>
<li><a href="javascript:void(0)">Contact</li>
<li><i class="material-icons left">add_circle</i> Registration</li>
<li><i class="material-icons left">account_circle</i> Login</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
Desired output:
To get all five links to fit inside the navigation on the right side.
It's because your <a href="#">Contact is missing the close tag.
Here's the updated code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<title>Materialize</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<header>
<nav class="indigo" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo"><i class="material-icons md-36">flight_takeoff</i> Logo</a>
<ul class="right hide-on-med-and-down">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li> <!-- Note the </a> closing tag -->
<li><i class="material-icons left">add_circle</i> Registration</li>
<li><i class="material-icons left">account_circle</i> Login</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
I am working on an index.html file and inside my head and body tag, I have a nav element. However, in Komodo Edit, version 10.1.1, build 17414, platform linux-x86_64., It red-underlines the nav element and gives me the following erorr message:
HTML: Error: <nav> is not recognized!
This is what my code looks like:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/static/js/script.js"></script>
<script src="/socket.io/socket.io.js"></script>
</head>
<body><div class="sidebar"></div><nav class="main menu">
<ul class = button-container>
<li>
<i class="fa fa-font" style="font-size:6em;"></i>
</li>
...
<li>
<i class="fa fa-picture-o" style="font-size:6em;"></i>
</li>
</ul>
<ul class="export button-container">
<li>
<i class="fa fa-floppy-o" style="font-size:6em;"></i>
</li>
</ul>
</nav>
<nav class="menu font" style="display: none;">
<p>Font</p>
</nav>
...
<nav class="menu picture" style="display: none">
<p>Pictures</p>
</nav>
</body>
</html>
Does anyone know what might be causing this?
Komodo has 2 "Languages" that cover HTML, one is called "HTML" and one is called "HTML5". HTML5 covers the nav element, HTML does not. You need to change your language selection to HTML5.
The language selection is done from the right side of the statusbar, it should currently say "HTML".
Can this Work?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/static/js/script.js"></script>
<script src="/socket.io/socket.io.js"></script>
</head>
<body><div class="sidebar"></div><nav class="main menu">
<ul class = button-container>
<li>
<i class="fa fa-font" style="font-size:6em;"></i>
</li>
...
<li>
<i class="fa fa-picture-o" style="font-size:6em;"></i>
</li>
</ul>
<ul class="export button-container">
<li>
<i class="fa fa-floppy-o" style="font-size:6em;"></i>
</li>
</ul>
</nav>
<nav class="menu font" style="display: none;">
<p>Font</p>
</nav>
...
<nav class="menu picture" style="display: none">
<p>Pictures</p>
</nav>
</body>
</html>
this Might not work but guess Ill try
I just haven't been able to figure out the syntax
I am trying to have a drop-down menu appear when I click on the second button.
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin=
"anonymous" type="text/css" />
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/926120954b.js" type="text/javascript">
</script>
<!-- My CSS -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<ul class="nav nav-tabs">
<li role="presentation"><i class="fa fa-home fa-1g" aria-hidden="true"></i></li>
<!-- ****BEGIN THE DROPDOWN TAB-->
<li role="Presentation" class="dropdown-menu">
<a class="Pet" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Community <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>item</li>
</ul>
</li>
<!-- ***END THE DROPDOWN TAB -->
<li role="presentation">Pet Help</li>
<li role="presentation">Pets for Sale</li>
<li role="presentation">Pet Services</li>
</ul>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type=
"text/javascript">
</script>
</body>
</html>
My first attempt at making a nav menu. (For some reason, I am unable to submit this question without providing "details" so please forgive this meaningless text here)
I think you're missing the call to bootstrap's javascript library which is needed for the hamburger nav. Try adding this after you add the jquery reference (i.e. <script src="...jquery.min.js"...)
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
For more information, see the Bootstrap documentation page: Getting Started, as well as the updated code snippet below.
<link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin=
"anonymous" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type=
"text/javascript">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/926120954b.js" type="text/javascript">
</script>
<!-- My CSS -- >
<link rel="stylesheet" type="text/css" href="mystyle.css">-->
<!--end head: </head> start body:<body>-->
<ul class="nav nav-tabs">
<li role="presentation"><i class="fa fa-home fa-1g" aria-hidden="true"></i></li>
<!-- ****BEGIN THE DROPDOWN TAB-->
<li role="Presentation" class="dropdown-menu">
<a class="Pet" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Community <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>item</li>
</ul>
</li>
<!-- ***END THE DROPDOWN TAB -->
<li role="presentation">Pet Help</li>
<li role="presentation">Pets for Sale</li>
<li role="presentation">Pet Services</li>
</ul>