i want to show html code in textarea and then user can clink view resut.
code:
<textarea id="html" cols="50" rows="10"><html>
<body>
<p>
This text will appear on your webpage.
</p>
<!--
the text within these comment tags will not appear on the web page
-->
</body>
</html>
</textarea>
<div>
<button onclick="view()">View Results</button>
</div>
<script type="text/javascript">
function view()
{
var result = window.open("", "", "height=400,left=" + ((screen.width) ? (screen.width-400)/2 : 0) + ",top=" + ((screen.height) ? (screen.height-400)/2 : 0) + ",width=400");
var tmp = result.document;
tmp.write(document.getElementById('html').value);
tmp.close();
return false;
}
</script>
i try post it on wordpress post, but not working.
WordPress strips out HTML tags by default. An easy way to begin with would be to use a plugin such as https://wordpress.org/plugins/wp-coder/ to paste your code into and then use a shortcode to run it. Ideally you want to look into building your own plugins, but as a quick fix this will be ideal for you :)
Related
I have a desktop website written in php.
I have a form that has a submit button in the form of an image displaying the word "next". When my users complete the form and click on it i want it to display the loading gif. I have placed the necessary coding (as i understand it ) to do this but it does not replace the next image with the loading gif. Can anyone pick up what i'm doing wrong.
relevant code section below.
<div class="bb"><input type="image" src="./img/next.png" alt=" Create
My Account " onclick="ButtonClicked()"/></div>
<div class="lb"><input type="image" src="./img/loading6.gif" alt="
loading button "/></div>
<BR>
<BR>
<BR>
</form>
</div>
<script type="text/javascript">
function ButtonClicked()
{
document.getElementById("bb").style.display = "none"; // to undisplay
document.getElementById("lb").style.display = ""; // to display
return true;
}
var FirstLoading = true;
function RestoreSubmitButton()
{
if( FirstLoading )
{
FirstLoading = false;
return;
}
document.getElementById("bb").style.display = ""; // to display
document.getElementById("lb").style.display = "none"; // to undisplay
}
// To disable restoring submit button, disable or delete next line.
//document.onfocus = RestoreSubmitButton;
</script>
You use class for getElementById replace class by 'id' that will work better.
Each id must be single, you cannot have many time the same id.
And use img tag rather input for picture.
And to conclude display = "" and display ="none" it's the same use display = 'block' or display = 'inline-block';
Because there are no "IDs" on your HTML. You have set class names as 'bb' and 'lb'. Replace those classes with id and it will work. So change the HTML as below.
<div id="bb"><input type="image" src="./img/next.png" alt=" Create
My Account " onclick="ButtonClicked()"/></div>
<div id="lb"><input type="image" src="./img/loading6.gif" alt="
loading button "/></div>
<BR>
<BR>
<BR>
</form>
</div>
I am using WordPress for my website.
I want to add radio buttons to my WordPress page when a radio button is selected I want to display a table below. Can anybody help me
Hello maybe more details help ppl to tell you better answer. but with
this much of information i'v got something for you : this is just
sample. you just need to edit for your specific purpose.
** put html code in wordpress editor ( put in editor section, not visual, visual editor maybe auto convert some tags)
** put js codes into your js script tag some where!! if you don't have any idea just use this plugin
** if jQuery not worked add this lines to function.php of your theme or child-theme to add jQuery library to your page(99% wordpress load it by default) :
// include custom jQuery
function shapeSpace_include_custom_jquery() {
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');
HTML CODE :
<form>
<div>
<input type="radio" name="fruit" value="orange" id="orange">
<label for="orange">orange</label>
</div>
<div>
<input type="radio" name="fruit" value="apple" id="apple">
<label for="apple">apple</label>
</div>
<div>
<input type="radio" name="fruit" value="banana" id="banana">
<label for="banana">banana</label>
</div>
<div id="show-table"></div>
</form>
SCRIPT CODE:
<script>
jQuery(document).ready(function ($) {
$("input").on("click", function () {
var checkedNode = $("input:checked").val();
var orangTable = '<table style="width:100%"><tr><th>fruit</th></tr><tr><td>name</td></tr><tr><td>orang</td></tr></table>';
var appleTable = '<table style="width:100%"><tr><th>fruit</th></tr><tr><td>name</td></tr><tr><td>apple</td></tr></table>';
var bananaTable = '<table style="width:100%"><tr><th>fruit</th></tr><tr><td>name</td></tr><tr><td>banana</td></tr></table>';
switch (checkedNode) {
case 'orange':
$("#show-table").html(orangTable);
break;
case 'apple':
$("#show-table").html(appleTable);
break;
case 'banana':
$("#show-table").html(bananaTable);
break;
default:
}
}
}
</script>
specific table assigned to each button will display inside div
with id="show-table" when that button selected. you can outspread this
method for what purpose you have. just know this is not efficient
method or best way. it's just a way ..
I have a client that wants the function of being able to enter a key word into a search bar and have it start to highlight the results on the page as you are typing (or after you hit search).
This is just like using the ⌘+F function on a Mac (or Ctrl+F on PC) and the browser itself pops up a search box.
He doesn't want to have to hit ⌘+F though, or have his customers to have to know that command. He wants to just have a search bar already on that page that he can type into and it start highlighting words.
ANY idea how to do this in WordPress? I've searched the internet and cannot find a tutorial on how to do it.
If not a search box, maybe a button they can click that prompts to pull up command F on a mac or Ctrl+F on a pc?
I am at a loss here and cannot figure this out. Any tips or experience with this, I would be very grateful.
So I found this on another thread and it seems to work but it only finds the first occurrence. I need it to highlight all the occurrences. Any idea how to get it to do that?
<p> hello world, hello world, hello world, hello world</p>
<!--BEGIN SEARCH BOX -->
<div class="search_box">
<form action="" id="form2">
<div>
<input type="text" id="search">
<input type="button" id="submit_form" onclick="checkInput()" value="Submit">
</div>
</form>
</div>
<!--END SEARCH BOX -->
<script>
function checkInput() {
var query = document.getElementById('search').value;
window.find(query);
return true;
}
</script>
https://codepen.io/b-jody-spedicato/pen/ExNzqQP
<html>
<head>
<script language="JavaScript">
<!--
var TRange=null;
function findString (str) {
if (parseInt(navigator.appVersion)<4) return;
var strFound;
if (window.find) {
// CODE FOR BROWSERS THAT SUPPORT window.find
strFound=self.find(str);
if (strFound && self.getSelection && !self.getSelection().anchorNode) {
strFound=self.find(str)
}
if (!strFound) {
strFound=self.find(str,0,1)
while (self.find(str,0,1)) continue
}
}
else if (navigator.appName.indexOf("Microsoft")!=-1) {
// EXPLORER-SPECIFIC CODE
if (TRange!=null) {
TRange.collapse(false)
strFound=TRange.findText(str)
if (strFound) TRange.select()
}
if (TRange==null || strFound==0) {
TRange=self.document.body.createTextRange()
strFound=TRange.findText(str)
if (strFound) TRange.select()
}
}
else if (navigator.appName=="Opera") {
alert ("Opera browsers not supported, sorry...")
return;
}
if (!strFound) alert ("String '"+str+"' not found!")
return;
}
//-->
</script>
</head>
<body>
<form name="f1" action=""
onSubmit="if(this.t1.value!=null && this.t1.value!='') findString(this.t1.value);return false">
<input type="text" name=t1 value="" size=20>
<input type="submit" name=b1 value="find">
<p>This is some sample text, do a search above to see how the search bar functions.
You can now add your own CSS styling.
</p>
</form>
</body>
</html>
I have done a lot of research before posting it in here. So, here I got few imperfections.my link
Question 1: How do I make CV button to automatically pop-up the pdf resume or cv. So after I get this done, I won't need div saying lorem as a hyperlink.
Under the navigation class:
<li>CV</li>
When I replace #cv from href with a pdf link, the whole website goes wrong.
Thats it for now. Thanks in advance!
Javascript:
<script language="javascript" type="text/javascript">
<!--
function popitup(url) {
newwindow=window.open(url,'name','height=200,width=150');
if (window.focus) {newwindow.focus()}
return false;
}
// -->
</script>
HTML :
<li><a href="" onclick="return popitup('cv.pdf')" >CV</a></li>
Using CSS, when a link is clicked it brings up a hidden DIV that contains a form. The user will then enter information and then submit the form. I'd like the hidden DIV to remain visible, and a 'success message' to be displayed after submission. Then the user will have the option of closing the DIV. I can't get it to work without reloading the page, which causes the DIV to become hidden again. Any ideas?
<body>
Click Me
<!--POPUP-->
<div id="hideshow" style="visibility:hidden;">
<div id="fade"></div>
<div class="popup_block">
<div class="popup">
<a href="javascript:hideDiv()">
<img src="images/icon_close.png" class="cntrl" title="Close" />
</a>
<h3>Remove Camper</h3>
<form method="post" onsubmit="email.php">
<p><input name="Name" type="text" /></p>
<p><input name="Submit" type="submit" value="submit" /></p>
</form>
<div id="status" style="display:none;">success</div>
</div>
</div>
</div>
<!--END POPUP-->
<script language=javascript type='text/javascript'>
function hideDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideshow').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = 'hidden';
}
else { // IE 4
document.all.hideshow.style.visibility = 'hidden';
}
}
}
function showDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideshow').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = 'visible';
}
else { // IE 4
document.all.hideshow.style.visibility = 'visible';
}
}
}
</script>
</body>
Forms by default submit content by changing to the specified page in its 'action' attribute. You will need to build additional scripts to prevent it from doing that and submit the data using either AJAX or jQuery then process the result.
Or you could simply use whatever language you're programming in to set the default visibility for the division. If the form data exists, display it by default, otherwise hide it by default.
How about using an AJAX call to post the form instead of posting back the whole page?
Instead of using a "submit" type for your button, you can use a "button" type and use a script called by onclick which will use ajax to submit the form and do whatever is necessary.
This defeats slightly the meaning of a form, but works well. You might also want to think about using a javascript library like prototype or similar (jquery, etc) that gives you the functionality to create a get or post array of your form in order to make it easier.