I have a aspx page with some databound controls. One of them is a checkbox. If this checkbox is checked then it should show a div, else hide it. It works great when I click/unclick the box. BUT, when the page loads initially the div ALWAYS shows up until I check/uncheck the checkbox. How can I fix this so that if the databound checkbox is not checked then when the page loads the div is hidden?
<script type="text/javascript">
function hideDiv(obj) {
if (obj.checked == true) {
document.getElementById("divHome").style.display = 'block';
}
else {
document.getElementById("divHome").style.display = 'none';
}
}
</script>
<asp:CheckBox ID="cbMycb" runat="server" ClientIDMode="Static" onClick="hideDiv(this);"
Checked='<%# Bind("MyField") %>' />
<br />
<div id='divHome'>
STUFF INSIDE THE DIV
</div>
You can either run the hideDiv function when the content is loaded as Amit Joki stated.
window.onload =function(){
hideDiv(document.getElementById('cbMycb'));
But, this solution might present a little issue, you might see the div flickers when the page loads if the div is visible. To solve it just make sure the div is not visible by default by adding some css style...
#divHome{
display: none;
}
Another approach would be using a conditional databinding expression to set the div's visibility...
<div id='divHome' style='<%# "display:" + ((bool)Eval("MyField") ? "block" : "none") %>'>
STUFF INSIDE THE DIV
</div>
Hope it helps
Just call your function once outside.
<script type="text/javascript">
function hideDiv(obj) {
if (obj.checked == true) {
document.getElementById("divHome").style.display = 'block';
}
else {
document.getElementById("divHome").style.display = 'none';
}
}
window.onload =function(){
hideDiv(document.getElementById('cbMycb'));
}
</script>
Related
I want to create a search form which is hidden and when we click the search icon that form appears and when user click away or scrolls the search form hides.
You have to use .onclick event in js and change display and visibility property in a function. For example:
document.getElementById("searchIcon").onclick = searchFunction
function searchFunction(){
const search = document.getElementById("searchForm");
search.style.display = "block";
search.style.visibility = "visible";
}
Of course, by default it should be hidden. But display: none is not nesseccary, depends on your website.
Try this:
Whenever you click on the image, "This is part of the div" appears in Red.
Basically, you use Javascript to set/remove the hidden Attribute every time the user clicks the <img> item. Additionally, you change the <img>'s onclick Attribute to the opposite function(show_div()==>hide_div();hide_div()==>show_div()):
//see html on where to put this
show_div=function(){//Executed when the div ISN'T shown and the user clicks on the <img> tag
document.getElementById("search_div").removeAttribute("hidden");
document.getElementById("search_icon").setAttribute("onclick","hide_div()");}
hide_div=function(){//Executed when the div ISN'T shown and the user clicks on the <img> tag
document.getElementById("search_div").setAttribute("hidden","true");
document.getElementById("search_icon").setAttribute("onclick","show_div()");}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Example Page</title>
</head>
<body>
<img height="32" width="32" src="https://cdn-icons-png.flaticon.com/512/3917/3917754.png" onclick="show_div()" id="search_icon">
<div id="search_div" hidden="true">
<font size=7 color="Red">This is part of the div</font>
</div>
<script type="text/javascript">//put the Javascript part here when copy-pasting this code
</script>
</body>
</html>
You might want to take a look at the "hidden" attribute and the "click" event.
i am using addEventListener to get if any click is happened you can use any section of the on the place of document to make it work for that particular section. i.e: header
and then i am using classList.toggle to add and remove a particular class from the search input box.
you can add CSS as per your need.
var searchbox=document.querySelector("#search-bar");
var searchIcon=document.querySelector(".search-icon");
document.addEventListener("click",searchBar);
function searchBar(){
searchbox.classList.toggle("search-bar");
}
.search-bar{
display:none;
}
<div>
<input class="search-bar" id="search-bar" type="text" placeholder="search...">
<i class="search-icon">🔍 </i></div>
This jquery function worked for me
'
$(document).ready(function(){
$(window).scroll(function(){
$("#search").fadeOut();
});
$("body").click(function(){
$("#search").fadeOut();
});
$("#btn").click(function(event){
event.stopPropagation();
$("#search").fadeToggle();
});
}); '
with this function when user scrolls the page the search bar will hide
below is a javascript version
document.addEventListener("DOMContentLoaded", function() {
window.addEventListener("scroll", function() {
document.getElementById("search").style.display = "none";
});
document.body.addEventListener("click", function() {
document.getElementById("search").style.display = "none";
});
document.getElementById("btn").addEventListener("click", function(event) {
event.stopPropagation();
var search = document.getElementById("search");
if (search.style.display === "none") {
search.style.display = "block";
} else {
search.style.display = "none";
}
});
});
I have a function to close a modal:
function closeModal(name) {
$(name).modal('hide');
}
But, my page also has an update panel and I need to trigger it.
I tried __doPostBack('UpdatePanel1', '') with no luck.
Thanks
The problem is this:
$(document).ready(function () {
createAutoClosingAlert('.success_alert', 6000);
if(<%# IsAPostBack() %>){
if(window.parent != null){
window.parent.closeEditModal();
window.parent.closeCalendarModal();
window.parent.closeModal('#projectModal');
window.parent.closeModal('#scheduleModal');
}
}
});
I call it from the parent so I cannot get the hidden ID.
One option is to put a hidden button inside your update panel
<div style="display:none">
<asp:Button ID="Button2" runat="server" Text="Button" />
</div>
Then call the following in your script
document.getElementById('<%=Button2.ClientID%>').click();
The button click will cause a postback.
You can also look at Page.GetPostBackEventReference
I'm having trouble hiding the text on a radio button. Here's asp for the radios...
<asp:RadioButton ID="rdViewPrint" Text="View/Print" runat="server" OnClick="javascript:disableFields();" GroupName="viewSend" Checked="True" style="margin-left:10px;" />
<asp:RadioButton ID="rdEmail" Text="Email" runat="server" OnClick="javascript:emailFields();" GroupName="viewSend" style="margin-left:10px;" />
<asp:RadioButton ID="rdFax" Text="Fax" runat="server" OnClick="javascript:faxFields();" GroupName="viewSend" style="margin-left:10px;" />
on page load, a javascript function runs the function below. The cirles of the radio buttons are hidden, but the text remains.
function noVisit() {
document.getElementById('<%=lblViewSend.ClientID%>').style.display = "none";
document.getElementById('<%=rdViewPrint.ClientID%>').style.display = "none";
document.getElementById('<%=rdEmail.ClientID%>').style.display = "none";
document.getElementById('<%=rdFax.ClientID%>').style.display = "none";
document.getElementById('<%=btnFull.ClientID%>').style.display = "none";
document.getElementById('<%=btnSummary.ClientID%>').style.display = "none";
document.getElementById('<%=btnPrivate.ClientID%>').style.display = "none";
}
Why does the text not get hidden, and how do I make it not visible?
Thanks, Dave K.
An easy fix for this would be to just put the whole thing in a panel and then hide that. Or is there a reason you could not do that?
Check out the HTML generated by ASP.NET on your page. I think you'll find that LABEL tags are emitted for the text of the radio buttons. Your Javascript is not targetting the LABEL's - you're targetting the INPUT's.
Another suggestion - toggle classes to show/hide them. Much easier to keep track of and allows you consolidate other styling goodness with CSS.
Try this code.
rdViewPrint.Visible = false;
rdEmail.Visible = false;
rdFax.Visible = false;
I have a HTML-page with a lot of different DIVs in it and I want to print out the the DIV that the user has clicked in and hide all the rest.
Can someone tell me how to do this in Javascript please?
<html>
<head>
<title>Print Demo</title>
<script type="text/javascript">
<!-- MY JAVASCRIPT FUNCITON -->
</script>
</head>
<body>
<div id="div1">
Print the page with this div
</div>
<div id="div2">
Print the page with this div
</div>
<div id="div3">
Print the page with this div
</div>
</body>
</html>
This is just to extend pimvdb's answer.
jQuery:
$("a").on("click", function(){
$("div").hide();
$(this).parent().show();
});
Or as suggested:
$("a").on("click", function(){
$("div").hide();
$(this).closest("div").show();
});
Hiding an element means setting it's style.display property to "none". Showing means setting it to "block" for a div element.
In combination with getElementsByTagName, you could accomplish this: http://jsfiddle.net/b9cgM/.
function show(elem) {
// hide all divs initially
var allDivs = document.getElementsByTagName("div");
for(var i = 0; i < allDivs.length; i++) {
allDivs[i].style.display = "none";
}
// show the appropriate div
elem.parentNode.style.display = "block"; // parent of the <a> is the <div> to show
}
You could bind the event like <a href="#" onclick="show(this); return false;">. The element (this) is then passed to show.
As a side note, libraries such as jQuery make this even easier; you might want to check that out (though I don't recommend including it if the only use case would be this).
sorry, there is only window.print() for printing in js, which means you can only print the entire window. if you want some to be able to print your document, make it printable using CSS.
for instance, maybe you want your navigation to disappear for printing, but leave the title of your page there and the name of your web site and maybe a page URL (sometimes browsers like firefox cut those off if they are too long). and sometimes some sites take away the browser controls and make the mistake of leaving you with no print button - and it's an online purchasing site... it's happened before.
<style type="text/css">
#media print {
.boxGreen {
padding:10px;
border-color:green;
border-style:dashed;
border-width:thin;
}
}
#media screen {
.boxGreen {
padding:10px;
border-color:green;
border-style:dashed;
border-width:thin;
}
}
</style>
you CAN do an onclick="switchtodiv('someid')" and then after the divs do this:
<div onclick="switchtodiv('span1')">ClickMe<span id="span1">some content</span></div>
<div onclick="switchtodiv('span2')">ClickMe<span id="span2">some content</span></div>
<div onclick="switchtodiv('span3')">ClickMe<span id="span3">some content</span></div>
<!--you can generate these divs using a for statement...-->
<script type="text/javascript">
//switchdiv allows only 1 div tobe
function switchdiv(id) {
var ids=new Array('span1','span2','span3');
var i;
for (i=0; i < ids.length; i++) {
if (ids[i] == id) {
document.getElementById(ids[i]).style.visibility='visible';
document.getElementById(ids[i]).style.display='block';
} else {
document.getElementById(ids[i]).style.visibility='hidden';
document.getElementById(ids[i]).style.display='none';
}
}
}
</script>
You could use a javascript function like document.getElementById(id) to hide the two other divs
So in your function you could just use
function hide1() {
document.getElementById(div2).style.display = "none";
document.getElementById(div3).style.display = "none";
}
I have a Q&A list with "Open All/Close All" at the top with individual open and close image buttons that toggle when clicked. That works fine.
Then follow individual Q&As, and each has its own open and close image.
If you click on "Open All/Close All" first, as soon as the page loads, and then click on the individual Q&A open/close images, all works fine. But if after page load you click on the individual Q&A open/close images, bypassing "Open All/Close All," they display the inappropriate open or close image.
Here is page code:
<div class="answersee"><span>Open All</span><img src="assets/open.gif" border="0" alt="" /></div>
<div class="answerhide"><span>Close All</span><img src="assets/close.gif" border="0" alt="" /></div>
<div class="qa">
<div><img src="open.gif" border="0" alt="" /><span class="question">Question.</span></div>
<div class="answer"><p>Answer.</p></div>
</div>
Here's the script (also uses Jquery):
$(function () {
$(".qa").click(function () {
$(this).find("div").next().slideToggle("fast");
if ($(this).find("div:eq(0)").find("img").attr("src") == "open.gif") {
$(this).find("div:eq(0)").find("img").attr("src", "close.gif");
}
else {
$(this).find("div:eq(0)").find("img").attr("src", "open.gif");
}
});
$(".answersee").click(function () {
$(".answer").show("fast");
$(".qa > div > img").attr("src", "close.gif");
$(".answerhide").show();
$(".answersee").hide();
})
$(".answerhide").click(function () {
$(".answer").hide("fast");
$(".qa > div > img").attr("src", "open.gif");
$(".answersee").show();
$(".answerhide").hide();
})
});
I don't think it's a CSS problem, or I'd include that code here. Do I need to initialize the script in some way? Or did I make a mistake in the above script?
Here's how I would do it.
Working Demo →
EDIT:
Update the code to have simple open/close link.
Code with comments which explains my approach:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style>
body
{
font-family: "Verdana";
font-size: 12px;
}
.question
{
background-color: #ccc;
cursor: pointer;
padding: 5px;
margin-bottom: 10px;
border-bottom: 1px solid #000;
}
.answer {
padding: 5px;
}
</style>
<script>
$(document).ready(
function()
{
//Hide all the answers on page load.
$('.answer').hide();
//For all questions, add 'open'/'close' text.
//You can replace it with an image if you like.
//This way, you don't need to specify img tag in your HTML for each question.
$('.question')
.append(' <span>[ open ]</span>');
//Now there are two ways to toggle the visibility of answer.
//Either click on the question OR click on Open All / Close All link.
//To use the same code for both instances, we will create
//a function which will take the 'question' div and toggle the answer for it.
//Advantage of this approach is that the code to toggle the answer is in
//one place.
//By default, this function will try to toggle the status of the answer
//i.e. if it's visible, hide it otherwise show it.
//This function will take a second argument called 'showAnswer'.
//If this argument is passed, it overrides the toggle behavior.
//If 'showAnswer' is true, answer is shown.
//If it's false, answer is hidden.
//This second parameter will be used by the 'openAll', 'closeAll' links.
var toggleAnswer = function toggleAnswer(question, showAnswer)
{
//The way I have structured the HTML, answer DIV is right after
//question DIV.
var $answer = $(question).next('div');
//Animation callback, after the animation is done, we want to
//switch the 'text' to display what could the user do with the question.
//Once again, you can change this code to show open/close image.
var updateText = function()
{
var text = $answer.is(':visible') ? ' [close] ' : ' [open] ';
$(question).find('span').html(text);
}
var method = null;
if(arguments.length > 1)
{
//If the function was called with two arguments, use the second
//argument to decide whether to show or hide.
method = showAnswer === true ? 'show' : 'hide';
}
else
{
//Second argument was not passed, simply toggle the answer.
method = $answer.is(':visible') ? 'hide' : 'show';
}
$answer[method]('fast', updateText);
};
//On each question click, toggle the answer.
//If you have noticed, I didn't enclose both Q&A inside one DIV.
//The way you have done if user clicks on the answer, answer will collapse.
//This may not be desirable as user may want to copy the answer
//and he won't be able to.
$('.question').click(function(){ toggleAnswer(this);});
//We will reuse the same toggleAnswer method in openAll, closeAll
//handling. This way, if you want to change behavior of how the question/answers
//are toggled, you can do it in one place.
$('#openClose').click(
function()
{
var showAnswer = $(this).html().toLowerCase().indexOf('open') != -1 ? true : false;
$('.question').each(function() { toggleAnswer(this, showAnswer); });
$(this).html(showAnswer ? 'Close All' : 'Open All');
return false;
}
);
}
);
</script>
<html>
<head>
<title>simple document</title>
</head>
<body>
<a id='openClose' href='#'>Open All</a>
<br /><br />
<div class='question'>Question 1</div>
<div class='answer'>Answer 1</div>
<div class='question'>Question 2</div>
<div class='answer'>Answer 2</div>
<div class='question'>Question 3</div>
<div class='answer'>Answer 3</div>
</body>
</html>
You need to use the callbacks because your animation will not have finished by the time to check for which image is being shown.
$(".qa").click(function() {
$(this).find("div").next().slideToggle("fast", toggleImage);
}
function toggleImage(){
var $img = $(this).find("img");
$img.attr('src') == "open.gif" ? $img.attr('src', "close.gif") : $img.attr('src', "open.gif");
}
N.B There are better ways to do this but lets get you working first and then see if you want to refactor it some more.
Thank you for taking the time to provide this. I will try this later today and report back. In my version, I toggle the Open All/Close All feature. It's a cleaner look and easier to use, since you don't have to move your mouse.
Redsquare and Solution Yogi:
Thanks. I will reply again later and also post a working demo so you can see the problem more clearly. Sorry, I should have done that before.
Liz