As the title says i am having a problem when loading a page like
blabla/index.php with a slash at the end (blabla/index.php/).It loads the page without the css and js making the page look like crashed.And this happens in every page i have like blabla/projects.php/ etc.
Any idea how can i fix this problem? And why is this happening?
The code is :
In head.php
<DOCTYPE html>
<html>
<head>
<title>ΑPL Lifts</title>
<link rel = "stylesheet" href = "css/bootstrap.css">
<link rel = "stylesheet" href = "css/main.css">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, user-scalable = no">
<meta http-equiv="content-type" content="text/html" charset = "UTF-8">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src = "js/bootstrap.js"></script>
</head>
and in another file :
<?php
include 'includes/head.php';
include 'includes/navigation.php';
include 'includes/leftContentColumn.php';
?>
<div class = "col-md-8 maincontent">
<h1 class = "main-title">Προφίλ Εταιρίας</h1><hr>
<div id = "profile">
<div id = "profileParOne" class = "col-md-11">
</div>
</div>
</div>
<?php
include 'includes/rightContentColumn.php';
include 'includes/footer.php';
?>
I think paths to your css and js are relative. somethings like ../myscript.js . You should rewrite it to use absolute path (relative to root) like /js/myscript.js
Ok i found the solution by changing the ccs and js paths into:
<link rel = "stylesheet" href = "http://localhost/apl/css/bootstrap.css">
<link rel = "stylesheet" href = "http://localhost/apl/css/main.css">
<script src = "http://localhost/apl/js/bootstrap.js"></script>
Related
This is not working for me. I created script src to my HTML
function eyob1() {
var play1 = document.getElementById("aud").src="eyobmknn/trk1.mp3"
play1.loop = "true";
pley1.play();
}
<!DOCTYPE html>
<html >
<head >
<link rel="stylesheet" href="launch.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div onclick="openeyob();" class="eyob" id="eyob">Eyob Mekonnen</div>
<div id="container">
<div onclick="eyob1();" class="eyob1" id="eyob">01 track 01
<script src="lunch.js"></script>
</body>
</html>
and I can add src but the sound cannot be played
I answared a similar question here: How to play audio loaded via file input
It's possible to change the src attribute using the method SetAtrribute:
function eyob1() {
var play1 = document.getElementById("aud")
play1.settAtribute('src', "eyobmknn/trk1.mp3")
}
But is important to notice that your code does't have a an element with id='audio'. Your script won't work as it is now.
A good start point is here: https://developer.mozilla.org/en-US/docs/Web/Tutorials
I have two html pages called home.html and about.html.
And I also have a js file called main.js which is linked with both of the html pages.I have a div with a class of "home" in home.html and another div with a class of "about" in about.html. Class "home" has a text and class "about" has a text too.Now I slected them in my main.js file like this,
const home = document.querySelector('.home')
const about = document.querySelector('.about')
And manipulated them like this,
home.style.color = 'red'
about.style.color = 'green'
But the problem is only the variable 'home' is changing its color not the variable
'about'
I think there is maybe a particular way to select elements from multiple pages.
But if there is pls let me know bcz the variable 'about' is not getting manipulated with anything.
const home = document.querySelector('.home')
const about = document.querySelector('.about')
// Manipulated them like this
home.style.color = 'red'
about.style.color = 'green'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ES8 Project</title>
<link rel="stylesheet" href="main.css" /> </head>
<body>
<div class="home"> HOME </div>
<script src="main.js"></script>
</body>
</html>
Rather than:
<div class="home"> HOME </div>
<div class="about"> ABOUT </div>
You can use a custom data attribute like data-page:
<div data-page="home"> HOME </div>
<div data-page="about"> ABOUT </div>
Then, if you want to do something more dynamic than straightforward CSS styling, you can script the following:
const myDiv = document.querySelector('[data-page]');
switch (myDiv.dataset.page) {
case ('home') : [... DO SOMETHING... ] ; break;
case ('about') : [... DO SOMETHING... ] ; break;
}
N.B. When using this setup, where you do only want to apply CSS styling, then definitely use CSS:
[data-page="home"] {
color: red;
}
[data-page="about"] {
color: green;
}
Further Reading:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
I want the below javascript to update the specific css link bootstrap.min.js if the page is named mypage.html.
How would I do that?
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/bootstrap377.min.css"/>
<link rel="stylesheet" type="text/css" href="/css/some_other_stylesheet.css"/>
<script type="text/javascript">
var filename = location.href.split("/").slice(-1);
if (filename == "mypage.html") {
HOW DO I DO THIS: update the above stylesheet link to be bootstrap400.min.css (or should this script be before the css link?)
}
</script>
</head>
<body>
this is a test
</body>
</html>
Use document.querySelector to get a reference to the link element, then change the href property the usual way.
var filename = location.href.split("/").slice(-1);
if (filename == "mypage.html") {
var link = document.querySelector("link[href='/css/bootstrap377.min.css']");
link.href = "/css/bootstrap400.min.css";
}
I tried to use jQuery so I can make the cursor a pointer but it doesn't work. Basically jQuery doesn't work and I don't know what to do because I really tried everything and checked twice.
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="ShowMeHowMainPageCSS.css"/>
</head>
<body>
<div class = "Parts" id = "part1">News Feed</div>
<div class = "Parts" id = "part2">Blog</div>
<div class = "Parts" id = "part3">Video</div>
<div class = "Parts" id = "part4">My Profile</div>
<div id = "menu">
<div id = "newsFeedMenu" class = "circle"></div>
<div id = "BlogMenu" class = "circle"></div>
<div id = "videoToturialsMenu" class = "circle"></div>
<div id = "MyProfileMenu" class = "circle"></div>
</div>
<script>
$(document).ready(function(){
$('.circle').hover(function(){
$(this).css('cursor','pointer');
$('#menu').css('opacity','1');
});
});
</script>
<script type ="text/javascript" src = "jQueryF.js"></script>
<script type ="text/javascript" src = "showMeHowJQUERY.js"></script>
</body>
</html>
you need to load the javascript file first before you define anything using them
put this as the top of your code inside the head tag
<script type ="text/javascript" src = "jQueryF.js"></script>
<script type ="text/javascript" src = "showMeHowJQUERY.js"></script>
If I wrote the script code in my html file, the animation works. But if the animation code is in a js file, it just didn't work.
here is my animation code
$(document).ready(function(){
$(window).on("load", function() {
var cow = document.getElementsByTagName("cow");
TweenMax.to(cow, 2, {top:"1200px",ease: Back.easeOut});
}
)})
and here is what in the html file.
<!DOCTYPE html>
<html>
<head>
<link rel = 'stylesheet' type = 'text/css' href = 'cow.css'/>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js">
</script>
<script type="text/javascript" src = 'showanimationcow.js'></script>
</head>
<body>
<img id = "cow" src ="http://cdn.snappages.com/adwr7m/theme/338649/images/
13179326871659847108SimpleCowArt.svg.hi_1393086508.png">
</body>
I will very much appreciate your help!
You have to use document.getElementById("cow")
Also, it's not necessary to call $(document).ready and $(window).on("load",function() { the same time.