I am using the zurb foundation and all is working well except for data-alert. I am unable to close data-alert with the X. In other posts, people say to add the $(document.foundation(); again after the data-alert div. I have tried it with and without the second initialization. Here is the code.
<!DOCTYPE HTML>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" href="/css/foundation.min.css">
<script src="/js/vendor/jquery.js"></script>
<script src="/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</head>
<body>
<div data-alert class="alert-box alert radius hide-for-print">You can't close this!!!×</div>
<script>
$(document).foundation();
</script>
</body>
</html>
I would appreciate any help I can get on this.. Thanks.
The data-alert was not closing because modernizr wasn't included in your project.
DEMO
Mostly this kind of errors you can solve by checking the console.
In console, It was showing the following error:
ReferenceError: Can't find variable: Modernizr
Because foundation.min.js required modernizr to work
Related
Getting this error in the Devtool(Console).
Error handling response: TypeError: self.processResponse is not a function
Issue Solved: It seems like due to the (What runs) chrome extension, this issue is occurring.
just by simply deactivating WhatRuns chrome extension, resolved the issue for me.
Had the same issue running a site internally. Seems like that extension needs to be updated.
Error handling response: TypeError: self.processResponse is not a function
at chrome-extension://cmkdbmfndkfgebldhnkbfhlneefdaaip/js/notification.js:154:10
and this references index.html line 1 as the source of the error pointing back to the notification.js file called by that extension.
and this was on a bare html file:
<!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>Javascript Debug Challenge</title>
</head>
<body>
<!-- <script src="/part-1.js" type="text/javascript"></script>-->
<!-- <script src="/part-2.js" type="text/javascript"></script>-->
<!-- <script src="/part-3.js" type="text/javascript"></script>-->
<!-- <script src="/part-4.js" type="text/javascript"></script>-->
<script src="/part-5.js" type="text/javascript"></script>
</body>
</html>
when creating a basic html layout as shown below, i keep getting "[violation] avoiding using document write()" error. However when i remove the body tag, the error is gone.
Does anyone know why its happening and is there any alternative for me to use.
Thanks,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Update:
The source tab on chrome developer console, is highlighting the line inside the body tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script id="bs_script">
//<![CDATA[ document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.7'><\/script>".replace("HOST", location.hostname)); //]]>
</script>
</body>
</html>
The script tag within the HTML is the issue.
Additionally: Browsersync inserts a document.write() script tag into any first tag, even if that first tag is commented out. So using a different live browser reload solved the issue
I am doing Bucky Robert's (The New Boston) tutorial on React (hyperlink in the code below).
I'm stuck at the beginning, with just trying to install/load React with the tag instead of using local files. I get two error messages:
TypeError: t(...).Object is undefined[Learn More] browser.min.js:8:31612
SyntaxError: expected expression, got '<'[Learn More] test.html:19:24
I bet my problem is pretty basic, but I spent a lot of time trying to figure out what's going on.
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<!--The tutorial that I'm trying to do https://www.youtube.com/watch?v=2NLgQMs2hOw&list=PL6gx4Cwl9DGBuKtLgPR_zWYnrwv-JllpA&index=2-->
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script>
ReactDOM.render(<h1>test2</h1>, document.getElementById('example'));
</script>
</body>
</html>
Basically, I just want to know what the non-buggy version of my code would be so I can do the tutorials.
Your script element doesn't contain regular JavaScript and you omitted the type attribute to show what it does contain.
After searching on the Internet and asking other people, here is what I found.
TypeError: t(...).Object is undefined[Learn More] browser.min.js:8:31612
This issue is related with tags I provided. I was able to solve the problem by using this instead:
<script src= "https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script src= "https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
SyntaxError: expected expression, got '<'[Learn More] test.html:19:24
As was pointed out: I was missing the "marking" of the code with
<script type="text/babel">
Here is the full code, without the two bugs I had:
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<!--https://reactjs.org/docs/add-react-to-a-website.html-->
<script src= "https://unpkg.com/react#16/umd/react.production.min.js"> </script>
<script src= "https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(<h1>test2</h1>, document.getElementById('example'));
</script>
</body>
</html>
Just started with GSAP Tweenmax, but i ran in some issues. Probably it's a stupid mistake i made, but i can't figure it out.
When i run this code on Codepen it works, but when i run it from my webserver it doesn't do anything.
HTML:
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!--CDN links for TweenLite, CSSPlugin, and EasePack-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="./js/main-test.js"></script>
<style>
#svg{position: absolute;}
</style>
</head>
<body>
<div id="svg"><p>testtesttesttest</p></div>
</body>
</html>
And this is the js:
var anim = document.getElementById('svg');
TweenMax.to(anim, 2, {left:"100px"})
Can someone please tell me what i'm doing wrong?
Thank you,
Michael
I already found the issue, i loaded the js script in the header.
The only thing i needed to do was to replace the script at the end of the html file so it could find the 'id' of the div to animate.
I have an index.html and edit.html and trying to do the following, but by clicking the second and third link, the emulator showed me an error saying: Application Error, A network error occurred (file://android_asset/www/edit.html?id=2) and (file://android_asset/www/edit.html?id=3)
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title">
<script type="text/javascript" charset="utf-8" src="cordova-1.8.0.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
</head>
<body id="stage" class="theme">
<h1>Welcome to XXX!</h1>
1
2
3
</body>
</html>
my edit.html is just a html header and body.
Any idea why?
Yes, this is a bug in Android not PhoneGap. Go star this Google issue to add your voice:
http://code.google.com/p/android/issues/detail?id=17535
In other news we believe we will have a work around in the 1.9.0 release which will be out at the end of the month.