I have a page where multiple graphs are shown for different components. I am using highcharts. Below is the code. How can I set it up so that when the user clicks on the div , it will resize that graph to the whole page and a click will bring it back to the orginal size. Basically to toggle on each click between max screen and original size using javascript or jquery.
<div id="graph_id"></div>
<div id="top_container">
<div id="container_1" style="float:left ; height: 50%; width:32%; min-width: 200px; background:#000000; padding:5px;"></div>
<div id="container_2" style="float:left ; height: 50%; width:32%; min-width: 200px; background:#000000; padding:5px;"></div>
<div id="container_3" style="float:left ; height: 50%; width:32%; min-width: 200px; background:#000000; padding:5px;"></div>
</div>
</div>
All the highcharts are rendered to the containers using the code
var chart_container_opt_1 = {
chart: {
renderTo: 'container_1',
.....
var chart_1 = new Highcharts.StockChart(chart_container_opt_1);
and similar ones for chart_2 with container_2 and chart_3 for container_3
You can use highchart function :-
chart.setSize (width,height);
On every click calculate the new height and width which you can easily find using jquery height() and width() functions. and after that call the above function with new parameters.
Have a look at
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/members/chart-setsize-button/
Second solution is using highslide which allows to open chart in the popup.
Example: http://jsfiddle.net/roadrash/GqhEX/
Related
I'm new to react and I was trying to make a simple website with music notes (just some images) and wanted each note to change color when hovering over it. I know I can do this with :hover, but I wanted to try out useState for practice. I finally got the toggle feature (just the feature that made it change color when hovering) to work, but then in the process, the width got messed up. All other parts of css (position, color etc.) are working so I'm a bit confused as to why the width is staying the original width. Here is the code I have currently. The toggle feature is only on note3 right now because that's the note I was playing around with.
The first bit of code is essentially part of my index.js file with the music note I was working on.
const Body = () => {
const [isNote3, setNote3] = useState("true");
const ToggleNote3 = () =>{
setNote3(!isNote3);
}
const [isB1, setB1] = useState("true");
const ToggleB1 = () =>{
setB1(!isB1);
}
return (
<div>
<div className="sheetmusic">
<img className="sheet" src={sheetmusic} />
</div>
<div className="notes">
<div className={isNote3 ? "note3" : "n3"}>
<img onMouseEnter={ToggleNote3 } src={note1} />
</div>
</div>
</div>
)
}
The second snippet is the relevant css that corresponds with note3.
.n3{
filter: invert(100%) sepia(26%) saturate(5791%) hue-rotate(58deg) brightness(116%) contrast(101%);
left: 25%;
position: absolute;
max-width: 8%;
max-height: auto;
top: 30%;
}
.note3 {
position: absolute;
left: 25%;
max-width: 8%;
max-height: auto;
top: 30%;
}
Here is also a picture of the current situation on my website. (the large note is the one that currently toggles). 3
I've tried playing around with it for a bit and just don't seem to know the issue. Any help would be GREATLY appreciated, thanks so much.
From your CSS snippet both classes note3 and n3 have the same value for max-width so I don't see why the width would change. Try using different values.
Edit: In CSS by default img width and height are set to auto. So what you need to do is add img { max-width: 100%; } to confine all your images to the width of the parent container. See https://codesandbox.io/s/relaxed-mcnulty-p72by?file=/src/styles.css
I am developing a web application using AngularJS. I find myself in a situation where I have a bar (with the css I created a line) that must dynamically lengthen and shorten.
I know that JQuery scripts are sufficient to do this. For example, if my css is like this:
.my_line{
display:block;
width:2px;
background: #FFAD0D;
height: 200px; /*This is the part that needs to dynamically change*/
}
I could in the controller resize the line (of my_line class) simply with:
$(".my_line").css("height", someExpression*100 + 'px');
The thing is, I would like to dynamically resize the line based on the size of another div element (Or, in general, any HTML element of my choice).
I don't know how to get (at run-time) the size of a certain page element in terms of height.
Only in this way I would be able to create a line that dynamically lengthens or shortens as the size of a div (or some other element) changes!
How do you do this? So I will avoid writing hard-coded the measures but I want make sure that they vary as the dimensions of other elements on the page vary
I hope this is helping:
$(".my_line").css("height", $("#referenceElement").height()*5 + 'px');
.my_line{
display:inline-block;
width:2px;
background: #FFAD0D;
}
#referenceElement {
display:inline-block;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my_line"></div>
<div id="referenceElement">Hi, I'm 5 time smaller than the orange line!</div>
Here I am using the setInterval to track the div's height (you can do width as well) and storing it in a previousHeight variable and comparing it every interval
Then according to the comparison, it will determine if the height of the div has changed. If it has then it will change the height of the other div according to the height of the first div
You can create multiple variables and track multiple elements in the same setInterval
$(document).ready(function(){
var previousHeight = parseInt($("#my-div").css("height"));
setInterval(function(){ checkHeight(); }, 100);
function checkHeight() {
// Check height of elements here
var currentHeight = parseInt($("#my-div").css("height"));
if(currentHeight != previousHeight) {
previousHeight = currentHeight;
$("#dynamic-div").css("height", parseInt(currentHeight) + "px");
}
}
$("#button").click(function() {
$("#my-div").css("height", parseInt(previousHeight) + 5 + "px");
})
})
#my-div{
background: #000000;
height: 20px;
width: 20px;
}
#dynamic-div{
background: teal;
height: 20px;
width: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my-div">
</div>
<button id="button">Increase div height</button>
<div id="dynamic-div">
</div>
So I created this webpage using JQuery. I use this code to resize the images on my page so that they fit in squares.
<script type="text/javascript">
$(document).ready(function(){
var height = $('.square').width();
$('.square').css('height', height);
window.onresize = function(event) {
var height = $('.square').width();
$('.square').css('height', height);
}
});
</script>
This works perfectly. The images resize to squares when I load the page or when i resize my browser window. The problem is when I go and press print page (I'm using google Chrome). The printer preview loads the page as if these two scripts don't exist. So the images are their original sizes.
Any Ideas ?
If you just want to keep images square, you might not even need javascript, the below gives you an example, the bonus it's responsive..
.pic-wrapper {
width: 40%;
float: left;
margin-right: 20px;
}
.pic {
width: 100%;
padding-bottom: 100%;
background-image: url('http://i.imgur.com/uTDpE6J.jpg')
}
<div class="pic-wrapper">
<div class="pic">
</div>
</div>
<div class="pic-wrapper">
<div class="pic">
</div>
</div>
I am building a website that expands horizontally as user takes action like http://portal.azure.com style. When they click a button(from a list) in one div, the details of the selected items appear in another div beside it. this can get really long and over flow the mother div.
I am looking for a way i can automatically scroll the page to the right most edge when a new div overflows.
layout
<div style="overflow-x: auto">
<div layout="row">
<div class="col" style="width: 400px">
</div>
//SHOWN DYNAMICALLY
<div class="col" style="width: 400px">
</div>
//SHOWN DYNAMICALLY
<div class="col" style="width: 400px">
</div>
//SHOWN DYNAMICALLY
<div class="col" style="width: 400px">
</div>
//SHOWN DYNAMICALLY
<div class="col" style="width: 400px">
</div>
</div>
</div>
As you can see above, the first div shows by default but the other divs appear based on user interaction.
By the time the 3 div appears, it overflows.
How can i scroll to the right edge anytime it over flows? (you should really check out http://portal.azure.com to see what im talking about)
PS: i am using AngularJS. I am not using jquery. But i dont mind including it if its the only option
You can use plain Javascript for keeping the scroll to right.
Something like this:
var myDiv = document.getElementById("row");
myDiv.scrollLeft = myDiv.scrollWidth;
You need to fire the above function every time you add a new div. That way it will always automatically be scrolled when divs are dynamically added.
You will need to hook up the DOMNodeInserted event on your container. The function will be called whenever a div is added to your row container. This way you will not have to change anything in your existing code.
Here is a very simple example with dynamically added divs:
var num = 1,
btn = document.getElementById('btn'),
row = document.getElementById("row");
scroller(); // fire teh scroller right away for initial scroll
// function to keep it scrolled towards right
// function scroller() { row.scrollLeft = row.scrollWidth; }
// edited to add simple animation
function scroller() {
var maxScroll = row.scrollWidth - row.clientWidth; // required to stop
row.scrollLeft += 2;
if (row.scrollLeft < maxScroll) {
timer = window.setTimeout(scroller, 1000 / 60);
}
}
// hook up event to call scroller whenever an element is dynamically added
row.addEventListener("DOMNodeInserted", scroller);
// for demo to simluate dynamically adding divs
btn.addEventListener("click", function() {
var newDiv = document.createElement("div");
newDiv.setAttribute("class", "col");
num += 1; newDiv.innerText = num;
row.appendChild(newDiv);
});
div[layout] {
width: 500px; height: 140px; white-space: nowrap;
overflow: hidden; overflow-x: auto;
}
div.col { height: 140px; width: 400px; display: inline-block; text-align:center; }
div { border: 1px solid red; }
<div id="row" layout="row"><div class="col">1</div></div>
<button id="btn">Add</button>
Edit: Added simple animation using setTimeout (in order to keep jQuery away). Ideally you should be using requestAnimationFrame or a suitable library if you are already using one.
I am trying to align my two calendars properly so that my text and my calendars are lined up properly.
I think there are two different ways to approach this: (But I don't know how to do them)
Adding the jquery statements inside of the table so that they are properly lined up by the format of the table
Fixing the css so that it is formatted properly to the page
This is what it looks like:
And this is what I want it to look like:
This is my javascript to add the text "Start Date:" and "End Date:" to my table
// to my empty div with the id of roomForDates I create a table to center the text
var holdTheDateInfo = document.getElementById('roomForDates');
var htmlForDateTitles = '<center><table width="400" cellspacing="1" cellpadding="5">';
htmlForDateTitles += '<tr><td><center> Start Date: </center></td>';
htmlForDateTitles += '<td><center> End Date: </center></td></tr>';
htmlForDateTitles += '</table></center>';
holdTheDateInfo.innerHTML += htmlForDateTitles;
This is my jQuery that will add the two calendars to my divs named roomForStartDates and roomForEndDates
$(document).ready(function () {
// Create the Calendar. The navigation is restricted
// by setting the "min" and "max" dates.
$("#roomForStartDates").jqxCalendar({
width: 220,
min: new Date(2010, 0, 1),
max: new Date(2014, 11, 31),
height: 220
});
$("#roomForEndDates").jqxCalendar({
width: 220,
min: new Date(2010, 0, 1),
max: new Date(2014, 11, 31),
height: 220
});
}); // end document
This is my current css that I am having trouble with.
#roomForStartDates {
float: left;text-align:center;
}
#roomForEndDates {
float: left;margin-left:50px;text-align:center;
}
Thank you in advance!!!! Please let me know if you have any questions!!!
Update so far:
To avoid too many comments to the general question as this should better be avoided on SO just the mentioned approach as answer. Just adjusted the Fiddle to this as it's sufficient to have text-align: center for the .container:
<div class="mainContainer">
<div class="container">
<div class="image">__________</div>
</div>
<div class="container">
<div id="roomForStartDates">Start Date</div>
<div id="roomForEndDates">End Date</div>
</div>
<div class="container">
<div class="jqxCalendar">start calendar</div>
<div class="jqxCalendar">end calendar</div>
</div>
</div>
CSS:
.mainContainer {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div.container {
width: 420px;
text-align:center;
}
#roomForStartDates, #roomForEndDates, .jqxCalendar {
float: left;
width: 200px;
margin-left:10px;
}
.jqxCalendar {
height: 200px;
background-color:#ccc;
}
As it's only an example for demonstration, possible necessary adjustment for your page would be to adjust the width in the .container class. This width should match 2 x calendar-width + the margin(s). As both containers have 200px width and 10px margin-left, it's 420px here. For positioning the whole div centered I've just added another div as wrapper for all containers and used one of different approaches.
In case this won't work for your layout, just have a look at the suggested methods e.g. here: Stackoverflow - How to put a div in center of browser using CSS
or leave a comment here in case of issues with this possible solution.
I would love to put them into a table (as I said in approach #1) but i just don't know how :( –
Here is how to make an HTML table with one row with two data cells (columns). If you use the same layout for both tables, they will appear the same.
<table>
<tr>
<td>
$..... for calendar 1
</td>
<td>
$..... for calendar 2
</td>
</tr>
</table>