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();
}
Related
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
everyone!
I've div tag, for instance
<style>
#DistrictStyle li:hover { background-color: rgb(129,171,242);}
</style>
<div id="DistrictList" style= "display: none;
z-index: 500;
list-style-type: none;
border: 1px solid rgb(129,171,242);
background-color: white;
max-height:150px;
overflow-y:scroll; position:absolute;
left: 208px; top: 135px; "><ul id="DistrictStyle"></ul></div>
So, now on mouse click of record of this list I fill several fields. And I need to navigate by Up/Down button thru list.
<li onclick='fill_distr(" + x + ");'>" + "</li>";
How can I achieve this? Can I only use pure JS or ought to use jQuery? I guess I should catch events of mouse focus and press "enter".
Thanks in advance.
You can go both ways. JQuery allows easy event handling though. Check out the documentation for all functions.
Note: Not sure if you use HTML5, but if it's the case you shouldn't use style attributes in your html elements.. Just saying :)
Edit: Just to point you in the right direction. event.which should do for you :)
I am using jQuery UI Autocomplate plugin as it is on the first example. I also have jQuery UI Theme style sheet referenced for other plugins.
This is the input I am using with that:
CSS:
div.formvalue {
background-color: #eee;
border: 1px solid red;
padding: 10px;
margin: 0px;
}
div.paddedInput {
padding: 5px;
border: 1px solid black;
background-color: white;
}
div.paddedInput input {
border: 0px;
width: 100%;
outline:none;
}
HTML:
<div class="formvalue">
<div class="paddedInput"><input type="text" value="Padded!" /></div>
</div>
Here is my situation:
As the above div element serves as an input element (on the style perspective), the autocomplete list looks a little awkward because it sets itself for the input element.
I dug the source code which jQuery UI is creating for the autocomplete function and there is ui-autocomplete style class but as I said but I couldn't figure auto what should I override.
Any thoughts?
UPDATE:
Here is the jsfiddle sample:
http://jsfiddle.net/tugberk/YxRYe/4/
If you want to overwrite your style, you can use !important keyword as this code
div.paddedInput input {
border: 0px!important;
width: 100%;
outline:none;
}
I guess the main question here is why you would have the outer div element serve as an input element from a style perspective in the first place.
If this is not a requirement, just do this. Otherwise we'll have to use JS to set the width of the dropdown to the width of the div and adjust the position of the dropdown. A rather hacky solution i.m.o. I am not aware of a way to specify what element the dropdown should attach to since this is rarely what you want.
I've got an interesting issue with combining jQuery's mouseenter and mouseleave events with a call to append. My object is to show extra content when the mouse enters something and then remove it when the mouse leaves. It's very similar to what happens when you mouse over a tag here on StackExchange. The sequence is:
In mouseenter, create content and position it by the element under the mouse via .offset and .append.
In mouseleave, remove that content from the screen.
The element I'm operating on is an img, and I'm using jQuery 1.6.2. The problem is that .append somehow triggers mouseleave, which is quickly followed by .mouseenter, ad infinitum. It appears as a strange flickering effect on the content being added, as it's removed and re-added repeatedly. See an example here on jsFiddle. Why is this happening, and how do I resolve it?
EDIT: figured it out. D'oh. The added content was appearing under the mouse.
The reason this happens is that you're adding content where your mouse is. That new content is not part of your original element so by definition when you show the new DIV your mouse is not over the IMG any more.
One way to solve this would be to use the image as a background of a parent DIV and then append the new DIV to the parent so that the new DIV is a child of the parent.
On a side note is there a reason you chose not to use .hover()?
Here's a working jsfiddle for how I'd do this.
HTML:
<div class="papa">
<div class='myDiv'>
<div id='divHover'>Hello World</div>
</div>
</div>
Javascript/Jquery:
$(document).ready(function() {
$(".papa").hover(
function () {
$(".myDiv").show();
},
function () {
$(".myDiv").hide();
}
);
});
CSS:
.papa {
background-image:url('http://dummyimage.com/100x100/000/fff');
height: 100px;
width: 100px;
}
.myDiv {
display: none;
height: 30px;
border: 1px solid black;
}
#divHover {
width:100px;
height:20px;
background-color:white;
border:1px solid black;
position: relative;
top: 10px;
left: 10px;
}
I'm essentially trying to create a div which is an image of a button, and when the user clicks it a function is executed. For some reason the div is not showing up at all! What in the world am I setting wrong?
CSS:
#customizeButton
{
background-image:url('images/customizeButton.png');
position:absolute;
top:35%;
left:25%;
width:370px;
height:350px;
background-repeat:no-repeat;
-webkit-background-size:100% auto;
z-index: 150;
}
HTML:
<div id ="customizeButton"></div>
It has to be something with the CSS side. I've got almost identical code for another "button" which I use as an exit button, but it uses a text character instead of an image. It works just fine...
Here's the code for reference:
CSS:
#statSheetExitButton
{
width: 40px;
height: 40px;
position: absolute;
font-weight: bold;
top: 17%;
left: 74%;
font-size: 150%;
font-style: normal;
color: black;
z-index: 50;
}
HTML:
<div id ="statSheetExitButton">X</div>
And again, the question is why the customizeButton is not showing up.
EDIT: ANSWER The problem was that I had the html code for my initial Stat Sheet components in another html file in the same folder, and my program was only listening to that file.
Is this the correct path to your image?
background-image:url('customizeButton.png');
This would only work if the img was in the same directory as the css.
You are absolute positioning your element. Could you be positioning it on top of a relative positioned element that is causing it to be placed outside of the viewport of the browser screen. Use the inspector tools in Chrome, Firefox or Safari to find out where the div is. That'll get you on the right track.
I think your div is empty so that,s why div is not showing, try to write some text or some thing else in div
My thoughts:
display: block; missing
you don't need background-repeat(nor -webkit-background-size), because you are giving it a height & width
if you are only positioning this container, you do not need z-index
Make sure your button is inside a positioned element, which isn't itself hidden.