I was thinking instead of loading everything in parallel. I will allow to load and display the basic no-styled layout and then will load the css file after page has finished loading, but being a newbie in Javascript. I am not able to do this.
Till now I have tryed:
<head>
<script type='text/javascript'>
function addstyle()
{
document.getElementBytype('text/css').href='style.css';
}
</script>
<link rel="stylesheet" type="text/css" href="">
</head>
<body onload="addstyle()">
<h1>Good Morning</h1>
<p>Hello whats up</p>
<p>Hope you will have a great day ahead</p>
</body>
Here as you can see, I am trying to load style.css after the page is displayed in the browser, but it is not working.
Try this:
<head>
<script type='text/javascript'>
function addstyle()
{
document.getElementById('style').href='style.css';
}
</script>
<link rel="stylesheet" id="style" type="text/css" href="">
</head>
<body onload="addstyle()">
<h1>Good Morning</h1>
<p>Hello whats up</p>
<p>Hope you will have a great day ahead</p>
</body>
If you are using jQuery you can do something like this:
$(document).ready(function(){
var $style_element = $(document.createElement('style'));
$style_element.attr({href:'http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css', rel:'stylesheet', type:'text/css', id:'some_id'});
$('head').append($style_element);
});
Related
Im trying to code a simple Javascript exercise where I have to place different text at different part of the page but it keeps throwing me a
TypeError:sal[0] is undefined
Here is the javascript code.
function sals(a,b,c,d,e,id)
{
var sal = document.getElementsByClassName(id);
sal[0].style.top=a;
sal[0].style.left=b;
sal[0].style.color=c;
sal[0].style.fontsize=d;
sal[0].style.zindex=e;
}
sals('5%','50%','yellow','250px','20','GB');
What am I doing wrong?
For further reference, here is my HTML code aswell
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1 class="GB"> Holla</h1>
<script src="main.js"></script>
</body>
</html>
Your JavaScript is running before the page (DOM) has fully loaded.
the simplest way to make sure the DOM is loaded before your JS runs, is to add 'defer' to the script tag thus;-
<head>
<title>Hello</title>
<link rel="stylesheet" href="main.css">
<script src="main.js" defer></script>
</head>
<body>
<h1 class="GB"> Holla</h1>
</body>
</html>
Loading this causes nothing to show up except for the pink background! When I remove the <script src="https://apis.google.com/js/client.js"> line, everything works again! I need that script for the API to work, so how can I fix the body elements disappearing?
<head>
<title>My Drive - Google Drive</title>
<link rel="icon" href="https://ssl.gstatic.com/docs/doclist/images/infinite_arrow_favicon_5.ico">
<link rel="stylesheet" href="stylin.css">
<meta charset="utf-8">
<script src="https://apis.google.com/js/client.js">
<script src="app.js">
</head>
<body>
<h1>MVTennis vids! :D</h1>
<button onclick="newVideo()">New Video</button>
<hr>
<p> yeet yeet </p>
</body>
Sorry if I'm missing something obvious. Thank you all for any help! :)
You'll want to close the script tags on each one, like so:
<script src="https://apis.google.com/js/client.js"></script>
<script src="app.js"></script>
Try that and see if it resolves it.
I have two simple html files which has a link in body and a log in JavaScript. In A.html, it is a link to jump to B.html and a console.log("a 123"); in JavaScript. However, the "a 123" message will only be showed when refresh the browser but not be executed from a link. For example, if i click the link Go to a in b.html, the message "a 123" will not be showed.
Any idea?
-----A.html-------
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
</style>
</head>
<body>
<div data-role="page" id="a">
<div data-role="main" class="ui-content">
<a href='b.html'>Go to b</a>
</div>
</div>
<script>
console.log("a 123");
</script>
</body>
</html>
-----B.html-------
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
</style>
</head>
<body>
<div data-role="page" id="b">
<div data-role="main" class="ui-content">
<a href='a.html'>Go to a</a>
</div>
</div>
<script>
console.log("b 123");
</script>
</body>
</html>
Bit of searching and I found the answer! Apparently it's a 'feature' of Jquery Mobile. It's using an Ajax navigation system. So it stays singlepage.
From the docs:
jQuery Mobile includes a navigation system to load pages into the DOM via Ajax, enhance the new content, then display pages with a rich set of animated transitions. The navigation system uses progressive enhancement to automatically 'hijack' standard links and form submissions and route them as an Ajax request.
Maybe it's a good idea to read the intro of jQuery mobile: http://demos.jquerymobile.com/1.4.5/intro/
That's because the code your code only executes on the page load. If you want it to execute on an event, you need to wrap it in a function and call the function in the onclick attribute on your link.
I am trying to add a simple carousel to my site. After doing a little research I found owl.carousel.js, I like the layout they use and it seems to be what I'm looking for.
Keep in mind I am new at all this. :)
My question is after I have downloaded the file and add the links to my html how do I make it work? Also I am not sure if I have to add the JS in the html or separate like I have it. On the owl site it just says call the function.
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<a link href="main.css" rel="stylsheet" type="text/css">
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
<title></title>
</head>
<body>
<div class="owl-carousel">
<div> <img src="images/images-1.jpeg"> </div>
<div> <img src="images/images-2.jpeg"> </div>
<div> <img src="images/images-3.jpeg"> </div>
<div> <img src="images/images.jpeg"> </div>
<div> <img src="images/shutterstock_204805573.jpg"> </div>
<div> <img src="images/shutterstock_221107753.jpg"> </div>
<div> <img src="images/smug%20mug%20portrait%20copy.jpg"> </div>
</div>
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
</body>
</html>
Looking at your html, it should work. Just add the snippet (that you mentioned first) right after you include owl carousel js file. So, the final should look like:
...
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
</body>
</html>
First of all just for starters, Your CSS link is set wrong, remove the hyperlink tag as link is its own tag... I think I see it, from what I see its the only option... PS You did lack a little on showing us your file locations and code...
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
Running it from the Javascript console that inspecting Chrome exposes is the best way to test IMO. Running that script is basically what you're doing when you load it via JQuery, here you're just doing it manually. If the site has a CDN, I say try it with that first, then if it's working you can download it and get it working locally.
I have just tried to implement wow.js to my site but it wont work.
I have linked everything but i don't know why it isn't working.
I even added the wow.js and linked it to the html but there still seems to be nothing that is working. I also added the animate.css and still there is no effect.
HTML
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="animate.css">
<script language="javascript" type="text/javascript"src="javascript.js"></script>
<script language="javascript" type="text/javascript" src="wow.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<title> Vids </title>
<header> <img src="images/Logo.png" > </header>
</head>
<body>
<div class="vids-title">
<p>Vids</p>
</div>
<div class="video-1 wow slideInRight">
<h>Shia LaBeouf delivers the most intense motivational speech of all-time</h>
<iframe width="550" height="435"
src="https://www.youtube.com/embed/nuHfVn_cfHU">
</iframe>
</div>
<div class="video-2 wow slideInLeft">
<h>Truth or Drink (Exes)</h>
<iframe width="550" height="435"
src="https://www.youtube.com/embed/pxYpvNMbdXQ">
</iframe>
</div>
<div class="video-3 wow slideInRight">
<h>Walker broke his arm</h>
<iframe width="550" height="435"
src="https://www.youtube.com/embed/5-NXguyFFko">
</iframe>
</div>
javascript
$(function(){
new WOW().init();
});
There is nothing wrong with your code - its working fine
https://jsfiddle.net/k3qaoyxe/
I included the directories as external resources and then
$(function(){
new WOW().init();
});
worked fine.
Are you sure you have included all the libraries properly and they are loading correctly - check the network tab in your developer console.
Libraries included from cdn:
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.css
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js
https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js
For me, it worked well after calling WOW at the window load event in addition to document ready event:
//At the document ready event
$(function(){
new WOW().init();
});
//also at the window load event
$(window).on('load', function(){
new WOW().init();
});
<script language="javascript" type="text/javascript"src="javascript.js"></script>
<script language="javascript" type="text/javascript" src="wow.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
should probably be
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="wow.js"></script>
<script src="javascript.js"></script>
You can also get rid of language and type attributes, they're useless and not W3C compliant.