Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am learning html, css, javascript for creating a simple website for learning purpose. I am able to display a video saved in my drive using video element in html page. I also want to display the title of the video, total length of the video, total views of the video in the same video. Please help me which part I need to concentrate more also where I can get information to learn these and able to display all the things I need in each video.
My html code:
* {
padding:0px;
margin:0px;
}
body{
margin: 0;
}
header {
background: green;
color: white;
padding: 8px 0px 6px 40px;
height: 50px;
}
header h1 {
display: inline;
font-family: 'Oswald',sans-serif;
font-weight: 400;
font-size: 32px;
float: left;
margin-top: 0px;
margin-right: 10px;
}
nav ul{
display: inline;
padding: 0px;
float: left;
}
nav ul li{
display: inline-block;
list-style-type:none;
color: white;
float: left;
margin-left: 15px;
}
nav ul li a{
color: white;
text-decoration: none;
}
#nav {
font-family: 'Montserrat', sans-serif;
}
.homered{
background-color: red;
padding: 30px 10px 25px 10px;
}
.divider{
background-color: red;
height: 5px;
}
.homeblack:hover{
background-color: blue;
padding: 30px 10px 25px 10px;
}
div{
width:250px;
height:666px;
background:#1A8DA9;
}
div a{
text-decoration:none;
color:white;
padding:20px;
padding-right:100px
}
div ul li{
list-style-type:none;
display:block;
padding :15px;
border-bottom:1px solid #236D7F;
}
div ul li :hover{
background:#4097AD;
transition:linear all 0.40s;
margin-left:10px;
}
div ul li a:hover{
color:black;
}
#navBar {
float: left;
}
<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>Videos</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="videos.css">
</head>
<body>
<header>
<nav>
<h1> Main logo </h1>
<ul id="nav">
<li><a class="homeblack" href="index.html">Home</a></li>
<li><a class="homered" href="videos.html">Videos</a></li>
</ul>
</nav>
</header>
<div class="divider"></div>
<div id="navBar">
<ul>
<li>education videos </li>
<li>film videos</li>
<li>other videos </li>
</ul>
</div>
<video title="abcd" controls width="250" height="160">
<source src="videoplayback.mp4" />
</video>
<video title="abcd" controls width="250" height="160">
<source src="videoplayback (1).mp4" />
</video>
<video title="abcd" controls width="250" height="160">
<source src="1 Ton.mp4" />
</video>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
You won't be able to keep track of views on the client-side (HTML, CSS, Javascript). Once a user leaves the page, that information is gone. You'll have to have some kind of back end to maintain that information (database, logging file, etc.)
As far as other metadata like the length of the video, that wouldn't be included in the native HTML5 tag. But you can just add that to the markup elsewhere.
Possible duplicate: How to display views on html5 video?
What you want:
...to display the title of the video, total length of the video, total views of the video...
display the title of the video
video length
total views of the video
1:
If by "title of video", you mean filename, try this:
Array.from(document.querySelectorAll("video")).forEach(video=>{
const title = (video.src || video.children[0].src).replace(/.*\//g, "").replace(/\.[a-zA-Z0-9_-]+/, "").replace(/-|_/g, " ");
video.insertAdjacentHTML("beforeBegin", title);
});
2:
Array.from(document.querySelectorAll("video")).forEach(video=>video.addEventListener('loadedmetadata', function() {
const duration = videoPlayer.duration;
video.insertAdjacentHTML("afterEnd", Math.floor(video.duration / (60 * 60)) + ":" + Math.floor(video.duration / 60) + ":" + video.duration % 60)
}));
3:
See this answer.
DEMO:
Array.from(document.querySelectorAll("video")).forEach(video=>{
const title = (video.src || video.children[0].src).replace(/.*\//g, "").replace(/\.[a-zA-Z0-9_-]+/, "").replace(/-|_/g, " ");
video.insertAdjacentHTML("beforeBegin", title);
});
Array.from(document.querySelectorAll("video")).forEach(video=>video.addEventListener('loadedmetadata', function() {
const duration = videoPlayer.duration;
video.insertAdjacentHTML("afterEnd", Math.floor(video.duration / (60 * 60)) + ":" + Math.floor(video.duration / 60) + ":" + video.duration % 60)
}));
* {
padding:0px;
margin:0px;
}
body{
margin: 0;
}
header {
background: green;
color: white;
padding: 8px 0px 6px 40px;
height: 50px;
}
header h1 {
display: inline;
font-family: 'Oswald',sans-serif;
font-weight: 400;
font-size: 32px;
float: left;
margin-top: 0px;
margin-right: 10px;
}
nav ul{
display: inline;
padding: 0px;
float: left;
}
nav ul li{
display: inline-block;
list-style-type:none;
color: white;
float: left;
margin-left: 15px;
}
nav ul li a{
color: white;
text-decoration: none;
}
#nav {
font-family: 'Montserrat', sans-serif;
}
.homered{
background-color: red;
padding: 30px 10px 25px 10px;
}
.divider{
background-color: red;
height: 5px;
}
.homeblack:hover{
background-color: blue;
padding: 30px 10px 25px 10px;
}
div{
width:250px;
height:666px;
background:#1A8DA9;
}
div a{
text-decoration:none;
color:white;
padding:20px;
padding-right:100px
}
div ul li{
list-style-type:none;
display:block;
padding :15px;
border-bottom:1px solid #236D7F;
}
div ul li :hover{
background:#4097AD;
transition:linear all 0.40s;
margin-left:10px;
}
div ul li a:hover{
color:black;
}
#navBar {
float: left;
}
<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>Videos</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="videos.css">
</head>
<body>
<header>
<nav>
<h1> Main logo </h1>
<ul id="nav">
<li><a class="homeblack" href="index.html">Home</a></li>
<li><a class="homered" href="videos.html">Videos</a></li>
</ul>
</nav>
</header>
<div class="divider"></div>
<div id="navBar">
<ul>
<li>education videos </li>
<li>film videos</li>
<li>other videos </li>
</ul>
</div>
<video title="abcd" controls width="250" height="160">
<source src="videoplayback.mp4" />
</video>
<video title="abcd" controls width="250" height="160">
<source src="videoplayback (1).mp4" />
</video>
<video title="abcd" controls width="250" height="160">
<source src="1 Ton.mp4" />
</video>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Related
I'm creating a table of links, I want the table to be a bit fancier by changing the table heading's background color whenever I move the cursor to one of the list's links. However, I don't know how to change the attribute of the container element by affecting its smaller element. This is my code:
<html lang="vi">
<head>
<style>
.toc-container {
max-width: 600px;
font-family: "Roboto", sans-serif;
background: #deff9d;
border-radius: 8px;
box-shadow: 0 4px 11px rgba(0, 0, 0, 0.6);
}
.toc-container h2.index-heading {
text-transform: uppercase;
font-weight: normal;
margin: 0 16px;
padding-top: 16px;
}
.table-of-contents {
list-style: none;
padding: 0;
}
.table-of-contents li.author li.blog {
background: #222;
transition: 400ms;
list-style: none;
}
.table-of-contents li.author{
background-color: green;
}
.table-of-contents li.author li:nth-of-type(even).blog {
background: #2e2e2e;
}
.table-of-contents li.author li:hover.blog {
background: #000;
}
.table-of-contents li a {
text-decoration: none;
color: #fff;
margin-left: 24px;
padding: 16px 0;
display: block;
}
</style>
</head>
<body>
<div class="toc-container">
<h2 class="index-heading">heading</h2>
<ul class="table-of-contents">
<li class="author">
Author's name
<ul>
<li class="blog">
Nháp 1
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I think it's easier to do this with javascript, you can use Element Event mouseenter and mouseleave to achieve style change, maybe this can help you. code below
<script>
const headerDiv = document.querySelector('.index-heading');
const blogDiv = document.querySelector('.blog');
blogDiv.addEventListener('mouseenter', function(e) {
headerDiv.style.background = 'purple'
})
blogDiv.addEventListener('mouseleave', function(e) {
headerDiv.style.background = '#deff9d'
})
</script>
basically your HTML code is not in a order manner so that we could not apply all the changes you need . thats why i attached the code snippet which is easily explained and you can change your design yourself as your choice . and in style , unfortunately a tag is not doing as expected but i am sure that it will work in your browser .
if any needs to be changed in my code then comment below .
let header2=document.getElementById("header2");
let link=document.getElementById("link")
let changeLink=()=>{
header2.style.backgroundColor="green"
link.style.backgroundColor="yellow"
}
let changeHeader=()=>{
link.style.background="green"
header2.style.backgroundColor="yellow"
}
a{
text-decoration: none;
}
#header1{
height:85px;
}
#link{
margin-left: 50px;
background-color:black;
margin-top:-141px;
}
#header2{
height:180px;
}
<div id="header1" style="background-color:red">header1</div>
<a href="https://www.blogger.com/profile/00965819760488730111">
<div style="background-color:green" id="change">
<div id="header2" onmouseover="changeLink()">Đặng Minh Hoàng</div>
</div>
</a>
<ul id="link" onmouseover="changeHeader()">
<div class="col my-1">Nháp1</div>
<div class="col my-1">Nháp2</div>
<div class="col my-1">Nháp3</div>
<div class="col my-1">Nháp4</div>
<div class="col my-1">Nháp5</div>
</ul>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
This is my blog - http://quickeasycoder.blogspot.com/2018/07/code-player.html
It is not working as same as it was working in my browser. Every section up there in the blog come and merge upon each other.
This is working perfectly in my Google Chrome but it's not the case when I have uploaded it to my Blogger post. I think code is perfect but the thing may be in the layout of the blog. What should be done now?
<html>
<head>
<title>jQuery</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style type="text/css">
body {
font-family: sans-serif;
padding:0;
margin:0;
}
#header {
width:100%;
background-color: #EEEEEE;
padding:5px;
height: 30px;
}
#logo {
float:left;
font-weight: bold;
font-size: 120%;
padding: 3px 5px;
}
#buttonContainer {
width:233px;
margin: 0 auto;
}
.toggleButton {
float:left;
border: 1px solid grey;
padding: 6px;
border-right: none;
font-size: 90%;
}
#html {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#output {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-right: 1px solid grey;
}
.active {
background-color: #E8F2FF;
}
.highlightedButton {
background-color: grey;
}
textarea {
resize: none;
border-top: none;
border-color: grey;
}
.panel {
float:left;
width: 50%;
border-left: none;
}
iframe {
border:none;
}
.hidden {
display: none;
}
#intro{margin:10px;
font-weight:bold;
font-size: 20px;
}
</style>
</head>
<body>
<p id="intro"> Learn HTML| CSS| JAVASCRIPT without any text-editor by using Code-Player <br>
Built using HTML| CSS| JAVASCRIPT| jQuery</p>
<div id="header">
<div id="logo">
CodePlayer
</div>
<div id="buttonContainer">
<div class="toggleButton active" id="html">HTML</div>
<div class="toggleButton" id="css">CSS</div>
<div class="toggleButton" id="javascript">JavaScript</div>
<div class="toggleButton active" id="output">Output</div>
</div>
</div>
<div id="bodyContainer">
<textarea id="htmlPanel" class="panel"> <p id="paragraph">Hello World!</p></textarea>
<textarea id="cssPanel" class="panel hidden"> p { color: green; }</textarea>
<textarea id="javascriptPanel" class="panel hidden">document.getElementById("paragraph").innerHTML = "Hello Rob!";</textarea>
<iframe id="outputPanel" class="panel"></iframe>
</div>
<script type="text/javascript">
function updateOutput() {
$("iframe").contents().find("html").html("<html><head><style type='text/css'>" + $("#cssPanel").val() + "</style></head><body>" + $("#htmlPanel").val() + "</body></html>");
document.getElementById("outputPanel").contentWindow.eval($("#javascriptPanel").val());
}
$(".toggleButton").hover(function() {
$(this).addClass("highlightedButton");
}, function() {
$(this).removeClass("highlightedButton");
});
$(".toggleButton").click(function() {
$(this).toggleClass("active");
$(this).removeClass("highlightedButton");
var panelId = $(this).attr("id") + "Panel";
$("#" + panelId).toggleClass("hidden");
var numberOfActivePanels = 4 - $('.hidden').length;
$(".panel").width(($(window).width() / numberOfActivePanels) - 10);
})
$(".panel").height($(window).height() - $("#header").height() - 15);
$(".panel").width(($(window).width() / 2) - 10);
updateOutput();
$("textarea").on('change keyup paste', function() {
updateOutput();
});
</script>
</body>
</html>
Since a lot of blog platforms prohibit embedding code sometimes you are able to accomplish the task by using an <iframe> similar to what is here
<iframe height='265' scrolling='no' title='BPaNNq' src='//codepen.io/happymacarts/embed/BPaNNq/?height=265&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/happymacarts/pen/BPaNNq/'>BPaNNq</a> by Joseph L. Bradfield (<a href='https://codepen.io/happymacarts'>#happymacarts</a>) on <a href='https://codepen.io'>CodePen</a>.
or something like this one i found (looks familiar)
<iframe height='265' scrolling='no' title='Code player' src='//codepen.io/akashdevgan/embed/JGbGOQ/?height=265&theme-id=0&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/akashdevgan/pen/JGbGOQ/'>Code player</a> by Akash Devgan (<a href='https://codepen.io/akashdevgan'>#akashdevgan</a>) on <a href='https://codepen.io'>CodePen</a>.
I don't think that it works to embed in the snippet here but this might work on your blogger site try it out
As I couldn't debug yours, wrote my own version of codeplayer.
You may need to refer these. Make HTML elements as contenteditable, CSS Custom Variables
$(document).ready(function(){
$(".body").get(0).style.setProperty("--contentwidth", 100/$(".active").length+"%");
$(".codetype").click(function(){
$(this).hasClass("active") ? $(this).removeClass("active") : $(this).addClass("active");
$(".codecontent").eq($(this).index()).toggle();
$(".body").get(0).style.setProperty("--contentwidth", 100/$(".active").length+"%");
});
});
.container
{
width:100%;
height:400px;
max-height:400px;
border:1px solid black;
}
.header
{
position:relative;
width:100%;
height:50px;
background: red;
box-sizing: border-box;
text-align:center;
color:white;
}
.codetype
{
border:1px solid black;
width:100px;
height:40px;
margin:0 auto;
display:inline-block;
}
.codetype > span
{
text-align:center;
line-height:40px;
}
.codetype:first-child
{
border-top-left-radius:4px;
border-bottom-left-radius:4px;
}
.codetype:last-child
{
border-top-right-radius:4px;
border-bottom-right-radius:4px;
}
.body
{
height:100%;
display:inline-block;
width:100%;
}
.codecontent
{
height:100%;
width:var(--contentwidth);
background:yellow;
border:1px solid black;
float:left;
box-sizing:border-box;
}
.active
{
background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="header">
<div id="" class="codetype active"><span>HTML</span></div>
<div id="" class="codetype active"><span>CSS</span></div>
<div id="" class="codetype active"><span>JS</span></div>
<div id="" class="codetype active"><span>Output</span></div>
</div>
<div class="body">
<div id="" class="codecontent" contenteditable=true>HTML</div>
<div id="" class="codecontent" contenteditable=true>CSS</div>
<div id="" class="codecontent" contenteditable=true>JS</div>
<div id="" class="codecontent">Output</div>
</div>
</div>
I have a page that includes links, in the form of inline-blocks, to a couple of pages. My links stay at the same height, as long as they have identical text. Like this: Screenshot of webpage
However, when I change the text in the boxes, whichever box has fewer characters is lower than the other. Like this: Screenshot of webpage
Can anyone tell me why this is happening and how to fix it?
Here is my HTML, CSS, and JavaScript:
//The JavaScript is probably irrrelevant, but maybe not
//Set menu block height proportionally to the width
var menuAWidth = $('.menu a').css('width');
menuAWidth = menuAWidth.substring(0, menuAWidth.length - 2);
var menuAHeight = menuAWidth*1.618;
menuAHeight = (Math.round(menuAHeight*1000))/1000;
$('.menu a').css('height', menuAHeight);
//Reset height of menu block on resize
$(window).resize(function() {
var menuAWidth = $('.menu a').css('width');
menuAWidth = menuAWidth.substring(0, menuAWidth.length - 2);
var menuAHeight = menuAWidth*1.618;
menuAHeight = (Math.round(menuAHeight*1000))/1000;
$('.menu a').css('height', menuAHeight);
});
body {
background: #fffae5;
font-family: sans-serif;
margin: 0;
}
.main {
margin-left: 300px;
padding-left: 1%;
}
.main h2 {
text-align: center;
font-size: 30px;
}
/*Any code pertaining to the sidebar, nav, or heading is irrelevant*/
#sidebar {
position: fixed;
top: 0;
left: 0;
float: left;
width: 300px;
font-size: 20px;
background: #D2B48C;
margin-left: 0;
margin-top: 0;
height: 100%;
}
#heading {
background: #a52a2a;
padding: 5px;
text-align: center;
font-family: serif;
}
#heading h1 {
font-size: 30px;
}
nav {
line-height: 35px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
}
nav ul li,
nav ul {
padding-left: 0;
}
#sidebar a {
color: #000;
text-decoration: none;
}
/*This is the relevant code*/
.menu a {
color: #000;
text-decoration: none;
display: inline-block;
width: 21%;
background: #9E7D70;
padding: 5px;
margin: 1%;
border-radius: 10px;
}
.menu h3 {
text-align: center;
padding: 0 16px 0 16px;
}
.menu p {
padding: 0 16px 0 16px;
}
/*Also irrelavent*/
nav a[href="vocab.html"] li {
background: #000;
color: #fff;
}
nav a[href="../vocab.html"] li {
background: #000;
color: #fff;
}
<!--Most of the code is irrelevant to the problem-->
<!--The important part is in a div with an id="main"-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>He Who Teacheth</title>
<!--<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="vocab/vocab.css">
<style>
</style>-->
</head>
<body>
<div id="sidebar">
<a href="home.html">
<div id="heading">
<h1>He Who Teacheth</h1>
<p><strong>Romans 2:21</strong>
</br><q>Thou therefore which teachest another, teachest thou not thyself?</q>
</div>
</a>
<nav>
<ul>
<a href="home.html">
<li>Home</li>
</a>
<a href="math.html">
<li>Math</li>
</a>
<a href="science.html">
<li>Science</li>
</a>
<a href="history.html">
<li>History</li>
</a>
<a href="art.html">
<li>Art</li>
</a>
<a href="vocab.html">
<li>Vocabulary</li>
</a>
<a href="gospel.html">
<li>Gospel</li>
</a>
<a href="english.html">
<li>English</li>
</a>
</ul>
</nav>
</div>
<!--Main code, this is the part that pertains to the question-->
<div class="main">
<h2>Vocabulary</h2>
<div class="menu">
<a href="skeleton.html">
<h3>Skeleton</h3>
<p>This is the basic HTML structure for all the math pages.</p>
</a>
<a href="skeleton.html">
<h3>Literary</h3>
<p>This is a personal dictionary of literary terms, with a description of each one.</p>
</a>
</div>
</div>
<!--<script src="jquery.min.js"></script>
<script src="main.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
display: inline-block causes this behaviour. There's a decent amount of info about this here: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
Short answer: use vertical-align: top on your inline-block elements to keep the tops aligned (rather than sticking to the baseline default), or try floats instead.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Fisrt, I want to make Home contents is active when I open the website.
other contents should be hidden, Second each content should be link with the navigation element. So when I click the element it should swap the contents with the matched content. If I need to use javascript please let me know.
welcome critics :) and Thank You.
#font-face {
font-family: font1;
src: url('fonts/CaviarDreams.woff');
}
#wrapper {
margin:0 auto;
background: white;
border:1px solid black;
max-width: 1060px;
}
header {
max-width: 1060px;
width: 100%;
height: 76px;
top: 0;
left: 0;
border:1px solid black;
}
#logo {
margin-top: 37px;
margin-left: 10px;
float: left;
width: 160px;
height: 30px;
background: url(logo6.png) no-repeat center;
display: block;
}
nav {
float: right;
margin-top: 27px;
margin-right: 10px;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
float: left;
font-family: font1;
font-size: 15px;
padding: 10px;
text-decoration: none;
cursor: pointer;
}
nav ul li:hover {
color: #6F6F6F;
}
#menu {
display: hidden;
width: 40px;
height: 40px;
background: url(menu-icon.png) center;
}
#menu:hover {
background-color: #CBCBCB;
border-radius: 3px 3px 0 0;
}
/* MEDIA QUERY */
#media all and (max-width:640px) {
#menu {
display:inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 10px;
background: #fff;
border: 3px solid #CBCBCB;
right: 18px;
top: 57px;
width: 30%;
border-radius: 3px 0 3px 3px;
z-index: 200;
}
nav ul li {
text-align: center;
width: 100%;
margin: 0 auto;
}
nav:hover ul {
display: block;
}
}
#swap{
margin: 40px auto 40px;
max-width: 980px;
position: relative;
padding: 20px;
border: 1px solid black;
z-index:100;
overflow: hidden;
}
#sns {
text-align: center;
}
#sns li{
display: inline-block;
margin-right: 10px;
}
#copyright li{
font-family: inherit;
font-size: 13px;
text-align: center;
list-style: none;
}
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="GalleryResStyle.css">
</head>
<body>
<div id="wrapper">
<header class="header-site" role="banner">
<nav>
<ul>
<li>
Home
</li>
<li>
Profile
</li>
<li>
Gallery
</li>
<li>
Contact
</li>
</ul>
</nav>
</header>
<div id="swap">
<div id="Home_contents">Home contents</div>
<div id="Profile_contents">Profile contents</div>
<div id="Gallery_contents">Gallery Contents</div>
<div id="Contact_contents">Contact contents</div>
</div>
<footer>
<div id="sns">
<li>
<a class="Facebook-icon" href=""><img src="FACEBOOK.png"></a>
</li>
<li>
<a class="instagram-icon" href=""><img src="INSTAGRAM.png"></a>
</li>
</div>
<div id="copyright">
<li> COPYRIGHT © 2015 INKYU PARK.<br>ALL RIGHTS RESERVED. </li>
</div>
</footer>
</div>
</body>
</html>
Yes you need JavaScript (other languages could do it, but it is the simplest I know)
for example, you can change HTML to (slightly simplified for the sake of clarity):
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="./test.css">
<!-- Must have this line first, to enable functions in test.js -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Here you get the hide/show functions -->
<script type="text/javascript" src="./test.js"></script>
</head>
<body>
<div id="wrapper">
<header class="header-site" role="banner">
<nav>
<ul>
<li class=showhome>Home</li>
<li class=showProfile>Profile</li>
<li class=showGallery>Gallery</li>
<li class=showContact>Contact</li>
</ul>
</nav>
</header>
<div id="swap">
<div id="Home_contents" class=home >Home contents</div>
<div id="Profile_contents" class=Profile >Profile contents</div>
<div id="Gallery_contents" class=Gallery >Gallery Contents</div>
<div id="Contact_contents" class=Contact >Contact contents</div>
</div>
</div>
</body>
</html>
so you can use class to define which area you click and which area hide/show
then use a js file with a .ready function (in my example, save as test.js in same folder as HTML:
$(document).ready(function(){
$(".showhome").click(function(){
$(".home").show();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").hide();
});
$(".showProfile").click(function(){
$(".home").hide();
$(".Profile").show();
$(".Gallery").hide();
$(".Contact").hide();
});
$(".showGallery").click(function(){
$(".home").hide();
$(".Profile").hide();
$(".Gallery").show();
$(".Contact").hide();
});
$(".showContact").click(function(){
$(".home").hide();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").show();
});
// Hide all and show home on page loading
$(".home").show();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").hide();
});
for a cleaner function, you can also use things like $(".home").toggle();, it would switch the state (if it was shown it would hide and vice versa). but I don't see how right now :)
You will need to use some kind of scripting for this (alternatively just 4 raw html pages).
I'd suggest using bootstrap, it's simple if you're a javascript novice.
<div class="container">
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Gallery</li>
<li role="presentation">Contact</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Home</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile</div>
<div role="tabpanel" class="tab-pane" id="gallery">Gallery</div>
<div role="tabpanel" class="tab-pane" id="contact">Contact</div>
</div>
</div>
Above is pulled from getbootstrap.com, fiddle here.
I am try to build Gallery slide show.
I am new in javscript and jQuery.
1 - I don't see any mottion moving and I don't no why?
2 - I can not center the image center of the div, the left side there is linkage.
Thanks for any help and guidance on the subject.
Here we can see code that work good.
Gallery
My code HTML file:
<html>
<head>
<title>Your title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type = "text/javascript" language = "Javascript">
<!-- Hide from older browsers;
window.onload = function(){
$('#scroll_me').click(function() {
var item_width = $('#portfolio-tiles li').outerWidth() + 30;
var left_indent = parseInt($('#portfolio-tiles').css('left')) - item_width;
$('#portfolio-tiles:not(:animated)').animate({
'left': left_indent
}, 500, function() {
$('#portfolio-tiles li:last').after($('#portfolio-tiles li:first'));
$('#portfolio-tiles').css({
'left': '-300px'
});});
});
};
// end hide -->
</script>
</head>
<body>
<div id="container">
<div id='carousel_inner'>
<ul id="portfolio-tiles">
<li>
<a id="example2" href="p1.png">
<img alt="item1" src="p1.png">
</a>
</li>
<li>
<a id="example2" href="p2.png">
<img alt="item2" src="p2.png">
</a>
</li>
<li>
<a id="example2" href="p3.png">
<img alt="item3" src="p3.png">
</a>
</li>
<li>
<a id="example2" href="p5.png">
<img alt="item4" src="p5.png">
</a>
</li>
</ul>
</div>
</div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div><h2>Click here</h2><img id="scroll_me" alt="item1" src="p4.png"></div>
</body>
</html>
My code CSS file:
#carousel_inner{
background-color: #60F0F0;
background-position: left top;
position:relative;
list-style-type: none;
float: left;
margin: 5px 5px 5px 5px;
padding: 0px 0px 0px 0px;
height: 215px;
width: 980px;
overflow: hidden;
border:1px;
border-style:solid;
border-color:yellow;
}
#portfolio-tiles li img {
cursor:pointer;
cursor: hand;
border:1px;
border-style:solid;
border-color:red;
}
#portfolio-tiles li {
display: block;
float: left;
font-style: normal;
font-weight: normal;
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 284px;
border:1px;
border-style:solid;
border-color:green;
}
#portfolio-tiles {
position:relative;
left:-316px; /* important (this should be negative number of list items width(including margin) */
list-style-type: none; /* removing the default styling for unordered list items */
margin: 0px;
padding: 10px 0px 0px 10px;
width:9999px; /* important */
}
img {
width: 277px;
}
#scroll_me{
float: left;
display: block;
margin: 0px;
}
h2 {
float: left;
position: relative;
top: 20px;
left: 0;
width: 100%;
}
when you do the animate, you are applying CSS styles to the properties. therefore, in the case of positioning, you have to indicate the units, like:
$('#portfolio-tiles:not(:animated)').animate({
'left': left_indent + 'px'
}...