I need to write a code that allows only 5 icons to select, so far i was able to write a code that changes the color of selected icon (image: icon 1 and icon 2), others remain grey until they are selected, now i want to limit the selection to only 5 icons and then user cant click on icons.
The code for icon is
<div class="row">
<div class="col-4 col-sm-1 icon">
<a href="javascript:void(0);" class="btn-network btn-facebook" data-status="1" onclick="" title="FaceBook">
<i class="fa fa-facebook"></i>
</a>
<p class="pt-1 pb-2 m-0">FaceBook</p>
</div>
<div class="col-4 col-sm-1 icon">
<a href="javascript:void(0);" class="btn-network btn-instagram btn-invalid" data-status="1" onclick="" title="Instagram">
<i class="fa fa-instagram"></i>
</a>
<p class="pt-1 pb-2 m-0">Instagram</p>
</div>
<div class="col-4 col-sm-1 icon">
<a href="javascript:void(0);" class="btn-network btn-linkedin btn-invalid" data-status="1" onclick="" title="LinkedIn">
<i class="fa fa-linkedin"></i>
</a>
<p class="pt-1 pb-2 m-0">LinkedIn</p>
</div>
</div>
The code is use to select icons
<script>
$('.btn-network').click(function() {
$(this).toggleClass('btn-selected');
});
</script>
the design
[![Selected icons are in color, non selected ones are in grey][1]][1]
[1]: https://i.stack.imgur.com/3ysqj.png
this is something similar i want,but i want to do it for icons instead on checkboxes. : http://jsfiddle.net/vVxM2/
Edit: i also want to display a DIV below, basically what i need is;
user can select upto 5 social media icons and then they will see a box below (activates/displays after selection) to enter user's social profile link.
NOT IMPORTANT: preferably adding new class to disabled icons (ex: disabled) so i can change the color of the icon for disabled ones
can you help please?
thank you
check the length of selected icons before toggling class
const limit = 5;
$('.btn-network').click(function() {
if($(this).parent().siblings().children('.btn-selected').length < limit) {
$(this).toggleClass('btn-selected');
}
});
Related
I have an design here with five span elements that are set to appear when rolled over. My question: The main menu breaks down my elements individually so is there a way that when someone clicks on Tax Reduction Strategies, that it takes them to the page with the Tax Element showing on load? As in is it possible to ad an or a id element?
It currently loads Income Planning everytime, just curious if it's even possible so if they click https://loneb44.sg-host.com/retirement-planning-services/#tax it populates the page with Tax information showing first.
I've checked everywhere before I submitted this. I could not find an answer. So I appreciate any assistance that might come.
Here is my code and it's current page: https://loneb44.sg-host.com/retirement-planning-services/
<section id="approach">
<div class="containerr">
<div class="clear"></div>
<div class="col-lg-06 col-md-6 col-sm-6">
<div id="approach-diagram" class="retiremet-bg">
<span class="retirement"></span>
<span class="social"></span>
<span class="legacy"></span>
<span class="tax"></span>
<span class="five"></span>
</div>
</div>
<div class="col-lg-006 col-md-6 col-sm-6">
<div id="retirement-text" class="approach-text" style="display: block" >
<div class="cavt"> <i class="fas fa-caret-right"></i></div><div> <h2>Income Planning </h2></div>
<p>The experienced professionals at Suncrest Advisors will help you decide how much and where to save your income to create the most robust and sustainable retirement income for your future. This is the foundation of ensuring a comfortable and sustainable lifestyle in retirement.</p>
<a class="fusion-button button-flat fusion-button-default-size button-custom button-4 fusion-button-span-no fusion-button-default-type options" id="button-1" target="_self" href="#" data-toggle="modal" data-target=".fusion-modal.review" style="margin-top:18px;" id="options"><span class="fusion-button-text">Let's Get Started!</span></a>
</div>
<div id="social-text" class="approach-text">
<div class="cavt"> <i class="fas fa-caret-right"></i></div><div> <h2>Investment Management</h2></div>
<p>A reliable investment plan can help secure your retirement. In building and actively managing our client's wealth, we parlay our firm’s stellar research and analysis into having solid long-term conviction around exactly which stock and bonds to own, and why. </p>
<a class="fusion-button button-flat fusion-button-default-size button-custom button-4 fusion-button-span-no fusion-button-default-type options" id="button-1" target="_self" href="#" data-toggle="modal" data-target=".fusion-modal.review" style="margin-top:18px;" id="options"><span class="fusion-button-text">Let's Get Started!</span></a>
</div>
<div id="legacy-text" class="approach-text">
<div class="cavt"> <i class="fas fa-caret-right"></i></div><div> <h2>Tax Reduction Strategies</h2></div>
<p>When applied appropriately in conjunction with a financial plan, tax planning strategies can help offset the impact of taxes on investment returns and other income. Our financial planning team can work in conjunction with your other professionals to coordinate the most comprehensive plan for your future. </p>
<a class="fusion-button button-flat fusion-button-default-size button-custom button-4 fusion-button-span-no fusion-button-default-type options" id="button-1" target="_self" href="#" data-toggle="modal" data-target=".fusion-modal.review" style="margin-top:18px;" id="options"><span class="fusion-button-text">Let's Get Started!</span></a>
</div>
<div id="tax-text" class="approach-text">
<div class="cavt"> <i class="fas fa-caret-right" ></i></div><div> <h2>Long-Term Care Planning</h2></div>
<p>Long-Term Care Planning aids in planning for life transitions. We work with our clients to make informed decisions regarding how to plan for long-term care expenses and determine the best method of payment, such as: private pay, or Medicaid. </p>
<a class="fusion-button button-flat fusion-button-default-size button-custom button-4 fusion-button-span-no fusion-button-default-type options" id="button-1" target="_self" href="#" data-toggle="modal" data-target=".fusion-modal.review" style="margin-top:18px;" id="options"><span class="fusion-button-text">Let's Get Started!</span></a>
</div>
<div id="five-text" class="approach-text">
<div class="cavt"> <i class="fas fa-caret-right" ></i></div><div> <h2>Legacy Planning</h2></div>
<p>Our careful Legacy Planning can help you pass on much of your hard-earned wealth to your family or your favorite charities without the government’s involvement. The earlier you explore your options, the better you will be positioned to enhance your legacy. </p>
<a class="fusion-button button-flat fusion-button-default-size button-custom button-4 fusion-button-span-no fusion-button-default-type options" id="button-1" target="_self" href="#" data-toggle="modal" data-target=".fusion-modal.review" style="margin-top:18px;" id="options"><span class="fusion-button-text">Let's Get Started!</span></a>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var parentEl = jQuery('#approach-diagram').attr('class');
jQuery('#approach-diagram span').on('mouseover', function() {
var hoverEl = jQuery(this).attr('class');
jQuery('#approach-diagram').attr('class', hoverEl + '-bg');
});
jQuery('#approach-diagram').on('mouseleave', function() {
jQuery('#approach-diagram').attr('class', parentEl);
});
jQuery('#approach-diagram span').on('mouseenter', function() {
var clickEl = jQuery(this).attr('class');
jQuery('#approach-diagram').attr('class', clickEl + '-bg');
jQuery('.approach-text').slideUp();
jQuery('#' + clickEl + '-text').slideDown();
parentEl = clickEl + '-bg';
});
</script>
</section>
See this question/answer in order to use jQuery to extract an anchor from your URL. Once you have a value like 'tax', you can use jQuery again to display the contents of the page as you'd like.
I have a cart icon. When I hover on the cart icon display of one div changes from display:none to display:block means that div only appears when I hover on cart icon. This div contains one button View Cart on clicking which I need to alert something.
This is my code which I typed in console. But it only works when I first hover the icon (hovering icon changes display:none of a div to display:block) and then write on console. If I write this code in console before hovering it will not work.
$('#qa_cartletCartButton').click( function(){alert('yes');} );
ID of div: cartletDrop
ID of button: qa_cartletCartButton
These codes are also not working.
if ($('#cartletDrop').is(':hidden')) {
$("#qa_cartletCartButton").click(function() {
alert('yes')
});
}
if ($('#cartletDrop').is(':visible')) {
$("#qa_cartletCartButton").click(function() {
alert('yes')
});
}
This is the site HTML code which I am scraping.
<div class="shopping_cart">
<header class="header">
<a href="/chemicals/shop/cart?nocache=1596440273788" class="shopping_cart_icon" id="shopping_cart_icon_cartlet">
<span><img src="/content/dam/fishersci/en_US/images/icon-cart-l-xl-empty.svg"></span>
<span class="shopping_cart_quantity">3</span>
</a>
</header>
<section style="display: none;" id="cartletDrop" data-refresh="0">
<div class="cartlet-display">
<p class="bold cartletMaxMsg" id="qa_cartletMaxMsg">Recently Added to Your Cart</p>
<ul id="cartletItems">
</ul>
<p class="cartletSubtotal"><span class="float_left" id="qa_cartletSubtotalLabel">Subtotal:</span> <span class="float_right" id="qa_cartletSubtotal">41,486.00</span></p>
<p><a class="float_right cartButton btn primary" href="/chemicals/shop/cart?nocache=1596440278170" id="qa_cartletCartButton">view cart</a></p>
</div>
</section>
</div>
This line in html is empty before i hover.
<section style="display: none;" id="cartletDrop" data-refresh="0">
</section>
Once i hover in cart icon it's now like this.Only display property changes.
<section style="display: none;" id="cartletDrop" data-refresh="0">
<div class="cartlet-display">
<p class="bold cartletMaxMsg" id="qa_cartletMaxMsg">Recently Added to Your Cart</p>
<ul id="cartletItems">
</ul>
<p class="cartletSubtotal"><span class="float_left" id="qa_cartletSubtotalLabel">Subtotal:</span> <span class="float_right" id="qa_cartletSubtotal">41,486.00</span></p>
<p><a class="float_right cartButton btn primary" href="/chemicals/shop/cart?nocache=1596440278170" id="qa_cartletCartButton">view cart</a></p>
</div>
</section>
seems html inside section tag is not present before first hover.
Following is my code to show the notification list on clicking the icon. But the dropdown of notifications list is not showing. As for the CSS there is only bootstrap added. Following attached is my HTML and JavaScript with mock method.
function getMessageNotificationsDetails() {
$("#messageNotificationsDetails").html("");
$("#messageNotificationsDetails").append("<li><p class='red'>You have 5 new messages</p></li>");
$("#messageNotificationsDetails").append("<li><p class='red'>You have 6 new messages</p></li>");
}
function getNotificationsDetails() {
$("#notificationsDetails").html("");
$("#notificationsDetails").append("<li><p class='red'>You have 5 new messages</p></li>");
$("#notificationsDetails").append("<li><p class='red'>You have 56 new messages</p></li>");
}
<div class="col-md-1 text-center text-md-right">
<div class="row">
<div class="col-md-6">
<div class="notification">
<i style="cursor: pointer;" onclick="getMessageNotificationsDetails()" class="fa fa-envelope-o">
</i>
<span id="messageCount" class="badge"></span>
<ul id="messageNotificationsDetails" class="notification-menu">
</ul>
</div>
</div>
<div class="col-md-6">
<div class="notification">
<i style="cursor: pointer;" onclick="getNotificationsDetails()" class="fa fa-bell-o">
</i>
<span id="notificationsCount" class="badge"></span>
<ul id="notificationsDetails" class="notification-menu">
</ul>
</div>
</div>
</div>
</div>
I only see 2 problems.
unreadMessageCount is undefined
Each time you use .html() you are overwriting the html content of the element. It will work in your case because the last call has content in it.
Also, where and when the script is defined will affect whether or not it is available to the markup. In your case, it needs to be defined before the markup. You could attach the listeners via JS, and then it could run after the markup is rendered.
I have figured out the issue. It was related to data-toggle. I wasn't toggling to show and hide in my code.
With my inexperience in jQuery, I'm finding the simplest tasks difficult.
What I attempt to do is show/hide certain messages when a certain icon is clicked. This is my HTML:
<div class="container">
<div class="row">
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small" value="measure">
<i class="fa fa-clock-o"></i>
</div>
<div class="pov_title_small">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_large" value="locate">
<i class="fa fa-map-marker"></i>
</div>
<div class="pov_title_large">
LOCATE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small" value="inform">
<i class="fa fa-commenting"></i>
</div>
<div class="pov_title_small">
INFORM
</div>
</div>
<div id="measure" style="display:none" class="pov_description">
<p> Message MESSAGE</p>
</div>
<div id="locate" class="pov_description">
<p> Message LOCATE</p>
</div>
<div id="inform" style="display:none" class="pov_description">
<p> Message INFORM</p>
</div>
</div>
</div>
My JavaScript code that changes the pov icon/title classes works and is currently here:
$('.pov_icon_small , .pov_icon_large').on('click', function () {
$('.pov_icon_large').not($(this)).removeClass('pov_icon_large').addClass('pov_icon_small');
$('.pov_title_large').not($(this).next('div[class^="pov_title_"]')).removeClass('pov_title_large').addClass('pov_title_small');
$(this).toggleClass("pov_icon_small").toggleClass("pov_icon_large");
$(this).next('div[class^="pov_title_"]').toggleClass("pov_title_small").toggleClass("pov_title_large");
});
What I aim to do, is display a certain message (e.g. Message Measure) when the a certain icon pov_icon_small value="measure" is clicked while keeping the others hidden. When the user clicks another icon; that respective message will be displayed and the others will be hidden :
$(document).ready(function(){
$('input[.pov_icon_small]').click(function(){
if($(this).attr("value")=="measure"){
$(".pov_description").not("#measure").hide();
$("#measure").show();
}
if($(this).attr("value")=="locate"){
$(".pov_description").not("#locate").hide();
$("#locate").show();
}
if($(this).attr("value")=="inform"){
$(".pov_description").not("#inform").hide();
$("#inform").show();
}
});
The message-linking JS code doesn't seem to work. Am I doing a small error here? Or should I be preparing the code in a completely different way?
Theres two issues, first your CSS selector input[.pov_icon_small] is not valid. The second is that you are attaching the click function to pov_icon_small which do not have enough height or width for a user to click. I've adjusted the HTML so this binds to the pov_title_small class instead.
You'll want to attach your click function to items have a value, then pass that value as the selector. For pov_title_small I've changed the attribute value to data-value, then the click function uses that to select the ID you want to display. Here is the code:
HTML:
<div class="container">
<div class="row">
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-clock-o"></i>
</div>
<div class="pov_title_small" data-value="measure">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_large">
<i class="fa fa-map-marker"></i>
</div>
<div class="pov_title_large" data-value="locate">
LOCATE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-commenting"></i>
</div>
<div class="pov_title_small" data-value="inform">
INFORM
</div>
</div>
<div id="measure" style="display:none" class="pov_description">
<p> Message MESSAGE</p>
</div>
<div id="locate" style="display: none;" class="pov_description">
<p> Message LOCATE</p>
</div>
<div id="inform" style="display:none" class="pov_description">
<p> Message INFORM</p>
</div>
Javascript:
$(document).ready(function(){
$('[data-value]').bind('click', function(){
$('.pov_description').hide();
$('#'+$(this).attr('data-value')).show();
});
});
You can see it working in this JS Fiddle: http://jsfiddle.net/h97fg75s/
1st : you just need to get a value and convert it to id ..
2nd: like #juvian mentioned $('input[.pov_icon_small]') is not a valid selector
3rd .pov_icon_small its a div not an input so you can use $('div.pov_icon_small') instead
4th: .pov_icon_small doesn't have any value attribute .. .pov_title_small and .pov_title_large those has the value attribute
$(document).ready(function(){
$('div.pov_title_small , div.pov_title_large').click(function(){
var ThisValue = $.trim($(this).attr('value'));
$(".pov_description").not("#"+ThisValue).hide();
$("#"+ThisValue).slideToggle()
});
});
Working Demo
if you need to control it from .pov_icon you have 2 ways
1st: put a value attribute in .pov_icon_small/large
2nd: you can use
$('div.pov_icon_small , div.pov_icon_large').click
and
var ThisValue = $.trim($(this).next('div[class^="pov_title_"]').attr('value'));
I have two buttons.
Both buttons have a rollover css color change.
One of the buttons just links to another page.. however, the other button when clicked needs to
A.) Show a hidden div
B.) toggle to the roll-over color and stay that color. (but not change the other buttons class)
I only want the button with the id of "edit" to toggle the class m-button-regular to m-button-active and not the other button. The JQuery I am using changes both buttons classes to m-button-active.
What is going wrong in this script?
<a href="#tab1" id="edit" >
<span class="m-button-small m-button-regular text-center floatleft clearfix mtm mls" id="sm-tab1">
<i class="fa fa-gear"></i>
<p>EDIT</p>
</span>
</a>
<a href="#tab1">
<span class="m-button-small m-button-regular text-center floatleft clearfix mtm mls" id="sm-tab1">
<i class="fa fa-plus"></i>
<p>ADD</p>
</span>
</a>
<div class="row editcontainer">
</div>
$('.editcontainer').hide();
$(document).ready(function(){
$('#edit').click(function(){
$(".editcontainer").toggle();
$('.m-button-regular').toggleClass("m-button-active");
});
});
You need to use .find() to refer its child span, then you can use toggle.
Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
Use
$(this).find('.m-button-regular').toggleClass("m-button-active");
instead of
$('.m-button-regular').toggleClass("m-button-active");
This seems to do what you want :
$('.editcontainer').hide();
$(document).ready(function() {
$('#edit').click(function() {
$(".editcontainer").toggle();
$('#edit').toggleClass("m-button-active");
});
});
.m-button-active {
color : green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#tab1" id="edit">
<span class="m-button-small m-button-regular text-center floatleft clearfix mtm mls" id="sm-tab1">
<i class="fa fa-gear"></i>
<p>EDIT</p>
</span>
</a>
<a href="#tab1">
<span class="m-button-small m-button-regular text-center floatleft clearfix mtm mls" id="sm-tab1">
<i class="fa fa-plus"></i>
<p>ADD</p>
</span>
</a>
<div class="row editcontainer" style="display: none">Edit container</div>
By the way your selector was originally selecting both buttons.
This is refering to all classes:
$('.m-button-regular').toggleClass("m-button-active");
You must refer the button
$("#edit").toggleClass("m-button-active");
You are almost right but slight change to your code and bingo
$('.editcontainer').hide();
$(document).ready(function(){
$('#edit').click(function(){
$(".editcontainer").toggle();
$('.m-button-regular',this).toggleClass("m-button-active"); //<--- add a scope, same as $(this).find
});
});