TinyMCE - external toolbar position - javascript

I am trying to work with TinyMCE in creating a multi-textbox, click-to-edit type graphical content editor. I have got TinyMCE to the point where I can add and remove them, position and size them, click to edit them, and so forth - but one thing is bothering me and that is the toolbar.
I have an external toolbar that I'm trying to position along the bottom edge of the page, along with my "Save and Close" button and some other toolbuttons. The external toolbar is created by TinyMCE in a DIV with class "mceExternalToolbar". I tried setting position: fixed and left: and top: attributes in the page stylesheet, but to no avail - TinyMCE sets position: absolute and top: -28px on the DIV when it creates it.
I cannot modify the source code for TinyMCE due to project restrictions, but I can supplement it with extra CSS files.
Can anyone point me in the right direction to get the toolbar positioned properly?

The CSS selectors in the provided stylesheets are overriding the selectors that you're writing. What you need to do is either target the toolbar element with a selector of greater specificity:
body div.mceExternalToolbar {
position: fixed ;
top: -28px ;
};
Or use the !important directive to override it:
.mceExternalToolbar {
position: fixed !important ;
top: -28px !important ;
}
For more detail about both selector specificity and !important, see the W3C's documentation.

Related

Bring element on top of modal backdrop

I am trying to build a guide functionality for my application. As a part of this functionality, it is expected that a tooltip is shown next to the target HTML element and this target element is brought on top of modal backdrop that appears together with the tooltip.
The problem is that after significant effort I still cannot make HTML element show on top of the modal backdrop. Simple tricks like z-index: 10000 !important; position: relative do not help. Also changing parent elements' z-index by disabling it in Firefox Developer Tools (and leaving z-index: 10000 !important; position: relative for the target element that is supposed to be on top of the modal backdrop) does not help.
HTML of the application is quite complex with many elements. But I want to be able to "highlight" any given element by bringing it on top of the modal overlay knowing only its id. Is there an easy way to do that with JavaScript/React?
Hopefully there is a way to do this without modifying the DOM, which would be highly preferable.
UPD: Code demo - press hat button to show guide/tooltips
Remove the z-index from .form-wrapper and apply relative position with z-index for the targetted elements.
I did this by adding
d.classList.add("tooltip-active-element");
to App.js#77
Also added the class to the css file:
.tooltip-active-element {
position: relative;
z-index: 2;
background: red;
}
and removed the z-index value from other classes, the key one being the .form-wrapper class.
Working demo: https://codesandbox.io/s/tooltip-z-index-forked-fg9pt

Filmstrip Style Image Gallery

I am trying to figure out how to create an image gallery like the one illustrated below so I can place it onto my website. I am wondering if anyone can point me in the right direction for a tutorial? I have found a lot of nice galleries that will display my images, but none of them displays the images like in the filmstrip style I am after.
Requirements of gallery:
When clicking on the arrows, the gallery strip will either shift
left/right by one picture
Hovering over the image will darken the image, and display some
caption about the image
I just answered a question where someone was using carouFredSel. This jQuery plugin looks like it would work pretty well, though I do not think it has the built-in hover effect. To be honest though, that is the easier part.
The trick is to make the width slightly larger than the images to show, which leads to the partial images on each side.
Here is a jsfiddle to illustrate.
UPDATE:
The OP asked if the page nav links could be repositioned. I modified the jsfiddle to work this way. The additions were as follows:
.list_carousel {
position: relative;
}
#prev2 {
position: absolute;
top: 35px;
left: 0;
}
#next2 {
position: absolute;
top: 35px;
right: 0;
}
If you have a relatively positioned container element, you can absolutely position child elements. I added relative positioning to the list_carousel container, then I could absolutely position the nav arrows within the container. Change the top value to position vertically, and left/right to position horizontally.
I also removed the pager all together, as it was not a requirement based on the original example. If you change the page arrows to images it is pretty much what you want.
MORE UPDATES
I decided to take it one step further and make the hover effect work more like the example. See the new jsfiddle. The changes are:
Added span wrappers around all text within list items
Added $(".list_carousel li span").hide(); to hide all the spans
Modified hover event to toggle spans
I also added some CSS to position the span text:
.list_carousel li {
position: relative;
}
.list_carousel li span {
position: absolute;
bottom: 0;
display: block;
text-align: center;
width: 100%;
}
FINAL UPDATE (I PROMISE!)
I decided to go all in and add the transparency layer too: jsfiddle
Hover modifications:
$(this).prepend($("<div class='hover-transparency'></div>")); and $(this).find("div:first").remove(); to add/remove transparency layer on hover in/out.
CSS modifications:
.hover-transparency {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.60);
}
These style the transparency layer. Change to suit your taste.
Something like jCarousel should do the trick. Once you have the carousel functionality in place, you can add in the hover affect via CSS and a span that contains the caption.
I was just looking at ContentFlow Plugin which is JavaScript based.
They include a separate library of additional plugin you can use that takes care of your Slideshow requirements, in particularity this one HERE. When you use the mousewheel over the 3 images, it scrolls by 1. That said, you can mod the plugin to do the same when the arrow buttons are clicked.
Sample plugin markup looks like:
{
shownItems: 3, //number of visible items
showCaption: true // show item caption
width: 100, // relative item width
height: 100, // relative item height
space: 0.4 // relative item spacing
}
To address that the captions should be visible only on mouse hover, I would set showCaption to always be true along with using a jQuery .hover(); Event Listener that will use .show(); and .hide(); on the caption Class Name .caption when required. Also, using jQuery to set the opacity can be done within the .hover(); event too.
The latest version of ContentFlow v1.0.2 supports multiple instances on the same webpage if that's ever required.

Absolute z-index issue in IE when expand hidden content

I have a problem with position of a block (div). I am newbie in CSS, please help me.
I have this code: http://jsfiddle.net/9rEmt/ (please take a look there) to view online in IE.
If I put absoulte at positioning, the issue appears: (please choose Compatibility mode if you have newer version of IE )
instead of (without compatibility mode, just simply in IE9) :
Where is the problem ? How to solve this issue ?
Thank you very much
In IE to position an element relative to another element the parent element needs to e positioned itself.
Try to add this to your stylesheet:
#item {
position: relative;
top: 0px;
left: 0px;
}
Also, move the items div into the item div so that items is able to be positioned relative to item.
http://jsfiddle.net/U92jm/

How to set a target="_blank" in a DIV tag?

Got a page that displays some buttons (background images, etc) and they are all clickable. What I want this specific button to do is open the target page in another browser tab using *target="_blank"*. The way it is setup as the href in a div I cannot do this. Any ideas on a work around for this?
<div class="dashboard_navbutton" href="Home/RequestRedirect" style="background-image: url('#Url.Content("~/Content/images/Form_button.png")');">
<p>Insert witty text here</p>
</div>
Just make that div an a and add display:block; to the style.
EDIT: Ensure that your chosen DOCTYPE supports the use of p inside an a element. More generally, it should use the computed style for display rather than the tag name to determine if an element is inline or block in terms of having one in the other. I believe the HTML5 one is fine: <!DOCTYPE html>.
trap the onclick event for the div, call a javascript function, have the function openthe window.
html snippet
onclick="opennewwin()"
function opennewwin(){
var awindow = window.open(loc, "blank", "height=500px,width=500px");
}
I was trying to dynamically add divs that would also function as links.
This was my solution using CSS.
First the container needs relative positioning.
.container {position: relative;}
Next, the link needs to fill the container.
.container a {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
Like I said, I dynamically assembled the div, but the html would look something like this:
<div class='container'>[some other content]</div>
The container must be position relative, otherwise the position absolute link fills its first position relative ancestor (probably the whole viewport).
Of course, you can add styling to the div or the link. Note, I was using a position: sticky nav-bar, and I had to set it's z-index high in order to avoid collisions with the div buttons.
Pros: whatever styling and targeting you set for your links will apply. Good 'style': doesn't put a block element inside an inline (should avoid browser issues, though I haven't thoroughly tested it). Does not require any other languages or frameworks.
Cons: Not as simple as Niet's answer, but shouldn't be Doctype dependent.

Thumbnails from JS Gallery Placed in Footer

I am trying to add the thumbnails section of the js gallery in the footer of a web page. I've never broken up a gallery before and figured it's the only way to achieve this look
http://img69.imageshack.us/img69/5923/bsade.jpg
The link for what I have now is this: http://www.marisaraskin.com/two.html.
(The borders are just guides for me while I'm still working on it)
The CSS code for the thumbnails container is:
.galleria-thumbnails-container {
height: 100px;<br>
bottom: 0;<br>
position: absolute;<br>
left: 10px;<br>
right: 10px;<br>
z-index: 1;<br>
border:1px solid yellow;<br>
}
I'm not sure what my other options are for this. I was maybe thinking overlapping the content container over the footer with z-index. Though I'm iffy about that especially because everyone's screen resolution is different. I can post more code per request. I am not sure what else you need to see as of now.
In case you need to know I'm using a gallery js called "Galleria" (classic).
If I were you I'd modify the js script so that you can populate blocks that are not contiguous in the actual HTML code, but here's a rough approach to doing it all through css:
remove position:relative from #container
remove position:relative from .galleria-container
add position:absolute to .galleria-stage and remove left and right
positioning. Also, add top:90px (or something close to that) and
give it a width: width:920px.
change .galleria-thumbnails-container to use absolute positioning and
use the bottom:___ property to set it where you belong.
Basically what you're doing here is removing all the relatively positioning in the parent elements of the gallery so that the gallery segments all all being positioned with respect to the page rather than any of their parent elements. Once this is done, you can just modify the absolute positioning and width of the stage block and the thumbnail block so that they sit where you want them.

Categories

Resources