I would like to hide a HTML Form before even the page loads using javascript.
I was able to use display='none' style property to hide the form using javascript but the form content loads visible for a second before disappearing.
var searchbar = document.getElementById("searchform");
searchbar.style.display = 'none';
I have read many solutions in stackoverflow adding some css code in the page and display the content later using removeClass.
Problem is I do not have access to code behind the web page to add the CSS content. However I can add some custom javascript code only in header or a footer.(cannot use jQuery as well).
Please let me know if its possible hiding the form element as expected.
I am quite new to javascripting. Please provide your valuable suggestions.
edit: Sorry, if you only can use some javascript and cannot access the html or css there is probably no solution for your problem.
You can store all you form in a javascript variable, and write it in your div when the page is ready
Simple example :
function showForm(){
var container = $('#formContainer');
var form = '<input type="text" name="myInput">'; // Or you can load it from an external file
container.html(form);
}
$(document).ready(function(){
showForm();
});
But the best way is adding a css rule to hide your form, and show it when the page is loaded.
Web browser first render HTML. It takes time, while browser download css or js file. Best apprach would be to use inline display='none', not in css file.
<form style="display:none;">
...
</form>
Related
I must work on Oracle MaxyMiser for make some changes into one site.
I've already tryied to modify the Html and it's more or less clear for me how make change from this section. Now I see there is another section inside the Maxymiser panel for make some changes. This section is the script section. I don't understand how this section works. I tryied to change one css property of one html div without succes.
This is how I try to change one proprety:
var salesAmount;
salesAmount = jQuery('#regionForm')[0];
console.log(salesAmount);
console.log(salesAmount.style.display); --> ""
console.log(salesAmount.css); --> undefined
//salesAmount.style.display = "block"; --> doen't work
});
Here I tryied to change the css display property without success ( the div already have one property display:none setted from the original css rule ).
I would like to open one modal already present into the html from one script and chage some css class or properties.
Can someone help me?
Thanks.
After several tests I was able to add a custom script from the appropriate section.
In order to connect a click action to a custom button added via a variant of MaxyMiser I had to work through the window.onload function.
An example of js I added:
//insert script code here
window.onload = function(){
const btn_close = document.querySelector(".class-button");
const banner = document.querySelector("#idDiv");
btn_close.addEventListener('click', function(){
banner.classList.add('hidden');
},false);
};
I hope this can help someone.
Bye
Good day! Newbie here. I just want to know if it's possible to change the whole content of an html using javascript? I got some codes here. (not mine but whoever did this, thank you so much!) I don't know where to put/insert all the codes of the new layout like when you click a button then the whole content will change. Thank you very much for helping me.
<script language="Javascript">
<!--
var newContent='<html><head><script language="Javascript">function Hi()</script></head><body onload="Hi();"><p id="p">hello</p></body></html>';
function ReplaceContent(NC) {
document.write(NC);
document.close();
}
function Hi() {
ReplaceContent(newContent);
}
-->
</script>
The easiest way to do this is with jQuery.
function insertHtml()
{
var newHtml = '<div><span>Hello World</span></div>';
$('body').html(newHtml);
}
Something like that will replace the entire contents of body with newHtml. You can also do this with pure javascript using the .innerHtml property but jQuery has many advantages.
EDIT: If you want to add something to the DOM rather than replacing the entire thing, use
$('body').append(newHtml)
instead. This will add the content to the end of the body. This is very often used for things like adding rows to a table.
Yes it is possible but this code is not valid unless you remove the comment tags however don't use the document.write() after page load unless you want to overwrite everything in page including the script
I kind of need to create html page copy by clicking on button in this page, but where all <input type = 'text'... replaced with it's values.
I think, I can handle the second part, but how first to get html code?
Are this ever possible?
I need this for generating html reports.
Page is shown in internal browser of my prog. The basic idea, the student see the page with inputs, then when he fill all, he press button inside HTML page, some JS handler work and send to my prog same page, but without inputs for later review for teacher.
If you want to get the html for the body of the document, use this:
document.body.innerHTML
You can then modify it as needed and change it:
document.body.innerHTML = ... modified html ...
There are better ways to achieve the result though, like manipulating the DOM with jQuery.
You can use document DOM element and serialize it:
(new XMLSerializer()).serializeToString(document);
for cross-browser compatibility see this post
If you have a <form> you can post to the same page adding ?post=1 to the action.
Then in the php
if ($_GET["post"]==1) {
//same table or div structure getting the values submitted by the form
}
Do you know how to do it? was this you needed?
I have Joomla 1.5
I have found a plugin for form styling, the "jqtransform"
I have an article that imports a 'myform.php' page that connects to an external database
I try to embed the jquery plugin (the jqtransform) to stylize the form that resides in myform.php. The steps i make are:
add link for the css in the header of joomla's index.php
add the link for the jquery plugin inside joomla's index.php (or inside myform.php)
add the class jqtransform in form tag of the myform.php (rquired by the plugin)
at the end of the myform.php (or the joomla's index.php) i add the javascript snippet inside the script tags:
$(function() {
//find all form with class jqtransform and apply the plugin
console.log("foo");
$("form.jqtransform").jqTransform(); });
(needed for the plugin)
The problem is that the plugin doesn't work.
I debug the javascript inside the browser and put bookmark in front of $(function(){}); and in front of $("form.jqtransform").jqTransform(); });
The first bookmark works ok (the browser halts).
The second bookmark doesn't do anything. That means the browser doesn't get inside the function.
The console log doesn't show anything.
Anyone has any idea??
The issue is JQuery Conflict.
You should use var jq = jQuery.noConflict();
Just above the script and use jq instead of $ symbol.
like:
jq = jQuery.noConflict();
jq(function(){});
jq("form.jqtransform").jqTransform(); });
something like that.
Also you can add script from myform.php don't need to edit index.php for this kind of use.
Like a page required some js and css don't load it in the index.php
It will load everytime so speed will reduce.
For a component or module or specific page you can use joomla's default document factory.
Like:
$document = &JFactory::getDocument();
$document->addScript('your script file full path');
$document->addStylesheet('your style sheet full path ');
Hope this will help you friend..
This method requires no editing to the template files.
Simply use a Custom HTML Module and Publish it in position
<script type="text/javascript">jQuery.noConflict();</script>
<script>
jQuery(document).ready(function() {
jQuery("form.jqtransform").jqTransform();
});
</script>
I am working in a software which has its interface written in JavaScript
I am trying to add an HTML button to the interface by defining a button in the HTML main code, check how I did this http://dpaste.com/691324/
The problem is,, the button appears before the page loads, maybe because the HTML loads before the JS files, I don't know exactly !!! But it really looks ugly, when the button show before the page, and I want to find some trick that can delay the button or to be loaded at the same time with the javascripts..how is this possible?
I am not a javascript person, but if you are using JQuery, it should go something like this
$(document).ready(function() {
document.getElementById('divId').innerHtml = '<input type="button" value="button">';
});
'divId' would be id of Div tag (place holder) covering input tag.
Or you can also call some plain javascript function which sets innerHtml of 'divId' on 'Body' tag's onload event,
Well I think is that you should use an anchor instead, and if you want, style it as a button. Here is the way to create the button with pure JS:
var anchor = document.createElement('a');
anchor.setAttribute('href', '/opentripplanner-tripArabic/index.html');
anchor.setAttribute('class', 'please use CSS'); //inline styling is dirty
anchor.innerHTML = 'use the Arabic interface';
document.getElementById('header').appendChild(anchor);
I recommend to use anchors because you are not using a form, and you only pretend to redirect the user to another page. Either way if you want still the button, you can use document.createElement('button'); and asign the property onclick: button.onclick = function(){... instead of the href setting.
Another thing you can do is to hide the button with CSS: display:none and on load wet the element and remove the style: button.style.setProperty('display', ''); or either way use the CSS propperty visibility: hidden.