Foundation 5 off-canvas menu always appears - javascript

I'm having difficulty having my off-canvas menu in Foundation 5 toggle on and off, or at least not always appear on canvas. Below is a picture of the current site.
As shown, the offcanvas is very much on canvas
This is the HTML I am running so far. The content is not included as it is on a separate YAML file, but it should be unnecessary.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="/assets/img/logo/sjpminilogo.png" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{{ page.title }} | Paly SJP</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/assets/css/syntax.css">
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="stylesheet" href="/assets/foundation/css/foundation.css">
<link rel="stylesheet" href="/assets/foundation/css/normalize.css">
<link rel="stylesheet" href="/assets/css/custom.css">
<script type="text/javascript" src="/assets/foundation/js/custom.modernizr.js"></script>
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" type="text/css">
</head>
<body>
<div class="site">
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<div class="header">
<!-- Top Bar -->
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>Paly SJP</h1>
</li>
</ul>
<!-- All tabs on right side -->
<section class="top-bar-section">
<ul class="right">
<li class="name">
ABOUT US
</li>
<li class="name">
CALENDAR
</li>
<li class="has-dropdown not-click">COHORTS
<ul class="dropdown">
<li>COHORT 1</li>
<li>COHORT 2</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
<!-- Side bar -->
<nav class="tab-bar show-for-small">
<a class="left-off-canvas-toggle menu-icon" href="#">
<span>
Paly SJP
</span>
</a>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>
<label>Menu</label>
</li>
<li>
Paly SJP
</li>
<li>
About Us
</li>
<li>
Calendar
</li>
<li>
<label>Cohorts</label>
</li>
<li style="background-color: #3B3B3B">
Cohort 1
</li>
</ul>
</aside>
<div class="content">
{{ content }}
</div>
<div class="footer">
<div class="row">
<div class="large-12 columns">
<h6 style="color:#ffffff; margin-top:24px; font-size:14px;">Keep in touch!</h6>
<a href="https://twitter.com/palysocjustice" target="_blank">
<img src="/assets/img/logo/footer/twitter.png" class="logo" /></a>
<a href="https://www.facebook.com/pages/Paly-Social-Justice-Pathway/1481478495402897" target="_blank">
<img src="/assets/img/logo/footer/facebook.png" class="logo" /></a>
<a href="http://palysocialjustice.blogspot.com/" target="_blank">
<img src="/assets/img/logo/footer/blogspot.png" class="logo" /></a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/assets/foundation/js/vendor/jquery.js"></script>
<script type="text/javascript" src="/assets/foundation/js/foundation.min.js"></script>
<script type="text/javascript" src="/assets/foundation/js/foundation/foundation.clearing.js"></script>
<script type="text/javascript" src="/assets/foundation/js/foundation/foundation.offcanvas.js"></script>
<script type="text/javascript" src="/assets/js/custom.js"></script>
</div>
<script type="text/javascript">
$(document).foundation();
</script>
</body>
</html>

If you inspect the aside element using the developer tools in Chrome or whatever browser you're using, the styles associated with the left-off-canvas-menu class are not present.
Re-upload the complete foundation.css file to ensure the appropriate styles are applied.

Related

Toggle button to change image state

A bit new to HTML, trying to create a dashboard. The state (ON, OFF, OPEN, or CLOSED) of a room or door should be indicated using an icon.
Have an open/close door image & lightbulbs Need help adding element to all the existing “li” elements.
Tried watching tutorials but they were too confusing.
<!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.0">
<title>Dashboard</title>
<!-- Add font from Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<!-- Link CSS style sheet to html document -->
<link rel="stylesheet" href="style.css">
<!-- Link JavaScript file to html document -->
<script src="mqttws31.js"> </script>
<script src="dashboard.js"> </script>
</head>
<body>
<div class="header">
<h1>Home Automation Dashboard</h1>
</div>
<hr>
<div id="messages"></div>
<div id="status"></div>
<hr>
<ul class="dashboard">
<li class="dashboard_item kitchen">
<h4>Kitchen</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item frontdoor">
<h4>Front Door</h4>
<p>CLOSED</p>
</li>
<li class="dashboard_item balconydoor">
<h4>Balcony Door</h4>
<p>CLOSED</p>
</li>
<li class="dashboard_item livingroom">
<h4>Livingroom</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item bedroom">
<h4>Bedroom</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item bathroom">
<h4>Bathroom</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item studyroom">
<h4>Studyroom</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item hall">
<h4>Hall</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
</ul>
</body>
</html>
you either use onclick event to trigger a function when the tag is clicked
or add an Event listener to the tag, this is how you can solve the problem in two ways, here.
it's better here to use variables as a state to manage the current state of each item you have instead of relying on the text
checkout these resources:
https://www.w3schools.com/jsref/event_onclick.asp
https://www.w3schools.com/js/js_htmldom_eventlistener.asp
// use variables as state of each item you have
var livingRoomState = true;
function toggleKitchenLights() {
var status = document.getElementById("kitchen-light").innerHTML;
if (status === "OFF")
document.getElementById("kitchen-light").innerHTML = "ON";
else if (status === "ON")
document.getElementById("kitchen-light").innerHTML = "OFF";
}
var el = document.getElementById("livingroom-btn");
el.addEventListener('click', function() {
document.getElementById("livingroom-light").innerHTML = livingRoomState ? "ON" : "OFF";
livingRoomState = !livingRoomState;
});
<!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.0">
<title>Dashboard</title>
<!-- Add font from Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<!-- Link CSS style sheet to html document -->
<link rel="stylesheet" href="style.css">
<!-- Link JavaScript file to html document -->
<script src="mqttws31.js"></script>
<script src="dashboard.js"></script>
</head>
<body>
<div class="header">
<h1>Home Automation Dashboard</h1>
</div>
<hr>
<div id="messages"></div>
<div id="status"></div>
<hr>
<ul class="dashboard">
<li class="dashboard_item kitchen">
<h4>Kitchen</h4>
<p id="kitchen-light">OFF</p>
<button onclick="toggleKitchenLights()">Toggle</button>
</li>
<li class="dashboard_item frontdoor">
<h4>Front Door</h4>
<p>CLOSED</p>
</li>
<li class="dashboard_item balconydoor">
<h4>Balcony Door</h4>
<p>CLOSED</p>
</li>
<li class="dashboard_item livingroom">
<h4>Livingroom</h4>
<p id="livingroom-light">OFF</p>
<button id="livingroom-btn">Toggle</button>
</li>
<li class="dashboard_item bedroom">
<h4>Bedroom</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item bathroom">
<h4>Bathroom</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item studyroom">
<h4>Studyroom</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item hall">
<h4>Hall</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
</ul>
</body>
</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.0">
<title>Dashboard</title>
<!-- Add font from Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<!-- Link CSS style sheet to html document -->
<link rel="stylesheet" href="style.css">
<!-- Link JavaScript file to html document -->
<script src="mqttws31.js"> </script>
<script src="dashboard.js"> </script>
</head>
<body>
<div class="header">
<h1>Home Automation Dashboard</h1>
</div>
<hr>
<div id="messages"></div>
<div id="status"></div>
<hr>
<ul class="dashboard">
<li class="dashboard_item kitchen">
<h4>Kitchen</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<ol class="b"> <!-- in style.css add .b(list-style=none) do same for all lists add images as SVG add width and height as you need -->
<li class="dashboard_item frontdoor" >
<img src="./frontdoor.svg" width="50px" height="50px" alt="">
<h4>Front Door</h4>
<p>CLOSED</p>
</li>
</ol>
<li class="dashboard_item balconydoor">
<h4>Balcony Door</h4>
<p>CLOSED</p>
</li>
<li class="dashboard_item livingroom">
<h4>Livingroom</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item bedroom">
<h4>Bedroom</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item bathroom">
<h4>Bathroom</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item studyroom">
<h4>Studyroom</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item hall">
<h4>Hall</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
</ul>
</body>
</html>

How to avoid truncation in TextArea?

I replaced the content of textarea in https://codepen.io/DerkJanS/pen/owVGZb?editors=1010 by another one I found, and it gets truncated :
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>run python in browser!</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css" />
<script src="https://cdn.jsdelivr.net/pyodide/v0.18.1/full/pyodide.js"></script>
</head>
<body>
<div class="container-fluid bg-light">
<section class="header text-center p-5">
<h2 class="text-dark">python editor with CodeMirror
and
pyodide
</h2>
</section>
<div class="d-flex flex-column">
<section class="input">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="page">
<h4>Input</h4>
</a>
</li>
</ul>
<div><textarea id="code" name="code">
</textarea>
</div>
</section>
<div class="align-self-center m-3">
<button type="button" class="btn btn-success" onclick="evaluatePython()">
<h5>Run</h5>
</button>
</div>
<section class="output">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="page">
<h4>Output</h4>
</a>
</li>
</ul>
<div>
<textarea id="output" name="output" class="w-100" rows="15">
</textarea>
</div>
</section>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.3/codemirror.min.js"
integrity="sha512-XMlgZzPyVXf1I/wbGnofk1Hfdx+zAWyZjh6c21yGo/k1zNC4Ve6xcQnTDTCHrjFGsOrVicJsBURLYktVEu/8vQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.3/mode/python/python.min.js"
integrity="sha512-/mavDpedrvPG/0Grj2Ughxte/fsm42ZmZWWpHz1jCbzd5ECv8CB7PomGtw0NAnhHmE/lkDFkRMupjoohbKNA1Q=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src='main.js'></script>
</body>
</html>

Can't logout authentication laravel

I can't seem to log out from my account in laravel. I have use the chrome development tool and it told me that it was the fault of my app.js file. So I remove it and replace it with the original copy of the app.js file but the error still remain there with the old previous code. I also didn't really touch any of the login and logout function, only the app.blade.php but in the past I was able to still logout from the account. Can anyone help? Thanks a lot
The error it return me was this
Uncaught TypeError: Cannot read property 'querySelector' of null
at app.js:2
app.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<title>SideBar Menu</title>
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
</head>
<body>
<div id="sidebar">
<ul>
<li>Link 5</li>
<li>Link 5</li>
<li>Link 5</li>
<li>Link 5</li>
<li>Link 5</li>
</ul>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#if (Auth::guest())
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
app.js (I am using the old file that I had used, sorry can't upload the whole code because max word limit)

Need help to install BxSlider

I need your help. I want to add bxslider to my html template but It's not working. I've tried everything I could imagine. When I preview my website I am rewarded with my three images all shown at once, each underneath the other. I hope someone can explain and/or show me what I should do in able to have my slider working properly.
HTML
<link rel="stylesheet" href="css/style.css" media="screen" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700" />
<link rel="stylesheet" href="css/flexslider.css" media="screen" />
<link rel="stylesheet" href="css/jquery.fancybox.css" media="screen" />
<link rel="stylesheet" href="css/jquery.bxslider.css" media="screen" />
<script type="text/javascript">
$(document).ready(function(){
$('.slider').bxSlider({
mode: 'fade',
captions: true,
auto: true,
autoControls: false
});
});
</script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script src="js/jquery.ui.widget.min.js"></script>
<script src="js/jquery.ui.accordion.min.js"></script>
<script src="js/jquery.ui.tabs.min.js"></script>
<script src="js/jQuery.BlackAndWhite.min.js"></script>
<script src="js/jquery.easing-1.3.min.js"></script>
<script src="js/jquery.fitvid.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/jquery.jcarousel.min.js"></script>
<script src="js/jquery.jtweetsanywhere-1.3.1.min.js"></script>
<script src="js/jquery.touchSwipe.min.js"></script>
<script src="js/jquery.zflickrfeed.min.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/selectnav.min.js"></script>
<script src="js/custom.js"></script>
<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="js/selectivizr-min.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->
</head>
<body>
<!-- Main Container -->
<div id="body-wrapper">
<!-- Header -->
<div id="header" class="container clearfix">
<img src="images/logo.png" alt="" />
<!-- Navigation -->
<ul id="navigation">
<li class="current">
Home
</li>
<li>
Features
<ul>
<li>About Us</li>
<li>Pricing Tables</li>
<li>Third Navigation Level<i></i>
<ul>
<li>Amazing things</li>
<li>that bring</li>
<li>positive results</li>
</ul>
</li>
<li>Shortcodes</li>
</ul>
</li>
<li>
Blog
<ul>
<li>Single Post</li>
</ul>
</li>
<li>
Portfolio
<ul>
<li>2 Columns</li>
<li>3 Columns</li>
<li>4 Columns</li>
<li>Single Project</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
<!-- /Navigation -->
</div>
<!-- /Header -->
<!-- Content -->
<div id="content" class="container clearfix">
<h1 class="page-title">Hello, <span class="accent">We are Alco</span><br />A Creative Digital Ageny.</h1>
<ul class="slider">
<li>
<img src="images/content/slide_01.jpg" alt="">
</li>
<li>
<img src="images/content/slide_01.jpg" alt="">
</li>
<li>
<img src="images/content/slide_01.jpg" alt="">
</li>
</ul>
</div>
Your answers will be highly appreciated !
You need to load the below scripts
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
Before the $(document).ready(function(). Also remember the scripts should be loaded before the bxslider.css You can refer to How to install

Foundation 5.2.3 Top Bar Drop down not working

Hi guys i am new for foundation 5 and i tried to make a top bar for my website but drop down is not working here is my code please help
i was googling all the day but i was not able to find a solution for this. please help me. is it possible to occur issue like this due to foundation issue?
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel = "icon" href = favi.gif type="image/x-icon"/>
<link rel="stylesheet" href="css/normalize.css">
<script src="js/jquery.js"></script>
<script src="js/foundation.js"></script>
<meta charset="utf-8">
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
<script src="js/foundation.js"></script>
<script src="js/foundation.dropdown.js"></script>
<script src="js/foundation.topbar.js"></script>
<title>Music Eka</title>
</head>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">
Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
you haven't initialized foundation
add this at the end of your body.
<script>
$(document).foundation();
</script>

Categories