<head>
<link type="text/css" rel="stylesheet" href="index.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="index.js">
</script>
This is named as index.html with jquery ui and my js script
The following is the index.js code in which the effect explode is not working
$(document).ready(function(){
$('#breg').click(function(){
$('#breg').effect('explode');
});
});
And the following code with the fadeIn slow property is also not working
$(document).ready(function(){
$('#breg').click(function(){
$('#breg').fadeOut('slow');
});
});
I'm not exactly sure what you're going for here but here is something that works using the UI features you mention above:
DEMO
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Test</title>
<style>
#breg {
width: 200px;
height: 200px;
background: red;
cursor: pointer;
}
#breg2 {
width: 200px;
height: 200px;
background: blue;
cursor: pointer;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$('#breg').click(function(){
$(this).effect('explode');
});
$('#breg2').click(function(){
$(this).fadeOut('slow');
});
$('button').click(function () {
$('#breg').fadeIn('slow');
$('#breg2').fadeIn('slow');
});
});
</script>
</head>
<body>
<div id="breg"></div>
<div id="breg2"></div>
<button>Reset</button>
</body>
</html>
Related
I have linked my HTML to jquery but when I run it in Microsoft edge, it outputs
"Help.js:1 Uncaught ReferenceError: $ is not defined
at Help.js:1
(anonymous) # Help.js:
Code:
$(document).ready(function(){
$(".navBar").hover(function(){
$(this).css("border","2px solid black")
})
})
navBar{
display: flex;
position: sticky;
top:0;
padding: 20px;
border: none;
width: 100%;
justify-content: center;
background-color: gainsboro;
z-index: 2;
}
#Title{
color: black;
font-family: monospace;
}
<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">
<link rel="stylesheet" href="style.css">
<title>A Random Website</title>
</head>
<body>
<script src="style.js"></script>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<div class="navBar">
<div>
<h1 id="Title">SomeRandomWebsite</h1>
</div>
</div>
</body>
</html>
It is because you're using $ before jQuery has loaded.
// Instead of:
//...
<script src="style.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
//...
// Use this:
// ...
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="style.js"></script>
// ...
And move those script tags to the line before the closing </body> tag. i.e:
// ...
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="style.js"></script>
</body>
</html>
Add scripts in your head tag and first load jquery and then your custom style.js file.
Also, add the defer attribute to your script.
Defer attribute when present, specifies that the script is executed when the page has finished parsing. You can read more about defer
$(document).ready(function() {
$(".navBar").hover(function() {
$(this).css("border", "2px solid black")
})
})
.navBar {
display: flex;
position: sticky;
top: 0;
padding: 20px;
border: none;
width: 100%;
justify-content: center;
background-color: gainsboro;
z-index: 2;
}
#Title {
color: black;
font-family: monospace;
}
<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>A Random Website</title>
<script src="https://code.jquery.com/jquery-latest.js" defer></script>
<script src="style.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navBar">
<div>
<h1 id="Title">SomeRandomWebsite</h1>
</div>
</div>
</body>
</html>
I am trying to animate my school webpage with a revealing animation, but things aren't working out how it should be, like me trying to invoke in the anime.js library, I downloaded the file into my workspace, but it still isn't working out how it should be, here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test animation</title>
<link rel="stylesheet" href="style.css">
<script src="index.js"></script>
<script src="libs/anime.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="text-animation">
Welcome to our School Enterprising Group website!
</div>
</body>
</html>
CSS Code:
body {
margin: 0px;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: green;
}
.text-animation {
color: lightblue;
font-size: 50px;
font-family: "Passion One", sans-serif;
letter-spacing: 1px;
}
.text-animation, .letter {
display: inline-block;
}
And finally the JavaScript Code
var element = document.getElementsByClassName("text-animation")[0];
//Replace each char with <span class="letter">{char} </span>
element.innerHTML = element.textContent.replace(/\S/g, '<span class="letter">$&</span>');
anime.timeline({loop: true})
.add({
targets: ".text-animation .letter",
scale: [3,1],
opacity: [0,1],
translateZ: 0,
duration: 1000,
easing: "easeOutExpo",
delay: (elem, index) => index*70,
})
.add({
targets: ".text-animation",
opacity: 0,
duration: 1000,
easing: "easeOutExpo"
})
Tried everything I could do but still not working, PLEASE HELP!!!
Add the scripts inside the body tag like this and see if it works.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="text-animation">
Welcome to our School Enterprising Group website!
</div>
<script src="index.js"></script>
<script src="libs/anime.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
Just delete your current HTML file and copy-paste the given code below. It will work.
<!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">
<link rel="stylesheet" href="style.css">
<title>Test-Animation</title>
</head>
<body>
<div class="text-animation">
Welcome to our School Enterprising Group wesite!
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="index.js"></script>
</html>
My jQuery .resizable is not working.
It gives error :
TypeError: $(...).resizable is not a function ;
My code is:
<html>
<head>
<link rel="stylesheet" href="test.css">
<link rel="stylesheet" href="httpS://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#main").resizable("enable");
});
</script>
</head>
<body>
<div class="main" id="main">
<div class="header"></div>
<div class="innerMain">
<div class="content"></div>
</div>
</div>
</body>
</html>
This snippet is working.
Look for the CDNs used here... And look for the order to load them too.
$("#main").resizable();
#main{
border:1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="main" id="main">
<div class="header"></div>
<div class="innerMain">
<div class="content">
You can resize me!
</div>
</div>
</div>
You might be missing jquery ui css and js :
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
Add jquery-ui.js library and remove enable from resizable function
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#main" ).resizable();
} );
</script>
<html>
<head>
<meta charset="utf-8">
<title>resizable</title>
<!--div is used to style block element,span are used to group inline elements-->
<style>
.bluebox{
background-color:#415E9B;
font-size: 20px;
color: white;
height: auto;
}
.blackbox{
background-color: #0C0C0C;
font-size: 20px;
color: white;
height: 100px;
}
.greybox{
background-color:rgb(161, 54, 165);
font-size: 20px;
color: white;
height: 100px;
}
.great{
background-color: yellowgreen;
color: teal;
}
.news{
background-color:palevioletred ;
columns: auto 1px;;
height: auto;
}
.org{
background-color: peru;
color:red;
height: auto;
}
#fb{
border:1px solid black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div class="bluebox" id="fb">
<p>facebook is <span class="great">great</span></p></div>
<div class="blackbox">
<p>BBC is a <span class="news">> newschannel</span></p></div>
<div class="greybox">
<p>UEFA is a football<span class="org">organization</span></p></div>
<script>
$(function(){
$("#fb").resizable({
maxheight : 200,
maxwidth : 300,
minheight: 50,
minwidth:50
});
});
</script>
</body>
</html>
we have to check the sequence of our cdns:
correct sequence:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<linkrel="stylesheet"href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
i was doing the opposite putting jquery-ui above jquery.min ...
issue is resolved now
Here's the JSfiddle: http://jsfiddle.net/mostthingsweb/cRayJ/1/
I'll include my code and then explain what's wrong
Here's my HTML header to show that everything should be linked:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel='stylesheet' href='test.css'/>
<script src='test.js'></script>
</head>
Here's the CSS:
.draggable {
width: 80px;
height: 80px;
float: left;
margin: 0 10px 10px 0;
font-size: .9em;
}
.ui-widget-header p, .ui-widget-content p {
margin: 0;
}
#snaptarget {
height: 140px;
}
body, html {
background: url('http://i.imgur.com/FBs3b.png') repeat;
}
Here's the JS:
$(document).ready(function() {
$("#draggable5").draggable({
grid: [80, 80]
});
});
So the grid will launch and the paragraph will be there, however if I try to drag it, it won't work. When I inspect the page it gives me an error saying: "Uncaught TypeError: undefined is not a function" that points to line 2 of my JS code. What am I doing wrong?
Here's the whole HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel='stylesheet' href='test.css'/>
<script src='test.js'></script>
</head>
<body>
<div class="demo">
<div id="draggable5" class="draggable ui-widget-content">
<p>I snap to a 80 x 80 grid</p>
</div>
</div>
</body>
</html>
I pasted the code you've submitted into a local HTML file and it works fine for me (I did not add the test.js but pasted the code in script tags just before the closing body tag.
Here's the entire file (tested in Chrome only)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel='stylesheet' href='test.css'/>
<style type="text/css">
.draggable {
width: 80px;
height: 80px;
float: left;
margin: 0 10px 10px 0;
font-size: .9em;
}
.ui-widget-header p, .ui-widget-content p {
margin: 0;
}
#snaptarget {
height: 140px;
}
body, html {
background: url('http://i.imgur.com/FBs3b.png') repeat;
}
</style>
</head>
<body>
<div class="demo">
<div id="draggable5" class="draggable ui-widget-content">
<p>I snap to a 80 x 80 grid</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#draggable5").draggable({
grid: [80, 80]
});
});
</script>
</body>
I think the problem might be that you're loading jquery and your js files in the head of your code. When it reads your js, it's looking for $(#draggable5), but draggable5 hasn't loaded yet, so it's an empty selector. Try moving your scripts to just before the close of your body element.
I'm using iframe test in my test.html. Another test2.html file is loaded in that iframe test, i need to access the variable's which is used in the test2.html. Is there any way to access that in the test.html.
Here is my Samples
test.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Styles/redmond/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script src="Js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="Js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//this code is doesn't work
var data1= document.getElementById('test').contentWindow.document.data;
});
</script>
<style type="text/css">
body,html{
height:100%;
width:100%;
top:0;
left:0;
overflow:auto;
}
#test{
height:250px;
width:250px;
border:1px solid gray;
}
</style>
</head>
<body>
<iframe id="test" src="test2.html"></iframe>
</body>
</html>
test2.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Styles/redmond/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script src="Js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="Js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script type="text/javascript">
var data = 'This data is retrived from test2.html';
$(document).ready(function () {
$('#div')[0].textContent = data;
});
</script>
<style type="text/css">
body,html{
height:100%;
width:100%;
top:0;
left:0;
overflow:auto;
}
#div{
height:50px;
width:200px;
border:1px solid gray;
margin:10px;
}
</style>
</head>
<body>
<div id="div">Hello</div>
</body>
</html>
Any suggestions should be appreciated...!
As mentioned you should get the variable from contentWindow instead of contentWindow.document. And also, you might need to wait for the iframe to load.
$(document).ready(function(){
$('#test').on('load',function(){
var data1 = $('#test').get(0).contentWindow.data;
// Or plain JavaScript
// var data1 = document.getElementById('test').contentWindow.data;
});
});