So, this is the weirdest thing ever. I was working on a project on codepen(of course in codepen is a lot easier).
How do you migrate from codepen? Well, you pretty much just add the basic html tags and links so you can communicate between the css and js.
But although I'm doing all of that correctly(also adding the required libraries), my code does not work correctly.
What my code should be doing:
- Allow the user to drag the windows
But it's not!
Even more, all of the Jquery and Jquery UI functions are not working correctly. When I looked at the console, I found the following error "ReferenceError: $ is not defined".
Alright, now the code I'm using is here: http://codepen.io/julian-a-avar/pen/xbaRJz
And as expected everything is the same but the HTML file:
<!doctype html>
<html>
<head>
<!-- INFO -->
<meta charset="UTF-8">
<meta name="application-name" content="Orion OS">
<meta name="author" content="Julian Avar Campopiano">
<meta name="description" content="">
<meta name="keywords" content="">
<!-- CSS -->
<link rel="stylesheet" href="main.css" type="text/css">
<!-- JS -->
<script src="script.js"></script>
<!-- Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div id="taskbar">
<div id="start_menu"></div>
<div id="menu">
<div class="app app1">W1</div>
<div class="app app2">W2</div>
</div>
</div>
<div class="window w1">
<div class="head">
<div class="title">Window 1</div>
<div class="buttons">
<div class="close"></div>
<div class="maximize"></div>
<div class="minimize"></div>
</div>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
</p>
</div>
</div>
<div class="window w2">
<div class="head">
<div class="title">Window 2</div>
<div class="buttons">
<div class="close"></div>
<div class="maximize"></div>
<div class="minimize"></div>
</div>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
</p>
</div>
</div>
</body>
</html>
Yes, the file name are correct, and I'm using C9.io
Please help out, maybe I'm missing something.
ReferenceError: $ is not defined
I figured that it happened in your script.js where you implement the drag and drop functions.
So fixing the order of the scripts might fix the issue.
<head>
<!-- INFO -->
<meta charset="UTF-8">
<meta name="application-name" content="Orion OS">
<meta name="author" content="Julian Avar Campopiano">
<meta name="description" content="">
<meta name="keywords" content="">
<!-- CSS -->
<link rel="stylesheet" href="main.css" type="text/css">
<!-- Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<!-- JS -->
<script src="script.js"></script>
</head>
You included your script before jQuery, so $ doesn't exist.
Order matters.
You should add your script after you have loaded the jquery libraries.
It is also good practice to load scripts at the end of your file, just before </body>.
<!doctype html>
<html>
<head>
<!-- INFO -->
<meta charset="UTF-8">
<meta name="application-name" content="Orion OS">
<meta name="author" content="Julian Avar Campopiano">
<meta name="description" content="">
<meta name="keywords" content="">
<!-- CSS -->
<link rel="stylesheet" href="main.css" type="text/css">
<!-- JS -->
<script src="script.js"></script>
<!-- Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div id="taskbar">
<div id="start_menu"></div>
<div id="menu">
<div class="app app1">W1</div>
<div class="app app2">W2</div>
</div>
</div>
<div class="window w1">
<div class="head">
<div class="title">Window 1</div>
<div class="buttons">
<div class="close"></div>
<div class="maximize"></div>
<div class="minimize"></div>
</div>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
</p>
</div>
</div>
<div class="window w2">
<div class="head">
<div class="title">Window 2</div>
<div class="buttons">
<div class="close"></div>
<div class="maximize"></div>
<div class="minimize"></div>
</div>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
</p>
</div>
</div>
<!-- Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<!-- JS -->
<script src="script.js"></script>
</body>
</html>
Related
On my main page, I have an emoji and it works fine. But I have the exact same code on my seond one and it does not work
I have tried looking for an answer but no else seems to have this problem
This bit is my main page that the code works on:
<head>
<meta charset='utf-8'>
</head>
<link rel="icon"
href="https://drive.google.com/uc?id=1G624t-8tJG_l29sdQ4COazA_c69aBB3Q&authuser=0">
<title>Game 👠Reveiw</title>
<link rel="stylesheet" href="styles.css">
<div class="topnav">
<a class="active" href="#home">Home</a>
Portal 2
CS:GO
Minecraft
</div>
<h1>Game 👠Reveiw </h1>
<h4>Portal 2 |
CS:GO |
Minecraft</h4>
<br>
<br>
<div class="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium quam
libero. Etiam fringilla auctor accumsan. Aenean tellus ex,<br>
convallis non enim at, pharetra accumsan ligula.
mi vel est bibendum rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Interdum et malesuada fames ac ante ipsum primis in faucibus.<br>
Sed ullamcorper feugiat quam, ac mattis quam finibus eu. Fusce eget justo a odio
ultrices efficitur. Donec elementum purus sed iaculis rutrum.<br>
Praesent ornare laoreet faucibus. Suspendisse consequat, nisi eu convallis vestibulum,<br>
nibh est imperdiet nulla, ut suscipit dolor ex scelerisque neque. Morbi sed mi
cursus, mattis velit a, laoreet velit. Donec nulla felis, scelerisque at sem
</div>
<footer>Game 👠Reveiw</footer>
This is my other page(connected to it) and the footer code doesn't work:
<head>
<meta charset='utf-8'>
</head>
<title>Portal 2</title>
<link rel="stylesheet" href="styles_portal_2.css">
<link rel="icon"
href="https://drive.google.com/uc?id=1Pp9iytPYBcUg7fOIsH6QuiyM7JeL9SKK&authuser=0">
<div class="topnav">
<a class="active" href="#home">Home</a>
Portal 2
CS:GO
Minecraft
</div>
<h1>Portal 2:</h1>
<h4>Home</h4><br>
<div class="center">
Portal 2 is a game for those lonely friday nights where you need that comfort of
Wheatley<br>
and the engaging aspect of the game.
while being relaxing and funny at times. With my times playing Portal 2, I got
sucked into a<br>
world where there is no competition and the only skill you need is problem
solving. In this<br>
game you are a test subject with a ‘Portal Gun’ that creates portals to complete
challenges.<br>
The challenges get harder and harder as you progress.<br>
Overall this game is amazing and would highly recommend it.<br>
<img width="400"
src="https://drive.google.com/uc?id=13djQKInGDpkkmiUEj8PwM-h-dkWsOHDt"title="nice"><br>
</div>
<footer>Game 👠Reveiw</footer>
Expected output to be an emoji but got some weird code
According to this well written article (https://www.kirupa.com/html5/emoji.htm) , there are two ways you can insert an emoji, by copying and pasting the emoji itself into your code or by grabbing the codepoints (https://emojipedia.org) for it and pasting that in your html.
Try using the emoji codepoints. If you load the below files in your browser, you can see that the emoji appears consistently in the browser on both pages.
page1.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<link rel="icon"
href="https://drive.google.com/uc?id=1G624t-8tJG_l29sdQ4COazA_c69aBB3Q&authuser=0">
<title>Game 🍔 Reveiw</title>
<link rel="stylesheet" href="styles.css">
<div class="topnav">
<a class="active" href="#home">Home</a>
Portal 2
CS:GO
Minecraft
</div>
<h1>Game 🍔 Reveiw </h1>
<h4>Portal 2 |
CS:GO |
Minecraft</h4>
<br>
<br>
<div class="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium quam
libero. Etiam fringilla auctor accumsan. Aenean tellus ex,<br>
convallis non enim at, pharetra accumsan ligula.
mi vel est bibendum rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Interdum et malesuada fames ac ante ipsum primis in faucibus.<br>
Sed ullamcorper feugiat quam, ac mattis quam finibus eu. Fusce eget justo a odio
ultrices efficitur. Donec elementum purus sed iaculis rutrum.<br>
Praesent ornare laoreet faucibus. Suspendisse consequat, nisi eu convallis vestibulum,<br>
nibh est imperdiet nulla, ut suscipit dolor ex scelerisque neque. Morbi sed mi
cursus, mattis velit a, laoreet velit. Donec nulla felis, scelerisque at sem
</div>
</body>
<footer>Game 🍔 Reveiw</footer>
</html>
page2.html
<html>
<head>
<meta charset="utf-8">
</head>
<title>Portal 2</title>
<body>
<link rel="stylesheet" href="styles_portal_2.css">
<link rel="icon"
href="https://drive.google.com/uc?id=1Pp9iytPYBcUg7fOIsH6QuiyM7JeL9SKK&authuser=0">
<div class="topnav">
<a class="active" href="#home">Home</a>
Portal 2
CS:GO
Minecraft
</div>
<h1>Portal 2:</h1>
<h4>Home</h4><br>
<div class="center">
Portal 2 is a game for those lonely friday nights where you need that comfort of
Wheatley<br>
and the engaging aspect of the game.
while being relaxing and funny at times. With my times playing Portal 2, I got
sucked into a<br>
world where there is no competition and the only skill you need is problem
solving. In this<br>
game you are a test subject with a ‘Portal Gun’ that creates portals to complete
challenges.<br>
The challenges get harder and harder as you progress.<br>
Overall this game is amazing and would highly recommend it.<br>
<img width="400"
src="https://drive.google.com/uc?id=13djQKInGDpkkmiUEj8PwM-h-dkWsOHDt"title="nice"><br>
</div>
</body>
<footer>Game 🍔 Reveiw</footer>
</html>
I am developing a website where I create different graphics with D3.js
I have a main page called "index.html" where I have a piece of text for the introduction. I have a second page called "GenrePie.html" which has a pie chart.
I want to put the "GenrePie.html" page in my "index.html" page.
On several forums I found a way to do it but it doesn't work for me :
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function(){
$("#includedPieContent").load("GenrePie.html");
});
</script>
this is my index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Maxes</title>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 id="title">Forever</h1>
<p id="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id mi vitae felis faucibus finibus eu nec arcu. Curabitur quis ultricies magna. Cras rutrum metus est, id hendrerit mauris mattis a. Etiam suscipit sodales urna eget fringilla. Donec diam lorem, laoreet commodo ligula nec, mollis mattis mi. Mauris luctus ut nisi ac viverra. Integer dictum eu mi a aliquet. </p>
</div>
</div>
<div class="principal">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id mi vitae felis faucibus finibus eu nec arcu. Curabitur quis ultricies magna. Cras rutrum metus est, id hendrerit mauris mattis a. Etiam suscipit sodales urna eget fringilla. Donec diam lorem, laoreet commodo ligula nec, mollis mattis mi. Mauris luctus ut nisi ac viverra. Integer dictum eu mi a aliquet.
</p>
</div>
</body>
</html>
I would like to put my pie chart after the second paragraph
Thank you in advance
You can use embed or iframe whichever suits you,
I will recommend embed as its looks clean.
Quick Demo : https://jsfiddle.net/vikas_saini/kupb0Lh9/5/
<div>
<h1>SOME TEXT</h1>
<embed src="https://example.com/" style="width:500px; height: 300px;">
<iframe src="https://example.com/">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
Your Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Maxes</title>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 id="title">Forever</h1>
<p id="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id mi vitae felis faucibus finibus eu nec arcu. Curabitur quis ultricies magna. Cras rutrum metus est, id hendrerit mauris mattis a. Etiam suscipit sodales urna eget fringilla. Donec diam lorem, laoreet commodo ligula nec, mollis mattis mi. Mauris luctus ut nisi ac viverra. Integer dictum eu mi a aliquet. </p>
</div>
</div>
<div class="principal">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id mi vitae felis faucibus finibus eu nec arcu. Curabitur quis ultricies magna. Cras rutrum metus est, id hendrerit mauris mattis a. Etiam suscipit sodales urna eget fringilla. Donec diam lorem, laoreet commodo ligula nec, mollis mattis mi. Mauris luctus ut nisi ac viverra. Integer dictum eu mi a aliquet.
</p>
<embed src="GenrePie.html" style="width:500px; height: 300px;">
</div>
</body>
</html>
Let me know if this did not work for you.
I am currently using some font-awesome to embed some image like resources into my site.
I would like to create a hyperlinked icon that can be clicked to prompt making a call. I currently have the icon floated top right but I am unable to make this usable. I only want the icon to be the hyperlink and do not want any text surrounding this. I want to use the font awesome icon instead of an image so that i can be scaled up if the user zooms in.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DB Plumbing | About</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://use.fontawesome.com/3a2264e344.js"></script>
<script src="html9shiv.js"></script>
<link rel="shortcut icon" type="image/png" href="wrench.png"/>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="desciption" content = "Darran Brady Plumbing">
<meta name="keywords" content = "Plumbing, Boilers, Showers, Central Heating, Kitchens, Bathrooms, Installations, Landlord Services, Horsham, West Sussex, Sussex,Barns Green, Billingshurst,Broadbridge Heath,Christ's Hospital, Clemsfold, Copsale,Colgate,Cowfold, Faygate, Handcross, Horsham, Itchingfield, Kingsfold,Lambs Farm,Lower Beeding,Mannings Heath, Maplehurst, Monks Gate, Nuthurst, Partridge Green, Pease Pottage, Roffey, Rowhook, Rusper, Rudgwick, Southwater, Slinfold, Warnham ">
<meta name = "author" content ="DB, Darran, Brady, Darran Brady">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">DB</span> Plumbing</h1>
</div>
<nav>
<ul class="topnav" id="myTopnav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Coverage</li>
<li>Contact</li>
<li class="icon">
☰
</nav>
</div>
</header>
<div class="container">
<div class="dark">
<div class="callus"><i class="fa fa-phone fa-3x" ></i> </div>
<h2>Our Story | Our Family</h2>
</div>
</div>
<section id="main">
<div class="container">
<article id="main-col">
<h1 class="page-title">Our Journey</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius auctor lacus nec feugiat. Phasellus sit amet ex ipsum. Praesent pharetra tincidunt tempor. Etiam velit eros, dapibus eget porta in, lacinia et magna. Nam eget eros non orci consectetur congue at ac augue. Proin eget arcu in enim feugiat ultricies. Curabitur maximus metus nec metus pretium viverra at et orci. Integer hendrerit ante ut placerat cursus.
</p>
<p class="dark">
Aliquam eget pharetra diam. Nulla placerat lorem at turpis tempor, vel ultrices dui tincidunt. Proin quis egestas lorem. Mauris vehicula lectus odio, sit amet dictum justo feugiat a. Praesent id dictum lacus. Sed ullamcorper id erat ut dictum. Fusce porttitor lorem sapien, in aliquet sapien convallis et. Donec nec mauris nulla. Curabitur cursus semper odio, et hendrerit ante. Nunc at cursus ante. Maecenas gravida ligula ut efficitur suscipit. Nulla id turpis varius, pretium nunc sed, fermentum sem. Sed lacinia nunc non interdum pellentesque.
</p>
</article>
<aside id="sidebar">
<div class="dark">
<h3>What We Do</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius auctor lacus nec feugiat. Phasellus sit amet ex ipsum. Praesent pharetra tincidunt tempor. Etiam velit eros, dapibus eget porta in, lacinia et magna</p>
</div>
</aside>
</div>
</section>
<footer>
<p>Darren Brady Plumbing Copyright © 2017</p>
</footer>
</body>
</html>
You need to wrap the <i> tag in a hyperlink <a> tag. All of the child elements of the <a> will take you to the hyperlink on click.
<div class="callus"><i class="fa fa-phone fa-3x" ></i></div>
Using Fontawsome to show the icone and using href="tel:911" to creat the phone call see code snippet
.callus {
position:fixed;
right:10px;
top:0px;
width:30px;
height:30px;
cursor:pointer;
}
.callus i {
color:green;
transition:all 1s ease-out
}
.callus:hover i {
transform:scale(1.3);
opacity:0.8;
transition:all 1s ease-out
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">DB</span> Plumbing</h1>
</div>
<nav>
<ul class="topnav" id="myTopnav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Coverage</li>
<li>Contact</li>
<li class="icon">
☰</li></ul>
</nav>
</div>
</header>
<div class="container">
<div class="dark">
<div class="callus"><i class="fa fa-phone fa-3x" ></i> </div>
<h2>Our Story | Our Family</h2>
</div>
</div>
<section id="main">
<div class="container">
<article id="main-col">
<h1 class="page-title">Our Journey</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius auctor lacus nec feugiat. Phasellus sit amet ex ipsum. Praesent pharetra tincidunt tempor. Etiam velit eros, dapibus eget porta in, lacinia et magna. Nam eget eros non orci consectetur congue at ac augue. Proin eget arcu in enim feugiat ultricies. Curabitur maximus metus nec metus pretium viverra at et orci. Integer hendrerit ante ut placerat cursus.
</p>
<p class="dark">
Aliquam eget pharetra diam. Nulla placerat lorem at turpis tempor, vel ultrices dui tincidunt. Proin quis egestas lorem. Mauris vehicula lectus odio, sit amet dictum justo feugiat a. Praesent id dictum lacus. Sed ullamcorper id erat ut dictum. Fusce porttitor lorem sapien, in aliquet sapien convallis et. Donec nec mauris nulla. Curabitur cursus semper odio, et hendrerit ante. Nunc at cursus ante. Maecenas gravida ligula ut efficitur suscipit. Nulla id turpis varius, pretium nunc sed, fermentum sem. Sed lacinia nunc non interdum pellentesque.
</p>
</article>
<aside id="sidebar">
<div class="dark">
<h3>What We Do</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius auctor lacus nec feugiat. Phasellus sit amet ex ipsum. Praesent pharetra tincidunt tempor. Etiam velit eros, dapibus eget porta in, lacinia et magna</p>
</div>
</aside>
</div>
</section>
My HTML file is working perfectly while I am using its path
file:///C:/xampp/htdocs/resume/dashboard/ads.html to run it, but while I'm running it via localhost
http://localhost/resume/dashboard/ads.html
from the same location, some of its features like:
(modal scrolling and js code) are not working.
Please help!
ads.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
<link rel="icon" type="image/png" sizes="96x96" href="../img/logo/kk.png">
<link rel="stylesheet" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Ads</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<!-- Animation library for notifications -->
<link href="assets/css/animate.min.css" rel="stylesheet"/>
<!-- Paper Dashboard core CSS -->
<link href="assets/css/paper-dashboard.css" rel="stylesheet"/>
<!-- CSS for Demo Purpose, don't include it in your project -->
<link href="assets/css/demo.css" rel="stylesheet" />
<!-- Fonts and icons -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'>
<link href="assets/css/themify-icons.css" rel="stylesheet">
</head>
<body>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-1">
Launch Modal 1
</button>
<div class="modal fade" id="modal-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>Modal 1</p>
Next >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- #modal 2 -->
<div class="modal fade" id="modal-2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
< Previous
<p>Modal .Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla..2</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
<script></script>
<!-- Core JS Files -->
<script src="assets/js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
<!-- Checkbox, Radio & Switch Plugins -->
<script src="assets/js/bootstrap-checkbox-radio.js"></script>
<!-- Charts Plugin -->
<script src="assets/js/chartist.min.js"></script>
<!-- Notifications Plugin -->
<script src="assets/js/bootstrap-notify.js"></script>
<!-- Google Maps Plugin -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<!-- Paper Dashboard Core javascript and methods for Demo purpose -->
<script src="assets/js/paper-dashboard.js"></script>
<!-- Paper Dashboard DEMO methods, don't include it in your project! -->
<script src="assets/js/demo.js"></script>
</html>
bootstrap.min.css
#modal-2 {
overflow-y:scroll;
}
In this section of code, the second modal is not scrolling.
When web sites work in one form and not another, it is typically due to one of two things:
A path or paths to various resources are fixed and not relative. For example: maybe your HTML looks for a Java Script file in a path called C:/xampp/htdocs/resume/dashboard/javascript/myjs.js instead of a relative path like ./javascript/myjs.js or maybe, you are already using relative paths but the starting directory of the relative path is off.
Usually you would notice this by images not showing or Java Script files not loading.
When you run as localhost, you are in the localhost domain and if you're making requests to other domains maybe they are being stopped for security reasons. You will generally notice these types of errors if you open the developer console in your browser you'd see errors saying that a resource was not allowed to load for security reasons or a cross-domain request was blocked.
If it is ONLY some Java Script not working, then I'd look at what attributes those javascript share... if they share a path take extra care to validate those, or if they require jQuery then you might need to load JQuery from the web instead of loading it locally.
To start your diagnostics, I'd recommend, opening the developer console in your browser (Chrome: right-click on a page and pick "Inspect" and look in the console tab) Take a look at the errors it shows. (usually a yellow triangle or red stop sign followed by a semi-descriptive error) It should tell you what is not loading and why and work backward from there.
If your paths are accurate and you're still stuck, you might look at the DocumentRoot setting in C:\xampp\apache\conf\httpd.conf and make sure that is set to the right starting directory, but check your errors first before altering configs. Changing configs should be a last resort... and if you do change them keep a backup of the original!
The most likely problem is that you are using incorrect paths. When you move from file based to http based the root / folder is your webroot, when using the file:// approach the root folder is the root of the drive the files are hosted on.
Sometimes, just the CSS files get cached, it's a very common problem for new web developers. So, to get rid of it just clear your cache from your web browser or just press cmd+shift+R. If you think that you have written right CSS but it's not visible in your web browser.
Hi I am trying to show my background image for the div called #container but it is not working why?
When I try to set the background color it works perfectly... I have tried to use
'/pics/coffey.jpg'
pics/coffey.jpg
"/pics/coffey.jpg"
"../pics/coffey.jpg"
But the picture is lying like this /css/pics/coffey.jpg
And my style file is in the css folder so it should work with /pics/coffey.jpg but it doesn't anyone help??
CSS:
#container {
width : 740px;
height:200px;
margin-left : auto;
margin-right : auto;
margin-top : 20px;
line-height: 1.7em;
background-repeat:no-repeat;
background-image: url("/pics/coffey.jpg");
}
#topbar {
height:20px;
width:740px;
float:right;
font-size:10px;
font-family:Verdana;
font-style:italic;
padding:0px;
background:#644C37;
}
HTML
<!doctype html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<title>Lorem Ipsum</title>
<link rel="stylesheet" href="css/basic.css" />
</head>
<body>
<div id="container">
<div id="topbar">
"Quisque sit amet justo"
</div>
<div id="menu">
Skip navigation
<ul>
<li class="active">hem</li>
<li>projekt</li>
<li>information</li>
<li>kontakt</li>
<li>hitta till oss</li>
</ul>
</div>
<div id="content">
<div id="maincontent">
<h1>Lorem Ipsum</h1>
<img src="pics/info.jpg" alt="Bubblande kaffe" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque tincidunt volutpat nunc. Curabitur id dolor sed massa volutpat mollis. Duis lorem diam, vestibulum pharetra, consequat ac, semper ac, nibh. Integer vel pede ac purus aliquet nonummy. In hendrerit. Praesent posuere, tellus eget nonummy pellentesque, tellus eros bibendum erat, non hendrerit erat eros sed lorem. Sed pretium quam sed lacus. Maecenas turpis tellus, feugiat a, ultrices a, porta ac, nisi. Donec convallis neque. Nam lobortis nibh sit amet metus tincidunt faucibus. Sed nec leo. Aliquam mattis.</p>
</div>
<div id="subcontent">
<h1>Quisque</h1>
<p>Quisque sit amet justo. Maecenas eu nibh ut est tincidunt congue. Vivamus quis diam. Curabitur lobortis pede eu turpis. Nulla adipiscing. Phasellus risus arcu, malesuada eu, molestie et, cursus vel, nisl. Aliquam at est. Nullam nec lacus. Nulla vitae justo. Donec volutpat elit ut orci.</p>
<h2>Read more:</h2>
<ul>
<li>http://www.saadsa.fds</li>
<li>http://www.llsd.seafa/seas</li>
<li>http://consecyt.hg</li>
</ul>
</div>
<div id="bottomcontent">© Linnéuniversitetet, Institutionen för datavetenskap</div>
</div>
</div>
</body>
</html>
/css/pics/coffey.jpg
is the correct path