I'm using this:
http://codesandnotes.com/sticky-elements/ (see the jsfiddle)
but I'm having problems in getting it to work. The pink css pulls through but it doesn't stick/doesn't change to red.
I've changed the article to an aside in the html and js. I'm using wordpress. I've added the js to the js folder and called it in the header which is pulling into the correct template. I've added the css to the main style.css. The js and css files are in different locations- could this be what's stopping the js being called?
Any help would be much appreciated. Thanks
is it fixed?
Anyway!
First add css and jQuery Library link to your WordPress Header. Then add html codes from the jsfiddle. after all the things done.
include copied js script file from the jsfiddle to the bottom of the page. See below code will help you to understand. but it's in html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="copied_css_file_from_the_jsfiddle.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script><!-- jQuery Library -->
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script><!-- jQuery Library -->
</head>
<body>
<p>This is the proper way <small>How to use css js and html in correct way</small></p>
<!-- add the html code from the JSFIDDLE-->
<script type="text/javascript">
$( document ).ready(function() {
//Copy and paste the script from the JSFIDDLE
});
</script>
</body>
Contact me by searching yeshansachithak in any social network. Thanks
Related
Where should I add CDN Link in my Project? I have made a Project in Codepen, and over there It’s added in the Javascript column. But in my local machine do I have to add it in .html or .js? I have tried adding it in my <head> of .html but it’s not working.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I have tried without "https:" and "//" as well. But still no luck.
Please let me know if I need to do anything else besides this.
If you are running the code locally, your HTML file should look like this:
<!DOCYTPE html>
<html>
<head>
<script src="url here"></script>
</head>
<body>
</body>
</html>
If that still does not work, you should put your code through the W3 Validator. You can view the errors with your HTML there.
In Codepen you need to go to settings.
Then choose JS and there you can add external libraries.
Thank you for the answers, Actually, I got the solution, I mistakenly added js/main.js instead of <script src="main.js"></script> .
And next thing I checked, I had added jQuery CDN Link in my .js file as well. I removed it from there and It worked.
I downloaded the code from codepen.io and it does not work locally.
http://codepen.io/nanarth/pen/raarXe
I suspect that references to some libraries are not exported, but can figure out which.
Can anyone help me with this (I am new to this)
Thank you
UPDATE: Added the following code. Still not working
<head>
<meta charset="utf-8">
<title>Floor Plan - local coordinate map layers for D3.js</title>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script>
<script type="text/javascript" src="http://codepen.io/nanarth/pen/yyyqdL"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
Update #2: The screenshot of the error I am getting.
You're right, this pen is including external JS libs. Here's quick gif How to get there.
Those errors You got mean that jQuery libraries are not defined by the time that code runs. Ensure that:
You have copied JS code from the right pane in codepen
You have copied inline JS code from the left (html) pane in codepen
You wrap javascript in jQuery ready function
So what happens, is when then files are exported, one of the files is for some reason empty.
replacing
<script src='js/yyyqdl.js'></script>
with
<script src='http://codepen.io/nanarth/pen/yyyqdL.js'></script>
solved the issue.
Or the file can be downloaded and used locally and keep the old reference
http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
In the "See in Action" section you can see the whole code is separated into 3 parts (HTML,CSS and JS). I'm new in working with asp.net. I know I can put css and js codes inside different files and have a web form which contains html and asp.net tags, But really I do not know how I can assemble the codes are shown in above page to get the correct output.
Any help please?
Simple straightforward example for a way they can all come together:
<html>
<head>
<style>
/* PUT YOUR CSS HERE */
</style>
</head>
<body>
<!-- PUT YOUR HTML HERE -->
<script>
// PUT YOUR JS HERE
</script>
</body>
</html>
This way they all come together at one page, and can affect each other (Css can affect HTML, and JS can affect html & style (which means, it can also change the Css).
Note - the only one you really need in an HTML page is the HTML itself. you could add links to other resources you have written in other files instead of copypasting scripts if you already have the files pre-made, which is probably the better, more orginised approach to this - however the one I've written is more easy to understand if you're a novice, and is probably the best if it's your first time trying all these together. Good luck, new web dev, may the force be with you. (:
Here is the file structure I usually use:
/
|_index.html
|
|_assets/
|_css/
| |_style.css
|
|_ js/
|_script.js
And my index.html generally looks like this:
<!doctype html>
<html>
<head>
<title>Test page</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<h1>Hello world!</h1>
<script src="assets/js/script.js"></script>
</body>
</html>
Why is the CSS linked in the head tag?
Because I want the CSS to be loaded as soon as it can, so the user doesn't see an unstyled version of my page when it loads.
Why is the script called at the bottom of the page?
Because that way, I'm sure the whole document is loaded and parsed when I execute my script.
I just want to stop rendering to the html to the DOM until my Css and Js loaded from an external source.
<html is showing here >
<link type="text/css" rel="stylesheet" href="http://preview.somex.com/sites/all/themes/bootstrap_mywinners/css/style.css">
<script type="text/javascript" language="javascript" src="http://preview.somex.com/sites/all/themes/bootstrap_mywinners/js/mywinners-global-scripts.js">
<html is end here >
Why I'm doing this is the static html is looking ugly until the css and js loaded and then after sometime?(after loading css and js from network) it looks cool.
So I just want to stop showing html until the script and css load.
Any clues/help regarding this ?
If your includes are nested in the BODY tag not a lot you can do with just pure HTML. If you can move them up into the HEAD section section this should fix itself. A great breakdown of how the page loads and what fires when is on an answer to another StackOverflow question see this link :
Which is the load, rendering and execution order of elements in a HTML page?
Hope you find this helpful.
I'm very new to the HTML5 world and I could use some help with how to use this javascript file.
jquery.autoanchors-0.3
It is found here. http://fredibach.ch/jquery-plugins/autoanchors.php
How do I do use this? How can I include this in the html file in the and the js file how will it automatically add the anchors/links to the html file?
<script src="js/jquery.autoanchors-0.3.js"></script>
Any help would be great.
Thanks
damon
as sachleen points out you'll need jQuery first.
Download jQuery (http://jquery.com/download/)
Include both jQuery and autoanchors into the head of your html file
Follow the instructions on the autoanchors page (http://fredibach.ch/jquery-plugins/autoanchors.php#usage)
Add this to the head section of your webpage, which will add jQuery to your page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" /></script>
Download the Autoanchors.js file and add it to your site (put it in a folder named js):
<script type="text/javascript" src="js/jquery.autoanchors-0.3.js"></script>
Then follow the instructions on that site under "usage" which would look like this (this goes in the head, right under the line above):
<script>
$(document).ready(function(){
$("div.demo").autoAnchors();
});
</script>