I have two column, in first column there is a list where I want to click and change slide in mobile frame, i.e. following is my html
<div class="convenience-wrapper">
<div class="convenience-content">
<h3>Convenience</h3>
<ul class="list-unstyled">
<li class="active">One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
<div class="mobile-wrapper">
<div class="mobile-frame">
<img src="images/mobile-frame.png" alt="Mobile Frame" />
</div>
<div class="mobile-screens">
<img src="images/order-on-app.png" alt="Order on App" />
<img src="images/flexible-quantity.png" alt="Flexible quantity" />
<img src="images/buy-now-pay-later.png" alt="Buy now pay later" />
<img src="images/scan-qr.png" alt="Scan QR" />
</div>
</div>
</div>
I want to click on left side list i.e. one, two, three and want to change slide/image in "mobile-screens" div.
I have searched a lot but everyone is repositioning and changing slick dots style, I want dots functionality at my own custom design list, anyone can guide me how to to that.
Here is my take on it:
jQuery(document).ready(($) => {
$("#mySlider").slick({
infinite: true
})
$("#myNavList > li").click((e) => {
let element_index = [...e.target.parentElement.children].indexOf(e.target)
$("#mySlider").slick("slickGoTo", element_index)
})
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div>
<ul id="myNavList">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div id="mySlider" style="max-width: 100%">
<img src="https://picsum.photos/200?1"/>
<img src="https://picsum.photos/200?2"/>
<img src="https://picsum.photos/200?3"/>
</div>
</div>
I would personally not use the element_index method in production but this is just a quick demo code to explain what tools you can use to achieve what you asked for.
Related
I'm trying to create a basic slideshow so when you click the thumbnail in the nav the main image changes to that one. I have a JS function running in my head and when i click a thumbnail that image replaces the main image for a fraction of a second, before being reset. I'm really new to coding so i'd appreciate any help given!
``` <head>
<script type="text/javascript">
function changeImage(element) {
document.getElementById('imageReplace').src = element;
} </script>
<title>Gem Website</title>
</head>
<body>```
```<div class="container">
<div class="row" id="mainContent">
<div id="img-div">
<img id="imageReplace" src='gem 4-3.jpg'>
</div>
</div>
</div>```
```<div id="side-nav">
<ul class="nav-ul" id="style-1">
<li class="nav-list">
<a href="" onclick="changeImage('gem 4-3.jpg');">
<img class="img-thumb" src="gem 4-3.jpg">
</a>
</li>
<li class="nav-list">
<a href="" onclick="changeImage('gem 4-4.jpg');">
<img class="img-thumb" src="gem 4-4.jpg">
</a>
</li>
</ul>
</div>
<body>```
From your code, it looks like your thumbnails and the image your are supposed to be replacing are the same. What you see is just a flicker when you set the new src, but the image source is the same.
The issue is happening because of the a tag must be reloading the page on click.
Here is a solution without the a tag or if you want to keep the a tag in check out preventDefault() on an <a> tag
<script type="text/javascript">
function changeImage(element) {
document.getElementById('imageReplace').src = element;
} </script>
<div class="container">
<div class="row" id="mainContent">
<div id="img-div">
<img id="imageReplace" src='https://via.placeholder.com/150/0000FF'>
</div>
</div>
</div>
<div id="side-nav">
<ul class="nav-ul" id="style-1">
<li class="nav-list" onclick="changeImage('https://via.placeholder.com/150/0000FF');">
<img class="img-thumb" src="https://via.placeholder.com/150/0000FF">
</li>
<li class="nav-list" onclick="changeImage('https://via.placeholder.com/150/FF0000');">
<img class="img-thumb" src="https://via.placeholder.com/150/FF0000">
</li>
</ul>
</div>
I am creating a payment option buttons. The problem is the pre-made option gives no place to add payment images and descriptions. So I have made a (li) list of options using basic html and content now i want to know if we can make li to select input when pressed
HTML Code
<div class="shipping-method">
<ul class="">
<li>
<div class="item">Wechat
<div class="disc"></div>
</div>
</li>
<li>
<div class="item on">AliPay
<div class="disc">Discription goes here</div>
</div>
</li>
</ul></div>
Current Input Code
<div class="radio-buttons-selection">
<label>
<input name="shipping" type="radio" class="radio" id="shipping_{$shipping.shipping_id}" value="{$shipping.shipping_id}" {if $order.shipping_id eq $shipping.shipping_id}checked="true" {/if} supportCod="{$shipping.support_cod}" insure="{$shipping.insure}" onclick="selectShipping(this)">
<div class="shipping_{$shipping.shipping_id} box"> <span>{$shipping.shipping_name}</span> </div>
</label>
I'm unfortunately not quite sure how you have implemented your Current input code with the rest of the code. However, using the first snippet of code, something like this (using jQuery) should work:
$("li").on("click", function() {
$("input[type=radio]").each(function() {
$(this).prop("checked", false);
});
$(this).find("input[type=radio]").prop("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shipping-method">
<ul class="">
<li>
<div class="item">Wechat
<div class="disc"></div>
<input type="radio"/>
</div>
</li>
<li>
<div class="item on">AliPay
<div class="disc">Discription goes here</div>
<input type="radio"/>
</div>
</li>
</ul></div>
Basically, if a list-item is clicked, find the input[type=radio] in that list item and check it (and before that, make sure all others are unchecked so we keep it 'valid').
If you can merge your HTML code with your Current input code I might be able to provide a better example, but nonetheless you might see what's going on and what you could do?
$(".shipping-method li").on("click", function() {
$(".shipping-method input[type=radio]").each(function() {
$(this).prop("checked", false);
$(this).children(".shipping-method .item").removeClass("on");
});
$(this).find("input[type=radio]").prop("checked", true);
$(this).find(".item").addClass("on");
});
[:I assume the 'selectShipping' method will try to extract above
values(id,value,insure,supportCod) from 'this']
'Right Click' on browser & find out the following in run time the respective values for input element '*' that you are not able to customize:
1.)$shipping.shipping_id=?? , value=??,supportCod=??,insure=?? Of first option
2.)$shipping.shipping_id=?? , value=??,supportCod=??, insure=?? Of second option
elements into elements containin as the selectShipping method expects it to be
-->
<div class="shipping-method">
<ul class="">
<li>
<div class="item"><a href="javascript:;" class="weixin_wap" id="shipping_{$shipping.shipping_id_Of_firstoption}" value="{??Of_firstoption}" insure="{$shipping.insureOf_firstoption}" onclick="selectShipping(this)>Wechat</a>
<div class="disc"></div>
</div>
</li>
<li>
<div class="item on"><a href="javascript:;" class="alipaywap" id="shipping_{$shipping.shipping_id_Of_second_option}" value="{??Of_second_option}" insure="{$shipping.insureOf_second_option}" onclick="selectShipping(this)>AliPay</a>
<div class="disc">Discription goes here</div>
</div>
</li>
</ul></div>
I have list of options:
<li class="">
<img src="/1.img" />
<img src="/2.img" />
Option 1
</li>
<li class="">
<img src="/1.img" />
<img src="/2.img" />
Option 2
</li>
By default - 1.img visible.
If user select for example Option 1, i want 1.img to hide(); and 2.img to show(); But just for Option 1.
For example this code:
$("#selection li").click(function(){
$('.not-checked').hide(); // to hide image
$('.checked').show(); // to show image
}
Change picture in every li. How can i change picture only on selected li ?
To only target the children of the <li> element you're clicking on, you can make use of jQuery's .find() method. You want to find the img elements, and in order to target specific <img> elements, you can use the :nth-of-type pseudo-class:
$("#selection li").click(function() {
$(this).find('img:nth-of-type(1)').hide(); // to hide image
$(this).find('img:nth-of-type(2)').show(); // to show image
});
img:nth-of-type(2) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selection">
<li class="">
<img src="http://via.placeholder.com/50/ff00000/ff00000" />
<img src="http://via.placeholder.com/50/0000ff/0000ff" /> Option 1
</li>
<li class="">
<img src="http://via.placeholder.com/50/ff00000/ff00000" />
<img src="http://via.placeholder.com/50/0000ff/0000ff" /> Option 2
</li>
</div>
Or you could simply use a 'data-' attribute on all the elements and compare them in jquery.
<div id="selection">
<li class="" data-option="1">
<img src="/1.img" data-option="1">
<img src="/2.img" data-option="2">
Option 1
</li>
<li class="" data-option="2">
<img src="/1.img" data-option="1">
<img src="/2.img" data-option="2">
Option 2
</li> </div>
And from your script
$("#selection li").click(function() {
//first hide all images
$(this).find("img").hide();
//then show only the ones with the right data-option
$(this).find("img[data-option="+$(this).data('option')+"]").show()
});
Btw, you do not always have to use data- it's just a jQuery convention of giving attributes to a tag.
You can use jQuery toggle() to achieve it.
$("li").click(function() {
$(this).find("img").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="">
<img src="http://via.placeholder.com/50/ff00000/ff00000" />
<img style="display:none" src="http://via.placeholder.com/50/0000ff/0000ff" />
Option 1
</li>
<li class="">
<img src="http://via.placeholder.com/50/ff00000/ff00000" />
<img style="display:none" src="http://via.placeholder.com/50/0000ff/0000ff" />
Option 2
</li>
Explanation: $(this) will keep you in the clicked <li>; find("img") will target all of the images inside; toggle() will change the display for any targeted img;
This question already has answers here:
How to disable HTML links
(16 answers)
Closed 6 years ago.
I have a simple bootstrap wizard. I want to disable the next navigation link based on some condition. Can someone please tell me how to do it using jQuery or CSS or any other method.
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li>Item Search</li>
<li>Item Details</li>
<li>Add SPR</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<ul class="pager wizard">
<li class="previous first" style="display: none;">First</li>
<li class="previous">Previous</li>
<li class="next last" style="display: none;">Last</li>
<li class="next">Next</li>
</ul>
</div>
Thanks
the below code should work.
Basically it detects when the tab has changed, then it removes any disabled attribute that might exist. Then depending on the tab clicked there is an if statement that sets if the link can be clicked. After that if a disabled link is clicked, simply do nothing.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href");
$(".wizard a").removeAttr("disabled");
if(target == "#tab3"){
$(".next").attr("disabled","disabled");
}
else if(target == "#tab1"){
$(".previous").attr("disabled","disabled");
}
});
$(".wizard a").on("click", function(event){
if ($(this).is("[disabled]")) {
event.preventDefault();
}
});
Update: Use .prop('disabled',true) instead of .attr('disabled','disabled')
without seeing the rest of your code it's challenging to give an ideal answer for your situation, but you should be able to set a Boolean and check that before allowing the Next button.
You can also apply some CSS to make the button LOOK disabled as well.
var nextOK = true;
$('#mybutt').click(function(){
$('#nextA').prop('disabled',true).css({'color':'red'}); //display:none, or whatever.
nextOK = false;
});
$('#nextA').click(function(e){
if (nextOK) window.location.href = 'http://google.com';
else alert('Button disabled');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li>Item Search
</li>
<li>Item Details
</li>
<li>Add SPR
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<ul class="pager wizard">
<li class="previous first" style="display: none;">First
</li>
<li class="previous">Previous
</li>
<li class="next last" style="display: none;">Last
</li>
<li class="next"><a id="nextA" href="#">Next</a>
</li>
</ul>
</div>
<button id='mybutt'>Disable Next Button</button>
With javascript in the browser, you need to wait before the Document Object Model has completely loaded before calling some functions that manipulate the HTML.
You can achieve that by adding a simple document.ready function.
You can then add your condition in the function direcly, or any other code manipulating the HTML.
And lastly, by adding an id to the element you want to use, it would make your life much more easier.
Here is a sample of what it could look like:
document.ready = function() {
//Your condition
if(42 >= 1){
//Select the element and make it point to a void
$('#nextLink').attr('href', 'javascript:void(0)');
}
}
Using javascript:void is a really cross browser solution and works of on older versions (like good old IE).
I have a body with ID body and inside it a div with class nav-container. I want to remove certain classes when users click on the #body, but not .nav-container (it's an overlay type of menu).
Tried below code
HTML:
<body id="body">
<div class="nav-container">
X
<nav class="display">
<ul>
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
</nav>
</div>
</body>
jQuery
$('#body :not(.nav-container)').click(function() {
$('.cover').removeClass('active-cover');
$('.nav-container').removeClass('active');
});
It does not seem to be working for me though.
It wont work as not exclude the selected elements which pass the earlier css-selector criteria since .nav-container is not part of list that is selected by #body (wont be list in this case as its ID), so you wont be able to exclude that.
So basically what you need is
$(document).on("click", "div:not('.nav-container')",function() {
$('.cover').removeClass('active-cover');
$('.nav-container').removeClass('active');
});
the first element shouldn't be the parent, like #body, rather the element. for example div:not('example') works for every div except example.
$("div:not(.nav-container)").click(function() {
alert("nav-container was not clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="body">
<div class="nav-container">
X
<nav class="display">
<ul>
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
</nav>
</div>
<br />
<div>click here </div>
</body>