Ive been trying to figure out how to get some data i type into a text field to save on the screen underneath it. Something like a twitter, or Facebook news nothing fancy. I'm using JQM and would like this to get save on the same page as the text field and button under the
<div data-role="content">
This is what i have for a field and button.
<input type="text" id="Text"/>
<input type="button" id="Button" value="Submit" />
<div id="buttonPlaceHolder"> </div>
and this is some javaScipt i found to go along with the button, it works however the dollar signs screw up JQM and ive tried putting it in its own js file. I think i might be doing something wrong.
$('#Button').bind('click', function() {
$('#buttonPlaceHolder').append($('#Text').val());
// refresh jQM controls
$('#home').trigger('create');
});
If at all possible id like the javascript in with the html via script
I am not sure if I understood the question. Nevertheless try this, it may help:
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<p id="myDIV">A DIV.</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="Hello Dolly";
document.getElementById("myDIV").innerHTML="How are you?";
}
</script>
</body>
</html>
It is a html page example. You can find more info and useful examples here:
http://www.w3schools.com/js/js_examples.asp
If you want to save it for later use, try localStorage mechanism.
Related
just got a book from the library and was trying to learn a bit about simple html coding and first lesson of writing a simple program doesn't do what it is supposed to. no idea whats as it is copied exactly as the book shows. the button does not display its answer and I already found one typo on the first lesson so any help is appreciated. also not sure if this is displaying the code only let me know if it isn't.
<!DOCTYPE html>
<html>
<head>
<script>
/* This is the function that gets
called when the user clicks the
button on the main page */
function displayAnswer()
{
document.write(“Just 24 1-hour lessons!”);
}
</script>
</head>
<body>
<h1>My First Program</h1>
<p id=“demo”>How long will it take for me to learn to program? </p>
<button type=“button” onclick=“displayAnswer()”>How many hours?</button>
</body>
</html>
I suspect you either copied your code from an online book or you wrote it in something like Microsoft word. You need to write code in a straight text editor like textpad or note pad if you don't have actual development environment.
Your editor replaced all of the double quotes with the wrong kind.
there is way more information than you need but this site has pitures that show the different types of quotes http://www.cl.cam.ac.uk/~mgk25/ucs/quotes.html
You want to use the double quotes that go straight up and down, not ones that lean.
<!DOCTYPE html>
<html>
<head>
<script>
/* This is the function that gets
called when the user clicks the
button on the main page */
function displayAnswer()
{
document.write("Just 24 1-hour lessons!");
}
</script>
</head>
<body>
<h1>My First Program</h1>
<p id="demo">How long will it take for me to learn to program? </p>
<button type="button" onclick="displayAnswer()">How many hours?</button>
</body>
</html>
You using the wrong character for quotes
it needs to be "
The code works like this:
<!DOCTYPE html>
<html>
<head>
<script>
/* This is the function that gets
called when the user clicks the
button on the main page */
function displayAnswer()
{
document.write("Just 24 1-hour lessons!");
}
</script>
</head>
<body>
<h1>My First Program</h1>
<p id="demo">How long will it take for me to learn to program? </p>
<button type="button" onclick="displayAnswer()">How many hours?</button>
</body>
</html>
I was wondering how do I make it so that a div container show parts of its content in a small text box, and there will be an arrow at the bottom of the text box pointing downwards, and when clicked upon, it will make the text box bigger and show all of its content?
Can this be achieved using html/css, without the need to use javascript and jQuery or is it a jQuery thing?
<div class="society3" style="overflow:auto">
<p>Description:<p>
<p><?php echo $description; ?></p>
</div>
The description variable just contains a paragraph of text, so I would like the div container to show part of the text and when someone wants to read the full description, they can click on the button and, box will extend to show all content of the div tag.
The bad news is that you will need to use jQuery or similar for something like this, but the good news is that it's relatively straight forward. After you've loaded it into your page, all you need to do is target the id you would like to show/hide (or as it is called in jQuery toggle) and make an onClick() event.
For example, something like this should work.
<script>
$(document).ready(function(){
$("button").click(function(){
$("#toggle").toggle();
});
});
</script>
<div id="button" class="society3" style="overflow:auto">
<p>Description:<p>
<p id="toggle" style="display: none">[content]</p>
</div>
The most similar of your objective is using html5, but this works in google chrome, sometimes in firefox.
<html>
<head><meta charset="UTF-8"></head>
<style type="text/css">
.expand{
padding:10px;
}
</style>
<div class="expand">
<details>
<summary>OPEN</summary>
<p>Some text</p>
</details>
</div>
</html>
I would like to create an HTML button that acts like a link to an item on the same page. So, when you click the button, it redirects to item on the same page.
How can I do this? (I would limit the solution to HTML, CSS, and JavaScript, because currently I am not using any other language)
Current Button (Bootstrap):
<a class="btn btn-large btn-primary" href="">Democracy</a>
Try:
<button onclick="window.location.href='location'">Button Name</button
This is assuming that you are not talking about scrolling down to a regular anchor, and instead you want to scroll to actual HTML elements on the page.
I'm not sure if jQuery counts for you, but if you're using Bootstrap, I imagine it does. If so, you can bind to the "click" event for your button and put some javascript code there to handle the scrolling. Typically you might associate the link/button with the element you want to scroll to using a "data" attribute (e.g. data-scroll="my-element-id").
Without jQuery, you'll have to make a function that contains the code as described, and put in an onclick attribute that references your function, and passes "this" as a parameter to your function, so you can get the reference to the link/button element that called it.
For the code to use to actually scroll to the corresponding element, check out this article:
How to go to a specific element on page?
Quick example without jQuery:
<a class="scrollbutton" data-scroll="#somethingonpage"
onchange="scrollto(this);">something on page</a>
<div id="somethingonpage">scrolls to here when you click on the link above</a>
<script type="text/javascript">
function scrollto(element) {
// get the element on the page related to the button
var scrollToId = element.getAttribute("data-scroll");
var scrollToElement = document.getElementById(scrollToId);
// make the page scroll down to where you want
// ...
}
</script>
With jQuery:
<a class="scrollbutton" data-scroll="#somethingonpage">something on page</a>
<div id="somethingonpage">scrolls to here when you click on the link above</a>
<script type="text/javascript">
$(".scrollbutton").click(function () {
// get the element on the page related to the button
var scrollToId = $(this).data("scroll");
var scrollToElement = document.getElementById(scrollToId);
// make the page scroll down to where you want
// ...
});
</script>
Note: If you literally want a "button" rather than a "link", you can really use any element and make that clickable, e.g.:
<button class="scrollbutton" data-scroll="#somethingonpage">something on page</button>
hey try this : -
<button>Click Me</button>
then to which ever place you want to go in your site : -
u may just place the line below wherever you want,
<a name="A"></a>
hope it works for you
Bookmark your item on the same page that you want to redirect to by assigning it an id. Assume id="itemId", then use<a class="btn btn-large btn-primary" href="#itemId">Democracy</a>. When you click the button, you will be redirected to the part of the page containing that item.
Read More
<section id="sectionA">
<p>You will be directed to this section. You can use id inside div/section/p tags etc</p>
</section>
which section or div using same id in <a href="?">
Democracy
div or section eg:
<section id="democracy">
your content
</section>
try this method abosolutly work
This is the easy way to do it
<button type="button""> Click </button>
try this following code :
<button>Click Over Here</button>
then to which ever place you want to go in your site u may just place the line below wherever you want :
<a name="Link"></a>
I'm very new to Javascript and HTML but I wondered if there was a way you could make your webpage display the same way as your code. Such as if you had something like this:
<html>
<body>
<input type="button" value="Text">
<b>Hello world Hello<b>
</body>
</html>
Is there some sort of code I can put in to make it display just like that on the webpage. When I try it there aren't that many spaces between the world and Hello.
Put that in a pre tag
<pre>hello hello</pre>
pre tags keep spacing
I have a specific part of my website that runs in an iFrame. Now in the webpage that is run inside the iFrame, I specified <base target="_parent" /> for all links, and they all open inside the iFrame(so if I would link to my main website home page, it would open inside the iframe). Now I want one specific link to open outside of the iframe and inside of the normal parent webpage.
How do I force that one specific link to do that? Tried target="_blank" but still opens inside the iFrame.
If you are using JavaScript:
parent.document.location = "http://www.google.com"
And if you are using HTML:
Google
I've come across this solution a while back and I've been using it ever since. Force the link with a Javascript function:
<script type='text/javascript'>
function newWindow(){
top.location.href = 'http://yourURL';};
</script>
YourLink
Add this to the link onclick="window.location = 'url.html';"
When I make menus I make an iframe inside my index.html:
<div id="nav">
<iframe frameBorder="0" height="35px" width="950px" src="navframe.html"></iframe>
</div>
Then in the navframe.html these are my buttons:
<button type="button" onClick="window.parent.location='index.html'">
Home</button>
<button type="button" onClick="window.parent.location='contact.html'">
Contact</button>
that tend to work