I have used the Plotalot extension to create different types of charts on my Joomla site. I am having issues with the margin around the piece charts in particular. I have placed the chart inside a container and although I have made the chart almost the full size of the container it leaves massive margins around the sides and bottom. I'm not quite sure how to reduce this white area around it.
Here is the CSS that I have so far for both the container and the chart, and the code for the chart itself:
#chart_42_container {
clear: right;
float: right;
margin-left: 1px;
width: 577px;
height: 400px;
}
#chart_42 {
height: 398px;
width: 575px;
}
google.load('visualization', '1.0', {packages:['corechart']});
google.setOnLoadCallback(create_chart);
function create_chart() {
window.plotalot_chart_42_data = new google.visualization.DataTable();
window.plotalot_chart_42_data.addColumn('string', 'Labels');
window.plotalot_chart_42_data.addColumn('number', 'Values');
window.plotalot_chart_42_data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
window.plotalot_chart_42_data.addRows(
[['96 Users',96,'<strong>96 Users</strong><br />Criticized the Suction of the Bissell Spotlifter 1716B'],['31 Users',31,'<strong>31 Users</strong><br />Praised the Suction of the Bissell Spotlifter 1716B'],['300 Users',300,'<strong>300 Users</strong><br />Did Not Mention the Suction of the Bissell Spotlifter 1716B in their Review']]);
window.plotalot_chart_42_options = {title:'Breakdown of Comments About the Bissell Spotlifter 1716B\u0027s Suction Capability',backgroundColor:'#ffffff',is3D:true,pieSliceText:'value',legend:{position:'right'}
,tooltip: {isHtml: true}}
window.plotalot_chart_42 = new google.visualization.PieChart(document.getElementById('chart_42'));
window.plotalot_chart_42.draw(window.plotalot_chart_42_data, window.plotalot_chart_42_options);
}
Here's the HTML that I have in the article itself:
<div id="chart_42_container">{plotalot id="42"}
<i>If you're wondering why the total of the three groups displayed in this graphs is greater than the number of reviews we analyzed (425) for the Bissell Spotlifter 1716B, this is because there were 2 reviews that made both positive and negative remarks about this unit's suction.</i>
</div>
I tried to add a comment in italics below the graph in the space below the chart using the <em> tags, but this has been pushed down and overlaps the text in one of the paragraphs.
Here's the section with the piece chart: https://www.reviewminr.com/product-reviews/carpet-cleaner-reviews/bissell-spotlifter-1716b-review#suction
I know it must be possible to reduce these margins somehow as on the Extension's demo site, they have two of these same pie charts with none of these big white margins and they also have the comments in italics right below the the graphs.
Any ideas? Thanks in advance.
change height of chart_42_container
#chart_42_container{height:500px}
then the text will display in the container
the margin has to do with the height of the chart_42
#chart_42{height:398px;}
Related
i am looking for a way to get the size of a rendered image within a webpage, which size is defined as a percentage value.
I need this because of a relative positioning of 2 images which should be invariant go the size of the browser window, as well as the zooming of the site.
I did some research and this one here describes my problem pretty well:
Button width as a percentage of parent
Quote:
"To set a percentage height, its parent element must have an explicit height."
Here are the relevant parts of my project:
<div style="display: block; width:90%; height:100%; background-color:rgba(128,128,0,0.5)">
<button style=#myStyle #onclick="#(e => doFunction(5))"> </button>
with myStyle:
myStyle = "top: -30%; left: 0%; width: 15%; height: 15%; overflow: hidden; background-color: rgba(201, 76, 76, 0.3); position: relative;"
So, i got the button within a structure, and the size of the structure is again given as a percentage with respect to its superordinate structure. (but this topmost structure then has absolute values).
Is there a way to calculating and getting the absolute values (width/height) of the first structure "while rendering"?
I hope i could explain my problem sufficiently understandable, i'm happy about any answers regarding this problem, even if the answer is "it does not work like that". Thanks!
I would do it like this:
Give your image an ID:
<div id="some-id" style="display: block; width:90%; height:100%; background-color:rgba(128,128,0,0.5)">
In JavaScript, set an Event Listener when the window is loaded:
window.addEventListener('load', function() {
//set the image's dimensions to the divs that need it
var imageDiv = document.getElementById("some-id");
var otherDiv = document.getElementById("other-div");
otherDiv.style.height = imageDiv.offsetHeight + "px";
otherDiv.style.width = imageDiv.offsetWidth + "px";
});
Here's the layout I'm trying to achieve:
My content currently is a series of basic, block HTML elements (h[1-5], p, ul, etc.) contained in a div, and if possible I'd like to keep them that way. All of the images are inside their own p in order to responsively resize
I've been able to add a div style="float:right" to the top of the content which creates the sidebar and wraps "normal" text content around it - specifically the first paragraph in my diagram above. However, the img, which is set to 100% does not wrap, it flows below the sidebar.
So really, I want images to have one of two widths - either 100%-width(sidebar) if the top of the image "should be" above the bottom of the sidebar, or 100% if the top of the image is below the bottom of the sidebar.
I can of course manually set the width on an image when debugging a page, to a value less than 100%-width(sidebar) and it jumps right up into place, so clearly the browser knows what that size is to not "push" the image down below the sidebar...
Here's the actual page where I'd like to get this to work; note that the first image is below the sidebar:
https://adventuretaco.com/?p=3655&draftsforfriends=kIq7mVDhNtCSklITGCJs2HAcE9xuPX8d
additionally, here is the CSS and HTML that I currently have for the post content:
CSS
p {
margin: 0 0 1.25em 0;
}
ol, ul {
margin: 0 1.5em 1.25em 1.5em;
}
.full-width-container {
width: 100%;
}
.full-width-container img {
display: block;
margin-left: auto;
margin-right: auto;
overflow: hidden;
transition: 0.5s;
}
.full-width-container img.flickrPhoto {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
transition: 0.5s;
}
HTML
<div class="post-content">
<p>As you may recall, we'd just cancelled our flight home due to the unknowns of Covid-19, but were still in exploration mode as we entered the Valley of Fire State Park in southeastern Nevada.</p>
<p id="photoContainer132" class="full-width-container"><img id="photo132" class="flickrPhoto" src="https://live.staticflickr.com/65535/49714173358_d19b1c2e70_n.jpg" /></p>
<p>Our trip to the Valley of Fire was somewhat opportunistic to say the least. A year before this trip ever even crossed my mind, I'd seen a photo on Flickr that had caught my eye. Sharp as ever, I completely forgot to save the photo or a link to the photo <img src="https://www.tacomaworld.com/styles/default/my/smilies/annoyed_gaah.gif" />, but - luckily for me - the photo had been geotagged <em>and</em> I'd saved a point of interest in my Google Earth map of Nevada. I'd noticed that point as I'd planned this trip, and mapped out the route, excited to see what nature had in store. So yeah, apparently, I'm not <em>always</em> as dumb as I look. <img src="https://www.tacomaworld.com/styles/default/my/smilies/original/wink.png" /> In researching Valley of Fire, I also discovered a second hike -rumored to have petroglyphs - and since it was on our way to the main attraction, we decided to stop off there first.</p>
<p id="photoContainer133" class="full-width-container"><img id="photo133" class="flickrPhoto" src="https://live.staticflickr.com/65535/49715029457_a61cffc61b_n.jpg" /></p>
</div>
I think you first need to downsize a little your images, due to their size, it becomes a little difficult to manipulate them within the scope of what you would like to do. You can alter them inside the tag, or from the css file. Then after, you can use inside of that code a "float: left;" in the .full-width-container img, give it a margin that should put them side to side.
OK, so after a bunch more research, trial and error, I've come to the conclusion that the answer to this question is that it cannot be solved with CSS / layout alone.
In the end, incorporated Javascript to solve the problem. It's not perfect - if images have been downsized to flow around the sidebar, then when the browser window gets larger, they don't get larger as ideally as they could.
Here's where I ended up; working sample at (scroll down here to see the sidebar)
https://adventuretaco.com/hidden-valleys-secret-tinaja-mojave-east-5/#photoContainer190
// start shortly after page is rendered
setTimeout(resizeImagesForFacebookEmbed, 500);
function resizeImagesForFacebookEmbed() {
var tryAgain = true;
// find each of the elements that make up the post, and iterate through each of them
var content = jQuery('div.post-content').children().each(function () {
if (this.tagName.toLowerCase() == 'p') {
var firstChild = this.firstChild;
var firstElementChild = this.firstElementChild;
if (firstChild != null && firstChild == this.firstElementChild && firstElementChild.tagName.toLowerCase() == 'img') {
var pRect = this.getBoundingClientRect();
var imgRect = firstChild.getBoundingClientRect();
var difference = imgRect.top - pRect.top;
// if the image contained in the p is not at the top of the p, then make it smaller
// so it will fit next to the embed, which is 350px wide
if (difference > 25 || imgRect.width < (pRect.width - 400)) {
var sidebarLeft = document.getElementById("fbSidebar").getBoundingClientRect().left;
var imgLeft = firstChild.getBoundingClientRect().left;
var imgWidth = (sidebarLeft - imgLeft) * .95;
firstChild.style.width = imgWidth + "px";
tryAgain = false;
setTimeout(resizeImagesForFacebookEmbed, 1000);
} else {
// do nothing
}
}
}
});
if (tryAgain)
setTimeout(resizeImagesForFacebookEmbed, 1000);
}
var waitForFinalEvent = (function () {
var timers = {};
return function (callback, ms, uniqueId) {
if (!uniqueId) {
uniqueId = "Don't call this twice without a uniqueId";
}
if (timers[uniqueId]) {
clearTimeout(timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
};
})();
// handle window resize event to re-layout images
jQuery(function () {
jQuery(window).resize(function () {
waitForFinalEvent(function () {
resizeImagesForFacebookEmbed();
}, 500, "atFbEmbedId"); // replace with a uniqueId for each use
});
});
Is it possible to fix the width (or min-width) of an element equal to when that element is filled with specific content?
Example: a button for selecting the month can have text of January, February, etc. I would like the button to always be the width as if the text is September (the longest string, visually). What happens currently, is the button is very small if the current selection is May or July, then much larger when the selection is November or September, and further, this can change the layout of other elements.
Of course I could set width or min-width using pixels, or a percentage, or vw, etc -- but given the breadth of devices, screens, user control over zoom or font sizes, the only safe way is to guess at a size that is likely far larger than actually necessary, which itself looks bad and is undesirable.
Setting a sibling div with visibility: hidden is the key, both of which reside inside another container div.
Codepen here: https://codepen.io/anon/pen/XQxeep
let strings = [
'tiny', 'short', 'medium-length', 'this is a long string',
'finally, an extremely long string'
];
let m = 0;
function nextString() {
m = (m == 4) ? 0 : m + 1;
document.getElementById('bt').innerHTML=strings[m]
}
button {
display: inline-block;
position: relative;
}
.showme {
position: absolute;
left: 0px;
right: 0px;
}
.hideme {
visibility: hidden;
}
this is the button we are trying to keep a fixed size, the size of the longest element so it will not expand:
<button onclick="nextString()">
<div class="outer">
<div class="showme" id="bt">tiny</div>
<div class="hideme">finally, an extremely long string</div>
</div>
</button>
Link for reference is here: http://www.roi-owa.com/
The sidebar column (on the right) is written like this...
#aside {
background: #ffffff;
width: 220px;
overflow: hidden;
}
The main content column (on the left) and wider....is written like this...
#content.alpha,
#content.beta {
width: 700px;
background-color: #ffffff;
background-image: none;
}
The problem is that with how this theme is written...the aside column isn't contained inside a floated container with the content div...so I might be stuck. I don't want to start rewriting theme files, I just want the right column to stretch down to the height of the #content div. Not sure if its possible.
Unfortunately I don't know of way for this to be done in pure CSS, since the columns know nothing about each other. However, some simple Jquery could be used.
The idea is to check the height of both and set the shorter one's height to the longer one's height. It should look something like this in jQuery:
var contentHeight = $("#content").outerHeight();
var asideHeight = $("#aside").outerHeight();
if ( contentHeight > asideHeight ) {
$("#aside").height( contentHeight );
}
else {
$("#content").height( asideHeight );
}
I have a sortable list of items that returns results based on what the user types in the search box. The results always overflows and here i am using the following css for it:
#list { overflow-x: visible; overflow-y: hidden; }
This allows me to have only a vertical scrollbar. I then drag the individual li's that are in the list over to a droppable area. The sortable functionality is added to the list using the JQuery below:
$("#list").sortable({
connectWith: ".connectedSortable",
helper: 'clone',
appendTo: 'body',
zIndex: 999
});
The reason i use the appendTo: 'body' is to ensure that the item that is being dragged is on top of everything and will not be under the list's other items when being dragged. However, whenever I drag any item from the list, the DIVs that are in the item will have their CSS styling gone.
I understand that this is due to the fact that when the item is dragged, it is appended to 'body' and thus does not have any parent to inherit the original CSS styles.
My question is how do i style the dragged item back to its original styling to make sure it stays the same even if I am dragging/not dragging it? through the events?
EDIT:
Found the reason for the css messing up. It was a random br thrown in between two div's causing it to be interpreted differently when the item was being dragged and appended to the body.
You have two options to sort the problem. One is to create your own helper with the function. This way you can style is any way you want, wrap it in an element, add classes, etc.
The following demo shows the difference, the top one works, the bottom one is broken. http://jsfiddle.net/hPEAb/
$('ul').sortable({
appendTo: 'body',
helper: function(event,$item){
var $helper = $('<ul></ul>').addClass('styled');
return $helper.append($item.clone());
}
});
The other option is not to use append:'body', but to play with zIndex. Your zIndex:999 clearly has no effect, since the default value is 1000. :) The problem with zIndex is that it only matters for siblings, elements within the same parent. So if you have another sortable on your form with a greater zIndex than your current sortable, its items could easily be on top of your dragged one, regardless of the zIndex of your currently dragged item.
The solution is to push your whole sortable on top when dragging starts and restore it when it stops:
$('#mySortable').sortable({
start: function(){
// Push sortable to top
$(this).css('zIndex', 999);
},
stop: function(){
// Reset zIndex
$(this).css('zIndex', 0);
}
});
If the original value matters, you can even save the original zIndex with .data() and retrieve it afterwards.
Thank you DarthJDG. I am aware this thread is a little old but I hope to help others that had the same issue I did.
I had to edit your solution a little bit because the styling was off when appending the item to the helper. I ended up just recreating the list element. Just in case others run into the same issue I did.
I added this into the area where I created the sortable.
I took the text out of the sortable and created a new list item with that as text.
Javascript:
appendTo: 'body',
helper: function(event,$item){
console.log(event);
var $helper = $('<ul class = "styled" id="' + event.originalEvent.target.id + '"><li>' + event.originalEvent.target.innerText + '</li></ul>');
return $helper;
}
I was then able to add custom styling to the draggable object, including custom text with out an issue. The styling I ended up using was that of JQuery Smoothness.
CSS:
.styled li{
margin-left: 0px;
}
.styled{
cursor:move;
text-align:left;
margin-left: 0px;
padding: 5px;
font-size: 1.2em;
width: 390px;
border: 1px solid lightGrey;
background: #E6E6E6 url(https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
font-weight: normal;
color: #555;
list-style-type: none;
}