whats the problem with this code? It doesn't work on Google Chrome. I want to rotate the picture dynamically with javascript and webkit transform.
<html>
<head>
<title></title>
<script>
document.getElementById('img1').style.webkitTransform = "rotateX(-40deg)";
</script>
</head>
<body>
<img id="img1" src="1.jpg" />
</body>
</html>
Try this instead - the script needs to be executed after the DOM has loaded - so i have moved it to appear after the img element
<html>
<head>
<title></title>
</head>
<body>
<img id="img1" src="1.jpg" />
<script>
document.getElementById('img1').style.webkitTransform = "rotate(-40deg)";
</script>
</body>
</html>
And your using the wrong webkitTransform function ... you should be using rotate
Working example
Rotating over the x-axis is undefined. Use a plain rotate instead. Furthermore, you're trying to refer to an element which does not exist at run-time. Either defer the script load, or:
It's pure CSS, I suggest to replace the whole <script> block with:
<style>
#img1 {
-webkit-transform: rotate(-40deg);
}
</style>
Note: This code will only show a rotation in webkit-based browsers. For optimum browser compatibility, don't forget to use the -moz-, -o- and -ms- and prefixless prefixes.
As scripts run immediately when they are loaded, the script tag in the head of your document has run before the body has been loaded.
If you move the script tag to the end of the body tag, you should find that it doesn't throw errors.
Related
On my index page I have a number of includes.
<section><?php include('content/content1.php') ?></section>
<section><?php include('content/content2.php') ?></section>
<section><?php include('content/content3.php') ?></section>
In each of them I have a unique script (and some other things which is not shown here).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Content1</title>
<link rel="stylesheet" href="content/sketch.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/p5.js"></script>
</head>
<body>
<div class="frame">
<canvas></canvas>
</div>
<script src="content/content1.js"></script>
</body>
The <canvas> tag is what the querySelector in the javascript calls to.
var canvas = document.querySelector('canvas');
This works, but only for the first content file. It seems the querySelector looks at the whole loaded page, instead of just inside the body of the document where the script is placed. Google console says: "Indentifier 'canvas' has already been declared".
I have tried setting an id on the canvas-element:
<canvas id="canvas1"></canvas>
var canvas = document.querySelector('#canvas1');
But it's not working. How do I get around this?
You can use document.currentScript to get the tag of the currently running script tag. From there, you can navigate to its containing section, and from there, get to the canvas descendant.
You should also put everything into an IIFE to avoid global variable collisions.
(() => {
const canvas = document.currentScript.closest('section').querySelector('canvas');
// ...
})();
The below Jquery does not run within my browser even though the syntax is correct( checked via online syntax checker) and the functions do run (tested with pure JS). Why is it that so?
I apologize in advance if the answer to this question is rather simple but after 15min of googling I could not arrive at an answer.
JAVASCRIPT:
document.getElementById('overlay').addEventListener('click', function( {
closeLightBox()
});
function closeLightBox() {
$("#overlay").fadeOut(1000);
}
function lightbox(x) {
}
HTML
<!DOCTYPE html>
<html>
<head>
<title> Lightbox </title>
<link rel="stylesheet" type="text/css" href="lightboxcss.css">
</head>
<body>
<div id = "overlay"> </div>
<img src="batman.jpg" alt="" href="javascript:void(0)" onclick="lightbox(1)" id="batman" style="height:100px;width:160px;margin-left:45%;margin-top:16%;">
<br><br><br><br>
<p> RANDOM TEXT STUFF </p><br><br>
<p> 328ueekfuuirgh40t43h8hohro8ht </p>
<script src="lightboxjs.js"> </script>
</body>
</html>
I assume that javascript code is located in your .js file "lightboxjs.js". Did you include the jQuery library anywhere?
If you don't, start by adding this line <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> before including your custom javascript file.
$(document).ready(function(){
//page is ready
$("#overlay").on("click",function(){
this.fadeOut(1000);
});
});
You cannot add an eventlistener if the dom isnt loaded. Also dont forget to include jquery before executing the upper script
...
Where are you calling the jquery lib? You need to load the jquery just above lightboxjs.js and may as well use jquery syntax to listen to the #overlay click event.
Real simple but I'm starting with javascript so it should be quickly soved
I have this html:
<body>
<div id="content">
<div id="logo">
<noscript>
<img src="fin_palais.png"/>
</noscript>
</div>
</div>
</body>
and i want to select the div with an id of "logo" with javascript to then overwrite the <noscript> with the apropriate file ( a simple browser test to see if you can support SVG )
this innerHTML look like this:
document.getElementById('logo').innerHTML='<content to be added>';
Firebug send me this error: TypeError: document.getElementById("logo") is null
but its right there!
Thanks
okay so here is the full HTML:
<html>
<head>
<META CHARSET="UTF-8">
<title>Bienvenu au Fin Palais</title>
<script type="text/javascript" src="svg_support.js"></script>
<script type="text/javascript">getSvgSupport("fin_palais")</script>
</head>
<body>
<div id="content">
<div id="logo">
<noscript>
<img src="fin_palais.png"/>
</noscript>
</div>
</div>
</body>
</html>
and here's the full svg_support.js I've made;
function getSvgSupport(file)
{
var ua = navigator.userAgent;
if( ua.indexOf("Android") >= 0 )
{
var androidversion = parseFloat(ua.slice(ua.indexOf("Android")+8));
if (androidversion <= 2.3)
{
document.getElementById('logo').innerHTML='<img src="',file,'.png"/>';
}
} else {
document.getElementById('logo').innerHTML='<!--[if lt IE 9]><img src="',file,'.png"/><![endif]--><!--[if gte IE 9]><!--><embed src="',file,'.svg" type="image/svg+xml" /><!--<![endif]-->';
}
}
yes that is the only reason, and since you seem new to javascript I guess this would make more sense to you
window.onload=function(){
document.getElementById('logo').innerHTML='<content to be added>';
}
You see when your script runs you page has not loaded. so you must use window.onload.
Or you can use this too, if your code is in file.js:
<script defer src="file.js"> </script>
this makes sure your code doesn't run unless document is parsed.
You may be trying to run the javascript before the DOM has finished loading. Try this:
$(document).ready(function(){document.getElementById('logo').innerHTML='<content to be added>';});
This assumes you've included jQuery.
As #Thristhart said, you can also use window.onload. This is a built-in javascript event which happens AFTER $(document).ready() does, so you should be safe with that as well.
If using JQuery:
$(document).ready(function(){
$('div#logo').html('<content to be added>');
});
Or
$(function(){
$('div#logo').html('<content to be added>');
});
You don't have to load jQuery if you don't want to it seems like something is off with the chaining of the javascript. When I broke it apart it worked fine.
Fiddle: http://jsfiddle.net/DamianHall/GxghG/
var ele = document.getElementById('logo');
ele.innerHTML = 'content to be added';
Looking at other posts it is an onload issue. The JS fiddle did the onload for me so I didn't notice.
The following code works:
<html>
<head>
<style type="text/css">
img
{
opacity:0.4;
filter:alpha(opacity=40);
}
</style>
</head>
<body>
<img src="http://www.w3schools.com/Css/klematis.jpg" width="150" height="113" alt="klematis"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
<img src="http://www.w3schools.com/Css/klematis2.jpg" width="150" height="113" alt="klematis"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
</body>
</html>
But the problem is you have to repeat the inline JavaScript for all img tags. I tried to put the script in the head to no avail:
<html>
<head>
<style type="text/css">
img
{
opacity:0.4;
filter:alpha(opacity=40);
}
</style>
<script type="text/javascript">
function getElements()
{
var x=document.getElementsByTagName("img");
x.style.opacity=1; x.filters.alpha.opacity=100;
}
</script>
</head>
<body>
<img src="http://www.w3schools.com/Css/klematis.jpg" width="150" height="113" alt="klematis"
onmouseover="getElements()"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
<img src="http://www.w3schools.com/Css/klematis2.jpg" width="150" height="113" alt="klematis"
onmouseover="getElements()"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
</body>
</html>
Everything seems right to me, but it doesn't work.
Many thanks for any help!
Mike
document.getElementsByTagName returns a collection (which is a lot like an array), not an HTMLElementNode. Its members have a style property, but it doesn't have one of its own, and you can't distinguish the element on which the event happened from any other.
A step in the right direction would be:
function makeSolid(element) {
element.style.opacity=1; x.filters.alpha.opacity=100;
}
and then onmouseover="makeSolid(this)"
A further step in the right direction would be to use unobtrusive JavaScript and attach the events using JS instead of using intrinsic event attributes. Due to differences between browsers, using an event handling library to iron out the differences would be wise.
Since this depends on JS, the * initial* styling should be withheld until JS is confirmed to be on. Setting document.body.className = 'js' and then using .js ... as a descendent selector in each CSS ruleset is a popular way to do this.
Since this appears to be simply presentational, a further improvement would be to forget about JavaScript entirely and just do it using CSS:
img {
opacity:0.4;
filter:alpha(opacity=40);
}
img:hover {
opacity:1;
filter:alpha(opacity=100);
}
Pass a reference to the element into the function, using this:
function getElements(x) {
x.style.opacity=1; x.filters.alpha.opacity=100;
}
Called like this:
onmouseover="getElements(this)"
I'm writing text to a page using document.write for a Chrome extension, but the associated custom CSS isn't applied:
<!DOCTYPE html>
<html>
<head>
<title>TITLE GOES HERE</title>
<link rel="stylesheet" href="css/popup.css" type="text/css" />
</head>
<body>
<script type="text/javascript">
...
function showFolder(folder) {
console.debug('FOLDER: '+folder.title);
document.write('<p>'+folder.title+'<br></p>');
}
</script>
</body>
</html>
The CSS is simple, just for debugging:
p {
color: red;
}
I can get it to work if I put the stylesheet link inside the function showFolder, but that can't be the proper way to do it. I'm learning jscript/CSS on the fly, so the answer is probably something remedial. Is the problem in the jscript, the CSS or both?
Use innerHTML.
<div id="towrite"></div>
then you can write in it like this:
div=document.getElementById('towrite');
div.innerHTML = '<p>'+folder.title+'<br></p>';
If you run your document.write() before the page finishes loading (perhaps calling your showFolder call directly from a script on the page), then the text will be written into the document as you might expect.
However, if you call document.write after the page loads, as in an event handler, you will be writing an entirely new page. This is usually not what you want.
Instead, follow Zoltan's advice and set the innerHTML property of an empty div.
I'm not javascript expert... I mainly use jQuery.. but try this, kind of makes sense:
<!DOCTYPE html>
TITLE GOES HERE
<script type="text/javascript">
...
function showFolder(folder) {
console.debug('FOLDER: '+folder.title);
document.write('<p>'+folder.title+'<br></p>');
}
</script>
<link rel="stylesheet" href="css/popup.css" type="text/css" />
EDIT:
So the above didn't work, but I just thought about another solution. When are you actually calling the function? Try to put it in <body onLoad="functionnamehere()">
No idea if that works, but give it a try.