I created a blank jekyll blog and I included parallax.js with CDNlink and the link is :
(script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js">)
but when I ran it in localhost the moving effect that I have imported doesn't work. In my rails app that I created it works perfect there.Also if I deploy it on GITHUB pages will the parallax work there?What should I do to fix that issue?
I upload in github pages https://lazospap.github.io/LazPap/. There are a lot to be fixed but for now i can't see the images.
YES, parallax effect can work on Github pages.
You probably just made some coding errors/mistakes.
Rules to follow
1. Nothing can be placed after </body></html>
The first mistake I see is that nothing can be placed after </body></html>. Your layout file contains this:
</body>
</html>
<!-- Bootstrap core JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery/jquery.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Custom scripts for this template -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/js/creative.min.js"></script>
It should be:
<!-- Bootstrap core JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery/jquery.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Custom scripts for this template -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/js/creative.min.js"></script>
</body></html>
2. Open and close the body only once
You embed the content in your layout. Your layout has a body open and a body close tag... however, your content also has a body open and a body close tag. Therefore you open and close the body of your HTML file twice. Remove it in your content file and your are set. Find <body id="page-top"> and </body> in this file and this file and remove them.
3. Use layouts for (complex) HTML and JS
The code < 150 on line 184 gets wrongfully escaped. This is probably due to the fact that you are writing complex HTML and JS in a markdown file. You could prevent this by combining the HTML from 'index.md' and 'default.html' in a file 'home.html' in your layout directory. Your index.md file should then reference 'home' as layout instead of 'default'. Here is the error:
SyntaxError: missing ) after conditionLazPap:184:34
4. Call functions only after they are declared
I know it gets kind of hard to grasp when you use 'defer', but the rule of thumb is to call a function only after you have declared it. Parallax is a function that gets declared in line 71 of default.html:
<script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
But you call the function inside the content part of that same file on line 38. That does not work, and if it does it is solely due to the 'defer' statement.
5. Use a baseurl
When you host on Github Pages you need a basurl. The reference to your images is /images/HTML_5.png. Because you host on Github pages your baseurl should be /LazPap so your url becomes /LazPap/images/HTML_5.png. More reading about baseurl...
A simpler solution...
You started out with a copy of this code: https://blackrockdigital.github.io/startbootstrap-creative/. The easiest way to achieve a parallax-like effect would be to add JUST ONE CSS rule to the original code:
header.masthead {background-attachment: fixed;}
Although it is the solution I would use, it is probably not what you want, as you specifically mentioned parallax and a javascript solution.
Related
My main web page (index.html) follows a common structure (simplified):
<html>
<head>
<title>...</title>
<meta name=description content="...">
<link rel=stylesheet href="main.css"/>
[... including #font-face loads ]
</head>
<body>
<div id=menu>...</div>
<div id=mainContent>
...
</div>
<div id=footer>...</div>
<script src="jquery.min.js"></script>
... more scripts
<body>
</html>
The web server is well configured such that all the static files are cached and don't get reloaded on the client side if refreshing the page.
Upon choosing a link from the site, mainly from the 'menu' or the 'footer', I want to display different content within the div tag 'mainContent'. Page layout, CSS, fonts, scripts, menue, footer - all is the same. I have identified several means to achive this:
Construct a new subPage.html file copying everything from index.html, then rewrite the div 'mainContent'
with the desired other stuff and change page specifics like title, description etc.
Or use php to include the desired content in mainContent and to change the page specific values like 'title'.
Link from index.html goes to href="subpage.html".
Drawbacks:
Maintenance: when changing anything in the outside 'wrapper', I'll have to edit
every subPage.
no idea how to easily transport values from index.html
to subPage.html, beside cookie (not always permitted) or URL
parameters.
use a javascript onClick handler (event listener) to load requested content from server using XHttpsRequests and exchange the innerHtml of div mainContent.
Drawbacks:
no noscript version possible.
my changing content is probably not indexed by Google bot and alike, since it is not loaded with index.html. Would it change the situation if the 'alternativ content' was saved in .html files in the base directory, such that it would be browsable and discoverable?
Pre:
keeps javascript variables
no need to reload outer page, thus best user experience.
use a 2nd div 'mainContent2' with style="display: none". With a javascript onClick handler toggle display style of both mainContent divs to none <-> block.
Pre:
easy to implement.
all content loaded and thus SEO indexed.
Drawback:
Everything has to be loaded at once, so the index.html might get pretty big.
[4. iframe probably not an option (as the src attribut is static)]
I tend to opt to alternative #2.
Any other technics recommended? What is the 'best practice'? How is this generally done by the pros? Suggestions? Please elaborate.
I'll give you a few answers based on each option:
PHP
You can use PHP to import the header and footer instead of the main
content, that way you have just one file with a header and another
with a footer and all the pages that you create with different
contents will import the header and footer, avoiding duplications.
JS
Do you need a no-script version? I have never seen someone who disabled js but I don't know your app, it could be a pre-requirement.
You can use a modern js framework like Next + React / Nuxt + Vue / Remix / Svelte / ... There is a lot of options here that can provide you an SSR (Server Side Render) and make Google Bot happy
SPA
This seems to be a SPA. You can use some of the modern js frameworks that I mentioned in the second item. You need to think about lazing load the images too. I don't know how big is this content, but you can try google lighthouse to see if there is some problem with page size in this approach, also, you could enable the gzip on the server.
OR...
All of the above
You can use all of them together too. A frontend with a framework getting data from an API written with PHP, why not? PHP can validate the request type and delivery an HTML if it's the first request or a JSON if the application is already loaded.
Most common solution probably a variant of your option 1. But different then you think. Create a header.php with the content
<html>
<head>
<title>...</title>
<meta name=description content="...">
<link rel=stylesheet href="main.css"/>
[... including #font-face loads ]
</head>
<body>
<div id=menu>...</div>
and create a footer.php with the content:
<div id=footer>...</div>
<script src="jquery.min.js"></script>
... more scripts
<body>
</html>
Then create an index.php like
<?php include('header.php'); ?>
<div id=mainContent>
...content index page...
</div>
<?php include('footer.php'); ?>
And then create subpages like subpage.php
<?php include('header.php'); ?>
<div id=mainContent>
...content subpage...
</div>
<?php include('footer.php'); ?>
This way if anything in the header or footer needs to change you edit the header.php file and the changes will take effect on all pages because the header.php gets included on every page.
I've been using W3Schools' Javascript library to handle HTML includes onto other HTML pages. Everything has been going good, except I'm running into some formatting issues. When the include processes, it puts the HTML into the body tag when I'd prefer it into a different tag. I don't want my body tag formatting to impact the HTML content that's imported. I'm open to any solutions, but I'd prefer something that allows me to specify a specific tag in the HTML document to be imported into.
I've tried putting the Javascript call into the head or outside of the body tag but haven't had any luck.
Here's the code used by W3Schools: https://www.w3schools.com/howto/howto_html_include.asp
<script src="https://www.w3schools.com/lib/w3.js"></script>
<!-- import header -->
<div w3-include-HTML="./includes/header.html"></div>
<!-- import navigation bar -->
<div w3-include-HTML="./includes/navbar.html"></div>
<!-- Script to Handle W3Schools HTML Includes -->
<script>
w3.includeHTML();
</script>
Thanks for the help! I'm hoping there's a good way to do this, otherwise I guess I can format my text outside of the body tag... That's far from ideal though.
Did you try to replace <script> w3.includeHTML(); </script> by <script>includeHTML(); </script> ?
I am using angular, and added bootstrap-toggle using bower. I also included the appropriate css, and js files in my index.html. In my resource file, I need to create a toggle switch. I include the following line:
<div>
<input type="checkbox" checked data-toggle="toggle">
</div>
I don't want to add this line using javascript. It is showing up as a checkbox rather than a toggle. Is there something that I am missing?
css link snapshopt
js links snapshot
If you are using, Bootstrap v2.3.2, then you should be using bootstrap2-toggle.min.js and bootstrap2-toggle.min.css.
Make sure you load the bootstrap-toggle.css after the main bootstrap.css file.
Also, make sure load the bootstrap-toggle.js after the main bootstrap.js. right before you close the body tag.
Don't forget the jquery, it needs to go before both js files.
For future readers.
I have fixed the issue by loading jquery and bootstrap js files before bootstrap toggle js.
Same for css files. First bootstrap css and then bootstrap toggle css.
It is better to include the .min.css and .min.js since these versions are minified meaning all whitespace removed to reduce file size and increase speed.
Firstly include jquery JS.
<script src='https://code.jquery.com/jquery-1.10.2.js'></script>
You need to include bootstrap-toggle.min.css after the main bootstrap.min.css file.
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
<link href='https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css' rel='stylesheet'>
Then also include, bootstrap-toggle.min.js followed by bootstrap.min.js.
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>
<script src='https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js'></script>
Now your checkbox will work as a toggle-checkbox.
I've been working with the design UI of our website and looking for some templates available in the web.
Then I encountered with this syntax <!----> and I'm not familiar with it.
Can you please tell me what is it and what is it used for?
thank you.
As the other posts have mentioned the <!----> code in HTML is used for adding comments - a note left in the code by a developer with some info for other developers, or to remember something themselves. This code is viewable in the source but not displayed when viewing the HTML in the browser. Ex:
<!-- We need to update this each year -->
<div>© 2009 - 2016</div>
will produce:
© 2009 - 2016
In most cases the comment can be removed with no side-effect on the code. It's simply a note for developers.
Other Uses
Commenting Out Code
In addition to comments you'll sometimes see HTML code wrapped by <!---->. Ex:
<!-- Add this later
<img src="article.jpg" alt="Article">
-->
The above code will remove the entire image tag from the browser view. This is useful if you want to temporarily remove some HTML from a page, for testing/debugging or for later use. You'll sometimes see entire HTML sections commented out.
Conditional Code
Another common use of comments is to add conditional code used by specific browsers. The following snippet of code would only be read by Internet Explorer 8, and would apply a black background color to the body.
<!--[if IE 8]>
<style>
body {
background-color: black;
}
</style>
<![endif]-->
Website Builders
Some website builders generate their own code comments for internal use. For example, if you use Squarespace the generated code will contain comments like:
<!-- This is Squarespace. --><!-- www -->
These snippets, in some cases, are used by the generators themselves as a marker for inserting other code.
Build Scripts
There's a small chance the comment tag is being used as part of a build script, and in this case removing it would cause issues. Here's an example:
<!-- build:css -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- endbuild -->
The above code, used with a build system like Gulp and a Gulp plugin like HTML Replace will replace the content between the <!-- build:css--> and <!-- endbuild --> tags with new code. Removing either one of those comment tags will cause errors.
html comment tag
White space is not permitted between the markup declaration open delimiter(""). A common error is to include a string of hyphens ("---") within a comment. Authors should avoid putting two or more adjacent hyphens inside comments.
Reference : https://www.w3.org/TR/html4/intro/sgmltut.html
in that page goto 3.2.4 Comments title
this is an html comment tag.See this link below to know more
http://www.w3schools.com/tags/tag_comment.asp
This allows you commenting your html
<!--- my comment -->
(with --> to close it that's right)
i am a beginner in html. i would like to do something like this,I am using the below code to create tabs, now i have the contents of the section in a different html file. Please tell me how to load that html file inside the section.
<html>
<head>
<link rel="stylesheet" href="tabs.css">
<body>
<article class="tabs">
<section id="tab1">
<h2>NewRecord</h2>
<p>This content appears on tab 1.</p>
</section>
</article>
</body>
</head>
</html>
Option 1
Use iframes to archive this. It will display another page.
Option 2
Use Ajax Example
HTML is the structure, CSS is the style (appearance), and JavaScript is the behavior. You can't load data with just structure alone, you'll need to introduce some scripts in there. jQuery is a common library that's fairly easy to learn, but there's many available.
You can load the content from another HTML file via jQuery '.load()' method.
Step 1 - Include jQuery in your code.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Step 2 - Add this code before the closing </body> tag.
<script>
$(document).ready(function() {
$('#tab1').load('html-file-1.html');
});
</script>
Step 3 - Your external html file html-file-1.html contains nothing but simple html tags to represent the content you want to load within the section.