I have a HTML div that whose visibility i have set to hidden like this ..
<div id="checkinuserform" style=" margin:20px; visibility:hidden;">
</div>
Now at specific point i want to show this div ..For this i have added following code in jquery ...
var content = $("#checkinuserform").clone().show();
BUT , I am not able to see the DIV .Also ,adding clone function is mandatory for me in this case..
Please help me ..
Thanks..
When you clone an element, you get a duplicate of it in a variable. It won't be visible until you put it somewhere in the page.
Additionally, show() doesn't affect visibility. Either change the default style to display: none or replace show() with .css({visibility: "visible"})
replace
visibility:none
with
display:none;
You can try this.
var content = $("#checkinuserform").clone().css('visibility','visible');
Fiddle is here. http://jsfiddle.net/2f7yctmn/
I think you can user css to make it visible instead of clone, try this line of code
var content = $("#checkinuserform").css('visibility','visible');
but if clone function is mandatory for you, you can write this code
var content = $("#checkinuserform").clone();
content.css('visibility','visible');
I think this could help
Related
I have created a button dynamically in JavaScript and i am deleting the same when user clicks X symbol on it..
I am setting style.display=none to achieve this but the problem is in HTML there is space in it even after deleting the button. How can i delete the button without any space in HTML.
var x = document.getElementById(id);
x.style.display='none';
First of all, if you Google remove HTML element in javascript the first thing you see is this: How to remove an HTML element using Javascript?
and it works, but I'll pitch in my 2 cents anyways since that one uses parentElement, which is kinda outdated.
There's a .remove() method in javascript that lets you remove an html element.
It's as simple as:
var x = document.querySelector("#id");
x.remove();
but I doubt that will solve your issue, you might want to remove the parent element if it has a margin or padding like so:
var x = document.querySelector("#id");
x.parentElement.remove();
cheers
try it if u want to change the css
<script type="text/javascript">
$("#id").css('display', 'none');
</script>
or use it for add or remove the class. change the add to remove if want remove the class
<script type="text/javascript">
document.getElementById("submit").classList.add('disabled');
</script>
I have designed a pop up style window, which has a title bar & content section. Inside, the content section I have put a button too. I am trying to change the background color of title bar. I have made two classes (title_bar & title_bar_hover) which contain background: linear-gradient(); property only.
As per the solution given in this stackoverflow thread I have wrote the following jquery. I have added jquery-ui plugin as well.
$('#start').on('hover',function(){
var target = $('.title_bar');
target.addClass(".title_bar_hover");
},5);
But this code is unable to perform anything. However, here is the sample jsfiddle.
So please suggest some way(s) to achieve this functionality.
Thank you so much!
You need to:
1) Include jQuery in your jsFiddle demo
2) Use .hover() instead of .on('hover',...
3) Use .toggleClass() instead of .addClass()
4) Correct the class name as title_bar_hover in your CSS
$('#start').hover(function () {
var target = $('.title_bar');
target.toggleClass("title_bar_hover");
});
Updated Fiddle
you can do this way:
$('#start').on('mouseover',function(){
var target = $('.title_bar');
target.toggleClass("title_bar_hover");
});
$('#start').on('mouseout',function(){
var target = $('.title_bar');
target.toggleClass("title_bar_hover");
});
FIDDLE EXAMPLE
With this you can toggle the class easily on hover.
$('.title_bar').hover(function(){
$('.title_bar').toggleClass('title_bar_hover');
}, function(){
$('.title_bar').toggleClass('title_bar_hover');
});
Hope its useful to you :)
JSBIN demo
window.onload = function() {
try{
document.getElementById('result').focus();
}catch(err){
}
}
In my form div result id load when form submits and when it show i want to focus on it.
the above code is not working in my case.
Please help me to find problem with this code.
jsfiddle
According to your jsFiddle, #result is a div. You can't really focus on a div the way you can with a form element or link, but you can jump to that part of the page using the following javascript instead:
window.location.hash = '#result';
You can not focus to a div element. But you can use
window.location.hash = '#result';
to scroll to div#result element
Here's a working jsFiddle.
1. Give the div a tab index of 0 (meaning it is ordered first):
<div class="result" tabindex="0" id="result">
(Find out more about the tabindex property here.)
2. Remove your <script> tags:
window.onload = function() {
try{
document.getElementById('result').focus();
}catch(err){
}
}
3. Use no wrap in <head> instead of onload.
You are trying to focus on a div, which by default can not be put to focus using script. To do that you need to set the tabindex attribute of the result div. You need to add the attribute tabindex and set its value to 0 and then your function document.getElementById().focus() will work
Also in your fiddle is not allowed inside javascript block. Try this fiddle
Is there a way to create an element and have it hidden initially? I am creating an iframe but don't want it shown right away.
Very simple. Just do this:
var myFrame = $("<iframe>").hide();
var my_iframe = $('<iframe name="your_iframe" src="your_source"></iframe>');
now my_iframe holds your jQuery created iframe. Modify it, do what you wish and then put it in the dom.
It wont be visible until you insert it into the dom.
Just create it and style it as being hidden, in one of many possible ways, like this:
var secretThing = $('<iframe></iframe>', { css: { 'display': 'none' }});
$('body').append(secretThing);
Another way to make something hidden is to position it far off the viewport, or to put it behind something else, or to set some dimension to zero. It depends on the rest of your design. Personally, I'd be inclined to give the element a class value that makes it hidden.
(#gilly3 wisely notes that the handy jQuery "hide" function might be a simple way to do this.)
var theElement = <create the iframe here>;
theElement.hide();
// append theElement here
Like this:
var FName = $("<iframe>").hide();
I have a really simple external css stylesheet that has the following :
div.hideBox {
display:none;
}
So when the html page loads, the div with that class attribute 'hideBox' will not show on the page, which is what I want. But I the box to show/appear when a user clicks on a button on that same page. I tried to use the onclick event to do this, but the div won't show.
So for example, the code would be :
<script language="javascript">
function showmydiv() {
document.getElementById('mybox').style.display = "";
}
</script>
</head>
<body>
<div id="mybox" class="hideBox">
some output of text
</div>
<input type="button" name="ShowBox" value="Show Box" onclick="showmydiv()">
What's strange is that a setup similar to this works when I use visibility:hidden; position:absolute; and I can use a JavaScript function to show the <div>.
What am I doing wrong here?
Because setting the div's display style property to "" doesn't change anything in the CSS rule itself. That basically just creates an "empty," inline CSS rule, which has no effect beyond clearing the same property on that element.
You need to set it to something that has a value:
document.getElementById('mybox').style.display = "block";
What you're doing would work if you were replacing an inline style on the div, like this:
<div id="myBox" style="display: none;"></div>
document.getElementById('mybox').style.display = "";
document.getElementById('mybox').style.display = "block";
try setting the display to block in your javascript instead of a blank value.
I can see that you want to write you own short javascript for this, but have you considered to use Frameworks for HTML manipulation instead? jQuery is my prefered tool for such a task, eventhough its an overkill for your current question as it has SO many extra functionalities.
Have a look at jQuery here