I made this html test website to test show/hide javascript.
When I load the page, I would like to show the first page but in my website everything is hidden 'till I click on a button'.
<html>
<head><title>Test</title>
<script>
function toggle(target){
var artz = document.getElementsByClassName('article');
var targ = document.getElementById(target);
var isVis = targ.style.display=='block';
for(var i=0;i<artz.length;i++){
artz[i].style.display = 'none';
}
targ.style.display = isVis?'none':'block';
return false;
}
</script>
</head>
<body>
About Us
Contact
Products
<div class="article" id="about" style="display:none;">ABOUT PAGE...</div>
<div class="article" id="contact" style="display:none;">CONTACT PAGE...</div>
<div class="article" id="products" style="display:none;">PRODUCTS PAGE...</div>
</body>
</html>
Well, that's because all your elements are hidden and the toggle-function is only invoked on click.
Use this:
window.onload = function(){
toggle('about'); //or whichever page you'd like to show on startup
}
This function is invoked on page-load and calls the toggle-function, providing the content that shoud be shown.
Alternatively, you could just change your style="display:none;" to style="display:block;" in the HTML for the content that should be shown on page-load.
Related
I am making a chrome extension. I want to update a h3 element in popup.html with some text after click a submit button with id submit.
<!-- popup.html -->
<div class="row">
<h3 id="status"></h3>
</div>
// popup.js
function saveClass() {
var status = document.getElementById('status')
status.innerText = 'success';
}
document.getElementById("submit").addEventListener("click", saveClass);
The function populates the element with the text, and I see the text, but it disappears immediately, within some microseconds. Where I am going wrong ?
For me its' working fine. You can refer the following code snippet
<html>
<body>
<!-- popup.html -->
<div class="row">
<h3 id="status"></h3>
</div>
<button id="submit">Submit</button>
<!-- popup.js -->
<script>
function saveClass() {
var status = document.getElementById('status')
status.innerText = 'success';
}
document.getElementById("submit").addEventListener("click", saveClass);
</script>
</body>
</html>
The form refreshes the page by default upon submission, due to which the populated text vanishes. Just add an event listener to disable it, which keeps the DOM intact.
var form = document.getElementById("myForm");
function handleForm(event) { event.preventDefault(); }
form.addEventListener('submit', handleForm);
i want to update div content (content form textarea of main page) of iframe on button click.
up till now i'm able to update div content (content from textarea of main page) of iframe but its done only on page load, i want to change content on button.
my script working on page load
$(function(){
var x = document.getElementById("myTextarea").value;
var f=$('#prev')
f.load(function(){
f.contents().find('#demo').append(x);
})
})
my script not-working on button click but alert called with latest text from textarea
function myFunction() {
var x = document.getElementById("myTextarea").value;
alert("called" + x);
var f=$('#prev')
f.load(function(){
f.contents().find('#demo').append(x);
})
}
iframe in modelpopup
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg" style="width:90%;height:100%!important;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Html Preview</h4>
<button type="button" class="btn btn-default" onclick="myFunction()">Refresh</button>
</div>
<div class="modal-body">
<iframe id="prev" src="http://localhost:8084/page/htmlpreview" style="border:none;width:100% !important;height:1025px!important;"><p>Your browser does not support iframes.</p></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
any suggestions...
In the OP code there's no <textarea> just a BS modal. According to the OP code the <textarea> should be on the parent page (in demo: index.html) and the div#demo is on the child page (in demo: htmlpreview.html.) So in the demo we have:
the parent page (index.html) with textarea#text0 and a <button>
and the child page (htmlpreview.html) that resides within iframe#prev
on the child is div#demo
When the <button> is clicked the onevent attribute invokes the event handler xFunction().
When xFunction() is invoked it will:
get the value of textarea#text0 [var x = $('#text0').val();]
access iframe#prev contents [$('#prev')..contents()...]
then find div#demo [....find('#demo')...]
and set div#demo text content to the value of textarea#text0 [....text(x)]
The demo doesn't function due to SO security measures. Review this Plunk instead.
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea id='text0' rows='5' cols='70'></textarea>
<button type="button" onclick="xFunction()">Refresh</button>
<iframe id="prev" src="htmlpreview.html"></iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function xFunction() {
var x = $("#text0").val();
$('#prev').contents().find('#demo').text(x);
}
</script>
</body>
</html>
htmlpreview.html
<!DOCTYPE html>
<html>
<head>
<style>
#demo {border:3px solid red}
</style>
</head>
<body>
<div id='demo'></div>
</body>
</html>
The above two scripts change to this one script and its working perfect
i have to reload iframe the make desire div empty then edit content.
below is the working script.
function myFunction() {
var ifr = document.getElementsByName('Right')[0];
ifr.src = ifr.src;
var x = document.getElementById("myTextarea").value;
var f=$('#prev')
f.load(function(){
f.contents().find('#demo').empty();
f.contents().find('#demo').append(x);
})
}
I am not sure this can be done by handling the DOM of the iframe as you might expect. According to this answer
However according to some other answers in the above link or this you could change the entire content of the iframe with what the content you want. (Including the change that you want.) I know this doesn't seem as the best solution but keep it in mind in case you don't find anything else.
One link with such a logic is this. Here you can get the innerHTML of the iframe and possibly find from the string the literal you want to change and set the new content as the iframe content.
The helping code from the link that shows the logic is this:
function get_iframe(ifr_id) {
// gets the object that refers to the iframe, uasing its id
var myIFrame = document.getElementById(ifr_id);
// Apply the property "contentWindow" to myIFrame object
// In this way we get the iframe content
var content = myIFrame.contentWindow.document.body.innerHTML;
alert("Content: \n" + content); // Displays an Alert with the data from iframe
// Define a new text that will replace the content of the iframe
content = '<font color="blue">Text added with Javascript, from the main page</font>';
// Modify the iframe content
myIFrame.contentWindow.document.body.innerHTML = content;
}
I tried to display the page2.html when click the Show Image in page1.html. I use ViewController.openExternalView to display page2.html because dijit.registry.byId("myPage1").performTransition('myPage2', 1, "slide", null); is not working.
When the page2 displays, I change the visibility of the image in page2 to visible. But the document.getElementById('myImgId') return null.
It seems script execute before page2.html is loaded. Is there anyway to execute script to able to get elements safely?
dojo version: 1.9.3
Following is the snippet that I'm trying.
javascript
function showImage(){
var vc = dojox.mobile.ViewController.getInstance();
vc.openExternalView({
url:"page2.html",
transition:"slide"
},dijit.registry.byId("container").containerNode);
document.getElementById("myImgId").style.vilibility="visible";
}
page1.html
<div data-dojo-type="dojox.mobile.View" id="myPage1">
----some html tags----
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="variableHeight:true" >
<div onclick="showImage();"><label>Show Image</label></div>
<div>
----some more html tags----
</div>
</li>
</div>
page2.html
<div data-dojo-type="dojox.mobile.View" id="myPage2">
<div data-dojo-type="dojox.mobile.Container">
<img src="img1.png" id="myImgId" style="vilibility:hidden;"/>
</div>
</div>
Try this:
function showImage(){
var vc = dojox.mobile.ViewController.getInstance();
Deferred.when(vc.openExternalView({
url:"page2.html",
transition:"slide"
},dijit.registry.byId("container").containerNode), function(){
document.getElementById("myImgId").style.vilibility="visible";
});
}
In my <div> the id attribute is the dynamic result which is comming from the webpage.
It's like following
<div class="row" id="WC_AddressEntryForm<c:out value='_${paramPrefix}'/>_div_firstname">
so the ${paramPrefix} value is changing dynamically.
also the few next <div> id is having this type of codes
<div class="row"
id="WC_AddressEntryForm<c:out value='_${paramPrefix}'/>_div_lastname">
<div class="row" id="WC_AddressEntryForm<c:out value='_${paramPrefix}'/>_div_1" >
and few more similar to this.
My requirement is to hide the div when ever the ${paramPrefix} value is user
for all those <div> previously written
So what is the way to achieve it??
Thanks a lot &
Happy new Year
Try this -
<%
if (! paramPrefix.equals("User")) {
%>
<div class="row" id="WC_AddressEntryForm<c:out value='_${paramPrefix}'/>_div_firstname">
<% } %>
Just put this JS code on the after the target element code
<div class="row" id="WC_AddressEntryForm<c:out value='_${paramPrefix}'/>_div_firstname">
<script>
document.getElementById('WC_AddressEntryFormuser_div_firstname').style.visibility = 'hidden';
</script>
or if you really want to remove the allocated space of the div you can use the display css attribute and set it to none
<script>
document.getElementById('WC_AddressEntryFormuser_div_firstname').style.display = 'none';
</script>
Ok so it seems _${paramPrefix} to contain dynamic values well the thing you can do is this
<script>
var user = "<c:out value='_${paramPrefix}'/>";
if(user != ""){ //hide when user variable contains something
document.getElementById('WC_AddressEntryForm'+ user +'_div_firstname').style.display = 'none';
//you can hide other elements here...
}
</script>
well this would change as your requirement changes
Reference:
http://rakibulislam.wordpress.com/2008/06/11/changing-css-property-using-javascript/
currently I have a method of showing / hiding a div based on a form checkbox field as per below. What I do want however is to not use a form to show hide rather just call the show / hide function based on a simple on a link . I hope this makes sense what I am attempting to do. Any help /advice would be really valued!
<!-- Show hide-->
<script language="JavaScript">
function showhidefield()
{
if (document.goform.areas.checked)
{
document.getElementById("areaone").style.display = "block";
document.getElementById("areatwo").style.display = "none";
}
else
{
document.getElementById("areaone").style.display = "none";
document.getElementById("areatwo").style.display = "block";
}
}
</script>
<form name="goform" id="goform" action="xxxx" method="post" enctype="multipart/form-data">
<label><input name="areas" type="checkbox" onclick="showhidefield()" value="1"> Yes </label>
</form>
<div id="areaone" style="display:none;">
Area One
</div><!-- / Hideable area -->
<div id="areatwo" style="display:block;">
Area two
</div>
Changing the above so that rather than using a form checkbox to showhide, have a toggle effect based on event e.g.
Show Areaone / Hide Areatwo
Show Areatwo / Hide Areaone
General Approach
The general approach is to use the onclick property of link tags. You can set this directly on the tag like this:
<a onclick="showhidefield()" href="javascript:void(0);">Show/Hide</a>
Example 1
Here's a full working example:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="areaone" style="display:none;">
Area one
</div>
<div id="areatwo" style="display:block;">
Area two
</div>
<script type='text/javascript'>
function showOneHideTwo(){
document.getElementById("areaone").style.display = "block";
document.getElementById("areatwo").style.display = "none";
}
function showTwoHideOne(){
document.getElementById("areaone").style.display = "none";
document.getElementById("areatwo").style.display = "block";
}
</script>
<a onclick="showOneHideTwo()" href="javascript:void(0);">Show one / Hide two</a>
<a onclick="showTwoHideOne()" href="javascript:void(0);">Show two / Hide one</a>
</body>
</html>
Example 2 (Better!)
However, for a variety of reasons, it is preferable, if slightly less intuitive, to use javascript to set the onclick property instead of adding it to the html directly. Here is a better full working example:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="areaone" style="display:none;">
Area one
</div>
<div id="areatwo" style="display:block;">
Area two
</div>
<a id='showOneLink' href=''>Show one / Hide two</a>
<a id='showTwoLink' href=''>Show two / Hide one</a>
<script type='text/javascript'> <!-- This allows for better placement of the script as well... -->
//Same functions as before
function showOneHideTwo(){
document.getElementById("areaone").style.display = "block";
document.getElementById("areatwo").style.display = "none";
}
function showTwoHideOne(){
document.getElementById("areaone").style.display = "none";
document.getElementById("areatwo").style.display = "block";
}
//this time, we set the onclick here
//this is better form- it keeps the content (html) and the scripting (javascript) seperate
document.getElementById("showOneLink").onclick = function(){showOneHideTwo(); return false;}
document.getElementById("showTwoLink").onclick = function(){showTwoHideOne(); return false;}
</script>
</body>
</html>