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
Related
I'm a beginner on Shiny, and I'd like to modify the text size, but it doesn't really work :
h1(strong("TITLE"), align="center", style = "font-family: 'Times', serif;
font-weight: 500; font-size: 500; text-shadow: 3px 3px 3px #aaa; line-height: 1;
color: #404040;"),
Color, font-family and text-shadow is working, but not the other ones... Do you know how to change the size and the thickness of my title please ?
I think you are missing a couple of "px" inside the style arguments. It should read
h1(strong("Title"), style = "font-size:500px;")
Tha same goes for the rest styling options.
Have you tried using a function other than h1? Shiny uses the following to functions to call html5 functions:
Link to shiny documentation
Is this what you need?
My goal is run a javascript function every time the size of an expanding textarea element changes, and from other questions I found this: http://marcj.github.io/css-element-queries/
I downloaded it and put the css-element-queries folder on the server, and included it in the header:
<script src="css-element-queries/src/ResizeSensor.js"></script>
<script src="css-element-queries/src/ElementQueries.js"></script>
Then in a javascript file that I'm using below, I have
ResizeSensor(document.getElementById('the_id'), function(){
console.log("resized");
the_function();
});
But it doesn't do anything and gives an error:
Uncaught TypeError: Cannot read property 'length' of null
at forEachElement (ResizeSensor.js:46)
at ResizeSensor (ResizeSensor.js:201)
I'm not sure if ElementQueries are the correct solution for your issue.
Element Queries are used to apply specific CSS, if an element has reached a specific size.
E.g. the following is your HTML:
<div class="widget-name">
<h2>Element responsiveness FTW!</h2>
</div>
and your define a CSS rule like that:
.widget-name h2 {
font-size: 12px;
}
.widget-name[min-width~="400px"] h2 {
font-size: 18px;
}
.widget-name[min-width~="600px"] h2 {
padding: 55px;
text-align: center;
font-size: 24px;
}
.widget-name[min-width~="700px"] h2 {
font-size: 34px;
color: red;
}
Now Element Queries do the following: If the container widget-name has the size of 700px or less the rule .widget-name[min-width~="700px"] h2 is applied. if the size of the container widget-name is 600 or less the rule .widget-name[min-width~="600px"] h2 is applied.
I hope this answer explained it a little bit.
You can use this library instead: https://github.com/sdecima/javascript-detect-element-resize
it's what the others are based on.
I had this issue when i was using sticky-sidebar plugin, finally i found the solution:
after import ResizeSensor.js you should use it like this:
import ResizeSensor from "resize-sensor";
window.ResizeSensor = ResizeSensor;
I’m having issues with multiple replacements, I am wanting to replace the three words of a company name throughout the website with the company colours, I really don’t want to go through and manually add a span for each of the three words individually although I know this would work, is there anyway of doing this with code? BTW I’m a novice at JS/JQuery, etc.
I have had a go I can get one to work but when I try to do more than one only the last one works, it seems as though the last one cancels out the others.
I am happy enough with the CSS as this can easily be changed later.
Here is my code. - http://codepen.io/TechieBloke/pen/dMmNRB
var text = $('div').text().replace(/dummy/g, "<span class=artblack>dummy</span>");
$('div').html(text);
var text = $('div').text().replace(/Ipsum/g, "<span class='artgrey'>Ipsum</span>");
$('div').html(text);
var text = $('div').text().replace(/Lorem/g, "<span class='artred'>Lorem</span>");
$('div').html(text);
And here is the accompanying CSS
.artblack {
color: orange;
font: 15px arial, sans-serif;
}
.artgrey {
color: blue;
font: 15px arial, sans-serif;
}
.artred {
color: red;
font: 15px arial, sans-serif;
}
You modify the html each time, but then go back to text to use as source for the next change; just be more consistent and use html() instead:
$('div').html().replace()
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);
I am trying to figure out, how can I create some DOM elements, for example a <div> so I can use it as a special code placeholder. (Not the default <code> tag)
For example, I use <div>'s (with some class) and any words in that <div> that are like, keywords in some programming language, they will change color automatically - depending which sort of keyword they are; string, number, function etc.
Here's an example
That page has multiple <div>'s and all keywords in them are in some special color.
How can I make that?
Well, it's fairly straight-forward - FIDDLE.
The variations on the theme are truly infinite.
CSS
.bigred {
font-size: 21px;
color: red;
}
.littlegreen {
font-size: 16px;
color: green;
}
.blueitalic {
fond-size: 18px;
color: blue;
font-style: italic;
}