I am creating a simple Express webserver that serves a landing page made with bootstrap, but I can't get any Flexbox examples to work..
Below is my landing page, is there anything I am not seeing? I have checked that jQuery and Bootstrap links are working. I have also viewed the page in Firefox, Chrome and Edge.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Homepage</title>
<!-- STYLES -->
<link rel="stylesheet" href="../public/styleshee/bootstrap.min.css"/>
<link rel="stylesheet" href="../public/stylesheets/main.css" />
</head>
<body>
<div class="d-flex justify-content-around">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<button id="test-btn" class="btn btn-success">Button</button>
<!-- SCRIPTS-->
<script src="../public/javascripts/jquery.min.js"></script>
<script src="../public/javascripts/bootstrap.min.js"></script>
<script src="../public/javascripts/index.js"></script>
</body>
</html>
Here is a screenshot of the output:
As you can see justify-content-around is not behaving as expected. I have tried several Flexbox classes with the same results.
Can you check which version of bootstrap you use.
When I try your code with version 3.xx it gives output like this in your question, but when I include bootstrap 4 css it gives this ( picture bellow)
link for image
If you want something like this, just include this script for bootstrap css
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
The first thing one has to check is always sintax and grammar spelling!
Here is probably your mistake:
YOU WROTE "styleshee" instead of stylesheeT (or stylesheeTS)
check this out and let me know
Related
I'm getting the error shown below from jquery when I try to used from a web page in a nested directory. How do I prevent this error.
This is what the directory structure looks like. (Using <script src="/fhir-to-omop/site_libs/jquery-1.11.3/jquery.min.js"></script> from the circled index page works)
I've tried referencing jquery using each of these from the circled StartHere.html page:
<script src="../../../../site_libs/jquery-1.11.3/jquery.min.js"></script>
OR
<script src="/fhir-to-omop/site_libs/jquery-1.11.3/jquery.min.js"></script>
This is the error I'm getting
jquery.min.js:5 GET https://nachc-cad.github.io/fhir-to-omop/pages/navbar/getting-started/start-here/site_libs/jquery-1.11.3/jquery.min.js?_=1646571234525 404
EDIT: Per the question in the comments: I am loading JQuery twice as shown below.
In the main file:
<html>
<head>
<!-- favicon link -->
<link rel="shortcut icon" type="image/x-icon" href="../../../../favicon.ico">
<!-- include lib code -->
<script src="../../../../site_libs/jquery-1.11.3/jquery.min.js"></script>
<div id="headerInclude"></div>
<script>$("#headerInclude").load("/fhir-to-omop/header.html");</script>
</head>
<body>
<div class="container-fluid main-container">
<!-- navbar -->
<div id="navbarInclude"></div>
<script>$("#navbarInclude").load("/fhir-to-omop/navbar.html");</script>
...
</div>
</body>
</html>
And then this exists at the top of the loaded navbar.html:
<!-- navbar -->
<head>
<!-- include lib code -->
<script src="site_libs/jquery-1.11.3/jquery.min.js"></script>
</head>
I have build a website with an iframe to display multiple subpages.
My goal is to change the value of an ID on the parent window, from the child page that is loaded in the Iframe. All the pages are in the same domain. I am currently using the following code, and it works fine in Internet explorer, but doesn't do anything in Chrome? I hope someone will have the awnser to fix it so it will work in all browsers.
Thank you in advance!
Here's the html of the parent window:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Webpage</title>
<base target="iframe">
<!-- External Javascript -->
<script src="javascript/index.js"></script>
<!-- External CSS -->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- Banner -->
<div class="Banner">
<div id="Site-name">
Text to be changed
</div>
<img class="Logo" src="Afbeeldingen/Logo.png" alt="logo">
</div>
<!-- Body -->
<div class="iframe">
<iframe name="iframe" src="iframe.html"></iframe>
</div>
<!-- Footer -->
<div class="Footer">
<div class="copyright">
Made by Jan Pieter van den Oever 2019 All rights reserved ®
</div>
</div>
</body>
</html>
And here is the java script of the index file:
function changeText(text) {
document.getElementById('Site-name').innerHTML = text;
}
Here is the iframe html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>iframe</title>
<!-- CSS -->
<link rel="stylesheet" href="css/iframe.css">
</head>
<body>
<div class="Button-container">
<div class="Button-center">
<div class="Button" onclick="location.href='nextpage.html';parent.changeText('The new text to be displayed in the parent')">
<div class="Button-text">
<br><br><br>
Start
</div>
</div>
</div>
</div>
</body>
</html>
With jQuery:
function changeText(newText) {
$('#Site-name').text(newText)
}
Just include jQuery in your project and replace the changeText function with the above one. If the above code doesn't work, try the below one:
function changeText(newText) {
$(document).find('#Site-name').text(newText);
}
It's so confusing, so you are under the same domain, sub-domain too I guess?
Domain is not the only indicator of same origin, you could try to iframe yourdomain.com/proxy.google.com as an example. So for all your browser cares that is still a different origin, or else don't iframe it. Calling it .html is meaningless, you can have it .exe and the browser will still attempt to render the dom.
This issue arises when you're trying to merge 2 incompatible frameworks quick and dirty, like for example you need an interface where the main is using ExtJS and the child is Angular... And the only proper/legal/right answer is.
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
You might get lucky and find a hack of some sort but believe me it will only be temporary. PostMessage was written exactly for this purpose, so 2 globals can safely communicate and react to events.
I am trying to use Materialbox in Materialize, but the zooming effect does not seem to work. While the CSS hover works, clicking does not enlarge the image as it should.
I have tried both the jQuery method and the non-jQuery method shown on the site. I have made sure that jQuery is loaded before the script, and tried both including the script in the html in tags as well as putting it in another file.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/materialize.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col s12">
<!--This is the where the image is-->
<img class="materialboxed" width="300" src="assets/model.jpg">
</div>
</div>
</div>
<script src="js/materialize.min.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
<!--I used the provided code on the Materialize website-->
<script>
$(document).ready(function(){
$('.materialboxed').materialbox();
});
</script>
</body>
</html>
Looking at the console, I get three errors:
Loading failed for the with source “file:///Users/ned/Desktop/website/js/jquery-3.4.1.min.js”.
ReferenceError: $ is not defined
The character encoding of the HTML document was not declared. The document will render with...
My editor throws the ReferenceError as well whenever I try to use the code snippet in a separate file.
Try this:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="js/materialize.min.js"></script>
instead of this:
<script src="js/materialize.min.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
Actually, materialize itself uses jQuery in its code, so you must include jQuery first then materialize.min.js.
It works for me.
I have already checked plenty of issues that have a similarity to my error however it still seems to not work.
I am sure I declared those plugins in the right order but that haven't shown any progress at all.
I did try comparing it on my codepen account (both scss) and the (compiled to css) and it works on codepen BUT not in sublime text. I found out that it is not calling my main.js for some reason. Did i do something wrong in my codes? but it works on codepen which makes it very confusing on my part as to where it went wrong
Codepen SCSS
Converted to CSS
this is my html code in sublimetext which is the same codes as the converted to css
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Crown Royale Dental</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script type="text/javascript" href="js/main.js"></script>
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<h2>Clinic Facilities</h2>
<div id="projectsApp">
<div class="projects" :id="project.ID" v-for="project in projects" :style="{ backgroundImage: 'url(' + project.bImage + ')' }" v-on:click="selectProjects(project.ID)">
<h3 class="beforeTitle"> {{ project.category }}</h3>
<div class="info">
<h1 class="fadeTitle"> {{ project.category }}</h1>
<hr>
</div>
<p class="backArrow"><i class="fa fa-angle-double-left" aria-hidden="true"></i></p>
</div>
<div class="selectedArea">
<h1 :style="{ backgroundImage: 'url(' + highlightedContent.bImage + ')' }"><span>{{ highlightedContent.category }}</span></h1>
<div v-html="highlightedContent.copy" class="copyArea fadeIn"></div>
</div>
</div>
</body>
</html>
the main.js and style.css codes are quite long but it is the same as the codepen codes. does anyone have any idea what caused this? why isn't the js not working?
here is a screenshot of what im seeing on sublimetext localhost with inspect element
Please see the codepen link for what the supposed output should look like.
Big thanks to those who can lighten me up. I am still trying to figure out what caused it. checking similar cases that might work.
You are calling the javascript using href instead of src in the wrong way. Try using:
<script type="text/javascript" src="js/main.js"></script>
I'm sure I'm making a silly mistake but it took me hours and I couldn't find any solution for my problem. Everything seems ok but not working. I'm using Foundation 5 reveal. But modal window does not show. Here is my code:
HTML
<a class="openModal" href="#" data-reveal-id="imagemodal"><img src="image.jpg" /></a>
<div id="imagemodal" class="reveal-modal" data-reveal>Modal</div>
I've also included the following js files in body tag:
<script type="text/javascript" src="js/foundation/foundation.js"></script>
<script>
$(document).foundation();
</script>
<script type="text/javascript" src="js/foundation/foundation.reveal.js"></script>
Any help is appreciated in advance.
Put the call to foundation.reveal.js before you call $(document).foundation();.
I'm pretty sure this is because $(document).foundation(); initiates only those modules that have been specified prior to it, something that Foundation doesn't make clear in its notes.
Foundation offers you options to customize plugin initialization. By default, calling $('#scope').foundation(); will initialize all available plugins on the page.
I just wanted to add this piece of simple, near bare-bones modal markup, I spent nearly 4 hours last night getting it right, I don't think there's much out there to deal with these reveal-modal issues
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/foundation.min.css">
</head>
<body>
reveal modal
<div class="reveal-modal" id="myNormal" data-reveal>
Modal
<a class="close-reveal-modal">close</a>
</div>
<script>
$(document).foundation();
</script>
</body>
I hope this is of any help for future visitors.