I am using jQuery to try and find which IDs have a certain class name. The reason this is important to me is I am using toggleClass() from jQuery to show and hide certain divs and when a button is selected I want a viewport to display or hide. I have 2 personal goals: One is to find a way to do this in jquery and the other is to understand how to do this in javascript. I understand the javascript will be much more advanced and I am prepared.
How can I use the resetViewport() to count the amount of "selected" classes?
Is there a better way to do this?
In javascript, how can one do this same thing? Even if you tell me specific methods in js thats ok. I am not asking for exact code. I just want to learn.
Just so there is no question I added the code. Lets start by looking at my personal hosted web page called CodeAmend and here is the code
****html***
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Player</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<p>CodePlayer</p>
<nav>
<ul>
<li id="html-button" class="toggle selected no-highlight">HTML</li>
<li id="css-button" class="toggle selected no-highlight">CSS</li>
<li id="js-button" class="toggle selected no-highlight">JS</li>
<li id="result-button" class="toggle selected no-highlight">Result</li>
</ul>
</nav>
<div id="run-button" class="no-select">Run</div>
</div>
<div id="html-container" class="code-container">
<div class="code-label">HTML</div>
<textarea>Code</textarea>
</div>
<div id="css-container" class="code-container">
<div class="code-label">CSS</div>
<textarea>Code</textarea>
</div>
<div id="js-container" class="code-container">
<div class="code-label">JS</div>
<textarea>Code</textarea>
</div>
<div id="result-container" class="code-container">
<div class="code-label">Result</div>
<iframe>Code</iframe>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
* here is javascript / jquery *
$("[id^=button]").click(function () {
$(this).toggleClass('selected');
// creates the name of a viewport ID. "view-" + html of button
var viewID = "#view-" + $(this).html();
$(viewID).toggle();
resetViewport(4);
});
function resetViewport(numberOfViewports) {
var viewSize;
switch (numberOfViewports) {
case 1:
viewSize = "400px";
break;
case 2:
viewSize = "198px";
break;
case 3:
viewSize = "131px";
break;
case 4:
viewSize = "98px";
break;
}
$("[id^=view]").css("width", viewSize);
}
here is css
* {
margin: 0;
padding: 0;
}
body {
font-size: 14px;
}
.clear-fix {
clear: both;
}
.no-highlight {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* why does menu margin excape parent without padding on container.. change to 0 and all margen excapes. */
#container {
width: 400px;
height: 456px;
margin: 0 auto;
padding-top: 1px;
background-color: #555;
border-radius: 5px;
}
/* Menu styling */
#menu {
width: 231px;
margin: 10px auto;
}
#menu li {
width: 50px;
height: 30px;
border: 2px solid #58d;
border-radius: 10px;
background-color: #000;
color: #333;
line-height: 30px;
text-align: center;
font-size: .8em;
text-transform: uppercase;
list-style: none;
float: left;
cursor: pointer;
}
#menu li+li {
margin-left: 5px;
}
#menu .selected {
background-color: #fff;
color: #333;
font-weight: bold;
}
[id^="view"] {
width: 98px;
height: 400px;
margin: 1px;
float: left;
background-color: #ddd;
}
jQuery collections and Javascript NodeLists are both array-like, so you can use the .length property to get the number of elements.
jQuery:
resetViewport($(".selected").length);
Plain Javascript:
resetViewport(document.getElementsByClassName("selected").length);
Related
So, I've got to make a to-do list purely made from html,css and javascript,problem is, I've barely been taught any javascript at my school and even then,I haven't touched front-end in over a year So I'm quite stumbed here ..
The idea is that there should be an input field where I can add list items to my to-do list and once they're completed,I click on them and they get transfered to a "completed " section while also counting the percentage of how many list items are completed and not completed.
I don't expect anyone to take the time to write out the code(though I would,obviously,appreciate it ),but atleast if I got some direction as to what parts of javascript I should look into,it'd be a great help as is..
<html>
<head>
<title>Site</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta charset="UTF-8"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form>
<div id="myDIV" class="header">
<h2>To-Do</h2>
<input type="text" id='uzd' placeholder="Užduotis">
<input type="button" id='todoadd' >
</div>
</form>
<ul id='uzduotys'>
</ul>
<script src="script.js"></script>
</div>
</body>
</html>
//////javascript
document.getElementById("todoadd").onclick = function() {
var node = document.createElement("Li");
node.setAttribute("id","li");
var text = document.getElementById("uzd").value;
var textnode =document.createTextNode(text);
node.appendChild(textnode);
document.getElementById("uzduotys").appendChild(node);
}
/////////css
body{ background-color: lightgrey; } .container{
margin: 100px 300px;
}
h2{
margin-left: 75px;
font-size: 36px;
color:cornflowerblue;
}
input{
line-height: 30px;
font-size: 20px;
border-radius: 7px;
margin-left: 30px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
background: #eee;
font-size: 25px;
transition: 0.2s;
/* make the list items unselectable */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
ul{
margin:20px;
border-radius:15px ;
}
li{
background-color: white;
line-height: 30px;
border-radius:7px;
margin:10px;
}
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
If you are a student still I hope you take this and learn some more JS. Me as a student starting in CS I was not able to begin to find out what to do. I suggest recognizing the many js tools that there are and growing your knowledge. Try code academy for basic starting help.
<!-- Super basic example with no styling and no counter -->
<html>
<body>
<label>New Item</label>
<input type="text" id="input">
<button id="add">Add New To Do Item</button>
<h1>To Do</h1>
<ul id="toDoList">
</ul>
<h1>Completed</h1>
<ul id="completedList">
</ul>
<script>
//calls when the page loads
(function() {
document.getElementById("add").addEventListener("click", function(){
var newLi = document.createElement("li");
var newDiv = document.createElement("Div");
newDiv.innerText = document.getElementById("input").value;
var newBtn = document.createElement("button");
newBtn.innerText = "Done"
newBtn.addEventListener("click", function(e){
e = e.target || e.srcElement;
//for some reason appending e.parentElement would not work so I had to create a brand new element
var newLi2 = document.createElement("li");
newLi2.innerText = e.parentElement.children[0].innerText;
document.getElementById("completedList").appendChild(newLi2);
e.parentElement.remove();
})
newLi.appendChild(newDiv);
newLi.appendChild(newBtn);
document.getElementById("toDoList").appendChild(newLi);
document.getElementById("input").value = "";
})
})();
</script>
</body>
</html>
I have 2 pop-up menus that basicaly open and close when clicked on. I wrote a little code that close any showing menu when the user click anywhere but 1 of the 2 menus. The code work perfecly fine in Chrome and Firefox but in IE, the menus only close when clicked on. I'm pretty new to Javascript so i am pretty sure that there is a better way to do it .
Here is my code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="img/">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- Main Header -->
<header id="header">
<nav class="container">
<img onclick="navFunction(this)" id="navMenuImg" src="img/menu.png">
<img onclick="settingFunction(this)" id="navSettingImg" src="img/setting.png">
<div id="navMenuSetting">
<ul id="navMenu" class="navMenu">
<li><a class="navMenuLink" href="#">Videos</a></li>
<li><a class="navMenuLink" href="#">Pictures</a></li>
<li><a class="navMenuLink" href="#">Profiles</a></li>
</ul>
<ul id="navSetting" class="navSetting">
<li><a class="navMenuLink" href="">Account</a></li>
<li><a class="navMenuLink" href="deconnection.php">Log out</a></li>
</ul>
</div>
</nav>
</header>
<!-- Scripts -->
<script type="text/javascript">
function navFunction() {
document.getElementById("navMenu").classList.toggle("navMenuShow");
}
function settingFunction(){
document.getElementById("navSetting").classList.toggle("navMenuShow");
}
document.onclick = function(e) {
if (!e.target.matches('#navMenuImg') && !e.target.matches('#navSettingImg')) {
var navMenu = document.getElementById("navMenu");
var navSetting = document.getElementById("navSetting");
navMenu.classList.remove('navMenuShow');
navSetting.classList.remove('navMenuShow');
}
}
</script>
<!-- CSS -->
<style type="text/css">
#navMenuImg{
width: 55px;
height: 35px;
margin-top: 10px;
cursor: pointer;
}
.navMenu{
z-index: 1;
list-style-type: none;
padding: 0;
margin-top: 10px;
margin-right: 10px;
border-bottom:1px solid #ccc;
display: none;
}
#navSettingImg{
float: right;
width: 30px;
height: 30px;
margin-top: 12px;
margin-right: 12px;
cursor: pointer;
}
.navSetting{
position: relative;
right: 0;
z-index: 1;
list-style-type: none;
padding: 0;
margin-top: 10px;
border-bottom:1px solid #ccc;
display: none;
}
#navMenuSetting{
position: relative;
width: 100%;
background-color: red;
}
.navMenuShow{
display: block;
position: absolute;
float: right;
}
</style>
</body>
Thank you in advance !
The js classList and target.matches is not supported in IE. I have listed the code that you can use instead:
function navFunction() {
document.getElementById("navMenu").className+=" navMenuShow";
}
function settingFunction(){
document.getElementById("navSetting").className+=" navMenuShow";
}
document.onclick = function(event) {
var matchesOne = event.target.matches ? event.target.matches('#navMenuImg') : event.target.msMatchesSelector('#navMenuImg');
var matchesTwo = event.target.matches ? event.target.matches('#navSettingImg') : event.target.msMatchesSelector('#navSettingImg');
if (!matchesOne&&!matchesTwo) {
var navMenu = document.getElementById("navMenu");
var navSetting = document.getElementById("navSetting");
navMenu.className=navMenu.className.replace(/navMenuShow/g,"");
navSetting.className=navSetting.className.replace(/navMenuShow/g,"");
}
}
The code is tested and is working 100% in IE and Chrome.
I am going to add dynamically elements to my block of ul.
I would like to center all list's elements to parent div(brown boder).
For example,
if the resolution of the browser allows you to set two blocks in one row, I would like to center this row in relation to parent div.
I would be very graftefully.
Link to demo
myCode:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
var tab = [2,3,4,5,7,8,9,11,12,13,14,15];
$(document).ready(function(){
$('#godziny').on('click', '.godzina', function(){
//alert(this.attr('class'));
$('.yb').removeClass('yb');
$(this).addClass('yb');
});
$('#getElements').click(function() {
for(i = 0; i < tab.length; ++i) {
alert(tab[i]);
setTimeout(function(i){
$('#godziny').append('<li class="godzina">' + tab[i] + '</li>');
}, i*50);
}
});
});
</script>
<style>
#spisSalonow {
margin: 0 auto;
}
#spisSalonow > div {
padding-top: 15px;
color:red;
}
#wybor_terminu {
border: 1px solid brown;
}
#wybor_terminu ul {
list-style-type: none;
overflow: hidden;
border: 1px solid red;
}
#wybor_terminu ul li {
width: 200px;
height: 200px;
text-align: center;
color: blue;
border: 0.2em solid green;
float: left;
cursor: pointer;
margin-right: 40px;
margin-top: 40px;
/*margin:auto;*/
/*
opacity: 0.4;
filter: alpha(opacity=40);
*/
}
.yb {
background: yellow;
}
</style>
</head>
<body>
<div id="wrapper">
<input type="button" value="get Elements" id="getElements"/>
<section id="content">
<div class="full">
<BR/>
<div id="wybor_terminu" class="center border" style="width: 70%; position: relative;">
<div style="text-align: center"><img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-05-24.png" alt="Left Arrow" /> <span id="day"> ANY DAY </span> <img src="http://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-06-24.png" alt="Right Arrow" /></div>
<ul id="godziny" style="margin-top: 25px;">
</ul>
</div>
</section>
</div>
</body>
</html>
You can use the CSS flexbox to achieve this. Here is a link to a complete guide on how to use flexbox. I hope this helps.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Add this lines:
CSS
#wybor_terminu ul {
list-style-type: none;
overflow: hidden;
/*NEW*/
padding: 0;
width: 100%;
}
#wybor_terminu ul li {
width: 200px;
height: 200px;
text-align: center;
color: blue;
border: 0.2em solid green;
/*float: left; You don't need this line*/
cursor: pointer;
/*NEW*/
margin:auto;
margin-top: 40px;
}
EDIT
This is only a quick solution with bootstrap maybe it could help you a little bit. jsfiddle
jQuery
In this line I added bootstrap classes:
$('#godziny').append('<li class="godzina col-sm-12 col-md-6">' + tab[i] + '</li>');
This code center your boxes (is not the best solution, but it works):
countBoxes = $('#godziny').width() / 200;
alignBoxes = ($('#godziny').width()-(200*parseInt(countBoxes)))/2;
if(countBoxes >= 2.65){
$('#godziny').css('margin-left', alignBoxes);
} else{
$('#godziny').css('margin-left', 0);
}
If you change the resolution of your screen, click the button to center your boxes again.
I'm trying to create a side bar with 4 different options, when the selected option is active (Meaning you are on that specific page), I want the entire area behind the li, but inside the DIV, a background color slightly darker than what is already there but don't know how to achieve this. I have tried making the li itself 100% width of the div but it doesn't affect it at all.
Here is the issue:
As you can see the li does not reach the start and end width of the sidebar div.
Code Here -
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder="Enter Book Title"/>
</form>
</div>
<ul>
<li>
<a id="firstlink">
Home
</a>
</li>
<li>
<a id="secondlink">
Categories
</a>
</li>
<li>
<a id="thirdlink">
Bestsellers
</a>
</li>
<li>
<a id="fourthlink">
Contact
</a>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
CSS:
body{
background-color: #f1f6f6;
}
#sidebar{
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
#nav{
margin: 2em 1em;
color: #888888;
display: block;
max-width: 100%;
}
#nav ul {
padding-left: 0;
}
#nav li{
list-style-type: none;
padding: 0;
text-align: center;
max-width: 100%;
}
#nav li a {
display: block;
padding: 0.5em 0;
}
#searchbar{
padding-bottom: 0.5em;
text-align: right;
}
#searchbar input{
max-width: 95%;
}
Your problem is in your #nav. You need to remove the x-margins:
#nav{
margin: 2em 0;
}
You can then do something like this:
#nav li:hover
{
background:#333;
}
But you'll also want to fix this:
#searchbar{
text-align: center;
}
http://jsfiddle.net/5amL4tx5/
Your problem is the #nav rule. If you remove the margins it will fill the entire containing div.
#nav{
margin: 2em 1em;
color: #888888;
display: block;
max-width: 100%;
}
As for changing the background to make it darker for the active element. I suggest creating an .active class and assigning that on the fly to the active page based off of the url.
Example active class:
.active {
background: c2c2c2;
}
I think the problem is here (specifically the 1em for left/right margin):
#nav{
margin: 2em 1em;
}
That's going to limit the size of anything within #nav.
I am designing my website and I'm trying to find a way to keep a header always in the screen.
For an example, take a look at this extra long page on Wikia.com. Notice that when you scroll the page, the little toolbar down the bottom stays in one place. However, scroll to the bottom of the page and you will realize that the toolbar stays in a fixed position until it gets out of view.
This is what I would like to do, but in reverse. Have a header that stays in a fixed position on the web-page, but when it was not in view have it at the top.
I tried looking at an example on DynamicDrive.com (search for Dock Content Script, because I can't post another link), but I found that it was too jittery for me.
Can someone please help me do this?
Thanks in advance.
~DragonXDoom
P.S. Now that I notice, the How to Format box on the right of the submit question page has this effect.
Always remember if you have to stick the header or footer { position : fixed; } can be used.
So apply CSS like this:
.header{
top:0;
width:100%;
height:50px;
position:fixed; // this is the key
}
HTML:
<div id="wrap">
<div id="header"> HEADER </div>
<div id="navigation"> NAVIGATION </div>
<div id="content"> CONTENT </div>
</div>
JavaScript:
( function () {
var nav = $( '#navigation' )[0],
top = $( nav ).offset().top,
left,
height = $( nav ).outerHeight(),
width = $( nav ).width(),
fixedClass = 'fixed';
function pageOffset() {
return window.pageYOffset || document.body.scrollTop;
}
$( window ).
resize( function () {
left = $( nav ).offset().left;
}).
scroll( function () {
$( nav ).toggleClass( fixedClass, pageOffset() > top );
if ( $( nav ).hasClass( fixedClass ) ) {
$( nav ).
css({ 'left': left, 'width': width }).
prev().css({ 'marginBottom': height });
} else {
$( nav ).
prev().andSelf().removeAttr( 'style' );
}
}).
trigger( 'resize' );
})();
Live demo: http://jsfiddle.net/simevidas/Mx8hC/show/
If you want it to be stuck to the top even when the user scrolls (i.e. stuck to the top of the browser window), use:
.top-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
margin: 0;
}
Or just to the of the the page:
.top-bar {
margin: 0;
width: 100%;
}
You could use CSS positioning to solve this. The following link has instructions on what you need I believe.
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Edit: Sorry I misread, these should work for headers as well.
http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/
http://davidchambersdesign.com/css-fixed-position-headers/
Hope these help.
//header//
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><?php echo SITE_NAME; if(isset($page_title)){ echo ' :: '.$page_title;}?></title>
<meta name="Description" content="<?php echo $SITE_NAME;?>" />
<meta name="robots" content="all, index, follow" />
<meta name="distribution" content="global" />
<link rel="shortcut icon" href="/favicon.ico" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<link href="<?php if(isset($include_file_ext)){ echo $include_file_ext;}?>css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h1><?php echo SITE_NAME;?></h1>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<!--
<li>About</li>
<li>Services</li>
<li>Contact us</li>-->
</ul>
</div>
<div id="content">
//footer
</div>
<div id="footer">
Copyright © <?php echo SITE_NAME.' , '.date('Y');?>
</div>
</body>
</html>
//css
body,td,th {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
}
body {
margin-left: 0px;
margin-top: 30px;
margin-right: 0px;
margin-bottom: 0px;
}
.maindiv{ width:690px; margin:0 auto;}
.textbox{ padding:2px 4px; width:200px;}
.submit{ border:solid 1px #008000; background:#008000; color:#FFF; font-weight:bold;}
#container
{
margin: 0 30px;
background: #fff;
}
#header
{
background: #ccc;
padding: 20px;
}
#header h1 { margin: 0; }
#navigation
{
float: left;
width: 100%;
background: #333;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover { background: #383; }
#content
{
clear: left;
padding: 20px;
}
#content h2
{
color: #000;
font-size: 160%;
margin: 0 0 .5em;
}
#footer
{
background: #ccc;
text-align: right;
padding: 20px;
height: 1%;
}