some issue with google chrome, center image must be on top, but they don't.
Please try following code to repeat this issue:
<!DOCTYPE html>
<html>
<head>
<script>
function big_image(myelem) {
myelem.style.webkitTransform = 'scale(2.0)';
myelem.style.zIndex = '99';
}
function orig_image(myelem) {
myelem.style.webkitTransform = 'scale(1.0)';
myelem.style.zIndex = 'auto';
}
</script>
</head>
<body>
<img src="http://www.pewforum.org/files/2015/10/PF_15.10.05_PostPapal_promo260x260.jpg" onmouseover="big_image(this);" onmouseout="orig_image(this);">
<img src="http://www.pewforum.org/files/2015/10/PF_15.10.05_PostPapal_promo260x260.jpg" onmouseover="big_image(this);" onmouseout="orig_image(this);">
<img src="http://www.pewforum.org/files/2015/10/PF_15.10.05_PostPapal_promo260x260.jpg" onmouseover="big_image(this);" onmouseout="orig_image(this);">
</body>
</html>
How to fix / overcome it?
Thanks.
There is a bug to do with z-index and transform properties.
The best way to avoid it, will be to reset transform property onmouseout:
function big_image(myelem) {
myelem.style.webkitTransform = 'scale(2.0)';
myelem.style.zIndex = '2';
}
function orig_image(myelem) {
myelem.style.webkitTransform = 'none';
myelem.style.zIndex = '1';
}
Tested and works as expected on Chrome/Opera.
Related
I am trying to understand why neither of the commented out scripts work. When I step through the code in the console they are both returning the correct variable values but neither of the commented out code changes the image size. I would think that either one of commented set of scripts would be the correct as opposed to the way that works. If someone could please help me with what I am not understanding it would be greatly appreciated. thanks
<!DOCTYPE html>
<html>
</head>
<body>
<img onmouseover = "increaseSize(this)" id="img2" width="400px" height="400px" src="20191128chichenitza.jpg" title="Chichenitza">
<script>
function increaseSize(y) {
var currWidth = y.clientWidth*1.50;
var currHeight = y.clientHeight*1.50;
y.width = currWidth;
y.height = currHeight;
/*document.getElementById("img2").style.width = currWidth;
document.getElementById("img2").style.height = currHeight;
or
y.style.width = currWidth;
y.style.height = currHeight;
*/
}
</script>
</body>
</html>
The value of .style.width must be set in the same way as you would in CSS. Therefore, y.style.width = currWidth + "px";
First, I am completely new to coding and have been using self-teaching tools to learn Javascript in my free time. I've learned enough to start building my own projects. My first attempt is to build a randomizer (in this case, random restaurant names). The Javascript works through my tests in the console as do the buttons. However, I cannot seem to get the .innerHTML to work and I'm not sure what I'm missing. I've done several searches here and none of the solutions I've found seem to be working.
The error I'm getting is listed in the title and it is appearing at line 29.
Here is Javascript:
var randomRestaurant = {
restaurantName: [],
findRestaurant: function() {
var restaurantName = Math.random();
if (restaurantName < 0.20) {
this.restaurantName.push("China Taste");
}
else if (restaurantName < 0.40) {
this.restaurantName.push("Pizza Johns");
}
else if (restaurantName < 0.60) {
this.restaurantName.push("Liberatore's");
}
else if (restaurantName < 0.80) {
this.restaurantName.push("Bill Bateman's");
}
else {
this.restaurantName.push("R&R Taqueria");
}
},
clearRestaurant: function() {
randomRestaurant.restaurantName.splice(0, 1);
}
};
var randomRestaurantButton = document.getElementById('randomRestaurantName');
randomRestaurantButton.addEventListener('click', function() {
randomRestaurant.findRestaurant();
document.getElementById("restaurantNameDisplay").innerHTML = randomRestaurant.restaurantName[0]; //<--line 29
});
var randomRestaurantButton = document.getElementById('refreshRestaurant');
randomRestaurantButton.addEventListener('click', function() {
randomRestaurant.clearRestaurant();
randomRestaurant.findRestaurant();
document.getElementById("restaurantNameDisplay").innerHTML = randomRestaurant.restaurantName[0];
});
And here is my HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div><h1>Random Restaurant!</h1>
<button id="randomRestaurantName">Click me for a random restaurant!</button>
</div>
<br>
<h2="restaurantNameDisplay"></h2="restaurantNameDisplay">
<div>
<br>
<button id="refreshRestaurant">Nah. Give me another one.</button>
</div>
</body>
<script src="script.js"></script>
</html>
Thanks for your help and hopefully it's not due to something stupid like a typo.
There are some problems here.
the h2 tag id should be
<h2 id="restaurantNameDisplay"></h2>
your buttons are set on the same variable name, change the second to
var refreshRestaurantButton = document.getElementById('refreshRestaurant');
refreshRestaurantButton.addEventListener('click', function () {
randomRestaurant.clearRestaurant();
randomRestaurant.findRestaurant();
document.getElementById("restaurantNameDisplay").innerHTML = randomRestaurant.restaurantName[0];
});
If it's still not working, you should call your script after the page load event.
so insert your javascript code to a function (e.g. "myFunc()") and change your html body tag to:
body onload="myFunc()">
Most probably this line <h2="restaurantNameDisplay"></h2="restaurantNameDisplay"> should be
<h2 id="restaurantNameDisplay"></h2>
I tried to adapt some code I found on youtube and ran into some trouble. I can switch through images fine, but I can't seem to adapt the code to transition through background images.
Here is my code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled</title>
<link type="text/css" rel="stylesheet" href="slideshow.css"/>
</head>
<body>
<script src="slideshow.js"></script>
</body>
</html>
and
html {
min-height:100%;
}
body {
background-image:url("Summer.jpg");
background-repeat:no-repeat;
background-size:cover;
}
and
//JavaScript Document
var myImage=document.body.style.backgroundImage;
var imageArray=["Summer.jpg", "Autumn.jpg", "Winter.jpg"];
var imageIndex=0;
function changeImage () {
document.body.style.backgroundImage=myImage;
myImage.setAttribute("url", imageArray [ imageIndex]);
imageIndex++;
if (imageIndex>=imageArray.length) {
imageIndex=0;
}
}
var intervalHandle = setInterval(changeImage,2000);
I am a complete novice here so if I am missing something obvious, please point me in the right direction to read up on it. Thanks.
Instead of
document.body.style.backgroundImage=myImage;
myImage.setAttribute("url", imageArray [ imageIndex]);
do
document.body.style.backgroundImage = "url(" + imageArray[imageIndex] + ")";
All you need to do is set the backgroundImage property of the body's style to the appropriate "url(...)" syntax. Replace your changeImage function with this one:
function changeImage () {
document.body.style.backgroundImage = "url(" + imageArray[imageIndex] + ")";
imageIndex++;
if (imageIndex>=imageArray.length) {
imageIndex=0;
}
}
What you were doing with myImage.setAttribute wouldn't work because myImage isn't a DOM element and doesn't have a setAttribute method.
I'm having some trouble trying to get a fairly simple popupper to work. The idea is that the parent should open a popup window and then append a div in it.
The relevant parts of the code:
parent.html:
var childWindow;
function togglePref() {
childWindow = window.open("popup.html", "prefPopup", "width=200,height=320");
}
function loadPopupElements() {
var prefElements = document.getElementById("prefBrd").cloneNode(true);
var childDoc = childWindow.document;
var childLink = document.createElement("link");
childLink.setAttribute("href", "pop.css");
childLink.setAttribute("rel", "stylesheet");
childLink.setAttribute("type", "text/css");
childDoc.head.appendChild(childLink);
childDoc.body.appendChild(prefElements);
}
popup.html:
<head>
</head>
<body onload="opener.loadPopupElements();">
</body>
This works fine with Safari and Chrome, but for some reason IE refuses to append anything.
Ok, I managed to work around the problem with a uglyish solution using innerHTML. Apparently, as Hemlock mentioned, IE doesn't support appending children from a another document. Some suggested to take a look at the importNode() method but I seemed to have no luck with it either.
So, the workaround goes as follows:
parent.html:
var childWindow;
function togglePref() {
childWindow = window.open("popup.html", "prefPopup", "width=200,height=320");
}
function loadPopupElements() {
var prefElements = document.getElementById("prefBrd");
var childDoc = childWindow.document;
childDoc.body.innerHTML = prefElements.innerHTML;
}
popup.html:
<head>
<link href="pop.css" rel="stylesheet" type="text/css">
</head>
<body onload="loadElements();">
</body>
<script type="text/javascript">
function loadElements() {
opener.loadPopupElements();
}
</script>
This seems quite a nasty way to go because in my case the #prefBrd contains some input elements with dynamically set values, so in order for the popup.html to grab them, it has to do a bit of iteration at the end of the loadElements() function, which wouldn't have been necessary using appendChild.
Here's a very basic question: why is the finishLoading() function in the code below not able to access the 'opacity' property for the #myStyle CSS selector? The alert doesn't display anything, and I've verified that the 'opacity' property is 'false'.
Thanks very much!
<html>
<head>
<style type="text/css">
<!--
#myStyle
{
opacity: 0.50;
}
-->
</style>
<script type="text/javascript">
<!--
function finishedLoading()
{
alert(document.getElementById('myStyle').style.opacity);
}
-->
</script>
</head>
<body onload="finishedLoading();">
<div id="myStyle">
hello
</div>
</body>
</html>
You can get the values set through class only after their computation.
var oElm = document.getElementById ( "myStyle" );
var strValue = "";
if(document.defaultView && document.defaultView.getComputedStyle)
{
strValue = document.defaultView.getComputedStyle(oElm, null).getPropertyValue("-moz-opacity");
}
else if(oElm.currentStyle) // For IE
{
strValue = oElm.currentStyle["opacity"];
}
alert ( strValue );
The problem is, that element.style.opacity only stores values, that are set inside the element's style attribute. If you want to access style values, that come from other stylesheets, take a look at quirksmode.
Cheers,
I suggest you take a look at jQuery and some of the posts at Learning jQuery, it will make doing things like this very easy.
Opacity should be a number rather than a boolean. Is it working in any other browseR?
this link help
http://www.quirksmode.org/js/opacity.html
function setOpacity(value) {
testObj.style.opacity = value/10;
testObj.style.filter = 'alpha(opacity=' + value*10 + ')';
}
opacity is for Mozilla and Safari, filter for Explorer. value ranges from 0 to 10.