It was working fine until a while ago. I did not change anything.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<header>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">11:00 AM</li>
<li role="presentation">4:00 PM</li>
<li role="presentation">9:00 PM</li>
</ul>
</header>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="elevenam">
<div class="row">
<?php include_once 'elevenam.php'; ?>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="fourpm">
<div class="row">
<?php include_once 'fourpm.php'; ?>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="ninepm">
<div class="row">
<?php include_once 'ninepm.php'; ?>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js" ></script>
</body>
</html>
Is there something wrong with twitter bootstrap??
my js used to be link
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
from their site but it stopped working so i tried the downloaded one and it still doesn't work.
I notice in their demo, it wasn't working either.
because
`https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css%22%20integri ty=%22sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7`
is no more public. Upload a file on your server and load the css from there.
Related
I need to copy the .container element without using innerHTML.
here the index.html
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta charset="UTF-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="css/test.css">
<!-- Utilitats CSS i icones Bootstrap CDN -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script src="js/test.js"></script>
</head>
<body>
<div class="text-center">
<div class="card-header bg-info row">
<div class="col-sm-4">
<img src="https://pbs.twimg.com/profile_images/1046722856929947649/hytXqKH0_400x400.jpg" height="80">
</div>
<div class="col-sm-4">
<h3 class="display-4">Agenda IOC</h3>
<h4 class="text-warning">Consulta tots els esdeveniments</h4>
</div>
<div class="col-sm-4">
<h5 class="card-title">Elegeix la data:</h5>
<input id="data" type="date">
<button id="cerca">Cerca</button>
</div>
</div>
<div class="container">
<div class="card">
<div class="card_image-container">
<img class="card-image" src="http://agenda.cultura.gencat.cat/content/dam/agenda/articles/2018/07/03/033/Esculturas.jpg" alt="">
</div>
<div class="card-body">
<h3 class="card-title">Title</h3>
<p>Description</p>
Go
</div>
</div>
</div>
</div>
<!-- Utilitats js de Bootstrap CDN -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Copy the element and show it when click in the button.
I need to create a function that I can change the values of each element created.
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.
have a problem and I hope somebody helps me.
Have website 3gtrans.sk in bootstrap. It works fine but mobile navigation doesn't work on 2 pages
https://www.3gtrans.sk/nase-trasy
https://www.3gtrans.sk/galeria
As you can see on that pages are some photos (prettyPhoto). Can anybody show me what is bad please? Thank you so much.
i.e. galeria.php
<?php include "xxx.php"; ?>
<!DOCTYPE html>
<html lang="sk">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Galéria | 3G Trans Slovakia" />
<meta name="author" content="RoyalWEB.sk" />
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/style.css?<?php echo date('h:i:s'); ?>">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato%7CRaleway">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="assets/css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet"/>
<script src="assets/js/jquery.prettyPhoto.js" type="text/javascript"></script>
<title>Galéria | 3G Trans Slovakia</title>
<script type="text/javascript">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
show_title: false,
social_tools: false
});
});
</script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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 class="collapse navbar-collapse mynavbar" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav ">
<li>o nás</li>
<li>naše trasy</li>
<li>referencie</li>
<li>objednať prepravu</li>
<li><a class="active" href="galeria">galéria</a></li>
<li>kontakt</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container wrapper">
<div class="row">
<div class="col-md-12">
<h1>Galéria</h1>
<p>
<img class="img-responsive" src="images/gallery/thumb_peugeot01.jpg" alt="Peugeot Travel" /> <a href="images/gallery/peugeot02.jpg" rel="prettyPhoto[pp_gal]"><img class="img-responsive" src="images/gallery/thumb_peugeot02.jpg" alt="Peugeot Travel" />
</p>
</div>
</div>
</div>
<footer>
<div class="container copyright">
<div class="row">
<div class="col-md-12">
Copyright © <?php echo date("Y"); ?> | 3G Trans Slovakia<br />Vytvorila firma RoyalWEB.sk
</div>
</div>
</div>
</footer>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-101095120-1', 'auto');
ga('send', 'pageview');
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/1.0.9/cookieconsent.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.cookieconsent_options = {"message":"Táto stránka využíva súbory cookies, ktoré pomáhajú k jeho správnemu fungovaniu. Využívaním našich služieb s ich používaním súhlasíte.","dismiss":"Rozumiem","learnMore":"Viac informácií","link":"https://sk.wikipedia.org/wiki/HTTP_cookie","theme":"light-bottom"};
</script>
</body>
</html>
fixed with replacing prettyphoto for another plugin.
The HTML file is generated using Markdown.
I have included a JavaScript file in HTML. It is visible that it is loaded in the browser (tried on Mozilla firefox).
See the proof below.
I tested if JS is enabled or not from https://www.whatismybrowser.com/detect/is-javascript-enabled
But somehow, it is not being executed.
Below is my generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-16"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="generator" content="Bootply-JBake-Custom"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-16"/>
<title>Title</title>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/asciidoctor.css" rel="stylesheet">
<link href="/css/base.css" rel="stylesheet">
<link href="/css/prettify.css" rel="stylesheet">
<link href="/css/styles.css" rel="stylesheet">
<link href="/css/animate.css" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico">
<script src="/js/jquery-1.11.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/prettify.js"></script>
</head>
<body onload="prettyPrint()">
<div id="wrap">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
LOGO
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li>Projects</li>
<li>About</li>
<li>Categories</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="page-header" id="banner">
<div class="row">
<div class="col-lg-8 col-md-7 col-sm-6">
<h1>Projects</h1>
</div>
</div>
</div>
<!-- This script is loading but not executing -->
<script type="text /javascript" src="projects.js"></script>
<p>Here is the list of projects</p>
</div>
</div>
<div id="push"></div>
<div id="footer">
<div class="container">
</div>
</div>
</body>
</html>
projects.js
$(document).ready(function(){
console.log("ready")
alert("hi");
});
console.log("loaded")
<script type="text /javascript" src="projects.js"></script>
Remove the space in type="text /javascript with the result:
<script type="text/javascript" src="projects.js"></script>
This should allow the browser to parse the HTML correctly and load the script.
EDIT: Or remove the type attribute from the <script> tag entirely, as suggested by the comment below.
Hi I am new for jquery mobile.I gt two page in my application. Please c the code below
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Smart Realtor</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/smartrealtor-theme.css" />
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/themes/default/jquery.mobile.structure-1.4.2.css">
<link rel="stylesheet" href="css/themes/default/jquery.mobile.icons-1.4.2.css">
<link rel="stylesheet" href="css/jqm-icon-pack-fa.css">
<!-- <script src="js/jquery.js"></script>-->
<!-- <script src="js/globalsetting.js"></script>-->
<!-- <script src="js/jquery.mobile-1.4.2.min.js"></script>-->
<!-- <script src="js/cordova.js"></script>
<script src="js/Calendar.js"></script>
<script src="js/Message.js"></script>-->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" data-title="Panel fixed positioning" class=" signupBG" id="landingPage">
<div data-role="content">
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<div id="logoCenter">
<img src="images/smartrealtor_logo_large#x2.png" alt="" width="300" height="310" class="scale-with-grid" />
</div>
<div class="ui-grid-a">
<!-- Click here to register page -->
<a href="register.html" class="ui-btn ui-corner-all ui-shadow" >Register</a>
</div>
<div class="ui-grid-a">
Sign in
</div>
</div>
<!-- /login/register -->
</div>
</div>
<!-- Login Screen -->
<!-- /login screen -->
<!-- Forget Password Screen -->
<!-- /forget pass screen -->
<!-- Register Screen -->
<!-- /register screen -->
<!-- Team Leader Register Screen -->
<!-- /register screen -->
</body>
</html>
Register.html
<div data-role="page" data-title="Panel fixed positioning" class=" signupBG" id="loginPage">
<div data-role="content">
<div data-role="tabs" id="tabs" class="transparentBg">
<div data-role="navbar" data-grid="a" class="topNav topfilter">
<ul id="navfilter">
<li>Agent</li>
<li>Team Leader</li>
</ul>
</div>
<div id="nAgent" class="ui-body-d ui-content">
<h1>First tab contents</h1>
</div>
<div id="nTeamleader">
<ul data-role="listview" data-inset="true">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
</div>
</div>
</div>
</div>
My tabpanel in inside the register.html . But it not working nw. The tab panel doesn't refresh the content. anyone gt solution?