My Body Won't Slide Over - javascript

I wrote up this JQuery/JavaScript to slide a menu into the website, and the body moves out of the way, but the body doesn't seem to be moving out of the way. The menu does slide in, only the body doesn't. I've posted all my JavaScript, HTML, and CSS.
var main = function(){
$('.icon').click(function()
{
$('.menu').animate({
left: "0px"
}, 200);
$('body').animate({
left:"300px"
}, 200);
});
};
$(document).ready(main);
#charset "utf-8";
body {
background-image: url(http://wallpapercave.com/wp/U7rb02o.jpg);
background-size: cover;
left: 0px;
position: relative;
margin: 0px;
overflow: hidden;
top: 0px;
right: 0px;
bottom: 0px;
}
.menu {
background-image: url((https
://image.freepik.com/free-vector/white-cubes-pattern_1053-248.jpg))
background: url("https://image.freepik.com/free-vector/white-cubes-pattern_1053-248.jpg");
background-repeat: repeat;
background-position: left top;
background-image: url(http://wallpapers.ae/wp-content/uploads/2014/10/Black-Pattern-Background-Wallpaper.jpg);
height: 100%;
width: 300px;
position: fixed;
left: -300px;
cursor: pointer;
}
.icon {
padding-top: 25px;
padding-right: 0px;
padding-left: 25px;
padding-bottom: 25px;
width: 75px;
cursor: pointer;
height: 40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Test</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="body">
<div class="icon">
</div>
</div>
<div class="menu">
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>

Related

JQuery/CSS Animation of Sprite image

I have a sprite image containing 4 different pictures. They are 520px in height. I would like animate them sliding from the first picture to the last picture. I am able to get them to flip through images, however I cannot get them to slide smoothly. Also, when the last image is reached, I need to slide back to the first image. I am unsure how to do this, this is my current code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>FVRC Pics</title>
<meta charset="UTF-8">
<link type="text/css" href="styles/normalize.css" rel="stylesheet" />
<link type="text/css" href="styles/my_style.css" rel="stylesheet">
</head>
<body>
<h1> Fox Valley Runner Club</h1>
<div class="container">
<div id="slider">
<div id="leftArrow"</div>
<div id="rightArrow"></div>
</div>
</div>
<div id="startApp">
<ul>
<li>Start here!</li>
</ul>
</div>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>-->
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$("#leftArrow").click(function() {
$("#slider").css("backgroundPostionX","+=792px");
});
$("#rightArrow").click(function() {
$("#slider").css("backgroundPostionX","-=792px");
});
});
</script>
</body>
</html>
CSS:
h1 {
color: #0000ff; /*blue*/
font-size: 44px;
padding-left: 10%;
}
.container {
max-height: 520px;
background-color: #808080; /*grey*/
}
#leftArrow, #rightArrow {
display: inline-block;
width: 38px;
height: 50px;
}
#leftArrow {
position: relative;
/*top: 0;*/`enter code here`
top: 235px;
left: 2%;
width: 5%;
height: 50px;
background: url('../images/left_arrow.png') 0 0 no-repeat;
z-index: 10;
}
#rightArrow {
position: relative;
/*top: 0;*/
top: 235px;
left: 87.5%;
width: 5%;
height: 50px;
background: url('../images/right_arrow.png') bottom right no-repeat;
z-index: 10;
}
#slider {
position: relative;
height: 520px;
max-width: 792px;
margin: 0 auto;
/*background: url("../images/Animate-Sprite_520a.png") -0 0 no-repeat;*/
background-image: url('../images/Animate-Sprite_520a.png');
background-repeat: no-repeat;
}
#startApp {
width: 235px;
margin: 0 auto;
}
#startApp ul {
list-style-type: none;
}
#startApp ul li a {
display: inline-block;
text-decoration: none;
width: 150px;
text-align: center;
background-color: steelblue;
border: 2px solid #808080;
color: white;
font-size: 32px;

CSS - JavaScript Not Being Implemented

I fetched an html file using fetch api and took the div components and embedded them into another html file. The css is not being applied after the process is complete. Nor is the javascript file being called. I checked the file paths and they are correct. Does the css and javascript tags not transfer over when they are fetched using the fetch api?
***Main script.js***
let testSide = document.querySelector('#test-sidebar')
let htmlUrl = './TextBox/index.html'
fetch(htmlUrl)
.then((result)=>{
return result.text()
}).then((html)=>{
var parser = new DOMParser();
var doc = parser.parseFromString(html, 'text/html')
var doDo = doc.querySelector('.parent-container')
testSide.appendChild(doDo)
}).catch((error)=>{
console.log(error)
})
***Main HTML File***
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>To Do</title>
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href='style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="test-sidebar">
</div>
<script src="script.js"></script>
</body>
</html>
***Second Html File***
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Notbox</title>
<link rel="stylesheet" href="style.css">
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="parent-container">
<!---Select items------>
<div class="container">
<div class="header">
</div>
<div class="content">
<div class="items-content">
<ul class="list" id="list">
</ul>
</div>
<button type="button" class="create-text-box">Create Text Box</button>
</div>
</div>
<!--Display notebox-->
<div class="notebox-container">
<div class="header">
</div>
<div class="content">
<div class="items-content">
<textarea class="list" id="noteList" ></textarea>
</div>
<button type="button" class="copy-text">Copy Text</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
***CSS of second html file***
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
position: relative;
width: 100%;
height: 100vh;
font-family: 'Titillium Web', sans-serif;
}
/*------------------------container-----------------------*/
.parent-container{
position: relative;
width: 100%;
height: 540px;
max-height: 5400px;
}
/*------------------------container-----------------------*/
.container{
position: absolute;
top: 0;
left: 10px;
width: 400px;
margin: 0 auto;
box-shadow: 5px 5px 8px rgb(171, 178, 185);
border-radius: 15px 15px 0 0;
}
/*--------------------------header-----------------------*/
.header{
position: relative;
width: 100%;
height: 150px;
background-color: #2E86C1;
border-radius: 15px 15px 0 0;
}
/*---------------------------content------------------------*/
.content{
position: relative;
width: 100%;
height: 390px;
max-height: 390px;
background-color: #EAEDED;
overflow: hidden;
}
.content::-webkit-scrollbar{
display: none;
}
.content ul{
padding: 0;
margin: 0;
}
.items-content{
position: relative;
width: 100%;
height: calc(100% - 35px);
max-height: calc(100% - 35px);
overflow: auto;
border-bottom: 1px solid #D6DBDF;
}
.item{
position: relative;
border-bottom: 1px solid #EBEDEF;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 45px;
min-height: 45px;
background-color: white;
display: flex;
align-items: center;
cursor: pointer
}
.item:hover{
background-color: #EAECEE
}
.item p{
position: absolute;
padding-left: 35px;
height: 45px;
line-height: 45px;
width: 100%;
white-space: nowrap;
}
/*--------------------------Create Text Box--------------------------*/
.create-text-box{
position: absolute;
border: none;
outline: none;
width: 100%;
height: 35px;
bottom: 0;
left: 0;
background-color: #21618C;
color: white;
cursor: pointer
}
/*For note box*/
/*------------------------notbox container-----------------------*/
.notebox-container{
position: absolute;
top: 0;
right: 10px;
width: 400px;
margin: 0 auto;
box-shadow: 5px 5px 8px rgb(171, 178, 185);
border-radius: 15px 15px 0 0;
}
/*--------------------------header-----------------------*/
.notebox-container .header{
position: relative;
width: 100%;
height: 150px;
background-color: #2E86C1;
border-radius: 15px 15px 0 0;
}
/*---------------------------content------------------------*/
.notebox-container .content{
position: relative;
width: 100%;
height: 390px;
max-height: 390px;
background-color: #EAEDED;
overflow: hidden;
}
#noteList
{
resize: none;
font-size: 15px;
font: serif;
color: #28B463;
text-align: center;
/*font-weight: bold;*/
border: none;
height: calc(100% - 35px);
width: 100%;
}
.notebox-container .content::-webkit-scrollbar{
display: none;
}
.notebox-container .content ul{
padding: 0;
margin: 0;
}
.notebox-container .items-content{
position: relative;
width: 100%;
height: calc(100% - 35px);
max-height: calc(100% - 35px);
overflow: auto;
border-bottom: 1px solid white;
}
.notebox-container .item{
position: relative;
border-bottom: 1px solid white;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 45px;
min-height: 45px;
background-color: white;
display: flex;
align-items: center;
}
.notebox-container .item p{
position: absolute;
padding-left: 35px;
height: 45px;
line-height: 45px;
width: 100%;
white-space: nowrap;
text-align: center;
}
/*--------------------------Create Text Box--------------------------*/
.notebox-container .copy-text{
position: absolute;
border: none;
outline: none;
width: 100%;
height: 35px;
bottom: 0;
left: 0;
background-color: #21618C;
color: white;
cursor: pointer
}
.notebox-container #remove{
color: #28B463;
}
The issue I believe is due to the use of href
href linking is the method for including an external style sheet on your web pages. It is intended to link your page with your style sheet. Whereas importing allows you to import one style sheet into another.
Use:
<style>
#import url(YOUR/FILE/PATH)
</style>
Its good practice to place css files in a subfolder located within the main folder your html is stored. This subfolder is labelled static
e.g. main folder
main folder
index.html
static
style.css
<style>
#import url("static/style.css")
</style>
Try replacing your fetch code with this:
fetch(htmlUrl)
.then((result)=>{
return result.text()
})
.then((html)=>{
var doc = document.createRange().createContextualFragment(template);
testSide.appendChild(doc);
}).catch((error)=>{
console.log(error)
})
createContextualFragment renders the Second Html File and load all its scripts
Load .css from Main Html file will work fine.
var doDo = doc.querySelector('.parent-container') here you load only parent-container div element. No css found on here. so if you want to load css from Second Html file then you should write/load css and javascript inner side of parent-container div. ex:
<div class="parent-container">
<link rel="stylesheet" href='style.css'> <!---change here[2]------>
--------
-------
If you try this on local machine you may face this error
Fetch API cannot load file:///C:/....*.html. URL scheme "file" is not supported.
Try in on Localhost or on an online server. you may not found this problem.
Main HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="test-sidebar">
</div>
<script>
let testSide = document.querySelector('#test-sidebar');
let htmlUrl = 'index.html';
fetch(htmlUrl)
.then((result) => {
return result.text()
}).then((html) => {
var parser = new DOMParser();
var doc = parser.parseFromString(html, 'text/html')
var doDo = doc.querySelector('.parent-container')
console.log('doc', doDo)
testSide.appendChild(doDo)
}).catch((error) => {
console.log(error)
})
</script>
<link rel="stylesheet" href='style.css'> <!---change here[1]------>
</body>
</html>
Second Html File
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Notbox</title>
<link rel="stylesheet" href="style.css"> <!-- change here[2] -->
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="parent-container">
<link rel="stylesheet" href="style.css"> <!---change here[2]------>
<!---Select items------>
<div class="container">
<div class="header">
</div>
<div class="content">
<div class="items-content">
<ul class="list" id="list">
</ul>
</div>
<button type="button" class="create-text-box">Create Text Box</button>
</div>
</div>
<!--Display notebox-->
<div class="notebox-container">
<div class="header">
</div>
<div class="content">
<div class="items-content">
<textarea class="list" id="noteList" ></textarea>
</div>
<button type="button" class="copy-text">Copy Text</button>
</div>
</div>
</div>
</body>
</html>
Output:

Why the jquery is not working?

In the head tags i did:
<head>
<link rel="stylesheet" type="text/css" href="carousel.css">
<link rel="stylesheet" type="text/css" href="vertical_slider.css">
<link rel="stylesheet" type="text/css" href="glow-effect.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
<script src="http://malsup.github.com/jquery.cycle.all.js" type="text/javascript"></script>
<script src="java_script.js"></script>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
In the bottom in the body tags i did:
<div class="vertical-slider-container">
<img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" id="prev" class="vertical-slider-nav vertical-slider-nav-up" />
<div class="slideshow"
data-cycle-fx="carousel"
data-cycle-timeout="3000"
data-cycle-next="#next"
data-cycle-prev="#prev"
data-cycle-carousel-visible="3"
data-cycle-carousel-vertical="true">
<img src="http://malsup.github.io/images/beach1.jpg" />
<img src="http://malsup.github.io/images/beach2.jpg" />
<img src="http://malsup.github.io/images/beach3.jpg" />
<img src="http://malsup.github.io/images/beach4.jpg" />
<img src="http://malsup.github.io/images/beach5.jpg" />
<img src="http://malsup.github.io/images/beach9.jpg" />
</div>
<img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" id="next" class="vertical-slider-nav vertical-slider-nav-down" />
</div>
Then in the vertical_slider css file i did:
.vertical-slider-container {
background: #fff;
border: 20px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,.2);
margin: 40px auto;
position: relative;
width: 120px;
}
.slideshow {
background: #fff;
position: relative;
overflow: hidden;
width: 100%;
}
.slideshow img {
display: block;
width: 100px;
height: 100px;
padding: 10px;
}
.vertical-slider-nav {
color: rgba(0,0,0,0.8);
cursor: pointer;
display: block;
height: 40px;
margin-left: -20px;
left: 50%;
z-index: 10;
position: absolute;
overflow: hidden;
opacity: 0;
text-decoration: none;
width: 40px;
transition: all .3s ease;
}
.vertical-slider-nav-up {
top: -60px;
}
.vertical-slider-container:hover .vertical-slider-nav-up:hover {
opacity: 1;
}
.vertical-slider-container:hover .vertical-slider-nav-up {
top: -20px;
opacity: 0.7;
}
.vertical-slider-nav-down {
bottom: -60px;
}
.vertical-slider-container:hover .vertical-slider-nav-down:hover {
opacity: 1;
}
.vertical-slider-container:hover .vertical-slider-nav-down {
bottom: -20px;
opacity: 0.7;
}
And in the java_script.js file top i did:
$(function() {
$('.slideshow').cycle();
The way it is now i see one image and the next image replacing the other one on same place like fade in.
But in the javascript file if i change the function to:
$('.slideshow').cycle({
fx: 'scrollUp'
});
I see the images move up scrolling up one by one.
The problem is that the arrows not working and not in place and i see each time one image and not 3 images.
It should be working like this jsfiddler and i can't figure out why it's not. I don't get any errors.
Vertical Slider
Well if you want a carousel you have the wrong script included it should be from cycle2 plugin plus the script for the carousel. And then it will work like in the snippet below :)
It should be this two scripts
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>
Instead of
<script src="http://malsup.github.com/jquery.cycle.all.js" type="text/javascript"></script>
$('.slideshow').cycle();
.vertical-slider-container {
background: #fff;
border: 20px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,.2);
margin: 40px auto;
position: relative;
width: 120px;
}
.slideshow {
background: #fff;
position: relative;
overflow: hidden;
width: 100%;
}
.slideshow img {
display: block;
width: 100px;
height: 100px;
padding: 10px;
}
.vertical-slider-nav {
color: rgba(0,0,0,0.8);
cursor: pointer;
display: block;
height: 40px;
margin-left: -20px;
left: 50%;
z-index: 10;
position: absolute;
overflow: hidden;
opacity: 0;
text-decoration: none;
width: 40px;
transition: all .3s ease;
}
.vertical-slider-nav-up {
top: -60px;
}
.vertical-slider-container:hover .vertical-slider-nav-up:hover {
opacity: 1;
}
.vertical-slider-container:hover .vertical-slider-nav-up {
top: -20px;
opacity: 0.7;
}
.vertical-slider-nav-down {
bottom: -60px;
}
.vertical-slider-container:hover .vertical-slider-nav-down:hover {
opacity: 1;
}
.vertical-slider-container:hover .vertical-slider-nav-down {
bottom: -20px;
opacity: 0.7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>
<div class="vertical-slider-container">
<img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" id="prev" class="vertical-slider-nav vertical-slider-nav-up" />
<div class="slideshow"
data-cycle-fx="carousel"
data-cycle-timeout="3000"
data-cycle-next="#next"
data-cycle-prev="#prev"
data-cycle-carousel-visible="3"
data-cycle-carousel-vertical="true">
<img src="http://malsup.github.io/images/beach1.jpg" />
<img src="http://malsup.github.io/images/beach2.jpg" />
<img src="http://malsup.github.io/images/beach3.jpg" />
<img src="http://malsup.github.io/images/beach4.jpg" />
<img src="http://malsup.github.io/images/beach5.jpg" />
<img src="http://malsup.github.io/images/beach9.jpg" />
</div>
<img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" id="next" class="vertical-slider-nav vertical-slider-nav-down" />
</div>
Please try this. It is working.
Updated fiddle[1]: http://jsfiddle.net/uncb4bs9/8/
have you put
<script type='text/javascript' src="http://malsup.github.io/jquery.cycle2.js"></script>
<script type='text/javascript' src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>
in your code????
please put that and try again. it will work.
for full example please have a look to this http://fiddle.jshell.net/uncb4bs9/3/show/light/ and go to its source code by ctrl+U.

Fit to height of browser's window

I want to achieve the following layout with 100% height to browser.
Only the content area should be scrollable, when required and footer should be display at the bottom of browser.
But after tried many times i got this one
by using following code.
html { height:100%; }
body { position:absolute; height: 100%; overflow: hidden; top:0; bottom:0; right:0; left:0; padding: 0px; margin: 0px;}
#header, #footer {
float: left;
width: 100%;
/*height: 100px;*/
background-color: #808080;
}
#wrapper {
overflow: scroll;
height: 100%;
width: 999px;
margin: auto;
}
//HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Satkar Travels</title>
<meta name="keywords" content="ltc, travel, Satkar Travels, lfc, Satkar Parivar, Satkar Holidays, Satkar Travels Gurgaon">
<meta name="description" content="A Leader in LTC Travel.">
<meta name="author" content="Satkar Travels">
<link rel="stylesheet" href="StyleSheet.css" type="text/css">
</head>
<body>
<div id="header">
<br><br>
</div>
<div id="wrapper">
<div id="content">
<section>
<p>
</p>
</section>
<section>
<p>
</p>
</section>
<p>
</p>
</div>
</div>
<div id="footer">
<br><br>
</div>
</body>
</html>
please help
Thank you.
Try this example:
.header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50px;
background-color:red;
}
.container {
position: absolute;
top: 51px;
bottom: 51px;
left: 50%;
width: 900px;
margin-left: -450px;
overflow: auto;
background-color: blue;
}
.footer {
position: absolute;
bottom: 50px;
left: 0;
right: 0;
height: 50px;
background-color:red;
}
And then this:
<div class="header"> </div>
<div class="container"> </div>
<div class="footer"> </div>
Here is a fiddle: http://jsfiddle.net/dxL7s/
Is this what you need?
Just need to change in CSS.
Example: demo
or
Apply this css:
html { height:100%; }
body { position:absolute; height: 100%; overflow-x: hidden; top:0; bottom:0; right:0; left:0; padding: 0px; margin: 0px;}
#header{
float: left;
width: 100%;
/*height: 100px;*/
background-color: #808080;
}
#footer {
width:100%;
position:fixed;
bottom:0;
left:0;
background:#808080;
}
#wrapper {
overflow: scroll;
height: 100%;
width: 999px;
margin: auto;
}
I would use fixed position, to align the header and footer at the top and bottom. Then just leave the content with a margin-top to keep it below the header.
HTML:
<header></header>
<div id="mainContent">
Lorem ipsum
</div>
<footer></footer>
CSS:
header {
height: 50px;
width: 100%;
background-color: #f00;
position: fixed;
top: 0;
}
footer {
height: 50px;
width: 100%;
background-color: #ff0;
position: fixed;
bottom: 0;
}
div#mainContent {
margin-top: 60px;
}
Fiddle demo: http://jsfiddle.net/w22dr/1/

Mozilla and Opera 'background-size:cover' doesn't work

I am making a site with a background image slider where images must cover the 100% width and height of a div element where they are. The problem is that in Safari and Chrome everything works just fine, but in Opera and Mozilla Firefox, the images doesn't scale.
I tried adding '-o-background-size:cover' and '-moz-background-size:cover' but that didn't make the trick.
Here is the code:`
---HEAD---
....
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
var imgArr = new Array() // relative paths of images
imgArr[0]="images/artema_big.jpg";
imgArr[1]="images/donskoi_big.jpg";
imgArr[2]="images/dzerzhinski_big.jpg";
var preloadArr = new Array();
var i;
/* preload images */
for(i=0; i < imgArr.length; i++){
preloadArr[i] = new Image();
preloadArr[i].src = imgArr[i];
}
var currImg = 1;
var intID = setInterval(changeImg, 1000);
/* image rotator */
function changeImg(){
$(".fakeBackground").animate({opacity: 0}, 1000, function(){
$(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +')top left no-repeat');
}).animate({opacity: 1}, 1000);
};
});
</script>
</head>
<body>
<div class="parent">
<div class='fakeBackground'></div>
<div class="menuLeft">
<div class="logo"></div>
<ul id="menu">
<li class="about">О клубе</li>
<li class="offers">Услуги</li>
<li class="cards">Карты</li>
<li class="personal">Персонал</li>
<li class="news">Новости</li>
<li class="contacts">Контакты</li>
</ul>
</div>
</div>
<div class="rightBottom"><img src="images/virtualTour.png" alt="virtual_tour" /></div>
</div>
</div>
</body>
</html>
and CSS:
*{
margin: 0px;
}
body, html{
height: 100%;
margin: 0px;
}
.parent {
width: 100%;
height: 100%;
margin: 0px auto;
position: relative;
}
.parent .fakeBackground {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
margin: 0px auto;
background-size: cover;
-o-background-size: cover;
background: url(../images/artema_big.jpg) no-repeat;
background-position: center center;
}
.logo{
width: 188px;
height: 78px;
background-image: url(../images/logo.png);
margin-bottom: 20px;
margin-left: 60px;
}
.menuLeft{
width: 678px;
height: 100%;
background-image: url(../images/artemaDescr.png);
background-size: cover;
background-repeat: no-repeat;
}
#menu li{
list-style: none;
margin-bottom: 10px;
position: relative;
}
#menu li a{
font-family: Arial;
font-size: 14px;
border-bottom: 1px dotted;
text-decoration: none;
color: #373e96;
}
/*Menu Items*/
.about{
margin-left: 70px;
}
.offers{
margin-left: 60px;
}
.cards{
margin-left: 50px;
}
.personal{
margin-left: 11px;
}
.news{
margin-left: 5px;
}
.contacts{
margin-left: -10px;
}
.rightBottom{
position: absolute;
bottom: 0;
right: 0;
width: 301px;
height: 520px;
display: block;
}
Any help will be appreciated.
PS. The link for the site is: http://sportmax.codo.dn.ua
The problem is possibly that 'background' overwrites 'background-size'. Look also at
this answer.
So put background on top whereever necessary.

Categories