So, I can run this on Firefox and it works just fine. But when running this on Chrome, I'm getting a loading icon which keeps just 'loading'.
Like this: http://prntscr.com/8erab4
On Firefox the result is just great, example: http://weveloped.com/app
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>HorizonApp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="custom.css" />
</head>
<body>
<!--Welcoming Page-->
<div data-role="page" id="homepage">
<div data-role="header" class="header">
<i class="fa fa-bars left"></i>
<h1>Horizon GPD</h1>
<i class="fa fa-home right"></i>
</div>
<div data-role="main" class="ui-content">
<div data-role="panel" data-position="left" data-display="overlay" id="panel">
<div class="sideMenu">
<ul>
<li class="navTitle">Tijden</li>
<li>van 09:00 tot 11:00</li>
<li>van 11:30 tot 13:00</li>
<li>van 13:30 tot 15:00</li>
</ul>
</div>
</div>
<div class="content">
</div>
</div>
</div>
</body>
</html>
CSS CODE:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
body {
font-family: 'Open Sans', sans serif;
}
/* Header */
.header {
height: 40px;
border: none;
}
.ui-page .ui-header {
background-color: #013378;
color: #FFF;
text-shadow: none;
}
.header a i {
font-size: 24px;
color: #FC7C00;
margin-top: 5px;
}
.header a i.left {
margin-left: 5px;
}
.header a i.right {
margin-right: 5px;
}
.header a:hover > i {
color: #FFF;
}
/* Side Menu */
.sideMenu, .sideMenu ul {
padding: 0; margin: 0;
text-shadow: none;
}
.sideMenu ul {
list-style-type: none;
position: relative;
}
.sideMenu ul li.navTitle {
height: 40px; line-height: 40px;
background-color: #FC7C00;
color: #FFF;
font-weight:700;
text-align: center;
}
.sideMenu ul li {
display: block;
}
.sideMenu ul li a {
height: 40px; line-height: 40px;
padding-left: 10px;
color: #222;
text-decoration: none;
display: block;
}
.sideMenu ul li a:hover {
color: #FFF;
background-color: rgba(1, 51, 120, 0.8);
}
.ui-panel-inner {
padding: 0; margin: 0;
}
Install WampServer on your computer, copy the folder of your project in c:\wamp\www\ , turn on the local server and run your jQuery Mobile page (localhost/folder-of-your-project/jquery-mobile-page).
You need a local server to run any jquery mobile page in Chrome
Regards
Related
I have a problem on learning the web.
When I click on the text, the hidden element be appear.
But there are several texts.
I used Javascript getElementsByClassName and it doesn't work.
i am doing web like probot.io (discord bot web commands)
i am not good at javascript :(
What should I do?
pls Help me (T_T)
// ??
#import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght#700&family=IBM+Plex+Sans+Thai+Looped:wght#100&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Heebo:wght#700&family=Roboto:ital,wght#1,700&display=swap');
body {font-family: 'IBM Plex Sans Thai Looped', sans-serif; background-color: #36393F;}
.nav {
background-color: black;
padding: 7px;
font-family: 'Amatic SC', cursive;
}
#pagetitle {color: white; text-align: center; font-size: 30px;}
.heading {
/* text-align: center; */
background-color: #202225;
color: white;
margin: 30px;
margin-left: 30%;
margin-right: 30%;
padding: 20px;
border-left: 4px solid red;
}
.click,
a {
cursor: pointer
}
.cmlistname {
display: inline;
font-family: 'Heebo', sans-serif;
font-size: 24px;
}
.inline {
display: inline;
font-family: 'Roboto', sans-serif;
font-size: 17px;
}
.rtl .panel-body-rtl {
direction: rtl;
text-align: right;
}
.helpcommandHead {
color: #ccc;
font-weight: 700;
font-size: 15px
}
.helpcommandContent {
font-family: 'Roboto', sans-serif;
margin-left: 15px;
white-space: pre
}
.hide {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Command Lists</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css\commandlist.css">
<script src="js\commandscripts.js"></script>
</head>
<body>
<div class="nav">
<div id="pagetitle">Command List</div>
</div>
<div class="heading">
<div class="click">
<div>
<h6 class="cmlistname">?help</h6>
<p class="inline"> -content</p>
</div>
</div>
<div class="panel-body panel-body-rtl hide">
<h3 class="helpcommandHead">Usage:</h3>
<p class="helpcommandContent">#moveme [channel or user]</p>
<p class="helpcommandHead">예시:</p><p class="helpcommandContent">#moveme general
#moveme #Dramex</p>
</div>
</div>
</body>
</html>
you can add this code in your javascript file as the function called getElementsByClassName returns an array of elements and since we have a single element with class "click", i accessed it by [0] .
document.getElementsByClassName("click")[0].addEventListener("click",
unhide);
function unhide(){
document.getElementsByClassName("panel-body")
[0].classList.toggle("hide");
}
maybe like this you want. i add class on "click" event. & using css i show hidden content.
jQuery(document).ready(function($) {
jQuery('.click').click(function(event) {
jQuery('.panel-body').toggleClass('show-content');
});
});
body {font-family: 'IBM Plex Sans Thai Looped', sans-serif; background-color: #36393F;}
.nav {
background-color: black;
padding: 7px;
font-family: 'Amatic SC', cursive;
}
#pagetitle {color: white; text-align: center; font-size: 30px;}
.heading {
/* text-align: center; */
background-color: #202225;
color: white;
margin: 30px;
margin-left: 30%;
margin-right: 30%;
padding: 20px;
border-left: 4px solid red;
}
.click,
a {
cursor: pointer
}
.cmlistname {
display: inline;
font-family: 'Heebo', sans-serif;
font-size: 24px;
}
.inline {
display: inline;
font-family: 'Roboto', sans-serif;
font-size: 17px;
}
.rtl .panel-body-rtl {
direction: rtl;
text-align: right;
}
.helpcommandHead {
color: #ccc;
font-weight: 700;
font-size: 15px
}
.helpcommandContent {
font-family: 'Roboto', sans-serif;
margin-left: 15px;
white-space: pre
}
.hide {
display: none;
}
.panel-body.show-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="nav">
<div id="pagetitle">Command List</div>
</div>
<div class="heading">
<div class="click">
<div>
<h6 class="cmlistname">?help</h6>
<p class="inline"> -content</p>
</div>
</div>
<div class="panel-body panel-body-rtl hide">
<h3 class="helpcommandHead">Usage:</h3>
<p class="helpcommandContent">#moveme [channel or user]</p>
<p class="helpcommandHead">예시:</p><p class="helpcommandContent">#moveme general
#moveme #Dramex</p>
</div>
</div>
</body>
</html>
I have a clearfix in my style.css and everything worked fine on other projects. All of a sudden there is a gap appearing in my browser, causing the div container move approx. 20px down, and I don't know what I do wrong here?
My code runs good in JS Fiddle I think. Therefore I put a picture in it where you can see the not wanted 20px "top - margin". What might be causing this?
Edit
I've found the issue. it was the h1 tag. If you replace h1 in both, html and css, with the p tag, it works perfectly fine after setting the p margin to 0. But why is this?
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Lobster|Raleway:300,400,500,700" rel="stylesheet">
<!--CSS-Font : font-family: 'Lobster', cursive;
font-family: 'Raleway', sans-serif; -->
<title>Appearence</title>
</head>
<div class="container">
<body>
<div class="main-header background-color clearfix">
<header id="main-header-top" class=" ">
<div class="logo-title ">
<h1>Operation<span>Mars</span>.com</h1>
</div>
</header>
</div>
</body>
<!--body-end-->
<footer>
</footer>
</div>
</html>
* {
margin: 0;
padding: 0;
font-family: 'Dosis', sans-serif;
}
body {
margin: 0;
padding: 0;
}
html,
body{
position:relative;
}
.main-header{
width: 100%;
height: 100px;
}
.background-color{
background-color: black;
}
.logo-title {
width: 400px;
height: auto;
left: 50%;
position: relative;
margin-left: -200px;
}
.logo-title a{
text-align: center;
text-decoration: none;
}
.logo-title a h1{
font-size: 60px;
text-decoration: none;
color: white;
font-family: 'Lobster', cursive;
}
.logo-title a h1 span{
color:#ff7256;
font-family: 'Lobster', cursive;
font-size: 70px;
}
/*clearfix*/
.clearfix:before,
.clearfix:after { /*Inhalt hinzufügen*/
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
try this.
* {
margin: 0;
padding: 0;
font-family: 'Dosis', sans-serif;
}
body {
margin: 0;
padding: 0;
}
html,
body{
position:relative;
}
.main-header{
width: 100%;
height: 100px;
}
.background-color{
background-color: black;
}
.logo-title {
width: 100%;
height: auto;
}
.logo-title a{
text-align: center;
text-decoration: none;
left: 50%;
position: absolute;
transform:translateX(-50%);
}
.logo-title a h1{
font-size: 60px;
text-decoration: none;
color: white;
font-family: 'Lobster', cursive;
}
.logo-title a h1 span{
color:#ff7256;
font-family: 'Lobster', cursive;
font-size: 70px;
}
/*clearfix*/
.clearfix:before,
.clearfix:after { /*Inhalt hinzufügen*/
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Lobster|Raleway:300,400,500,700" rel="stylesheet">
<!--CSS-Font : font-family: 'Lobster', cursive;
font-family: 'Raleway', sans-serif; -->
<title>Appearence</title>
</head>
<div class="container">
<body>
<div class="main-header background-color clearfix">
<header id="main-header-top" class=" ">
<div class="logo-title ">
<h1>Operation<span>Mars</span>.com</h1>
</div>
</header>
</div>
</body>
<!--body-end-->
<footer>
</footer>
</div>
</html>
my name is Daniel and im working on my portfolio website. I want an overlay when i click on my hamburger menu so that everything becomes darker and the focus lays on the menu. And i want it to go away when you click on the menu again, or click on one of the menu items or click on the overlay self. (only for my mobile version)
Also i have weird border-line when i open my hamburger menu on mobile and i don't know how to remove it
Link to my website so far: http://20162.hosts.ma-cloud.nl/portfoliowebsite/
(the latest version isn't online yet)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta name="author" content="Daniel Gotz">
<title>Daniel Gotz | Porfolio </title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/scrolling-nav.css" rel="stylesheet">
<link href="dist/hamburgers.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Exo+2:600,900|Roboto" rel="stylesheet">
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<section id="intro" class="intro-section">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header page-scroll">
<button class="hamburger hamburger--spin navbar-toggle visible-xs" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class=" hamburger-box">
<span class=" hamburger-inner"></span> </span>
</button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav right">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li> <a class="page-scroll" href="#intro">Intro</a> </li>
<li> <a class="page-scroll" href="#mijnwerk">Mijn werk</a> </li>
<li> <a class="page-scroll" href="#overdaniel">Over Daniel</a> </li>
<li> <a class="page-scroll" href="#contact">Contact</a> </li>
</ul>
</div>
</nav>
<div class="overlay" id="overlay"></div>
<div class="title">
<h1> Every mountain top is within reach if you just keep climbing</h1> </div>
<div class="berg">
<img src="berg.svg">
</div>
</section>
<section id="mijnwerk" class="about-section"> </section>
<section id="overdaniel" class="services-section"> </section>
<section id="contact" class="contact-section"> </section>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="js/hamburgers.js"></script>
</body>
</html>
CSS:
.overflow {
overflow-x: hidden;
position: relative;
}
.home {
height: 100vh;
width: 100vw;
background-color: #2ecc71;
}
.mijnwerk {
height: 100vh;
width: 100vw;
background-color: #27ae60;
}
.navbar-default {
background: none;
border-color: transparent;
z-index: 3;
}
.right {
float: right;
text-align: right;
}
.navbar-default .navbar-nav>li>a {
font-family: 'Roboto', sans-serif;
color: #ecf0f1;
font-size: 14px;
}
.nav>li>a {
padding: 15px 25px;
border-style: none;
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
color: #ecf0f1;
border-style: none;
}
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
background: none
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-style: none;
}
h1 {
font-family: 'Exo 2' , sans-serif;
font-weight: 900;
font-size: 37px;
line-height: 60px;
}
.title {
font-family: 'Exo 2', sans-serif;
text-align: center;
width: 350px;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.berg {
position: absolute;
width: 100%;
bottom: 0;
margin: 0 0 -2px 0;
}
.overlay {
position: fixed;
top: 0;
z-index: 2;
display: none;
overflow: auto;
width: 100%;
height: 100%;
background: #333;
}
body {
width: 100%;
height: 100%;
}
html {
width: 100%;
height: 100%;
}
#media(min-width:767px) {
.navbar {
}
.top-nav-collapse {
padding: 0;
}
}
.intro-section {
height: 100%;
background: #2ecc71;
color: white;
text-align: center;
}
.about-section {
height: 100%;
background: #27ae60;
}
.services-section {
height: 100%;
background: #3498db;
}
.contact-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
JS:
// Look for .hamburger
var hamburger = document.querySelector(".hamburger");
// On click
hamburger.addEventListener("click", function() {
// Toggle class "is-active"
hamburger.classList.toggle("is-active");
// Do something else, like open/close menu
});
I hope someone can help me out with these problems! :)
With this config you just pass background to the menu, and the close button will not be included and remove the border.
.navbar-collapse navbar-ex1-collapse collapse in {
background: rgba(27, 27, 62, 0.5);
}
.navbar-default {
background: none;
border: none;
z-index: 3;
}
Hi guys I am trying to follow this Example and do exactly the same for my site, however I cant get my nav bar to work and follow the screen down. I have tried a lot and not sure what is going on.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<div class="parallax">
<div class="avater" style="background-image: url('Images/Pic1.jpg');background-size: cover;"></div>
<div class="info1">
<h1>Hero</h1>
<h2>Play play play</h2>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="section">
<h1> Section 1 <h1>
</div>
<div class="section2">
<h1> Section 2 <h1>
</div>
<div class="section3">
<h1> Section 3 <h1>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 70;
if ($(window).scrollTop() > navHeight) {
$('navbar').addClass('fixed');
}
else {
$('navbar').removeClass('fixed');
}
});
});
</script>
</body>
</html>
CSS:
body {
font-family: 'Open Sans', sans-serif, Arial;
font-size: 16px;
color: #6D6D6D;
background-color: #F5F5F5;
font-weight: 300;
}
h1,h2,h3,h4,h5,h6 {
font-family: 'Montserrat', sans-serif, Arial;
padding-bottom: 5px;
color: #373432;
line-height: 1em;
font-weight: normal;
}
a {
text-decoration: none;
outline: none;
}
/* Header */
.parallax {
background-image: url("../Images/back1.jpg");
min-height: 700px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 100px 20px;
}
.avater {
width: 260px;
height: 260px;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: inset 0 0 0 0 rgba(200, 95, 66, 0.4), inset 0 0 0 16px rgba(255, 255, 255, 0.16), 0 1px 2px rgba(0, 0, 0, 0.1);
margin: 0 auto;
}
.info1 {
text-align: center;
margin-top: 40px;
}
.info1 > h1 {
font-size: 60px;
color: #FFFFFF;
}
.info1 > h2 {
color: #FFFFFF;
font-size: 30px;
}
/* Navbar */
.fixed {
position: fixed;
top: 0;
height: 70px;
z-index: 1;
}
.navbar {
margin-bottom: 0px;
left: 0;
top: 0;
width: 100%;
list-style: none;
height: 70px;
}
.navbar-nav {
float: none;
margin: 0;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-nav > li > a {
line-height: 38px;
}
.navbar-nav > li > a.active {
background-color: #E7E7E7;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #333333;
background-color: #E7E7E7;
}
.navbar-toggle {
background-color: #000000;
background-image: none;
border-radius: 4px;
float: right;
margin-bottom: 8px;
margin-right: 15px;
margin-top: 18px;
padding: 9px 10px;
position: relative;
}
.navbar-inverse .navbar-toggle .icon-bar {
background-color: #2DCC70;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #000000;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
border-color: transparent;
}
.section{
background-color:Red;
height: 1000px;
margin: 0;
}
.section h1 {
margin: 0;
}
.section2{
background-color:blue;
height: 1000px;
margin: 0;
}
.section3{
background-color:Black;
height: 1000px;
margin: 0;
}
If I change var navHeight = $( window ).height() - 70; to 277 it works fine however if I make the screen smaller it snaps straight up without waiting so its really weird.
Any help on this matter would be great.
Thanks
Apologies. I tried to fix your code instead of giving you a different solution. This works without the jumping.
var $window = $(window),
$el = $('nav'),
elTop = $el.offset().top;
$window.scroll(function() {
$el.toggleClass('navbar-fixed-top', $window.scrollTop() > elTop);
});
I am try to build a menu for my personal webpage which would load a html file into a contents div when I click on the corresponding link on the menu. The layout is what I want, but unfortunately I cannot get the click event to work. This is what I have:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jorge Martins' HomePage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles.css" media="all" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script language="javascript">
$(document).ready(function () {
$('li.about').click(function(){
$('#content').load( 'about.html' );
});
$('#research').click(function(){
$('#content').load( 'about.html' );
});
});
</script>
</head>
<body>
<div>
<ul class="menu">
<li id="home">Home</li>
<li class="about">About me</li>
<li id="research">Research</li>
<li id="publications">Publications</li>
</ul>
</div>
<div id="content">
</div>
</body>
</html>
and the css:
ul.menu {
margin: 0;
padding: 0;
float:left;
width: 15%;
margin: 10px;
}
ul.menu li {
list-style: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:24px;
font-weight:bold;
color: #555;
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
ul.menu li:hover {
color: #FFF;
/*padding: 0px 0 0 0px;*/
}
#content {
width: 75%;
float:left;
margin: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #555;
}
Any idea on what I've done wrong?
Thanks.
EDIT:
Removed extra tab as per Joe's comment.
You have an extra close tag.
$(document).ready(function () {
$('li.about').click(function(){
$('#content').load( 'about.html' );
});
//remove this });
$('#research').click(function(){
$('#content').load( 'about.html' );
});
});