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>
Related
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 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
I believe this question has been asked multiple times and I have researched many other articles but I'm afraid I'm at a complete impasse...
I am trying to make a very basic flexslider but it simply does not seem to want to work for me. The images appear as lists, so the HTML and the image links would seem to be Ok. This leads me to believe I have missed something in the JS.
Would anybody be able to advise me?
Many Thanks in advance.
Ryan
<!DOCTYPE html>
<html>
<head>
<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
</head>
<body>
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
<img src="../lachantongeimg/group.jpg" alt=""/>
</li>
<li>
<img src="../lachantongeimg/howtojoin.jpg" alt=""/>
</li>
<li>
<img src="../lachantongeimg/playmusic.jpg" alt=""/>
</li>
</ul>
</div>
</body>
</html>
If your photos appear like a list, must be the CSS file. Make sure the file exist or fix your path.
The only difference that I found with the official documentation is the option to animate:
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
here there is a basic example working exactly as you have:
https://jsbin.com/jicodadace/2/edit?html,console,output
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.
I'm new to foundation and I'm trying to make some nice tabs with various content. To do so, I'm using their documentation. However, it doesn't work like it's supposed to do.
Averything works fine, except that that sections don't cover each other. Each section is placed after the other, even when the other is hidden. Here is an example :
As you can see, this is pretty ugly. Here is my code :
<meta name="viewport" content="width=device-width" />
<title>Test Page</title>
<link rel="stylesheet" href="/autoPA/static/css/normalize.css" />
<link rel="stylesheet" href="/autoPA/static/css/foundation.css" />
<link rel="stylesheet" href="/autoPA/static/css/dynamease.css" />
<script src="/autoPA/static/js/vendor/custom.modernizr.js"></script>
</head>
<body>
<div class="section-container auto" data-section>
<section>
<p class="title" data-section-title>
Section 1
</p>
<div class="content" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title>
Section 2
</p>
<div class="content" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>
<!-- Check for Zepto support, load jQuery if necessary -->
<script>
document
.write('<script src='
+ ('__proto__' in {} ? '/autoPA/static/js/vendor/zepto'
: '/autoPA/static/js/vendor/jquery')
+ '.js><\/script>')
</script>
<script src="/autoPA/static/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Do you guys see anything wrong in it ? (Each file included is found, firebug doesn't detect any errors).
Try adding:
<script src="/autoPA/static/js/lib/foundation/foundation.section.js"></script>
...to the bottom of your page.
BTW, I can't get mine to work either :-/
UPDATE: foundation.min.js already contains foundation.section.js My bad!