I'm a relative beginner so apologies if this is a dumb question. I have no idea if I'm using the wrong path while trying to link my JS to HTML. I've tried absolute paths, adding the files to a JS folder in the root folder. I can't even get jQuery to link. Here's a snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Guessing Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap-theme.css">
<!-- Bootstrap and CSS here-->
</head>
<body>
<div id='app' class='center' class='container'>
<div id='headers'>
<!-- Title and subtitles! -->
<h1 id='title'> Rav's Cheesy Guessing Game! </h1>
<h2 id='subtitle'> Guess A Number Between 1-100, You Won't </h2>
</div>
<div id='main'>
<div id='input-parent'>
<!-- Player's guess input, and submit button -->
<input id='player-input' class='center' placeholder="#" autofocus maxlength=2></input>
<button id='submit-button' type=submit>Go!</button>
</div>
<div id='guesses'>
<ul id='guess-list'>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
</ul>
<!-- unordered list of guesses -->
</div>
<div id="menu-btns">
<!-- reset and hint buttons -->
<button id='reset' class='btn btn-warning btn-sm'>Reset</button>
<button id='hint' class='btn btn-primary btn-sm'>Hint</button>
</div>
</div>
</div>
<div id='footer' class='center' class="container">
<div class="row">
<div class='col-md-4 col-sm-4'>
<img src='fa-logo#2x.png'>
</div>
<div class='col-md-4 col-sm-4'>
<h4>Project by Ravish Rawal</h4>
</div>
<div class='col-md-4 col-sm-4'>
<img src='grace_hopper_academy.png'>
</div>
</div>
</div>
<script type='text/javascript' src='js/jquery.min.js'></script>
<script type='text/javascript' src='js/GuessingGame.js'></script>
</body>
</html>
Here is all you need to know about relative file paths:
Starting with "/" returns to the root directory and starts there
Starting with "../" moves one directory backwards and starts there
Starting with "../../" moves two directories backwards and starts there (and so on...)
To move forward, just start with the first subdirectory and keep moving forward
Here is the reference
If your using IIS (a localhost), there could be any number of things wrong. For now, just check the paths. You can use literally copy the path of it in file explorer (if on windows).
For root you need to
Type this "/"
this will returns to the root directory and starts there
Related
I'm doing a project. At a certain point i want to have two buttons, one for changing to a lighter theme and another to change to a darker theme and apply the changes to the whole website and not just the page in question
This is the page where i have the functionality:
ConfLayout.cshtml:
<!DOCTYPE HTML>
<html>
<head>
<title>TekSell</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="~/Content/styles.css" rel="stylesheet" />
<link href="~/Content/styles-admin.css" rel="stylesheet" />
</head>
<body id="top">
<section id="banner">
<div class="inner">
Learn More
</div>
</section>
<!-- Main1 -->
<div id="main">
<p style="text-align:center">Serviços</p>
<div class="inner">
<!-- Services -->
<div class="thumbnails">
<div class="box">
<img src="~/Content/Images/gallery.jpg" />
<div class="inner">
<h7>Galeria</h7>
</div>
</div>
<div class="box">
<img src="~/Content/Images/location.jpg" />
<div class="inner">
<h7>Localização</h7>
</div>
</div>
</div>
</div>
</div>
<!-- Main2 -->
<div class="page">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3 class="section-title">Sobre Nós</h3>
<figure><img src="~/Content/Images/logo.jpg" /></figure>
<h4>Acerca de nós</h4>
<p>Somos uma empresa fictícia de venda de software informático</p>
</div>
<div class="col-md-4">
<h3 class="section-title">Âmbito</h3>
<h4>Projeto desenvolvido no âmbito da unidade curricular de Laboratório de Desenvolvimento de Software</h4>
</div>
<div class="col-md-4">
<h3 class="section-title">Configurar página</h3>
<h4>Administrador, altere aqui o layout da página</h4>
<div class="dropdown">
<button class="dropbtn">Layout Configuration</button>
<div class="dropdown-content">
Change to lighter theme
Change to darker theme
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<h7>TekSell</h7>
<p>Email: teksell#lds.pt</p>
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="~/Scripts/changeLayout.js"></script>
</body>
</html>
As you can see i've two css files created. The 'styles.css' is the lighter theme, and 'styles-admin.css' is the darker theme. The functionality is implemented at "div class="dropdown-content"
What happens is, as i have both css files linked, when i run it, by default, the view assumes the darker theme(styles-admin.css).
This is the javascript file i use to try the changes:
function changeCSS(cssFile, cssLinkIndex) {
var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);
var newlink = document.createElement("link");
newlink.setAttribute("rel", "stylesheet");
newlink.setAttribute("href", cssFile);
document.getElementsByTagName("head").item(cssLinkIndex).replaceChild(newlink, oldlink);
}
What is missing? Am i doing it the wrong way?
If you include two CSS files with the same selectors inside, the second file will always override the first.
Just use one <link> and change its href.
Also, why load jQuery and not use it?
<link href="~/Content/styles.css" rel="stylesheet" />
$("link").attr("href","~/Content/styles-admin.css");
Job done!
Use similar way. Preset the theme colours and change the root attribute like this
const colors =['#317EEB', '#6427BA'];
let index = 0;
function changeBackground(){
index = (index+1)%2;
document.documentElement.style.setProperty('--main-color', colors[index]);
}
:root {
--main-color: #317EEB;
}
.set-background{
background: var(--main-color);
width: 10em;
height: 10em;
}
button{
margin-top: 5px;
}
<div class="set-background">
</div>
<button onClick="changeBackground()">Change color</button>
Has anyone tried html jquery load file? How can I possibly use Jquery to control a class from a Html that's loaded from Jquery? A direct content of my header html will work if inserted into index.html. However I'm trying to use the Jquery include file as there will be a lot of pages so a separate file is much more feasible. The problem is when I target a certain class or id in js it won't do anything.
index.html
<!DOCTYPE html>
<html>
<body>
<div id="header"></div>
<div id="slides">
<ul class="slides-container">
<li>
<img src="img/site_images/bg_home01.jpg" alt="">
<div class="caption">
<div class="title_pre">Development</div>
<h1>The City Below<br>The life above</h1>
<p><a><i class="icon-play"></i>Play Video</a></p>
</div>
</li>
</ul>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/jquery.superslides.js" type="text/javascript" charset="utf-8"> </script>
<script src="js/app.js"></script>
<script>
$(function(){
$("#header").load("header.html");
});
</script>
</body>
</html>
header.html
<header>
Menu
<div class="navlogo">
<img src="http://placehold.it/150x40">
</div>
</header>
app.js
$(document).foundation();
$(".navlogo").fadeOut();
Managed to fix with a different approach.
index.html
<!DOCTYPE html>
<html>
<link rel="import" id="template-file" href="header.html">
<body>
<script>
var getImport = document.querySelector('#template-file');
var getContent = getImport.import.querySelector('#header');
document.body.appendChild(document.importNode(getContent, true));
</script>
<div id="slides">
<ul class="slides-container">
<li>
<img src="img/site_images/bg_home01.jpg" alt="">
<div class="caption">
<div class="title_pre">Development</div>
<h1>The City Below<br>The life above</h1>
<p><a><i class="icon-play"></i>Play Video</a></p>
</div>
</li>
</ul>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/app.js"></script>
</body>
</html>
header.html
<header id="header">
Menu
<div class="navlogo">
<img src="http://placehold.it/150x40">
</div>
</header>
app.js
$(document).foundation();
$(".navlogo").fadeOut();
*I updated the plunkr and the code to better represent my localhost version. The Angularjs version was not the problem despite fixing the previous plunkr. *
First, let me say I am really struggling with Angularjs but I'm determined to learn it. I'm a designer, not a brick-layer (forgive the Star Trek reference).
I'm building a prototype where clicking on a small thumbnail to the left loads a larger version to the right. I'm using ng-click on the image to pass the unique "current" ID. Clicking doesn't affect the large image ng-src. I tried various permutations and don't see what I could be doing wrong.
*New info: I am using ng-repeat to iterate through a list of images. I try to pass each image url through ng-click but that seems to be where it gets lost. *
http://plnkr.co/edit/vYiykI7dfMKd34ZmS13N?p=preview
The app/controller:
<script>
var app = angular.module('pageApp', []);
app.controller('imgCtrl', function($scope) {
$scope.current = '7078/7250439172_72562c8e45_k';
});
</script>
The html wth thumbnail and large image:
<div class="container">
<div class="row" ng-app="pageApp" ng-controller="imgCtrl">
<div class="col-xs-3">
<ul class="list-group sm-img">
<li class="list-group-item text-center" ng-repeat="n in ['7078/7250439172_72562c8e45_k', '7087/7250440014_a32980508e_k', '7225/7250440766_8db45aa277_h']">
<img class="img-responsive" src="https://farm8.staticflickr.com/{{n}}.jpg" ng-click="current='{{n}}'" /><span>{{current}}</span>
</li>
</ul>
</div>
<div class="col-xs-9">
<img class="img-responsive" ng-src="https://farm8.staticflickr.com/{{ current }}.jpg" />
</div>
</div>
</div>
Try to create function in controller an execute it from ng-click
$scope.changeImg = function (c) {
$scope.current=c;
}
Your problem quite funny: you are loading Angular2 version however using Angular1.x syntax and code. Load correct library version, for example 1.4.8, and everything will start working properly:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
Demo: http://plnkr.co/edit/0efkCT9wwEaWfK0nR6su?p=info
It is working now. http://plnkr.co/edit/nmqDqcmtyTq479wZWsuR?p=preview
you are using angular 2 which has much more different than angular 1 (1.4)
<!DOCTYPE html>
<html ng-app="pageApp">
<head>
<link data-require="bootstrap#3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link data-require="bootstrap#3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
<link data-require="bootstrap#3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script data-require="bootstrap#3.3.5" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.4.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script>
var app = angular.module('pageApp', []);
app.controller('imgCtrl', function($scope) {
$scope.current = '7078/7250439172_72562c8e45_k';
});
</script>
</head>
<body>
<div class="container">
<div class="row" ng-controller="imgCtrl">
<div class="col-xs-3">
<img class="img-responsive" src="https://farm8.staticflickr.com/7078/7250439172_72562c8e45_k.jpg" ng-click="current='7078/7250439172_72562c8e45_k'" />
<img class="img-responsive" src="https://farm8.staticflickr.com/7087/7250440014_a32980508e_k.jpg" ng-click="current='7087/7250440014_a32980508e_k'" />
<img class="img-responsive" src="https://farm8.staticflickr.com/7225/7250440766_8db45aa277_h.jpg" ng-click="current='7225/7250440766_8db45aa277_h'"/>
</div>
<div class="col-xs-9">
<img class="img-responsive" ng-src="https://farm8.staticflickr.com/{{ current }}.jpg" />
</div>
</div>
</div>
</body>
</html>
i'm doing some tests, to do that i took a template on the kendo ui' page.
i clean it a bit to get what i want and right now, i have two div header in my html page.
i remove one at the load of the page and when i click on a button, i just want to remove the current header et set another one instead.
i've tried plenty of things but nothing seems to work correctly using jquery
here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/index.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<!--
Contenu des pages chargées par le paneau left
-->
<body>
<div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="Inbox"
<p>recherche </p>
</div>
<div data-role="view" id="drawer-starred" data-layout="drawer-layout" data-title="Starred Items">
<p>recherche </p>
</div>
<div data-role="view" id="drawer-drafts" data-layout="drawer-layout" data-title="Drafts">
<p>recherche </p>
</div>
<div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['/', 'drawer-home', 'drawer-starred', 'drawer-drafts']">
<ul data-role="listview" data-type="group"
<li>Menu
<ul>
<li>m1</li>
<li>m2</li>
<li>m3</li>
</ul>
</li>
</ul>
</div>
<div class="Head" data-role="layout" data-id="drawer-layout">
<header data-role="header">
<div class="" data-role="navbar">
<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
<span id="compagnyName">Demo</span>
<a data-role="button" onClick="changeHead()" data-icon="drawer-button" data-align="right"></a>
</div>
</header>
</div>
<div class="HeadSearching" data-role="layout" data-id="drawer-layout">
<header data-role="header">
<div data-role="navbar">
<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
<input type="text" id="city" name="city" class="k-textbox" placeholder="Ville" data-align="center" />
<select name="country" id="country" data-align="right">
<option>France</option>
<option>Angleterre</option>
<option>Luxembourg</option>
<option>Espagne</option>
</select>
</div>
</header>
</div>
<script>
var app = new kendo.mobile.Application(document.body);
$('.HeadSearching').remove();
</script>
<script>
function changeHead()
{
alert('header replace');
$('.head').replaceWith('.HeadSearching');
}
</script>
</body>
</html>
if someone could help me doing this correctly ..
thanks by advance ;)
Function replaceWith(newContent) as argument use HTML string. replaceWith
You can try something like:
$('.head').replaceWith($('.HeadSearching'));
For this situation maybe is better to use show/hide different div.
This works for me without the '.'
$('Head').replaceWith("HeadSearching");
For class selectors, you need to respect case. You're trying to select the element with $('.head'), but the class name is Head.
I'd suggest you always use lower-case ids and classes for simplicity.
In your case,
$('.Head').replaceWith($('.HeadSearching'));
should work, however you're removing the
element you're trying to replace $('.Head') with:
var app = new kendo.mobile.Application(document.body);
$('.HeadSearching').remove();
So if you want to replace the .Head element with the .HeadSearching element, you need to remove the second line that removes all .HeadSearching elements.
If you want to hide .HeadSearching initially, then you should use $(".HeadSearching").hide() instead, and when you want to replace it, you could simply do
$(".Head").hide()
$(".HeadSearching").show()
and vice versa.
I'm quite stuck and I don't know where I'm going wrong. I'm using the Inspiritas Bootstrap theme, and I wanted to use it in an Ember.js app.
I've been trying to read up, I can't seem to figure out what's going wrong - debugging didn't really help :(
My files are as follows:
app.js
app = Ember.Application.create();
app.IndexController = Ember.Controller.extend({
name : "Hassan Khan"
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>app</title>
<link href="inspiritas.css" rel="stylesheet">
</head>
<body>
<script src='../components/jquery/jquery.js'></script>
<script src="../js/jquery.tablesorter.js"></script>
<script src="../components/moment/moment.js"></script>
<script src="../components/highcharts.com/js/highcharts.src.js"></script>
<script src="../components/handlebars/handlebars.js"></script>
<script src="../components/bootstrap/js/bootstrap-dropdown.js"></script>
<script src="../components/bootstrap/js/bootstrap-collapse.js"></script>
<script src="../components/bootstrap/js/bootstrap-typeahead.js"></script>
<script src="../components/ember/ember.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Now I'm not quite sure where the application bit should go, but here it is:
application.html
<div class="navbar navbar-static-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">app</a>
<span class="tagline">Blah</span>
<div class="nav-collapse collapse" id="main-menu">
<div class="auth pull-right">
<img class="avatar" src="images/img.png">
<span class="name">{{ name }}</span><br/>
<span class="links">
Settings
Logout
</span>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row-fluid">
<div class="span9" id="content-wrapper">
<div id="content">
{{ outlet }}
</div>
</div>
</div>
</div>
application.html needs to be compiled by Ember.Handlebars. If you put its content between <script type="text/x-handlebars"> and </script> and place in the head or the body of your page, it will be automagically compiled and rendered for you.
It is also good practice to name your application variable App.
Your name should by moved to an App.ApplicationController if you want it to be rendered.
http://emberjs.com/guides would be a good starting point for creating an Ember Application. The new video from Tom Dale will definitely help you.
http://jsbin.com/aqokix/1