This question already has answers here:
Floated elements of variable height push siblings down
(3 answers)
Closed 3 years ago.
I'm working on a website where i want to display the recommended videos from my youtube channel. I can load all the videos and display them but after 4-5 rows theres a problem. Some Videos are a few milimeters heigher and destroy the whole layout.
Those are the first two rows and how it should be
And then the 4 and the 5 row looks like this
The 3th video in the first row is few milimeteres heigher and this destroy the whole layout so how can i format all cells the same i ve tried adding display:table to the parent and display:table-cell to thec hild without success
Here is the HTML and the JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link href="../css/youtube.css" type ="text/css" rel="stylesheet">
<link href="../css/navigation.css" type ="text/css" rel="stylesheet">
</head>
<body>
<div id ="main">
<div class="menu">
<div class="hori-menu">
<ul>
<ul>
<li>Weiterschauen</li>
<li>Meine Serien</li>
<li>Demnächst</li>
<li>Vorschläge</li>
<li><a class="active" href="youtube.html">YouTube</a></li>
<li>Mitbewohner</li>
</ul>
</ul>
</div>
</div>
<main id="container">
<section id="video"></section>
<div id="videos"></div>
</main>
</body>
<script language="JavaScript">
var key = '...';
var videos = [];
var totalResults = 0;
$(document).ready(function(){
getMyChannel();
});
function shuffle() {
for (let i = videos.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[videos[i], videos[j]] = [videos[j], videos[i]];
}
}
function getMyChannel(){
var url = "https://www.googleapis.com/youtube/v3/activities";
var options = {
part: 'contentDetails',
channelId: 'UCAe66hs74KDbpvK2x3ZrTXA',
maxResults: 20,
key: key
}
loadUser();
function loadUser(){
$.getJSON(url, options, function(data){
loadUsersChannels(data);
});
}
function loadUsersChannels(data){
$.each(data.items, function (i, item) {
var id = item.contentDetails.subscription.resourceId.channelId;
getChannel(id);
});
}
}
function getChannel(id){
var url = "https://www.googleapis.com/youtube/v3/channels";
var options = {
part: 'snippet,contentDetails',
id: id,
maxResults: 20,
key: key
}
loadLists();
function loadLists(){
$.getJSON(url, options, function(data) {
loadPlaylists(data);
});
}
function loadPlaylists(data){
$.each(data.items, function (i, item) {
var id = item.contentDetails.relatedPlaylists.uploads;
getPlaylist(id);
});
}
}
function getPlaylist(playlistId){
var URL = 'https://www.googleapis.com/youtube/v3/playlistItems';
var options = {
part: 'snippet',
key: key,
maxResults: 20,
playlistId: playlistId
}
loadVids();
function loadVids() {
$.getJSON(URL, options, function (data) {
// var id = data.items[0].snippet.resourceId.videoId;
// mainVid(id);
resultsLoop(data);
});
}
function mainVid(id) {
$('#video').html(`
<iframe width="560" height="315" src="https://www.youtube.com/embed/${id}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
`);
}
function resultsLoop(data) {
totalResults = totalResults + data.pageInfo.resultsPerPage;
$.each(data.items, function (i, item) {
var thumb = item.snippet.thumbnails.medium.url;
var title = item.snippet.title;
var vid = item.snippet.resourceId.videoId;
$('#videos').append(`
<article class="item" data-key="${vid}">
<div class="details">
<img src="${thumb}" alt="" class="thumb">
<h4>${title}</h4>
</div>
</article>
`);
});
}
// CLICK EVENT
$('main').on('click', 'article', function () {
var id = $(this).attr('data-key');
mainVid(id);
});
}
</script>
</body>
</html>
And here is the css
#mixin font-base {
padding: 0;
margin: 0;
line-height: 1.3;
font-weight: 600;
}
h4 {
#include font-base;
}
p {
#include font-base;
color: grey;
font-size: 0.7rem;
}
.container {
width: 100%;
background-color: #fff;
margin: 0 auto;
display:table;
border-spacing: 10px;
}
section {
height:100%;
margin-top: 4%;
margin-bottom:2%;
text-align:center;
background-color:#eee;
}
iframe{
width:100%;
height:900px;
background-color:#65626b;
padding:8px 12px;
}
#videos{
overflow:hidden;
}
article {
margin:5px 5px;
width:24%;
float:left;
background-color:#eee;
border-radius:8px;
}
article div{
border: 1px solid black;
border-radius: 8px;
padding: 8px 12px;
}
article:hover{
background-color:#65626b;
color:white;
}
.thumb {
width: 100%;
border-radius:8px;
}
For more infos on code please ask. Thank you!
You can try using min-height or max-height CSS property on article divs.
Related
Google youtube API fails to login with bad request and invalid Key
I renewed my credentials at google console several times.
change API key Several time but problem is same.
The code I´m using:
var channelname = 'mipaltan';
$(document).ready(function () {
$.get("https://www.googleapis.com/youtube/v3/channels", {
part: 'contentDetails',
forUsername: 'mipaltan',
key: 'AIzaSyCT8kXaxJ2l29vYg4HBdYy36H-PhAH-Teg'
},
function (data) {
$.each(data.item, function (i, item) {
console.log(item);
pid = item.contentDetails.relatedPlaylists.uploads;
getVids(pid);
})
}
);
function getVids(pid) {
$.get("https://www.googleapis.com/youtube/v3/playlistItems", {
part: 'snippet',
maxResults: 10,
playListId: pid,
key: 'AIzaSyCT8kXaxJ2l29vYg4HBdYy36H-PhAH-Teg'
},
function (data) {
var output;
$.each(data.items, function (i, item) {
console.log(item);
vidsTitle = item.snippet.title;
output = '<li>"+ vidsTitle +"</li>';
// Append to results
$('#results').append(output);
})
}
);
}
});
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title> Get Video Title</title>
<style>
body {
background: #f4f4f4;
font-family: Arial,sans-serif;
font-size: 14px;
color: #666;
}
#container
{
width: 100%;
height: auto;
overflow:auto;
margin: auto;
padding:15px;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<h1> YouTube Video Title</h1>
<ul id="results"></ul>
</div>
</form>
</body>
</html>
Same API Key I'm using other page it's working fine.
Its items not item and playlistId not playListId
var channelname = 'mipaltan';
$(document).ready(function() {
$.get("https://www.googleapis.com/youtube/v3/channels", {
part: 'contentDetails',
forUsername: 'mipaltan',
key: 'AIzaSyCT8kXaxJ2l29vYg4HBdYy36H-PhAH-Teg'
},
function(data) {
$.each(data.items, function(i, item) {
pid = item.contentDetails.relatedPlaylists.uploads;
getVids(pid);
})
}
);
function getVids(pid) {
$.get("https://www.googleapis.com/youtube/v3/playlistItems", {
part: 'snippet',
maxResults: 10,
playlistId: pid,
key: 'AIzaSyCT8kXaxJ2l29vYg4HBdYy36H-PhAH-Teg'
},
function(data) {
$.each(data.items, function(i, item) {
vidsTitle = item.snippet.title;
output = '<li>'+ vidsTitle +'</li>';
// Append to results
$('#results').append(output);
})
}
);
}
});
body {
background: #f4f4f4;
font-family: Arial, sans-serif;
font-size: 14px;
color: #666;
}
#container {
width: 100%;
height: auto;
overflow: auto;
margin: auto;
padding: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
<div id="container">
<h1> YouTube Video Title</h1>
<ul id="results"></ul>
</div>
</form>
I made a little slider to loop 3 images, I want every image stop 3 seconds, then fadeOut and fadeIn the next one, but the problem is :
the first one can stay 3 seconds, but once it begins to loop, it won't stop 3 seconds again, the image change immediately, why it can't keep the 3 seconds to stay?
Here is the Demo
var i = 0;
var name = ['Cat', 'Dog', 'Duck'];
function next() {
if (i > 1) {
i = 0;
} else {
i++;
};
$('#loop').fadeOut(1000, function() {
$(this).css('background', 'url("' + i + '.png")').fadeIn(1000);
$('h1').html(name[i]);
});
};
setInterval(next, 3000);
#loop {
width: 300px;
height: 300px;
background: url('0.png');
}
h1 {
padding-top: 310px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loop">
<h1>Cat</h1>
</div>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Loop</title>
<style type="text/css">
#loop{
width: 300px;
height: 300px;
background: url('0.png');
}
h1{
padding-top: 310px;
text-align: center;
}
</style>
</head>
<body>
<div id="loop">
<h1>Cat</h1>
</div>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"
integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="
crossorigin="anonymous">
</script>
<script>
$(function (){
var i = 0;
var name = ['Cat', 'Dog', 'Duck'];
var timerId = setTimeout(next, 3000);
function next(){
if (i > 1) {
i = 0;
}else{
i++;
};
$('#loop').fadeOut(1000, function (){
$(this).css('background', 'url("'+ i +'.png")').fadeIn(1000);
$('h1').html(name[i]);
timerId = setTimeout(next, 3000);
});
};
});
</script>
</body>
</html>
You can use .queue(), .delay(), .promise(), recursion
$(function() {
var names = ['Cat', 'Dog', 'Duck'];
var images = ["http://placehold.it/300x300?text=Cat"
, "http://placehold.it/300x300?text=Dog"
, "http://placehold.it/300x300?text=Duck"]
function next() {
return $("#loop")
.queue("names", $.map(names, function(name, i) {
return function(next) {
$(this).css("background", "url(" + images[i] + ")")
.find("h1").html(name).end()
.fadeIn(1000, function() {
$(this).delay(3000)
.fadeOut(1000).promise().then(next)
})
}
}))
.dequeue("names").promise("names").then(next)
};
next();
})
#loop {
width: 300px;
height: 300px;
background-repeat:no-repeat;
}
h1 {
padding-top: 310px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loop">
<h1>Cat</h1>
</div>
I am a newbie to angular JS and having problem in adding the spliced value back to the list.
How cam i do so or can i use any other Angular JS function in place of splice to do the need full.
Below is the code i have do.
{
<!DOCTYPE html>
<html>
<head>
<title>Drag Drop + Remove Element</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/2.3.1/spruce/bootstrap.min.css">
<style>
[ng-drag] {
width: 100px;
height: 100px;
background: red;
color: white;
text-align: center;
padding-top: 40px;
display: block;
}
[ng-drop] {
background: silver;
text-align: center;
display: block;
position: relative;
padding: 20px;
width: 140px;
height: 140px;
float: left;
}
.draglist {
display: inline-block;
margin: 0 auto;
}
[ng-drag].dragging {
opacity: 0.5;
}
[ng-drag].drag-over {
border: solid 1px red;
}
[ng-drop].drag-enter {
border: solid 5px red;
}
</style>
</head>
<body ng-app="ExampleApp">
<div class="row text-center">
<h1>Drag Drop + Remove Element</h1>
</div>
<div class="row text-center" ng-controller="MainCtrl">
<ul class="draglist">
<li ng-repeat="obj in draggableObjects | limitTo:quantity" ng-drop="true" ng-drop-success="onDropComplete($index, $data,$event)" >
<button type="button" class="close" ng-click="removeElement($index,draggableObjects.length)"><span aria-hidden="true" ng-mouseover>×</span></button>
<div ng-drag="true" ng-drag-data="obj" ng-class="obj.name">
{{obj.name}}
</div>
</li>
</ul>
</div>
<!--<script src="http://code.angularjs.org/1.3.15/angular.min.js"></script>-->
<script src="Angular.js"></script>
<script src="ngDraggable.js"></script>
<script>
angular.module('ExampleApp', ['ngDraggable']).
controller('MainCtrl', function ($scope, $window) {
$scope.draggableObjects = [
{name: 'one'},
{name: 'two'},
{name: 'three'},
{name: 'four'},
{name: 'five'},
{name: 'six'},
{name: 'seven'},
{name: 'eight'},
{name: 'nine'},
{name: 'ten'}
];
$scope.quantity = 3;
$scope.showDelete = false;
$scope.removeElement = function(index, objLength){
console.log("objLength::"+objLength);
$scope.showDelete = true;
if(objLength < 4){
console.log("In if");
// $window.location.reload();
// $scope.draggableObjects;
console.log($scope.draggableObjects);
$scope.draggableObjects = $scope.draggableObjects.concat($scope.draggableObjects);
// angular.forEach($scope.draggableObjects, function(objects) {
// $scope.draggableObjects.push(objects);
//// console.log($scope.draggableObjects);
// });
}
else{
$scope.draggableObjects.splice(index,1);
}
};
$scope.onDropComplete = function (index, obj, evt) {
var otherObj = $scope.draggableObjects[index];
var otherIndex = $scope.draggableObjects.indexOf(obj);
$scope.draggableObjects[index] = obj;
$scope.draggableObjects[otherIndex] = otherObj;
};
});
</script>
</body>
</html>
}
Now what i want to do is once the value get spliced from the $scope.draggableObjects i want to add the spliced data again at the end of the code so that a cycle is continued of all the values in scope.
Any help will be welcomed.
Thanks in advance.
just javascript
$scope.draggableObjects.push(obj) // obj prev removed
I use Javascript that will decorate an active link after it's been clicked. Question is, how can I load the page with one of the menu items already active?
Example: http://moschalkx.nl/
Javascript code:
function hlite_menu(obj) {
var lnk = document.getElementById('menu').getElementsByTagName('A');
for (var i in lnk) {
lnk[i].className = (lnk[i] === obj) ? 'menu_active' : 'menu_idle';
}
}
function set_menu() {
var lnk = document.getElementById('menu').getElementsByTagName('A');
for (var i in lnk) {
lnk[i].className = 'menu_idle';
lnk[i].onclick = function () {
hlite_menu(this);
}
}
if (lnk[i]) { /* ??? how do you know whether this is the link to activeate up front? */
hlist_menu(lnk[i]);
}
}
window.onload = set_menu;
CSS:
a.menu_idle {color:#333333; text-decoration:none;}
a.menu_active {color:#333333; text-decoration:underline;}
a:visited {color:#333333; text-decoration:none;}
a:hover {color:#333333; text-decoration:underline;}
I need to put in the logic somewhere inside
if (lnk[i]) { /* ??? how do you know whether this is the link to activeate up front? */
hlist_menu(lnk[i]);
}
to let the script know which link will be active upfront. As i'm not familiar with coding, i have no clue how to do this!
Set the initially active link in your markup:
<a target="iframe1" class="menu_active" href="gallery/photo_menu.html">PHOTOGRAPHY</a>
Then in your set_menu function, set the iframe's src attribute to the href of that link:
for (i in lnk) {
if (lnk.hasOwnProperty(i)) {
//lnk[i].className = 'menu_idle'; // initial menu states are set in markup. This line is no longer necessary.
lnk[i].onclick = hlite_menu;
if (lnk[i].className === 'menu_active') {
iframe.src = lnk[i].href;
}
}
}
I would also strongly recommend re-writing your JavaScript to the following:
var hlite_menu = function hlite_menu() {
'use strict';
var lnk = document.getElementById('menu').getElementsByTagName('a'),
i = null;
//set all links to idle
for (i in lnk) {
if (lnk.hasOwnProperty(i)) {
lnk[i].className = 'menu_idle';
}
}
//set this link to active
this.className = 'menu_active';
},
set_menu = function set_menu() {
'use strict';
var lnk = document.getElementById('menu').getElementsByTagName('a'),
iframe = document.getElementById('iframe1'),
c = document.getElementById('copyright'),
i = null;
// set copyright
c.innerText = (new Date()).getFullYear();
// set onclicks and initial iframe src.
for (i in lnk) {
if (lnk.hasOwnProperty(i)) {
//lnk[i].className = 'menu_idle'; // initial menu states are set in markup. This line is no longer necessary.
lnk[i].onclick = hlite_menu;
if (lnk[i].className === 'menu_active') {
iframe.src = lnk[i].href;
}
}
}
};
window.onload = set_menu;
This avoids several long-term problems like readability/maintenance, variable hoisting, and the dreaded document.write (which you are using to set your copyright date). You'll also want to change the copyright section to this:
<div id="footer">
ALL IMAGES © <span id="copyright"></span>
</div>
You can also write your navigation like this (avoiding tables for layout):
<div id="header">
<div class="logo">
<span style="">MO SCHALKX</span>
</div>
<div id="menu">
<a target="iframe1" class="menu_active" href="gallery/photo_menu.html">PHOTOGRAPHY</a>
<a target="iframe1" class="menu_idle" href="gallery/film_menu.html">FILM</a>
<a target="iframe1" class="menu_idle" href="about.html">ABOUT</a>
<a target="iframe1" class="menu_idle" href="http://reflecture.tumblr.com">BLOG</a>
</div>
</div>
and add this to your CSS:
#header {
float: left;
display: inline-block;
margin: 1em;
text-align: center;
}
.logo, #menu {
background-color: #FFF;
}
.logo {
font-size: 40px;
font-weight: 500;
font-style: inherit;
}
#menu {
margin-top: 5px;
}
#menu > a {
padding-left: 0.25em;
}
#menu > a {
border-left: 1px solid #000;
}
#menu > a:first-child {
border-left: none;
}
which should make it look the same. You can also combine your CSS rules for menu_active and a:hover (likewise with menu_idle and a:visited) like so:
a.menu_idle, a:visited {
color: #333333;
text-decoration: none;
}
a.menu_active, a:hover {
color: #333333;
text-decoration: underline;
}
Finally, you've wrapped your iframe in a <form id="form1" runat="server"> element. You can remove this entirely. It won't affect your layout and you don't actually have a form with any input elements so it's unnecessary. Also, the runat="server" attribute doesn't do anything unless you're running this on ASP.Net (and you obviously are not) so you may want to keep that in mind.
Altogether, you should be able to change the entire document source to the following with no real visual changes (and I think you'll find that it's a lot cleaner to look at in the source):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Mo Schalkx Photography</title>
<script type="text/javascript">
var hlite_menu = function hlite_menu() {
'use strict';
var lnk = document.getElementById('menu').getElementsByTagName('a'),
i = null;
//set all links to idle
for (i in lnk) {
if (lnk.hasOwnProperty(i)) {
lnk[i].className = 'menu_idle';
}
}
//set this link to active
this.className = 'menu_active';
},
set_menu = function set_menu() {
'use strict';
var lnk = document.getElementById('menu').getElementsByTagName('a'),
iframe = document.getElementById('iframe1'),
c = document.getElementById('copyright'),
i = null;
// set copyright
c.innerText = (new Date()).getFullYear();
// set onclicks and initial iframe src.
for (i in lnk) {
if (lnk.hasOwnProperty(i)) {
//lnk[i].className = 'menu_idle'; // initial menu states are set in markup. This line is no longer necessary.
lnk[i].onclick = hlite_menu;
if (lnk[i].className === 'menu_active') {
iframe.src = lnk[i].href;
}
}
}
};
window.onload = set_menu;
</script>
<style type="text/css">
body {
margin: 0;
overflow: hidden;
}
#header {
float: left;
display: inline-block;
margin: 1em;
text-align: center;
}
#iframe1 {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: -1;
}
#footer {
font-size: 9px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 20px;
visibility: visible;
display: block;
color: #000;
opacity: 0.4;
filter: alpha(opacity=40);
text-shadow: 0px 1px 0px rgba(255,255,255,.5); /* 50% white from bottom */;
}
.logo, #menu {
background-color: #FFF;
}
.logo {
font-size: 40px;
font-weight: 500;
font-style: inherit;
}
#menu {
margin-top: 5px;
}
#menu > a {
padding-left: 0.25em;
}
#menu > a {
border-left: 1px solid #000;
}
#menu > a:first-child {
border-left: none;
}
a.menu_idle, a:visited {
color: #333333;
text-decoration: none;
}
a.menu_active, a:hover {
color: #333333;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="header">
<div class="logo">
<span style="">MO SCHALKX</span>
</div>
<div id="menu">
<a target="iframe1" class="menu_active" href="gallery/photo_menu.html">PHOTOGRAPHY</a>
<a target="iframe1" class="menu_idle" href="gallery/film_menu.html">FILM</a>
<a target="iframe1" class="menu_idle" href="about.html">ABOUT</a>
<a target="iframe1" class="menu_idle" href="http://reflecture.tumblr.com">BLOG</a>
</div>
</div>
<div id="footer">
ALL IMAGES © <span id="copyright"></span>
</div>
<iframe id="iframe1" frameborder="0"></iframe>
</body>
</html>
UDPATE
To apply this on http://moschalkx.nl/gallery/film_menu.html, simply include the same JavaScript and comment out the lines that involve setting the copyright in set_menu and update the id of the iframe:
var hlite_menu = function hlite_menu() {
'use strict';
var lnk = document.getElementById('menu').getElementsByTagName('a'),
i = null;
//set all links to idle
for (i in lnk) {
if (lnk.hasOwnProperty(i)) {
lnk[i].className = 'menu_idle';
}
}
//set this link to active
this.className = 'menu_active';
},
set_menu = function set_menu() {
'use strict';
var lnk = document.getElementById('menu').getElementsByTagName('a'),
iframe = document.getElementById('gallery'),
//c = document.getElementById('copyright'),
i = null;
// set copyright
//c.innerText = (new Date()).getFullYear();
// set onclicks and initial iframe src.
for (i in lnk) {
if (lnk.hasOwnProperty(i)) {
//lnk[i].className = 'menu_idle'; // initial menu states are set in markup. This line is no longer necessary.
lnk[i].onclick = hlite_menu;
if (lnk[i].className === 'menu_active') {
iframe.src = lnk[i].href;
}
}
}
};
window.onload = set_menu;
Also, since you're including jQuery on this page, you could write that in jQuery as:
$(document).ready(function () {
$('#menu a').click(function (e) {
var self = $(this),
href = self.attr('href');
$('#menu a').not(self).removeClass('menu_active').addClass('menu_idle');
self.removeClass('menu_idle').addClass('menu_active');
$('#gallery').attr('src', href);
});
});
On another question I asked if I could set the font-weight to bold on a text element when that text is selected. This has been completed much to the avail of #Eric ! But currently, when you click a text, you can happily click another one and both of the text will be bold.
How can I prevent more than one text element from being bold?
Here is my code on JSFiddle: http://jsfiddle.net/6XMzf/ or below:
CSS:
html,body {
margin: 0;
padding: 0
}
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
color: white;
}
.stretch {
width:100%;
height:100%;
}
.navigationPlaceholder {
width:100px;
height: 400px;
left: 100px;
top: 100px;
position: absolute;
}
#navigation {
background-color: #000000;
}
#navigationText ul {
font-family: "Yanone Kaffeesatz";
font-weight: 100;
text-align: left;
font-size: 25px;
color: #b2b2b2;
left: 25px;
top: 50px;
position: absolute;
line-height: 40px;
list-style-type: none;
}
.noSelect {
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit browsers */
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Max Kramer | iOS Developer</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" />
</head>
<body>
<div id="background" />
<div id="navigation" class="navigationPlaceholder">
<div id="navigationText">
<ul>
<li>iOS</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
var nav = document.getElementById('navigationText');
var navItems = nav.getElementsByTagName('li');
for (var i = 0; i < navItems.length; i++) {
navItems[i].addEventListener('click', function() {
this.style.fontWeight = '400';
}, false);
}
</script>
</body>
</html>
If you don't have a selector engine handy like jQuery and really have to do this in plain Javascript, I would do it like this:
function addClass(elem, className) {
if (elem.className.indexOf(className) == -1) {
elem.className += " " + className;
}
}
function removeClass(elem, className) {
elem.className = elem.className.replace(new RegExp("\\s*" + className), "");
}
var lastSelected = null;
function initNavClickHandler() {
var nav = document.getElementById('navigationText');
var navItems = nav.getElementsByTagName('li');
for (var i = 0; i < navItems.length; i++) {
navItems[i].addEventListener('click', function() {
addClass(this, "selected");
if (lastSelected) {
removeClass(lastSelected, "selected");
}
lastSelected = this;
}, false);
}
}
initNavClickHandler();
Then, add a CSS rule that controls the selected look:
.selected {font-weight: 800;}
This is a lot more flexible for styling because you can add as many CSS rules as you want to the .selected class to change/modify it without ever touching your code.
You can see it work here: http://jsfiddle.net/jfriend00/rrxaQ/
If you can use things like jQuery then this is a much simpler problem. Let me show you the jQuery solution for both highlighting and unhighlighting.
$("#navigationText li").click( function() {
$("#navigationText li").css("fontWeight", "100");
$(this).css("fontWeight", "400");
});
Now you can achieve the same thing yourself without jQuery. You either need to create a global that holds the currently bolded item and remove the fontWeight or just remove the fontWeight from all items (brute force).
//untested with global to store currently selected
var nav = document.getElementById('navigationText');
var activeItem = null;
var navItems = nav.getElementsByTagName('li');
for (var i = 0; i < navItems.length; i++) {
navItems[i].addEventListener('click', function() {
if (activeItem) {activeItem.style.fontWeight = '100'; }
this.style.fontWeight = '400';
activeItem = this;
}, false);
}
//sorry I don't feel like writing a brute force one for you!