div gap at top of page? - javascript

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>

Related

Fullscreen not appear [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 months ago.
Improve this question
I have this problem with the menu. When I click on the hamburger icon in the menu, the full screen menu should appear where I will insert other items. I've also set the nav and given the parameters (on and off via js too), but something doesn't make it appear for me. Could you tell me how to solve?
Thanks a lot to whoever will help me
I leave the link of my codepen: https://codepen.io/edalbe/pen/QWxYXov
$( document ).ready(function() {
var hamburger = $('#hamburger-icon');
var nav = $('.canvas');
hamburger.click(function() {
nav.toggleClass('shown');
hamburger.toggleClass('active');
return false;
});
});
body, html {
overflow: hidden;
}
body{
font-family: 'Montserrat', sans-serif;
height: 100%;
margin: 0;
font-size: 1rem;
line-height: 1.5;
letter-spacing: 0.0625em;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Paracas_National_Reserve%2C_Ica%2C_Peru-3April2011.jpg/1600px-Paracas_National_Reserve%2C_Ica%2C_Peru-3April2011.jpg");
}
.separatore{
padding-left: 5px;
padding-right: 5px;
color:black;
}
.bi-bag{
margin-right: 12px;
font-size: 20px;
color:black;
}
.bi-heart{
font-size: 20px;
color:black;
}
.bi-person{
font-size: 20px;
color:black;
}
.bi-list{
margin-right: 12px;
font-size: 25px;
color:black;
}
.minemenu a{
text-decoration: none;
color: black;
font-size: 18px;
}
#menumio{
background-color: transparent;
}
.menu{
font-family: 'Cormorant Garamond', serif;
color:black;
font-size: 23px;
}
.shop{
font-family: 'Cormorant Garamond', serif;
color: black;
font-size: 20px;
}
#media(max-width:550px){
.nascondi{
display: none!important;
}
.minemenu a{
font-size: 16px;
line-height: 3px;
}
}
.canvas{
top: -50px;
left: 0;
width: 100%;
height: 100%;
display: block;
background: red;
position: fixed;
opacity: 0;
max-height: 0;
overflow: hidden;
transition: all 0.2s;
}
.canvas.shown {
top: 0;
opacity: 1;
max-height: none
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Example</title>
<!--BOOTSTRAP-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.2/font/bootstrap-icons.css">
<!--MYSTILE-->
<link href="style.css" rel="stylesheet" type="text/css">
<!--GOOGLE FONT-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=La+Belle+Aurore&family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>
<body>
<nav id="menumio">
<div class="container text-center minemenu">
<nav class="canvas"></nav>
<div class="row">
<div class="col-4 d-flex">
<a id="hamburger-icon" href="#"><i class="bi bi-list"></i></a><span class="menu"><i>Menù</i></span>
</div>
<div class="col-4">
<font style="font-weight: 600;">Brand</font> Name
</div>
<div class="col-4 d-flex justify-content-end">
<i class="bi bi-bag"></i><span class="shop"><i>Shop</i></span>
<span class="separatore nascondi">|</span>
<i class="bi bi-person mx-1 nascondi"></i>
<span class="separatore nascondi">|</span>
<i class="bi bi-heart mx-1 nascondi"></i>
</div>
</div>
</div>
</nav>
<script src="script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
</body>
</html>

Why is the scroll-snap not working in CSS?

I have no idea why the scroll-snap-type CSS property isn't working as expected.
I just want the page to scroll down to each div smoothly and it doesn't want to work.
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (scroll) {
scroll.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
* {
box-sizing: border-box;
margin: 0px;
}
h1 {
font-family: 'Roboto', sans-serif;
margin-top: 1vh;
color: rgb(230,230,230);
}
a {
text-decoration:none;
font-family: 'Roboto', sans-serif;
color: rgb(230,230,230);
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: rgb(24, 24, 24);
}
::-webkit-scrollbar-thumb {
background: rgb(170, 164, 164);
border-radius: 60px;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
-ms-border-radius: 60px;
-o-border-radius: 60px;
}
::-webkit-scrollbar-thumb:hover {
background: rgb(56, 56, 56);
}
.navbar {
height: 6.7vh;
width: 100vw;
padding: 0px 2vw;
position: fixed;
top: 0;
background-color: rgb(32, 32, 32);
display: flex;
justify-content: space-between;
align-items: center;
}
.navbarLinks {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width: 30vw;
}
.mainContent {
height: 500vh;
width: 100%;
padding: 0px 2vw;
background-color: rgb(24, 24, 24);
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
.sactionDiv {
padding-top: 6.7vh;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Project</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#500&display=swap" rel="stylesheet">
<link href="" rel="icon" type="image/x-icon" >
<link href="indexStyle.css" rel="stylesheet" >
<script src="indexJS.js" defer ></script>
</head>
<body>
<div id="navbar" class="navbar">
<div id="navbarLogo" class="navbarLogo" >
</div>
<div id="navbarLinks" class="navbarLinks" >
First Div
Second Div
Third Div
Fourth Div
Fifth Div
</div>
</div>
<div id="mainContent" class="mainContent">
<div id="firstDiv" class="firstDiv sactionDiv">
<div id="firstDivTitle" class="firstDivTitle">
<h1>First Div</h1>
</div>
</div>
<div id="secondDiv" class="secondDiv sactionDiv">
<div id="secondDivTitle" class="secondDivTitle">
<h1>Second Div</h1>
</div>
</div>
<div id="thirdDiv" class="thirdDiv sactionDiv">
<div id="thirdDivTitle" class="thirdDivTitle">
<h1>Third Div</h1>
</div>
</div>
<div id="fourthDiv" class="fourthDiv sactionDiv">
<div id="fourthDivTitle" class="fourthDivTitle">
<h1>Fourth Div</h1>
</div>
</div>
<div id="fifthDiv" class="fifthDiv sactionDiv">
<div id="fifthDivTitle" class="fifthDivTitle">
<h1>Fifth Div</h1>
</div>
</div>
</div>
</body>
</html>

The reason your code isn't working is because you are using the body/html's scroll bar. You should be using the .mainContent's scrollbar instead. So the following code will hide the scroll bar of body/html and add the scroll bar to the .mainContent element by setting it's height to 100vh.
See modified CSS code below:
* {
box-sizing: border-box;
margin: 0px;
}
h1 {
font-family: 'Roboto', sans-serif;
margin-top: 1vh;
color: rgb(230,230,230);
}
a {
text-decoration:none;
font-family: 'Roboto', sans-serif;
color: rgb(230,230,230);
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: rgb(24, 24, 24);
}
::-webkit-scrollbar-thumb {
background: rgb(170, 164, 164);
border-radius: 60px;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
-ms-border-radius: 60px;
-o-border-radius: 60px;
}
::-webkit-scrollbar-thumb:hover {
background: rgb(56, 56, 56);
}
html, body {
overflow: hidden;
}
.navbar {
height: 6.7vh;
width: 100vw;
padding: 0px 2vw;
position: fixed;
top: 0;
background-color: rgb(32, 32, 32);
display: flex;
justify-content: space-between;
align-items: center;
}
.navbarLinks {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width: 30vw;
}
.mainContent {
height: 100vh;
width: 100%;
padding: 0px 2vw;
background-color: rgb(24, 24, 24);
scroll-snap-type: y mandatory;
overflow: scroll;
}
.sactionDiv {
padding-top: 6.7vh;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Project</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#500&display=swap" rel="stylesheet">
<link href="" rel="icon" type="image/x-icon" >
<link href="indexStyle.css" rel="stylesheet" >
<script src="indexJS.js" defer ></script>
</head>
<body>
<div id="navbar" class="navbar">
<div id="navbarLogo" class="navbarLogo" >
</div>
<div id="navbarLinks" class="navbarLinks" >
First Div
Second Div
Third Div
Fourth Div
Fifth Div
</div>
</div>
<div id="mainContent" class="mainContent">
<div id="firstDiv" class="firstDiv sactionDiv">
<div id="firstDivTitle" class="firstDivTitle">
<h1>First Div</h1>
</div>
</div>
<div id="secondDiv" class="secondDiv sactionDiv">
<div id="secondDivTitle" class="secondDivTitle">
<h1>Second Div</h1>
</div>
</div>
<div id="thirdDiv" class="thirdDiv sactionDiv">
<div id="thirdDivTitle" class="thirdDivTitle">
<h1>Third Div</h1>
</div>
</div>
<div id="fourthDiv" class="fourthDiv sactionDiv">
<div id="fourthDivTitle" class="fourthDivTitle">
<h1>Fourth Div</h1>
</div>
</div>
<div id="fifthDiv" class="fifthDiv sactionDiv">
<div id="fifthDivTitle" class="fifthDivTitle">
<h1>Fifth Div</h1>
</div>
</div>
</div>

Hidden Things Appear when click elemet - javascript, css

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>

Display the whole image

There is a code. I layout class content. You need to display a picture <img src="../img/mobileimage.png"></img>
$(document).ready(function() {
all__buttons = document.querySelectorAll('.header__button');
/*selected__button.click= function(){
selected__button.backgroundColor='#5f3ec0';
};*/
/*
function changeColor(inputbutton) {
inputbutton.style.backgroundColor='#5f3ec0';
}
*/
[].forEach.call(all__buttons, function(selected__button) {
selected__button.addEventListener('click', function(event) {
event.target.style.backgroundColor = '#5f3ec0';
event.target.style.color = '#ffffff';
});
});
})
body {
margin: 0;
padding: 0;
}
.globalcontainer {
margin-top: 0px;
margin-right: 4%;
margin-bottom: 0px;
margin-left: 4%;
height: 100%;
}
.header>.header__text {
position: relative;
width: 93px;
height: 24px;
left: 0;
margin-top: 129px;
margin-bottom: 20px;
font-family: TT Norms;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 100%;
/* identical to box height, or 24px */
color: #000000;
}
/*
.header__buttons {
left: 0;
top: 193px;
}
*/
.header__button {
width: 75px;
height: 30px;
border-radius: 4px;
background-color: #fff;
margin-right: 1.75%;
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap;
}
.header__buttons {
display: flex;
flex-direction: row;
align-items: center;
padding: 7px 15px 7px 0px;
/*margin-right: 10%;*/
}
.mobileimage {}
<html>
<head>
<!-- <link rel="stylesheet" href="testsite.css">-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Example</title>
<link rel="stylesheet" type="text/css" href="../css/mobile.css" media="screen and (min-width: 320px) and (max-width: 639px)"></link>
<link rel="stylesheet" type="text/css" href="../css/tablet.css" media="screen and (min-width: 640px) and (max-width: 1023px)"></link>
<link rel="stylesheet" type="text/css" href="../css/desktop.css" media="screen and (min-width: 1024px) and (max-width: 1920px)"></link>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="globalcontainer">
<div class="header">
<div class="header__text">
Обзоры
</div>
<div class="header__buttons">
<!-- <span> -->
<button class="header__button">Все</button>
<button class="header__button">Видео</button>
<button class="header__button">Текст</button>
<button class="header__button">Обзоры</button>
<button class="header__button">Сравнения</button>
<button class="header__button">Краш видео</button>
<button class="header__button">Распаковка</button>
<!-- </span> -->
</div>
</div>
<div class="content">
<div class="cardexample">
<div class="mobileimage">
<img src="../img/mobileimage.png"></img>
</div>
</div>
<div class="cardexample">
</div>
<div class="cardexample">
</div>
<div class="cardexample">
</div>
</div>
</div>
<script type="text/javascript" src="jsactions.js"></script>
</body>
</html>
The page is displayed like this
[real view]
but it is necessary (It is necessary that the picture is displayed in full)
[neededview]
[Image from site]
It is necessary to display the entire drawing, not part of it. Quick help is required. The drawing used to scale normally earlier.

$(document).ready(function() {
all__buttons = document.querySelectorAll('.header__button');
/*selected__button.click= function(){
selected__button.backgroundColor='#5f3ec0';
};*/
/*
function changeColor(inputbutton) {
inputbutton.style.backgroundColor='#5f3ec0';
}
*/
[].forEach.call(all__buttons, function(selected__button) {
selected__button.addEventListener('click', function(event) {
event.target.style.backgroundColor = '#5f3ec0';
event.target.style.color = '#ffffff';
});
});
})
body {
margin: 0;
padding: 0;
}
.globalcontainer {
margin-top: 0px;
margin-right: 4%;
margin-bottom: 0px;
margin-left: 4%;
height: 100%;
}
.header>.header__text {
position: relative;
width: 93px;
height: 24px;
left: 0;
margin-top: 129px;
margin-bottom: 20px;
font-family: TT Norms;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 100%;
/* identical to box height, or 24px */
color: #000000;
}
/*
.header__buttons {
left: 0;
top: 193px;
}
*/
.header__button {
width:100%;
height: 30px;
border-radius: 4px;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap;
background-size:cover;
}
.header__buttons {
display: flex;
flex-direction: row;
align-items: center;
padding: 7px 15px 7px 0px;
/*margin-right: 10%;*/
}
img{
max-width:100%;
}
#back{
width:100%;
}
<html>
<head>
<!-- <link rel="stylesheet" href="testsite.css">-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Example</title>
<link rel="stylesheet" type="text/css" href="../css/mobile.css" media="screen and (min-width: 320px) and (max-width: 639px)"></link>
<link rel="stylesheet" type="text/css" href="../css/tablet.css" media="screen and (min-width: 640px) and (max-width: 1023px)"></link>
<link rel="stylesheet" type="text/css" href="../css/desktop.css" media="screen and (min-width: 1024px) and (max-width: 1920px)"></link>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="globalcontainer">
<div class="header">
<div class="header__text">
Обзоры
</div>
<div class="header__buttons" id="back">
<!-- <span> -->
<button class="header__button">Все</button>
<button class="header__button">Видео</button>
<button class="header__button">Текст</button>
<button class="header__button">Обзоры</button>
<button class="header__button">Сравнения</button>
<button class="header__button">Краш видео</button>
<button class="header__button">Распаковка</button>
<!-- </span> -->
</div>
</div>
<div class="content">
<div class="cardexample">
<div class="mobileimage" id="back">
<img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fG1hbnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80"></img>
</div>
</div>
<div class="cardexample">
</div>
<div class="cardexample">
</div>
<div class="cardexample">
</div>
</div>
</div>
<script type="text/javascript" src="jsactions.js"></script>
</body>
</html>

jQuery mobile won't work on Google Chrome

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

Categories

Resources