Im sure the answer to my question is here somewhere but I cannot find it. I apologise if I have duplicated.
I have a DIV that I set its visiblity on page load depending on the data I pull back.
So in the code behind:
this.divMyDiv.Visible = false
If the user then changes a drop down value I try to show the DIV
var div = document.getElementById('divMyDiv');
div.style.display = 'block';
If the div is set to visible by the code behind on the initial page load all is fine. The DIV will show and hide when I change the drop down value. However when the DIV is hidden on page load the var div in the JavaScript is always null. I have tried var div = document.getElementById('<%=divMyDiv.ClientID%>'); but I get the same results. I have also tried moving the JS to the bottom of the page. Same results.
this.divMyDiv.Visible = false
...will prevent the div from being rendered at all and Javascript can't find it. If you still want to render it and use display:none to hide it, you'll want to do;
this.divMyDiv.Style["display"] = "none";
Setting an aspx control to Visible = false on the server side means that the control won't be rendered at all in the Html Response, and thus it isn't available at all client-side for javascript to use. You'll need to render it (Visible=true) but then Hide the control using css, e.g. style='display:none' or similar. See also Question regarding Visible=false and display:none;
If this property is false, the server control is not rendered. You should take this into account when organizing the layout of your page.
If you want the control to be rendered but not visible, you should leave Visble = true and hide the control using script or css.
div.style.display = 'none';
See http://msdn.microsoft.com/en-us/library/system.web.ui.control.visible.aspx
in code behind use
instead of
this.divMyDiv.Visible = false
use this
divMyDivAttributes.Add("display", "none");
It will then be rendered by javascript and your other java script function will run properly too
Related
I want to make sure that all JavaScript happens before the page is loaded. I am changing some innerhtml, but don't want the original innerhtml to show.
Currently, when my page loads "Books" is displayed for a brief moment, then finally when the script is read, it gets replaced. How do I prevent it from displaying the initial text?
FYI the script exists inside a php file.
<?php
?>
<script>
function changeme(){
var myvar = "test-string-is-long-to-notice-the-changed-text";
var spans = document.getElementsByTagName("span");
for(var i=0;i<spans.length; i++) {
if(spans[i].textContent.trim().toLowerCase()==="books") { //is this the "Welcome" span?
spans[i].innerHTML = myvar; //change to new value
break; //hop out of the loop, we're done
}
}
}
window.onload = function() {
changeme();
};
</script>
It is not a good idea to load JS before HTML, because you can not change the HTML elements before loading it using js.
Solution 1: Initially, keep the html tags empty that you do not want to show, because you want to show new data from JS.
Solution 2: Initially, keep the styles for those elements "display: none" and when you add the data using Js in element. Update the style to display: 'block' or any other you want, eg spans[i].style.display = 'block';.
You cant apply JS to a html document that doesnt yet exist. Your html is always loaded first, then your JS is applied. What you could be seeing here is the html is loaded and the JS is taking like what--a second to load and make the change? I recommend figuring out a more efficient way to implement the JS you need. You could just be seeing JS latency. You could use a more efficient implementation plus some CSS to fix it. I could be wrong here but it just doesn't make sense to apply JS to html went the html isnt even there yet.
How would I apply any JS to that if I'm trying to do it before the browser has even parsed and rendered my html?
Also remember that PHP is always "loaded" first, then html, then JS
Ok, first off. No jquery, no ajax, just pure javascript.
I have the following code on a page called text.html.
<html><body>
<script>
function live(ID,txt2) {
var a = document.getElementById(ID);
a.innerHTML = (txt2);
}
setInterval(live, 250);
a.innerHTML =(txt2);
</script>
<div id="txt1">Live</div><p />
</body></html>
I have the following code on live2.html
<html>
<body>
<p />
<iframe width="400" height="50" src="text.html" name="frameA" id="frameA"></iframe><p />
<input type="button" value="Live" onClick="document.getElementById('frameA').contentWindow.live('txt1','L I V E')">
<input type="button" value="Rebroadcast" onClick="document.getElementById('frameA').contentWindow.live('txt1','Rebroadcast')"><br />
text
</body>
</html>
The current code works exactly as I wanted it to by updating the information in an iframe. My issue is this. If someone visits text.html directly, I want them to be able to see whatever I've changed that document to.
Example:
I click on a button and the text in the iframe now says rebroadcast.
Someone else visits text.html and they also see rebroadcast. If while they are looking at text.html, I hit the live button, the text.html page will update with the word live.
I can do PHP scripting on this as well. I have tried jquery and have issues with getting it to work correctly and I don't really have the knowledge or access to implement much of anything else.
This is an on-going project. The end result, I hope, will be an iframe that I can update while not actually being on the same page that the frame is located on. (same domain tho) The content will be anything from images, to youtube embeds and pictures. I'm trying to get a more comprehensive idea of how this language works and that's why I'm taking it one step at a time. I have no issue with visiting tutorials or looking at pre-made solutions. Thanks for your help. :)
I think I'm probably missing something. Users will always see the text "Live" because that's what's hard-coded in text.html. It doesn't matter if you change the text through JavaScript since it will only affect the browser that you're seeing. You need to save it to a persistence storage (ie. database) and dynamically display it on the page.
live2.html can use AJAX to send the changes to the server, which can then update live.html. But this is a poor way to do it, since it means that the contents of live.html are updated outside of your version control and/or content management system. It's better to use a real database and generate the page dynamically, as suke said.
First off this is what happens when someone learning programming languages doesn't fully comprehend what a language can and can't do. The original idea was to let a specific group of people know when it was a re-broadcast or when the show was live. I wanted the control of when to change that information to only be available to an admin of sorts. In the end the entire idea got scrapped and entirely impractical. The solution, essentially, doesn't exist in the context of the way I wanted to accomplish this. Years later...
The solution is to have live and rebroadcast inside div tags with CSS. Then use a JavaScript function to change the attributes of the divs to either be hidden or shown. The button or or link would need to exist on the same page as the live or rebroadcast text. This would also mean that there is no need for a separate frame. To have this element controlled from outside the page it's on could only be done by storing a value somewhere else and having that value periodically checked.
JSFiddle
The Script:
var x = document.getElementById("txt1");
var y = document.getElementById("txt2");
function htext() {
x.style.visibility = 'visible';
y.style.visibility = 'hidden';
}
function stext() {
x.style.visibility = 'hidden';
y.style.visibility = 'visible';
}
function ctext() {
var z = getComputedStyle(x).getPropertyValue("visibility");
if (z != 'hidden') {
stext();
} else if (z != 'visible') {
htext();
}
}
The CSS:
#txt1 {
visibility: hidden;
margin-left:0px;
}
#txt2 {
visibility:visible;
margin-left:0px;
}
The HTML:
<span id="txt1">Live</span>
<span id="txt2">Rebroadcast</span>
<br />
click
To be honest. I'm not entirely sure of the programming needed to store information somewhere else and have a check to see if certain conditions are true. The program above will essentially hide and show a div. I could probably go a step further and use JQuery to create and remove the actual div itself. In the end this is essentially close to the solution I ended up using and then later on discarding and giving up on the project.
i have a php page that contains a table which i want to display only after clicking a link.
my problem is as follows:
i have a div that is set to display="none"
<div name="details" style="display:none;">
using a javascript, i change it to inline-table, or just block, doesn't matter for the case.
function showDetails(){
var elems = document.getElementsByName("details");
document.getElementById("dis").innerHTML = elems.length;
for (var i=0; i<elems.length; i++)
elems[i].style.display = "inline-table";
}
when i click the link that triggers this script, the div content is shown for a fraction of a second and disappears again..
here is a video of what it looks like:
http://dl.dropbox.com/u/17289984/SRFile2012_9_9_22_43_58_463.avi
i've checked some 5-6 pages of google links about changing display property, and of course checked stackoverflow, but found no relevant answers...
does anyone have a clue?
thanks in advance!
P.S. here is my full code:
http://codeviewer.org/view/code:299e
Remember that you are clicking an <a> tag, which is usually used for a link and they can send you to another page (that's exactly what's happening). Your href attribute is empty, so it's refreshing the page when you click it.
Try this:
show details
Notice return false;.
This will cancel the default action.
The name property is not supposed to be used like that (actually, it's deprecated and should never be used except for form fields). Change your code to:
<table class="details">
And use this to find them:
var elems = document.getElementByClassName("details");
Also, when setting the display property you should use "none" to hide an element and just an empty string to restore it to the browser default value (which can change from one browser to another):
elem.style.display = ""; // remove "none" value to make it visible.
The getElementByClassName feature doesn't exist in old browsers. A quick google search will find sample code to get it working in all browsers.
Also, #Lian is correct you should be returning false in the onclick.
your code in the link you provided says something different from what you posted here on SO. it says in the other code that you change visibility to visible only. Visibility is LOWER PRIORITY than display. If visibility is visible but display is still none, it means that the thing will still be invisible because display is still on none. You must totally forget about visibility and change ONLY the display none to a display block.
I'm trying to put a piece of jquery together to show a hidden div and at the same time, refresh the parent div so that the javascript can amend and display the new height.
This is what i have so far but after some research have found than to refresh a div you have to use ajax and was wondering if anyone could lend a hand.
var $r = jQuery.noConflict();
$r(document).ready(function() {
$r('#open').click(function () {
$r('#expandable-2').show('slow');
$r(this).load(location.href + '.panel > *');
});
$r('#close').click(function () {
$r('#expandable-2').hide('1000');
$r(this).load(location.href + '.panel > *');
});
});
So far I have this,
a link with the id's of open and close
once clicked they give the css property of display block and display none to a div expandable-2
the part I'm stuck on is the refreshing of the parent div .panel in order to show the displayed div correctly.
Reason being is that I'm currently using the CodaSlider script in my page and the height is dynamically brought in depending on how much content is in the container. Now in order for the new content to be displayed when clicked open, the container needs to be refreshed thus showing the new content with a new height.
Hope that makes sense but any help would be awesome.
to "refresh" a div you just need to do:
document.getElementById("myDiv").innerHTML = new_content;
new_content may be the html returned by your ajax call but you definitely DON'T need an ajax call to "refresh" a div.
You can change html of a div with html method of jQuery.
$r(".content-div").html("Hello world");
If you want to load an html from server with ajax, you should use load function as below:
$r(".content-div").load("ajax/users.html");
There is a clear mess with your code. Just a few tips:
If your parent div contains #expandable-2, then you won't be able to do the ajax call and show the animation at once, because the ajax call is gonna destroy the #expandable-2 element while it is appearing/disappearing.
The proper way of loading external code through ajax into a div is:
$r('.panel').load('/path/to/url');
This will load the response of '/path/to/url' into the '.panel' div. Make sure that '/path/to/url' only returns the new content of the div, otherwise you cannot use $r('.panel').load, but an indirect approach must be used instead (i.e.: $r.ajax)
I'm developing a solution using Lombardi Teamworks BPM Tool .. The tool itself generates the client-side source code, but I can put in code using JavaScript, such as adding onChange code for combo boxes ..
Anyways, I have a button whose visibility I'm trying to toggle using JavaScript. I am able to hide a button using hidden, but I cannot unhide a hidden button using visible.
Here's the full code:
var eleBtnVisibilityTest = document.getElementById("btnVisibilityTest");
if (eleBtnVisibilityTest== null) {
eleBtnVisibilityTest = document.getElementsByName("btnVisibilityTest");
}
alert("-->"+eleBtnVisibilityTest.style.visibility+"<--");
eleBtnVisibilityTest.style.visibility = "visible";
alert("-->"+eleBtnVisibilityTest.style.visibility+"<--");
In the second last line, I'm setting the button to visible, but it's doesn't work ... However, if the button was previously visible, and I had written hidden here, it would've worked.
For both cases, in the alert before setting the visibility, the pop-up I get says --><-- .. In the popup after setting visibility, its either -->visible<-- or -->hidden<-- ..
Any ideas ?
Try using the CSS display property:
display: block;
display:none;
document.getElementsByName returns a NodeList, you must select an item from that list:
var eleBtnVisibilityTest = document.getElementById("btnVisibilityTest");
if (eleBtnVisibilityTest== null) {
eleBtnVisibilityTest = document.getElementsByName("btnVisibilityTest")[0];
}
But however, when setting the visibility to hidden works, this actually is not the problem here.
You should provide more details, because your code works when used with getElementById
http://jsfiddle.net/doktormolle/4mhBk/
Not sure what you mean by "but it's doesn't work" - do you mean that the button stays invisible?
It could be that the button is hidden by other means than the CSS visibility property. Maybe it also has display: none? In that case, setting the visibility property would not make the button become visible. Use a tool such as Chrome's inspector to check if that is the case.
Post a code snippet at JSFiddle, so we can see the code in action.