How to complete sidebar menu? - javascript

I'm having trouble trying to complete my sidebar menu. Right now the contents are showing directly under the header instead of showing when the menu tab is clicked. Also the close menu button is wrapped in tag but it doesn't seem to do anything right now. I can figure out the transition for the sidebar but my issue is getting the contents to show when the button near the header is clicked. I thought using query selector would automatically make it display a sidebar menu. Please let me know what I'm missing.
App.js:
import fzero from './image/fzero.jpg';
import sonic from './image/sonic.jpg';
import retail from './image/retail.jpg';
import mark from './image/mark.jpg';
import heli from './image/heli.png';
import team from './image/team.png';
import tiger from './image/tiger.png';
import mario from './image/mario.jpg';
import './index.css';
function App() {
const openMenu = () =>{
document.querySelector('.sidebar').classList.add('open')
}
const closeMenu = () =>{
document.querySelector('.sidebar').classList.remove('open')
}
return (
<div className="App">
<body>
<header>
<div className='head1'>
<div className='dropdown'>
<button onClick={openMenu}>☰</button>
</div>
<h1>GameShop</h1>
</div>
</header>
<aside className="sidebar">
<h3>Extras</h3>
<button className="side-close" onClick={closeMenu}>X</button>
<ul>
<li>
Accessories
</li>
<li>
Pre-orders
</li>
</ul>
</aside>
<div className='container'>
<div className='prod'>
<img src={fzero} className="fzero" alt="logo" />
<div className='item'>
<a className="cover" href="">
F-zero
</a>
<div className='system'>
<p>Nintendo Switch</p>
</div>
<div className="price">
<p>$59.99</p>
</div>
</div>
</div>
<div className='prod'>
<img src={sonic} className="sonic" alt="logo" />
<div className='item'>
<a className="cover" href="">
Sonic Earth
</a>
<div className='system'>
<p>Playstation</p>
</div>
<div className='price'>
<p>$49.99</p>
</div>
</div>
</div>
<div className='prod'>
<img src={retail} className="retail" alt="logo" />
<div className='item'>
<a className="cover" href="">
Retail Manager 13
</a>
<div className='system'>
<p>PC</p>
</div>
<div className='price'>
<p>$12.99</p>
</div>
</div>
</div>
<div className='prod'>
<img src={mark} className="mark" alt="logo" />
<div className='item'>
<a className="cover" href="">
Mark Zuckerberg's Pro Surfer
</a>
<div className='system'>
<p>Xbox</p>
</div>
<div className='price'>
<p>$39.99</p>
</div>
</div>
</div>
<div className='prod'>
<img src={mario} className="mario" alt="logo" />
<div className='item'>
<a className="cover" href="">
Super Mario Maker Deluxe
</a>
<div className='system'>
<p>Nintendo Switch</p>
</div>
<div className="price">
<p>$59.99</p>
</div>
</div>
</div>
<div className='prod'>
<img src={heli} className="heli" alt="logo" />
<div className='item'>
<a className="cover" href="">
Planet of the Helicopter in Africa
</a>
<div className='system'>
<p>PC</p>
</div>
<div className="price">
<p>$12.99</p>
</div>
</div>
</div>
<div className='prod'>
<img src={team} className="team" alt="logo" />
<div className='item'>
<a className="cover" href="">
Team Fortress 2.5
</a>
<div className='system'>
<p>Xbox</p>
</div>
<div className="price">
<p>$39.99</p>
</div>
</div>
</div>
<div className='prod'>
<img src={tiger} className="tiger" alt="logo" />
<div className='item'>
<a className="cover" href="">
Tiger Woods Driving Simulator
</a>
<div className='system'>
<p>Playstation</p>
</div>
<div className="price">
<p>$49.99</p>
</div>
</div>
</div>
</div>
</body>
</div>
);
}
export default App;


It's not clear what your CSS looks like but here is way you can implement what you want.
Note: Assuming you are using React.js
Final Code:
👉 CodeSandbox
index.css
.wrapper {
display: flex;
}
.sidebar {
display: none;
/*👇 Just for styling 👇*/
background-color: #aaaaaa;
padding-right: 80px;
}
.sidebar.open {
display: block;
}
.container {
width: 100%;
/*👇 Just for styling 👇*/
text-align: center;
}
App.js
import fzero from './image/fzero.jpg';
import sonic from './image/sonic.jpg';
import retail from './image/retail.jpg';
import mark from './image/mark.jpg';
import heli from './image/heli.png';
import team from './image/team.png';
import tiger from './image/tiger.png';
import mario from './image/mario.jpg';
import './index.css';
function App() {
const openMenu = () => {
document.querySelector(".sidebar").classList.add("open");
};
const closeMenu = () => {
document.querySelector(".sidebar").classList.remove("open");
};
return (
<div className="App">
<body>
<header>
<div className="head1">
<div className="dropdown">
<button onClick={openMenu}>☰</button>
</div>
<h1>GameShop</h1>
</div>
</header>
<div className="wrapper">
<aside className="sidebar">
<h3>Extras</h3>
<button className="side-close" onClick={closeMenu}>
X
</button>
<ul>
<li>
Accessories
</li>
<li>
Pre-orders
</li>
</ul>
</aside>
<div className="container">
<div className="prod">
<img src={fzero} className="fzero" alt="logo" />
<div className="item">
<a className="cover" href="">
F-zero
</a>
<div className="system">
<p>Nintendo Switch</p>
</div>
<div className="price">
<p>$59.99</p>
</div>
</div>
</div>
<div className="prod">
<img src={sonic} className="sonic" alt="logo" />
<div className="item">
<a className="cover" href="">
Sonic Earth
</a>
<div className="system">
<p>Playstation</p>
</div>
<div className="price">
<p>$49.99</p>
</div>
</div>
</div>
<div className="prod">
<img src={retail} className="retail" alt="logo" />
<div className="item">
<a className="cover" href="">
Retail Manager 13
</a>
<div className="system">
<p>PC</p>
</div>
<div className="price">
<p>$12.99</p>
</div>
</div>
</div>
<div className="prod">
<img src={mark} className="mark" alt="logo" />
<div className="item">
<a className="cover" href="">
Mark Zuckerberg's Pro Surfer
</a>
<div className="system">
<p>Xbox</p>
</div>
<div className="price">
<p>$39.99</p>
</div>
</div>
</div>
<div className="prod">
<img src={mario} className="mario" alt="logo" />
<div className="item">
<a className="cover" href="">
Super Mario Maker Deluxe
</a>
<div className="system">
<p>Nintendo Switch</p>
</div>
<div className="price">
<p>$59.99</p>
</div>
</div>
</div>
<div className="prod">
<img src={heli} className="heli" alt="logo" />
<div className="item">
<a className="cover" href="">
Planet of the Helicopter in Africa
</a>
<div className="system">
<p>PC</p>
</div>
<div className="price">
<p>$12.99</p>
</div>
</div>
</div>
<div className="prod">
<img src={team} className="team" alt="logo" />
<div className="item">
<a className="cover" href="">
Team Fortress 2.5
</a>
<div className="system">
<p>Xbox</p>
</div>
<div className="price">
<p>$39.99</p>
</div>
</div>
</div>
<div className="prod">
<img src={tiger} className="tiger" alt="logo" />
<div className="item">
<a className="cover" href="">
Tiger Woods Driving Simulator
</a>
<div className="system">
<p>Playstation</p>
</div>
<div className="price">
<p>$49.99</p>
</div>
</div>
</div>
</div>
</div>
</body>
</div>
);
}
export default App;

Related

How to perform validations in cypress?

CPU
GPU
FPGA
VPU
Option1
cbutton1
cbutton2
cbutton3
Option2
n/a
xbutton1
xbutton2
Option3
abutton1
n/a
n/a
I am new to cypress and I have some hardware validations that I need to write cypress tests. Here are some scenarios that I am looking to write tests for:
Scenario 1: If option1 from CPU is selected then option2 and option3 get disabled , I can only select cbutton1 or cbutton2 or cbutton3. After selecting cbutton1 or cbutton2 or cbutton3 the other buttons get disabled.
Scenario 2: If option2 from cpu is selected then option1 and option3 get disabled, I can only select xbutton1 or xbutton2. After selecting xbutton1 or xbutton2 the other button get disabled.
Scenario 3: If option3 from CPU is selected then option1 and option2 get disabled, I can only select abutton1.
<div class="select-row" data-cy-id="config1Row">
<div class="colA">
<h4>1</h4>
</div>
<div class="colB">
<div class="configRow">
<div class="sc-fzoLsD hQunTL hardwareTypeContainer">
<div class="hardwareTypeName">
<div class="col1">
<h3>CPU</h3>
</div>
<div class="col2">
<div class="sc-AxmLO fiWSWR">
<div class="arrow_box_container show">
<img
src="/images/icons/info.svg"
class="info"
alt="more info icon"
/>
<div class="hide arrow_box">
<img
class="close"
src="/images/icons/chevron-small-down.svg"
alt="close icon"
/>
<p>CPU description!</p>
</div>
</div>
</div>
</div>
<div class="col3">
<hr />
</div>
</div>
<div class="hardwareCardRow">
<div class="sc-fzozJi cPPA-df padding">
<div class="card" data-cy-id="option1">
<div class="title">i7</div>
<img src="/images/icons/chip.png" alt="chip" class=".chip" />
</div>
<div class="sc-AxmLO fiWSWR">
<div class="arrow_box_container show">
<img
src="/images/icons/info.svg"
class="info"
alt="more info icon"
/>
<div class="hide arrow_box">
<img
class="close"
src="/images/icons/chevron-small-down.svg"
alt="close icon"
/>
<p>i7 description!</p>
</div>
</div>
</div>
</div>
<div class="sc-fzozJi cPPA-df padding">
<div class="card" data-cy-id="option2">
<div class="title">Xeon</div>
<img src="/images/icons/chip.png" alt="chip" class=".chip" />
</div>
<div class="sc-AxmLO fiWSWR">
<div class="arrow_box_container show">
<img
src="/images/icons/info.svg"
class="info"
alt="more info icon"
/>
<div class="hide arrow_box">
<img
class="close"
src="/images/icons/chevron-small-down.svg"
alt="close icon"
/>
<p>xdescription!</p>
</div>
</div>
</div>
</div>
<div class="sc-fzozJi cPPA-df padding">
<div class="card" data-cy-id="option3">
<div class="title">Atom</div>
<img src="/images/icons/chip.png" alt="chip" class=".chip" />
</div>
<div class="sc-AxmLO fiWSWR">
<div class="arrow_box_container show">
<img
src="/images/icons/info.svg"
class="info"
alt="more info icon"
/>
<div class="hide arrow_box">
<img
class="close"
src="/images/icons/chevron-small-down.svg"
alt="close icon"
/>
<p>atom description!</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sc-fzoLsD hQunTL hardwareTypeContainer">
<div class="hardwareTypeName">
<div class="col1">
<h3>GPU</h3>
</div>
<div class="col2">
<div class="sc-AxmLO fiWSWR">
<div class="arrow_box_container show">
<img
src="/images/icons/info.svg"
class="info"
alt="more info icon"
/>
<div class="hide arrow_box">
<img
class="close"
src="/images/icons/chevron-small-down.svg"
alt="close icon"
/>
<p>GPU description!</p>
</div>
</div>
</div>
</div>
<div class="col3">
<hr />
</div>
</div>
<div class="hardwareCardRow">
<div class="sc-fzozJi cPPA-df padding">
<div class="disabled card" data-cy-id="cbutton1">
<div class="title">Graphics</div>
<img src="/images/icons/chip.png" alt="chip" class=".chip" />
</div>
<div class="sc-AxmLO fiWSWR">
<div class="arrow_box_container show">
<img
src="/images/icons/info.svg"
class="info"
alt="more info icon"
/>
<div class="hide arrow_box">
<img
class="close"
src="/images/icons/chevron-small-down.svg"
alt="close icon"
/>
<p>iris description!</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sc-fzoLsD hQunTL hardwareTypeContainer">
<div class="hardwareTypeName">
<div class="col1">
<h3>FPGA</h3>
</div>
<div class="col2">
<div class="sc-AxmLO fiWSWR">
<div class="arrow_box_container show">
<img
src="/images/icons/info.svg"
class="info"
alt="more info icon"
/>
<div class="hide arrow_box">
<img
class="close"
src="/images/icons/chevron-small-down.svg"
alt="close icon"
/>
<p>FPGA description!</p>
</div>
</div>
</div>
</div>
<div class="col3">
<hr />
</div>
</div>
<div class="hardwareCardRow">
<div class="sc-fzozJi cPPA-df padding">
<div class="disabled card" data-cy-id="button2">
<div class="title">I10</div>
<img src="/images/icons/chip.png" alt="chip" class=".chip" />
</div>
<div class="sc-AxmLO fiWSWR">
<div class="arrow_box_container show">
<img
src="/images/icons/info.svg"
class="info"
alt="more info icon"
/>
<div class="hide arrow_box">
<img
class="close"
src="/images/icons/chevron-small-down.svg"
alt="close icon"
/>
<p>Adescription!</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sc-fzoLsD hQunTL hardwareTypeContainer">
<div class="hardwareTypeName">
<div class="col1">
<h3>VPU</h3>
</div>
<div class="col2">
<div class="sc-AxmLO fiWSWR">
<div class="arrow_box_container show">
<img
src="/images/icons/info.svg"
class="info"
alt="more info icon"
/>
<div class="hide arrow_box">
<img
class="close"
src="/images/icons/chevron-small-down.svg"
alt="close icon"
/>
<p>VPU description!</p>
</div>
</div>
</div>
</div>
<div class="col3">
<hr />
</div>
</div>
<div class="hardwareCardRow">
<div class="sc-fzozJi cPPA-df padding">
<div class="disabled card" data-cy-id="xbutton3">
<div class="title">VPU</div>
<img src="/images/icons/chip.png" alt="chip" class=".chip" />
</div>
<div class="sc-AxmLO fiWSWR">
<div class="arrow_box_container show">
<img
src="/images/icons/info.svg"
class="info"
alt="more info icon"
/>
<div class="hide arrow_box">
<img
class="close"
src="/images/icons/chevron-small-down.svg"
alt="close icon"
/>
<p>Mdescription!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

You generally want to set up the data so that each scenario is present in the table for different tests (one test per scenario).
Then it's just a simple matter of asserting the disabled class, for example
Scenario 1
cy.contains('cbutton1').should('not.have.class', 'disabled')
cy.contains('xbutton1').should('have.class', 'disabled')
... // etc
I'm assuming that the presence of the disabled class is the key thing to test, seems logical.
You can also do this in a data-driven way if there's a lot of scenarios to handle.
I'm not sure the cy.contains('xbutton1') gets you where you need to go.
In your DOM, the first disabled element has <p>iris description!</p>. If this is the element that would show up in the table cell, then
cy.contains('iris description!').should('have.class', 'disabled')
would not work. You may have to navigate to the parent, like this
cy.contains('p', 'iris description!') // more specific, grabs the <p>
.parents('[class="hardwareCardRow"]') // get the parent row
.find('[data-cy-id="cbutton1"]') // go cell that should be disabled
.should('have.class', 'disabled') // assert it is disabled
Data-driven tests might look something like this
const scenarios = [
{ option: 'Option1', cellText: 'iris description!', disabledItem: 'cbutton1' },
{ option: 'Option2', cellText: 'lily description!', disabledItem: 'cbutton2' },
// etc
}
scenarios.forEach(data => {
it(`should be disabled, testing ${data.option}`, () => { // back-ticks on description
// for template literal
cy.contains('p', data.cellText)
.parents('[class="hardwareCardRow"]')
.find(`[data-cy-id="${data.disabledItem}"]`) // back-ticks on the selector
.should('have.class', 'disabled')
})
})

my sroll reveal effects on java script isnt working how to fix it?

I am currently working for my portfolio site and somehow my scroll reveal animation suddenly doesn't work, I just edited something then I have no idea what happened.
/*===== SCROLL REVEAL ANIMATION =====*/
const sr = ScrollReveal({
origin: 'top',
distance: '80px',
duration: 2000,
reset: true
});
/*SCROLL HOME*/
sr.reveal('.home__title', {});
sr.reveal('.button', {
delay: 200
});
sr.reveal('.button1') {
delay: 300
});
sr.reveal('.button3') {
delay: 400
});
sr.reveal('.home__social-icon', {
interval: 200
});
/*SCROLL ABOUT*/
sr.reveal('.about__img', {});
sr.reveal('.about__subtitle', {
delay: 400
});
sr.reveal('.about__text', {
delay: 400
});
/*SCROLL SKILLS*/
sr.reveal('.skills__subtitle', {});
sr.reveal('.skills__text', {});
sr.reveal('.skills__data', {
interval: 200
});
sr.reveal('.skills__img', {
delay: 600
});
/*SCROLL WORK*/
sr.reveal('.work__img', {
interval: 200
});
/*SCROLL CONTACT*/
sr.reveal('.social__input', {
interval: 200
});
<link href='https://cdn.jsdelivr.net/npm/boxicons#2.0.5/css/boxicons.min.css' rel='stylesheet'>
<title>Portfolio</title>
<!--===== HEADER =====-->
<header class="l-header">
<nav class="nav bd-grid">
<div>
Caleb
</div>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">Home</li>
<li class="nav__item">About</li>
<li class="nav__item">Grade</li>
<li class="nav__item">Subjects</li>
<li class="nav__item">Social</li>
</ul>
</div>
<div class="nav__toggle" id="nav-toggle">
<i class='bx bx-menu'></i>
</div>
</nav>
</header>
<main class="l-main">
<!--===== HOME =====-->
<section class="home bd-grid" id="home">
<div class="home__data">
<h1 style="text-align: center;" class="home__title"><br>Welcome,<br> <span class="home__title-color">10-Sapphire</span></h1>
<a target="_blank" href="My Favorite Poems.docx" class="button">Online Regulations
<p id="settings-note">*Download here</p></a>
<a target="_blank" href="My Favorite Poems.docx" class="button1">Online Regulations
<p id="settings-note">*Download here</p></a>
<a target="_blank" href="My Favorite Poems.docx" class="button3">Online Regulations
<p id="settings-note">*Download here</p></a>
</div>
<div class="home__social">
<a style="position:absolute; left: 19%;" target="_blank" href="https://www.facebook.com/groups/747714555769692/" class="home__social-icon"><i class='bx bxl-facebook'></i></a>
<a style="position:absolute; left: 48%;" target="_blank" href="https://classroom.google.com/u/2/c/MTE2NTUyMzQxMDIz" class="home__social-icon"><i class='bx bxl-google' ></i></a>
<a style="position:absolute; right: 14%;" target="_blank" href="https://twitter.com/olivarezxc?s=09" class="home__social-icon"><i class='bx bxl-twitter' ></i></a>
</div>
</section>
<!--===== ABOUT =====-->
<section class="about section " id="about">
<h2 class="section-title">About</h2>
<div class="about__container bd-grid">
<div class="about__img">
<img src="assets/img/me.jpg" alt="">
</div>
<div>
<h2 class="about__subtitle">I'am Caleb</h2>
<p class="about__text"> (you want to say)</p>
</div>
</div>
</section>
<!--===== SKILLS =====-->
<section class="skills section" id="skills">
<h2 class="section-title">Grades</h2>
<div class="skills__container bd-grid">
<div>
<h2 class="skills__subtitle">Grading System</h2>
<p class="skills__text">This is the percentage of your incoming grades.</p>
<div class="skills__data">
<div class="skills__names">
<i class='bx bxl-html5 skills__icon'></i>
<span class="skills__name">ATTENDANCE</span>
</div>
<div class="skills__bar skills__attendance">
</div>
<div>
<span class="skills__percentage">30%</span>
</div>
</div>
<div class="skills__data">
<div class="skills__names">
<i class='bx bxl-css3 skills__icon'></i>
<span class="skills__name">QUIZ</span>
</div>
<div class="skills__bar skills__quiz">
</div>
<div>
<span class="skills__percentage">20%</span>
</div>
</div>
<div class="skills__data">
<div class="skills__names">
<i class='bx bxl-javascript skills__icon'></i>
<span class="skills__name">MODULE</span>
</div>
<div class="skills__bar skills__module">
</div>
<div>
<span class="skills__percentage">25%</span>
</div>
</div>
<div class="skills__data">
<div class="skills__names">
<i class='bx bxs-paint skills__icon'></i>
<span class="skills__part">PARTICIPATION</span>
</div>
<div class="skills__bar skills__total">
</div>
<div>
<span class="skills__percentage">25%</span>
</div>
</div>
</div>
<div>
<img src="assets/img/work3.jpg" alt="" class="skills__img">
</div>
</div>
</section>
<!--===== WORK =====-->
<section class="work section" id="work">
<h2 class="section-title">Subjects</h2>
<div class="work__container bd-grid">
<div class="work__img">
<img src="assets/img/work1.jpg">
</div>
<div class="work__img">
<img src="assets/img/lab-dash.jpg">
</div>
<div class="work__img">
<img src="assets/img/snake.png">
</div>
<div class="work__img">
<img src="assets/img/dash.jpg">
</div>
<div class="work__img">
<img src="assets/img/pdf-report.jpg">
</div>
<div class="work__img">
<img src="assets/img/sample-form.jpg">
</div>
</div>
</section>
</main>
<!--===== FOOTER =====-->
<footer class="footer">
<p class="footer__title" id="social">Social</p>
<div class="footer__social">
<i class='bx bxl-facebook' ></i>
<i class='bx bxl-google' ></i>
<i class='bx bxl-twitter' ></i>
</div>
<p>© 2020 copyright all right reserved</p>
</footer>

In lines 14,17 when you configure buttons button1 and button3 of your javascript have a syntax error, remove your lines and fix using lines below :
sr.reveal('.button1',{delay: 300});
sr.reveal('.button3',{delay: 400});

Stylesheet not loading in Ionic Angular project

I am building a page using Ionic and Angular. I'm including the stylesheet at the top as you can see, but when the page loads, the styles are completely messed up, until I refresh the page. I am not sure what I'm doing wrong. Thanks in advance.
<link rel="stylesheet" type="text/css" href="css/event-nba.css">
<div ng-repeat="events in eventsList" class="events-bg">
<a>
<div class="event-box" ng-style="{'background-image':'url({{events.backgroundImage}})'}">
<div class="nba-event-team">
<span><img class="logos logo-margin" src="{{events.logo1}}"></span>
<span><img class="logos" src="{{events.logo2}}"></span>
</div>
<div class="nba-event-team">
<span class="team">{{events.eventDate}}</span>
</div>
<div class="nba-event-team">
<span class="team">{{events.eventLocation}}</span>
</div>
<div class="nba-event-team">
<img class="network-logo" src="{{events.networkLogo}}"></img>
</div>
<div class="nba-event-team">
<button class="button button-assertive bth-red">
TICKETS
</button>
</div>
</div>
<div class="preview-box">
<span class="preview-text">{{events.eventPreview}}</span>
</div>
<div class="gear-title-box">
<span class="gear-title-text">PICK UP GEAR FOR THE GAME</span>
</div>
<div class="row">
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product-jacket">
<div class="item item-body">
<img class="full-image" src="img/nikesweatshirt200.png">
<p class="shop-product-box-text-margin">
Clothing
</p>
<h3 class="shop-product-box-text-margin">Nike Jacket <br>Elite Sports - Men's $79.99</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product">
<div class="item item-body">
<img class="full-image" src="img/kobe xi.jpeg">
<p class="shop-product-box-text-margin">
Shoes
</p>
<h3 class="shop-product-box-text-margin">Nike Kobe 11 <br>Elite Low - Men's $199.99</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product-uptime">
<div class="item item-body">
<img class="full-image" src="img/uptimebottle.png">
<p class="shop-product-box-text-margin">
Sport Supplements
</p>
<h3 class="shop-product-box-text-margin">UPTIME Energy <br>Original $4.39</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product-nba">
<div class="item item-body">
<img class="full-image" src="img/lavinjersey.jpeg">
<p class="shop-product-box-text-margin">
Clothing
</p>
<h3 class="shop-product-box-text-margin">Lavine Jersery <br>NBA Black - Men's $99.99</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
</div>
</a>

So I found the answer. This stylesheet was using a few class names from a previous page, and that stylesheet had different css for those classes. The classes weren't being dumped before this page was loading, thus inheriting the other styles.

js css slider tutorial issue

I've been trying my hand at a js slider tutorial and have been trying to get the slider to appear without having to click on one of the links (paris and milan etc).
So page opens, there's the slider.
I've tried having the div of the slider thumb container on the page without having
<ul id="fp_galleryList" class="fp_galleryList">
<li>Paris</li>
<li>New York</li>
</ul>
but it just shows up blank.
I'd really appreciate a nudge in the right direction.
Here's the tutorial for reference:link
Jsfiddle #pete fixed the fiddle
I'm sorry my fiddle doesn't work but my code is there. (First time using Jsfiddle and Stackoverflow so please be nice ;))
<div id="fp_gallery" class="fp_gallery">
<ul id="fp_galleryList" class="fp_galleryList">
<li>Paris</li>
<li>New York</li>
</ul>
<div id="fp_thumbContainer">
<div id="fp_thumbScroller">
<div class="container">
<div class="content">
<div>
<img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" />
</div>
</div>
</div>
</div>
</div>
</div>
<div id="fp_scrollWrapper" class="fp_scrollWrapper">
<span id="fp_prev_thumb" class="fp_prev_thumb"></span>
<div id="slider" class="slider"></div>
<span id="fp_next_thumb" class="fp_next_thumb"></span>
</div>
<div id="fp_overlay" class="fp_overlay"></div>
<div id="fp_loading" class="fp_loading"></div>
<div id="fp_next" class="fp_next"></div>
<div id="fp_prev" class="fp_prev"></div>
<div id="fp_close" class="fp_close">Close preview</div>
<!-- JAVASCRIPT -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">

Dynamically creating div height in 2 rows

So I am trying to get the height of the div toolLeft to match div height of toolRight and the same with beneLeft and beneRight. Below is my code, but only get the beneLeft height to change to match beneRight. Looked at some examples on where I could be wrong, but not seeing it. On top of that, my function has gotten super bloated. What is the best approach to this?
The code:
<div class="container">
<div class="homeHead col-md-12">
<h2>Welcome to the Navia Banefits participant portal, {{ ppt.Ppt.firstName }}!</h2>
<p>{{ ppt.Ppt.coName }} ({{ ppt.Ppt.coCode }})</p>
<div class="alerts">
<div id="example" ng-app="fpsClientApp">
<div class="demo-section k-header">
<div ng-controller="pptController">
<div kendo-tab-strip k-content-urls="[ null, null]" id="alertTabs">
<!-- tab list -->
<ul>
<li class="k-state-active">special messages</li>
<li>outstanding swipes</li>
<li>recent denials</li>
<li>upcoming dates</li>
<li>account alerts</li>
</ul>
<div class="alertCompany">
<p> {{ ppt.CompanyAlert.value }} </p>
</div>
<div class="alertSwipes">
<p ng-repeat="swipes in ppt.Swipes"><span class="col-md-2">{{swipes.date|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{date.descr}}</span></p>
</div>
<div class="alertDenials">
<p ng-repeat="denials in ppt.Denials"><span class="col-md-2">{{denials.date|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{denials.descr}}</span></p>
</div>
<div class="alertDates">
<p ng-repeat="dates in ppt.Dates"><span class="col-md-2">{{dates.key|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{dates.value}}</span></p>
</div>
<div class="alertAccounts">
<p ng-repeat="date in ppt.Alerts" ><span class="col-md-2">{{date.date|date : 'MM/dd/yyyy'}}</span> <span class="col-md-9">{{date.descr}}</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- begin Benefit Tile cards -->
<div class="beneArea">
<div class="beneLeft col-md-3">
<div>
<h2>My Benefit Statements</h2>
</div>
<div>
<p>Click on a benefit tile to access more detailed information.</p>
</div>
</div>
<div class="beneRight col-md-9">
<div class="beneTile col-md-3" data-ng-repeat="Benefits in ppt" style="margin: 4px; margin-left: 20px;">
<div class="beneHead">
<p>{{ ppt.Benefits[0].name }}</p>
</div>
<div class="beneDetails">
<div class="beneText">
<p class="beneDesc">Current Balance</p>
<p class="beneMoney">{{ ppt.Benefits[0].balance }}</p>
<p class="beneDesc">Annual Election</p>
<p class="beneMoney">{{ ppt.Benefits[0].annualAmt }}</p>
</div>
<div class="beneFooter" style="clear: both;">
<p><span>Last day to incur expenses:</span> <span style="float: right; padding-right: 10px;">{{ ppt.Benefits[0].lastIncurDate|date : 'MM/dd/yyyy' }}</span></p>
<p><span>Last day to submit claims:</span> <span style="float: right; padding-right: 10px;">{{ ppt.Benefits[0].lastSubmitDate|date : 'MM/dd/yyyy' }}</span></p>
</div>
</div>
</div>
</div>
</div>
<!-- end Benefit Tile cards -->
<!-- being Tool Tile cards -->
<div class="toolArea">
<div class="toolLeft col-md-3">
<div>
<h2>My Tools</h2>
</div>
<div>
<p>Click on a tile to access and maintain your account.</p>
</div>
</div>
<div class="toolRight col-md-9">
<div class="tools">
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/submiticon.svg" >
<p>Submit a Claim for Reimbursement</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/commuterOrder">
<img src="ppt/assets/toolIcons/commutericon.svg" >
<p>GoNavia Commuter</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/accessHsa">
<img src="ppt/assets/toolIcons/hsa.svg" >
<p>Access my HSA</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/clearSwipe">
<img src="ppt/assets/toolIcons/clearswipe.svg" >
<p>Clear a Swipe</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/naviconnect.svg" >
<p>Access NaviConnect</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/naviapp.svg" >
<p>Manage My Navi App</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/formsdocs.svg" >
<p>Forms and Documents</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/navicommuter.svg" >
<p>Access my NaviCommuter</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/requestnewcard.svg" >
<p>Request a new NaviCard</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/updateprofile.svg" >
<p>Update my Profile</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/onlineenrollment.svg" >
<p>Online Enrollment</p>
</a>
</div>
<div class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/recurring.svg" >
<p>My Recurring Claims</p>
</a>
</div>
</div>
</div>
</div>
<!-- end Tool Tile cards -->
</div>
<script>
$(document).ready(function () {
$("#alertTabs").kendoTabStrip({
tabPosition: "left",
animation: { open: { effects: "fadeIn" } }
});
});
var leftBeneHeight = $(".beneLeft").height();
var rightBeneHeight = $(".beneRight").height();
if (leftBeneHeight > rightBeneHeight) {
$(".beneRight").height(leftBeneHeight);
} else {
$(".beneLeft").height(leftBeneHeight);
};
var leftToolHeight = $(".toolLeft").height();
var rightToolHeight = $(".toolRight").height();
if (leftToolHeight > rightToolHeight) {
$(".toolRight").height(leftToolHeight);
} else {
$(".toolLeft").height(rightToolHeight);
};
</script>
Sorry couldn't provide a fiddle as this also pull from a private API.

This is how I would do it.
lvar leftToolHeight = $('.toolLeft').height();
var rightToolHeight = $('.toolRight').height();
if (leftToolHeight > rightToolHeight) {
$('.toolRight').height(leftToolHeight);
} else {
$('.toolLeft').height(rightToolHeight);
}
Do the same thing with beneLeft and beneRight. I hope this helps!

Categories

Resources