We want our dropdown to be tabbable once expanded but non tabbable when not expanded. We have tried tabindex="-1" on the content in the expandable div but that made it non tabbable even once expanded. We have no idea on how to to solve this and would be grateful to any tips.
<div class="container">
<div class="accordionContent">
<div class="accordionItem">
<button class="itemHeader itemQuestion">
Text
<span class="itemIcon">
<i class="bx bx-chevron-down"></i>
</span>
</button>
<div class="itemContent">
<p class="itemAnswer">
<button>Example</button>
</p>
</div>
</div>
</div>
</div>
I dont know exactly what you want to do but If you want to showdiv.itemContent with click on the button.itemHeader you can do this :
-set display:none ;for div.itemContent
-use onclick event for button.itemHeader. And call this function :
function myfunction(){ document.getElementsByClassName[0]("itemContent").style.display=block; }
Related
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.
HTML -
<div class="col-md-3" ng-repeat="idea in ideas">
<div class="col-md-12 ideaResult" ng-mouseleave="hideIcon()">
<a class="resultCover col-md-12" style="background-image:url(https://le-uploaded-image-bucket.s3.amazonaws.com/{{idea.coverImage}});"></a>
<div class="sharebtn icon-btn" ng-click="socialIcon = !socialIcon">
<span style="background-image:url('/images/idea/share-add.png');background-color:white" title="Share" class="iconContainer"></span>
</div>
<div class="share-fb share-icon" ng-show="socialIcon">
<span class="iconContainer" title="Share" style="background-image:url('/images/idea/fb-icon.png');background-color:white"></span>
</div>
<div class="share-tw share-icon" ng-show="socialIcon">
<span class="iconContainer" title="Share" style="background-image:url('/images/idea/twitter-icon.png');background-color:white"></span>
</div>
<div class="share-msg share-icon" ng-show="socialIcon">
<span class="iconContainer" title="Share" style="background-image:url('http://cdn.thegadgetflow.com/wp-content/themes/thegadgetflow4/images/email-icon.png');background-color:white"></span>
</div>
<div class="endorse-icon icon-btn">
<span style="background-image:url('/favicons/favicon-96x96.png');background-color:white" title="Endorse" class="iconContainer"></span>
</div>
<div class="resultIcon">
<span title="my goal" class="iconContainer" style="background-image:url(https://le-uploaded-image-bucket.s3.amazonaws.com/{{idea.goalIcon}});background-color:{{idea.backgroundColor}}">
</span>
</div>
<h2 class="resultName">{{idea.title}}</h2>
<div class="col-md-12 resultDescription"><p>{{idea.description | limitTo: 48}}{{idea.description.length > 48 ? '...' : ''}}Continue Reading</p></div>
</div>
</div>
Controller JS -
$scope.hideIcon = function(){
$scope.socialIcon = false;
};
Requirement -
I want to hide the DIVs with "share-icon" class when mouse pointer go out of the parent DIV(i.e. DIV with class ideaResult), but at the same time I click on the DIV with class name "shareBtn" which will result in toggling those three DIVs with "share-icon" class which is working fine.
Problem -
When the page is loaded, these three DIVs (ie. "share-icon" class) are already hidden which is fine but when I click on the DIV with class "shareBtn", these DIVs appear which is also fine, but when mouse pointer goes out of the parent DIV ("ideaResult"), these three DIVs continues to be appear which I don't want.
Can someone help me to solve this problem ? Thanks in advance
Here is the Mock Fiddle - https://jsfiddle.net/x2zzppoa/
The visibility on those 3 divs isn't related to the class "share-icon", but to $scope.socialIcon, whitch initialy is set to undefined, and after you click the upper div it is set to true, hence the visibility of your divs.
The solution for this code snippet is probably:
ng-mouseleave="socialIcon = false"
https://jsfiddle.net/ronapelbaum/x2zzppoa/1/
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 issues when trying to place an event to toggle a div using an element outside of the parent container.
I trying to target the same behavior from outside of the parent elements using a span tag.
Any help would be grateful.
HTML:
<div class='toggle_parent'>
<div class='toggleHolder'>
<span class='toggler'>Open</span>
<span class='toggler' style='display:none;'>Close</span>
</div>
<div class='toggled_content' style='display:none;width:100%;height:400px;'>
<h2>Hello This Is My Content Right Here</h2>
<span class='toggler btn btn-large'>Close</span>
</div>
</div>
<!-- I need this element to trigger from outside -->
<span class="toggler btn btn-large btn-info">Gain Early Access</span>
Javascript:
$('.toggler').live('click',function(){
/* $(this).parent().children().toggle(); //swaps the display:none between the two spans */
$(this).parent().parent().find('.toggled_content').slideToggle(); //swap the display of the main content with slide action
});
Amended your example to suit the purpose.
<div id="container">
<div>
<div>
<span class='open'>Open</span>
<span class='close' style='display:none;'>Close</span>
</div>
<div class='content' style='display:none;width:100%;height:400px;'>
<h2>Hello This Is My Content Right Here</h2>
<span class='close'>Close</span>
</div>
</div>
<!-- I need this element to trigger from outside -->
<span class="toggle">Gain Early Access</span>
</div>
$(".toggle").click( function( ) {
$(".content").slideToggle();
});
$(".open").click( function( ) {
$(".content").slideDown();
});
$(".close").click( function( ) {
$(".content").slideUp();
});
Just use a global parent div.
<div id="container">
<div class='toggle_parent'>
<div class='toggleHolder'>
<span class='toggler'>Open</span>
<span class='toggler' style='display:none;'>Close</span>
</div>
<div class='toggled_content' style='display:none;width:100%;height:400px;'>
<h2>Hello This Is My Content Right Here</h2>
<span class='toggler btn btn-large'>Close</span>
</div>
</div>
<!-- I need this element to trigger from outside -->
<span class="toggler btn btn-large btn-info">Gain Early Access</span>
</div>
And you can just do this :
var container = $('#container');
container.on('click', '.toggler', function() {
container.find('.toggleHolder .toggler').toggle();
container.find('.toggle_content').slideToggle();
});
By the way, if you use jQuery 1.7 or more, live is deprecated. See http://api.jquery.com/live/