I've got a drop down div on focus of a <input type='text'> box as follows
http://jsfiddle.net/Newtt/7ffdF/
I need the dropdown box to appear above the container-box div that follows the search box. Currently it's pushing the div downwards. Is there a way I can make this text box behave like a select tag without having to use the select tag.
My CSS for the dropdown div is
display:none;z-index:200;
On focus of the search box, the div appears using:
$('#text-box').focus(function(){
$('.dropdown').show();
});
I also need the div to disappear on removing focus.
Summarizing, I've got two questions:
Regarding the positioning of the drop box
Toggling of the dropdown on and off focus of the search box.
Thanks!
You can use position:absolute; for the dropdown. And also use Jquery event blur on text field to hide it
JS FIDDLE DEMO
JS
$(document).ready(function(){
$('#text-box').focus(function(){
$('.dropdown').show();
});
$('#text-box').blur(function(){
$('.dropdown').hide();
});
});
CSS
.container-box {
height:400px;
width:400px;
background: #ccc;
}
.dropdown{
display:none;
position:absolute;
z-index:200;
}
.dropdown ul {
padding :0;
background : #ddffaa;
}
Styling the drop-down is in your hands :)
You can use position: absolute; to stop the dropdown from being in document flow, so it doesn't interrupt other elements.
You can also use .blur() for what to do when there's no focus.
http://jsfiddle.net/7ffdF/12/
CSS:
.dropdown {
display: none;
z-index: 200;
position: absolute;
background-color: #eee;
width: 400px;
}
And jQuery:
$('#text-box').blur(function() {
$('.dropdown').hide();
});
Set the div position to absolute....
div.dropdown{
width:170px;
border:1px solid #ccc;
position:absolute;
background-color:#fff;
}
I set up a good example for you on this JS Fiddler
Related
i have a input tag that can search skills. when i type, the option bar will be under the profile card.
i want to make my select option on top of the profile card. [](https://i.stack.imgur.com/3E724.png)
here is my css code for select option box:
`
.hover {
list-style-type: none;
padding: 0;
margin: 0;
height: 400px;
width:300px;
overflow: auto;
position: absolute;
display:block;
}
`
im trying to make my select option box on top of the profile card
Use z-index
The z-index prioritizes the stacking of elements.
Give the select option a higher z-index than the card element.
You have to add css property z-index to the expended box.
eg. z-index: 12;
I want to make a textbox with a scrolling effect on hover, but only if the text is longer than the textbox. So here is my try: https://jsfiddle.net/SynapticError/wqh4ts3n/35/
If the text is longer than the textbox, the text should 'scroll' on hover.
If the text is shorter than the textbox, it should do nothing.
In pseudo code it would be like this:
IF scrollcontent.width > navbes.width
{ add css <style type="text/css">navbes:hover .scrollcontent {left: -100px; transition-duration:3s;}</style> }
I don't know how to make it right. I've tried many different ways, but none works. Can anybody help me please?
Just change your overflow "hidden" to "auto" :
navbes {background-color:#5A412E; display:block; width: 180px; height: 50px;
overflow: auto;
position: relative; padding:0px;}
I am trying to align pop-up elements in a header element in a table. Eventually the pop-up elements will provide functionality like sorting and filtering for my table.
Per default the pop ups align themselves to the left, but I would like to align them to the right :
My CSS code looks like something like this :
.Table .Popup {
position:absolute;
z-index:9999;
}
I would like to use the relative position instead of absolute (ie.relative to the header item), but I am not sure how. If I use absolute, doesn't that interfere with any other parent containers that have position set to absolute?
JSFiddle : http://jsfiddle.net/XJXuR/9/
Does anyone know how this can be done? JQuery or Javascript is fine. Thx.
Just add this CSS code:
tr.TableHeaderLabels td {
position: relative;
}
.Table .Popup {
right: 0;
}
I tried it on your jsFiddle and it works as expected :)
EDIT: Forked the original jsFiddle with my code: http://jsfiddle.net/p3khu/1/
Is this what you're looking for? http://jsfiddle.net/Vf2Td/
.Table .TableHeader td{
border:1px solid red;
margin:0;
padding:0;
position: relative;
}
.Table .Popup {
position:absolute;
z-index:9999;
right: 0px;
}
Give the parent div the position relative. Then the popup which is a child needs a right: 0px; so that it hugs the right of the parent container.
Assuming that you are have relative position on the cells containing two, three, four, etc... you can just add right: 0; to your css above and that should right align them.
I have a div which I create dynamically. I also switch the div's visibility using display:none and display:block. I want to create a close icon for that div using plain Javascript and CSS. Is that possible?
I have tried using an simple X icon for changing the visibility.
Here is my CSS:
.dhSeriesToolbar {
max-height: 200px;
width:400px;
background-color: black;
z-index:999;
display:none;
overflow:auto;
border: 2px solid #33ccff;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
position:absolute;
}
It would be better to see your code to help you better. But the idea is the following: add an icon (<img>) in your <div> element, and bind a Javascript call to the onclick event that will hide (or remove, regarding your needs) the <div>.
yes possible...do like this
// javascript part
myfunction(){
document.getElementById("divShowHide").setAttribute("style", "display:none;");
}
// html part
<img src="icon.png" onclick="myFunction()"/>
you could also play with visibility:hidden
You can create a close icon too dynamically along with that div e-g
$("body").append("<div class='dynamically_created_div'><a href='javascript:void(0);' onclick='closeDiv()'></a></div>");
function closeDiv() {
$(".dynamically_created_div").hide();
}
I have a page that scrolls sideways and I have a floating menu. I want the text in the menu to invert the color that is under it. Is there a way to do that with HTML5, Javascript, and/or jQuery?
Added: How would you invert an image when it goes over different parts of the page? CSS?
This is the bit of CSS I use for the menu
body{
background:#000;
font-family:Georgia;
font-size: 34px;
font-style: italic;
letter-spacing:-1px;
width:12000px;
position:absolute;
top:0px;
left:0px;
bottom:0px;
}
ul#banner{
position: fixed;
line-height: 45px;
margin: 0 30px; padding: 0;
}
step1. Get the position of your menu
step2. Remove your menu and get an element that is placed on the position
maybe you can use document.elementFromPoint
step3. Invert the element's color and apply it on your menu
step4. Show your menu again
step5. Repeat it whenever you need to change menu's color(scroll, etc.)
Try to use:
var color = // color in hex.
color ^ 0xFFFFFF (XOR bit operator) to get it?
I wrote a test page.
demo here.
inside body can't write width, or will make the page appears the scroll bar.
including the following knowledge point:
css cover:
.nav .selected .nav-01{background:#f93;}
.nav .selected .nav-02{background:#3c3;}
.nav .selected .nav-03{background:#36c;}
jquery plugin:
(function($){
$.fn.extend({
first: function(){ },
second: function(){}
});
}(jQuery));
jquery call
$(document).ready(function(){
$('#content').scrollPage({
pTag : '.list',
menu : '.nav',
speed : 600
});
})