Tiny_mce - can't set width - javascript

Let me start by saying I am well aware this is a duplicate question - TinyMCE width and height disobedient!
The trouble is I have tried all the css fixe suggested to no avail and I am not using an init (where the docs i found tell you to set your width and height) - I dont know why, I did this along time ago.
Here is the mce code which is being launched in an aftershow event of a fancybox:
$('textarea.tinymce').tinymce({
// Location of TinyMCE script
script_url: '/assets/js/common/tiny_mce/tiny_mce.js',
// General options
theme: "advanced",
plugins: "autolink,lists,pagebreak,table,advlink,iespell,inlinepopups,insertdatetime,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,template,advlist",
// Theme options
theme_advanced_buttons1: "undo,redo,|,cut,copy,paste,|,bold,italic,underline,|,forecolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,sub,sup,|,formatselect,fontsizeselect",
theme_advanced_buttons2: "tablecontrols,|,charmap,iespell,|,cite,abbr,acronym,|,bullist,numlist,|,outdent,indent,blockquote,|,link,unlink,|,fullscreen",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: false
});
Please someone, tell me how to make this god damn thing 500px wide. I tried this(does nothing):
.mceEditor > table {
width:500px !important;
}
Tried putting this in general options in my code:
width:"500",
Tried setting columns of the textarea to 2
Tried setting the css width of the following elements with !important:
id=desc_mce_parent, id="desc_mce_tbl"
I have set resizing to false
Nothing changes no matter what I do - why?

Ok... I feel a bit of an idiot saying this but in my case it was because my toolbars were too big. I solved this by spreading my buttons over three toolbars - you can set the width using css but it wont go smaller than your toolbars and the they will not wrap around (seems like that might be a good feature).

Related

Disable fullpage js on mobile devices

I tried to disable the fullpage js for mobile devices but it is not working.
The script i am using is :
<script>
var isPhoneDevice = "ontouchstart" in document.documentElement;
$(document).ready(function() {
if(isPhoneDevice){
//mobile
}
else{
$(document).ready(function(){
$('#fullpage').fullpage();
responsive: 700 // here is solution
})
}
});
</script>
website link : http://demo.lamppostmedia.in/arklan-dev/
Help me disable it.
There's no such thing as a "mobile device" anymore. Is a table a mobile device? Is a touch screen laptop consider a desktop?
The right way to deal with this is basing the behaviour on the resolution of the device the visitor is accessing from.
That's why fullPage.js version 3 provides the options responsiveWidth and responsiveHeight that allow you to turn off the snap effect when reaching certain threshold.
See the Responsive width example for fullPage.js.
And the examples code here:
https://github.com/alvarotrigo/fullPage.js/tree/master/examples
You can read more about responsive options in the the fullpage.js documentation:
responsiveWidth: (default 0) A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for their own responsive CSS. For example, if set to 900, whenever the browser's width is less than 900 the plugin will scroll like a normal site.
responsiveHeight: (default 0) A normal scroll (autoScrolling:false) will be used under the defined height in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for their own responsive CSS. For example, if set to 900, whenever the browser's height is less than 900 the plugin will scroll like a normal site.

Fancybox - set widths for different overlays

I have a several blocks of content which open in a Fancybox. This all works as it's meant to but the contents of a couple of the boxes is quite small and doesn't really warrant a 1000px width Fancybox overlay. Is there a way to set the widths of these boxes to something else?
I've tried added a width to the content box (#login-overlay) for example but Fancybox just ignores this as it is built around the content once the relative link has been clicked which opens the overlay.
Here's my javascript:
$(document).ready(function() {
$(".fancybox").fancybox({
margin: [20,20,20,20],
padding: [20,20,0,20],
openEffect: 'fade',
openEasing: 'easeInQuad',
openSpeed: 400,
title: false,
//closeBtn: false,
//autoCenter: false,
scrolling : 'no', // turns off scrolling in box.
fitToView : false, // allows box to overflow out of viewport.
autoSize: false, // needs to be turned off for width/maxWidth to work.
height: 'auto', // if autoSize is set to 'false', this needs to be 'auto' so height matches content.
width: '100%',
maxWidth: 960,
helpers: {
overlay: {
// locked: false, // Prevents jump to top of window when opening a fancybox.
showEarly : false
}
},
tpl: {
closeBtn : '<a title="Close" class="fancybox-item fancybox-close icon-circle-cross" href="javascript:;"><span>Close</span></a>'
}
});
});
As you can see I'm using maxWidth to see the width of the default size. I couple of boxes could be almost half that. I've tried setting auto so see if it would inherit the width set on the content block in the CSS but this doesn't seem to work.
Any ideas that don't involve writing a whole need block of script for $(".fancybox-narrow")?
EDIT
I actually found an example on the Fancybox page which uses data-fancybox-width to set the width of an overlay: http://jsfiddle.net/wgPTR/
Though this doesn't seem to work with my code. The width sets but it isn't responsive anymore. Setting fitToView to false seems to get that working but then the fancybox crops when there's not enough vertical space and it's un-scrollable.
UPDATE
Just to update, here's a CodePen of the working (default) fancybox: http://codepen.io/moy/pen/YGgjqv
I've also created a forked version which uses data-fancybox-width to set a width - which works but unfortunately the fancybox is no longer responsive. The only way to get this to work is to take out fitToView: false which breaks my vertical scrolling.
Any ideas?
I seem to have found a solution (with a lot of help from the CSS Tricks forum) by using the following beforeLoad if statement:
beforeLoad: function() {
if ($(this.element).hasClass('fancybox--small')) {
this.maxWidth = 600;
}
}
Basically it checks for the class fancybox--small and if it's present it amends the maxWidth of the fancybox.
Can't see any problems with it (yet), checking in IE it seems to work down to IE8 as well. Hopefully this helps someone else but let me know if you find any issues with it ;)

jQuery ui dialog dragging issues

I used the jQuery ui (jquery-ui-1.10.3) dialog pluggin for one of our products, and found a possible "problem":
When the hosting page is small or the current view of the hosting page is scrolled to the top, dragging an openned dialog box behaves as what is expected. The problem start to manifest when hosting a dialog in a large page which is scrolled to somewhere not at the top, in which case the dialog box starts to jump around during dragging. It happens to both IE 9 and the latest Firefox (21.0).
The page is dynamically generaed, complex and has to be long. I am not familiar with fiddle, but it seems to have no option for jQuery-ui lib option that I can use.
More specifically, I found if I scoll the hosting page 100px down (so the top 100px of the hosting page is 'feed' into the top border of the browser window) then when I drag the dialog, instead of it following the mouse, it jumps down 100px so that it is out of the mouse capture.
The dialog is initiallized as
$(element).dialog({
autoOpen: false, width: 950, height: 820,
modal: false, resizable: true, draggable: true
});
My questiong is: 1) does any one else has the same issue? 2) If so, is this an setting issue or a bug.
Any expert here can help me with it?
I used to have the same issue, content on the page is generated automatically. It is very long.
html, body {position: relative} solves the problem.
OK, I found this is a bug of jQuery-ui 1.10.3, see here:
That appears only with using UI 1.10.3 and when the scrollbar is not
at the very top in Firefox, Opera, IE8.
In Chrome works fine and also with 1.10.2 on other browsers.
The UI dialog demo page has this bug too:
drag the dialog down until appears the scrollbar scroll down again
drag the dialog down. dialog goes down with the offset
My solution to fix this bug is similar to that of Dado, but using the drag event:
$(element).dialog({
draggable: true,
drag: function(event, ui) {
var fixPix = $(document).scrollTop();
iObj = ui.position;
iObj.top = iObj.top - fixPix;
$(this).closest(".ui-dialog").css("top", iObj.top + "px");
}
});
My version: jQuery UI - v1.10.3 - 2013-10-10
I think there is a bug. I faced to this problem too. My solution for fixing this to turn off the dragging. Just make draggable false.
Like this:
$(element).dialog({
autoOpen: false, width: 950, height: 820,
modal: false, resizable: true, draggable: false
});
Update the jQuery UI Library (js) worked for me.
http://jqueryui.com/download/
Remember to update your css files too.
Bugreport: view bug report
My solution to fix this bug is to "reset" the "ui.position.top" (for me 228px).
$(element).dialog({
dragStart: function(event, ui) {
var fixPix = 228; // offset top (add your own here!)
iObj = ui.position;
if (iObj.top > fixPix) {
iObj.top = iObj.top - fixPix;
}
ui.position = iObj;
}
});
My version: jQuery UI - v1.10.4 - 2014-01-17
This solution works for me. Hope it helps you too until this ugly bug is fixed.

How do I remove Bootstrap Affix from an element under certain conditions?

I have an element where I'm using the Twitter Bootstrap Affix plugin. If the window gets vertically resized to the point where it is smaller than the height of the item, I'd like to remove the affix functionality from the element since you wouldn't be able to see all of it in the window.
So far I've tried this in the console just to see if it can be removed, but it doesn't seem to be working.
$("#myElement")
.removeClass("affix affix-top affix-bottom")
.removeData("affix");
$(window)
.off("scroll.affix.data-api, click.affix.data-api");
Maybe I'm going about this the wrong way? How Can I programmatically remove the affix from an element that already had it applied?
I ended up going for a mostly CSS solution, similar to what #Marcin Skórzewski suggested.
This just adds a new class when the height of the window is shorter than the height of the element.
var sizeTimer;
$(window).on("resize", function() {
clearTimeout(sizeTimer);
sizeTimer = setTimeout(function() {
var isWindowTallEnough = $overviewContainer.height() + 20 < $(window).height();
if (isWindowTallEnough) {
$overviewContainer.removeClass("affix-force-top");
} else {
$overviewContainer.addClass("affix-force-top");
}
}, 300);
});
And then in CSS, this class just gets added:
.affix-force-top{
position:absolute !important;
top:auto !important;
bottom:auto !important;
}
EDIT
For bootstrap 3, this seems to be effective:
$(window).off('.affix');
$("#my-element")
.removeClass("affix affix-top affix-bottom")
.removeData("bs.affix");
Deprecated: Answer refers to Twitter Bootstrap v2. Current version is v4.
There are few options to try.
Use function for data-offset-top. Normally, you use the integer value, for number of scrolled pixels to fix the element. According to documentation you can use the JS function, that will calculate the offset dynamically. In this case you can make your function to return different number depending on the conditions of your choice.
Use media query to override affix CSS rule for small window (eg. height 200px or less).
I think, the second variant should be suitable for you. Something like:
#media (max-height: 200px) {
.affix {
position: static;
}
}
If you would provide jsfiddle for your problem others could try to actually solve it, instead of giving just theoretical suggestion, that may or may not work.
PS. Bootstrap's navbar component uses media query for max-width to disable fixed style for small devices. It is good to do that not just because the screen size is to small for navbar, but in mobile devices position: fixed; CSS works really ugly. Take w look at navbar inside the bootstrap-responsive.css file.
Your $(window).off is close, according to #fat (author of bootstrap-affix.js) you can disable the plugin like this:
$(window).off('.affix');
That will disable the affix plugin.
See: https://github.com/twitter/bootstrap/issues/5870
On line 1890 of bootstrap is a conditional for whether the default action should be prevented. This allows your to listen for events and if some condition is met, prevent the affix from happening.
line 1890 from bootstrap:
if (e.isDefaultPrevented()) return
Example:
$('someselector')
.affix()
.on(
'affix.bs.affix affix-top.bs.affix affix-bottom.bs.affix'
, function(evt){
if(/* some condition */){
evt.preventDefault();
}
}
);
Even though this was answered, I just wanted to give my solution for this in case someone ran into a similar situation as mine.
I modified the offset top option to a ridiculous number that would never get scrolled to. This made it so I did not have to do $(window).off('.affix'); and disable affix for everything.
$('#element-id').data('bs.affix').options.offset.top = 1000000000;

Always display niceScroll rail

I'm using niceScroll jQuery plugin to replace common browser scrollbars in overflowing <div>'s. The plugin is working good, but I can't get it to work and display the scroll rail always (even if the content is not exceeding <div> bounds). My final configuration is:
$(document).ready(function () {
$(".div-wrapper").niceScroll({
cursorcolor: "#333",
cursoropacitymin: 0.3,
background: "#bbb",
cursorborder: "0",
autohidemode: false,
cursorminheight: 30
});
};
I've tried to fire $(".div-wrapper").getNiceScroll().show() but it doesn't seem to work either.
Any help would be appreciated, thanks
First of all, you have a missing parenthesis at the end - could that be your problem?
Setting autohidemode to false only means that it doesn't disappear when the user stops scrolling and then appear again while scrolling. Unfortunately it doesn't mean it's visible if the content doesn't overflow.
As a workaround you may try making the element with id=ascrail2000 explicitly visible after your call to .niceScroll() with something like this:
$(document).ready(function () {
$(".div-wrapper").niceScroll({
cursorcolor: "#333",
cursoropacitymin: 0.3,
background: "#bbb",
cursorborder: "0",
autohidemode: false,
cursorminheight: 30
});
$('#ascrail2000').show();
});
SEE THE MISSING PAREN IN THE LAST LINE
You may need to make its children elements visible as well:
$('#ascrail2000 *').show();
(Make sure that the element's id is ascrail2000 in your case.)
UPDATE: as veritas has pointed out, using a more general selector div[id^='ascrail'] instead of #ascrail2000 makes it work for more than one nicescroll on one page, so the above can be done with JavaScript:
$("div[id^='ascrail']").show();
or in CSS:
div[id^='ascrail'] { display: block; }
or if the above doesn't work:
div[id^='ascrail'] { display: block !important; }
This is not the most elegant solution but I'm afraid this is currently the only way to solve this problem because the nicescroll plugin doesn't have an option to select that behaviour. Fortunately nicescroll is open source and available on GitHub so one could easily fork it and add such an option or post a feature request on GitHub.
$(".div-wrapper").niceScroll({
cursorcolor: "#333",
cursoropacitymin: 0.3,
background: "#bbb",
cursorborder: "0",
autohidemode: false,
cursorminheight: 30
});
I am assuming that if the content does not overflow the bounding box, niceScroll does not do anything, which might be your problem. Keep in mind that niceScroll isn't >$overflow: scroll;... Without digging through the plugin itself I can't be certain but I would assume it has a check built-in to test whether the content needs scrolling, and if it doesn't, then the function silently exits.
I see this answer with a google search, even if it's old, this is my working solution if someone see this seeking for an answer :
$('#ascrail2000.nicescroll-rails').show();
$('#ascrail2000.nicescroll-rails div').height('300px').show();
I need to set an arbitrary height to the "bar" div, because by default it's height:0px, even if you display it, you can't see anything.
I suppose we can do better an calculate a good height with the windows dimensions, but I don't need to :)
Right now 07/02/2018 and working Version jquery.nicescroll v3.7.6 Source Link
After adding autohidemode: false it's working fine for me.
$("#example").niceScroll({
autohidemode: false // it make nicescroll scroll bar visible all time
});

Categories

Resources