I did all what they say on their "how to use" section. added its JS code (I opted to use a CDN) and the example (class="wow bounce"). but it doesn't do anything. browsing, I found a solution (add .wow {visibility: hidden} from here). okay, there is a solution, but it isn't in the wow.js page or github readme. how can I use it properly stackoverflowlessly?
here is my wow.js-related code:
<body>
...
<div class="wow bounce">...</div>
...
<script type="text/javascript" src="https://cdn.boomcdn.com/libs/wow-js/1.3.0/wow.js">
</script>
<script>new WOW().init();</script>
</body>
Related
So, I found a code/function I wanted to use on this site here: stackoverflow
I then copied the code from the second answer, did some small changes and tested if it actually worked, and I found out it did not. All of the functions from the link work on JSFiddle tho, but none of them work for me in my html document.
I did < script>, didn't work. I tried to make a separate .js document, but the code was still not working.
<body>
<div id="bokse2"></div>
<div id="boksi"></div>
<script src="test.js" type="text/javascript"></script>
<script>
$(function() {
$('#bokse2').click(function() {
$('#boksi').css('margin-left', '-=10px');
});
});
</script>
</body>
The big box (boksi) should move 10 pixels to the left by clicking on the smaller box (bokse2). Just like it does here: JSFiddle
You are missing the include to the jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
I want to add onepagescroll on my website, I find it difficult to solve this problem, maybe because I am still learning stage.
You have to structure your page like so:
<body>
<div class="main">
<section>...</section>
<section>...</section>
</div>
</body>
Each of those section tags represent a "page", so when you scroll it just scrolls to the next section.
You also have to add jquery, the onepagescroll plugin and a script that calls the plugin on your main element
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> //embed jquery
<script src="path/to/the/plugin/file.js"></script> //embed plugin
<script>
$( document ).ready(function() { //wait for jquery
$('#main').onepage_scroll(); //start the plugin
});
</script>
You may also check the plugins documentation, which was mentioned by Barmar or follow a tutorial to create a demo page.
Since I started using a html-templatefile for my navbar elements I haven't got one of my scripts to execute(I can execute it via the console). I have experimented with on-load-functions but even that didn't seem to work. My problem is that I understand to little of the execution order and if I'm somehow blocking my script. I don't get any error messages either and when the html-template isn't used (ie - the navbar structure is included with everything else in the same html-file) the page loads as it should. So something there is messing it up. And I can call it from the console as well.
(I have tried a variety of ways but nothing have really worked, other than including the template in the document and that I would like to avoid. This setup is one of many). I hope someone can see the errors I do on the spot. I have cut out som css aswell, for readability.
Edit: Threw js out the window, since ASP was found available. Solved it in about half an hour using asp.
Just place your DOM elements inside body tag. Always render script at the end of the body, and append async javascript files at document ready (or at least this is my view of things).
<html>
<head>
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
<script src="http://code.jquery.com/jquery.js"></script> // create a local copy of jquery and other async javascript files you can load at $(document).ready(function(){ //here append async scripts like google maps });
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
Here goes code....
</script>
</body>
</html>
The code you are trying to reference in the $("#pageContainerId").load("navbarTemplate.html"); is outside the body tag and most browsers will cut this out.
Try the following:
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
Here goes code....
</script>
</body>
</html>
Also as the script is at the top the DOM may not be loaded at the time try the following:
$(document).ready(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
DOM ELEMENT SHOULD INSIDE BODY TAG
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
</body>
Ok, I couldn't get it to work the way I wanted but it turned out we had asp enabled on our server so when I switched to that I got it to work beautiful in about half an hour.
And it's a better way I suspect, in terms of best practice.
Thanks for the responses.
I run this simple script that comes from Angular documentation, and it's working fine:
http://plnkr.co/edit/6uIlw6HGVVpT0amF2vhj
If I add jQuery and jQuery Mobile, then the example doesn't work anymore. The radiobuttons are not clickable.
Example: If I add these two scripts and the following CSS in the above example:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
If I put them before the include of angular.js, then the radiobutton are clickable, but the display of the choice ("You choose...") doesn't work anymore.
Does somebody knows why is it not working?
Use this Sequence. dont know the reason but worked in plunkr.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
Users in my site are seeing a half-second glitch on each page before any jQuery code executes. This code manipulates the page so you can visibly see elements move in one big chunk, making the user experience feel clunky. I'd prefer the page not to display at all until the JavaScript has run.
I'm using jQuery provided by the Google API in a page as follows:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<script type="text/javascript" src="MyScript.js"></script>
In MyScript.js:
google.setOnLoadCallback(runOnLoad);
function runOnLoad() {
// Do stuff
}
Does anyone know if it's possible to run the JavaScript before the page is displayed in the browser?
You could probably add a css class to your main div that would hide the content, and then remove that class as the last thing that MyScript.js does.
In your html template:
<body>
<div id="mainContent" class="hidden">
</div>
</body>
The css class:
.hidden
{
display: none;
}
Last executed statement of MyScript.js:
$("#mainContent").removeClass("hidden");
I would agree with Jan.
Most (not all) browsers load CSS first before javascripts.
So CSS would be advisable for you.