Can someone tell me why this script doesn't run? - javascript

When I open this page nothing happen. So what is the error on this code?
This is the code:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function code(){
var filename = loc.pathname.split("/");
filename = filename[pathname.length-1];
alert(filename);
<iframe src="http://url/" +currentPageUrl scrolling="yes" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
Your browser doesn't support IFrames
</iframe>`
}
</script>
<title>Index</title>
</head>
<body onload="code();">
</body>
</html>

I am not sure what you are trying to do but there are lot of mistakes in your code.
loc should be location
just guessing that your trying something similar to this.
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function code() {
var filename = location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
document.body.innerHTML = "<iframe src=" + filename + " scrolling='yes' style='position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;'>your browser doesn't support iframe<iframe>";
}
</script>
<title>Index</title>
</head>
<body onload="code();">
</body>
</html>

Because you don't have a valid script there.
loc is undefined.
You just have an iFrame tag flying around in your JS code.

There are several issues with this code:
loc looks like it's not defined. Maybe you want location
To add code to the DOM, you could use:
document.body.innerHTML = "<iframe src='http://' + variable ></iframe>"
Make sure all other variables are defined. i.e. use location.pathname when getting the length.

Related

How to get mouse position from a iframe that contains a page?

I want to get mouse position from an IFRAME that contains a HTML page .
But before Iframe HTML page load , this code work nice .
After loading Iframe HTML page , this code don't work !
Here is my code :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="utf-8" />
<style>
#divid {
height: 600px;
width: 300px;
border: 2px solid black;
transform: scale(0.5, 0.5);
}
</style>
</head>
<body>
<iframe id="iframe" src="http://www.google.com/" >
</iframe>
<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script>
var iframepos = $("#iframe").position();
$('#iframe').contents().find('html').on('mousemove', function (e) {
var x = e.clientX + iframepos.left;
var y = e.clientY + iframepos.top;
console.log(x + " " + y);
})
</script>
</body>
</html>
can you help me please ?

Changing Colour of a Div with JS

So, I have a simple onclick function set up that is supposed to change the background of a div. Here is my JS code;
var colour = document.getElementById("backgroundColour");
function changeToColour1() {
colour.style.backgroundColor = "#47535F";
}
function changeToColour2() {
colour.style.backgroundColor = "#82A3B2";
}
Here is my HTML code;
<button id="colour1" class="colours" onclick="changeToColour1()"></button>
<button id="colour2" class="colours" onclick="changeToColour2()"></button>
<div id="backgroundColour"></div>
How would I get the div to change its colour when the button is clicked?
a much cleaner way of doing this would be to just use javascript to add classes to your elements, and let CSS control the colors.
$('#colour1').on('click',function(){
$('#backgroundColour').removeClass('colour1 colour2').addClass('colour1');
});
$('#colour2').on('click',function(){
$('#backgroundColour').removeClass('colour1 colour2').addClass('colour2');
});
and in your CSS put
#backgroundColour.colour1 {
background-color: #47535F;
}
#backgroundColour.colour2 {
background-color: #82A3B2;
}
Give the Div a proper width and height or some content, otherwise the
div cannot be seen.
Avoid inline event handlers and use DOM3 event handlers.
You can also use data-* attributes to store the colors instead of
having a seperate function for each button.
HTML
<button id="colour1" class="colours" data-color="#47535F" >Click me</button>
<button id="colour2" class="colours" data-color="#82A3B2">Click me</button>
<div id="backgroundColour">fff</div>
JS
var colourDiv = document.getElementById("backgroundColour");
var colours = document.getElementsByClassName('colours');
for(var i=0; i< colours.length; i++) {
colours[i].addEventListener('click', function() {
var color = this.getAttribute('data-color');
colourDiv.style.backgroundColor = color;
});
}
Check Fiddle
first and foremost i recommend you to use JQuery for the task you are trying to accomplish, im recommending you do for the simple fact JQuery is a simple straight forward library for javascript that makes our lives as coders a lot more simple, now that im done saying that here is the code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta http-equiv="content-language" content="en-US" />
<title>...</title>
<style type="text/css">
html, body{
width:auto;
height:auto;
}
#changing{ /*this is the css for our javascript*/
margin:0px;
padding:0px;
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
}
#wrap{ /*this is to keep the browse menu that has your buttons from disappearing below the changing div*/
margin:0px;
padding:0px;
width:100%;
height:40px;;
background-color:#000000;
border-bottom:5px solid #D8D8D8;
border-radius:0px;
position:fixed;
top:0px;
left:0px;
z-index:10;
}
#button1, #button2{
margin:0px;
padding:0px;
width:auto;
height:auto;
position:fixed;
}
#button1{
top:0px;
left:0px;
}
#button2{
top:0px;
right:0px;
}
</style>
<script rel="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="body-container">
<div id="wrap">
<input type="button" id="button1" value="click me" />
<input type="button" id="button2" value="click me 2" />
</div>
<div id="changing">
</div>
</div>
<script>
$("#button1").click(function(){
$("#changing").css("background-color", "#47535F");//changes the color of the background to #47535F
})
$("#button2").click(function(){
$("#changing").css("background-color", "#82A3B2");//changes the color of the background to #82A3B2
})
</script>
</body>
</html>
in this code we use inline css and javascript with the JQuery library, we first start the document how we should always start a html document by adding the DOCTYPE and our meta tags with the attributes content-type and content-language we also add a title.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta http-equiv="content-language" content="en-US" />
<title>...</title>
</head>
<body>
</body>
</html>
next we add our our script to import the JQuery library, i usually go with the google hosted version because its usually up and running and i dont have to constantly update it , google does that for you, the only thing you need to do is add the new url in the src to replace the old version of JQuery.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta http-equiv="content-language" content="en-US" />
<title>...</title>
<script rel="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
</body>
</html>
next we add our html, in our html we added two buttons and placed them in a div called wrap and added our changing div and placed both the changing div and the wrap div into a div called body-container.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta http-equiv="content-language" content="en-US" />
<title>...</title>
<script rel="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="body-container">
<div id="wrap">
<input type="button" id="button1" value="click me" />
<input type="button" id="button2" value="click me 2" />
</div>
<div id="changing">
</div>
</div>
</body>
</html>
now time to add the icing to the cake with our script and css, here we added our css to determine the style of our page we made ours so that the browse menu were are buttons are located scroll with the page and are always onto, now onto the script, we made our script so that if the button is pressed it will change the background of the div body-container.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta http-equiv="content-language" content="en-US" />
<title>...</title>
<style type="text/css">
html, body{
width:auto;
height:auto;
}
#changing{ /*this is the css for our javascript*/
margin:0px;
padding:0px;
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
}
#wrap{ /*this is to keep the browse menu that has your buttons from disappearing below the changing div*/
margin:0px;
padding:0px;
width:100%;
height:40px;;
background-color:#000000;
border-bottom:5px solid #D8D8D8;
border-radius:0px;
position:fixed;
top:0px;
left:0px;
z-index:10;
}
#button1, #button2{
margin:0px;
padding:0px;
width:auto;
height:auto;
position:fixed;
}
#button1{
top:0px;
left:0px;
}
#button2{
top:0px;
right:0px;
}
</style>
<script rel="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="body-container">
<div id="wrap">
<input type="button" id="button1" value="click me" />
<input type="button" id="button2" value="click me 2" />
</div>
<div id="changing">
</div>
</div>
<script>
$("#button1").click(function(){
$("#changing").css("background-color", "#47535F");//changes the color of the background to #47535F
})
$("#button2").click(function(){
$("#changing").css("background-color", "#82A3B2");//changes the color of the background to #82A3B2
})
</script>
</body>
</html>
i hoped this helped, for any information on JQuery i recommend you go visit their online documents, they have a lot of useful info there, here is the link
http://api.jquery.com/
you can also check out w3chools they have a lot of good stuff on JQuery as well as many other programming languages, here is the link
http://www.w3schools.com/
best of luck with your project or learning the javascript language (=

Using a prompt to change text inside of a div [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 9 years ago.
Ok so I have this simplified code of what I am trying to do on this page. I want the browser to display a prompt as soon as they load the page asking for their name. Once they answer what their name is it takes that variable (name) and writes it inside of the div with the id "welcomeText". It just won't work for some reason... Please help thanks.
Heres my code. Put it all inside of a html index to make it easier to read.
<title>Welcome to Validus</title>
<style>
#welcomeText {
font-family:Verdana;
font-size:12px;
color:black;
width:100px;
height:100px;
margin:0px auto;
}
</style>
<script type="text/javascript">
var name=prompt("Hey! Welcome to Validus! Whats your name?", "Name");
document.getElementById("welcomeText").innerHTML = "Hey" + " " + name + "! " + "Welcome to validus...";
</script>
</head>
<body>
<div id="welcomeText">
</div>
</body>
Move the script to the bottom, just before the closing body-tag. Otherwise, 'welcomeText' doesn't yet exist on the page to refer to.
window.onload is launched when the page has finished loading.
there are also other many ways to acomplish what u need...
window.onload=func;
window.addEventListener('load',func,false);
window.addEventListener('DOMContentLoaded',func,false);
or just append your javascript at the end of your body tag. <script></script></body>
window.addEventListener('DOMContentReady',func,false);
using jquery...
the most common and compatible is window.onload.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Validus</title>
<style>
#welcomeText {
font-family:Verdana;
font-size:12px;
color:black;
width:100px;
height:100px;
margin:0px auto;
}
</style>
<script type="text/javascript">
window.onload=function(){
var name=prompt("Hey! Welcome to Validus! Whats your name?", "Name");
document.getElementById("welcomeText").innerHTML = name;
}
</script>
</head>
<body>
<div id="welcomeText"></div>
</body>
</html>
To demonstrate using document.createTextNode as per my comment.
Also see window.onload and addEventListener
Notes
The load event fires at the end of the document loading process. At
this point, all of the objects in the document are in the DOM, and all
the images and sub-frames have finished loading.
addEventListener is not supported on older versions of IE (IE < 9) and you need to use attachEvent instead.
HTML
<div id="welcomeText"></div>
CSS
#welcomeText {
font-family:Verdana;
font-size:12px;
color:black;
width:100px;
height:100px;
margin:0px auto;
}
Javascript
function doWelcome() {
window.removeEventListener("load", doWelcome);
var name = prompt("Hey! Welcome to Validus! Whats your name?", "Name");
document.getElementById("welcomeText").appendChild(document.createTextNode("Hey" + " " + name + "! " + "Welcome to validus..."));
}
window.addEventListener("load", doWelcome, false);
On jsfiddle
Here's an example using jQuery...
The key is using $(document).ready(function() {} ); so that the DIV exists in the DOM before the javascript tries to update it.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<style>
table, tr, td {border:1px solid green;border-collapse:collapse;padding:5px 5px;}
</style>
<script type="text/javascript">
$(document).ready(function() {
var name=prompt("Hey! Welcome to Validus! Whats your name?", "Name");
$("#welcomeText").html("Hey" + " " + name + "! " + "Welcome to validus...");
}); //END $(document).ready()
</script>
</head>
<body>
<div id="welcomeText"></div>
</body>
</html>

Javascript function subtract from div not working.

I want to subtract 50px from a div with a javascript function when it is called. Why isnt this working?
<!DOCTYPE html>
<html>
<head>
<script>
function resizeDiv(id)
{
obj.style.height = ( parseFloat( obj.style.height ) - 50 ) + 'px';
}
</script>
<style type="text/css">
#divId{
background:blue;
width:300px;
height:100px;
</style>
</head>
<body>
<button onclick="resizeDiv('divId')">Try it</button>
<div id="divId"></div>
</body>
</html>
You do not define obj or a style property for height, and missed a bracket in the css:
<!DOCTYPE html>
<html>
<head>
<script>
function resizeDiv(id){
var obj=document.getElementById(id);
if(obj){
obj.style.height= (obj.offsetHeight- 50)+ 'px';
}
}
</script>
<style type= "text/css">
#divId{
background:blue;
width:300px;
height:100px;
}
</style>
</head>
<body>
<button onclick="resizeDiv('divId')">Try it</button>
<div id="divId"></div>
</body>
</html>

How to add wrapper and bind to certain element

I am having 2 issues with my code:
I want to limit the effects of the script to the div <div id="photo">
How can I make a sub layer to the script so that all the elements in the page don`t change position when the animation is triggered.
This is my code hope you can help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.selected { border-style:solid; border-width:10px; border-color:#C00; margin:auto; z-index:2;}
#cret {
position:relative;
z-index:3;
border-style:solid; border-width:5px; border-color:#000000;
padding: 10px 10px 10px 10px;
margin:auto;
width:620px;
height:420px;
}
img {
position:static;
z-index:1;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"/></script>
</head>
<body>
<script type="text/javascript"/>
$(document).ready(function() {
$('img').width('10%').height('10%');
$('img').on("click", function() {
$(this).wrap('<div id="cret"/>');
$(this).animate({width:'600px', height:'400px'}).addClass("selected");
});
$(document).on("click", function(){
$("img").unwrap();
});
$('img').click(function(){ return false; });
$('#cret').click(function(){ return false; });
$(document).on("click", function(){
$('img').animate({width:'10%', height:'10%'}).removeClass("selected");
});
$('img').click(function(){ return false; });
$('#cret').click(function(){ return false; });
});
</script>
<div id="photo">
<img src="image source"/>
<img src="image source"/>
</div>
</body>
</html>
To limit the scope of the selector, you can specify a more precise jquery selector
instead of $('img') $('#photo img'); it will affect only img present in photo id div.
you should review your selector and the animate will be more effectively use in correct one...
like put your animate only on img.selected.
Hope it helps http://api.jquery.com/category/selectors/

Categories