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')
})
})
Related
I'm making a feedback popup. I want to make sure that the text in the input can come to my email when users press the submit button. I tried it in the way below, but the text in the input doesn't come to me by e-mail.
<div class="popup" style="z-index: 10">
<div class="contentBox">
<!--close_btn=======-->
<button id="close">X</button>
<div class="feedbackBox" style="padding-top: 3px">
<strong>Give feedback</strong>
<p style="margin: 10.96px">
Таны үлдээсэн сэтгэгдэл бидэнд маш их тус болох болно.
</p>
</div>
<!--emojies========-->
<div class="emojiBox">
<div class="emoji" style="margin-left: 56.81px">
<img src="icons/face emoji/smiling-face-with-heart-eyes.png" alt="" />
<p>Best</p>
</div>
<div class="emoji">
<img src="icons/face emoji/happy-face-with-enlarged-eyes.png" alt="" />
<p>Good</p>
</div>
<div class="emoji">
<img src="icons/face emoji/expressionless-face.png" alt="" />
<p>Bad</p>
</div>
<div class="emoji">
<img src="icons/face emoji/face-with-steam-from-nose.png" alt="" />
<p>Terrible</p>
</div>
</div>
<!--feedback-write==-->
<div class="wrie_feedback">
<p>Үлдэхийг хүссэн санал бодол, сэтгэгдлээ доор үлдээнэ үү.</p>
<input type="text" maxlength="200" required />
</div>
<!--send-btn========-->
<button id="send_feedback">Явуулах</button>
</div>
</div>
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;
I have inherited a site with some broken JS. I have tried debugging, but I cant seem to figure it out. When the page loads, the first image is showing. But when any other button is clicked the image disappears and no new image shows. Sorry for the mess. I didn't write it. No need to worry about CSS in this example.
$(document).ready(function () {
$('.product-images-list').hide();
const inputSelector = 'input[type="radio"][name="product"]:checked';
if($(inputSelector).length){
const activeId = $(inputSelector).parent('div').attr('id');
$('#'+activeId+'-image').show();
}
else{
$('#first-product input').attr('checked',true);
$('#first-product-image').show();
}
}
);
function changeMultiProduct(id){
$('.product-images-list').hide();
$('#'+id+'-image').show();
}
<div id="tmp_orpo-88546" data-de-type="orpo" data-de-editing="false" data-title="Select Product 2.0" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500" aria-disabled="false" data-google-font="Raleway" class="de clearfix elOrderProductOptionsWrapper elMargin0 ui-droppable de-editable">
<form class="form">
<div class="elOrderProductOptions elProductOptionsBox">
<div class="clearfix elOrderProductOptinLabel">
<div data-text="text" class="pull-left elOrderProductOptinItem">Item
</div>
<div data-text="text" class="pull-right elOrderProductOptinLabelPrice">Price
</div>
</div>
<div data-cf-product-template="true" id="ifectr" class="clearfix elOrderProductOptinProducts best-seller selectProduct-CFHackers">
<div class="pull-left elOrderProductOptinProductName activeRadioProduct">
<div id="ix0qvk" class="row full-width">
<div id="i20f9l" class="col-2 fk-input-container">
<div id="first-product" onclick="changeMultiProduct('first-product-image')" class="d-inline-custom">
<input type="radio" id="first-product-3" name="product" value="buy5-get4" variantvalue="" onclick="changeMultiProduct('first-product-image')" class="fk-product-radio radio-margin">
</div>
</div>
<div id="ijvskn" class="col-6 fk-input-container">
<h6 data-text="text" id="ipwi4j">
<span data-text="text" id="ia07sm">MOST POPULAR BUNDLE!</span>
</h6>
<h6 data-text="text" id="i96bti">
<span data-text="text" id="i42hse">1x Mask + Cream & Serum Bundle</span>
</h6>
</div>
<div id="ido0az" class="col-4 fk-input-container">
<h6 data-text="text" id="i3yeur" align="right">
<span data-text="text" id="ivp6qk">$199.95</span>
</h6>
</div>
</div>
</div>
</div>
<div data-cf-product-template="true" class="clearfix elOrderProductOptinProducts">
<div id="idnuvb" class="row full-width">
<div id="im84yk" class="col-2 fk-input-container">
<div id="second-product" onclick="changeMultiProduct('second-product-image')" class="d-inline-custom">
<input type="radio" id="second-product-3" name="product" value="buy4-get3" variantvalue="" onclick="changeMultiProduct('second-product-image')" class="fk-product-radio radio-margin">
</div>
</div>
<div class="col-6 fk-input-container">
<h6 data-text="text" id="i2zd3l">
<span data-text="text" id="ijenkg">1x Mask</span>
</h6>
</div>
<div class="col-4 fk-input-container">
<h6 data-text="text" id="ihc754" align="right">
<span data-text="text" id="iogue2">$149.95</span>
</h6>
</div>
</div>
</div>
<div data-cf-product-template="true" id="inqmv6" class="clearfix elOrderProductOptinProducts">
<div id="ivs5ez" class="pull-left elOrderProductOptinProductName">
<div id="iwegqi" class="row full-width">
<div id="i0zzed" class="col-2 fk-input-container">
<div id="third-product" onclick="changeMultiProduct('third-product-image')" class="d-inline-custom">
<input type="radio" id="third-product-3" name="product" value="buy3-get2" variantvalue="" onclick="changeMultiProduct('third-product-image')" class="fk-product-radio radio-margin">
</div>
</div>
<div class="col-6 fk-input-container">
<h6 data-text="text" id="imgmsn">
<span data-text="text" id="iq9tkg">2x Mask + Cream & Serum Bundles</span>
</h6>
</div>
<div id="iab03y" class="col-4 fk-input-container">
<h6 data-text="text" id="i8hrda" align="right">
<span data-text="text" id="iy8dxp">$299.95</span>
</h6>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<form id="i4bidd" class="auto-width form">
<div id="productContainer" class="productContainer">
<div id="first-product-image" class="product-images-list">
<img id="productImage" title="" target="_self" src="https://assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/most_popular.png" href="" align="middle" alt="" width="" height="" class="full-width">
</div>
<div id="second-product-image" class="product-images-list no-display">
<img id="productImage-2" title="" target="_self" src="https://assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/1x_dermaluminate.png" href="" align="middle" alt="" width="" height="" class="full-width">
</div>
<div id="third-product-image" class="product-images-list no-display">
<img id="productImage-3" title="" target="_self" src="https://assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/2x_dermaluminate.png" href="" align="middle" alt="" width="" height="" class="full-width">
</div>
</div>
</form>
There is a lot you could do with this, but this should get you there.
You had a few redundant onclick handlers on your input fields that I removed. I also remove the method changeMultiProduct that it called because again it was redundant.
I set the input fields with javascript but that could also be done on the backend. If you solely want to trigger the change from the input fields, setting checked to true is also redundant. It could be useful if you want to trigger the radio button from the surrounding div so I wouldn't throw out the idea entirely.
Good luck. You might want to peruse some jQuery tutorials just to save your sanity. https://learn.jquery.com/
$(document).ready(function() {
$('.product-images-list').hide();
$('#first-product-3').prop("checked", true);
$('#first-product-image').show();
const radioSelector = 'input[type="radio"][name="product"]';
$(radioSelector).change(function(e) {
$('.product-images-list').hide();
if ($(this).is(':checked')) {
const activeId = $(this).parent('div').attr('id');
$('#' + activeId + '-image').show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tmp_orpo-88546" data-de-type="orpo" data-de-editing="false" data-title="Select Product 2.0" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500" aria-disabled="false" data-google-font="Raleway" class="de clearfix elOrderProductOptionsWrapper elMargin0 ui-droppable de-editable">
<form class="form">
<div class="elOrderProductOptions elProductOptionsBox">
<div class="clearfix elOrderProductOptinLabel">
<div data-text="text" class="pull-left elOrderProductOptinItem">Item
</div>
<div data-text="text" class="pull-right elOrderProductOptinLabelPrice">Price</div>
</div>
<div data-cf-product-template="true" id="ifectr" class="clearfix elOrderProductOptinProducts best-seller selectProduct-CFHackers">
<div class="pull-left elOrderProductOptinProductName activeRadioProduct">
<div id="ix0qvk" class="row full-width">
<div id="i20f9l" class="col-2 fk-input-container">
<div id="first-product" class="d-inline-custom">
<input type="radio" id="first-product-3" name="product" value="buy5-get4"class="fk-product-radio radio-margin">
</div>
</div>
<div id="ijvskn" class="col-6 fk-input-container">
<h6 data-text="text" id="ipwi4j">
<span data-text="text" id="ia07sm">MOST POPULAR BUNDLE!</span>
</h6>
<h6 data-text="text" id="i96bti">
<span data-text="text" id="i42hse">1x Mask + Cream & Serum Bundle</span>
</h6>
</div>
<div id="ido0az" class="col-4 fk-input-container">
<h6 data-text="text" id="i3yeur" align="right">
<span data-text="text" id="ivp6qk">$199.95</span>
</h6>
</div>
</div>
</div>
</div>
<div data-cf-product-template="true" class="clearfix elOrderProductOptinProducts">
<div id="idnuvb" class="row full-width">
<div id="im84yk" class="col-2 fk-input-container">
<div id="second-product" class="d-inline-custom">
<input type="radio" id="second-product-3" name="product" value="buy4-get3" class="fk-product-radio radio-margin">
</div>
</div>
<div class="col-6 fk-input-container">
<h6 data-text="text" id="i2zd3l">
<span data-text="text" id="ijenkg">1x Mask</span>
</h6>
</div>
<div class="col-4 fk-input-container">
<h6 data-text="text" id="ihc754" align="right">
<span data-text="text" id="iogue2">$149.95</span>
</h6>
</div>
</div>
</div>
<div data-cf-product-template="true" id="inqmv6" class="clearfix elOrderProductOptinProducts">
<div id="ivs5ez" class="pull-left elOrderProductOptinProductName">
<div id="iwegqi" class="row full-width">
<div id="i0zzed" class="col-2 fk-input-container">
<div id="third-product" class="d-inline-custom">
<input type="radio" id="third-product-3" name="product" value="buy3-get2" class="fk-product-radio radio-margin">
</div>
</div>
<div class="col-6 fk-input-container">
<h6 data-text="text" id="imgmsn">
<span data-text="text" id="iq9tkg">2x Mask + Cream & Serum Bundles</span>
</h6>
</div>
<div id="iab03y" class="col-4 fk-input-container">
<h6 data-text="text" id="i8hrda" align="right">
<span data-text="text" id="iy8dxp">$299.95</span>
</h6>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<form id="i4bidd" class="auto-width form">
<div id="productContainer" class="productContainer">
<div id="first-product-image" class="product-images-list">
<img id="productImage" title="" target="_self" src="https://assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/most_popular.png" href="" align="middle" alt="" width="" height="" class="full-width">
</div>
<div id="second-product-image" class="product-images-list no-display">
<img id="productImage-2" title="" target="_self" src="https://assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/1x_dermaluminate.png" href="" align="middle" alt="" width="" height="" class="full-width">
</div>
<div id="third-product-image" class="product-images-list no-display">
<img id="productImage-3" title="" target="_self" src="https://assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/2x_dermaluminate.png" href="" align="middle" alt="" width="" height="" class="full-width">
</div>
</div>
</form>
Looks like there was an issue with how the element was being looked up in changeMultiProduct. You were adding '-image' to the id but the id already contained that. Removing it from the method like below makes the images start appearing again.
Logging is your friend :)
$(document).ready(function () {
$('.product-images-list').hide();
const inputSelector = 'input[type="radio"][name="product"]:checked';
if($(inputSelector).length){
const activeId = $(inputSelector).parent('div').attr('id');
$('#'+activeId+'-image').show();
}
else{
$('#first-product input').attr('checked',true);
$('#first-product-image').show();
}
}
);
function changeMultiProduct(id){
console.log("Clicked: "+id);
$('.product-images-list').hide();
$('#'+id).show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tmp_orpo-88546" data-de-type="orpo" data-de-editing="false" data-title="Select Product 2.0" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500" aria-disabled="false" data-google-font="Raleway" class="de clearfix elOrderProductOptionsWrapper elMargin0 ui-droppable de-editable">
<form class="form">
<div class="elOrderProductOptions elProductOptionsBox">
<div class="clearfix elOrderProductOptinLabel">
<div data-text="text" class="pull-left elOrderProductOptinItem">Item
</div>
<div data-text="text" class="pull-right elOrderProductOptinLabelPrice">Price
</div>
</div>
<div data-cf-product-template="true" id="ifectr" class="clearfix elOrderProductOptinProducts best-seller selectProduct-CFHackers">
<div class="pull-left elOrderProductOptinProductName activeRadioProduct">
<div id="ix0qvk" class="row full-width">
<div id="i20f9l" class="col-2 fk-input-container">
<div id="first-product" onclick="changeMultiProduct('first-product-image')" class="d-inline-custom">
<input type="radio" id="first-product-3" name="product" value="buy5-get4" variantvalue="" onclick="changeMultiProduct('first-product-image')" class="fk-product-radio radio-margin">
</div>
</div>
<div id="ijvskn" class="col-6 fk-input-container">
<h6 data-text="text" id="ipwi4j">
<span data-text="text" id="ia07sm">MOST POPULAR BUNDLE!</span>
</h6>
<h6 data-text="text" id="i96bti">
<span data-text="text" id="i42hse">1x Mask + Cream & Serum Bundle</span>
</h6>
</div>
<div id="ido0az" class="col-4 fk-input-container">
<h6 data-text="text" id="i3yeur" align="right">
<span data-text="text" id="ivp6qk">$199.95</span>
</h6>
</div>
</div>
</div>
</div>
<div data-cf-product-template="true" class="clearfix elOrderProductOptinProducts">
<div id="idnuvb" class="row full-width">
<div id="im84yk" class="col-2 fk-input-container">
<div id="second-product" onclick="changeMultiProduct('second-product-image')" class="d-inline-custom">
<input type="radio" id="second-product-3" name="product" value="buy4-get3" variantvalue="" onclick="changeMultiProduct('second-product-image')" class="fk-product-radio radio-margin">
</div>
</div>
<div class="col-6 fk-input-container">
<h6 data-text="text" id="i2zd3l">
<span data-text="text" id="ijenkg">1x Mask</span>
</h6>
</div>
<div class="col-4 fk-input-container">
<h6 data-text="text" id="ihc754" align="right">
<span data-text="text" id="iogue2">$149.95</span>
</h6>
</div>
</div>
</div>
<div data-cf-product-template="true" id="inqmv6" class="clearfix elOrderProductOptinProducts">
<div id="ivs5ez" class="pull-left elOrderProductOptinProductName">
<div id="iwegqi" class="row full-width">
<div id="i0zzed" class="col-2 fk-input-container">
<div id="third-product" onclick="changeMultiProduct('third-product-image')" class="d-inline-custom">
<input type="radio" id="third-product-3" name="product" value="buy3-get2" variantvalue="" onclick="changeMultiProduct('third-product-image')" class="fk-product-radio radio-margin">
</div>
</div>
<div class="col-6 fk-input-container">
<h6 data-text="text" id="imgmsn">
<span data-text="text" id="iq9tkg">2x Mask + Cream & Serum Bundles</span>
</h6>
</div>
<div id="iab03y" class="col-4 fk-input-container">
<h6 data-text="text" id="i8hrda" align="right">
<span data-text="text" id="iy8dxp">$299.95</span>
</h6>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<form id="i4bidd" class="auto-width form">
<div id="productContainer" class="productContainer">
<div id="first-product-image" class="product-images-list">
<img id="productImage" title="" target="_self" src="https://assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/most_popular.png" href="" align="middle" alt="" width="" height="" class="full-width">
</div>
<div id="second-product-image" class="product-images-list no-display">
<img id="productImage-2" title="" target="_self" src="https://assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/1x_dermaluminate.png" href="" align="middle" alt="" width="" height="" class="full-width">
</div>
<div id="third-product-image" class="product-images-list no-display">
<img id="productImage-3" title="" target="_self" src="https://assets.funnelkonnekt.com/65c38de1-b709-48ef-97bb-2c884504b1f6/2x_dermaluminate.png" href="" align="middle" alt="" width="" height="" class="full-width">
</div>
</div>
</form>
I have some jQuery code that scrolls to the top of an element's parent on click event. This code works great, however, when testing on IE and Firefox, the scroll does not work. Does anyone know of a solution for this functionality to work with IE and Firefox?
$(".character-img").click(function(){
$('body').animate({scrollTop: $(this).parent().offset().top});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
It's a known problem, Firefox will only accept scrollTop when both body and html are declared.
$('html,body').animate({scrollTop: $(this).parent().offset().top});
is the correct way to write this.
See Animate scrollTop not working in firefox
I am trying to use a div instead of an image for the item and content but it won't set with the width correctly. I want it to work like the images do.
http://jsfiddle.net/ququat29/ example code
<div class="ContentFlow">
<div class="loadIndicator">
<div class="indicator"></div>
</div>
<div class="flow">
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
<img class="item" src="https://tse1.mm.bing.net/th?id=HN.607994144777177645&pid=1.7" />
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
<!-- Add as many items as you like. -->
</div>
<div class="globalCaption"></div>
<div class="scrollbar">
<div class="slider">
<div class="position"></div>
</div>
</div>
</div>
<div class="ContentFlow">
<div class="flow">
<div class="item more-width">
<div class="center-block club-card content" style="background-color: blue;">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">coffee</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
<div class="item more-width">
<div class="center-block club-card content" style="background-color: red; ">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">car wash</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
<div class="item more-width">
<div class="center-block club-card content" style="background-color: yellow;">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">foutain</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
http://www.jacksasylum.eu/ContentFlow/index.php