<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>Document</title>
</head>
<body>
<div class="container" style="height: 100vh; background-color: grey"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.2/gsap.min.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.2/ScrollTrigger.min.js">
</script>
<script>
gsap.registerPlugin('ScrollTrigger');
let tl = gsap.timeline({
scrollTrigger: {
trigger: '.container',
pin: true,
start: 'bottom bottom',
end: 'bottom start',
markers: true,
},
});
</script>
</body>
</html>
When I scroll to middle and resize width, animation is distorted, markers are not at
right place, white area is seen.
Related
I'm trying to learn vue, but I can't get anything working, this is the 5th tutorial I've tried now and I really don't know what I am doing wrong.
When rendering the following code, it shows the template tagging not the intended content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Learning Vue.js</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name" />
<p>Hello {{ name }}</p>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
name: 'John'
};
}
});
</body>
</html>
Can anyone please help me understand why this isn't working, I've had this issue for the last month now and can't find a solution. I'm using Firefox on a Linux computer, I've also tried it in Opera and Brave browser with the same issue, so I suspect it is my code.
In the above code snippet you have not closed the script tag.
Code after closing the tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Learning Vue.js</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name" />
<p>Hello {{ name }}</p>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
name: 'John'
};
}
});
</script>
</body>
</html>
how to to wire html backspace in vue js in have try code bellow but not working, try template but dont working to
<!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>
</head>
<body>
<div id="app">
<p><span v-html="backspace"></span></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
backspace:"&larr"
}
})
</script>
</body>
</html>
You're missing semi-colon:
&larr // missing semi-colon ;
You may also use:
←
As I understood, you would like to display the left arrow HTML character "&laar;", that looks like an arrow pointing backwards.
You simple missed a semicolon (;) at the end of the HTML within your data array.
Here is the updated snipped:
<!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>
</head>
<body>
<div id="app">
<p><span v-html="backspace"></span></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
backspace:"←"
}
})
</script>
</body>
</html>
I am trying to draw a picture into a div to be able to make the drag effect later. It seems that the function that has to draw the image is not working right. Maybe someone has a hint why?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>canvas</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/utils/Draggable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="myCanvas" width="600" height="400" style="border:1px solid #000000;">
<div id="imagen" class="mover"></div>
</div>
</body>
</html>
here the js code..
context.getContext("2d");
var movibles = $(".mover");
var myCanvas = document.getElementById("myCanvas");
make_base();
function make_base()
{
base_image = new Image();
base_image.src = 'img/image.jpg';
base_image.onload = function(){
context.drawImage(base_image, 0, 0);
}
}
Draggable.create("movibles" , {
type:"y",
bounds: document.getElementById("myCanvas"),
throwProps:true,
onClick: function() {
console.log("clicked");
},
onDragEnd:function() {
console.log("drag ended");
}
});
Much appreciated..
I am trying to get notification area in summer note to work but It doens't showup.
In the example below I expect the area to show at the bottom once the button is pressed.
What am I missing ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Summernote</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
</head>
<body>
<button onclick="test()">hello</button>
<div id="summernote"><p>Hello Summernote</p></div>
<script>
$(document).ready(function() {
$('#summernote').summernote();
$('#summernote').summernote({
maxHeight: 300,
dialogsInBody: true,
dialogsFade: true // Add fade effect on dialogs
});
});
function test(){
$('.note-status-output').html('<div class="alert alert-danger">' +
'This is an error using a Bootstrap alert that has been restyled to fit here.' +
'</div>'
);
}
</script>
</body>
</html>
I am trying bootstrap3 date picker but it does not show up calendar or it does not even show any javascript error when i click on textbook.
Below is my code for showing up calendar.
enter code here
<!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">
<!-- Bootstrap -->
<link href="css/bootstrap-datepicker3.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Date Picker -->
<script src="js/bootstrap-datepicker.js"></script>
</head>
<body>
<input type="text" class="form-control" id="sandbox-container">
<script>
$(function() {
$('#sandbox-container input').datepicker();
});
</script>
</body>
</html>
You jquery selector is wrong and should just be $('#sandbox-container')
This should be your code (including working example):
$(function() {
$('#sandbox-container').datepicker({
//..
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<input type="text" class="form-control" id="sandbox-container">