So i'm trying to display 3 graphs in the same div, toggled by buttons which show/hide the other divs respectively. I've set the other 2 graphs to
style= "display: none"
To ensure only one graph is shown upon load. This is how the default view looks like:
The default view is the day on day button. However, when I click the other 2 buttons, the width of the graph screws up, and it displays like this.
It shrinks for some reason. I have switched the order of display, and it's always the hidden graphs which have the size problem. I suspect it has something to do with the inline style property, but I cant figure out how to make it show properly.
Code snippet for graph:
<button onclick="showDay('tasks')">Day on Day</button>
<button onclick="showWeek('tasks')">Week on Week</button>
<button onclick="showMonth('tasks')">Month on Month</button>
<div class="portlet-body">
<div id="tasks"></div>
<div id="tasksWeek" style="display: none"></div>
<div id="tasksMonth" style="display: none"></div>
</div>
<script>
new Highcharts.StockChart({{masterDic['tasks']|safe}});
new Highcharts.StockChart({{masterDic['tasksWeek']|safe}});
new Highcharts.StockChart({{masterDic['tasksMonth']|safe}});
</script>
code snippet for calling (hackish right now)
<script>
function showDay(id) {
var idDay = "#"+id;
var idWeek = "#"+id+"Week";
var idMonth = "#"+id + "Month";
$(idWeek).hide(10);
$(idMonth).hide(10);
$(idDay).show(10);
}
function showWeek(id) {
var idDay = "#"+id;
var idWeek = "#"+id+"Week";
var idMonth = "#"+id + "Month";
$(idMonth).hide(10);
$(idDay).hide(10);
$(idWeek).show(10);
}
function showMonth(id) {
var idDay = "#"+id;
var idWeek = "#"+id+"Week";
var idMonth = "#"+id + "Month";
$(idDay).hide(10);
$(idWeek).hide(10);
$(idMonth).show(10);
}
</script>
Anyone have any ideas on how to fix this? Thanks alot! :)
EDIT:
css for portlet body (entire trace when using inspect element):
https://jsfiddle.net/ovnrpnb5/
setTimeout(function(){
$(window).resize();
})
Call this after show()
Figured it out if anyone's interested. Tldr: call reflow() on the chart after showing.
I was using hide() and show() instead of tabs as per #Grzegorz Blachliński's comment, so the solution given wasn't working.
I found this link which showed you how to access the element within your HTML http://ahumbleopinion.com/highcharts-tips-accessing-chart-object-from-container-id/
I was using the highcharts CDN, which apparently isnt 3.0.1, so the jquery method wasnt working. Hence, i made the following function and called it after every show()
// HACK TO GET IT TO DISPLAY PROPERLY
function callReflow(id){
var index = $(id).data('highchartsChart');
var chart = Highcharts.charts[index];
chart.reflow();
}
Worked like a charm :)
Related
I am trying to create a hover that shows a list to the user and reminds the user what we can accept.
<div class="proofresidencytip" style="display:inline-block;">
Hover Picture
</div>
$(".proofresidencytip").hover(
function(){
var message = "Please submit a copy of one of the following:";
var div = '<div class="rvtooltips">'+message+'</div>';
$(this).append(div);
$(this).find(".rvtooltips").fadeIn("fast");
},
function(){
var tt = $(this).find(".rvtooltips");
tt.fadeOut("fast", function(){
tt.remove();
});
}
);
http://jsfiddle.net/jw6zc4hf/
I am trying to figure out how I can list the items in var message. Whenever i try using <br> or any other html code it just breaks and doesnt show the message at all. How can I display new lines and the list of items in the hover?
Any help would be greatly appreciated!
I am not sure what the problem is? You can place <br> into message just fine:
$(".proofresidencytip").hover(
function(){
var message = "Please submit a copy of one of the following:<br>a<br>b";
var div = '<div class="rvtooltips">'+message+'</div>';
$(this).append(div);
$(this).find(".rvtooltips").fadeIn("fast");
},
function(){
var tt = $(this).find(".rvtooltips");
tt.fadeOut("fast", function(){
tt.remove();
});
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="proofresidencytip" style="display:inline-block;">
Hover Picture
</div>
If you have simplified your example in order to post the question on SO, you may have omitted some relevant CSS. If your proofresidencytip class has a set height, for example, it cannot easily expand. Make sure to set padding, line-height, perhaps min-height, but NOT height nor overflow: none.
Via the link: http://boukestar.nl/ani-map/ you can see that I've set up a vector svg map that is animated.
My only problem is that I dont no how to deactivate or onload a button / country when you click on a other button / country. All the buttons stay active when you click on a other button.
That results in not correct information from a country that's loaded.
HTML
<button class="usa" onClick="usa()" class="hidden">Verendigde Staten</button><div id="landusa" class="hide"><img src="svg/infovs.svg" viewBox="0 0 1087 841.89"></div><div id="div1" style="display: none;"></div>
JS
(function() {
'use strict';
var svg,
button;
document.addEventListener('DOMContentLoaded', function init() {
button = document.querySelector('.usa');
svg = document.querySelector('svg');
button.addEventListener('click', clickHandler, false);
});
function clickHandler(e) {
svg.classList.toggle('usa');
e.target.classList.toggle('on');
}
}());
Has anybody an idea?
Many thanks!
Bouke
Here's my solution. If you put your code in a JSFiddle or CodePen then I can test it:
<script>
document.addEventListener("DOMContentLoaded", function init(){
var svg = document.querySelector("svg"),
currentCountry,
currentButton;
function toggle(clickedButtonCountry){
var clickedButton = document.querySelector("." + clickedButtonCountry);
currentButton.classList.remove("on");
clickedButton.classList.add("on");
clickedButton.classList.remove("hidden");
currentButton.classList.add("hidden");
svg.classList.remove(currentCountry);
svg.classList.add(clickedButtonCountry);
currentCountry = clickedButtonCountry;
currentButton = clickedButton;
}
});
</script>
<button class="usa hidden" onClick="toggle('usa')">Verendigde Staten</button>
<button class="brazil hidden" onClick="toggle('brazil')">Brazil</button>
<svg></svg>
This way Javascript "remembers" which country is currently displayed, and then when someone clicks on a button it "remembers" that country instead.
Some things to keep in mind:
usa() means you have function usa(){} somewhere, which you don't (and shouldn't). I think you were going for something like toggle('usa')
You can have multiple classes in one class attribute, like <div class="foo1 bar2"></div>
document.querySelector only returns one element. document.querySelectorAll returns many.
Using classList.toggle can get a little weird because it's not specific about whether the class should be added or removed. I prefer to explicitly use classList.add and classList.remove. classList.contains is very useful.
We have a list of paired divs dynamically built in a ColdFusion page (internshipHandleX, internshipHiddenX, etc.) by looping over a query and adding the current row, eg:
<div id="internshipHidden#internship.currentrow#" class="hidden pop-up">
that we want to bind together as modal windows and corresponding triggers. Using this code:
for (var row = 1; row <= totalInternships; row ++){
var thisHandle = "#internshipHandle" + row;
var thisHidden = "#internshipHidden" + row;
$(thisHandle).click(function(e){
e.preventDefault();
$(thisHidden).bPopup({modalColor:"black"});
});
}
We apparently link all of the internshipHandle(s) to the last internshipHidden.
What am I missing? Is there a better way to make modal windows out of dynamically created css-hidden divs (that is, within the skeleton framework? I REALLY don't want to start over using bs.)
DreamWeaver is not happy about me putting functions in loops but all the cool kids tell me not to listen to it.
Edit:tryed the same thing with the jqueryUI dialog and had the same problems. I'd love an explanation. Thanks!
Welcome to Javascript. You just encountered a closure in its natural habitat.
In order to have the row variable working the way you expect it to, you need to pass it in its own scope. This can be done using a closure. You may want to dig deeper into that topic, but for now, here is a fix for your problem:
var totalInternships = 2;
for (var row = 1; row <= totalInternships; row++){
var bindInternship = function(rowIndex) {
$("#internshipHandle" + rowIndex).click(function(e){
e.preventDefault();
alert('pop-up #' + rowIndex);
//$("#internshipHidden" + rowIndex).bPopup({modalColor:"black"});
});
};
bindInternship(row);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" id="internshipHandle1">pop-up 1</button>
<div id="internshipHidden1" class="hidden pop-up">
<button type="button" id="internshipHandle2">pop-up 2</button>
<div id="internshipHidden2" class="hidden pop-up">
Note: I commented the line for the bPopup. Uncomment it, remove the alert and you're good to go.
I'm working on a script to simulate a page change in a Questionnaire I'm building. I figured maybe I could use a bunch of "if" statements to house all the logic but it's not working right, before I go and create separate functions I'd like to know if it's possible to put them all in one single function.
So far this is the script
function pageChange(){
var chng1 = document.getElementById("p1next");
var chng2a = document.getElementById("p2back");
var chng2b = document.getElementById("p2next");
var chng3a = document.getElementById("p3back");
var chng3b = document.getElementById("p3next");
var pg1 = document.getElementById("page01");
var pg2 = document.getElementById("page02");
var pg3 = document.getElementById("page03");
if (chng1.click){
pg1.style.display="none";
pg2.style.display="block";
}
if (chng2a.click){
pg1.style.display="block";
pg2.style.display="none";
}
the "p1next, p2back, p2next etc." are IDs I gave the buttons on the pages, which I have in DIVs that I respectively named "page01, page02, page03 etc."
Without the 2nd if statement the script works exactly how I want it, it changes the display for "page01" to none and the div for "page02" to block. When I add the second if statement it doesn't work.
The reason I want to do it like this rather than making actual pages is because I don't want the data to get lost when they load another page. Am I on the right track or do I need to create a new function for each page?
Not exactly on the right track, you should use onclick events, instead of if (x.click) like this:
var chng1 = document.getElementById("p1next");
var pg1 = document.getElementById("page01");
var pg2 = document.getElementById("page02");
// Events
chng1.onclick = function(){
pg1.style.display="none";
pg2.style.display="block";
};
This will save your function until the element is clicked and then execute that function. In your case, it is executed on page load, and at that moment the user is not clicking anything.
Why not try something like this:
HTML:
<div class="page" data-pg="1">...</div>
<div class="page" data-pg="2">...</div>
<div class="page" data-pg="3">...</div>
<input id="btnPrev" type="button" value="Prev" />
<input id="btnNext" type="button" value="Next" />
jQuery:
var pageNum = 1;
$(document).ready(function () {
$("#btnPrev").on("click", function () { ChangePage(-1); });
$("#btnNext").on("click", function () { ChangePage(1); });
ChangePage(0);
});
function ChangePage(p) {
$(".page").hide();
pageNum += p;
$(".page[data-pg='" + p + "']").show();
$("#btnPrev").removeAttr("disabled");
$("#btnNext").removeAttr("disabled");
if (pageNum === 1) $("#btnPrev").attr("disabled", "disabled");
if (pageNum === $(".page").length) $("#btnNext").attr("disabled", "disabled");
}
That way you can easily grow your number of pages without changing the script. My apologies by the way for doing this in jQuery.
Update:
Have a lot of time on my hands today and have not coded for while using vanilla Javascript. Here's the version of the code using plain js: https://jsfiddle.net/hhnbz9p2/
I have tried to create a new modal window.But it shows an address bar and title is shown as about:blank.The code is shown # http://jsfiddle.net/visibleinvisibly/vhudmz5u/
<button id="mydiv" onclick="myFunction( )"> The content</button>
<script>
function myFunction() {
var childWin = window.open ("about:blank", "MyWindow", "height=150,width=200");
childWin.document.body.innerHTML = "<span style='color:red'>Hello World!</span>";
}
</script>
I guess in IE11 we cant hide the addressbar.Please let me know if you have any idea as to how to set the title for the modal popup..
Thanks in advance
Alex
If you want total control over the modal window, it may be a better idea to create your own. The idea is to create a div (the 'modal window' box) and a greyed out background layer between your page and the created div. This jsFiddle provides some code for that. It uses jQuery. The central function is:
function createModalBox(html,useCloser){
var box = $('#modalbox').length
? $('#modalbox')
: $('<div id="modalbox"></div>').appendTo('body');
var back = $('#modalback').length
? $('#modalback')
: $('<div id="modalback"/>').appendTo('body');
box.html(html);
if (useCloser){
$('<div id="modalclose" class="closer"/>').appendTo(box).show();
}
back.show();
setTimeout(function(){box.fadeIn(); center(box[0]);},100);
if (!back.attr('data-handled')){
var f = function(){
$('#modalback, #modalbox').fadeOut();
$('#modalbox').remove();
};
$('body').on('click','#modalclose',f);
back.attr('data-handled', true);
}
}