I have a page with an initial description, followed by 2 buttons, where the user can choose typeA or typeB. They work by "target": when the user clicks typeA comes the content relative to typeA, bellow the buttons; same to typeB.
typeA is the most common selection, then, when the page loads, a javascript emulates the click to typeA and opens respective content. To avoid hidden the initial description, there is another javascript to put the page at the top. Worked on Chrome and Edge, not on Firefox.
I would like to repeat the same process when the user clicks: opens the respective content, but positioning the page at the top, or, at least, showing the buttons. I thought event onClick calling the same js backToTop would worked - but not.
I put an alert on js and enters there but not execute: always keeps the content of the button selected in its better visibility.
I tried:
window.location.href = '#top';
window.scrollBy(0, -500);
document.html.scrollTop = document.documentElement.scrollTop = 0;
without success.
What am I doing wrong?
<head>
<meta charset="UTF-8">
<title>TOP PAGE TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body,html {margin-left:auto; margin-right:auto;width:70%; font-family:verdana; font-size:1.2em;}
.menuFAQ {background:#aaa; font-size:2em; width:100%;}
.menuFAQ ul {list-style-type:none; position:relative; margin-left:-40px; /* to avoid user agent chrome */}
.menuFAQ li {display:inline-block; margin-top:10px; margin-bottom:10px; width:49%; background:#fff; text-align:center; box-shadow:2px 3px 4px 0px rgba(170,170,170,1); font-weight:400; line-height:80px;}
.menuFAQ li a {display:block; color:#020062; background:#fff; font-weight:400; text-decoration:none;}
.menuFAQ li .active,.menuFAQ li:hover a {color:#fff; font-weight:400; background-image:linear-gradient(#165686, #0f3a5a); }
:target {color:#fff;font-size:1em;}
div.items>div:not(:target) {display:none}
div.items>div:target {display:block; margin-left:auto; margin-right:auto; color:#000; border:1px solid #aaa;}
</style>
</head>
<body>
<div id="top">Top Page</div>
<br>textExp1<br>textExp2<br>textExp3<br>textExp4<br>textExp5
<div class="menuFAQ">
<ul>
<li><a id="preferedFAQ" onclick="backToTop()" class="target" href="#typeA">TypeA</a></li>
<li><a onclick="backToTop()" class="target" href="#typeB">TypeB</a></li>
</ul>
</div>
<div class="items">
<div id="typeA">
<nav>
A long and variable text size to explain TypeA <br>text1A<br>text2A<br>text3A<br>text4A<br>text5A<br>text6A<br>text7A<br>text8A<br>text9A<br>textAA<br>textBA<br>textCA<br>textDA
<br>[...]
</nav>
</div>
</div>
<div class="items">
<div id="typeB">
<nav>
A long and variable text size to explain TypeB
<p>text1B</p><p>text2B</p><p>text3B</p>
<br>[...]
</nav>
</div>
</div>
<script>
const allTargetLinks = document.querySelectorAll('.target')
allTargetLinks.forEach(targetLink => {
targetLink.addEventListener('click', () => {
allTargetLinks.forEach(targetLink => {
targetLink.classList.remove('active')
})
targetLink.classList.add('active')
})
})
window.onload = function() {assignPreferedFAQ()};
function assignPreferedFAQ() {
document.getElementById("preferedFAQ").click();
backToTop();
};
function backToTop() {
//document.html.scrollTop = document.documentElement.scrollTop = 0;
//document.body.scrollTop = document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
};
</script>
You had a real mess there regarding how you process click events and href attribute, i.e:
You had onclick attribute on your links, and you were adding yet another listener to them in JS
You didn't event.preventDefault() in your function, and default browser behavior when you click on a link is to get you to its href path
I've cleaned up a bit and changed some things. Since we need to prevent default behavior :target selector will no longer work, so instead I did what you've already been doing with links, and added an active class to your content. clickHandler() will now remove and add class active as necessary. At the end just scroll to the top. Here's the snippet:
document.querySelectorAll('.target').forEach(targetLink => targetLink.addEventListener('click', clickHandler, false));
function clickHandler(ev) {
ev.preventDefault(); // prevent browser from automatically scrolling to href pos
if (!ev.currentTarget.classList.contains('active')) {
// disable active elements
document.querySelector('.target.active').classList.remove('active');
document.querySelector('.items div.active').classList.remove('active');
// add class to the clicked on button and its corresponding content tab
ev.currentTarget.classList.add('active');
// to prevent pointless string slicing below, you'd have to store ids somewhere else i.e in the data-id attribute
const id = ev.currentTarget.href.slice(ev.currentTarget.href.lastIndexOf('#') + 1);
document.getElementById(id).classList.add('active');
}
window.scrollTo(0,0);
}
* {
font-family: verdana;
font-size: 1em;
}
.menuFAQ {
background: #aaa;
font-size: 2em;
width: 100%;
}
.menuFAQ ul {
list-style-type: none;
text-align: center;
padding: 0;
/* to avoid user agent chrome */
}
.menuFAQ li {
display: inline-block;
width: 48%;
margin-top: 10px;
margin-bottom: 10px;
background: #fff;
text-align: center;
box-shadow: 2px 3px 4px 0px rgba(170, 170, 170, 1);
font-weight: 400;
line-height: 80px;
}
.menuFAQ li a {
display: block;
color: #020062;
background: #fff;
font-weight: 400;
text-decoration: none;
}
.menuFAQ li .active,
.menuFAQ li:hover a {
color: #fff;
font-weight: 400;
background-image: linear-gradient(#165686, #0f3a5a);
}
div.items>div {
display: none;
}
div.items>div.active {
display: block;
margin-left: auto;
margin-right: auto;
color: #000;
border: 1px solid #aaa;
}
<div id="top">Top Page</div>
<br>textExp1<br>textExp2<br>textExp3<br>textExp4<br>textExp5
<div class="menuFAQ">
<ul>
<li><a class="target active" href="#typeA">TypeA</a></li>
<li><a class="target" href="#typeB">TypeB</a></li>
</ul>
</div>
<div class="items">
<div class="active" id="typeA">
<nav>
A long and variable text size to explain TypeA <br>text1A<br>text2A<br>text3A<br>text4A<br>text5A<br>text6A<br>text7A<br>text8A<br>text9A<br>textAA<br>textBA<br>textCA<br>textDA
<br>[...]
</nav>
</div>
</div>
<div class="items">
<div id="typeB">
<nav>
A long and variable text size to explain TypeB
<p>text1B</p>
<p>text2B</p>
<p>text3B</p>
<br>[...]
</nav>
</div>
</div>
Note that instead of artificially clicking at the page load, now your content just loads with class active.
Hope this help you.
< script >
window.onload = function() {
document.getElementById("preferedFAQ").click();
backToTop();
};
function backToTop() {
document.documentElement.scrollTop = document.body.scrollTop = 0;
//alert("enter backToTop");
var elmnt = document.getElementById("top");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;
}; <
/script>
body,
html {
margin-left: auto;
margin-right: auto;
width: 70%;
font-family: verdana;
font-size: 1.2em;
}
.menuFAQ {
background: #aaa;
font-size: 2em;
width: 100%;
}
.menuFAQ ul {
list-style-type: none;
position: relative;
margin-left: -40px;
/* to avoid user agent chrome */
}
.menuFAQ li {
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
width: 49%;
background: #fff;
text-align: center;
box-shadow: 2px 3px 4px 0px rgba(170, 170, 170, 1);
font-weight: 400;
line-height: 80px;
}
.menuFAQ li a {
display: block;
color: #020062;
background: #fff;
font-weight: 400;
text-decoration: none;
}
.menuFAQ li .active,
.menuFAQ li:hover a {
color: #fff;
font-weight: 400;
background-image: linear-gradient(#165686, #0f3a5a);
}
:target {
color: #fff;
font-size: 1em;
}
div.items>div:not(:target) {
display: none
}
div.items>div:target {
display: block;
margin-left: auto;
margin-right: auto;
color: #000;
border: 1px solid #aaa;
}
<div id="top">Top Page</div> <br>textExp1<br>textExp2<br>textExp3<br>textExp4<br>textExp5<br>textExp6<br>textExp7<br>textExp8<br>textExp9<br>textExpA<br>textExpB<br>textExpC<br>textExpD
<br>textExpE
<div class="menuFAQ">
<ul>
<li><a id="preferedFAQ" onclick="backToTop()" class="target" href="#typeA">TypeA</a></li>
<li><a onclick="backToTop()" class="target" href="#typeB">TypeB</a></li>
</ul>
</div>
<div class="items">
<div id="typeA">
<nav>
A long and variable text size to explain TypeA <br>text1A<br>text2A<br>text3A<br>text4A<br>text5A<br>text6A<br>text7A<br>text8A<br>text9A<br>textAA<br>textBA<br>textCA<br>textDA
<br>[...]
</nav>
</div>
</div>
<div class="items">
<div id="typeB">
<nav>
A long and variable text size to explain TypeB
<p>text1B</p>
<p>text2B</p>
<p>text3B</p>
<br>[...]
</nav>
</div>
</di
Related
I came across this JSFiddle online whilst searching for a solution. It almost does what I need except I need to start with the div being hidden. I've tried playing around with it but being new to JS I've not had much luck.
I thought I'd put this here as a starting point to see if anyone could advise on the route I would need to take?
Any help would be appreciated.
$(document).ready(function () {
$('.pbox:gt(0)').hide();
$('#menu').on('click', 'a', function () {
$('.current').not($(this).closest('li').addClass('current')).removeClass('current');
var $this = $(this);
// fade out all open subcontents
$('.pbox:visible').fadeOut('slow', function () {
$('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
});
});
});
ul#menu {
margin:0;
padding:0;
list-style-type:none;
text-align: center;
}
ul#menu li {
position:relative;
float:left;
border-bottom:4px solid #efefef;
margin-right: 10px;
padding-right: 0px;
padding-bottom: 5px;
display: inline-block;
}
ul#menu .current {
border-bottom:4px solid #3d496a;
}
ul#menu li:hover {
border-bottom:4px solid #3d496a;
}
ul#menu li a {
padding:2px 2px;
text-decoration:none;
font:bold 8px Verdana, Georgia, "Times New Roman", Times, serif;
color:#68759c;
}
ul#menu li a:hover {
color:#8895b8;
border:none;
}
#div1 {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li>Description
</li>
<li>Shipping and payment
</li>
<li>Returns
</li>
<li>Feedback
</li>
</ul>
<br>
<br>
<div class="pbox" id="div1">First Div</div>
<div class="pbox" id="div2">Second Div</div>
<div class="pbox" id="div3">Third Div</div>
<div class="pbox" id="div4">Fourth Div</div>
Just add display: none; in css to an element which you want to be hidden.
And remove class="active" from first li so that it's not chosen.
And modify js a little bit. See your function only shows a div if previously it hid. And if you start with all hidden it won't hide anything therefore it won't show anything.
$(document).ready(function() {
$('.pbox:gt(0)').hide();
$('#menu').on('click', 'a', function() {
$('.current').not($(this).closest('li').addClass('current')).removeClass('current');
var $this = $(this);
// fade out all open subcontents
var visibleElements = $('.pbox:visible');
if (visibleElements.length <= 0) {
$('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
} else {
visibleElements.fadeOut('slow', function() {
$('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
});
}
});
});
ul#menu {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
ul#menu li {
position: relative;
float: left;
border-bottom: 4px solid #efefef;
margin-right: 10px;
padding-right: 0px;
padding-bottom: 5px;
display: inline-block;
}
ul#menu .current {
border-bottom: 4px solid #3d496a;
}
ul#menu li:hover {
border-bottom: 4px solid #3d496a;
}
ul#menu li a {
padding: 2px 2px;
text-decoration: none;
font: bold 8px Verdana, Georgia, "Times New Roman", Times, serif;
color: #68759c;
}
ul#menu li a:hover {
color: #8895b8;
border: none;
}
.pbox {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li>Description
</li>
<li>Shipping and payment
</li>
<li>Returns
</li>
<li>Feedback
</li>
</ul>
<br>
<br>
<div class="pbox" id="div1">First Div</div>
<div class="pbox" id="div2">Second Div</div>
<div class="pbox" id="div3">Third Div</div>
<div class="pbox" id="div4">Fourth Div</div>
EDIT
If you want to hide all the divs on click anywhere else here is how to:
It's actually pretty easy.
We bind click event to document and check what was clicked.
If it was div with content (#div1, #div2 etc.) or if it is menu element we do not want to hide the div, but else we do.
$(document).on('click', function(e) {
if (!$(e.target).hasClass("pbox") && $(e.target).closest("#menu").length <= 0) {
$('.pbox').fadeOut('slow');
$("#menu .current").removeClass("current");
}
});
e.target returns an element which (in this case) was clicked. If it has class pbox it means this is a div with content.
Second condition is menu element. If .closest() function
Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
returns an element with id="menu" it means that we clicked on an element inside the menu.
Notice the exclamation mark. It means that if the condition is false return true. So if we did not click the div with content and if we did not click menu element then we hide the div.
I hope you understand what I mean :)
$(document).ready(function() {
$('#menu').on('click', 'a', function() {
$('.current').not($(this).closest('li').addClass('current')).removeClass('current');
var $this = $(this);
// fade out all open subcontents
var visibleElements = $('.pbox:visible');
if (visibleElements.length <= 0) {
$('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
} else {
visibleElements.fadeOut('slow', function() {
$('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
});
}
});
$(document).on('click', function(e) {
if (!$(e.target).hasClass("pbox") && $(e.target).closest("#menu").length <= 0) {
$('.pbox').fadeOut('slow');
$("#menu .current").removeClass("current");
}
});
});
ul#menu {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
ul#menu li {
position: relative;
float: left;
border-bottom: 4px solid #efefef;
margin-right: 10px;
padding-right: 0px;
padding-bottom: 5px;
display: inline-block;
}
ul#menu .current {
border-bottom: 4px solid #3d496a;
}
ul#menu li:hover {
border-bottom: 4px solid #3d496a;
}
ul#menu li a {
padding: 2px 2px;
text-decoration: none;
font: bold 8px Verdana, Georgia, "Times New Roman", Times, serif;
color: #68759c;
}
ul#menu li a:hover {
color: #8895b8;
border: none;
}
.pbox {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li>Description
</li>
<li>Shipping and payment
</li>
<li>Returns
</li>
<li>Feedback
</li>
</ul>
<br>
<br>
<div class="pbox" id="div1">First Div</div>
<div class="pbox" id="div2">Second Div</div>
<div class="pbox" id="div3">Third Div</div>
<div class="pbox" id="div4">Fourth Div</div>
i just delete the class "current". but first div still appear, so i create another div, empty, and it works :)
$(document).ready(function () {
$('.pbox:gt(0)').hide();
$('#menu').on('click', 'a', function () {
$('.current').not($(this).closest('li').addClass('current')).removeClass('current');
var $this = $(this);
// fade out all open subcontents
$('.pbox:visible').fadeOut('slow', function () {
$('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
});
});
});
ul#menu {
margin:0;
padding:0;
list-style-type:none;
text-align: center;
}
ul#menu li {
position:relative;
float:left;
border-bottom:4px solid #efefef;
margin-right: 10px;
padding-right: 0px;
padding-bottom: 5px;
display: inline-block;
}
ul#menu .current {
border-bottom:4px solid #3d496a;
}
ul#menu li:hover {
border-bottom:4px solid #3d496a;
}
ul#menu li a {
padding:2px 2px;
text-decoration:none;
font:bold 8px Verdana, Georgia, "Times New Roman", Times, serif;
color:#68759c;
}
ul#menu li a:hover {
color:#8895b8;
border:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li>Description
</li>
<li>Shipping and payment
</li>
<li>Returns
</li>
<li>Feedback
</li>
</ul>
<br>
<br>
<div class="pbox" id="div5"></div>
<div class="pbox" id="div1">First Div</div>
<div class="pbox" id="div2">Second Div</div>
<div class="pbox" id="div3">Third Div</div>
<div class="pbox" id="div4">Fourth Div</div>
Delete class="current", so none is active at the beginning,
and then set the first div to display:none;
Hello people I created two divs and when i hover to h3 shows me something. I want display this only when i click on h3. How i can do this?
How to change hover to click? When i do this doesn't working.
Sorry for my bad language.
$(document).ready(function () {
$('li.requirement').hover(function () {
$(this).find('span').show();
}, function () {
$(this).find('span').hide();
});
});
#wrap {
background: #e7e7e7;
padding: 0px;
text-align: center;
width: 100%;
}
#left, #right {
background: #ccc;
display: inline-block;
padding: 20px;
}
li {
list-style-type: none;
padding: 0px;
margin: 0px;
}
span.lewy {float:right; background:red; padding:20px;}
span.prawy {float:left; background:red; padding:20px;}
h3 {text-align:center;}
h3.praw {float:left;}
h3.lew {float:right;}
.calosc {max-width:500px; margin: 0 auto; border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<div id="left"><div class="lef">
<li class="requirement" id="requirement_1">
<h3 class="lew">SPR</h3>
<span class="fr drag lewy" style="display:none;">1 kontakt</span>
</li>
</div></div>
<div id="right"><div class="praf">
<li class="requirement" id="requirement_2">
<h3 class="praw">SPR 2</h3>
<span class="fr drag prawy" style="display:none;">2 kontakt</span>
</li>
</div></div>
</div>
You can use .on('click', function(){}); and then inside this function you check to see if it's already visible or not. Take a look here
EDIT
As you want to be just the <h3> clickable, i made an adjustment in the code below, and now you need to cehck for the visibility of the h3 parent, because now the context of this is now h3 and no more the li
$(document).ready(function () {
$('.clickableH3').on('click', function () {
if ($(this.parentElement).find('span').is(":visible")){
$(this.parentElement).find('span').hide();
}else{
$(this.parentElement).find('span').show();
}
});
});
#wrap {
background: #e7e7e7;
padding: 0px;
text-align: center;
width: 100%;
}
#left, #right {
background: #ccc;
display: inline-block;
padding: 20px;
}
li {
list-style-type: none;
padding: 0px;
margin: 0px;
}
span.lewy {float:right; background:red; padding:20px;}
span.prawy {float:left; background:red; padding:20px;}
h3 {text-align:center;}
h3.praw {float:left;}
h3.lew {float:right;}
.calosc {max-width:500px; margin: 0 auto; border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<div id="left"><div class="lef">
<li class="requirement" id="requirement_1">
<h3 class="lew clickableH3">SPR</h3>
<span class="fr drag lewy" style="display:none;">1 kontakt</span>
</li>
</div></div>
<div id="right"><div class="praf">
<li class="requirement" id="requirement_2">
<h3 class="praw clickableH3">SPR 2</h3>
<span class="fr drag prawy" style="display:none;">2 kontakt</span>
</li>
</div></div>
</div>
Well you see, in your js code, where you have "hover" ? Well you type "click" there instead ...
The jQuery hover function can have 2 parameters, which is your case. The first one for the hover, the second is for the unhover
So if you want to be able to close and hide on click I advise to use some css and use toggleClass. But if you wan to keep only javascript you can do like this:
$(document).ready(function () {
$('li.requirement').click(function () {
var $elm = $(this);
if( $elm.hasClass('showed') ){
$elm.find('span').removeClass('showed').hide();
}else{
$elm.find('span').addClass('showed').show();
}
});
});
I wrote some code with three things in mind:
Highlighting a selection's border using 'on click'.
Selecting one item will remove the highlight from the other item.
The ability to deselect each item on click.
I've managed to get everything working for the most part, but I don't particularly like how complex the code is for the radial dot that appears when one item is selected.
Below is an example of what I'm talking about, particularly I'm looking for ways to refactor the code below into something a little more legible (shorter).
$(this).children('.radial').children().toggleClass('checked').parents('.itembox')
.siblings().children('.radial').children().removeClass('checked');
Here's a working example for more context (line 10):
var raceInternet = false;
var racePhone = false;
var raceTv = false;
$(function() {
var $targetDiv = $('#race-internet > .itembox');
var $radialDot = $('.radial > .center-dot');
$targetDiv.on('click', function() {
$(this).toggleClass('user-selected').siblings().removeClass('user-selected');
//Is it possible to refactor Line 10?
$(this).children('.radial').children().toggleClass('checked').parents('.itembox').siblings().children('.radial').children().removeClass('checked');
if ($targetDiv.is('.user-selected')) {
raceInternet = true;
} else {
raceInternet = false;
}
})
})
.itembox-container {
display: flex;
}
.boxes-2 {
width: calc((100% - 25px)/2);
margin: 10px;
padding: 10px;
}
.itembox {
position: relative;
display: inline-block;
border: 5px solid #e8e8e8;
border-radius: 10px;
cursor: pointer;
}
.user-selected {
border: 5px solid #E16E5B;
}
.itembox h4 {
color: #22ddc0;
font-weight: 700;
}
span.price {
display: inline-block;
font-weight: 400;
float: right;
color: #22ddc0;
}
.itembox > ul {
list-style: none;
}
.itembox > ul > li {
line-height: 3;
}
.radial {
position: absolute;
float: right;
height: 35px;
width: 35px;
padding: 2px;
border: 5px solid #e8e8e8;
border-radius: 50%;
top: 43%;
right: 10px;
}
.center-dot {
display: none;
position: relative;
height: 21px;
width: 21px;
background-color: #E16E5B;
border-radius: 50%;
}
.checked {
display: block;
}
.prime-aux:first-of-type {
top: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<!-- Primary Content Container -->
<div class="prime-aux">
<div id="race-internet" class="itembox-container">
<div class="itembox boxes-2">
<h4>Gigabit Internet <span class="price">$60/mo</span></h4>
<ul>
<li>1,000 Mbps</li>
<li>No data caps</li>
</ul>
<div class="radial">
<div class="center-dot"></div>
</div>
</div>
<div class="itembox boxes-2">
<h4>Basic Internet <span class="price">$25/mo</span></h4>
<ul>
<li>25 Mbps</li>
<li>No data caps</li>
</ul>
<div class="radial">
<div class="center-dot"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Primary Content Container End -->
View on JS Fiddle
You can eliminate a lot of your jQuery by just leveraging CSS. Typically, if I want to toggle a feature, I have it either display: block; or display: none; based upon a CSS selector. Then, I just use jQuery to toggle the parent element's class name. So for example:
.item.selected .checkmark {
display: block;
}
.item .checkmark {
display: none;
}
$('.item').click(function(){ $(this).toggleClass('selected') });
JSFiddle
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 don't probably know how to search for this precise question and I haven't found anything, so I am sorry if there is already asked somewhere.
I only have 3 buttons and the index is the "Inicio" page. I've applied a :hover to the buttons, but I want to keep it fixed for the button of the displayed page. Obviously, I want to have "Inicio" in this state at the beginning.
(jsfiddle below)
<!-- menu -->
<nav id="nav">
<ul>
<a id=inicio href=#><li class="boton"><p class="text_menu">INICIO</p></li></a>
<a id=productos href=#><li class="boton"><p class="text_menu">PRODUCTOS</p></li></a>
<a id=contacto href=#><li class="boton"><p class="text_menu">CONTACTO</p></li></a>
</ul>
</nav>
#nav {
padding-top: 27px;
padding-left: 25%;
}
#nav ul li {
list-style:none;
display:inline-block;
margin-left: 4%;
text-align: center;
font-family: 'Dosis', sans-serif;
font-size: 100%;
color: #FFF;
}
.text_menu {
padding-top: 5px;
}
.boton {
width: 15%;
height: 57px;
background-color: #0099ff;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
border: 0px solid #000000;
}
.boton:hover {
background-color: #0033ff;
}
Here is a jsfiddle:
http://jsfiddle.net/7jbUj/
Thanks for your responses.
U can simply add class like .hovered to current button like
HTML:
<li class="boton hovered"><p class="text_menu">CONTACTO</p></li></a>
CSS:
.hovered {
background-color: #0033ff;
}
UPD: Fiddle
UPD2: For page changing
U simply can add and remove class on `click' like:
$('nav ul a').on('click', function(){
$('nav ul a li.hovered').removeClass('hovered');
$(this).children('li').addClass('hovered');
})
Fiddle2
If you want to use without JQuery, you have to use it in javascript
HTML :
<a id="mnu1" class="mnu hovered" src="#" onclick="makeSelected('mnu1')"> One </a>
<a id="mnu2" class="mnu" src="#" onclick="makeSelected('mnu2')"> Two </a>
<a id="mnu3" class="mnu" src="#" onclick="makeSelected('mnu3')"> Three </a>
CSS :
.mnu{
background-color : #451;
margin-left:20px;
font-size:30px;
}
a:hover{
background-color:#ccc;
}
.hovered{
background-color:#ccc;
}
JS :
var prev_mnuid= "mnu1";
function makeSelected(mnuid){
document.getElementById(prev_mnuid).className = "mnu";
document.getElementById(mnuid).className = "mnu hovered";
prev_mnuid=mnuid;
}
Fiddle : http://jsfiddle.net/rajaveld/t31zc8jx/