I am using ChartJs library to create the Line Chart. I have two Charts on the page. I need to resize the Charts on opening of Side Menu. I have used a container div to wrap the canvas element and that worked fine when I only had one chart on the page.
Now when I have two Chart on the page, on opening of Side Menu, only one Chart is getting resized. The observation that I had is that probably resize event is only getting applied to only of the Charts and that's why the div with the class "chartjs-size-monitor" is getting applied to the first Chart. Please note that this div is being created by the ChartJs internally.
below is the class "chartjs-size-monitor" which get's applied as an adjacent tag of canvas tag.
<div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class="">
</div></div>
<div class="chartjs-size-monitor-shrink"><div class="">
</div></div></div>
As a result of this tag, the class "chartjs-render-monitor" is getting applied to the canvas tag thus making it responsive.
<canvas id="chart_name1" class="chartjs-render-monitor" style="display:
block; height: 582px; width: 1165px;" width="1747" height="873"></canvas>
However the div element with class "chartjs-size-monitor" is not getting applied to the second Chart.
Kindly let me know what could be done as a workaround in case of having multiple ChartJs Charts on the same page.
FYI, I have already tried making changes to the option of Charts like making
responsive: true,
maintainAspectRatio: false
I am building a mobile app with ionic and I am trying to change the background image of the div but its not working
Here is the code
<div style="background-image: url(./assets/IMG/set3.jpg);">
......
</div>
I also changed the file path to
style="background-image: url(assets/IMG/set3.jpg);"
style="background-image: url(./assets/IMG/set3.jpg);"
style="background-image: url(/assets/IMG/set3.jpg);"
And I have other div of such, but the background image is not displaying, pls I need your help, I have search online but non of the solutions worked
If your goal is to set background image to the entire page, you could use --background for ion-content. Something like following has worked for me.
ion-content {
--background: url('../../assets/BackgroundImages/splash-screen-background.png');
background-position: center center;
background-size:contain;
background-repeat: no-repeat;
}
here are more details about --background CSS property
Some IDEs (Visual Studio Code) allow you to ctrl click the url (follow link) and ensure that the resource is correctly pointed to. You may want to double check. Even otherwise please check if your assets folder is present at the same level as your page html. If it is not you may have to ensure the correct path, for ex.
background-image: url('../../assets/BackgroundImages/splash-screen-background.png');
Instead of setting the background-image directly with a style tag inside your <div>, give it a class. Then, inside your CSS, define the background-image on that class. That way, the IMG folder should be relative to the CSS file or the app-root. This always gets me with every new project, and it requires some trial and error to get it right.
Is there any option to include an image in a readme.md file, which has a usemap attribute?
Pure html would be
<img src="myimage.png" usemap="#mymap"/>
<map name="mymap">
<area coords="1,1,40,40" href="mylink.html"/>
</map>
I can't get that to work for multiple reasons
usemap is retained as attribute but the map-block is removed. Not surprising as the map-tag is not on the html whitelist, if I am not mistaken.
An image map cannot be inside an anchor tag but github markdown renders it as
a-tag pointing to the raw file location and the img-tag inside.
I don't see any option, do you?
Okay, sort of a solution and the advice to use CSS, not img's usemap attribute.
The best answer I came up with was using github pages - these are static web pages hosted by github and therefore you can do everything you want there.
https://help.github.com/articles/creating-a-github-pages-site-with-the-jekyll-theme-chooser/
This creates a new branch gh-pages and only those html files are used. Very convenient as you do not have to checkin into the master branch for changes.
The endresult is not an image map inside the README.MD file, but there I have added a link to the github-pages index.html which is using the imagemap. The imagemap points back to the various github resources. So not inline the README.MD but one click away.
Second finding: Don't use image maps but CSS instead. Imagemap coords depend on the width of the image as rendered by the browser, not on the width of the image itself. As in github the standard is to use a max-width style property, the image often gets scaled down - and the coords of the imagemap are not.
Much better to use CSS - see "responsive image maps" - and percent values.
<p style="position: relative;">
<img ....>
<a style="position: absolute; top: 10%; left: 10%; width: 30%; height: 15%" href=....></a>
</p>
As both, the image and the anchor tag are inside a block element which is of position relative and the anchor tag is of position absolute, the anchor position is scaled with the image.
I am writing an iPhone app that has some Xpages included in the app. In Xpages I am using the Single Application Page and then Application Pages. They work fairly slick.
However, in my first page I am getting a 44px space that I do not want. I noticed that there is CSS that causes this:
.mblView {
padding top: 44px !important;
}
I have a picture of how it looks here:
http://www.flickr.com/photos/28998410#N06/
How can I override that css so that I don't get that horrible looking bar at the top.
Any help would be greatly appreciated.
Bryan
The 44px padding is there because the design expects a heading before the content. The heading needs 44px space. Here's a simple example where the heading is included:
<xe:appPage id="appPage1" pageName="homePage" resetContent="false">
<xe:djxmHeading id="homePageHeading" label="Heading"></xe:djxmHeading>
<xe:djxmRoundRectList id="djxmRoundRectList1">
Content
</xe:djxmRoundRectList>
</xe:appPage>
You can create your own custom css with the following content and add it as a stylesheet resource to your XPage. This should override the standard CSS:
.mblView {
padding-top: 0px !important;
}
I'm using the following code for my like button
<fb:like id="facebook-like" href="http://mysite.com/index.php" layout="button_count" width="450" show_faces="false" font=""></fb:like>
Some users have experienced the like button not showing up. Noted in 3.6.17 but observed in other versions. I'm somewhat familier with the firefox iframe bug, but I was currious if anyone has any work arounds for the facebook like button.
Like buttons that are rendered with javascript (<div class="fb-like"/> and <fb:like/>) get height=0 if they are initially hidden (display:none).
To work around this, create the element with javascript after the container is displayed, and then run:
FB.XFBML.parse();
Example:
result.show();
var like_box = $(".fb-like-inactive", result);
like_box.removeClass("fb-like-inactive");
like_box.addClass("fb-like");
FB.XFBML.parse();
This CSS solved it for me
.fb-like span, .fb-like iframe { height:25px!important; width:150px!important}
This is still an issue, as can be seen here (also contains fix):
http://codepen.io/wiledal/pen/cGnyq
Firefox does not draw the Facebook-like if the div is hidden at the time of parsing. In the example above I delay the showing of a div after different times. You can see that a like-button shown after 500ms does not get rendered in Firefox.
I managed a work around which does not cut off the comment dialog after liking, simply by using min-height and min-width instead of set values that was previously proposed.
.fb-like span, .fb-like iframe {
min-width: 100px !important;
min-height: 20px !important;
}
I had the same problem on Firefox only (v.29.0.1) and it turned out to be AdBlock plus (v.2.6) blocking the Like and Share buttons from rendering.
Can you try calling the like button like so:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=195243810534550&xfbml=1"></script><fb:like href="http://mysite.com/index.php" send="false" width="450" show_faces="true" font=""></fb:like>
And let me know if you're still seeing issues.
Leaving an answer because I can't leave comments yet...
Oli's nice CSS hack looked like it worked initially:
.fb-like span, .fb-like iframe { height:25px!important; width:150px!important}
but it clipped the comment box that tried to pop up when we actually clicked the like button.
Per's delayed parse solution seems to do the job; here's a bit more detail. In our case we had the like button in a drop down menu, which looked like:
<ul>
<li class="control_menu">
<span>menu name</span>
<ul style="display: none;">
<li><div class="fb-like-inactive" data-href=...></li>
...
</ul>
</li>
...
</ul>
with code that shows the drop down ul when the user hovers over the control_menu element. We used this code to handle the delayed parsing:
$(document).ready(function() {
$('.fb-like-inactive').closest('.control_menu').hover(function() {
var inactive = $(this).find('.fb-like-inactive');
if (inactive.length && (typeof FB != 'undefined')) {
inactive.removeClass('fb-like-inactive').addClass('fb-like');
FB.XFBML.parse(this);
}
});
});
It finds the fb-like-inactive buttons, then looks up the tree to find the containing control_menu elements, then attaches an event to the control_menu elements to detect when the user hovers over them. When it detects a hover for a particular menu element, it looks for inactive like buttons within that element, marks them as normal fb-like, and then parses just the content of that element.
I hope this saves someone some time.
I just spent an hour on this and on a much more basic level, you need to know that the Facebook buttons will not render when testing your page locally.
It may seems obvious but it will only work when rendering from a webserver.
Per's solution is based on the XFBML version of the fb button and I wasn't sure how to do this with the "html5 version" or if it is really possible but I found a CSS/JS solution that doesn't clip content instead so here it is:
html
<button class="like-button">I like this stuff</button>
<!-- This is a hidden like-box -->
<div class="social-share aural">...stuff...</div>
CSS:
html body .aural {
position: absolute;
font-size: 0;
left: -9999px;
}
jQuery:
$('body').on("click", '.like-button', function(e) {
var $socialShare = $('.social-share');
$socialShare.css({'font-size':'1em'});
var sw = $socialShare.width();
$socialShare.animate({left: sw-80}, 400);
});
You may have to use !important rule (in both css and js) or nest the .aural class depending on the rest of your css. If it doesn't work I'd suggest trying to change the default layout so it doesn't override .aural or nest .aural and as a last resort use !important..
I had the same problem but the culprit was setting tracking protection in about:config to true.
This tip turned me on to the idea initially:
Lifehacker: Turn on Tracking Protection in Firefox to Make Pages Load 44% Faster
My solution is completely different to any of the above.
I have a character animation in my page, and one of the elements has the id="body" (which is perfectly reasonable) however this seemed to kill the FB script.
As soon as I renamed my id, the share started working again; I can only presume there was some kind of conflict, as id'ed elements can be referenced as global variables.
I found this out through the usual process of removing elements until things worked, so I'm fairly sure it was this.