I have three tabs on the page.
<!-- Tabs -->
<div class="mdl-layout__tab-bar">
Plots
Plots data
Report
</div>
I need to re-draw plots when Plots tab is selected. I've tried to onclick="redraw_plots();" to the Plots tab, but function is called too fast before tab is activated. Any way to get an event when this tab activates?
Thank you.
It's happen because element inline event are the first event to be executed.
To Execute after MDL tab event you can do like this:
With Javascript Vanilla:
First add an id on link
<a id="#plots-tab" href="#plots-tab" class="mdl-layout__tab is-active"">Plots</a>
Second add an event listener
document.getElementById("#plots-tab").addEventListener("click", function(){
redraw();
});
Or with Jquery:
Add on event listener on element
$('a[href="#plots-tab"]').on('click',function(){
redraw();
});
For me it was not enough to hook to the click event.
A timeout of at least 0 milliseconds was necessary otherwise the content display it will still be set to none (tested on Chrome) and any drawing of your own that requires width calculations might fail.
Check the attached snippet and verify that without setTimeout, on the click event the tab content display is set to none and not 'block'. MDL must play an animation for smooth transition that cause absolute position drawing issues.
$('.mdl-layout__tab-bar').children().each(function(){
$(this).on('click', function(){
var timeout = 0;
var targetContent = this.getAttribute('href');
setTimeout(function(){
if($(targetContent).css('display') == "block"){
console.info("tab content is now visible after a timeout of %s millisenconds", timeout);
}
else{
console.warn("increase timeout to make sure that content is visible");
}
}, timeout);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<!-- Simple header with scrollable tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
</div>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
</div>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
<div class="page-content">
Tab 1
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-2">
<div class="page-content">
Tab 2
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-3">
<div class="page-content">
Tab 3
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-4">
<div class="page-content">
Tab 4
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-5">
<div class="page-content">
Tab 5
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-6">
<div class="page-content">
Tab 6
</div>
</section>
</main>
</div>
Another solution without adding anything special to the a tags would be
$("a.mdl-layout__tab").click(event => {
console.log("Tab switched!");
});
Related
There's a problem I don't know how to solve. I did an animation of buttons appearing with WOW.js, but when I press the button I need the elements to disappear with the same animation. The concept is that when you press the button, the reverse animation starts, and then I hide the object using setInterval and display: 'none'. But I can't start manually so that when I press the button the animation starts againю
HTML
<div class="col-6">
<button class="answer-block wow fadeInLeft" id="firstAnswer">A</button>
</div>
<!-- /.col-6 -->
<div class="col-6">
<button class="answer-block wow fadeInRight" id="secondAnswer">B</button>
</div>
<!-- /.col-6 -->
</div>
<!-- /.row -->
JS
let firstAnswer = document.getElementById('firstAnswer');
let secondAnswer = document.getElementById('secondAnswer');
firstAnswer.onclick = function (){
firstAnswer.classList.remove('fadeInLeft');
secondAnswer.classList.remove('fadeInRight');
firstAnswer.classList.add('fadeOutLeft');
secondAnswer.classList.add('fadeOutRight');
}
I'm working on a slideToggle function on click, I want to hide the previous element that was clicked when a new one is clicked, I've used this same set of code previously and its worked however it's no longer working now and I'm stumped at why its no longer works:
My code is as below or view a jsfiddle
js/js.js
$('.togglesources').hide();
$('.captionsource').on('click', function () {
$(this).next('.togglesources').slideToggle();
$(this).parent().siblings().children().next().slideUp();
return false;
});
index.html
<div class="mostpopular">
<h4>Nokia:</h4>
<h5>3100</h5>
<p>Most popular mobile phone of the year</p>
<div class="sources">
<p class="captionsource">Click to toggle source</p>
<div class="togglesources">
<p class="source">Wikipedia (Data Source)</p>
<p class="source">GSM Solution (Image Source)</p>
</div><!-- End Toggle Sources -->
</div><!-- End Sources -->
</div>
<!-- END MOST POP -->
<div class="mostpopular">
<h4>Lord of the Rings:</h4>
<h5>Return of the King</h5>
<p>Highest Grossing Film</p>
<div class="sources">
<p class="captionsource">Click to toggle source</p>
<div class="togglesources">
<p class="source">Wikipedia</p>
<p class="source">IMDB (Image Source)</p>
</div> <!-- End Toggle Sources -->
</div> <!-- End Sources -->
</div>
would appreciate some help in regards to this.
Why aren't the other '.togglesources' divs closing when I open a new one?
Try this:
$('.togglesources').hide();
$('.captionsource').on('click', function () {
$(this).closest('.mostpopular').siblings().find('.togglesources').slideUp();
$(this).next('.togglesources').slideToggle();
$(this).parent().siblings().children().next().slideUp();
return false;
});
Working Fiddle
I'm trying to create a Tumblr theme in which the links and post information slide in when you click a + sign. (My test blog is at http://noitsnotitsnotokay.tumblr.com/)
I'm quite the begginner at JavaScript, but I was able to work it out for a links menu with the following code:
<span class="btn">+</span>
<ul class="lks">
<!-- various links are here -->
</ul>
<script>
$("ul.lks").hide();
$("span.btn").click(function () {
$("ul.lks").slideToggle("slow");
});
</script>
But I also have a piece of code that applies to all posts, for the post information. I used nearly the same code, but, as you can probably see, it slides in and out various times.
<div class="pstinfo">
<!-- info is here -->
</div>
<span class="plsign">+</span>
<script>
$("div.pstinfo").hide();
$("span.plsign").click(function () {
$("div.pstinfo").slideToggle("slow");
});
</script>
It seems that the button's order and the way I name the classes in the JavaScript isn't changing much...any tips?
If you you don't want to open all the '.pstinfo' elements when you click on '.plsign', just the related one, try this code:
HTML:
<div class='parentContainer'> <!--put your elements in a parent Container -->
<div class='info'>
Info 1
</div>
<div class='plsign'>
+ Open
</div>
</div>
<div class='parentContainer'>
<div class='info'>
Info 2
</div>
<div class='plsign'>
+ Open
</div>
</div>
<div class='parentContainer'>
<div class='info'>
Info 3
</div>
<div class='plsign'>
+ Open
</div>
</div>
JS:
$(".plsign").on('click',function ()
{
$(this).parent().find('.info').slideToggle("slow");
});
Link to jsFiddle
code block 01
<span class="btn">+</span>
<ul class="lks">
<!-- various links are here -->
</ul>
<script>
$("ul.lks").hide();
$("span.btn").click(function () {
$("ul.lks").stop().slideToggle("slow");
});
</script>
Code block 02
<div class="pstinfo">
<!-- info is here -->
</div>
<span class="plsign">+</span>
<script>
$("div.pstinfo").hide();
$("span.plsign").click(function () {
$("div.pstinfo").stop().slideToggle("slow");
});
</script>
Try this code and Update the result :)
I'm using dragscroller plugin to make a div scrollable with mouse move! There are around 100 sub elements inside the scrollable div. These elements have a click event binded. What I'm trying to do is when a sub element is clicked it should get scrolled to the top of the div. I use the following function to get this but the problem is when I manually scroll to a element in the bottom and click, it get's scrolled to a position that's not expected.
function billScroller(elem){
var parentTopCoordinate = $('#bill-list').offset().top;
var elementCoordinate = $(elem).parent().offset().top;
var scrollPosition = ( elementCoordinate - parentTopCoordinate ) - 2;
$('#bill-list').animate({ scrollTop: scrollPosition },1000);
}
$(document).on('click',".bill-description",function()
{
//close all bills
$(".bill-item-list").not($(this).next(".bill-item-list")).slideUp(600);
billScroller(this);
//open the clicked bills
$(this).next(".bill-item-list")
.slideToggle(600);
});
How can i fix this issue. I tried to create a fiddle but it was too much code and some of the elements are drawn using ajax responses.
Update : This is the element hierarchy.
<div id="bill-list">
<div id="bill-panel">
<!-- Bill -->
<div class="bill">
<!-- Bill description - Holds Bill details -->
<div class="bill-description">
<div class="bill-info bill-number"><span>000A</span></div>
<div class="bill-info table-name"><span>TABLE 78</span></div>
<div class="bill-info room-number"><span>A678</span></div>
<div class="bill-info amount"><span>76.00</span></div>
<div class="bill-remove-icon"></div>
</div>
<!-- Bill Item list -->
<div class="bill-item-list">
<!-- Item : This is a sample element & will be cleared when system loads -->
<div class="bill-item">
<!-- Item image -->
<div class="bill-item-img"></div>
<!-- Item description -->
<div class="bill-item-description">
<div class="bill-item-name">
<!-- Item Name -->
<p class="bill-item-name-left">Normal Cofee</p>
<!-- Item Price -->
<p class="bill-item-name-right">170.00</p>
<div class="clear"></div>
</div>
<!-- Total item price -->
<div class="bill-item-price">
<span>170.00</span>
</div>
<!-- Item Quantity -->
<div class="bill-item-amount">
<span>1</span>
</div>
</div>
<!-- Increas & Decrease item Quantity -->
<div class="bill-amount-selection">
<a class="amount-increase" href="#"></a>
<a class="amount-decrease" href="#"></a>
</div>
</div>
<!-- Remove bill link -->
<div class="item-drop-point"></div>
</div>
</div>
</div>
</div>
Bill Panel is scrollable and Bills are generated using ajax calls. A bill can contain multiple items and toggle slide function is used to open and close item list.
Say I have many div "pages" set up like this:
<script type="text/javascript">
$('.link').on('click', function(e){
fadeOutPage();
$(this.getAttribute("href")).fadeIn(); //fade in clicked page
});
function fadeOutPage() {
$('#container>div').fadeOut(); //fade out all displayed pages
}
</script>
page 1
page 2
page 3
....
....
<div id="container">
<div id="page1">
<div class="navbar"> contents of navbar 1 </div>
<div class="pagecontents"> contents of page 1 </div>
<div class="pagefooter"> more contents for page 1 </div>
</div>
<div id="page2">
<div class="navbar"> contents of navbar 2 </div>
<div class="pagecontents"> contents of page 2 </div>
<div class="pagefooter"> more contents for page 2 </div>
</div>
<div id="page3">
<div class="navbar"> contents of navbar 3 </div>
<div class="pagecontents"> contents of page 3 </div>
<div class="pagefooter"> more contents for page 3 </div>
</div>
...
...
</div>
This works as I intend it, fade out all pages then fade in the clicked page when I click a link. But I want to delay the fade in of ".pagefooter", for let's say 1000ms, but keep ".pagefooter" inside the parent div "#pageX". Right now when I call "$(this.getAttribute("href")).fadeIn();" it will fade in "#pageX" all at the same time.
How do I override that so I can insert a settimeout(function() {('.pagefooter').fadeIn()},1000) somewhere, so that everything else except ".pagefooter" fades in normally, then ".pagefooter" fades in 1000ms afterwards?
EDIT: Here you go:
$('#page1').show().find('div').hide().filter(function () {
return !$(this).hasClass('pagefooter');
}).fadeIn().add('.pagefooter').delay(1000).fadeIn();
Here's a working demo: http://jsfiddle.net/mFjg5/1