Is it possible to add a class to a button that already has a class whenever the value of the button changes?
Example:
Button Value: Europe West --> Add Class EuWest to the current button class.
So it will show <button class="buttonclass EuWest" value="Europe West">Europe West</button>
Whenever the value changes to North America then for example, the class EuWest would remove and change to NorthAmerica.
I want to do this because later on when searching Server Specific API's, I believe this is needed for something.
Underneath the current code I have.
$(document).ready(function(){
var regionDropDown = $('.region_dropdown_section'),
regionButton = regionDropDown.find('button'),
regionList = regionDropDown.find('.region_dropdown_content').children();
$(regionList).on('click', function(e){
var region = e.target;
regionButton.text(region.text).val(region.text);
});
});
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
vertical-align: baseline;
outline: none;
}
body {
background: url(../images/background/body_background.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.logo {
width: 500px;
height: 225px;
margin: auto;
display: block;
margin-top: 50px;
margin-bottom: 50px;
}
.SearchSummoners {
margin: auto;
width: 35%;
padding: 10px;
background-color: rgba(0, 0, 0, 0.7);
border: 1px solid;
-moz-border-image: -moz-linear-gradient(top, #006184 0%, #303142 100%);
-webkit-border-image: -webkit-linear-gradient(top, #006184 0%, #303142 100%);
border-image: linear-gradient(to bottom, #006184 0%, #303142 100%);
border-image-slice: 1;
}
/* Dropdown Button */
.dropbtn {
background-color: #19A5D4;
color: white;
padding: 4px;
font-size: 12px;
border: none;
cursor: pointer;
height: 40px;
width: 100%;
}
/* Dropdown Content (Hidden by Default) */
.region_dropdown_content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
max-width: 335px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.region_dropdown_section {
overflow: hidden;
width: 20%;
}
/* Links inside the dropdown */
.region_dropdown_content a {
color: black;
text-decoration: none;
display: inline-block;
width: 45%;
margin: 0;
vertical-align: top;
padding: 10px 0px 10px 10px;
}
/* Change color of dropdown links on hover */
.region_dropdown_content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.region_dropdown_section:hover .region_dropdown_content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.region_dropdown_section:hover .dropbtn {
background-color: #1491BA;
}
.Searchbox_Summoners {
margin: auto;
display: block;
width: 65%;
}
#SearchBox {
margin-right: 0;
margin-left: 0;
width: 80%;
background-color: white;
height: 40px;
float: left;
}
.region_dropdown_section {
position: inherit;
display: inline-block;
max-width: 100% !important;
overflow: hidden;
}
#SearchInput{
width: 92%;
line-height: 40px;
background: white;
border: 0;
outline: 0;
margin: 0;
padding: 0;
margin-left: 20px;
font-size: 24px;
}
/* Region Sprites */
.BR, .EUNE, .EUW, .JP, .KR, .LAN, .LAS, .NA, .OCEANIA, .RUS, .TURKEY{
background: url(../images/icons/regions/regions.png) no-repeat;
display: inline-block;
overflow: hidden;
vertical-align: middle;
padding-right: 15px;
}
.BR{
background-position: -2px -2px ;
width: 26px;
height: 28px;
}
.EUNE{
background-position: -2px -35px ;
width: 26px;
height: 28px;
}
.EUW{
background-position: -2px -70px ;
width: 26px;
height: 28px;
}
.JP{
background-position: -2px -105px ;
width: 26px;
height: 28px;
}
.KR{
background-position: -2px -140px ;
width: 26px;
height: 28px;
}
.LAN{
background-position: -2px -175px ;
width: 26px;
height: 28px;
}
.LAS{
background-position: -2px -210px ;
width: 26px;
height: 28px;
}
.NA{
background-position: -2px -245px ;
width: 26px;
height: 28px;
}
.OCEANIA{
background-position: -2px -280px ;
width: 26px;
height: 28px;
}
.RUS{
background-position: -2px -315px ;
width: 26px;
height: 28px;
}
.TURKEY{
background-position: -2px -350px ;
width: 26px;
height: 28px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php define('DeniedAccessFiles', TRUE); ?>
<?php include 'header.php'; ?>
<div class="logo">
<img src="images/logo.png">
</div>
<div class="SearchSummoners">
<div id="SearchBox">
<form method="POST" autocomplete="off">
<input id="SearchInput" value="Enter Summoners Name" onfocus="if(this.value == 'Enter Summoners Name') { this.value = ''; } " onblur="if(this.value == '') { this.value = 'Enter Summoners Name'; }" type="text" name="SummonerName"></input>
</form>
</div>
<div class="region_dropdown_section">
<button class="dropbtn">Select Region</button>
<div class="region_dropdown_content">
<span class="NA"></span>North America
<span class="EUW"></span>Europe West
<span class="EUNE"></span>Europe NE
<span class="LAN"></span>LAN
<span class="LAS"></span>LAS
<span class="OCEANIA"></span>Oceania
<span class="BR"></span>Brazil
<span class="KR"></span>Korea
<span class="JP"></span>Japan
<span class="TURKEY"></span>Turkey
<span class="RUS"></span>Russia
</div>
</div>
</div>
<?php include 'footer.php'; ?>
To make this script work, you would need to change a few things. I would add a data field to the <a href> tags when they are clicked, the jQuery knows what to do. Then I would implement ajax so the page does not reload (otherwise you will need to do some PHP on this page to persist the setting when it reloads). See if this is what you are trying to do:
Demo: https://jsfiddle.net/rtasdses/
Form:
<form method="POST" autocomplete="off">
<div class="SearchSummoners">
<div id="SearchBox">
<input id="SearchInput" placeholder="Enter the Summoner Name" name="SummonerName" />
</div>
<div class="region_dropdown_section">
<button class="dropbtn">Select Region</button>
<div class="region_dropdown_content">
<span class="NA"></span>North America
<span class="EUW"></span>Europe West
<span class="EUNE"></span>Europe NE
<span class="LAN"></span>LAN
<span class="LAS"></span>LAS
<span class="OCEANIA"></span>Oceania
<span class="BR"></span>Brazil
<span class="KR"></span>Korea
<span class="JP"></span>Japan
<span class="TURKEY"></span>Turkey
<span class="RUS"></span>Russia
</div>
</div>
</div>
</form>
<div id="section2"></div>
jQuery:
$(document).ready(function(){
// Set the current class
var currClass = false;
// On click
$('.region_dropdown_content > a').click(function(e){
// Stop (just incase)
e.preventDefault();
// Assign current class
var addClass = $(this).data('addclass');
// Extract the text from the a tag
var thisTxt = $(this).text();
// If not empty, remove it
if(currClass) {
$('.dropbtn').removeClass(currClass);
$('.SearchSummoners').removeClass(currClass);
}
// Now assign the current class to save
currClass = addClass;
// Add the extracted <a> text into the button tag to change name
$('.dropbtn').addClass(addClass).text(thisTxt);
// Add the class to the button
$('.SearchSummoners').addClass(addClass);
// this will send your request to whatever page
// that will run your search
$.ajax({
// Url of the page that searches
url:'/url/to/ajax/dispatcher.php',
// This will submit to the above page using post
data: {
"search": addClass,
"term": $("#SearchInput").val()
},
type: 'post',
// This will place the response (html possibly) into a container
success: function(response) {
// Put html back into placeholder
$('#section2').html(response);
}
});
});
});
CSS (I added just this part to the bottom to demonstrate):
.selected {
background-color: orange;
}
.blue {
background-color: red;
}
.pink {
background-color: pink;
}
.green {
background-color: green;
}
All you need to do is add something in your dropdown list such as data-class="EuWest" so JS can pick that up and append to your button.
$(function() {
$('.dropbtn').on('click', function() {
// Open the dropdown
$('.region_dropdown_content').show();
});
$('.region_dropdown_content a').on('click', function() {
// Add current location class to the button
$('.dropbtn').attr('class', 'dropbtn ' + $(this).find('span').data('class') );
// Close the dropdown
$('.region_dropdown_content').hide();
});
});
.region_dropdown_content {
display: none;
}
.region_dropdown_content a {
display: block;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="region_dropdown_section">
<button class="dropbtn">Select Region</button>
<div class="region_dropdown_content">
<span class="NA" data-class="NorthUS"></span>North America
<span class="EUW" data-class="EuWest"></span>Europe West
<span class="EUNE" data-class="EuNE"></span>Europe NE
</div>
</div>
Related
I've been working on a website for a bit and have come across a problem for the sticky header. When you scroll down it gets caught at the bottom of the hero image, and I have absolutely no clue why it's doing this Here is the issue in action (not promotion). All help appreciated, and sorry for a really long list of code.
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
* {
box-sizing: border-box;
}
body, html{
margin: 0;
font-family: HebrewRegular;
background-color: white;
height: 100%;
}
#font-face {
font-family: HebrewRegular;
src: url("Adobe Hebrew Regular.otf") format("opentype");
font-weight: bold;
}
.top-container{
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("Images/thai.png");
height:100%;
background-position-x: 50%;
background-position-y: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text{
text-align: center;
position:absolute;
top:40%;
left:50%;
transform: translate(-50%, -50%);
color:black;
font-size: 45px;
background-color: rgb(168, 123, 81);
padding:15px;
}
.content1 {
display: flex;
flex-wrap: wrap;
background-color: rgb(253, 207, 255);
justify-content:center;
}
.content1 > div {
background-color: #f1f1f1;
height:400px;
width: 300px;
margin: 20px;
margin-top: 50px;
text-align: center;
}
.content1 > div > h1{
font-size: 35px;
}
.content1 > div > p{
font-size: 15px;
}
.button5 {
background-color: #555555;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.header {
background: rgb(255, 255, 255);
color: #f1f1f1;
position: sticky;
z-index: 1;
text-align: center;
}
.sticky + .content {
padding-top: 102px;
}
<div class="header" id="myHeader">
<img src = "Images/charmlogoTrans.png" width = "100px" height = "100px">
</div>
<div class = "top-container">
<h1 class = "hero-text">Placeholder</h1>
</div>
<div class = "content1">
<div class = "about">
<img src = "https://picsum.photos/300/200">
<h1>About</h1>
<p>Learn more about Charm Thai</p>
<button class="button5">About</button>
</div>
<div class = "menu">
<img src = "https://picsum.photos/300/200">
<h1>Menu</h1>
<p>Check out our menu</p>
<button class="button5">Menu</button>
</div>
<div class = "contact">
<img src = "https://picsum.photos/300/200">
<h1>Contact</h1>
<p class = "contactDesc">Find out how to contact us</p>
<button class="button5">Contact</button>
</div>
</div>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
I inspect your code and I think because you have two conflicting classes the .header class is position:sticky and the class .sticky is fixed, you can try to remove the position sticky on the header and just let the .sticky be fixed like below. Let me know if this will work.
header {
background: rgb(255, 255, 255);
color: #f1f1f1;
position: fixed;
z-index: 1;
text-align: center;
top: 0;
right: 0;
left: 0;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
<div class="header sticky" id="myHeader">
<img src="Images/charmlogoTrans.png" width="100px" height="100px">
</div>
You should use position fixed instead of sticky. Along with that you also need to set the width to 100%.
With these changes, you don't need to have Javascript to handle the header position
* {
box-sizing: border-box;
}
body, html{
margin: 0;
font-family: HebrewRegular;
background-color: white;
height: 100%;
}
#font-face {
font-family: HebrewRegular;
src: url("Adobe Hebrew Regular.otf") format("opentype");
font-weight: bold;
}
.top-container{
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("Images/thai.png");
height:100%;
background-position-x: 50%;
background-position-y: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text{
text-align: center;
position:absolute;
top:40%;
left:50%;
transform: translate(-50%, -50%);
color:black;
font-size: 45px;
background-color: rgb(168, 123, 81);
padding:15px;
}
.content1 {
display: flex;
flex-wrap: wrap;
background-color: rgb(253, 207, 255);
justify-content:center;
}
.content1 > div {
background-color: #f1f1f1;
height:400px;
width: 300px;
margin: 20px;
margin-top: 50px;
text-align: center;
}
.content1 > div > h1{
font-size: 35px;
}
.content1 > div > p{
font-size: 15px;
}
.button5 {
background-color: #555555;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.header {
background: rgb(255, 255, 255);
color: #f1f1f1;
position: fixed; /* `sticky` to `fixed` */
width: 100%; /* set the width 100% */
z-index: 1;
text-align: center;
}
<div class="header" id="myHeader">
<img src = "Images/charmlogoTrans.png" width = "100px" height = "100px">
</div>
<div class = "top-container">
<h1 class = "hero-text">Placeholder</h1>
</div>
<div class = "content1">
<div class = "about">
<img src = "https://picsum.photos/300/200">
<h1>About</h1>
<p>Learn more about Charm Thai</p>
<button class="button5">About</button>
</div>
<div class = "menu">
<img src = "https://picsum.photos/300/200">
<h1>Menu</h1>
<p>Check out our menu</p>
<button class="button5">Menu</button>
</div>
<div class = "contact">
<img src = "https://picsum.photos/300/200">
<h1>Contact</h1>
<p class = "contactDesc">Find out how to contact us</p>
<button class="button5">Contact</button>
</div>
</div>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
The Nav dropdown menu works fine in Chrome, but in Safari the rest of the menu is covered by the image.
Why is this happening only in Safari? It displays just fine in Chrome.
Things I have attempted to no avail :
meddled with Z-index
tried using position:relative for the dropdown menu
added on -webkit-transform
;(function(){function t(){}function e(t){return null==t?t===l?d:y:I&&I in Object(t)?n(t):r(t)}function n(t){var e=$.call(t,I),n=t[I];try{t[I]=l;var r=true}catch(t){}var o=_.call(t);return r&&(e?t[I]=n:delete t[I]),o}function r(t){return _.call(t)}function o(t,e,n){function r(e){var n=d,r=g;return d=g=l,x=e,v=t.apply(r,n)}function o(t){return x=t,O=setTimeout(c,e),T?r(t):v}function i(t){var n=t-h,r=t-x,o=e-n;return w?k(o,j-r):o}function f(t){var n=t-h,r=t-x;return h===l||n>=e||n<0||w&&r>=j}function c(){
var t=D();return f(t)?p(t):(O=setTimeout(c,i(t)),l)}function p(t){return O=l,S&&d?r(t):(d=g=l,v)}function s(){O!==l&&clearTimeout(O),x=0,d=h=g=O=l}function y(){return O===l?v:p(D())}function m(){var t=D(),n=f(t);if(d=arguments,g=this,h=t,n){if(O===l)return o(h);if(w)return O=setTimeout(c,e),r(h)}return O===l&&(O=setTimeout(c,e)),v}var d,g,j,v,O,h,x=0,T=false,w=false,S=true;if(typeof t!="function")throw new TypeError(b);return e=a(e)||0,u(n)&&(T=!!n.leading,w="maxWait"in n,j=w?M(a(n.maxWait)||0,e):j,S="trailing"in n?!!n.trailing:S),
m.cancel=s,m.flush=y,m}function i(t,e,n){var r=true,i=true;if(typeof t!="function")throw new TypeError(b);return u(n)&&(r="leading"in n?!!n.leading:r,i="trailing"in n?!!n.trailing:i),o(t,e,{leading:r,maxWait:e,trailing:i})}function u(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)}function f(t){return null!=t&&typeof t=="object"}function c(t){return typeof t=="symbol"||f(t)&&e(t)==m}function a(t){if(typeof t=="number")return t;if(c(t))return s;if(u(t)){var e=typeof t.valueOf=="function"?t.valueOf():t;
t=u(e)?e+"":e}if(typeof t!="string")return 0===t?t:+t;t=t.replace(g,"");var n=v.test(t);return n||O.test(t)?h(t.slice(2),n?2:8):j.test(t)?s:+t}var l,p="4.17.5",b="Expected a function",s=NaN,y="[object Null]",m="[object Symbol]",d="[object Undefined]",g=/^\s+|\s+$/g,j=/^[-+]0x[0-9a-f]+$/i,v=/^0b[01]+$/i,O=/^0o[0-7]+$/i,h=parseInt,x=typeof global=="object"&&global&&global.Object===Object&&global,T=typeof self=="object"&&self&&self.Object===Object&&self,w=x||T||Function("return this")(),S=typeof exports=="object"&&exports&&!exports.nodeType&&exports,N=S&&typeof module=="object"&&module&&!module.nodeType&&module,E=Object.prototype,$=E.hasOwnProperty,_=E.toString,W=w.Symbol,I=W?W.toStringTag:l,M=Math.max,k=Math.min,D=function(){
return w.Date.now()};t.debounce=o,t.throttle=i,t.isObject=u,t.isObjectLike=f,t.isSymbol=c,t.now=D,t.toNumber=a,t.VERSION=p,typeof define=="function"&&typeof define.amd=="object"&&define.amd?(w._=t, define(function(){return t})):N?((N.exports=t)._=t,S._=t):w._=t}).call(this);
// This function will run a throttled script every 300 ms
var checkHeader = _.throttle(() => {
console.log('checkHeader');
// Detect scroll position
let scrollPosition = Math.round(window.scrollY);
// If we've scrolled 130px, add "sticky" class to the header
if (scrollPosition > 130){
document.querySelector('header').classList.add('sticky');
}
// If not, remove "sticky" class from header
else {
document.querySelector('header').classList.remove('sticky');
}
}, 300);
// Run the checkHeader function every time you scroll
window.addEventListener('scroll', checkHeader);
header{
padding: 0px;
overflow: hidden;
position: fixed;
top: 0px;
width: 100%;
height: 120px;
background-image: linear-gradient(to right, rgba(9, 9, 22, 0.6), rgba(9, 9, 22, 1.0));
}
main{
margin-top: 120px;
}
header.sticky {
background-color: black;
height: 90px;
}
header.sticky nav{
top: 30px;
}
header.sticky #logo{
font-size: 3em;
padding: 10px 0px 10px 10px;
}
header #logo{
font-size: 5em;
float: left;
}
.phi{
color: rgb(141, 180, 105);
}
.hilo{
color: white;
}
nav{
float: right;
position: fixed;
top: 50px;
left: 280px;
}
nav > a, .dropmenu{
padding-left: 0.5em;
padding-right: 0.5em;
}
nav a, .dropdown{
color: rgb(240, 137, 52);
font-size: 20px;
}
a{
text-decoration: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ddd;
min-width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
border-radius: 21px 21px 21px 21px;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: rgb(247, 185, 71);
border-radius: 21px 21px 21px 21px;
}
.dropdown:hover .dropdown-content {display: block;}
.dropmenu:hover {
cursor: pointer;
}
.universe {
background-image: url("../assets/img/universe.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 0px;
width: 100%;
height: 25em;
display: inline-block;
z-index: -999;
}
blockquote{
color: white;
font-size: 4em;
text-align: center;
margin: 2em auto;
}
.bgbutton, .bottominfo{
background-color: white;
}
.button{
display: inline-block;
border-radius: 4px;
background-color: rgb(240, 137, 52);
border: none;
color: #FFFFFF;
text-align: center;
font-size: 40px;
padding: 20px;
transition: all 0.5s ease;
cursor: pointer;
margin: 50px 180px;
}
.button span{
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s ease;
}
.button span:after{
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s ease;
}
.button:hover span{
padding-right: 25px;
}
.button:hover span:after{
opacity: 1;
right: 0;
}
<div class="wrapper">
<header>
<a href="index.html">
<div id="logo">
<span class="phi">Φ</span><span class="hilo">hilo</span>
</div>
</a>
<nav>
HOME
<div class="dropdown">
<a class="dropmenu">INTERIOR DESIGN</a>
<div class="dropdown-content">
OUR PHILOSOPHY
OUR INNOVATION
TESTIMONIALS
</div>
</div>
FENG SHUI
<div class="dropdown">
<a class="dropmenu">SERVICES</a>
<div class="dropdown-content">
SPACE PLANNING
FENG SHUI CONSULTATION
DESIGN & CARPENTRY
</div>
</div>
<div class="dropdown">
<a class="dropmenu">OUR MASTERPIECE</a>
<div class="dropdown-content">
RESIDENTIAL
RETAIL
CORPORATE & OFFICE
</div>
</div>
<div class="dropdown">
<a class="dropmenu">ABOUT</a>
<div class="dropdown-content">
CHIEF DESIGNER
MASTER PEK
OUR SUBSIDIARIES
FAQ
</div>
</div>
BLOG
</nav>
</header>
<main>
<div class="universe">
<section>
<blockquote>Where Feng Shui Meets Design</blockquote>
</section>
</div>
I have finally found the problem and came to a solution.
The problem was hidden at the header section.
After changing header - overflow: visible (from hidden), the dropdown menu in navbar is displaying properly now in Safari.
The reason Safari renders this so differently from Chrome is unfathomable.
I have a red button that is dynamically created and put into a li along with some user input. Looks like this
If the user clicks on the red button, the li element is prepended to another li like this
I want to be able to change the button from red to green and change the text from 'started' to 'unmark' when it moves to the second li and then back to red with the right text if that button is clicked again to move it back.
I'm not quite sure where to write the function to do this? Should I do this outside of my previous written functions or within each relevant ones? And if so, what would it look like because my button only has an id and no value, which is the method I've seen all over stackoverflow.
Thank you!
Edit: Code Snippet It looks like it's not showing the second column (configurations are all off)... does it work on other's people laptops?
// Dynamically creates a new li element with 'started' button after user puts in text and clicks a button similar to 'submit'
$(document).ready(
$("#new-item").on('click', function() {
// once the document loads, create new item with this function
var text = $('#task').val();
if (text != '') {
$('#todo-list').prepend("<li class='addedTask'> <button id='started' value='on'>Started</button>" + text + '</li>');
}
})
);
// Clicking on the 'started' button will move the task from 'todo-list' to 'doing-list'
$("#todo-list").on('click', "button", function() {
var completedItem = $(this).parent();
$('#doing-list').prepend($(completedItem));
});
// Clicking on the 'unmark' button will moe the task back from 'doing-list' to 'todo-list'
$("#doing-list").on('click', "button", function() {
var completedItem = $(this).parent();
$('#todo-list').prepend($(completedItem));
});
header {
background-color: #026aa7;
height: 30px;
text-align: center;
padding: 5px 8px;
}
header a {
height: 30px;
width: 80px;
text-align: center;
background-image: url(https://a.trellocdn.com/dist/images/header-logo-2x.01ef898811a879595cea.png);
background-repeat: no-repeat;
text-align: center;
display: inline-block;
background-size: 80px 30px;
}
body {
background-color: #0078c0;
margin: 0px;
font-family: sans-serif;
}
/*Add a card button*/
#new-item {
position: relative;
left: 40px;
top: 20px;
font-family: sans-serif;
padding: 4px;
width: 100px;
background-color: #ffffff;
border-radius: 4px;
}
/*User input*/
#task {
position: relative;
left: 25px;
top: 20px;
height: 20px;
width: 200px;
padding: 10px;
border-radius: 4px;
padding-left: 4px;
}
.column {
background-color: #E3E3E3;
min-height: 75px;
width: 25%;
display: inline-block;
position: relative;
margin: 5px;
vertical-align: top;
top: 75px;
right: 287px;
border-radius: 5px;
}
.column h1 {
font-size: 20px;
padding-left: 10px;
position: relative;
color: #393939;
margin: 5px;
}
li {
list-style-type: none;
margin-left: 8px;
text-indent: 10px;
}
li.addedTask {
border: 1px solid white;
border-radius: 4px;
padding: 15px;
width: 83%;
background-color: white;
margin-bottom: 15px;
}
/*Cards in the todo list*/
#started {
float: left;
background-color: #E65C5C;
border-radius: 6px;
border: none;
}
<head>
<title> HW03 Javascript and jQuery </title>
<link rel="stylesheet" href="_css/style.css">
</head>
<body>
<header>
</header>
<section>
<!-- create input tag for user input -->
<input type="text" id="task">
<!-- button takes input and adds a new element with content to 'list_do' -->
<button id="new-item"> Add a card </button>
<!-- ability to move items between list_todo and list_doing -->
<div class="column" id="to-do">
<h1> To Do </h1>
<li id="todo-list"></li>
</div>
<div class="column" id="doing">
<h1> Doing </h1>
<li id="doing-list"></li>
</div>
</section>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="_js/main.js"> </script>
</body>
you can do something like this:
// Dynamically creates a new li element with 'started' button after user puts in text and clicks a button similar to 'submit'
$(document).ready(
$("#new-item").on('click', function() {
// once the document loads, create new item with this function
var text = $('#task').val();
if (text != '') {
$('#todo-list').prepend("<li class='addedTask unmark'> <button id='started' value='on'>Started</button>" + text + '</li>');
}
})
);
// Clicking on the 'started' button will move the task from 'todo-list' to 'doing-list'
$("#todo-list").on('click', "button", function() {
var completedItem = $(this).parent();
change(completedItem, true);
$('#doing-list').prepend($(completedItem));
});
// Clicking on the 'unmark' button will moe the task back from 'doing-list' to 'todo-list'
$("#doing-list").on('click', "button", function() {
var completedItem = $(this).parent();
change(completedItem, false);
$('#todo-list').prepend($(completedItem));
});
function change(selector, isMarked) {
if(isMarked) {
$(selector).removeClass('unmark');
$(selector).addClass('mark');
} else {
$(selector).removeClass('mark');
$(selector).addClass('unmark');
}
}
header {
background-color: #026aa7;
height: 30px;
text-align: center;
padding: 5px 8px;
}
header a {
height: 30px;
width: 80px;
text-align: center;
background-image: url(https://a.trellocdn.com/dist/images/header-logo-2x.01ef898811a879595cea.png);
background-repeat: no-repeat;
text-align: center;
display: inline-block;
background-size: 80px 30px;
}
body {
background-color: #0078c0;
margin: 0px;
font-family: sans-serif;
}
/*Add a card button*/
#new-item {
position: relative;
left: 40px;
top: 20px;
font-family: sans-serif;
padding: 4px;
width: 100px;
background-color: #ffffff;
border-radius: 4px;
}
/*User input*/
#task {
position: relative;
left: 25px;
top: 20px;
height: 20px;
width: 200px;
padding: 10px;
border-radius: 4px;
padding-left: 4px;
}
.column {
background-color: #E3E3E3;
min-height: 75px;
width: 25%;
display: inline-block;
position: relative;
margin: 5px;
vertical-align: top;
top: 75px;
right: 287px;
border-radius: 5px;
}
.column h1 {
font-size: 20px;
padding-left: 10px;
position: relative;
color: #393939;
margin: 5px;
}
li {
list-style-type: none;
margin-left: 8px;
text-indent: 10px;
}
li.addedTask {
border: 1px solid white;
border-radius: 4px;
padding: 15px;
width: 83%;
background-color: white;
margin-bottom: 15px;
}
/*Cards in the todo list*/
#started {
float: left;
border-radius: 6px;
border: none;
}
.mark button {
background-color: green;
}
.unmark button {
background-color: #E65C5C;
}
<head>
<title> HW03 Javascript and jQuery </title>
<link rel="stylesheet" href="_css/style.css">
</head>
<body>
<header>
</header>
<section>
<!-- create input tag for user input -->
<input type="text" id="task">
<!-- button takes input and adds a new element with content to 'list_do' -->
<button id="new-item"> Add a card </button>
<!-- ability to move items between list_todo and list_doing -->
<div class="column" id="to-do">
<h1> To Do </h1>
<li id="todo-list"></li>
</div>
<div class="column" id="doing">
<h1> Doing </h1>
<li id="doing-list"></li>
</div>
</section>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="_js/main.js"> </script>
</body>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
body, html {
height: 100%;
}
.parallax {
background-image: url('../images/firstpage.jpg');
height: 100%;
margin: 0;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
button{
background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,0));
border: none;
font-family: "Roboto";
color: rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
text-decoration: none;
display: block;
display: inline-block;
font-size: 26px;
z-index: 1;
float: left;
}
.fixed{
position: fixed;
}
.textbackground
{
position: absolute;
left: 100px;
top: 150px;
}
.textbackgroundbar{
overflow: hidden;
width: 800px;
height: 50px;
background: linear-gradient(to right,rgba(255,255,255,30), rgba(255,0,0,0), rgba(255,255,255,30));
}
.dropbtn {
display: block;
color: black;
padding: 10px;
font-size: 24px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.1));
min-width: 800px;
min-height: 700px;
overflow: auto;
z-index: 1;
}
.dropdown-content a {
color: red;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.show {display:block;}
.dropdown-content1 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content1 {
display: block;
}
<div class="parallax">
<div class="textbackground">
<div class="textbackgroundbar">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<button onclick="myFunction()" class="dropbtn">Dropdown2</button>
</div>
</div>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
<div id="myDropdown" class="dropdown-content">
Home2
About2
Contact2
</div>
</div>
</div>
What is the problem here? It should dropdown 2 different things when i click the specific button .. but it doesn't.
If i click dropdown it shows home about contact. If i click dropdown 2, same home about contact, but i want it to be home2 about2 contact2.
The entire website contains 5 parallax slides. It is a project for school, to obtain some sort of license, so i'm really trying to understand that code ( and mostly i do ). I understand every "function" but when i combine them all... i just screw up.
So, please, be as clear as you can. Thank you !
P.S: Excuse my bad english, it's not my first language.. :(
You are using the same ID for two different div elements.
IDs must be unique.
You may solve this issue simply adding the id text and event object to your inline events:
<button onclick="myFunction('myDropdown1', event)" class="dropbtn">Dropdown</button>
<button onclick="myFunction('myDropdown2', event)" class="dropbtn">Dropdown2</button>
And so you can change your function in order to handle the parameters.
When clicking on a dropbtn button:
stop event propagation in order to avoid the window.onclick execution
hide/remove show class to the dropdown-content div if any
toggle the show class on the current dropdown-content div
When clicking on the window be sure to be outside the dropdown-content visible div and dropbtn buttons.
For more details take a look to:
var elt = element.closest(selectors);:
The Element.closest() method returns the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter. If there isn't such an ancestor, it returns null.
- >var result = element.matches(selectorString);
The snippet:
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction(eleId, event) {
//
// stop event propagation in order to avoid the window.onclick execution
//
event.stopPropagation();
//
// remove show class to previous shown div
//
document.querySelectorAll('.dropdown-content.show').forEach(function(ele, idx) {
ele.classList.remove("show");
});
//
// select by id using the param value
//
document.getElementById(eleId).classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
//
// if not a button and not a dropdown-content....
//
if (!event.target.matches('.dropbtn') && event.target.closest('.dropdown-content') == null) {
//
// remove show class to previous shown div
//
document.querySelectorAll('.dropdown-content.show').forEach(function(ele, idx) {
ele.classList.remove("show");
});
}
}
button{
background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,0));
border: none;
font-family: "Roboto";
color: rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
text-decoration: none;
display: block;
display: inline-block;
font-size: 26px;
z-index: 1;
float: left;
}
.fixed{
position: fixed;
}
.textbackground {
position: absolute;
left: 100px;
top: 150px;
}
.textbackgroundbar{
overflow: hidden;
width: 800px;
height: 50px;
background: linear-gradient(to right,rgba(255,255,255,30), rgba(255,0,0,0), rgba(255,255,255,30));
}
.dropbtn {
display: block;
color: black;
padding: 10px;
font-size: 24px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.1));
min-width: 800px;
min-height: 700px;
overflow: auto;
z-index: 1;
}
.dropdown-content a {
color: red;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.show {display:block;}
.dropdown-content1 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content1 {
display: block;
}
<div class="parallax">
<div class="textbackground">
<div class="textbackgroundbar">
<div class="dropdown">
<button onclick="myFunction('myDropdown1', event)" class="dropbtn">Dropdown</button>
<button onclick="myFunction('myDropdown2', event)" class="dropbtn">Dropdown2</button>
</div>
</div>
<div id="myDropdown1" class="dropdown-content">
Home
About
Contact
</div>
<div id="myDropdown2" class="dropdown-content">
Home2
About2
Contact2
</div>
</div>
</div>
I am trying to create a one page website with 7 navigation links. See my fiddle below.
The first navigation link is located in the top left corner, for now its text called "home". The other 6 links are located underneath my "middle" div.
I am trying to achieve the following effect:
the home page is always displayed upon landing
the 6 links underneath the "middle" div should appear from either the left side of the screen or right side simply depending on this logic: 1st transition enter screen from right side, 2nd transition enter screen from left side, all subsequent transitions to alternate sides.
Each transition should push the existing content off the screen instead of overlapping it.
If the navigation links are explored in sequence from page 1 to page 6, each time a link is clicked the transition should alternate sides. In my current fiddle (although not working correctly) the pages 1 through 6 will all enter the screen from right hand side and if you navigate backwards from 6 to 1 they all enter the screen from the left. This is not what I am looking for. I want alternating sides regardless of which link is clicked except home link in top left.
when the home link is clicked when viewing another links content the transition should appear from top of the screen and push the existing content off the bottom of the screen. This transition should happen behind all the other divs ie. header and footer.
If anyone is able to help me I would really appreciate it as this has taken me quite some time and research.
Here is my html:
<div class="main">
<div class="main_header">
<div id="navigation">
<a id="home_link" href="index.php">Home</a>
<form action="url" method="post" class="formTop">
<input type="text" class="login" Value="Email Address"onfocus="if (this.value == 'Email Address') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Email Address';}" />
<input type="password" class="login" value="Password" onFocus="if (this.value == 'Password') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Password';}" />
<input type="submit" class="submitButton" value="Log in" />
Sign Up
</form>
</div> <!--navigation-->
</div> <!--main_header-->
<div class="main_header_bottom"></div>
<div id="middle">
<div id="page1_content" class "content">Page 1 Content</div>
<div id="page2_content" class "content">Page 2 Content</div>
<div id="page3_content" class "content">Page 3 Content</div>
<div id="page4_content" class "content">Page 4 Content</div>
<div id="page5_content" class "content">Page 5 Content</div>
<div id="page6_content" class "content">Page 6 Content</div>
</div> <!--middle-->
<div class="sub_footer">
Page 1
Page 2
Page 3
Page 4
Page 5
Page 6
</div> <!--sub_footer-->
<div class="footer">
<p>| Contact |
<br />
<SCRIPT LANGUAGE="JavaScript">
today = new Date();
y0 = today.getFullYear();
</SCRIPT>Copyright © 2012-
<SCRIPT LANGUAGE="JavaScript">
document.write(y0);
</SCRIPT> MySampleSiteUnderSonstruction.com. All Rights Reserved</p>
</div> <!--footer-->
</div> <!--main-->
Here is my CSS
body {
background-color: #F5F5F5;
padding: 0;
margin: 0;
text-shadow: 1px 1px 1px #CCC;
font: 0.7em Arial, sans-serif;
line-height: 1.5em;
color: #454545;
overflow-x: hidden;
}
a {
color: #0E4D8B;
background: inherit;
}
a:hover {
color: #000;
background: inherit;
}
a.title {
color: #B41A1A;
background: #FFF;
}
h1 {
font: bold 2em Arial, Sans-Serif;
letter-spacing: -1px;
padding: 16px 0 0 8px;
margin: 0;
}
h2 {
margin: 0;
padding: 0;
font: normal 1.6em Arial, Sans-Serif;
letter-spacing: -1px;
}
h1 a {
color: #FFF;
background: inherit;
}
h1 a, h2 a {
text-decoration: none;
}
h1 a:hover, h2 a:hover {
color: #BFE1ED;
background: inherit;
}
h3 {
font: 90% Arial, Sans-Serif;
margin: 0 0 10px 0;
padding: 0;
color: #5f5f5f;
background: #FFF;
}
p {
align:center;
margin: 0 0 0px 0;
line-height: 1.5em;
}
.main {
margin: 0;
overflow: hidden;
}
.main_header {
background-color: #6E6D71;
height: 75px;
}
.main_header_bottom {
height: 20px;
}
#navigation {
height: 75px;
margin: 0;
padding-left: 100px;
box-shadow: inset 0 -20px 20px -20px #000;
}
#home_link {
float: left;
background-image: url(http://wwwdrumtranscriptions/new/home.png);
background-repeat: no-repeat;
height: 36px;
margin-top: 20px;
width: 40px;
}
.formTop {
float: right;
margin-top: 15px;
margin-right: 75px;
height: 45px;
padding: 5px 8px 0px;
}
.login {
border: 1px solid #333;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow:inset 0 0 4px ##333;
-webkit-box-shadow:inset 0 0 4px #333;
-moz-box-shadow:inset 0 0 4px #333;
color: #6E6D71;
font-size: 12px;
background-color: #CCC;
padding: 8px;
}
#middle {
background-color: blue;
padding-top: 5px;
height: 200px;
/* test only */
margin-left: 110%;
/* Start position: right outside */
-webkit-transition: margin-left 1s;
-moz-transition: margin-left 1s;
-o-transition: margin-left 1s;
transition: margin-left 1s;
}
#middle.page1_inside {
margin-left: 0;
}
#middle.page2_inside {
margin-left: -100%;
}
#middle.page3_inside {
margin-left: -200%;
}
#middle.page4_inside {
margin-left: -300%;
}
#middle.page5_inside {
margin-left: -400%;
}
#middle.page6_inside {
margin-left: -500%;
}
#middle.transition {
/* Effects only */
-webkit-transition: margin-left 1s;
-moz-transition: margin-left 1s;
-o-transition: margin-left 1s;
transition: margin-left 1s;
}
.content {
width: 100%;
margin-right: 10px;
}
#page1_content {
margin-left: 0;
background-color: black;
color: yellow;
}
#page2_content {
margin-left: 100%;
background-color: yellow;
color: black;
}
#page3_content {
margin-left: 200%;
background-color: purple;
color: red;
}
#page4_content {
margin-left: 300%;
background-color: green;
color: orange;
}
#page5_content {
margin-left: 400%;
background-color: red;
color: purple;
}
#page6_content {
margin-left: 500%;
background-color: purple;
color: green;
}
.sub_footer {
text-align: center;
}
.links {
display: inline-block;
padding: 0px 15px 0px 15px;
}
.footer {
clear: both;
text-align: center;
color: #808080;
background: #f0f0f0;
padding: 10px 0 5px 0;
border-top: 1px solid #eee;
}
.footer p {
line-height: 2em;
}
.footer a {
color: #4F4F4F;
background: #f0f0f0;
border-bottom: 1px dotted #808080;
text-decoration: none;
}
Here is my js
$(document).on("click", ".links", function () {
$("#middle").removeClass(); /* Remove all classes */
$("#middle").addClass("transition " + this.id + "_inside"); /* add 'transition' for effects and eg. 'home_inside' classes */
});
Here is my Fiddle
Thanks
I suggest using .animate() I had the same idea and when I tried it it worked perfectly also if you want to have the old ones pushed off use a <ul> inside a div with overflow: hidden; then on the li's use display: inline; and list-style-type: none;
Here is a working fiddle
http://jsfiddle.net/X4URc/3/
Here's an example of how to get this working page1-page6:
#middle.page2_inside #page2_content {
margin-left: 50%;
margin-top: -16px;
}
#middle.page3_inside #page3_content {
margin-left: 66.66%; // margin-left is [(pageNum-1)/pageNum]*100% = 100% * 2/3
margin-top: -64px;
}
#middle.page4_inside #page4_content {
margin-left: 75%; // 100% * 3/4
margin-top: -112px;
}
#middle.page5_inside #page5_content {
margin-left: 80%; // 100% * 4/5
margin-top: -160px;
}
#middle.page6_inside #page6_content {
margin-left: 83.33%; // 100% * 5/6
margin-top: -208px;
}
Demo