In my project the dropdown menu won't work.
the code is like this:
<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">
{!! MaterializeCSS::include_full() !!}
<script>
$( document ).ready(function() => {
$('.dropdown-button').dropdown();
});
</script>
<title>...</title>
</head>
this is the header of the page
this is what the dropdown look like
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div class="nav-wrapper">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
I put materialize css into my project using composer, and did what was listed on the official materialize website
I hope someone can help me out
Try and move your script (the one below) to the bottom of your body.
<script>
$( document ).ready(function() => {
$('.dropdown-button').dropdown();
});
</script>
Related
I've a page in MVC which I want to reload automatically every 2 seconds without doing a refresh, I have seen examples
with Ajax but all referenced using buttons or in POST-GET events. I only want it to reload without refresh,
What can I do to perform that function?
Thank you
This's my view
#model MVC_PCMonitoring_Dash.Models.TablesPCModels
#{
ViewBag.Title = "Home Page";
}
<!doctype html>
<html lang="en">
<head>
<title>Dashboard</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="~/Content/css/style.css">
</head>
<body>
<div class="wrapper d-flex align-items-stretch">
<nav id="sidebar">
<div class="custom-menu">
</div>
<div class="img bg-wrap text-center py-4" style="background-color: #A40033;">
<div class="user-logo">
<div class="img" style="background-image: url(Images/logo.jpg)"></div>
<h3>TOTAL PC</h3>
</div>
</div>
<ul class="list-unstyled components mb-5">
<li class="active">
Home
</li>
<li>
PC 1
</li>
<li>
PC 2
</li>
<li>
Exit
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content" class="p-4 p-md-5 pt-5">
<p align="right">#DateTime.Now</p>
<center>
<img src="~/Images/welcome.png" alt="centered image" />
</center>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
You should use timer and ajax in this case.
setInterval(function(){ --ajax call to refresh---},2000) //2000 means 2 min
I am using fullpage js in a website and i need to stop a particular slide to scroll down on mouse wheel scroll. Rest slides will slide normally. On 4th slide(slide in my case), i have two images which i want to display on scroll one by one. First image will be visible by default and on scroll 2nd image will display and first will be hidden. During this, slide will not scroll down. Once 2nd image is displayed then slide will scroll down to next slide. and reverse function will be performed on 4th slide while scrolling up.
<!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">
<title>Fullpage</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.min.css" rel="stylesheet">
<style>
#fullpage img{width: 100%;}
#fullpage .section{overflow: hidden;}
</style>
</head>
<body>
<div id="fullpage">
<section class="section slide1">
<div class="image"><img src="https://placeimg.com/1000/750/arch" alt=""></div>
</section>
<section class="section slide2">
<div class="image"><img src="https://placeimg.com/1000/750/tech/sepia" alt=""></div>
</section>
<section class="section slide3">
<div class="image"><img src="https://placeimg.com/1000/750/tech" alt=""></div>
</section>
<section class="section slide4">
<div class="image image1"><img src="https://placeimg.com/1000/750/natureg" alt=""></div>
<div class="image image2"><img src="https://placeimg.com/1000/750/people" alt=""></div>
</section>
<section class="section slide5">
<div class="image"><img src="https://placeimg.com/1000/750/animals" alt=""></div>
</section>
<section class="section slide6">
<div class="image"><img src="https://placeimg.com/1000/750/tech/grayscale" alt=""></div>
</section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/vendors/scrolloverflow.min.js"></script>
<script>
jQuery(document).ready(function(){
jQuery('#fullpage').fullpage({
verticalCentered: true,
navigation: true,
navigationPosition: 'right',
scrollingSpeed: 800,
scrollBar: true,
responsiveWidth: 1024,
afterResponsive: function(isResponsive){}
});
});
</script>
</body>
</html>
Read how to cancel a movement before it takes place.
I've found this similar error mentioned since Foundation 3, usually because foundation.min.js was not included. I have this included but links in the dropdown menu are not working.
<!doctype html>
<html class="no-js" lang="en">
<head>
<link rel="stylesheet" href="../css/normalize.css" />
<link rel="stylesheet" href="../css/foundation.min.css" />
<link rel="stylesheet" href="includes/style.css" />
<script src="../js/vendor/jquery.js"></script>
<script src="../js/foundation.min.js"></script>
<script src="../js/vendor/modernizr.js"></script>
<script>
$(document).foundation();
</script>
</head>
<body>
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>dashboard</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">
<!-- Left Nav Section -->
<ul class="left">
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li>chapters</li>
<li>sections</li>
<li>paragraphs</li>
<li>references</li>
<li>annotations</li>
<li>help</li>
<li class="has-dropdown">
Create
<ul class="dropdown">
<li>new chapter</li>
<li>new section</li>
<li>new paragraph</li>
<li>new annotation</li>
</ul>
</li>
</ul>
</section>
</nav>
</body>
</html>
Am I missing a setting? I've seen preventDefault() mentioned as a possible culprit, but why on earth would the default click behavior be prevented...for clickable menu links?
The $(document).foundation(); line must be invoked before the closing BODY tag, not HEAD tag. I was loading foundation before the DOM elements had loaded.
This explains the whacky behavior.
I want to catch the event if a specific jQuery mobile page changes. For example, I used the code which I indicated below:
$(document).on("pagechange", function () {
alert("page changed");
});
But, how can I make this function run only for a specific page, for example: the page which has id="myPage"? I want to make it give alert only when myPage is changed.
(* I use multiple page structure in jquery mobile)
I think you could register events on page instead of document:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<p>Page 1</p>
<div data-role="navbar">
<ul>
<li><a href="#pagetwo" >TWO</a></li>
<li>ONE</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="main" class="ui-content">
<p>Page 2</p>
<div data-role="navbar">
<ul>
<li>TWO</li>
<li><a href="#pageone" >ONE</a></li>
</ul>
</div>
</div>
</div>
<script>
$("#pageone").on("pageshow", function() {
alert("cambio a pagina 1");
});
$("#pagetwo").on("pageshow", function() {
alert("cambio a pagina 2");
});
</script>
</body>
</html>
If you prefer pagechange event, you could get the page URL:
$(document).on("pagechange", function(toPage) {
alert(toPage.currentTarget.URL);
});
$(document).on('pagechange', '#myPage', function (event) {
alert("I alert only on #myPage");
});
Ok So almost everything works fine for me. When I try to use this as a template in Dreamweaver and create web pages, the links work and the drop down menu works too. But the drop down only works if the pages I've created are in the same root directory. If I create other folders and save web pages in there, I can get to those pages from the drop down, but once I'm at the page that's inside of another folder and try to use the drop down to navigate from there, I can't. It won't drop down again. I have to click on another link that isn't inside of the folder, like the home link for example. I thought maybe it was a path issue but I've also tried to make the paths absolute instead of relative but that hasn't worked either. I have been Googling for days to see if anyone else has had this same issue come up for them but haven't had any luck.
I have a feeling it's going to be something so easy and simple that I'm not thinking of or overlooking but I'm just not having any luck.
Below is the code that I've been using as an example from the download. If anyone can point me in the right direction, that would be so wonderful!
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<style>
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link rel="stylesheet" href="../css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
<!-- This code is taken from http://twitter.github.com/bootstrap/examples/hero.html -->
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>In the Root</li>
<li>In Subfolder</li>
<li>Absolute</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"> <\/script>')</script>
<script src="../js/vendor/bootstrap.min.js"></script>
<script src="../js/plugins.js"></script>
<script src="../js/main.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>