I'm trying to add a close button to Elfinder. I'd like the placement to be to the right of the search box where close buttons usually are.
After the elfinder init, I do this:
$('.elfinder-toolbar').prepend('<a class="elfclose"><div class="elfclose-bg">×</div></a>');
The Css:
.elfclose {
font-size: 20px;
font-weight: bold;
line-height: 18px;
color: #000000;
text-shadow: 0 1px 0 #ffffff;
text-decoration: none;
float: right;
}
$().prepend should put the elfclose div as the first element under the toolbar, but the search box is always first.
I believe it's caused by Elfinder prepending after me... Is there a way I can say do this after the other div exists?
Just FYI, I did figure this one out...
The search box is added by Jquery after init, so you have to put a delay after the prepend. I tried checking for the existence of the search div (which would be better), but it turned out to be too much work. No one's going to notice a .2 second delay. To paraphrase Larry Wall, your code is correct if it gets the job done before your boss fires you.
I'm in Angular, hence the $compile directive:
var close = $compile('<a class="elfclose" ng-click="closeFileBrowser()">
<div class="elfclose-bg">×</div></a>')($scope);
$timeout(function(){$('.elfinder-toolbar').prepend(close);}, 200);
Related
I'm using Javascript to style a <span> tag (that is already styled in CSS to be cyan) to turn green when it is clicked, and then right back to cyan. In the CSS, its transition-duration property is set to 100ms. I don't want Javascript to set the color back to cyan before it's finished changing to green, so naturally, I use a setTimeout() to delay it the amount of time that the transition will take (100ms), as you can see in the code below, and I improved it a little after looking at other questions regarding this, but they still didn't seem to be the most efficient.
Code:
// Script is here and not in src in order to make it easier for you to copy and test run my code.
document.getElementById("text").addEventListener("click", function() {
document.getElementById("text").style.color = "Green";
setTimeout(function() {document.getElementById("text").style.color = "Cyan";}, 100); // Timeout time same as transition-duration.
});
#info-display{
user-select: none;
text-align: center;
font: small-caps bold 1.6vw 'Courier New', Courier, monospace;
}
#text {
color: Cyan;
background-color: Black;
padding: 0.1vw 1vw 0.1vw;
border-radius: 25% 25% 15% 15%;
transition-duration: 100ms;
}
<h1 id="info-display"><span id="text">~ Words to Click. ~</span></h1>
I need to know if there is a better way than this; some way that Javascript can detect when a CSS transition has finished, so that the tedious work of changing the transition time in two places does not have to happen.
If anybody can help me find a way, it would be fantastic! 😃
Thanks!
P.S. Please don't bother asking, "Why an <h1> tag?" or anything like that, it's just what I'm using in the full program that this is for.
Yes, there is. Take a look at the following EventListener:
elem.addEventListener('transitionend', function(){
//Do something
});
I am using the dropzone.js plugin for a project. I'm wondering if there is a way to stop the click event (where you can select a file) but keep the drag and drop function.
The drag and drop are on our entire page and the click is getting annoying when you are just selecting text.
I have tried
$('.dropzone')[0].removeEventListener('click', myDropzone.listeners[1].events.click);
and
$(".dz-hidden-input").prop("disabled",true);
but these disable the drag and drop which I still need to work. Any ideas?
You can set the clickable option to false when initializing the Dropzone. According to the DOCS
If true, the dropzone element itself will be clickable, if false
nothing will be clickable.
You can also pass an HTML element, a CSS selector (for multiple
elements) or an array of those. In that case, all of those elements
will trigger an upload when clicked.
See demo below
// Dropzone class:
$("div#myDZ").dropzone({
url: "/file/post",
clickable: false
});
#myDZ {
padding: 10px;
width: 100%;
height: 100vh;
border: 2px inset #c8c8c8;
font-family: Calibri;
font-size: 14px;
font-weight: bold;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.js"></script>
<div id="myDZ">
Drag / Drop your files here . Click is <kbd>DISABLED</kbd> and wont work
</div>
Hi guys so i am getting back search results using javascript and i am struggling to make a Red cross appear on the right hand side.
So when the user searchs through my db and the result appears i would like an X to appear to the right of it.So example :
Search result 1 X
I have made the X in CSS:
#markx {
color: Red;
font-family: 'Helvetica', 'Arial', sans-serif;
font-size: 2em;
font-weight: bold;
text-align: center;
width: 40px;
height: 40px;
border-radius: 5px;
}
My code:
$(".result li").click(function(){
var text= $(this).text();
$('.selectedStuff').append('<li>' + text +' (selected)<span id="markx">×</span></li>');
});
For some reason those its no appearing like i want it to in javascript. In css its fine, but obviously i want the X to appear alongside every search request that i make so later on the user can cancel that request.
In my opinion, you are overthinking this by using JS to get your dynamic X. You can achieve this in a much lighter way with CSS specificity and pseudo-selectors.
Use this:
.selectedStuff > div{
width:300px;
}
.selectedStuff > div:after{
content:" x ";
font-family: Arial;
color: red;
position:relative;
float:right;
right:-20px;
}
In the same fashion I added the width to the .selectedStuff class through the CSS, you can do that for all the other properties as well instead of hardcoding them inside the jQuery. This makes your code more maintainable.
The X is a simple letter X but if you want something better looking, use the fontAwesome library and add it as an web font icon.
Here is a DEMO
P.S. I noticed in your JS you meant to produce a series of LIs but the code rendered DIVs instead when I ran it in CODEPEN. If yours produces LIs, just replace the > div my CSS above for > li
I have four different buttons on a page, each sitting under product description that relates to that button. These buttons are for the users to click their favorite product. When they click one button, it would be preferred for the other three buttons to be given an overlay, or other visual that makes it look like they were disabled from being chosen. Is there a simple way of doing this?? Maybe with CSS or javascript?
I am new to Javascript and would appreciate any help!! Thanks!
Edited 12/18/14:
My apologies, let me add some code.
HTML:
<div id="blue-btn-grades">THIS IS MY FAVE</div>
CSS: I have media queries so CSS may be different for specific resolution but below CSS is for my 17" computer monitor.
#blue-btn-grades {
font-family: BigNoodle;
font-size: 18px;
color: #ffffff;
background-color: #3095b4;
margin-left: auto;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 40px;
border-radius: 5px;
width: 90px;
display: inline-block;
}
Please let me know if you need anything else!
Update: 2/18/14 -
In my original post, I said button but more specifically, I would prefer this overlay to be applied to the entire div. The HTML for one div is below:
<a name="grades"><div class="col-lg-3" align="center"><img src="images/golden.png" /><br /><h5>Golden with Delicate Taste</h5><h6>Usually made at the beginning of the new maple season. Pour over vanilla ice cream for a Vermont maple sundae, sometimes called the Sugarmakers’ Favorite Dessert.</h6><div id="blue-btn-grades">THIS IS MY FAVE</div><div id="teal-btn-grades">BUY ME SOME!</div></div></a>
Thanks again everyone. I need to learn javascript...
With jQuery, and no CSS...
Demo: http://jsfiddle.net/pbQGP/1/
HTML:
<button>First</button>
<button>Second</button>
<button>Third</button>
<button>Fourth</button>
JS:
$("button").on('click', function(){
$("button").not(this).attr({disabled: "disabled"})
})
Suppose I have an alert message like:
alert("Message");
When this command is executed, an alert box pops up but the message is aligned to the left of the alert box.
Is there a way to center this message inside the alert box?
Well, one thing you should know is you can't style the alert box.
it's the system object not a css thing.
if you still want to use alert and want to move your text from left to right use \t, which is a tab. You can figure out how many characters you're going to use on a line and then encase the text in \ts.
eg:
\t This text will be centered \t\n
\t in the middle of the alert \t
It's not perfect, but it's as close to what one can move text to center in alertBox.
\t works perfect with Firefox but not with Chrome. I love Chrome, but as a web developer this is a pain in the neck.
FYI: You can also create your own. For example,
jQuery UI Dialog
Have a look here : DEMO
The best thing I used these days to display message is using toast messages. They pops up, show your message in beautiful box and then pops out in sleek manner.
have a look at
MATERIALIZE CSS TOASTS
If your alert message will be static then add multiple '\t' at the starting of your message.
alert('\t Quantity should be less than Remaining Quantity! \n \t\t\t Remaining Quantity');
Here \n is use for break the message and place on next line
You should be able to edit the CSS file of the Javascript and centralize the content using Text-alight.
#popup_container {
font-family: Arial, sans-serif;
font-size: 15px;
min-width: 300px; /* Dialog will be no smaller than this */
max-width: 600px; /* Dialog will wrap after this width */
background: #FFF;
border: solid 5px #999;
**text-align:center !important;**
color: #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}