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');
}
Related
As title states, the website I have currently has a "click to go to next image" slide show as the banner image. I'm looking to turn it into a slideshow that automatically transitions from image to image but I'm not sure exactly how to do it.
The site can be found # rdesignmedia.com/testing/logo_you
The code is as follows:
<div class="camera_container">
<div class="camera_wrap" id="camera">
<div data-src="images/page-1_slide1.jpg">
<div class="camera_caption fadeIn">
<div class="jumbotron jumbotron1">
<em>On Tour</em>
<div class="wrap">
<p>Engineered Elegance</p>
</div>
</div>
</div>
</div>
<div data-src="images/page-1_slide2.jpg">
<div class="camera_caption fadeIn">
<div class="jumbotron jumbotron2">
<em>ELEVATE</em>
<div class="wrap">
<p>Your Brand Lives Here.</p>
</div>
</div>
</div>
</div>
<div data-src="images/page-1_slide3.jpg">
<div class="camera_caption fadeIn">
<div class="jumbotron">
<em>Tech Branding</em>
<div class="wrap">
<p>Stand out from the crowd with technological branding</p>
</div>
</div>
</div>
</div>
</div>
</div>
Looking at the site you can do this after the page loads:
// Creates an interval that runs the function every 2 seconds
setInterval(
function () {
// Finds the ul holding the little dots
var ul = $(".camera_pag_ul");
// Finds the currently selected dot
var selected = ul.find('.cameracurrent');
// Finds the next dot to click
var next = selected.next('li');
// If the next dot exists click it, else start over with first one
if (next.length != 0) {
next.click();
}
else {
ul.find('li:first').click();
}
}, 2000
);
This works if I run it in the console on the site. This switches the image every 2 seconds. You can obviously change the 2000 to something else to increase the time the images is displayed before the next one shows.
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!");
});
I have the following markup:
<div class="schedule">
<!-- Header info -->
<div class="row">
<!-- Schedule title -->
<div class="title" ng-click="toggleHeader()">
<span ng-hide="isScheduleVisible">{{ schedule.name }} (Open to View)</span>
<input ng-model="schedule.name" class="schedule-name" ng-show="isScheduleVisible"/>
</div>
<!-- Action menu items go here -->
<div class="actions" ng-show="isScheduleVisible"></div>
</div>
<!-- Schedule Info -->
<div class="row" ng-show="isScheduleVisible">
<!-- This is the time on the left of the table -->
<div id="times"></div>
<!-- Conditions for the Schedule -->
<div id="conditions"></div>
<!-- Shifts of the Schedule -->
<div class="shifts"></div>
</div>
</div>
I want to toggle the content by clicking the "title" (see below for the open/close state snapshot). Right now, as you can see, I call a function toggleHeader() in my controller, and all it does is:
$scope.toggleHeader = function()
{
$scope.isScheduleVisible = ! $scope.isScheduleVisible;
}
I want to replace it with ng-click="isScheduleVisible = !isScheduleVisible". However, this does not work. This will only toggle the header (the grey banner) and not the actual content (the schedule).
Why?!
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 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.