adding a custom JS button into a preexisting div - javascript

i need to make a custom JS button into a preexisting div. I can make a button appear on the body, but i can't seem to make it inside any div.
my code structure would be along these lines
<html>
<body>
<div id="placeButtonHere"> </div>
<script type="text/javascript">
window.onload = function myFunction()
{
var btn=document.createElement("BUTTON");
document.body.appendChild(btn);
}
</script>
</body>
</html>
this works to create a button on the body, however it doesn't work when i try to make it into the div.
I have tried
$('#placeButtonHere').append(btn).html();
as well as a few different iteratinos of that code. and it just can't seem to work.
NOTE: At my school where i am writing this now JSfiddle is a blocked site so i wont be able to use them.
thanks

Try:
<html>
<body>
<div id="placeButtonHere"> </div>
<script type="text/javascript">
window.onload = function myFunction()
{
var btn=document.createElement("BUTTON");
document.getElementById("placeButtonHere").appendChild(btn);
}
</script>
</body>
</html>

Related

Manipulate image in div in javascript

I have researched a lot but couldn't find specific solution. How to manipulate image pixels when a button is pressed? This is code I am working on:
HTML:
<html>
<head>
<script type="text/javascript" src="nhome.js"></script>
</head>
<p>Duke img</p>
<button onClick="my()"/>Click Me!</button>
</html>
JavaScript:
function my(){
var devil = new SimpleImage("devil.png");
for(var p in devil.values()){
p.setRed(200);
p.setGreen(100);
}
devil.print();
}
Any suggestions on where I am doing wrong? I am just a beginner in js.

Remove body tag within iframe with jQuery

I'd like to remove an unnecessary header from an iframe contained within the prettyPhoto lightbox plugin that's part of WooCommerce (http://www.shapur.com/product-category/fp-journe/). When you click on the single product button at the bottom of that page, it should remove the body tag contained in the iframe. The iframe conforms to the same origin policy, so that's not it.
I've created a test page here on same domain, which works great: http://www.shapur.com/test.php.
Is there a conflict with the lightbox? I just don't understand. Grateful for any assistance.
Here's the code for the test page:
<!DOCTYPE html>
<html>
<body>
<iframe id="myframe" src="http://shapur.com/index.php"></iframe>
<p>Click the button to change the style of the body tag contained in the iframe.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.getElementById("myframe");
var y = x.contentDocument;
y.body.style.display = "none";
}
</script>
</body>
</html>
Since it's coming from the same origin, why don't you use jQuery load() function:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
function myFunction() {
$(".myDiv").load("/index.php",function(data){
$(data).find('body').css("display","none");
});
}
</script>
And have an empty :
<div class="myDiv"></div>
This way, it would be easier for you to play around with the code.

how to get content of div in a html from another html

I have two html file
a.html
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="content">
hello every one
</div>
</body>
</html>
and another page
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="result">
</div>
<iframe id="ifr" src="http://example.com/a.html">
</iframe>
<script type="text/javascript">
divv = $('#ifr').contents().find('div#content').clone();
$('#result').html(divv.html());
</script>
</body>
</html>
In second one I try to get first html and get contet div in it.after that I put this value to result div .
but It's not work. How can I do that.
You do not need to use an iframe; you can use ajax to do that. It's very straight forward.
$(function() {
$('#result').load('a.html #content',function()
$(this).html( $('#content').html() );
});
});
EDIT
As evident from comments below, scope of question has changed. The two pages are on different domains without CORS. Therefore the above answer would not work.
In order to use ajax, you may want to create a server-side script to act as a proxy. Then you'll call that script on your server and it will fetch the a.html page for you.
I guess that could be the right way.
var ifr = document.querySelector('#ifr');
var html = ifr.contentDocument.querySelector('div#content').innerHTML;
$('#result').html(html);

Show & Hide an element after click

What i want to do is simple. When i click the image, i want some message to appear.
Afterwards, when i click it again i want it to disappear. I have problems iplementing it
due to my lack of jQuery knowledge. I would appreciate some help with the following code, as well as some other implementations. I know i can do something with class="hidden" and have jQuery add/remove it but oh well.
This is what i'm trying to work with.
<!DOCTYPE html>
<html>
<head>
<script>
function greet(){
a = document.getElementById('here');
if (a.trim().length==0){
a.innerHTML = 'message!';
}
else{
a.innerHTML = '';
}
</script>
</head>
<body>
<img src="http://www.clker.com/cliparts/K/9/M/I/M/8/on-button-small-th.png" alt="alt" onclick="greet()"/>
<p id='here'></p>
</body>
</html>
EDIT: seems like i should use a.value, but i must be doing something else wrong too.
If you are using jQuery it is very simple; just use this as your JavaScript (don't forget to link the jQuery main library - I like the Google CDN for that). Just use the toggle function:
function greet() {
$('#here').toggle();
}
Also it is better to register the onClick through jQuery rather than your html (for examplesee this SO question). So that would be like this for the whole page instead :
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$( document).ready(function() {
$("#greet").click(
function () {
$('#here').toggle();
}
);
$("#here").hide();
}
</script>
</head>
<body>
<img id="greet" src="http://www.clker.com/cliparts/K/9/M/I/M/8/on-button-small-th.png" alt="alt"/>
<p id='here'><!--MESSAGE SHOULD BE HERE--></p>
</body>
</html>
Working example in jsFiddle.

Execute JS on page load without using jQuery

So I know that if you use jQuery you can use $(document).load(function(){}); so that any code you write into the function gets executed after the whole page has loaded, but is there a way of doing something similar if you don't use jQuery and just use JS?
For example...
<html>
<head>
<script type="text/javascript">
var box = document.getElementById('box');
alert(box);
</script>
</head>
<body>
<div id="box" style="width:200px; height:200px; background-color:#999;
margin:20px;"></div>
</body>
</html>
If I use this method the alert just says null. So is there a way of making the js code run once the page has loaded?
I use:
<script type="text/javascript">
window.onload = function(){
//do stuff here
};
</script>
This way you don't have to use any onload tags in your html.
The easiest way is to simply put your script at the end of the document, typically just before the closing body tag:
<html>
<head>
</head>
<body>
<div id="box" style="width:200px; height:200px; background-color:#999; margin:20px;"></div>
<script type="text/javascript">
var box = document.getElementById('box');
alert(box);
</script>
</body>
</html>
You can use a variety of methods to accomplish this.
The simplest, easiest method would be to simply add the script tag at the end of your body tag:
<html>
<head>
<title> Example </title>
</head>
<body>
<div>
<p>Hello</p>
</div>
<script type="text/javascript">
// Do stuff here
</script>
</body>
</html>
The way jQuery does it is something similar to:
window.onload = function() {
// Do stuff here
}
I usually just do it the second way, just in case.
To ensure cross-browser compatibility, crawl through the source of jQuery and find what they use.
You can use onload in your body tag.
<head>
<script type="text/javascript">
function doSomething() {
//your code here
}
</script>
</head>
<body onload="doSomething()">

Categories

Resources