I'm using wysihtml5 script. So, it transforms textarea elements to a html editor. At the moment of editor construction it copies CSS properties of the textarea element and adds it as inline CSS properties to the iframe tag.
So, when editor is loaded <iframe> tag looks like:
<iframe class="wysihtml5-sandbox" width="0" height="0" frameborder="0" security="restricted" allowtransparency="true" marginwidth="0" marginheight="0" style="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(85, 85, 85); outline-offset: 0px; padding: 6px 12px; position: static; top: auto; left: auto; right: auto; bottom: auto; z-index: auto; vertical-align: text-bottom; text-align: start; box-sizing: border-box; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.075) inset; border-radius: 4px; width: 330px; height: 214px;">
Now I want to change css properties of the editor. Because CSS is inline I can not use classes for that, instead I use .css jQuery function:
$(jqObject).parent().find("iframe").css({'background-color': '#000000'});
If I check property right after I set it, I'll get #000000 value. But there is some listener (probably to "change" event) that set CSS properties back to initial state from inline properties:
background-color: rgb(255, 255, 255)
My question is where is this functionality that synchronises CSS? In what objects I should look for it - Composer, Synchronizer, Editor? Appreciate any help.
Related
I have a long code which I want to use on multiple random pages of my website. Copying and pasting it everywhere is a tough job for me. So, I want to assign a value to it using javascript. If I use that value, entire code should be executed. I tried to use document.getElementById and tried to insert the entire code in innerHTML which didn't work out. Here's the code which I want to assign the value for.
<style>
.container {
height: 40px;
border: 1px solid black;
width: 250px;
padding: 5px;
font-size: xx-small;
white-space: nowrap;
border-radius: 50px;
background: #e6e7ee;
box-shadow: inset 5px 5px 10px #a3a3a3, inset -5px -5px 10px #dddddd;
}
img {
margin-right: 5px;
border-radius: 50px;
box-shadow: 5px 5px 10px #a3a3a3, -5px -5px 10px #dddddd;
border: 1px solid silver;
}
</style>
<div class="container">
<img border="0" align="left" data-original-height="884" data-original-width="800" height="40px" src="https://1.bp.blogspot.com/-GbF0Uslf3Uo/XyEjbgr6hCI/AAAAAAAADFg/dziRURov-J0QMftcWgx5N_lEpIP7jjMGgCPcBGAYYCw/s320/Screenshot_2020-07-25-23-27-02-1.png" width="40px" />
- Becky Lynch<br />
- Wrestler<br />
- WWE
</div>
If I type <div id="becky"></div> on any page, The above code should be executed. Is there any option available?
I am trying to put a JS chart inside a <div> but the issue is that when I put it inside the div tag, nothing shows!
I have tried with different libraries (C3, AmCharts, HighCharts) and all of them the same issue, nothing appears when calling the div of the charts inside another div:
<div id="chartdiv"></div>
The below one, does not work :
<div class="block"><div id="chartdiv"></div></div>
However, when placing it outside of the div tag, it works. I've tried to debug, but no errors shows on the console!
CSS of block class:
.block {
display: block;
width: 98%;
margin-right: auto;
margin-left: auto;
padding-top: 6px;
padding-bottom: 0px;
border: 1px solid #e2e2e2;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 1px 0 0 hsla(0, 0%, 91%, .75);
}
There are 5 graphs on the page, and I believe that a conflict of a JavaScript happens which is causing the issue.
Any ideas about what's happening? I am not sure if there is an issue with the library itself; however, if you have charting libraries and that have the ability to show real-time data, please share it.
Try adding some explicit CSS rules - your HTML may be inheriting something unexpected:
.block {
width: 98%;
margin-right: auto;
margin-left: auto;
padding-top: 6px;
padding-bottom: 0px;
border: 1px solid #e2e2e2;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 1px 0 0 hsla(0, 0%, 91%, .75);
/* Sure you don't want inline-block here? */
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
Similar to a previous question but I gave up on that an decided to come back to it later, now things are different as I'm using jQuery. I'm having a dropzone on my site and for image files I would like there to be a border shadow, but for files I don't want one. Multiple files can be dropped and the previews display inline, so say if 2 images and one file were dropped, I would want the shadow on both the images, but not the file preview box. I made 2 CSS classes, identical except for the shadow:
.dz-preview {
background: transparent;
position: relative;
display: inline-block;
margin: 40px;
vertical-align: top;
border: 1px solid transparent;
padding: 10px 13px 10px 10px;
-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
}
.dz-preview-noshadow {
background: transparent;
position: relative;
display: inline-block;
margin: 40px;
vertical-align: top;
border: 1px solid transparent;
padding: 10px 13px 10px 10px;
}
Simplest way to go seemed to be with jQuery and I was using it in the project anyway, so I made this (.dz preview is the default class):
mydropzone.on("addedfile", function(file) {
if (!file.type.match(/image.*/)) {
$('.dz-preview').addClass('dz-preview-noshadow').removeClass('dz-preview');
mydropzone.emit("thumbnail", file, "http://i.local.dev:5000/jLNutaV.png")
}
});
It works initially-but goes wrong. I drop 2 images and they get their shadowed border just fine, but when I drop a file, it loses its shadow, which is what I wanted - but so do the two images that were dropped before it. If I drop another image it will get its shadow again, but the previous elements don't change. I know I'm missing something really stupid here about the scope of how JS is affecting these classes, but is there a way to change the class for JUST that instance, without muddling up everything before it, or do I need to run more checks and manually add the class back on?
Can't post codes in comments, so I'll make it an answer.
Since .dz-preview and .dz-preview-noshadow shares a lot of same codes, you can have a class that just holds the shadow. For eg:
.dz-preview {
background: transparent;
position: relative;
display: inline-block;
margin: 40px;
vertical-align: top;
border: 1px solid transparent;
padding: 10px 13px 10px 10px;
}
.shadow {
-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
}
So instead of adding and remove, you can just do a remove.
This question already exists:
How to make this into a sliding left/right div
Closed 9 years ago.
Provided below is a snippet from my html and css code, how and what would I need to add in not only html and css, but javascript as well to make this work as a slide in/out in the direction of (right to open) and (left to close) div?
I currently do not have any javascript written up for this as I do not know where to start with it...I am, however, using jquery-1.3.2
If anyone can provide a jsfiddle, I'd greatly appreciate it ;)
HTML
<div id="left">
Edit Profile
Settings
Sign Out
</div>
CSS
#left { width: 338px; border-left: 1px solid #333; float: left; }
#left a {
width: 145px;
height: 22px;
padding: 5px 12px;
margin: 0;
border-bottom: 1px solid rgba(204, 204, 204, 0.09);
float: left;
display: inline-block;
position: relative;
top: 34px;
color: #15ADFF;
font: 16px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-shadow: -1px -1px 1px #000, 2px 2px 3px rgba(110, 110, 110, 0.7);
}
#left a:hover {
width: 138px;
background: rgba(204, 204, 204, 0.4);
border-right: 7px solid #15ADFF;
color: #111;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.4);
}
I'm assuming I'd need to add an id or class as either #open, #close and/or .open, .close.
You could use jQuery's animate function, should do the job easy enough.
Tutorial/Information on .animate:
http://viralpatel.net/blogs/understanding-jquery-animate-function/
There really isn't enough info here to know what you want, because the layout of the page is important. Without knowing if the menu should be absolute, fixed or relative.
You can use jQuery's animate() method to animate CSS numeric properties, and then use mouseenter and mouseleave to slide the menu.
http://jsfiddle.net/thinkingmedia/8a7GL/1/
It's only 2 lines of code.
I have created a page in MVC Razor which includes one textbox, and which has autocomplete functionality. My problem is that the autocomplete results appear far below the textbox the first time it is used (as shown in this picture), but subsequently appears in the correct place (i.e., exactly below the textbox). Why this is happening?
My CSS is as follows:
.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 2000;
float: left;
display: block;
min-width: 160px;
_width: 160px;
padding: 0px 0;
margin: 2px 0 0 0;
list-style: none outside none;
background-color: #ffffff;
border-color: #ccc;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
}
And my HTML is as follows:
<input class="contentPicker input-xxlarge ui-autocomplete-input valid"
id="Content" name="Content" placeholder="Select a content"
type="text" value="" autocomplete="off">
You should not overwrite any positioning css from jquery ui. Of course it's gonna make things behave weird.
The first time the list is showing, is reading your css, but subsequent searches are probably overwriting your css with inline styles
jquery-ui is a plug and play solution, if you include the jquery-ui css files in your page, you shouldn't need to do anything. They have a very advanced theme roller, that takes care of all styling for you, so you don't have to mess with it