I have a small bug where I have created a pop out menu for navigation for mobile mode and there are two buttons which one calls out the mobile navigation bar and one takes it away, I have set the close button to take the menu to the right -400px to come out of the sight of the visitor but there is a scroll bar at the bottom of the page where it takes you to the right side of the page where the navigation bar becomes visible again, can someone help me to hide this navigation bar once the close function has been called. Thanks.
var navLinks = document.getElementById("navLinks");
function showMenu() {
navLinks.style.right = "0";
}
function hideMenu() {
navLinks.style.right = "-400px";
}
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home | LuxxMob</title>
<link rel="stylesheet" href="style.css" />
<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=Teko:wght#400;500;700&display=swap" rel="stylesheet" />
<script src="https://kit.fontawesome.com/360332bae9.js" crossorigin="anonymous"></script>
<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=Nunito:wght#200;400;700&display=swap" rel="stylesheet" />
</head>
<body>
<section class="header">
<div class="menu-header">
<nav>
<img src="images/HD_FILE (2).png" />
<div class="nav-links" id="navLinks">
<i class="fas fa-times" onclick="hideMenu()"></i>
<ul>
<li>
Home
</li>
<li>
News
</li>
<li>
Players
</li>
<li>
Partners
</li>
<li>
About Us
</li>
</ul>
</div>
<i class="fas fa-bars" onclick="showMenu()"></i>
</nav>
</div>
<div class="main-texts">
<div class="text-box">
<h1>Welcome To <em>LuxxMob</em></h1>
<p>
An upcoming eSports team, recruiting talented gamers and creative content creators.
</p>
About Us
</div>
</div>
</section>
<!--NEXT SECTION MEET THE OWNER-->
<section class="meet-me">
<h1>Meet The Players</h1>
<div class="player-info">
<p>
Meet the competitive players, content creators and the owner of LuxxMob. A rapidly growing team of highly skilled members, providing some of the best content and gameplay available on social media currently.
</p>
</div>
</section>
</body>
Use display = none and display = block to hide/show your div
var navLinks = document.getElementById("navLinks");
function showMenu() {
navLinks.style.display= "block";
}
function hideMenu() {
navLinks.style.display= "none";
}
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home | LuxxMob</title>
<link rel="stylesheet" href="style.css" />
<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=Teko:wght#400;500;700&display=swap" rel="stylesheet" />
<script src="https://kit.fontawesome.com/360332bae9.js" crossorigin="anonymous"></script>
<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=Nunito:wght#200;400;700&display=swap" rel="stylesheet" />
</head>
<body>
<section class="header">
<div class="menu-header">
<nav>
<img src="images/HD_FILE (2).png" />
<div class="nav-links" id="navLinks">
<i class="fas fa-times" onclick="hideMenu()"></i>
<ul>
<li>
Home
</li>
<li>
News
</li>
<li>
Players
</li>
<li>
Partners
</li>
<li>
About Us
</li>
</ul>
</div>
<i class="fas fa-bars" onclick="showMenu()"></i>
</nav>
</div>
<div class="main-texts">
<div class="text-box">
<h1>Welcome To <em>LuxxMob</em></h1>
<p>
An upcoming eSports team, recruiting talented gamers and creative content creators.
</p>
About Us
</div>
</div>
</section>
<!--NEXT SECTION MEET THE OWNER-->
<section class="meet-me">
<h1>Meet The Players</h1>
<div class="player-info">
<p>
Meet the competitive players, content creators and the owner of LuxxMob. A rapidly growing team of highly skilled members, providing some of the best content and gameplay available on social media currently.
</p>
</div>
</section>
</body>
You should set overflow-x: hidden; on the body or the navigation parent.
Either use display properties to hide/show the menu bar or if you really want that slide-left/right animation you can use trasnform and transition properties like this:
var navLinks = document.getElementById("navLinks");
function showMenu() {
console.log('Show');
navLinks.style.transition = "all 0.9s";
navLinks.style.transform = "translateX(0)";
}
function hideMenu() {
console.log('Hide');
navLinks.style.transition = "all 0.9s";
navLinks.style.transform = "translateX(-400px)";
}
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home | LuxxMob</title>
<link rel="stylesheet" href="style.css" />
<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=Teko:wght#400;500;700&display=swap" rel="stylesheet" />
<script src="https://kit.fontawesome.com/360332bae9.js" crossorigin="anonymous"></script>
<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=Nunito:wght#200;400;700&display=swap" rel="stylesheet" />
</head>
<body>
<section class="header">
<div class="menu-header">
<nav>
<img src="images/HD_FILE (2).png" />
<div class="nav-links" id="navLinks">
<button class="fas fa-times" onclick="hideMenu()"></button>
<ul>
<li>
Home
</li>
<li>
News
</li>
<li>
Players
</li>
<li>
Partners
</li>
<li>
About Us
</li>
</ul>
</div>
<i class="fas fa-bars" onclick="showMenu()"></i>
</nav>
</div>
<div class="main-texts">
<div class="text-box">
<h1>Welcome To <em>LuxxMob</em></h1>
<p>
An upcoming eSports team, recruiting talented gamers and creative content creators.
</p>
About Us
</div>
</div>
</section>
<!--NEXT SECTION MEET THE OWNER-->
<section class="meet-me">
<h1>Meet The Players</h1>
<div class="player-info">
<p>
Meet the competitive players, content creators and the owner of LuxxMob. A rapidly growing team of highly skilled members, providing some of the best content and gameplay available on social media currently.
</p>
</div>
</section>
</body>
Related
I am creating a navbar for mobile using Bulma. The HTML snippet I used from Bulma for the Navbar is misbehaving by aligning the buttons to the left instead of aligning them to the right. Moreover, I want those buttons to appear on small screens to the right without the Hamburger. Here is what it looks like on small and large screens. I have even tried using columns to align the buttons to the right and make their appearance possible on small screens.
Small Screen
Large Screen
Here's my code for Navbar:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#6.5.95/css/materialdesignicons.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.4/css/bulma.min.css">
<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=Montserrat:wght#500;600;700&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png">
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary navbar-end">
<strong>Sign up</strong>
</a>
<a class="button is-light navbar-end">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
</body>
</html>
You have an extra <div> with a class of "navbar-start" that is not needed and you also need to get rid of class="navbar-menu" as Bulma automatically hides the right side on small devices with this class.
<div id="navbarBasicExample">
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary navbar-end">
<strong>Sign up</strong>
</a>
<a class="button is-light navbar-end">
Log in
</a>
</div>
</div>
</div>
I am trying to code a locally saved simple web page. I have implemented the Semantic UI as the css framework. I am Trying to use a similar menu setup as one of their examples. I have the majority coded the same, yet when I click on the menu button the sidebar does not become visible.
var sideBarMenu = $('ui.sidebar');
sideBarMenu
.sidebar({
context: $('.bottom.segment')
})
.sidebar('attach events', '.main .item', 'show');
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity="sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha512-dqw6X88iGgZlTsONxZK9ePmJEFrmHwpuMrsUChjAw1mRUhUITE5QU9pkcSox+ynfLhL15Sv2al5A0LVyDCmtUw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<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=Rye&display=swap" rel="stylesheet">
<link rel="stylesheet" href="SVGPCGen.css">
</head>
<div class="ui fixed main menu" id="menuButton">
<a href="" class="launch icon item">
<i class="sidebar icon"></i>
</a>
</div>
<div class="ui bottom attached segment pushable">
<div class="ui inverted labeled icon left inline vertical sidebar menu">
<a class="item" id="calculate">
<i class="calculator icon"></i> Calculate
</a>
<a class="item" id="save">
<i class="save icon"></i> Save
</a>
<a class="item" id="load">
<i class="upload icon"></i> Load
</a>
</div>
<div class="pusher">
Never Mind, found the problem was missing a class description in Javascript jquery search
I have View where body must be 100% height.
Here is code of page
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="utf-8" />
<title>Евгений Соя</title>
<link rel="shortcut icon" type="image/x-icon" href="mini.png"/>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
</head>
<body>
<header>
<div class="logo">
<img class="graficlogo" src="logo.png" alt="Logo">
</div>
<nav>
<div class="topnav" id="myTopnav">
Главная
Тур
Книги
<a id="menu" href="#" class="icon">☰</a>
</div>
</nav>
</header>
<script src="script.js"></script>
<div class="main">
<h1> "Времени пленница "-
новая песня Марии Чайковской по мотивам стихов Евгения Сои доступна iTunes.</h1>
<p></p>
</div>
<div class="icons">
<img class="embl1" src="INSTAGRAM_icon.png">
<a href="https://www.stihi.ru/avtor/sunfish"><img class="embl2"
src="111.png"></a>
</div>
</body>
</html>
Full code is here
https://codepen.io/suhomlineugene/pen/MXPGPN
When I open it on ios device all ok and I see this
ios
On android it is like this
Android
I don't understand why, if I had body 100% width and height.
How I can solve it?
I'm developing a site for the corporation i work at and this time i chose to develop it with Materialize CSS as the UI framework. It looks really nice and i like its functions, though i have one major problem.
A periodic error!
Which means, that when i load the site sometimes i get a js error. For example i have a dropdown named selectDatabase (That is the object i defined).
If i reload the page a couple of times, this does not happen! The dropdown is initialized as it should be. Do you have an idea of what could possibly be wrong here?
Project Details:
Framework: Asp.net Core 2.0 MVC
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320" />
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link type="text/css" rel="stylesheet" href="~/lib/materialize/materialize.css" media="screen,projection" />
<link rel="stylesheet" href="~/lib/corporationtheme/css/main.css" type="text/css" media="all" />
<link rel="stylesheet" href="~/lib/corporationtheme/css/style_guide.css" type="text/css" media="all" />
<link rel="stylesheet" href="~/lib/corporationtheme/css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="~/css/font-awesome-animation.min.css" type="text/css" media="all" />
<link rel="stylesheet" href="~/css/bundle.css" type="text/css" media="all" />
<title>AutoTest Validation</title>
</head>
<body>
<div class="visible-print print-logo"><i class="icon-logo"></i></div>
<div class="content-wrapper">
<div class="mega-menu">
<div class="container nav-top">
<div class="row">
<div class="col s12">
<a class="logo" href="/">
<i class="icon-logo"></i>
</a>
<span class="logo-text">
<i class="icon-logo-text"></i>
<i class="icon-logo-text-oneline"></i>
</span>
<a href="#" class="mobile-btn menu-btn">
<i class="icon-mobile-menu"></i>
</a>
<div class="logo-title">
<div class="userDropdownWrapper">
<a class="dropdown-trigger" id="userDropdown" href="#!" data-target="dropdown">
<img id="userpicture" src="~/images/profile.svg" class="avatar">
<span id="userfirstname"></span>
<svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
</a>
</div>
<ul id="dropdown" class="dropdown-content">
<li><a><i class="material-icons dropdown-icon">border_color</i>Edit Profile</a></li>
<li><a><i class="material-icons dropdown-icon">vpn_key</i>Sign Out</a></li>
<li class="divider"></li>
</ul>
<div id="databaseSelectInputField" class="input-field">
<select id="databaseSelect">
<option value="1" selected>AutoTest</option>
<option value="2">AutoTest2</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="main-nav">
<div class="container">
<div class="row">
<div class="col s12">
<ul>
<li>DashBoard</li>
</ul>
</div>
</div>
</div>
</div>
<div class="sub-nav">
<div class="container">
<div class="row">
<div class="col s12">
</div>
</div>
<div class="row">
<div class="col s12 sub-nav-items">
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="container maincontainer" id="followMe">
#RenderBody()
</div>
</div>
<div class="footer-links">
<ul>
<li>corporation.com</li>
<li>Portal</li>
</ul>
</div>
</div>
<script>
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/lib/corporationtheme/js/app/main.js';
document.body.appendChild(script);
</script>
<script type="text/javascript" src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="~/lib/materialize/materialize.js"></script>
<script type="text/javascript" src="~/js/errorHandler/bundle.js"></script>
<script type="text/javascript" src="~/js/shared/layout/bundle.js"></script>
#RenderSection("scripts", required: false)
</body>
</html>
JS Code:
let selectDatabase = null;
let selectUser = null;
let dropdownUser = null;
let currentUser = {};
$(document).ready(function () {
selectDatabase = $('#databaseSelect');
selectUser = $('#userSelect');
dropdownUser = $("#userDropdown");
getUserProfile();
selectDatabase.formSelect();
selectUser.formSelect();
dropdownUser.dropdown();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
It is hard to answer this question without being able to test a few things, but I'll try anyway :)
It looks like sometimes Materialize js does not load properly, or (what I think is the most probable) it loads after you use your function.
So the solution is this
Make sure that you use your code after the Materialize js is loaded. You can do it on couple of ways. The easiest would be to add defer attribute to script tag in html which loads js in the order of tags in html.
Example
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js" defer></script>
<script src="your_js.js" defer></script>
Okay. So it looks like i did find the problem.
Main.Js was interfering with Materalize and caused the error. I found a more simple main.js for our theme. Now the errors are gone and the website works like a charm. Thank you for your help guys.
I have an <input> with type Search and class as SearchBox. I want this input to toggle when I click an img of class Search. I've connected my html page to jQuery 1.11.1 available from ajax.googleapis.com and this is my .js file:
$(document).ready(function () {
$(".Search").click(function () {
$("input.SearchBox").toggle();
});
});
I've hidden the SearchBox using CSS, like this:
.SearchBox {
display: none;
}
But it does not work. Can anyone help? Thanks in advance.
the html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="Connet, connect, consultation online">
<meta name="description" content="Website of Connet.">
<meta name="author" content="Connet Developement Team">
<meta http-equiv="content-language" content="en-US">
<title> Connet. Connect. Through the internet. </title>
<link rel="favicon" href="favicon.ico" />
<link rel="stylesheet" href="/page_files/css/Main.style.css" type="text/css"/>
<script src="/page_files/js/Default.interactivity.js"></script>
<script src="/page_files/js/Default.proccessing.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--<script src="/page_files/js/jQuery3.0.0.js"></script>-->
<script src="/page_files/data/Default.data.js" ></script>
<script id="roughScript">
</script>
<noscript>
We're sorry, but looks like we can't
access our scripts. Refreshing might fix it.
Check yor internet connection. If it's our
fault we'll usually have something about it
in our blogs. Contact us if problem persists.
</noscript>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="Wrapper">
<nav>
<img src="bf" alt="tbf"/>
<ul class="NavClass">
<li>
<a class="NavLink" onclick="location.reload();">
<img class="NavImg" src="/page_files/media/home-icon.png" alt="Home" />
</a>
</li>
<li>
<a class="NavLink" onclick="open('Contact.html');">
<img class="NavImg" src="/page_files/media/contact-icon.png" alt="Contact" />
</a>
</li>
<li>
<a class="NavLink" onclick="open('Careers.html');">
<img class="NavImg" src="/page_files/media/careers-icon.png" alt="Careers" />
</a>
</li>
<li>
<a class="NavLink" onclick="open('Conroot.html');">
<img class="NavImg" src="/page_files/media/consult-icon.png" alt="Enter Consulation" />
</a>
</li>
<li>
<a class="NavLink" onclick="open('Loginpage.html');">
<img class="NavImg" src="/page_files/media/myspace-icon.png" alt="Login" />
</a>
</li>
<li>
<img class="Search" src="/page_files/media/search-icon.png" alt="Search" />
</li>
<li>
<input class="SearchBox" type="search" />
</li>
</ul>
</nav>
<header>
</header>
<div class="Sections">
<section class="TopSec">
</section>
<section class="MidSec">
</section>
<section class="LowSec">
</section>
<section class="SignIn">
</section>
</div>
<footer>
</footer>
</div>
</body>
</html>