Is there a way to disable cufon on all elements in selected div? Almost on whole page I use cufon. But I want one div to be in Arial. Is there any way? I've tried something like element:not(.class) but without any results.
Update:
I'm trying to do this as well, seem to have found a solution! Make use of jQuery's :not selector:
Cufon.replace('h1, h2:not(.question), .pageheader', {
color: '-linear-gradient(white, #777777)',
fontFamily: 'Unisans',
textShadow: '-2px 2px rgba(0,0,0,1)' });
This excludes the class h2.question from the cufon replace in Firefox, Safari, Chrome, and IE at least. :)
Related
I've just upgraded my TinyMCE to version 4, which seems to have a tooltip by default.
How can I disable/hide the tooltip that appears on mouse-over on any tool-bar item?
I've been searching for any possible solution, but so far, I have found nothing in the official documentation. What I found in the development tinymce.js file (uncompressed version) is that tooltip is hardcoded and set to be included every time.
I tried different things to disable the tooltip, by so far, the easiest and safest way I came up with is by using CSS, include this bit of code in the main css file to hide the tooltip forever:
.mce-widget.mce-tooltip {
display: none !important;
}
This solution avoids using Javascript/jQuery, and also avoids modifying the source file tinymce.js.
I fiddled around and found a dynamic solution using JQuery and tinyMCE 4.x. This solution allows you to enable/disable tooltips inside tinyMCE:
tinymce.init({
...
init_instance_callback : function() {
$("head").append("<style> .mce-tooltip{ display: none; } </style>");
},
...
It does change the class mce-tooltip after tinyMCE is initialised (init_instance_callback). Set 'display: block;' if you want to display the tooltips again. Its not the nicest solution, I know, but it works.
You can access the button instance and set its rendered state to false:
var controlIds = editor.theme.panel.rootControl.controlIdLookup;
for (let i in controlIds) {
if (controlIds[i].tooltip) {
controlIds[i].tooltip().state.set('rendered', false);
}
}
I have made a website with Foundation-master wordpress theme, it looks good but I dont like how its behaving in other browser widths. Is there a way of making it non-responsive, or fixed to a certain width?
Thanks!
Sometimes it's necessary to deactivate the responsive features. For example if, like it happened to me twice already, a website is launching non-responsive and the optimization for smartphones/tablets is added later.
Foundation is an awesome framework even if you take out the responsiveness. The SCSS files are very well structured it comes with a library of very useful UI elements. It's a great choice for responsive and non-responsive sites if you ask me. Some people might also want to streamline their workflow and not jump between different frameworks depending on the project to keep costs low.
Anyways, here my two cents. This deactivated all responsiveness for me:
.row {
width: 62.5rem;
}
And then in the _settings.scss
$small-range: (0, 90em);
$medium-range: (0, 90em);
$large-range: (0, 90em);
This way we're essentially always seeing the large version. As far as I can tell this even works for top bar etc.
Foundation was built to simply create responsive websites.
Beside of the question why you use this framework if you don't want a responsive webseite, it's only possible if you start removing all the media queries in foundation css and by removing the viewport meta tag.
Maybe you should better invest this time to make your webseite responsive so that it also fits on smaller screens and mobile devices.
Although the question is marked as answered, I just wanted to give you a quick hint to prevent the Foundation 4 grid to act responsive, since we had also to deal with that.
In our case (SASS version) setting the width of the <body> element via css to the specific width of the grid and reducing the breakpoint in the SASS variable $small-screen to 1px worked fine.
Try to add a min-width in the body attributes like this:
html,
body {
font-size: 100%;
min-width: <value A>;
max-width: <value A>;
width: 100%;
}
(foundation.css)
I have an HTML page with a fixed-height div which should be scrollable (only vertically). In iOS 5 this can be achieved using:
overflow-y: auto;
-webkit-overflow-scrolling: touch;
The div contains an unordered list with about 10 items.
The scrolling works, but sometimes it scrolls only if I swipe my finger diagonally or even horizontally and not vertically as it should be.
I'm wondering if anyone has encountered this issue. I don't want to think that it is a bug in iOS5, but I can't figure out what I'm doing wrong because most of the time it works fine.
I had exactly the same issue. The problem turned out to be caused by two zero size iframes my site used to track history changes and load scripts. Removing these fixed the issue. I filed a bug with apple, waiting to hear back from them.
Check to see if you have any iframes on your page they could be the cause.
I have found a hacky solution but it needs javascript...
I stumbled upon that problem while loading scrollable nodes via ajax and appending them with js.
I found out that resetting the -webkit-overflow-scrolling property with js saved the day
JS CODE:
var myDiv = $('.myDiv');
myDiv.css('-webkit-overflow-scrolling','auto');
function fn(){
myDiv.css('-webkit-overflow-scrolling','touch');
}
setTimeout(fn,500);
It really sucks that we have to call the setTimeout method but that's the only way I could think of...
EDIT : Watch out for display:none
Webkit overflow scrolling touch CSS bug on iPad
You need to put this css setting in your css file - the one you load using the content_css configuration variable:
body {
-webkit-transform: translate3d(0, 0, 0);
}
The other option is to set the css directly from code on tinymce initialization:
$(tinymce.activeEditor.getBody()).css('-webkit-transform', translate3d(0, 0, 0));
I had the same problem in iOS 5.1.1 and it turned out to be due to an ::after pseudo-element with position: fixed that was on an element that contained the scrollable list exhibiting the "wrong scroll axis" behavior. Details here.
Is there an (easy) way to customise the look of the facebook like button implemented via fbml?
I am pretty sure I saw this somewhere, but I cant remember where and I cant find any documentation on this.
You don't need to make these illegal hacking. Just use the "Open Graph": https://developers.facebook.com/docs/opengraph/actions/builtin/likes/. The downside is you need to create an app.
Are you guys lawyers or programmers? the question was HOW not '...to do or not to do...'.
#pixelistik button can be inserted either via script tag or iframe and of course you can use css with iframe just via JS, easy peasy.
#skrat good point!
#Slavic what service exactly? I call it half-service because you can like only - no place for criticism so... your criticism is not proper. Like our posts! :P
generally: if you create custom button and you didn't sign to any t&c or something like that you can do whatever you want on YOUR webpage.
Although it may not even be legal to do so (check the terms and policies for yourself), you could do something like:
/* Like button main text color */
div.like span.connect_widget_text {color:#fff;}
div.like div.connect_widget_confirmation {color:#fff;}
div.like span.connect_widget_text a {color:#ffc6ff;}
This link shows some mild styling options:
http://forum.developers.facebook.net/viewtopic.php?pid=236534
Easy peasy:
Simply set the opacity (filter for ie) to 0 and put the iframes over an image or div with a bg image. For bigger buttons simply load in multiple like buttons, don't load in too many this will make your page unbearable slow.
Hiya, you can do it with some smart CSS - http://www.esrun.co.uk/blog/disguising-a-facebook-like-link/
Although the legality of such edits is under question, I just wanted to share my findings on this subject.
I right clicked on a FB Like button in Firefox, and inspected the element with firebug. The readout of the class elements is:
.connect_widget_like_button .liketext {
background: url(http://static.ak.fbcdn.net/rsrc.php/v1/y7/r/ql9vukDCc4R.png) -1px -33px no-repeat;
background-image: url(http://static.ak.fbcdn.net/rsrc.php/v1/y7/r/ql9vukDCc4R.png);
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-position-x: -1px;
background-position-y: -33px;
background-origin: initial;
background-clip: initial;
background-color: initial;
}
This exists on line 172 of like.php
One company I know of that does use a custom like graphic is Disqus, however their button is a multi-functional element that offers you a choice between facebook & twitter onClick, which may be how they were able to customize it to their needs.
So I have a <select> element on my page, and it worked fine in all browsers until IE8 came along. I've seen all the literature about the IE7 compatibility view and how to use <meta> to force the browser into that mode. But the question still remains: why the heck does IE8 fail to display a simple <select> properly? Has anyone figured this out yet? Here are two URLs that demonstrate the problem. The first one displays properly in IE8, but only because I'm using the <meta> tag to force it into IE7 compatibility mode. The second one is identical to the first, except that I'm not forcing IE7 compatibility.
http://www.currensys.com/mhw.php
http://www.currensys.com/mhf.php
Anyone have any ideas?
Apparently, IE8 doesn't like one of your CSS styles.
SELECT { display: table }
Removing the above style displays the drop down list.
Update: more information from W3School, the value of "table" is not supported by IE.
You have a css property setting display: table on select elements. This seems to be the problem.
I ha d the same problem, not solved with the display:table thing, but it was an issue with the font-family...seems that you have to use standard font only (i used fontface for my site...)
so change the font family to a standard one and should be ok(i don't know why but it worked for me)