i try to make search bar, but i had problem
screenshot
i trying move it here
screenshot
here the code:
/============
https://drive.google.com/drive/folders/1Yslk-bnMuM-2mW-axIoH4pCMlzzLv9SP?usp=share_link
make the position: relative
.searchb {
position: relative;
}enter code here
Related
I'm in the process of making my first app, a Library type of app through Cordova but for some reason my search's returned results are not scrollable. Can you please tell me what I am doing wrong? To see the issue just click on the menu option, then click on search, then search up a keyword like "light" and you will see that the results are not scrollable. Here is the jsfiddle link -->https://jsfiddle.net/oiver55/5m6sapry/1/<--.
Give the search engine sometime to return the results (still trying to figure out why and how to cut down on the search time)
Thank you for your help
because your search result div is in a fixed position there is no height limit.
you have to set the height.
maybe you should try using flexbox
.results-wrapper {
background-color: burlywood;
width: 250px;
overflow: scroll;
height: 500px;
}
I am building a collaborative coding environment which has multiple user cursors. I need to show user's nick when other user hover on their cursor in a tooltip (like google docs does). I've tried every way I could think of injecting DOM into the class that I give to the cursor, but tooltips just don't show up.
How can I show a tooltip on the cursor (caret) when a user hovers on it?
I know this is late but it might help someone in the future.
I had the same issue in Ace where I firstly couldn't get any tooltip showing, and secondly couldn't get it to show on hover.
Hover
Marker nodes have pointer-events: none in Ace, so hover is essentially disabled and needs to be re-enabled.
Add pointer-events: auto to the marker/caret.
I.e:
.ace-multi-cursor {
pointer-events: auto;
}
Ref: https://github.com/ajaxorg/ace/issues/2720
Title/Tooltip
I was using ace-collab-ext. So to add the username above the caret I edited AceCursorMarker.js by adding <span class="ace-multi-cursor-username" style="background-color: ${this._color}; top: -8px; position: relative;">${this._title}</span> and recompiling ace-collab-ext.min.js. Below is where I added the title span:
// Caret Top
html.push(
'<div class="ace-multi-cursor ace_start" style="',
`height: ${5}px;`,
`width: ${6}px;`,
`top: ${top - 2}px;`,
`left: ${left + 4}px;`,
`background-color: ${this._color};`,
`"><span class="ace-multi-cursor-username" style="background-color: ${this._color}; top: -8px; position: relative;">${this._title}</span></div>`
);
There may be an easier way to do this that suits you, but this way worked for me especially with keeping the background-color permanent, as the attempts I made through js/css didn't persist after initialisation (cursorManager.addCursor).
CSS
This is the total css I added to my solution:
.ace-multi-cursor {
position: absolute;
pointer-events: auto;
}
.ace-multi-cursor:hover > .ace-multi-cursor-username {
opacity: 1;
}
.ace-multi-cursor-username {
opacity: 0;
pointer-events: auto;
}
My solution ended up looking and functioning exactly like the Google Docs marker, caret and tooltip.
Unfortunately it's not trivial to do. And requires more code than i can add to this answer. But there are several implementations available on github e.g https://github.com/sharelatex/web-sharelatex/blob/a91ec74d1256ad063cd37693aab620b6f1a6ce0d/public/coffee/ide/editor/directives/aceEditor/highlights/HighlightsManager.coffee#L102 which you can test on https://www.sharelatex.com/
I am using datatables to make a simple grid and it comes with a search button which can be used to filter specfic search query. At the moment i have the search bar toggoling by click search button. i am trying to move the search bar over the header as displayed in the picture below. This is the JSFIDDLE
I tried messing around with its classs id by changing the padding , position but no luck
.ui-input-text.ui-body-inherit.ui-corner-all.ui-shadow-inset{
//Tried everything i could nothing worked here lol
}
Please advice. I also apologize if this is a bad question.
Add this style:
#example_filter {
margin: 9px 0 0 -118px;
position: fixed;
z-index: 9999999;
left: 50%;
top: 0;
}
Fiddle
I have a more stable / portable solution - simply move the filter input box around in the DOM :
add this to your initialization :
..
$('.dataTables_filter input').attr("placeholder", "enter seach terms here");
$('.dataTables_filter').css('float','none');
$('.dataTables_filter').css('padding-right','0px');
$("#example_filter").detach().prependTo('#header');
The above resets the default settings for the dataTables_filter so it can be centered in the #header. Remember to ad id="header" to your header, seems you have forgot that. Change the search toggle as well :
$('#search').click(function(e) {
$('#example_filter').toggle();
$('h1').toggle();
if ($('#example_filter').is(':visible')) {
$('.dataTables_filter').css("display", "inline-block");
}
});
see forked fiddle -> http://jsfiddle.net/ynKed/
I'm trying to fix #fixed_header_bottom div right under #fixed_header_top div after scrolling 100px down but failed to do so. #fixed_header_middle div obviously will appear and disappear when scrolling up and down and only #fixed_header_top, #fixed_header_bottom and #body_block will be visible when (for example scrolling down come to an end).
JSFIDDLE is here
In the second image, #fixed_header_middle disappeared completely but will start appearing when scrolling up.
Thanks
First, you need to set a top style for your headers so they are in the correct position, you should think about a more robust way to do this.
Another way to consider doing this is to make a hidden clone of your bottom header.
Then, simply hide/show it when the scroll position is correct. This method avoids any funny business with the scroll bar changing size and/or position as the element is taken in and out of the scrollable portion of the page (because the original is still there):
JSFiddle Demo
An even better way is to simply make a placeholder that you show/hide as the bottom header is fixed/un-fixed:
<div id="fixed_header_top">fixed_header_top</div>
<div id="fixed_header_middle">fixed_header_middle</div>
<div id="fixed_header_bottom">fixed_header_bottom</div>
<div id="fixed_placeholder">Shouldn't ever see me</div>
JS:
$(document).ready(function () {
$(window).bind("scroll", function (e) {
if(!$('#fixed_header_bottom').hasClass('fixed')) {
if ($(document).scrollTop() >= 100) {
$('#fixed_placeholder').show();
$('#fixed_header_bottom').addClass('fixed');
}
} else {
if ($(document).scrollTop() < 100) {
$('#fixed_placeholder').hide();
$('#fixed_header_bottom').removeClass('fixed');
}
}
});
});
CSS:
#fixed_header_bottom, #fixed_placeholder {
display: block;
width: 100%;
height: 50px;
background-color: #11DD55;
}
#fixed_placeholder {
display: none;
}
.fixed {
position: fixed;
top: 50px;
}
JSFiddle Demo
This code works as it should.
Your problem is that you didn't set any top property, so it stays on its original top position.
Same Fiddle with jQuery 1.8.3 (as 1.10 don't handle scrollTop() method for IE) ;): http://jsfiddle.net/h8H6N/4/
I added top: 0; to the header top, and top: 50px; to bottom header, assuming that's the render you're looking for.
I currently have a div layer that includes some javascript (to display a button). I'm trying to position it on my webpage relative to the right hand side of the screen - how can I do this? I currently have something like this:
<div id="LiveChat_1308239999" style="
top:500;
right:500;
position: absolute;
"><script type="text/javascript">
var __lc_buttons = __lc_buttons || [];
__lc_buttons.push({
elementId: 'LiveChat_1308239999',
language: 'en',
skill: '0'
});
(btw I do close the script and div, it just won't show up here)
But it is still just displaying in the top left corner of my screen.
You need to use a unit when specifying position values:
top: 500px;
right: 500px;
Also, specifying a right value of 500 will put it 500px to the left of the right hand side - is that what you wanted?
You are missing units, the browser doesn't know if 500 is 500px, 500em or 500%:
<div id="LiveChat_1308239999" style="
top:500px;
right:500px;
position: absolute;
">`