this is another extremely simple question. Is it just me, or does AOS.js only work with div's?
Because in the following link, I am trying it on an h1, and it doesn't work. I try it on a div, and it works. This is part of a larger question, and that project involves divs. It does not work there either. I can delete the attributes from the page in inspect, and it shows up like it is supposed to when it reaches the scroll point.
Then I hit control z + y and then I see the animation work, just not on the scroll. Please help. Thanks for your time. Here is the link to the mini project
[Edit] this one is solved, please help with the other one if you can thanks!
https://repl.it/#astroboyr/AOSJS-testing
If you find it out, here is the bigger project if you want to help,
https://repl.it/#astroboyr/PianoLife
The code you have doesn't have enough space on the bottom so that reason you are not able to see the animation. if you add more
<br> on the bottom you will see its working.
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div data-aos="fade-up"></div>
<!-- works with div -->
<h1 data-aos="fade-right">Some H1</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!-- doesnt with h1 WHYYYYYYY -->
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
<script src="script.js"></script>
</body>
</html>
Related
I have been looking for a way to get the same navigation bar on every page. Right now, I have a jQuery script that is loaded onto every page, that should replace a div placeholder; however, when I run the program, the navigation bar is simply not there.
JQuery code:
$(function() {
$("#dropdown").hover(function() {
$("#submenu").stop();
$("#submenu").slideToggle(500);
});
$("#submenu").hover(function()
{
$("#submenu").stop();
$("#submenu").slideToggle(500);
});
$.get("navigation.html", function(data){
$("#nav-placeholder").replaceWith(data);
});
});
Navigation file:
<nav>
CV Game Development
<div class="menu">
<div id="dropdown">Tutorials</div>
<div id="submenu">
Beginner
Intermediate
Advanced
</div>
</div>
</div>
</nav>
Actual HTML file to be used:
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="main.js"></script>
<head>
<title>CV Game Development</title>
<div id = "nav-placeholder"></div>
</head>
<body>
<h1 id = "intro">Welcome</h1>
<h3 id = "subintro">to the CV Game Development website</h3>
<p id = "info">Here is an abundance of information to get you started making 2D games with GameMaker: Studio.</p>
</body>
</html>
It seems like it should work, and yet, it doesn't. Any help is much appreciated, thank you!
As Mohamed-Yousef noticed in comments you have placed your nav-placeholder div element in head tag, which is wrong place for it.
It should be inside body element.
Also your meta, css and script tags must be in head element.
<html>
<head>
<title>CV Game Development</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="nav-placeholder"></div>
<h1 id="intro">Welcome</h1>
<h3 id="subintro">to the CV Game Development website</h3>
<p id="info">Here is an abundance of information to get you started making 2D games with GameMaker: Studio.</p>
</body>
</html>
1st: give <nav> an id to be
<nav id="nav">
2nd: you can use .load() instead of .get() .. And the.load() code should looks like
$('#nav-placeholder').load("navigation.html #nav");
The above code will wrap <nav id="nav"> into <div id="nav-placeholder">
3rd: if you need to replace with you can use unwrap() instead .. so your code should be like this
$('#nav-placeholder').load("navigation.html #nav" , function(){
$('#nav').unwrap();
});
4th: I don't know yet Why your <div id = "nav-placeholder"></div> inside <head> but any way I tested it and the code will work even if its wrapped to <head> ..
I'm trying to have a photo caption at the bottom of my header image. I found the following code to make that tooltip, but it doesn't work for mobile.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({placement:"bottom",delay:{show:0, hide:100000000}});
});
</script>
</body>
</html>
I would like to put the same caption in the normal title text, but only have that title text show up when on a mobile device, because the above tooltip will provide the caption when there's a mouse.
I found this great code that works ok to display the tooltip on mobile, but I can't get it to be positioned perfectly on the bottom of the header on the desktop, and it didn't always disappear correctly on mobile.
How do I turn off the regular img title-text without turning off the JQuery created tooltip?
This is likely not the most elegant, but it worked for me. I get a data-toggle tooltip, which can be formatted in CSS code with the class selector .tooltip {} and appears with mouse over on large devices, and then when on smaller devices, I can press and hold to get the normal title text.
Solution:
In Joomla I have two different Jumi scripts, one to create the data-toggle tooltips at the top of each module:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({placement:"bottom",delay:{show:0, hide:0}});
});
</script>
</body>
</html>
And one to turn off the regular title text if the screen width is greater than 980 pixels.
<script>
var mediaquery = window.matchMedia("(min-width: 980px)");
if (mediaquery.matches) {
$('img').hover(
function() {
$(this).removeAttr('title');
});
}
</script>
Then in each module, I call that first Jumi code with <p>{jumi [*4]}</p>. (That first segment is my 4th Jumi 'Application'.) I then declare the tooltip, and insert the image with the normal title text. Finally, after the image and title text is created, I call the second Jumi code (number 7 for me) <p>{jumi [*7]}</p> to check if the screen is large, and if so, delete the tooltip.
<p>{jumi [*4]}</p>
<p title="This is where the text of the the data-toggle tooltip goes" href="#" data-toggle="tooltip">
<img title="This text appears as the regular title text on smaller screens" src="Location_of_the/image_I_display.jpg" alt="Image key words" />
</p>
<p>{jumi [*7]}</p>
Enjoy!
Thanks to: Fernando Urban's answer for the screen size checking if statement, Dave Thomas's answer to remove the title attribute and Bootstrap for the data-toggle tooltip.
Sorry for the basic question. I'm new to coding and I've already googled "how to run code from node modules" "how to use code from node modules" etc. for a few hours without any real progress.
Basically, I want to create a editable div with the text editor (https://github.com/yabwe/medium-editor) and I already manually downloaded and followed the directions to inserting the code inside the editor (can be found on the GitHub page).
Here is my code for the editable div in its entirety:
HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<link rel="stylesheet" type="text/css" href="post.css">
<script src="other.js"></script>
<link rel="stylesheet" href="css/medium-editor.css">
<link rel="stylesheet" href="css/themes/default.css">
<script src="js/medium-editor.js"></script>
<div contenteditable="true" class= ".editable" id="posteditor"> <p> test words</p></div>
</body>
Javascript (other.js -referenced in html code):
var elements = document.querySelectorAll('.editable'),
editor = new MediumEditor('.editable');
I also copy and pasted the files from the downloaded file into a new file folder holding the HTML/CSS/Javascript code for the editable div (not sure if this even makes a difference).
Thank you so much for helping a new coder.
EDIT: Figured it out! My paths were in the wrong order and I wasn't referencing some of the necessary code in the
You need some simple html css js basics knowledge to start dealing with such code
here are some tips:
*put link tag in the head
*put script tags in before the ending of the body
try now to run this code and double tap the word you want to edit
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="//cdn.jsdelivr.net/medium-editor/latest/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">
</head>
<body>
<div class="editable"><h4>hi I am editable</h4></div>
<script src="//cdn.jsdelivr.net/medium-editor/latest/js/medium-editor.min.js"></script>
<script>var editor = new MediumEditor('.editable');</script>
</body>
</html>
My d3 codes are alomost like this example, in this example, the brush functionality works pretty well.
However, when I just copy and paste the <script>...</script> part of the above example into my index.js file like this:
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>Hello world!</title>
<base href='/'>
<link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="libs/d3/d3.min.js"></script>
<!--some more script here-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="pragma" content="no-cache"/>
</head>
<body ng-controller="MainController as mainCtrl">
<nav class="navbar navbar-default">
<!--navbar here-->
</nav>
<div ng-view> </div>
</body>
</html>
<script>
// exactly the same code in the above d3 brush example
</script>
The d3 brush function works as follows, i.e, the lines get outside of the axis area. My css file is the same as that in the above example. I guess it has something to do with angularjs or bootstrap?
Please advise, thanks a lot.
The problem is with the top line of <base href='/'> if you remove that line the page will work ok or remove "/". It changes the context path to load your css file and other scripts. Look at this link to preview the working script.
EDIT :
If you need to keep "base href" line then can you include your style.css in the head section? Look at this modified link.
<head>
<title>Hello world!</title>
<base href=''>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
The above problem happens because the SVG clip-path fails. It fails because of the <base href = '/'> tag. SVG clip-path attribute requires url, which is not well provided by this base tag (HTML 5 mode).
There are two solutions. One straightforward way is not using HTML5 mode, i.e, try to remove/modify the base tag. But this solution has some problems, like if the absolute url of propeties changes frequently, then we definitely need base tag to set a relative path.
Another solution is preferred. That is to set an absolute url for SVG clip-path, instead of asking help from the base tag, i.e,
In the controller, add
var vm = this;
vm.path = $location.path();
or just
$scope.path = $location.path();
then change every
.attr("clip-path", "url(#clip)")
to be
.attr("clip-path", "url(" + ctrl.path + "#clip)")
then all done.
Actullay this problem is solved in this post, which is also my reference.
What I'm trying to do is make a stock .html file with the nav, footer, basically anything I'd use on multiple pages and want to change easily. This is a small 20ish page site I'm working on and I really don't want to rely on php or something.
I've looked at other responses on here and followed them precisely but they don't seem to help me at all, although it's probably something I'm overlooking.
<!doctype html>
<html>
<head>
<link href='files/stylesheet.css' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
</head>
<body>
<!--Navigation-->
<div id='navigation'></div>
<script>$("#navigation").load("templete.html #nav");</script>
</body>
</html>
Thanks in advance! -Shy♥
Is it cust a typo templete.html (third line from below). Otherwis, take a look at the jQuery docs and the restrictions of the functions (http://api.jquery.com/load/).