Moving div on top of header - javascript

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/

Related

A HREF Link does not work for constantly changing inner span

Take a look at this JSFiddle:
https://jsfiddle.net/8wbxc2a3/1/
Basically I am applying a rainbow effect to some text.
I also want to be able to link this text to another webpage.
However, clicking on the link does not work.
The JSFiddle does an alert to demonstrate my point.
If we increase the animateInterval from 125 to say 500, it will begin working again. What is the issue here exactly and how can we fix it so linking works all the time?
By changing the z-index on the .test element, it will work
a {
position: relative;
z-index: 1; /* Edge/IE wanted this too for it to work */
}
.test {
position: relative;
z-index: -1;
}
Updated fiddle

Changing position of Google Places Autocomplete result box

On a page I'm working on, the results of the Google Places Autocomplete is showing up 70px below where it should, leaving a gap between the search box and the beginning of the results container.
The height of the gap happens to be the exact height of Chrome's autofill feature, so I'm suspicious that the Autocomplete library is for some reason taking that height into account when calculating the position, even though I've managed to disable that feature on my search box.
I'm able to fix the problem by overriding the value of the top attribute of the .pac-container class (replacing the value of 1234px which the API has calculated with 1164px), but I would rather have a way to do this dynamically or just based on an offset than have to hard-code that number.
Is there a way, with CSS or JavaScript/jQuery, to move the Autocomplete results container up by a certain amount?
A list of the CSS classes involved in the Autocomplete box can be found in Google's documentation.
I have tried many approaches and the best thing so far that worked for me is the good old (negative) margin.
I wanted the resulting menu to be shown on top and I did this:
<style type="text/css">
.pac-container{
margin-top: -210px;
}
</style>
Yes, you can style the Autocomplete
https://google-developers.appspot.com/maps/documentation/javascript/places-autocomplete#style_autocomplete
However, lets look at WHY the "gap" is happening.
Double check your HTML and BODY tags, see if they have margin/padding added to them
So, the way Autocomplete detects it's position is by calculating the X/Y from the top/left of the BODY tag. I had this same problem (autocomplete had a big gap between the result box and the field), I discovered that my CMS system was adding a 30px margin to the BODY tag for the admin bar, this pushed the Autocomplete box down by 30 pixals... (the real problem)
html, body{margin:0 0 0 0;}
and the autocomplete vertical position was proper and the gap was gone without any odd JS scripting...
The below snippet worked for me.
In this initially, it will remove the previous pac-container div anywhere in the DOM. Later on, It tries to find the pac-container div element inside autocomplete object and it will place pac-container the div element inside another div in this case it is "book-billing-address"
$(".pac-container").remove();
autocomplete = new google.maps.places.Autocomplete(input);
if(id_val == 'payment-address'){
setTimeout(function(){
if(autocomplete.gm_accessors_ != undefined){
var container_val = autocomplete.gm_accessors_.place.qe.gm_accessors_.input.qe.H
autocomplete.gm_accessors_.place.qe.gm_accessors_.input.qe.H.remove();
$('#book-billing-address').append(container_val);
}
}, 100);
}
and applied the following CSS, when div element moved inside book-billing-address div.
#book-billing-address .pac-container{
position: absolute !important;
left: 0px !important;
top: 36px !important;
}
please check parent element of searchbox, if parent element has margin-top, then convert it into padding-top
example code
`
.parent_element {
/* margin-top: 70px; */
padding-top: 70px;
}
</style>
<div class="parent_element">
<input type="text" class="autocomplete">
</div>`
I hope will work for you :)
It's perfectly work for me , no issue with position bug when scroll
function initAutocomplete() {
//....codes...
//....add this code just before close function...
setTimeout(function(){
$(".pac-container").prependTo("#mapMoveHere");
}, 300);
}
https://codepen.io/gmkhussain/pen/qPpryg
Add css on body tag with position: relative
It worked.

Show tooltip on hovering cursors in ace

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/

jQuery: How to animate two elements without them bumping each other

I'm trying to get a 100% width table to "slide over" to reveal a "panel" behind it.
Here is a jsFiddle with an example of where I'm at and the "bumping" that happens: http://jsfiddle.net/z93se/2/ (using jQuery UI)
Click on a table row to see the transition happen. During the animation, the table "pops under" the new expanded panel. Then after the animate it goes back to the left where it belongs.
How do I get them to both slide at the same time and keep their positions?
PS - I'm okay with the moving which elements have the padding and floating as long as the end result works.
Update:
Two other requirements that I have: 1) The table needs to be 100% width before the animation. 2) The panel on the side that is "sliding out" needs to be fixed width.
Update 2:
New jsFiddle that shows the width of the table using a border (so it's easier to play with). http://jsfiddle.net/z93se/14/
Which brings up a second problem. You have to click the row twice for it to begin acting like I expect it to. It's default state is with the table expanded and the panel hidden. After clicking a row twice, it starts working closer to how I expect (except it still has the problems in the original question). Help on this would also be appreciated.
Finally got it working. Had to use the animate() function and pass in a callback to hide the div when it is done.
See this jsFiddle: http://jsfiddle.net/744BL/
Notes: Using IDs as selectors caused some problems that switching over to classes didn't.
This css would do
html, add container with id task-details-container to task-details
CSS
#task-list table {
width: 75%;
}
.details-active {
padding-right: 0px;
}
#task-details-container {
width: 25%;
float: right;
}
#task-details {
width: 100%;
padding: 0;
display:none;
}
I hope this is what you wanted, please see the css i have changed
**Updated

Jquery Easy Slider on Open cart v.1.5.1

I'm using Jquery Easy Slider on Opencart v.1.5.1
http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider
What I'm trying to do is use easy slider for the best seller section of my homepage.
I've copied all files required but I'm having problems with it.
Only 1 image shows when it slides (I think it's because of the UL width but i'm not sure how to set it)
the next and previous arrows are out of place.
Here's the url of the site: http://goo.gl/f4Xi0
span id="nextBtn", its "position" is set to "absolute", right? So its parent div should be set to "position:relative", otherwise its position will be relative to the whole document.
http://www.w3schools.com/css/css_positioning.asp
You need to put .box-product { position: relative; } and then work your way forward with the css to adjust #prevBtn and #nextBtn left values to put the arrows where you want them.
http://www.csspivot.com/p3rn7 - This is after the .box-product { position: relative; } ( note that #prevBtn is still lost but adjust those left values and it will come back.. something like 0px for that maybe and something like 600px for #nextBtn )

Categories