I'm using CKEditor and I would like to hide a button in keeping the functions. In other words I would like to hide the Image button while keeping all existing images displayed in
my page
I tried to use the config.js file:
- config.removeButtons = 'Image';
- config.removePlugins = 'elementspath,image';
But all existing images in my html page disapeared.
I have the same trouble withe the Table button.
Use CSS:
.cke_button__image, .cke_button__table {
display: none !important;
}
Related
I'm using DASH app on Heroku that requires user to print out the page in PDF. I'm looking to 'save to pdf' option in the browser, however, a simple page print contains Div elements that are undesirable such as buttons. I'm using DASH BootStrap Components but I don't see any .d-print-none (Display in Print) options in their documentation. Is there a way I can hide div elements on printing? Apologies for the basic question.
You could give each item you want to hide a certain className, and then set up a stylesheet with something like this:
#media print {
.print-class {
display: none;
}
}
You can set the class_name property of your div to d-print-none:
html.Div("YOUR CONTENT HERE", class_name = "d-print-none")
https://getbootstrap.com/docs/4.0/utilities/display/
Good evening!
I am currently developing a website which includes the Facebook Like Button. This button is located at the bottom of the page. When I click the button, the "comment" popup is displayed below the button, which extends my page. I would like to know whether (and, if so, how) it is possible to have the "comment" popup be displayed on top of the button or hide the popup permanently.
The image below depicts my problem (the horizontal white bar is supposed to be at the bottom of the page, notice how the "comment" popup extends the page).
Thank you in advance.
Without seeing the actual website, I imagine you could just use css to select that popup and set it's display property to none. However you might need to use an !important statement to override any css property being set on that popup with javascript.
Example code:
.popup {
display:none!important;
}
You can hide the popup box. Make sure your facebook like button layout type is button i.e. In your code snippet that facebook provides there should be data-layout="button"
and use this css
.fb-like{
overflow: hidden !important;
}
I am using a script to show links on my site and by default they show a tooltip on all links which I want to hide. Their support says:
Every link has the CSS class "vglnk". That makes styling them as easy
as adding one rule to your site's CSS.
For example, this would change the color:
a.vglnk {
color: #F7923C;
}
What code do I add which would hide the tooltip on links?
Because the tooltip is likely handled via JavaScript, you may need to look at their implementation to figure out how to hide it. There isn't really a standard CSS way to style tooltips.
Can you change the HTML? Removing the title attribute from the link will remove the tooltip. If not, the script that you're using to show these links can also remove the title tag.
Demo: http://jsfiddle.net/ThinkingStiff/X98n4/
Script:
var links = document.getElementsByTagName( 'a' );
for( var index = 0; index < links.length; index++ ) {
links[index].removeAttribute( 'title' );
};
HTML:
thinkingstiff.com
thinkingstiff.com
First of all you can just do a:link a:hover a:active a:visited for styling all your hyperlinks at once. I don't see any advantages unless you want some hyperlinks to be different. For those few you could use the div name they are in for example.
If you wanna hide tooltips you have to understand how hyperlinks work.
I can tell you this, every hyperlink has a title. Mostly the title is autofilled with the hyperlink title (in cases of rss). I also asume you are talking about rss here.
However if you want the tooltip to be gone add a title in your hyperlink and leave it blank.
title=" " and you good.
succes.
I am using Twitter's own Search Widget (Which can be seen here) on my site and it is contained in one of many switching tabs, basically consisting of divs that are hidden and shown according to which link is clicked.
There's no need for code here because it's a very simple situation to explain, basically the twitter feed is not being populated with new tweets when it is contained in a div which has display:none.
You can see this by going onto the twitter widget demo page and hiding it in your element inspector. Wait a few seconds and then show it again and you will be able to see that there are no new entries, just a pile of dotted borders.
How can I ensure the feed is being populated even when it is hidden?
Thanks.
Why not use some jQuery to hide and show the widget... without resorting to altering the css? Something like..
$('#example-preview-widget').hide();
$('#example-preview-widget').show();
This worked for me in the console with the issues you mentioned.
EDIT
After more testing, I can see that the above doesn't work. I did find a fix (I think)...
Instead of using hide() and show() or display:none, try to position the div off the screen using
position:absolute;
left:5000px;
or something similar. Then you can toggle it back in position.
When tested in the console, this keeps the tweets loading.
Shrink the div down to nothing, hiding the overflow:
#your-div {
height: 0;
overflow: hidden;
}
I'm building a small website, where.. when a user clicks on one of the menus, the current css layout must change and new css layout must be formed without page reload. what i meant to say was, the banner remains the same but the complete css layout below it is re-deployed[the CSS file containing the layout below the banner reloads]. This must happen without a HTML page reload. How can i achieve this? I'm currently thinking of having 2 different CSS files. But how to apply CSS without reloading a page?
Thanks in advance.
You can use 1 css file, such as below
BODY.Template1 H1 {
}
BODY.Template1 P {
}
BODY.Template1 A {
}
BODY.Template2 H1 {
}
BODY.Template2 P {
}
BODY.Template2 A {
}
In your jquery, onload, u pick a template
$(document).ready(function() {
$('BODY').addClass('Template1');
});
$(element).click(function() {
$('BODY').removeClass('Template1').addClass('Template2');
});
Depending on size, number of templates you're going to have, you may want to put them into separate files. Then you'll have to dynamically download each file as the user clicks it, which may lead to a delay for the user when they click the button.