$(document).on('click', '.tbtn', function(e) {
$('#loading-image').show();
if(error){
$('loading-image').hide();
else{
val = $('.barbtn input:checked').val();
draw_summary($.parseJSON(data['summary']),val);
draw_barchart($.parseJSON(data['barchart']),val);
draw_scatter($.parseJSON(data['table']),val);
$('#loading-image').show();
}
});
Here i have drawing charts using d3...charts are coming correctly but i need to set loading image when i onclick the button...this code is not working
how to set loading image when onclick the button?
You just need to set CSS for it. Otherwise you are following right path. Please check below snippet.
$(document).on('click', '.tbtn-hide', function(e) {
$('#loading-image').hide(); //hide loader
});
$(document).on('click', '.tbtn-show', function(e) {
$('#loading-image').show(); //show loader
});
#loading-image
{
background: white url("http://smallenvelop.com/demo/simple-pre-loader/images/loader-64x/Preloader_1.gif") no-repeat scroll center center;;
height: 80%;
left: 0;
position: fixed;
top: 10;
width: 100%;
z-index: 9999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="tbtn-hide">Hide</button>
<button class="tbtn-show">show</button>
<div id="loading-image" style="display:none">
</div>
$(document).on('click', '.tbtn', function(e) {
$('#loading-image').show();
$.ajax({
success:function(result){
val = $('.barbtn input:checked').val();
draw_summary($.parseJSON(data['summary']),val);
draw_barchart($.parseJSON(data['barchart']),val);
draw_scatter($.parseJSON(data['table']),val);
$('#loading-image').hide();
}
});
});
Related
I'm trying to use Slider Revolutions tabs to redirect to a page.
The buttons (tabs) have this structure:
<div data-liindex="1" data-liref="rs-12" class="tp-tab selected" style="width: 170px; height: 50px; left: 190px; top: 0px;"><span class="tp-tab-title">ARMENIA</span></div>
The buttons defer from eachother by data-liindex parameter. 0, 1, 2,...
I tried this code but cannot figure out how to getElement by the custom id.
<script type="text/javascript">
document.getElementById("1").onclick = function () {
location.href = "www.google.com";
};
</script>
I cannot alter the button code though. Its generated by Slider Revolution so I cannot add parameters to it any more than what it is now.
If you want to select element with data- attribute you can do like:
document.querySelector("[data-liindex='1']");
Or you want to select the element by ID you can add the id to the tag you want to select:
<div data-liindex="1" data-liref="rs-12" class="tp-tab selected" style="width: 170px; height: 50px; left: 190px; top: 0px;"><span class="tp-tab-title">ARMENIA</span></div>
document.querySelector('#1')
Simplified the HTML for the demo. Does this help? (NOTE: Commented out the location.href for the demo)
let arrayUrl = [
"www.google.com",
"www.bing.com",
"www.yahoo.com"
];
document.addEventListener('DOMContentLoaded', function() {
// Add Click Listeners
Array.from(document.getElementsByClassName('tp-tab')).forEach(el => {
el.addEventListener('click', function(event){
console.log(`${event.target} - ${event.target.dataset.liindex}`);
let url = arrayUrl[ event.target.dataset.liindex ];
console.log(url);
// location.href = url;
});
});
});
<div data-liindex="0" data-liref="rs-12" class="tp-tab">ARMENIA
</div>
<div data-liindex="1" data-liref="rs-12" class="tp-tab">Canada
</div>
<div data-liindex="2" data-liref="rs-12" class="tp-tab">Europe
</div>
This code did the job. Need to be inserted in the SETTINGS of the current slider, not in the slides separatly.
jQuery(document).ready(function ($) {
$('body').on('click', '.tp-tab', function () {
switch($(this).attr("data-liindex")) {
case "1":
window.location.href = "https://google.com/";
break;
case "2":
window.location.href = "https://blizzard.com/";
break;
default:
break;
}
});
});
I was creating a dropdown with jquery, HTML and CSS. I want to close the dropdown when the user clicks outside of dropdown. But it's not working fine.
JS
function _drpdntest() {
$(".drpdn-click").click(function(){
var _drpdn_container = $(this).attr("data-drpdn-click");
var _drpdn_content = $('[data-drpdn-content="'+_drpdn_container+'"]');
_drpdn_content.toggleClass("drpdn-show");
_drpdn_content.siblings().removeClass("drpdn-show");
$(document).click(function(event){
_drpdn_content.removeClass("drpdn-show");
});
$(this, _drpdn_content).click(function(event){
event.stopPropagation();
});
});
}
// Run Component Function
$(document).ready(function(){
_drpdntest();
});
HTML
<button class="drpdn-click" data-drpdn-click="main">CLICK</button>
<div class="drpdn-content drpdn-body" data-drpdn-content="main">
Main
</div>
CSS
.drpdn-content {
z-index: 1000;
position: absolute;
display:none;
overflow: hidden;
}
.drpdn-content.drpdn-show {
display: block;
}
This is because you have not added stopPropagation() for button click. Due to which on button click it is triggering document click.
Also $(this, _drpdn_content) should be $(_drpdn_content, this) or simply remove this while adding stopPropagation.
Here second parameter provides context in which selector search will get performed, in short second parameter is parent and you are saying to search all childs matching with selector provided in first parameter.
function _drpdntest() {
$(".drpdn-click").click(function(e) {
var _drpdn_container = $(this).attr("data-drpdn-click");
var _drpdn_content = $('[data-drpdn-content="' + _drpdn_container + '"]');
_drpdn_content.siblings().removeClass("drpdn-show");
_drpdn_content.addClass("drpdn-show");
$(_drpdn_content).click(function(event) {
event.stopPropagation();
});
$(document).click(function() {
_drpdn_content.removeClass("drpdn-show");
});
e.stopPropagation();
});
}
// Run Component Function
$(document).ready(function() {
_drpdntest();
});
.drpdn-content {
z-index: 1000;
position: absolute;
display: none;
overflow: hidden;
}
.drpdn-content.drpdn-show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="drpdn-click" data-drpdn-click="main">CLICK</button>
<div class="drpdn-content drpdn-body" data-drpdn-content="main">
Main
</div>
This should be what you want, based on what you said in the comment
It now shows on the first click, and it doesn't hide when you click on the option.
function _drpdntest() {
$(".drpdn-click").click(function() {
var $this = $(this)
var _drpdn_container = $(this).attr("data-drpdn-click");
var _drpdn_content = $('[data-drpdn-content="' + _drpdn_container + '"]');
_drpdn_content.toggleClass("drpdn-show");
$(document).click(function(event) {
if (event.target != $this[0] && event.target != _drpdn_content[0]) {
_drpdn_content.removeClass("drpdn-show");
}
});
$(this, _drpdn_content).click(function(event) {
event.stopPropagation();
});
});
}
// Run Component Function
$(document).ready(function() {
_drpdntest();
});
.drpdn-content {
z-index: 1000;
position: absolute;
display: none;
overflow: hidden;
}
.drpdn-content.drpdn-show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="drpdn-click" data-drpdn-click="main">CLICK</button>
<div class="drpdn-content drpdn-body" data-drpdn-content="main">
Main
</div>
I have this code, but I do not know how to hide the video when clicking outside.
Here is my code:
$(".popup").click(function () {
var $this = $(this);
var $iframe = $("<iframe>").attr("src", $this.data("link")).css({"width": 400, "height": 300});
var $title = $("<h1>").text($this.data("title"));
$("#video-view").html($title).append($iframe);
$iframe.wrap("<div class='class-video'>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="popup" href="#!" data-link="https://www.youtube.com/embed/klModGpSKtc"><img class="img" src="img/annual-smb-report.png"/></a>
<div id="video-view">
</div>
I tried everything but clearly I am doing something wrong.
Thank you in advance.
This example shows the video when clicking on the image and hides when you click anywhere else:
$(".popup").click(function (e) {
e.stopPropagation();
var $this = $(this);
var $iframe = $("<iframe>").attr("src", $this.data("link")).css({"width": 400, "height": 300});
var $title = $("<h1>").text($this.data("title"));
$("#video-view").html($title).append($iframe);
$iframe.wrap("<div class='class-video'>");
});
$(document).click(function() {
$("#video-view").empty();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="popup" href="#!" data-link="https://www.youtube.com/embed/klModGpSKtc"><img class="img" src="img/annual-smb-report.png"/></a>
<div id="video-view">
</div>
The trick is to add a hidden layer on all the screen. When the user clicks on that layer, you will hide the movie.
keep attention to the z-index, it's important.
Like this:
$(".popup").click(function () {
var $this = $(this);
var $iframe = $("<iframe>").attr("src", $this.data("link")).css({"width": 400, "height": 300});
var $title = $("<h1>").text($this.data("title"));
$("#video-view").html($title).append($iframe);
$iframe.wrap("<div class='class-video'>");
$('.overlay').show();
});
$('.overlay').click(function(){
$(this).hide();
$('#video-view').html('');
});
#video-view {
z-index: 2;
position:relative;
display: inline-block;
}
.overlay {
position: absolute;
z-index:1;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="popup" href="#!" data-link="https://www.youtube.com/embed/klModGpSKtc"><img class="img" src="img/annual-smb-report.png"/></a>
<div id="video-view">
</div>
<div class="overlay"></div>
I would like to scroll to the end of the container. The element is having new items added via ajax on click, so I am recalculating its height each time I click to load more. The page scrolls fine but I would like to also add the navigation height in order to have the exact pixels. It looks like it is not adding + 224 tho
Html
lorem
New items are added via a click and ajax.
Css
nav {
height: 90px;
}
#container {
margin-top: 104px;
margin-bottom: 120px;
}
Jquery
var page = $("html, body");
var pos = $("#container").height() + 224;
page.animate({scrollTop: pos}, 1000);
I think you want something like this no ?
var page = $("html, body");
console.log($("#t").height());
var pos = $("#t").height() - 500;
console.log(pos);
page.animate({scrollTop: pos}, 1000);
div{
height: 1000px;
width: 50px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="t"></div>
you can use scrollIntoView for last added item
var j=0;
function Add(){
var item=null;
for(var i=0;i<20;i++){
j++
item= $('<div class="item">'+j+'</div>').appendTo("#container")
}
item[0].scrollIntoView()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" onclick="Add()" Value="Add" />
<div id="container"></div>
I have a issue here. I'm trying to do the slideUp and slideDown equivalent in CSS3 transitions but also want when document is clicked the div element slides up.
Here is the code
http://jsfiddle.net/RK8FZ/2/
HTML
<div id="main">
<div id="search-content">
<input type="search" placeholder="Search"/>
<input type="submit" />
</div>
<section class="wrapper">
<span id="toggle-search">Search</span>
</section>
</div>
Here is the CSS code
#main #search-content { position: relative; max-height: 0; overflow: hidden; transition: all .3s linear; background: #FFF; opacity: 0;}
#main #search-content.open { max-height: 200px; opacity: 1; }
Here is the jquery code
function toggleSearch() {
$('#toggle-search').on('click', function(event){
$('#search-content').toggleClass('open').find('input[type="search"]').focus();
$(this).text( $(this).text() === "Search" ? "Close" : "Search" );
})
$('#search-content').on ('click', function(e) {
e.stopPropagation();
});
$(document).on('click', function() {
if( $('#search-content').hasClass('open') ) {
$('#search-content').removeClass('open');
}
});
}
Can anyone figure this thing out? What it is happening is that it triggers the open and the close at the same instante.
Working DEMO
I guess this is what you need
$(function () {
toggleSearch();
})
function toggleSearch() {
$('#toggle-search').on('click', function (event) {
event.stopPropagation();
$('#search-content').toggleClass('open').find('input[type="search"]').focus();
$(this).text($(this).text() === "Search" ? "Close" : "Search");
})
}
$(document).on('click', function (e) {
$('#toggle-search').text('Close');
$('#search-content').removeClass('open');
});
$('#search-content').on('click', function (e) {
e.stopPropagation();
});
$(document).on('click', function () {
if ($(this).addClass('search-open')) {
$('#search-content').removeClass('open');
}
});
What are you checking in if condition? If you wan to check if search-open class exists then you can use
if ($(.search-open').length > 0)