I'm working on an application that lists products/sub products. I'm trying to show the sub products when I click on the chevron. For some reason, I can't get this to work. I've been able to get the flipping of the chevron to work.
Here is my code:
<div class="item">
Product 1
<div style="float: right;"><i class="fas fa-fw fa-chevron-down" onclick="expand(this,event)"></i></div>
<div class="sub-item-list" style="display: none">
<div class="sub-item">
Sub Product 1
</div>
</div>
</div>
function expand(event) {
if ($(event).hasClass("fa-chevron-down")){
setTimeout(function () {///workaround
$(event).removeClass("fa-chevron-down");
}, 10);
$(event).addClass("fa-chevron-up");
$(event).closest('div').next().find("sub-item-list").css('display', 'inherit');
} else {
setTimeout(function () {///workaround
$(event).removeClass("fa-chevron-up");
}, 10);
$(event).addClass("fa-chevron-down");
$(event).closest('div').next().find("sub-item-list").css('display', 'none');
}
};
Can someone tell me that the issue is?
You can use .closest('div.item') to get the closest div and then use .find(".sub-item-list") to find the div which you need to display .
Demo Code :
function expand(event) {
if ($(event).hasClass("fa-chevron-down")) {
setTimeout(function() { ///workaround
$(event).removeClass("fa-chevron-down");
}, 10);
$(event).addClass("fa-chevron-up");
//get closest div with class item -> find class
$(event).closest('div.item').find(".sub-item-list").css('display', 'inherit');
} else {
setTimeout(function() { ///workaround
$(event).removeClass("fa-chevron-up");
}, 10);
$(event).addClass("fa-chevron-down");
//get closest div with class item -> find class
$(event).closest('div.item').find(".sub-item-list").css('display', 'none');
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
Product 1
<div style="float: right;"><i class="fas fa-fw fa-chevron-down" onclick="expand(this,event)"> >> </i></div>
<div class="sub-item-list" style="display: none">
<div class="sub-item">
Sub Product 1
</div>
</div>
</div>
As you are setting onclick event on <i> tag you can also call parent().next() method instead of closest() to get subitem/product.
Try this example:
function expand(event)
{
if ($(event).hasClass("fa-chevron-down"))
{
setTimeout(function()
{///workaround
$(event).removeClass("fa-chevron-down");
}, 10);
$(event).addClass("fa-chevron-up");
$(event).parent().next().css("display", "block");
}
else
{
setTimeout(function ()
{///workaround
$(event).removeClass("fa-chevron-up");
}, 10);
$(event).addClass("fa-chevron-down");
$(event).parent().next().css('display', 'none');
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
Product 1
<div style="float: right;">
<i class="fas fa-fw fa-chevron-down" onclick="expand(this, event)">Toggle Chevron</i>
</div>
<div class="sub-item-list" style="display:none">
<div class="sub-item">
Sub Product 1
</div>
</div>
</div>
Related
I want to check if an element is visible and play a song only when it is, using: a trigger('click') event handler.
Unfortunately, I can't get it working as expected.
What am I doing wrong and how can I fix it?
Here is my JavaScript code (jQuery):
$('.overlay').on('click', function () {
if ($('a.icon-play').is(':hidden') == false) {
$('#stop').trigger('click');
} else {
$('#play').trigger('click');
}
});
Below is my HTML code:
<div class="info">
<div class="player-home-video">
<audio id="yourownlullaby-audio" src="uploads/downloads/Buenas%20%20Noches%20%3C?php%20echo%20$_POST['name'];%20?%3E.mp3"></audio>
</div>
<div class="thumbnail-home-video">
<a href="#" id="play">
<span class="icon-play preview-icon" id="play"></span>
</a>
<a href="#" id="stop">
<span class="icon-pause preview-icon" id="stop"></span>
</a>
<img class="info" src="img/thumbnail-home-video.png" />
<div class="overlay"></div>
</div>
</div>
$('.overlay').on('click', function () {
if ($('a .icon-play').is(':hidden') == true) {
$('#stop').trigger('click');
}
else
{
$('#play').trigger('click');
} });
Your if should be the other way.
I'm making a script that will notify you when someone is online on whatsapp web and i have this:
var onlineCheck = window.setInterval(function() {
var y = document.getElementsByClassName("emojitext ellipsify")[19];
if (y == null) {
console.log("online notification failed");
} else {
if (y.innerText === 'online') {
new Notification("contact is online");
window.clearInterval(onlineCheck);
}
}
},1000);
now the problem is that i'm selecting an element by the class "emojitext ellipsify" th 19th and if someone texts me another element with the class "emojitext ellipsify" will be made and the 19th won't be the status anymore, so i want to know if i can select an element with the same method from css which is : element>element
like this (div#main>header.pane-header pane-chat-header>div.chat-body>div.chat-status ellipsify>span.emojitext ellipsify)
or any other possible way.
var onlineCheck = window.setInterval(function() {
var y = document.getElementsByClassName("emojitext ellipsify")[19];
if (y == null) {
console.log("online notification failed");
} else {
if (y.innerText === 'online') {
new Notification("contact is online");
window.clearInterval(onlineCheck);
}
}
}, 1000);
<header class="pane-header pane-chat-header">
<div class="chat-avatar">
<div class="avatar icon-user-default" style="*somestyle*">
<div class="avatar-body">
<img src="*srcpath*" class="avatar-image is-loaded">
</div>
</div>
</div>
<div class="chat-body">
<div class="chat-main">
<h2 class="chat-title" dir="auto">
<span class="emojitext ellipsify" title="*person'sname*"><!-- react-text: 3216 -->*person'sname*<!-- /react-text --></span>
</h2>
</div>
<div class="chat-status ellipsify">
<span class="emojitext ellipsify" title="typing…"><!-- react-text: 3219 -->*the info that i need to get(typing…)*<!-- /react-text --></span>
</div>
</div>
<div class="pane-chat-controls">
<div class="menu menu-horizontal">
<div class="menu-item">
<button class="icon icon-search-alt" title="Search…"></button>
<span></span>
</div>
<div class="menu-item">
<button class="icon icon-clip" title="Attach"></button>
<span></span>
</div>
<div class="menu-item">
<button class="icon icon-menu" title="Menu"></button>
<span></span>
</div>
</div>
</div>
</header>
What you are looking for is document.querySelectorAll
With that function, you can select elements with a selector, the same used with css. So, you could do this:
document.querySelectorAll(".emojitext.ellipsify")
Or put a better selector, in order to get the desired elements, and not others.
Your example would be:
document.querySelectorAll("div#main>header.pane-header pane-chat-header>div.chat-body>div.chat-status ellipsify>span.emojitext.ellipsify")
You could use JQuery, much simpler
$('parent > child')
https://api.jquery.com/child-selector/
I am using a jquery function for toggle effect for an icon so when I click on that icon the div will move to left and hide.. so only the icon will show on the page and when I click on that icon again the div will appear sliding from left I am able to achieve the function but the following function
$(document).ready(function() {
$(".demo-icon").click(function() {
if ($('.demo_changer').hasClass("active")) {
$(".demo_changer").animate({
"left": "-208px"
}, function() {
$('.demo_changer').toggleClass("active");
});
} else {
$('.demo_changer').animate({
"left": "0px"
}, function() {
$('.demo_changer').toggleClass("active");
});
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="demo_changer" style="padding-top:13px">
<div class="demo-icon customBgColor">
<i class="fa fa-bullhorn fa-spin fa-2x"></i>
</div>
<div class="form_holder">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="predefined_styles">
<div class="skin-theme-switcher">
<a href="campaign.html" target="_blank">
<h4>some text</h4>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks for any replies in advance.
Just found out that you did not add the class active while pageload but yet displaying the div.
Change the below line
<div class="demo_changer" style="padding-top:13px">
as
<div class="demo_changer active" style="padding-top:13px">
While loading, your webpage shows the div but does not have the class active in the div tag
and while clicking for the first time, as per your script, it finds out that there is no active class in the tag and then adds the class active and your div is already visible... I hope you understood..
The issue may be that, the margin in <div class="row"> is overlapping the icon div, it might be a reason why clicking on that area does not trigger "click" event -- See image below
Try Adding css style as mentioned in image below -
You need to use position: absolute; or position: relative; for the .demo_changer class so that you can animate its position.
$(document).ready(function() {
$(".demo-icon").click(function() {
if ($('.demo_changer').hasClass("active")) {
$(".demo_changer").animate({
"left": "-208px"
}, function() {
$('.demo_changer').toggleClass("active");
});
} else {
$('.demo_changer').animate({
"left": "0px"
}, function() {
$('.demo_changer').toggleClass("active");
});
}
})
});
.demo_changer {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="demo_changer" style="padding-top:13px">
<div class="demo-icon customBgColor">
<i class="fa fa-bullhorn fa-spin fa-2x">icon</i>
</div>
<div class="form_holder">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="predefined_styles">
<div class="skin-theme-switcher">
<a href="campaign.html" target="_blank">
<h4>some text</h4>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
You need too extra styles for animation block .
.demo_changer {
position:relative
}
Here is working example.
https://jsbin.com/xikamitole/1/edit?html,css,js,output
Hope this helps.
Try This:
$(document).on('click', '.demo-icon', function() {
if ($('.demo_changer').hasClass("active")) {
$(".demo_changer").animate({
"left": "-208px"
}, function() {
$('.demo_changer').toggleClass("active");
});
} else {
$('.demo_changer').animate({
"left": "0px"
}, function() {
$('.demo_changer').toggleClass("active");
});
}
})
});
I have a little problem. Im trying to create my own slider using jQuery and some css/javascript.
I got my slider to work moving a Div 660px to the left and right by clicking a button.
But, I would like to have the right button disabled when the left margin is 0. And I would like the whole div to rewind back to 0px after some clicks.
Is this possible?
Here is my code:
<script language="javascript">
function example_animate(px) {
$('#slide').animate({
'marginLeft' : px
});
}
</script>
<div class="container">
<div class="row">
<div class="contr-left">
<a type="button" value="Move Left" onclick="example_animate('-=600px')"><i class="fa fa-chevron-circle-left fa-2x" aria-hidden="true" ></i></a>
</div>
<div id="carreview" class="carousel" data-ride="carousel" style="opacity: 1; display: block;">
<div class="wrapper-outer">
<div class="wrapper-inner" id="slide">
<?php get_template_part('loop-reviews');?>
</div>
</div>
<div class="contr-right">
<a type="button" value="Move Right" onclick="example_animate('+=600px')"><i class="fa fa-chevron-circle-right fa-2x" aria-hidden="true" ></i></a>
</div>
</div>
</div>
</div>
The code im using is from this page: Page
Well, with the code from Rayn i got the button to hide, but now it won't show when left-margin is 1px or something. So I'm trying this now: (doesn't work btw)
Im trying this now: (doesn't work btw)`function example_animate(px) {
$('#slide').animate({
'marginLeft' : px
});
var slidemarginleft = $('#slide').css('margin-left'); //this gets the value of margin-left
if(slidemarginleft == '0px'){
$('.contr-right').hide();
} else (slidemarginleft == '1px') {
$('.contr-right').show();
}
}`
Also I'm seeing that the margin-left isn't set in the style sheet but in the
<div style="margin-left:0px">content</div>
You can do an if statement after each click to check if the element has 0px
function example_animate(px) {
$('#slide').animate({
'marginLeft' : px
});
var slidemarginleft = $('#slide').css('margin-left'); //this gets the value of margin-left
if(slidemarginleft == '0px'){
$('.contr-right').hide();
}
}
Use this
function example_animate(px) {
$('#slide').animate({
'marginLeft' : px
});
if($('.xman').css("marginLeft")=='0px'){
$('.contr-left').attr('disabled',true);
}
}
Disable Button when margin-left: 0px
You can use jquery's .prop() method to disable a button if a condition is met. Here is an example (in pseudo code):
function disableButton() {
$(element).prop('disabled', true);
}
function checkMargin() {
if ($(element).css("margin") === 0) {
disableButton()
}
}
checkMargin()
Rewind to 0px after some clicks
Here, I'd just set a count for clicks and trigger a function when it meets the threshold you want. Pseudo code:
var threshold = 5
var clicks = 0
$(element).click(function(){
clicks++
if (clicks === 5) {
rewind();
}
clicks - 5
})
function rewind() {
$(element).css( "margin", "0" );
checkMargin()
}
Here is my working code, thanks for all the help:
<script>
function example_animate(px) {
$('#slide').animate({
'marginLeft' : px
});
var slidemarginleft = $('#slide').css('margin-left'); //this gets the value of margin-left
if(slidemarginleft < '-3000px'){
$('#slide').animate({marginLeft: '0px'}, 400);
}
var hide = $('#slide').css('margin-left'); //this gets the value of margin-left
if(hide >= '-50px'){
$('.contr-left').addClass('showMe');
}
var hideMe = $('#slide').css('margin-left'); //this gets the value of margin-left
if(hideMe <= '-50px'){
$('.contr-left').removeClass('showMe');
}
}
</script>
<!-- /Review script -->
<section id="reviews">
<div class="container">
<div class="row">
<div class="container">
<div class="row">
<h4>Reviews</h4>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-1" style="width:40px;">
<div class="row">
<div class="contr-left">
<a type="button" value="Move Left" onclick="example_animate('+=510px')"><i class="fa fa-chevron-circle-left fa-2x" aria-hidden="true" ></i></a>
</div>
</div>
</div>
<div class="col-sm-10">
<div class="row">
<div id="carreview" class="carousel" data-ride="carousel" style="opacity: 1; display: block;">
<div class="wrapper-outer">
<div class="wrapper-inner" id="slide" style="margin-left:0px;">
<?php get_template_part('loop-reviews');?>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-1" style="width:40px;">
<div class="row">
<div class="contr-right">
<a type="button" value="Move Right" onclick="example_animate('-=510px')"><i class="fa fa-chevron-circle-right fa-2x" aria-hidden="true" ></i></a>
</div>
</div>
</div>
</div>
<div class="btn btn-06">Bekijk alle reviews</div>
</div>
</section>
This is my menu. I am using Metro UI template.
<div id="divMenu" class="fluent-menu" data-role="fluentmenu" data-on-special-click="specialClick">
<ul class="tabs-holder">
<li id="litabhome" class="active">Home</li>
<li id="litabmailings" class="">Mailing</li>
<li id="litabfolder" class="">Folder</li>
<li id="litabview" class="">View</li>
<li id="limasters" class="active">Masters</li>
</ul>
<div class="tabs-content">
<div class="tab-panel" id="tab_home" style="display: block;">
<div class="tab-panel-group">
<div class="tab-group-content">
<button class="fluent-big-button">
<span class="icon mif-envelop"></span>
Create<br />
message
</button>
<div class="tab-content-segment">
<button class="fluent-big-button dropdown-toggle">
<span class="icon mif-file-picture"></span>
<span class="label">Create<br />
element</span>
</button>
<ul class="d-menu" data-role="dropdown" style="display: none;">
<li>Message</li>
<li>Event</li>
<li>Meeting</li>
<li>Contact</li>
</ul>
</div>
<div class="tab-content-segment">
<button class="fluent-big-button">
<span class="mif-cancel"></span>
<span class="label">Delete</span>
</button>
</div>
</div>
<div class="tab-group-caption">Clipboard</div>
</div>
<div class="tab-panel-group">
<div class="tab-group-content">
<div class="tab-content-segment">
<button class="fluent-button"><span class="mif-loop"></span>Replay</button>
<button class="fluent-button"><span class="mif-infinite"></span>Replay all</button>
<button class="fluent-button"><span class="mif-loop2"></span>Forward</button>
</div>
<div class="tab-content-segment">
<button class="fluent-tool-button">
<img src="MetroCSS/docs/images/Notebook-Save.png" /></button>
<button class="fluent-tool-button">
<img src="MetroCSS/docs/images/Folder-Rename.png" /></button>
<button class="fluent-tool-button">
<img src="MetroCSS/docs/images/Calendar-Next.png" /></button>
</div>
</div>
<div class="tab-group-caption">Reply</div>
</div>
<div class="tab-panel-group">
<div class="tab-group-content">
<div class="input-control text">
<input type="text" />
<button class="button"><span class="mif-search"></span></button>
</div>
<button class="fluent-button"><span class="icon-book on-left"></span>Address Book</button>
<div class="tab-content-segment">
<button class="fluent-button dropdown-toggle">
<span class="mif-filter on-left"></span>
<span class="label">Mail Filters</span>
</button>
<ul class="d-menu" data-role="dropdown">
<li>Unread messages</li>
<li>Has attachments</li>
<li class="divider"></li>
<li>Important</li>
<li>Broken</li>
</ul>
</div>
</div>
<div class="tab-group-caption">Search</div>
</div>
</div>
<div class="tab-panel" id="tab_masters" style="display: none;">
<div class="tab-panel-group">
<div class="tab-group-content">
<button class="fluent-big-button" id="btnStoreMaster">
<span class="icon mif-envelop"></span>
Store Master
</button>
</div>
</div>
</div>
</div>
</div>
When page loads, by default "Home" menu is showing with its content tab "tab_home".
Here, I have a tab content called "tab_masters" which has a button called 'btnStoreMaster". When user clicks this button, then it will be redirected to StoreMaster.aspx page.
Its redirecting, but its corresponding menu "Masters" is not highlighting. Again it shows the Home menu tab contents. How to make the focus in the clicked menu using JQuery or JavaScript?
This is my jQuery function,
$("#btnStoreMaster").click(function () {
$("#divMenu ul li").each(function () {
//alert($(this).attr("id"));
if ($(this).attr("id") == "limasters") {
$(this).addClass("active");
}
else
$(this).removeClass("active");
})
$("#divMenu div").each(function () {
alert(this.value);
if ($(this).attr("id") == "tab_masters")
$(this).css("display", "block");
else
$(this).css("display", "none");
})
});
Here, the menu css has changed, But I could not change its corresponding tab content display to block.
use this jQuery code:
$(function () {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
// now grab every link from the navigation
$('#divMenu a').each(function () {
// and test its normalized href against the url pathname regexp
if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
$(this).addClass('active');
}
});});
its take the location of current page and for each a tag if href equals location set active class
but you can already use this:
$(function () {
$("#btnStoreMaster").click(function () {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
$('#divMenu a').each(function () {
if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
$(this).addClass('active');
$("#divMenu div").each(function () {
alert(this.value);
if ($(this).attr("id") == "tab_masters"){
$(this).css("display", "block");
}
else{
$(this).css("display", "none");
}
})
}
})
})
i just adjudge you need
$("#divMenu div").each(function () {
alert(this.value);
if ($(this).attr("id") == "tab_masters"){
$(this).css("display", "block");
}
else{
$(this).css("display", "none");
}
})
to do something.
this new cod will executing when clicking on tab, take the location or current page(StoreMaster.aspx) ,set active class and do what you want!
hope it work for you.
I achieved this by using the below code:
$("#divMenu > ul li").each(function () {
if ($(this).attr("id") == "limasters") {
$(this).addClass("active");
}
else {
$(this).removeClass("active");}
})
$("#divMenu > div > .tab-panel").each(function () {
if ($(this).attr("id") == "tab_masters") {
$(this).css("display", "block");
}
else {
$(this).css("display", "none");
}
})