I'm using an Accordion which is built of buttons, I've got the 'plus' and 'minus' signs as ':after'
So far I've tried 'justify-content: center' within the button, I've also tried 'vertical-align: middle', neither had any effect and when I tried to wrap a div around the button to implement the styling on that button, it stopped the accordion from working.
I also am having trouble when on a thin screen the plus sign is coming into the text, it's currently floating to the right but there is no designated space between them to stop a crossover.
All the code I've tried to use to centrally align this element i haven't got to work, please see below:
Here is the code:]
HTML:
<button class="accordion">Where is your company located?</button>
<div class="panel">
<p class="zpa-regular2">We are located in the heart of San Francisco, California USA! We do have shipping warehouses located in the USA, Europe, and Asia to ensure the quickest delivery for your location.</p>
</div>
<button class="accordion">What is the warranty and return policy?</button>
<div class="panel">
<p class="zpa-regular2"><span>We have a Risk-Free Policy. During this promotion - you can try the product for 30 days - if you decide for whatever reason this is not for you then you can return the device for a full refund.</span></p>
</div>
<button class="accordion">Does the product have a specific method of operation? Is it easy to use?</button>
<div class="panel">
<p class="zpa-regular2">Yes! It is very simple and easy to use. You will receive a detailed user manual with positions and pointers to maximize your results. :)</p>
</div>
CSS:
.accordion {
background-color: white;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
color: #262626;
font-size: 18px;
font-weight: 700;
font-style: normal;
font-family: 'Lato';
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
background-color: white;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 18px;
font-family: 'Lato';
color: #262626;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}
The javascript, incase it helps at all:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
Thanks if you can help.
Dale.
May be this can help you. I added an <span> due to control both parts and then display: flex;
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
.accordion {
background-color: red;
color: #444;
cursor: pointer;
width: 100%;
text-align: left;
outline: none;
transition: 0.4s;
color: #262626;
font-size: 18px;
font-weight: 700;
font-style: normal;
font-family: 'Lato';
border: 0;
margin: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
background-color: white;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion span:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 18px;
font-family: 'Lato';
color: #262626;
padding-left: 20px;
}
.accordion.active span:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}
<button class="accordion">Where is your company located? <span></span></button>
<div class="panel">
<p class="zpa-regular2">We are located in the heart of San Francisco, California USA! We do have shipping warehouses located in the USA, Europe, and Asia to ensure the quickest delivery for your location.</p>
</div>
<button class="accordion">What is the warranty and return policy?<span></span></button>
<div class="panel">
<p class="zpa-regular2"><span>We have a Risk-Free Policy. During this promotion - you can try the product for 30 days - if you decide for whatever reason this is not for you then you can return the device for a full refund.</span></p>
</div>
<button class="accordion">Does the product have a specific method of operation? Is it easy to use?<span></span></button>
<div class="panel">
<p class="zpa-regular2">Yes! It is very simple and easy to use. You will receive a detailed user manual with positions and pointers to maximize your results. :)</p>
</div>
This answer is based on the practical behavior of concerned css properties to achieve vertical align of minus sign and plus sign inside button(I haven't tried for other elements like span or div but I believe it works the same, if not pardon my guess) upon increasing the font-size(to any extent) regardless of font-family used.
Consider this an alternative to what has already been answered by Alberto Rhuetras.
Use Case: Sometimes you want bigger buttons with a plus or minus sign inside it. But the font-size is too small for the button. As you increase the font-size of the button, the plus and minus sign fails to align vertically as was the case with me. That's when I came up with the following solution.
Note: I could't find a solution anywhere else, so I ended up with this solution. I am open to any say you have on the solution so feel free to leave some comments:)
/* common style */
.minus, .plus {
height: 50px;
width: 200px;
background: #216AFF;
color: white;
}
.minus {
font-size: 70px;
display: flex;
justify-content: center;
line-height: 35px;
}
.plus {
font-size: 50px;
display: flex;
justify-content: center;
line-height: 45px;
}
.demo {
font-size: 18px;
padding: 18px;
width: 100%;
text-align: left;
display: flex;
}
.demo::after {
content: "\02795";
font-size: 18px;
float: right;
line-height: 23px;
justify-content: center;
align-content: flex-start;
}
<button class="minus">-</button>
<br>
<button class="plus">+</button>
<br>
<button class="demo">Does the product have a specific method of operation? Is it easy to use? What is the warranty and return policy?</button>
Use display-flex on the button and use the value of line-height to position the plus or minus sign vertically within the button. Increase in line-height value moves the signs downward and and decrease in line-height value moves the signs upward. Thanks!
Related
I've been relentlessly trying to resize the text of my buttons to fit within the parent div, and have had no success with fitty and other external plug-ins which work inconsistently or not at all.
I'm attempting to make my own simplified version that simply reduces the font-size of my answer_button_1_text element by 1px until it's smaller than the parent answer_button_1 element.
Using clientWidth returns 281 for answer_button_1 and 253 for answer_button_1_text regardless of if the text in the button extends past the boundaries.
How can I get the actual length of the text?
I've attempted to use the canvas.measureText method, but am unfamiliar with using canvases and when I apply a canvas to the entire HTML in this codepen, none of the elements on my screen are visible. I'm sure I'm making a basic mistake, but if anyone could help me find a way to return the actual space that my answer_button_1_text element takes up, I would really appreciate it.
Here is a codepen:
https://codepen.io/TheNomadicAspie/pen/oNWpZrg
Here is my code:
<button id="button" class="button lower-button">
<div id="button_text">Really long button</div>
</button>
<div id="question_text">Test</div>
body {
background-color: gray;
}
.button {
display: block;
position: relative;
height: 20%;
width: 10%;
background-color: black; /*Button Color*/
color: #f5f5f5;
font-family: open_sans;
font-size: 1.5rem;
font-size: min(6vw, clamp(1rem, 4.5vh, 4rem));
border-radius: 20px;
text-decoration: none;
box-shadow: 0.1em 0.2em black;
transition: 0.2s;
}
.lower-button {
white-space: nowrap;
}
#question_text {
position: absolute;
color: blue;
font-size: 40px;
margin-top: 100px;
}
const question_text = document.getElementById('question_text')
let text_var = button.clientWidth + ' ' + button_text.clientWidth
question_text.innerText = text_var
I have a button with a className 'actions'
This button shows the
css styling from '.actions' but not '.actions button' . I expect both to be included.
This syntax here works for every element except the button.
The full code is at: https://github.com/keithmacinnis/for-play-activity-browser
Activity.module.css
.item {
margin: 1rem 0;
}
.image {
width: 100%;
height: 20rem;
overflow: hidden;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
.image img {
width: 100%;
object-fit: cover;
}
.content {
text-align: center;
padding: 1rem;
}
.content h3 {
font-size: 1.25rem;
color: #2c292b;
}
.actions {
padding: 1.5rem;
text-align: center;
}
.actions button {
font: inherit;
cursor: pointer;
color: #77002e;
border: 1px solid #77002e;
background-color: transparent;
padding: 0.5rem 1.5rem;
border-radius: 4px;
}
.actions button:hover,
.actions button:active {
background-color: #ffe2ed;
}
Activity.js
import css from "./Activity.module.css";
import Card from "./Card";
function Activity(props) {
return (
<li className={css.item}>
<Card>
<div className={css.image}>
<img src={props.activity.image} alt={props.activity.title} />
</div>
<div className={css.content}>
<h3>{props.activity.title}</h3>
<address>{props.activity.address}</address>
<p>{props.activity.description}</p>
</div>
<div>
<button className={css.actions}>Join Activity</button>
</div>
</Card>
</li>
);
}
export default Activity;
Again, I'm unsure why my button receives the stylings for padding and text-align, but the eight properties that follow are ignored.
I do not have much experience with creating selector combinations that include an element type and className, but I just did a little experimenting on my own, and it appears that these may be considered sibling selectors (as opposed to one being the child of the other). Also, it seems like the element type may have to come before the className.
It looks like if you write the selectors like one of these two ways, it should work:
button ~ .actions {
*styles*
}
button + .actions {
*styles*
}
You can read more about combinators here:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
To use .class selector for a specific element. You need Start with the element name first, then write the period (.) character, followed by the name of the class... like this
Button.actions {
font: inherit;
cursor: pointer;
color: #77002e;
border: 1px solid #77002e;
background-color: transparent;
padding: 0.5rem 1.5rem;
border-radius: 4px;
}
If that doesn't work. It might be a problem with the browser using your previous css version from the cash and not the updated styling. To solve it use this:
Ctrl + F5 On Mac OS (in Chrome) use: Cmd + Shift + R .
This will force your browser to reload and refresh all the resources related to the website's page.
It was fixed by this change in Activity.js :
new code:
<div className={css.actions}>
<button >Join Activity</button>
</div>
old code:
<div>
<button className={css.actions}>Join Activity</button>
</div>
Resources and Context
https://jsfiddle.net/wwx100f8/69/
I am trying to create an expandable/collapsable accordion to hold restaurant food options, a digital menu similar to Just-Eat or Hungry House.
Using W3Schools, I have tried to implement the Animated Accordion to make this digital food menu.
https://www.w3schools.com/howto/howto_js_accordion.asp
The Problem
As you can see in my code, I have attempted to 'nest' the <button class="accordion"> within another.
However, the nested accordion once expended, does not then expand it's parent container.
This results in the child accordion's content being hidden or cut off.
This issue is resolved by collapsing the parent accordion, after the child accordion has been opened. But this is inconvenient for the user.
What I Think I Need
I think I need some way to set the css so that the accordion containers fit around the child content. They appear to be fixed until clicked on.
I'm also open to any suggestions about how else I may achieve this 'digital menu'.
My Example Code
https://jsfiddle.net/wwx100f8/69/
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<button class="accordion">Section 1</button>
<div class="panel">
<p>The Text in Section 1</p>
<button class="accordion">Section 2</button>
<div class="panel">
<p>The Text in Section 2</p>
</div>
</div>
instead of setting an absolute value for max-height of your div.panel, try setting max-height to initial, like this.
however, doing that breaks your animation, you can either switch to using jquery for animation (.slideUp/.slideDown or .slideToggle) which doesn't have this issue, or try some trickery with timers: https://jsfiddle.net/wwx100f8/80/
I built a navbar in HTML and also some Divs which are populated with a bunch of content that pertains to each nav element.
What I want to do is show the div which pertains to the selected nav element when it is clicked and hide the other divs that pertain to the other nav elements.
Basically what needs to happen is when a user clicks on a Nav Item, the class for that nav item needs to be set to 'navItem active on' in the html. Not sure if this is something that happens automatically or not.
After that, the display property defined in the CSS for the content panel of that nav item needs to be changed to 'block' and all other content panels should then have their 'display' property changed to 'none' so that they are not displayed in the page.
In the example given, I only have two content panels defined in the CSS and HTML (Capabilities and Tutorials), but each navItem will receive it's own content panel which should be toggled on when it is clicked.
I really have no idea where to begin with this. I'm pretty sure this requires JavaScript but this is literally my first attempt at building a web page and it took me 2 days even after copying a lot from another website I used for inspiration. Any help, guidance or insight is greatly appreciated.
CSS + HTML:
var links = document.getElementsByClassName("navItem");
for (i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click',function(sender, event) {
event.preventDefault();
/* hide all panels */
var panels = document.getElementsByClassName("panel");
for (j = 0; j < panels.length; j++) {
panels[j].style.display = 'none';
}
/* Show the selected panel */
var panel_id = sender.target.getAttribute("panel-id");
document.getElementById(panel_id).style.display = 'block';
}
}
/* FONT ASSIGNMENTS
--------------------------- */
/* General Use */
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
p,
small {
font-family: 'Avenir LT W01 35 Light', Arial, Helvetica, sans-serif;
}
p.large-text {
font-size: 18px !important;
}
hr {
background-color: #e0e0e0;
color: #e0e0e0;
}
.center-content {
text-align: center !important;
}
/* Special Use */
h1,
h2,
h1 a,
h2 a,
h3,
h3 a,
infoBar,
.gisFont1,
.gisFont1 a {
font-weight: normal !important;
font-style: normal;
line-height: normal;
font-variant: normal;
font-family: 'Avenir LT W01 35 Light', Arial, Helvetica, sans-serif;
}
/*-- END FONT ASSIGNMENTS --*/
/* INFOBAR - The Infobar is the navigation element at the top
used to navigate the subpages of the document and change the content
panel's content depending on the selected infoBar navigation element
--------------------------- */
/* infoBar Bottom Border */
#infoBar {
background: #FFF;
/*border-top: 1px solid #e5e5e5;*/
border-bottom: 1px solid #e5e5e5;
max-width: 940px;
text-align: center;
/*display: table;*/
margin: 0 auto;
}
/* infoBar Bottom Border onHover or Active element*/
#infoBar a:hover,
#infoBar a.active {
border-bottom: 4px solid #2889DE;
text-decoration: none;
}
/* infoBar Link Text */
#infoBar a {
background: transparent;
color: #000;
display: inline-block;
font-size: 16px;
font-family: 'Avenir LT W01 35 Light', Arial, Helvetica, sans-serif;
padding: 1.4em;
text-decoration: none;
}
/* infoBar Link Text onHover */
#infoBar a:Hover {
background: transparent;
color: #2889DE;
display: inline-block;
font-size: 16px;
font-family: 'Avenir LT W01 35 Light', Arial, Helvetica, sans-serif;
padding: 1.4em;
text-decoration: none;
}
/* infoBar Active element */
#infoBar a.active {
font-family: 'Avenir LT W01 65 Medium', Arial, Helvetica, sans-serif;
}
/* Media Queries */
#media screen and (max-width: 960px) {
#infoBar a {
font-size: 14px;
}
}
#media screen and (max-width: 830px) {
#infoBar a {
padding: 1em 0.6em;
}
}
#media screen and (max-width: 760px) {
#infoBar {
display: none;
}
}
/*-- END INFOBAR --*/
/* PAGE SECTIONS
--------------------------- */
/* Page Section Styling */
.page-section {
background-position: center top;
color: #4d4d4d;
min-height: 200px;
padding: 60px 0;
text-align: center;
width: 940px;
margin: auto;
}
/* Page Section - Header2 Styling */
.page-section h2 {
font-size: 24px;
margin-bottom: 20px;
}
/* Page Section Paragraph Styling */
.page-section p {
color: #333;
font-size: 18px;
line-height: 1.5;
/*margin: 10px 0 45px 0;*/
}
/* Foreword-Section-Top Styling */
.foreword-section-top {
padding: 0;
min-height: 160px;
}
/* Foreword-Section-Top Header1 Styling*/
.foreword-section-top h1 {
color: #222;
font-size: 36px;
}
/* Foreword-Section-Top Paragraph Styling */
.foreword-section-top p {
color: #4d4d4d;
margin-bottom: 10px;
}
.grid-100 {
width: 100%;
margin: auto;
}
/* CONTENT PANELS
----------------------------- */
/* Capabilties Panel*/
#capabilities-panel {
max-width: 980px;
margin: 0 auto;
display:block;
}
/*Tutorials Panel */
#tutorials-panel {
max-width: 980px;
margin: 0 auto;
display:none;
}
.product-row {
margin-bottom: 50px;
/*width: 100%; */
max-width: 940px;
margin: 0 auto;
display: inline-block;
}
.product-box {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
float: left;
overflow: hidden;
margin: 0.5%;
position: relative;
text-align: center;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
width: 24%;
}
#media screen and (max-width: 960px) {
.product-box {
width: 48%;
}
}
#media screen and (max-width: 480px) {
.product-box {
display: block;
float: none;
margin: 10px auto;
width: 95%;
}
}
.product-box a {
color: #FFF;
display: block;
font-weight: bold;
}
.product-box a:hover .inner-box-padding {
position: relative;
width: 100%;
-ms-transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.product-box .inner-box-padding {
background-color: #007ac2;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-ms-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
width: 100%;
}
.product-box .inner-box-padding:before {
content: "";
display: block;
padding-top: 87%;
}
.product-box h3 {
font-size: 22px;
color: #FFF;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.product-box.dark-text h3 {
color: #333;
}
.product-box .capability-one {
background-image: url('http://i64.tinypic.com/2mi16l1.png');
}
.product-box .capability-two {
background-image: url('http://i68.tinypic.com/10gwm75.png');
}
.product-box .capability-three {
background-image: url('http://i65.tinypic.com/5djxwh.png');
}
.product-box .capability-four {
background-image: url('http://i67.tinypic.com/15e7hu8.png');
}
.product-box .tutorial-one {
background-image: url('http://i68.tinypic.com/efhvfc.png');
}
.product-box .tutorial-two {
background-image: url('http://i66.tinypic.com/50199u.png');
}
.product-box .tutorial-three {
background-image: url('http://i63.tinypic.com/wvwcif.png');
}
.product-box .tutorial-four {
background-image: url('http://i67.tinypic.com/1zp1or8.png');
}
/* END PRODUCT BOXES */
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- include jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<!-- INFO BAR -->
<div id="infoBar">
Capabilities
Tutorials
Use Cases
Services
Security
What's New
Request Access
</div>
<!-- END GIS INFO BAR -->
<!-- FOREWORD -->
<div class="page-section foreword-section-top">
<h1>Some Cool Tagline</h1>
<p>blah blah blah. We're so awesome. Now give us money.</p>
</div>
<!-- CAPABILITIES PANEL -->
<div id="capabilities-panel" class="panel">
<!-- Capability One -->
<div class="product-box">
<a href="/capabilities/capability-one">
<div class="inner-box-padding capability-one"></div>
<h3>Capability 1</h3>
</a>
</div>
<!-- Capability Two box -->
<div class="product-box dark-text">
<a href="/capabilities/capability-two">
<div class="inner-box-padding capability-two"></div>
<h3>Capability 2</h3>
</a>
</div>
<!-- Capability Three box -->
<div class="product-box">
<a href="/capabilities/capability-three">
<div class="inner-box-padding capability-three"></div>
<h3>Capability 3</h3>
</a>
</div>
<!-- Capability Four box -->
<div class="product-box">
<a href="/capabilities/capability-four">
<div class="inner-box-padding capability-four"></div>
<h3>Capability 4</h3>
</a>
</div>
</div>
<!-- END CAPABILITIES PANEL -->
<!-- TUTORIALS PANEL -->
<div id="tutorials-panel" class="panel">
<!-- Tutorial One box -->
<div class="product-box">
<a href="/tutorials/tutorial-one">
<div class="inner-box-padding tutorial-one"></div>
<h3>Tutorial 1</h3>
</a>
</div>
<!-- Tutorial Two box -->
<div class="product-box dark-text">
<a href="/tutorials/tutorial-two">
<div class="inner-box-padding tutorial-two"></div>
<h3>Tutorial 2</h3>
</a>
</div>
<!-- Tutorial Three box -->
<div class="product-box">
<a href="/tutorials/tutorial-three">
<div class="inner-box-padding tutorial-three"></div>
<h3>Tutorial 3</h3>
</a>
</div>
<!-- Tutorial Four box -->
<div class="product-box">
<a href="/tutorials/tutorial-four">
<div class="inner-box-padding tutorial-four"></div>
<h3>Tutorial 3</h3>
</a>
</div>
</div>
<!-- END TUTORIALS PANEL -->
Pretty sure that this might do something like you'd want.
There are more elegant pieces of code (not to mention that there should be loads of plugins) for this though, this is just out of the top of my head (dont use $.attr to find the corresponding panel etc).
$(document).ready(function(){
$(".navItem").click(function(event) {
event.preventDefault();
$('.navItem').removeClass("active").removeClass("on");
$(this).addClass("active").addClass("on");
var panel = $(this).attr('panel-id');
$(".panel").hide();
$("#"+panel).show();
});
});
In order to use this script you need to import jQuery into your page though, which literally putting 1 line in your page (just google that).
You need to give every panel the class panel (i.e. instead of just the 'id' attribute. This will allow for the $(".panel") to find all html that is in a
The var panel = $(this).attr('panel-id'); line finds the panel belonging to the anchor the user clicked, as long as you add an attribute to each anchor containing the id of the corresponding panel as the value (e.g. <a (..) panel-id="capabilities-panel">)
=======
Updated answer so OP can use vanilla javascript per his request.
(function () {
alert('hello');
var links = document.getElementsByClassName("navItem");
for (i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click',function(event) {
event.preventDefault();
for(int k = 0; k < links; k++) {
links[k].className = "navItem";
}
event.target.className += " active on";
var panels = document.getElementsByClassName("panel");
for (j = 0; j < panels.length; j++) {
panels[j].style.display = 'none';
}
var panel_id = event.target.getAttribute("panel-id");
document.getElementById(panel_id).style.display = 'block';
});
}
})();
I haven't tested this so there's probably some syntactic errors here and there, and Im not too sure how one gets the sender element from a click event in vanilla javascript (though this shouldn't be too hard to google).
You need to put scripts in between <script></script> tags in order for your browser to recognize javascript.
Note how the number of lines and readability decreased by abandoning jQuery.
Hope this helps you!
Also, if this is just not working for you I recommend checking out the link the other guy posted under your question.
I'm trying to build a simple slider that consists of a static 'window' and movable list of items.
where parent container shows only one item and hides all the rest.
I've tried to do something like this but appears this is wrong:
<div id="category-selector">
<div class="categories-list clearfix">
<a class="category">sports</a>
<a class="category">fashion</a>
<a class="category">health</a>
</div>
</div>
#category-selector {
width: 300px; margin: 0 auto; position: relative; z-index: 1;
border: 2px solid #ccc;
-moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; height: 55px;
overflow: hidden;
}
.categories-list {
position: absolute; top: 0; left: 0; display: block;
}
a.category {
display: block; float: left; width: 100%; padding: 10px;
font-size: 30px; font-family: Cambria, 'Segoe UI', sans-serif; line-height: 35px;
text-decoration: none; text-align: center; color: #42a6ce;
}
How do I achieve this functionality?
Try this:
.categories-list {
display: block;
white-space: nowrap;
/*margin-left: -300px;*/
}
a.category {
display: inline-block;
width: 280px;
padding: 10px;
font-size: 30px; font-family: Cambria, 'Segoe UI', sans-serif; line-height: 35px;
text-decoration: none; text-align: center; color: #42a6ce;
}
If you want to have links arranged from left to right, you should set them fixed width. If you set 100% then they will always try to fill container. Setring display to inline-block allows us to avoid wraping line by setting white-space: nowrap; on container.
To scroll it just set margin on container for example margin-left: -300px;
Working sample: http://jsfiddle.net/N9R2E/
Alternatively you may try this:
.categories-list {
display: block;
white-space: nowrap;
margin-left: -300px;
width: 10000px; /* long enough to fit all links */
}
a.category {
display: block;
float:left;
width: 280px;
padding: 10px;
font-size: 30px; font-family: Cambria, 'Segoe UI', sans-serif; line-height: 35px;
text-decoration: none; text-align: center; color: #42a6ce;
}
This uses display:block and float:left like in your attempt, but widths are fixed. To have all links in one line categories-list must be wider then all links together.
Working sample: http://jsfiddle.net/N9R2E/3/
If you don't mind using JS or buttons, this is one way to do it.
$(document).ready(function() {
var slider = $("#categoriese_list");
var leftProperty, newleftProperty;
// the click event handler for the right button
$("#right_button").click(function() {
// get value of current left property
leftProperty = parseInt(slider.css("left"));
// determine new value of left property
if (leftProperty - 100 <= -900) {
newLeftProperty = 0; }
else {
newLeftProperty = leftProperty - 100; }
// use the animate function to change the left property
slider.animate( {left: newLeftProperty}, 1000);
}); // end click
// the click event handler for the left button
$("#left_button").click(function() {
// get value of current right property
leftProperty = parseInt(slider.css("left"));
// determine new value of left property
if (leftProperty < 0) {
newLeftProperty = leftProperty + 100;
}
else {
newLeftProperty = -800;
}
// use the animate function to change the left property
slider.animate( {left: newLeftProperty}, 1000);
}); // end click
}); // end ready
However, I would recommend making your categories list out of a <ul> to keep it more in line.
What you're talking about is essentially a carousel or slider. Rather than trying to code it from scratch I would just use one of the million jQuery plugins out there to build this. I personally like bxslider a lot for things like this because it's responsive and very simple to implement.