First time making a Javascript script from scratch. This works perfectly in Firefox, but when viewed in Chrome or Safari the right sidebar doesn't change opacity at all. This was designed so that when the mouse hovers over the sidebar div, it changes the opacity of the arrow img within that div. The left sidebar is set to be the same, but changes opacity of the div and img.
I designed it this way as the client wanted to see what both look like before coming to a decision which one to keep. Once that decision is made it will just be one or the other, so I need to get the right sidebar fixed up!
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Giterman Designs</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
function changeOpacity(elm, value) {
elm.style.opacity = (value / 100);
elm.style.MozOpacity = (value / 100);
elm.style.KhtmlOpacity = (value / 100);
elm.style.filter = "alpha(opacity=" + (value) + ")";
elm.style.MsFilter = " 'progid:DXImageTransform.Microsoft.Alpha(opacity=" + (value) + ")' ";}
</script>
</head>
<body>
<!-- Left Side: Hover over Div, Div+Image shifts opacity -->
<div id="leftNav" class="sidebar" onMouseOver="changeOpacity(this, 70)" onMouseOut="changeOpacity(this, 20)">
<img src="image/leftNav.png" id="leftButton" class="arrow" alt=""></div>
<!-- Right Side: Hover over Div, Image shifts opacity -->
<div id="rightNav" class="sidebar2" onMouseOver="changeOpacity(rightButton, 70)" onMouseOut="changeOpacity(rightButton, 20)">
<img src="image/rightNav.png" id="rightButton" class="arrow" alt=""></div>
</body>
</html>
and the CSS
body{
background: url("image/bg.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
div#leftNav{
position:absolute; left:0;}
div#rightNav{
position:absolute; right:0;}
/* Left Side-bar */
.sidebar{
background:#000000; width: 55px; height: 100%; top:0; opacity:0.20;}
/* Right Side-bar */
.sidebar2{
background: url("image/bar.png") repeat-y; width: 55px; height: 100%; top:0;}
/* Needed to seperate arrow opacity for Right Side-bar attempt */
#rightButton{
opacity: 0.20;}
img.arrow{
position: absolute; top: 50%; left: 50%; margin: 0 0 0 -35%;}
You code for left:
onMouseOver="changeOpacity(this, 70)"
but for right you are not using this:
onMouseOver="changeOpacity(rightButton, 70)"
Related
This is my first time seeking help for myself on this platform so I apologize if the solution I'm looking for is very easy, I am new to JS... I'm trying to find a way to smoothly transition from the current background image which is black and "white" -- lightest "shade" being #ccc, darkest being #000 -- to a solid #ccc background with the click of a button.
So essentially, I click a button and then the current background transforms into a solid gray background. I managed to do that but it's very abrupt.
Thanks in advance.
HTML:
<body id="bd">
.
.
.
<h2 class="test" onclick="backgroundToGray()" >test</h2>
<script>
function change(){
document.getElementById("bd").style.background='#ccc';
}
</script>
.
.
.
</body>
css:
html, body {
background: #ccc;
background-image: url("background.png");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Here's a solution that uses a CSS transition to fade the background image's opacity to zero, revealing a solid color background underneath.
Because there's no CSS property to set a background image's opacity, I'm using a ::before pseudo element to hold the image and transitioning that entire element's opacity.
This introduces a couple of minor complications. See the code comments for details.
function change(){
// changed to classList.toggle to add/remove a classname
// with each click.
document.getElementById("bd").classList.toggle('grey');
}
#bd {
height: 90vh; /* just ensuring it occupies enough vertical space for the demo */
background: #ccc; /* set the solid background color */
position: relative; /* required for the ::before pseudo-element below to position properly */
}
#bd > * {
position: relative; /* ensures the content appears on top of the ::before element instead of behind it */
}
#bd::before {
content: ''; /* required for pseudo elements to render */
/* position the element to cover the entire parent */
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
/* set up your bg image here, just as you originally had on #bd */
/* changed the image url to something that will render on stackoverflow */
background-image: url("//placekitten.com/400/400");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/* initially fully opaque so the image is visible */
opacity: 1;
/* animate the opacity when it changes over 1 second */
transition: opacity 1s;
}
#bd.grey::before {
/* when the .grey class is present opacity switches to zero. */
/* and because of the transition rule above the change is animated */
opacity: 0;
}
<!-- stripped to its bare minimum just for clarity. no important changes here. -->
<div id="bd">
<h2 class="test" onclick="change()" >test</h2>
</div>
Maybe you should try something like this:
Remove 'html' from css selector
In your HTML file, adjust the change() function so onclick event will add a given class to the body
use this class in CSS and smoothly transition background color with animation property and keyframes.
Below you will find my snippets for that:
body {
background-image: url('./background.png');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
body.animatedColorTransition {
animation: color-transition 0.5s forwards;
}
#keyframes color-transition {
from {
background: #000; /* shade of the background, you can read about linear-gradient */
}
to {
background: #ccc; /* desired shade*/
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body id="bd">
<h2 class="test" onclick="change()">test</h2>
<script>
function change() {
document.getElementById('bd').classList.add('animatedColorTransition');
}
</script>
</body>
</html>
Good luck and tell me if it works for you!
I have an animated background from Codepen (link below) I cannot get my text to float in-front of the background however. I haven't included the js as I dont think it will help
Codepen: https://codepen.io/zessx/pen/ZGBMXZ
Screenshot: https://gyazo.com/37568fdb9681e4c9d67d4d88fc7658ba
I have tried using z-index and using an absolute position isnt helping either.
Index.html Note: I have removed code that is irrelevant
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div id="bg"></div>
<div class="content w3-content" style="width: 80%;margin-left: 10%;">
<h1 class="font w3-jumbo w3-text-black">MOLLY URS</h1>
</div>
</body>
</html>
style.css
.bg {
z-index: 1;
background: -webkit-radial-gradient(center ellipse, #721B94 0%, #210627 100%) no-repeat center center fixed;
background: radial-gradient(ellipse at center, #721B94 0%, #210627 100%);
overflow: hidden;
}
body {
margin: 0;
}
.content {
position: absolute;
z-index: 100;
overflow: hidden;
}
Fixed position to the text container will solve this issue.
<div class="content w3-content" style="width: 80%;margin-left: 10%; position : fixed">
<h1 class="font w3-jumbo w3-text-black">MOLLY URS</h1>
</div>
I have working plunker here [link]
position: absolute should in most cases be paired with top, bottom, left, and/or right. You are missing top:0 or similar. You shouldn't need to change z-index. .content comes later in the DOM, so it'll be "painted" above #bg.
Place html text first, the bg last.
Attach position: fixed; to text container.
I am facing issue while developing one of My jQuery task. As....
I have a responsive Image(Working on all mobile device resolution), My Task is when I click on that image, I want to get a image position on which the image clicked.. I tried to complete this task using Page X and page Y behaviour of jQuery.but it gives the different value when I changed the resolution of screen.
Please help me and give me suggestion or provide a sample how can I do this. I guess position should be same even if the resolution would be different.
I'm not sure understand your issue but i think you want to do this
If i wrong please share your codes and more describe your isssue
$(function (){
'use strict';
$('.img1').click(function (){
$('.img2').css({
'z-index': 3
});
});
$('.img2').click(function (){
$(this).css({
'z-index': 1
});
});
});
.box {
position: relative;
width: 10em;
height: 10em;
}
.box .img1,
.box .img2 {
position: absolute;
width: 10em;
height: 10em;
-webkit-background-size: cover;
background-size: cover;
}
.img1 {
background-image: url(https://lh3.googleusercontent.com/-e8VRnumXmR0/AAAAAAAAAAI/AAAAAAAAAUQ/uk_p3w15PNs/photo.jpg?sz=128);
z-index: 2;
}
.img2 {
background-image: url(https://www.gravatar.com/avatar/5768f7edd993f3f1a5363f6d786d5ace?s=128);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="box">
<div class="img1"></div>
<div class="img2"></div>
</div>
</body>
</html>
You can simply change the CSS z-index by jquery:
$(target).css({
'z-index': 2
});
I am trying to make a background slide show effect. What i have managed to do is to make this slideshow but without any beautifully effect like sliding or other image appearing effect. Can someone help with some advice in creating the effect of sliding or any other more beautiful effects.
Here what I managed to do:
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript" src="function.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body >
<div class='bannerbg'>
<div class='slider'></div>
</div>
</body>
</html>
CSS CODE
body{
margin: 0px;
margin-left: 0px;
}
.bannerbg{
background-size: cover;
position: relative;
height: 500px;
}
.bannerbg img{
width: 100%;
}
.slider{
width: 940px;
height: 360px;
background-color: #FFDF00;
position: relative;
margin: 0 auto;
top: -370px;
}
JavaScript CODE
$(document).ready(init)
images=new Array
(
"img/1.jpg",
"img/2.jpg",
"img/3.jpg",
"img/4.jpg"
);
function init(){
$('.bannerbg').prepend("<img id='principala' src='"+images[1]+"' />")
}
function left() // functia data schimba cu locul indexul din array la stinga cu 1 unitate
{
images.push(images.shift());
}
function change(){
p=document.querySelector("#principala");
p.src=images[1];
}
setInterval("left(); change()",1000);
I slide the elements by using the animate function and by setting the css property and animation time in miliseconds for that element, like that:
jQuery( "#slid_img1" ).animate({marginLeft: 0}, 250);
It slides very nicely then.
So, you could adapt your code to use the animate function to make the slide animate.
So I'm using background-size:cover to achieve the desired effect of a background image that scales to any size of the div it's applied to while maintaining the aspect ratio. Why use this method? The image is being applied as the background using inline CSS, dynamically through PHP, based on what's being set as the image in the correlating WordPress post.
So everything works great, but is there any fallback to ensure this'll work in at least IE8? Possibly some Javascript fixes?
Already tried backstretch and supersized, but to no avail, since they apply the images only to the background of the page.
You can see it in action over here.
In IE8 or below, a foreground image inserted as the child of a div with defined width/height would be the only workaround:
<!doctype html>
<html lang="en">
<head>
<title>Dynamic Image Sizing</title>
<style type="text/css">
html, body { margin:0; padding:0; width:100%; height:100%; overflow:hidden; text-align:left; }
#pseudobg { position:absolute; z-index:1; width:100%; height:100%; }
#scroller { position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2; }
#dyndiv { position: absolute; left: 50%; width: 200px; height: 300px; }
</style>
</head>
<body>
<div id="scroller">
<!-- Insert your content here -->
<div id="dyndiv">
<img id="pseudobg" src="http://www.stackoverflow.com/favicon.ico" alt="" title="" />
</div>
</div>
</body>
</html>
If that is not equivalent, ask Stu Nicholls for further help.
Demo:
I've tried the answer before and it did not work as background-size: cover; is expected, it did in fact fit the image into the size chosen , but it did not clip the excess to the new measures which is what i expected from "cover" option. My solution was found here : http://selectivizr.com/
<html>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="path/to/selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->
<style>
.with-bg-size
{
background-image: url('http://img1.jurko.net/wall/paper/donald_duck_4.jpg');
background-position: center;
/*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img1.jurko.net/wall/paper/donald_duck_4.jpg',sizingMethod='scale');
it didnt work as cover is expected */
width: 200px;
height: 100px;
/* Make the background image cover the area of the <div>, and clip the excess */
background-size: cover;
}
</style>
<body>
<div class="with-bg-size">Donald Duck!</div>
</body>
</html>
If you need to shrink the size of your image, rather than grow it, this approach doesn't work. The best approach I've found avoiding Javascript is superimpose two images on top of each other, on hover make the top one transparent. All other approaches involving resizing the originals (eg, background-size) seem to fail in IE.
CSS:
.social-btn-container {
width:46px;
height:46px;
position:relative;
float: left;
margin-right: 15px;
}
.social-btn-container:hover > .top-btn {
visibility:hidden;
}
.social-btn {
margin:0;
padding:0;
border:0;
width: 46px;
height: 46px;
position: absolute;
left:0;
top:0;
}
.top-btn {
z-index: 1;
}
.top-btn:hover {
opacity: 0;
}
HTML:
<div class="social-btn-container">
<a href="http://www.facebook.com/comunidadintiwarayassi" target="_blank" title="follow us on facebook">
<img src="images/icons/facebook_top.png" class="top-btn social-btn" />
<img src="images/icons/facebook_bottom.png" class="social-btn" />
</a>
</div>
The .social-btn-container:hover > .top-btn part gets this working in IE quirks mode, which doesn't seem to support opacity, and if you use :hover{visibility:hidden} hover becomes false when visibility becomes hidden, causing flickering. (The outer div also positions the images.) I've tested this in FF23, IE standards and quirks (getting IE 10 to emulate 7, 8 and 9), Opera and Safari.
In IE8 or below use separated the background: code:
-webkit Example:
background: url('img/habesha.jpg') no-repeat center center;
-webkit-background-size: cover;
- in IE try:
background-image:url('img/bright_switch.jpg');
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 100% 100%;
More details here: https://msdn.microsoft.com/en-us/library/jj127316(v=vs.85).aspx