Add a non-editable/compact region to Jodit - javascript

I am trying to create a custom audio component with Jodit. So, I have designed the view for the component but I do not want the component to be taken apart by bits. So if the component has to be removed, it should remove the root and the component bits should not be editable.
Currently, you can take the view apart in bits which does not serve my purpose. So my questions are:
Is there a way in Jodit to lock or group a block of code together and make it uneditable in parts?
If that is not possible, is there a way to detect if any part is being removed? and how to remove the entire component in such a case.
These is the default design:
This is after deleting some parts:
The HTML code which i am using is similar to this:
<div class="audio-container">
<audio id="audio_player" style="position: absolute; left: 0; top: 0; width: 0; height: 0; margin: 0; padding: 0" controls="controls">
<source id="audio_player_source" src="static/sound-file.mp3" type="audio/mpeg" />
</audio>
<div class="audio-pack" style="margin-left: auto; background: #DDD; border: 2px solid rgba(120, 255, 120, 255); width: 400px; height: 30px; padding: 5px 5px 5px 5px">
<button id="play_btn" class="audio-controls audio-play" onclick="play('audio_player')"></button>
<button id="pause_btn" class="audio-controls audio-pause" style="display: none" onclick="pause('audio_player')"></button>
<button id="stop_btn" class="audio-controls audio-stop" onclick="stop('audio_player')"></button>
<div style="margin: 0 5px">00:00</div>
<div class="audio-timeline audio-track">
<div class="audio-playhead"></div>
</div>
<div style="margin: 0 5px">00:00</div>
<div style="margin: 0 5px">Vol:</div>
<div class="audio-timeline volume-track">
<div class="audio-playhead" style=""></div>
</div>
</div>
</div>
I have tried using divs with position as absolute to protect some of the parts but I can easily drag to select and hit the delete/backspace key to remove parts.

I was able to stumble on the answer to this by looking through the Jodit source code for media insertion. Apparently, there is a contenteditable property which can be added to the root element to make it non-editable. Adding this attribute definition contenteditable="false" seemed to group the elements together though it created another challenge of deleting the element which did not seem to work at all. Anyway, I can do that either using MutationObserver or by adding a context menu and operating on the source html directly.

Related

Displaying <div> in between two elements of a separate hierarchy

Consider the following HTML:
<div style="background-color: blue">
<div style="color: red">
some content some content some content some content
</div>
</div>
<div id="highlight" style="top: 0px; width: 200px; height: 40px;
background-color: yellow; position: fixed">
</div>
on jsfiddle
It looks like this:
What I want to do is to visually put the #highlight <div> between the blue background and the text. Here's what I want it to look like:
I am using this weird <div> hierarchy as in my real-life scenario I'm using JQuery to move #highlight with some mouse/keyboard events. I also have no control over the hierarchy of the <div>s containing the text.
I need #highlight's position to either be fixed or absolute.
Is there any way I can achieve my current result without changing the HTML structure? I've attempted using z-index, but it doesn't work as the hierarchy structure has priority over it. I am open to any kind of dirty hack involving JavaScript/JQuery.
On the content div, set z-index:1 and position:relative.
<div style="background-color: blue;">
<div style="color: red; z-index: 1;position:relative;">
some content some content some content some content
</div>
</div>
<div id="highlight" style="top: 0px; width: 200px; height: 40px; background-color: yellow; position: fixed;">
</div>

How to start a new row in Angular 2 templat

I'm working on Angular 2 now. In my template I'm using the following to show the data I get from the APIs
<div class="blocks">
<div router-active class="block" *ngFor="let item of items">
<div class="inblock">
<p class="title">{{ item.name }}:</p>
</div>
</div>
</div>
Everything is working fine but if one of the div height was higher than the others it would look something like the image below
I want to have a nice row with three divs only and after three you start a new block, I know how to do it normally but I can't figure out how to do it with Angular 2!
UPDATE : I don't want a fixed height because the content can be as long as the user wants! so adding a fixed height with CSS will not solve the issue
You will find a solution using css. Take this code:
.block {
float: left;
width: 150px;
margin: 10px;
border: 3px solid #73AD21;
}
.block:nth-child(3n+4){
border: 1px solid red;
clear: both;
}
The above code is using float to make the blocks inline. Using nth-child you can tell it to clear each 3rd block.
Why don't you create a 'css' associated to your template and pass it to styleUrls property. In that CSS you can defile a class and set the div properties whatever you like and pass that class name to the elements.

Need help in writing into an iFrame

I am facing issues in writing into iframe, I am able to identify the iframe but I am not able to write anything into the frame. Whenever I try to write into the frame I am getting below error.
org.openqa.selenium.ElementNotVisibleException: Element is not currently visible and so may not be interacted with
Command duration or timeout: 211 milliseconds
Build info: version: '2.43.1', revision: '5163bce', time: '2014-09-10 16:27:33'
This is the screenshot of my HTML Code.
HTML Snippet:
<div id="offer_description_field" class="control-group wysihtml5_type description_field ">
<label class="control-label" for="offer_description">
Description
</label>
<div class="controls well">
<ul class="wysihtml5-toolbar" style="">
<textarea id="offer_description" class="bootstrap-wysihtml5ed" rows="3" name="offer[description]" data-richtext="bootstrap-wysihtml5" data-options="{"csspath":"/assets/bootstrap-wysihtml5.css","jspath":"/assets/bootstrap-wysihtml5.js","config_options":"null"}" cols="48" style="display: none;"></textarea>
<input type="hidden" name="_wysihtml5_mode" value="1">
<iframe class="wysihtml5-sandbox" width="0" height="0" frameborder="0" security="restricted" allowtransparency="true" marginwidth="0" marginheight="0" style="display: inline-block; background-color: rgb(255, 255, 255); border-collapse: separate; border-color: rgb(204, 204, 204); border-style: solid; border-width: 1px; clear: none; float: none; margin: 0px; outline: 0px none rgb(0, 0, 0); outline-offset: 0px; padding: 4px 6px; position: static; z-index: auto; vertical-align: middle; text-align: start; box-sizing: content-box; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.075) inset; border-radius: 4px; width: 327.8px; height: 60px; top: auto; left: auto; right: auto; bottom: auto;"></iframe>
<p class="help-block">Required. Add offer description.</p>
</div>
</div>
When I create a simple HTML file with above code snippet I am not able to interact with element. Manually I am able to write anything inside this iframe when it is coming with full code base. Looks like it is replacing the textarea with iframe. Not sure how to deal with this type of element.
This is how it appears on the panel.
Can anybody help?
This error doesn't have to do with the IFRAME. In fact, the element you are interacting with isn't inside the IFRAME. The reason you can't interact with it is stated in the error.
org.openqa.selenium.ElementNotVisibleException: Element is not currently visible and so may not be interacted with
The element is not visible. If you look at the TEXTAREA element, it is marked with style="display: none;" which is why it is not visible. Selenium was designed to interact with the page as a user would and so will not interact with hidden elements. You will need to approach this problem as a user would... how would a user get that text area to appear? I'm assuming click something, etc. You will need your script to execute whatever a user would do, then the TEXTAREA will become visible, and will be able to be interacted with.
you should takecare of following things while working with frames :
1.Select the frame .
then enter into the text/textarea.
Note: sometimes the elements are not in the visible area in the UI hence we may required to take the element into view port , following below code spinet before entering into the text/textarea :
WebElement element = driver.findElement(By.id("id_of_element"));
((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", element);
2.then deselect the frame .
Hope this would work for you .
Switch into that iframe either by id/class using following code
driver.switchTo().frame(driver.findElement(By.id("Enter id of element")));
OR
driver.switchTo().frame(driver.findElement(By.class("Enter class of element")));
Once you switched to the frame select the element with your normal steps.
like
driver.findelement(By.id/class/css/xpath("Enter Element id/class/css/xpath"));
Then, if you want to select any other element from the main frame, simply go back to your main frame with following code
driver.switchTo().defaultContent();

Parallax scrolling tutorial for background image

After spending days trying to figure out why I can't seem to get parallax scrolling working for one picture on a website I'm working on, I'm finally posting here. So I have this code so far:
HTML:
<div class="intro">
[a bunch of stuff here]
</div>
CSS:
.intro {
background: url(../images/IMG_100.png) 50% 0 fixed;
background-position: center;
margin: 0 auto;
width: 100%;
box-shadow: 0 0 50px rgba(0,0,0,0.8);
padding: 100px 0;
}
I've pretty much tried all the tutorials for a simple parallax scroll effect, but they don't seem to work for my situation as it stands. What seemed most promising to me was to use the skrollr.js plugin - I tried adding the following to my div tag:
<div id="intro" class="intro"
data-bottom="opacity:1;background-position: 0px -50px;"
data-center="opacity:1;background-position: 0px 0px;"
data-top="opacity:1;background-position: 0px 50px;">
I then initialized skrollr at the end of my html:
<script type="text/javascript" src="js/skrollr.js"></script>
<script>
window.onload = function() {
skrollr.init();
}
</script>
...doesn't work. I'm fairly new to this, so any help would be greatly appreciated!
I think that the id of your main div should be equal to skrollr-body and not intro.
1st EDIT
Actually, I see there are situations where the main id doesn't need to be named scrollr-body. Maybe this tutorial could help you achieve different effects since I couldn't find any official documentation.
Check the fiddle of your snippet from the question.
2nd EDIT
I changed your html code to this
<section id="skrollr-body">
<div class="intro"
data-bottom="opacity:1;background-position: 0px -50px;"
data-center="opacity:1;background-position: 0px 0px;"
data-top="opacity:1;background-position: 0px 50px;">
<h1>Content in here</h1>
<p>first big text block</p>
<p>second huge text block</p>
</div>
</section>
I also changed the background attribute of the .info class to this
background: url('bg-image.jpg') no-repeat fixed center;
but feel free to experiment with values. Check the working fiddle

my float class is deactivating my rollover class

Thanks to the generous help of someone at stackoverflow, I was able to put different colored CSS boxes over different images and remove the css boxes (revealing the images) whenever there was a mouseover. this is the code i used fiddle http://jsfiddle.net/alexdickson/fyYcC/
However, I also wanted the boxes to align horizontally in a float, so (being a beginner) I put another class (called float) around the images (in class rollover) but it deactivated the rollover.
Is there a better way to implement the float than I have done below?
Thanks for your help in advance
<div class="float">
<div class="rollover a">
<img src="http://blahblah.com/wp-content/uploads/2011/01/1.jpg" />
</div>
</div>
<div class="float">
<div class="rollover b">
<img src="http://blahblah.com/wp-content/uploads/2011/01/2.jpg" />
</div>
</div>
<div class="float">
<div class="rollover c">
<img src="http://blahblah.com/wp-content/uploads/2011/01/3.jpg" />
</div>
</div>
.float
{
float: left;
width: 200px;
border: 1px solid #fff;
margin: 0 15px 15px 0;
padding: 5px 10px 10px 10px;
}
You can add the float class directly to the class of the inner div.
Also, float generally isn't a very good class name. You should give it a semantically meaning name, and attach its presentation via the CSS. You are leaking CSS implementation details into the HTML.
jsFiddle.
I forked the jsfiddle you posted and was able to float them left with two rows of 3 images. You can just add more to each container for more horizontal images, and add more containers to add more rows. http://jsfiddle.net/robx/592ba/1/

Categories