Alright so, I need to resize an image on click (according to what the user clicks) a selection of 50%, 100%, and 150%. I also need to include a message that tells the user what % the picture is at once it has been scaled.
I think what I have is correct or in the right direction (well obviously not, since it's not working) wondering if anyone can help me out here... this is what I have currently:
<!doctype html>
<html lang="en">
<head>
<title>Change Image Size</title>
<style>
body {width: 80%; margin: auto;}
header {border-bottom: 1px solid #aaa;}
header h1 {font-size: 1.5em;}
nav {float: left; width: 15%; margin: 2% 2%; }
main {float: left; width: 60%; border: 0px black solid; margin: 2% 2%; height: 500px; padding: 1em;}
main img {border: 1px black solid;}
nav span {display: inline-block; width:100px; height: 30px; border: 1px solid black; border-radius: 10px; text-align: center; margin-bottom: 1em; background-color: green; color: white;}
</style>
<script>
function init (){
var object = document.getElementById('div1');
document.getElementById('small').onclick = function () {change('div1', '50%')};
document.getElementById('medium').onclick = function () {change('div1', '100%')};
document.getElementById('large').onclick = function () {change('div1', '150%')};
}
function change (id, width){
document.getElementById(id).style.width = width;
document.getElementById(id).style.height = 'auto';
}
window.onload = init;
</script>
</head>
<body>
<header><h1>CTEC 4350 DHTML Exercise: Change Image Size</h1></header>
<nav>
<span id="small">50%</span>
<span id="medium">100%</span>
<span id="large">150%</span>
</nav>
<main>
<p> This image is displayed at 150% of its orignal size. (The number of % changes based on the size option picked by the user.)</p>
<div id="div1">
<img src="http://omega.uta.edu/~cyjang/ctec4350/labex/dhtml/alice28a.gif">
</div>
</main>
</body>
</html>
welp i'm still having issues with this. I need to find out the current size, and then add on to it.... but i'm not sure if i'm doing it correctly... i've changed my code a little, but not even sure if i'm going the right direction. Nothing is changing, and i'm not sure why o.o
<!doctype html>
<html lang="en">
<head>
<title>Change Image Size</title>
<style>
body {width: 80%; margin: auto;}
header {border-bottom: 1px solid #aaa;}
header h1 {font-size: 1.5em;}
nav {float: left; width: 15%; margin: 2% 2%; }
main {float: left; width: 60%; border: 0px black solid; margin: 2% 2%; height: 500px; padding: 1em;}
main img {border: 1px black solid;}
nav span {display: inline-block; width:100px; height: 30px; border: 1px solid black; border-radius: 10px; text-align: center; margin-bottom: 1em; background-color: green; color: white;}
</style>
<script>
function init (){
document.getElementById('small').onclick = function () {change('div1',50,50)};
document.getElementById('medium').onclick = function () {change('div1',100,100)};
document.getElementById('large').onclick = function () {change('div1',150,150)};
}
function change(id, y, x){
var img = document.getElementById('div1');
img.style.width = img.offsetWidth + y + "px";
img.style.height = img.offsetHeight + x + "px";
document.getElementById(id).style.width = y;
document.getElementById(id).style.height = x;
}
window.onload = init;
</script>
</head>
<body>
<header><h1>CTEC 4350 DHTML Exercise: Change Image Size</h1></header>
<nav>
<span id="small">50%</span>
<span id="medium">100%</span>
<span id="large">150%</span>
</nav>
<main>
<p> This image is displayed at 150% of its orignal size. (The number of % changes based on the size option picked by the user.)</p>
<div id="div1">
<img src="http://omega.uta.edu/~cyjang/ctec4350/labex/dhtml/alice28a.gif" height="400px" width="400px">
</div>
</main>
</body>
</html>
Related
I have a div named meniucolaj where I store some images and I want to drag and drop some of them into each canvas drawn in the div conturcanvas to make a photo collage.
To test the code, I only make the first photo to be dragged and the first canvas as drop location. I resized the images to be included in the gallery, but when i drop them into the canvas, i want them to be shown at bigger size into the canvas but i want to choose which part of the picture to be shown into the canvas. You know, as you got the opportunity to choose when making a collage, but the picture is not shown when dragging into the canvas. Can you help me?
Thank you in advance! I'm a beginner here.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Photo Editor</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400">
<link rel="stylesheet" type="text/css" href="testcollage2css.css">
</head>
<body> <!--continutul care va fi afisat pentru utilizatori-->
<!--atasare fisier video pentru background-->
<video autoplay muted loop id="bkgvideo">
<source src="C:\Users\AncaAlexandra\Desktop\Proiect multimedia\media\bkgcity.mp4" type="video/mp4">
</video>
<div class="header">
<nav class="navigation">
<div class="totalnavigheader">
<div class="navheader">
<img id="logo" src="C:\Users\AncaAlexandra\Desktop\Proiect multimedia\media\logocollage.png" alt="Logo cannot be displayed">
</div>
<div class="title">
<a id="name" href="#">Photo Collage</a>
</div>
</div>
</nav>
</div>
<div class="clasameniuri" id="meniuri">
<div class="meniucolaj" id="meniupoze">
<h4 id="titluimagini">Imagini</h4>
<ul class="listaimg" id="tabelimg">
<li class="elemimagini"><img class="imagini" id="dragelem" draggable="true" src="C:\Users\AncaAlexandra\Desktop\Proiect multimedia\media\dog1.jpg"></li>
<li class="elemimagini"><img class="imagini" src="C:\Users\AncaAlexandra\Desktop\Proiect multimedia\media\cat1.jpg"></li>
</ul>
</div>
</div>
<div class="containercolaj">
<div id="conturcanvas">
<canvas id="first"></canvas>
<canvas id="second"></canvas>
<canvas id="third"></canvas>
<script>
var canvas1 = document.getElementById("first");
var context1 = canvas1.getContext("2d");
<!--context.rect(1,0,296,100);
<!--context.stroke();-->
var canvas2 = document.getElementById("second");
var context2 = canvas1.getContext("2d");
var canvas3 = document.getElementById("third");
var context3 = canvas1.getContext("2d");
</script>
</div>
</div>
<script type="text/javascript" src="C:\Users\AncaAlexandra\Desktop\Proiect multimedia\testcollage2js.js"></script>
</body>
</html>
CSS:
/*stilizare background*/
body {
background: #1A2D4B;
position: relative;
color: black;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
overflow-x: hidden;
}
/*stilizare fisier video ca si background*/
#bkgvideo {
position: fixed;
right: 0;
bottom: 0;
left:0;
top:0;
min-width: 100%;
min-height: 100%;
}
.header {
position: relative;
left: 0;
right: 0;
top: 0;
z-index: 1002;
background-color: rgba(42, 59, 85, 0.6);
height: 80px;
box-shadow: 5px 10px 18px #888888;
border-radius: 10px;
}
.totalnavigheader > * {
display:inline-block;
}
#logo {
height: auto;
width: 60px;
vertical-align: middle;
margin-left:30px;
}
.title {
padding-left:10px;
padding-bottom:40px;
margin-left:10px;
}
#name {
text-decoration:none;
color:white;
}
.clasameniuri {
position:relative;
background-color: rgba(253, 242, 233, 0.8);
float:left;
width: 382px;
margin-top:8px;
margin-right:6px;
margin-left:5px;
height:560px;
box-shadow: 5px 10px 18px #888888;
border-radius: 10px;
}
#titluimagini {
color:rgb(56, 110, 147);
text-align:center;
}
.listaimg{
list-style-type:none;
}
.elemimagini{
margin:1px;
display:inline;
}
.imagini{
width:100px;
height:100px;
border:2px solid #000;
}
.containercolaj {
position:relative;
background-color:rgba(93, 109, 126,0.8);
float:right;
margin-top:8px;
margin-right:10px;
width:920px;
height:560px;
box-shadow:5px 10px 18px #888888;
border-radius: 10px;
}
#conturcanvas
{
width:490px;
height:490px;
border:2px solid #d3d3d3;
margin-top:20px;
margin-left:215px;
padding:20px;
background-color:gray;
}
#first{
border:1px solid #d3d3d3;
width:232px;
height:485px;
float:left;
}
#second{
border:1px solid #d3d3d3;
width:232px;
height:235px;
float:right;
margin-bottom:13px;
}
#third{
border:1px solid #d3d3d3;
width:232px;
height:235px;
float:right;
}
#first > .imagini{
width:100%;
height:100%;
}
JS:
var dragItem = document.getElementById("dragelem");
var dropCanvas = document.getElementById("first");
dragItem.ondragstart = function(evt) { //aceasta functie se apeleaza cand userul incearca sa mute elementul prin drag
//evt.dataTransfer.setData('key', 'dragelem');
evt.dataTransfer.setData('key', evt.target.id);
console.log("its dragging...");
}
dropCanvas.ondragover = function(evt) { //aceasta functie se apeleaza cand un element este adus catre o locatie valida de drop
evt.preventDefault();
console.log("its dragover..");
}
dropCanvas.ondrop = function(evt){ //aceasta functie se apeleaza cand se lasa prin drop in locatia valida elementul adus prin drag
var dropItem = evt.dataTransfer.getData('key');
evt.preventDefault();
console.log("its dropped..");
console.log(dropItem);
var myElement=document.getElementById(dropItem);
console.log(myElement);
var myNewElem = document.createElement('img'); // create a new image element
myNewElem.src = myElement.src;
dropCanvas.appendChild(myNewElem);
}
I suppose that dataTransfer not working..
That is not the correct way to draw an image on a canvas.
You need to get its CanvasRenderingContext2D:
context = dropCanvas.getContext("2d");
Then draw the image by calling
context.drawImage(myNewElem, x, y, more, arguments, here);
You can read about all the arguments drawImage can take here:
https://www.w3schools.com/tags/canvas_drawimage.asp
Went through a few questions on stackoverflow but could not solve the error.
The intention is to modify and add html to the main document reading a JSON structure.
Uncaught TypeError: Cannot read property 'appendChild' of undefined
Update 1:-
Typo was corrected, marked in code.
Defer was introduced at script load in head section, this makes sure the entire document is loaded before the script starts execution.
Here I am trying to read a JSON, and then looping across its content to add to my main html document.
var json={
"fruit":[
{
"fruitname":"Apple",
"location":"data/png/apple.png",
"quantity":"25",
"price":"2"
},
{
"fruitname":"Mango",
"location":"data/png/mango.png",
"quantity":"35",
"price":"3"
}
]
};
//var cards = document.getElementsByClassName("content"); -- corrected typo
var cards = document.getElementById("content");
var fruits = json.fruit;
//alert(fruits.length);
//alert(fruits[1].fruitname);
for (var i = 0; i < fruits.length; i++) {
var cardelement=document.createElement('div');
cardelement.className = 'card';
// alert(cardelement);
cards.appendChild(cardelement);
var object = document.createElement('div');
object.className = 'object';
// alert(object);
cardelement.appendChild(object);
var image = document.createElement('img');
image.setAttribute("src", fruits[i].location);
object.appendChild(image);
var objectback = document.createElement('div');
objectback.className = 'object-back';
cardelement.appendChild(objectback);
var backfruit = document.createElement('div');
backfruit.className = 'back-fruit';
backfruit.innerHTML = fruits[i].fruitname;
objectback.appendChild(backfruit);
var backprice = document.createElement('div');
backprice.className = 'back-price';
backprice.innerHTML = fruits[i].price + "$ per unit";
objectback.appendChild(backprice);
var backquantity = document.createElement('div');
backquantity.className = 'back-quantity';
backquantity.innerHTML = "In Stock " + fruits[i].quantity + " units";
objectback.appendChild(backquantity);
}
*
{
margin: 0 0;
border: none;
text-align:center
}
#header
{
background-color: #F44336;
font-family: 'Bungee Shade', cursive;
font-size: 30px;
height: 20%
}
#footer
{
font-family: 'Roboto', sans-serif;
position: fixed;
height: 80%;
width: 100%
}
#content
{
width: 75%;
height: 100%;
border-right: thick solid #F44336;
float: left;
text-align: left;
overflow: scroll
}
#cart
{
background-color:#3F51B5;
width: 25%;
border-bottom: thick dashed #F44336;
float: right
}
.card
{
display:inline-block;
width: 100px;
height: 100px;
margin: 40px;
padding: 20px;
box-shadow: -1px 9px 20px 4px #000000;
border: 5px solid #F44336;
border-radius: 26px 26px 26px 26px;
transition: all .2s ease-in-out
}
.object .object-back
{
display:block;
position:static
}
.object-back
{
display: none
}
.object img
{
height: 100px;
width: 100px
}
.back-fruit
{
font-size: 20px;
padding-bottom: 5px;
margin-bottom: 10px;
border-bottom: thin solid
}
.back-price
{
font-size: 12px;
padding-bottom: 5px
}
.back-quantity
{
font-size: 10px;
padding-bottom: 10px
}
.back-pluscart
{
font-size: 15px;
background-color: #F44336;
width: auto
}
.back-pluscart img
{
height: 30px;
width: 30px
}
.card:hover
{
box-shadow: -1px 9px 46px 11px #000000
}
.card:hover .object
{
display: none
}
.card:hover .object-back
{
display:inline-block;
opacity: 1
}
<!DOCTYPE html>
<html>
<head>
<title> The Shopkeeper </title>
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "style/style.css" />
<script type="text/javascript" src="logic/core.js" defer></script>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="base">
<div id="header">
<h1> Fruitkart </h1>
</div>
<div id="footer">
<div id="content">
<!--
<div class="card">
<div class="object">
<img src="data/png/apple.png" />
</div>
<div class="object-back">
<div class="back-fruit">Apple</div>
<div class="back-price">2$ per unit</div>
<div class="back-quantity">In Stock 25 pieces </div>
<div class="back-pluscart"> <img src="data/png/cart.png" /> </div>
</div>
</div>
-->
</div>
<div id="cart">
django
is a big boy
</div>
</div>
</div>
</body>
</html>
Why was content undefined
You try to get content by ClassName
var cards = document.getElementsByClassName("content")[0];
But find content in your html:
<div id="content">
Notice that the ID is content. Either change it to class="content" or change the previous code to document.getElementByID("content");
Two issues:
There is no element with class content. On the other hand there is an element with that id. So you probably want to do:
document.getElementById("content");
The script runs too soon -- the elements are not loaded yet when it runs. Either put the script just before the closing </body> tag, or put the code inside an event handler, like
window.addEventListener('DOMContentLoaded', function() {
// your code
});
You are trying to access an element with class name content var cards =document.getElementsByClassName("content")[0]; & there is no class named content
You can modify your code like this ,
var cards = document.getElementById("content");
var json={
"fruit":[
{
"fruitname":"Apple",
"location":"data/png/apple.png",
"quantity":"25",
"price":"2"
},
{
"fruitname":"Mango",
"location":"data/png/mango.png",
"quantity":"35",
"price":"3"
}
]
};
var cards = document.getElementById("content");
var fruits = json.fruit;
//alert(fruits.length);
//alert(fruits[1].fruitname);
for (var i = 0; i < fruits.length; i++) {
var cardelement=document.createElement('div');
cardelement.className = 'card';
// alert(cardelement);
cards.appendChild(cardelement);
var object = document.createElement('div');
object.className = 'object';
// alert(object);
cardelement.appendChild(object);
var image = document.createElement('img');
image.setAttribute("src", fruits[i].location);
object.appendChild(image);
var objectback = document.createElement('div');
objectback.className = 'object-back';
cardelement.appendChild(objectback);
var backfruit = document.createElement('div');
backfruit.className = 'back-fruit';
backfruit.innerHTML = fruits[i].fruitname;
objectback.appendChild(backfruit);
var backprice = document.createElement('div');
backprice.className = 'back-price';
backprice.innerHTML = fruits[i].price + "$ per unit";
objectback.appendChild(backprice);
var backquantity = document.createElement('div');
backquantity.className = 'back-quantity';
backquantity.innerHTML = "In Stock " + fruits[i].quantity + " units";
objectback.appendChild(backquantity);
}
*
{
margin: 0 0;
border: none;
text-align:center
}
#header
{
background-color: #F44336;
font-family: 'Bungee Shade', cursive;
font-size: 30px;
height: 20%
}
#footer
{
font-family: 'Roboto', sans-serif;
position: fixed;
height: 80%;
width: 100%
}
#content
{
width: 75%;
height: 100%;
border-right: thick solid #F44336;
float: left;
text-align: left;
overflow: scroll
}
#cart
{
background-color:#3F51B5;
width: 25%;
border-bottom: thick dashed #F44336;
float: right
}
.card
{
display:inline-block;
width: 100px;
height: 100px;
margin: 40px;
padding: 20px;
box-shadow: -1px 9px 20px 4px #000000;
border: 5px solid #F44336;
border-radius: 26px 26px 26px 26px;
transition: all .2s ease-in-out
}
.object .object-back
{
display:block;
position:static
}
.object-back
{
display: none
}
.object img
{
height: 100px;
width: 100px
}
.back-fruit
{
font-size: 20px;
padding-bottom: 5px;
margin-bottom: 10px;
border-bottom: thin solid
}
.back-price
{
font-size: 12px;
padding-bottom: 5px
}
.back-quantity
{
font-size: 10px;
padding-bottom: 10px
}
.back-pluscart
{
font-size: 15px;
background-color: #F44336;
width: auto
}
.back-pluscart img
{
height: 30px;
width: 30px
}
.card:hover
{
box-shadow: -1px 9px 46px 11px #000000
}
.card:hover .object
{
display: none
}
.card:hover .object-back
{
display:inline-block;
opacity: 1
}
<!DOCTYPE html>
<html>
<head>
<title> The Shopkeeper </title>
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "style/style.css" />
<script type="text/javascript" src="logic/core.js" ></script>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="base">
<div id="header">
<h1> Fruitkart </h1>
</div>
<div id="footer">
<div id="content">
<!--
<div class="card">
<div class="object">
<img src="data/png/apple.png" />
</div>
<div class="object-back">
<div class="back-fruit">Apple</div>
<div class="back-price">2$ per unit</div>
<div class="back-quantity">In Stock 25 pieces </div>
<div class="back-pluscart"> <img src="data/png/cart.png" /> </div>
</div>
</div>
-->
</div>
<div id="cart">
django
is a big boy
</div>
</div>
</div>
</body>
</html>
I have created a custom context menu and would like it to be served as a playlist for my project.
However it becomes unclickable over my video frame.
Is this the nature of HTML video tag?
Here's my snippet
<!doctype html>
<html>
<head>
<title>Dee</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html, body, .container{
height: 100%;
}
body{
font-family: verdana;
font-size: 10px;
}
.container{
background: #f6f6f6;
}
.context-menu {
width: 200px;
height: auto;
box-shadow: 0 0 20px 0 #ccc;
position: absolute;
display: none;
}
.context-menu ul{
list-style: none;
padding: 5px 0 5px 0;
}
.context-menu ul li:not(.separator){
padding: 10px 5px 10px 5px;
border-left: 4px solid transparent;
cursor: pointer;
}
.context-menu ul li:hover{
/*background: #eee;*/
background: #fff;
border-left: 4px solid #666;
}
.separator{
height: 1px;
background: #dedede;
/*background: #fff;*/
margin: 2px 0 2px 0;
}
.videoClass{
background: #fff;
border-color: #fff;
}
</style>
</head>
<body>
<div class="container" oncontextmenu="return showContextMenu(event);">
<div id="contextMenu" class="context-menu">
<ul>
<li>List</li>
<li>List</li>
<li>List</li>
<li class="separator"></li>
<li>List</li>
</ul>
</div>
<video id="myVideo" class="videoClass" controls width="500" src="trailer.mp4"></video>
</div>
<script type="text/javascript">
window.onclick = hideContextMenu;
window.onkeydown = listenKeys;
var contextMenu = document.getElementById('contextMenu');
function showContextMenu(){
contextMenu.style.display = 'block';
contextMenu.style.left = event.clientX + 'px';
contextMenu.style.top = event.clientY + 'px';
return false;
}
function hideContextMenu(){
contextMenu.style.display = 'none';
}
function listenKeys(event){
var keyCode = event.which || event.keyCode;
if (keyCode == 27) { //27 means escape key
hideContextMenu();
}
}
</script>
</body>
</html>
New Answer
I found that an even simpler solution to your problem exists. If you just put the video tag before the context menu, that does the trick:
<video id="myVideo" class="videoClass" controls width="500" src="trailer.mp4"></video>
<div id="contextMenu" class="context-menu">
<ul>
<li>List</li>
<li>List</li>
<li>List</li>
<li class="separator"></li>
<li>List</li>
</ul>
</div>
Original Answer
In my limited experience I haven't loved using z-indexes, so I'll look for another solution, but I put styles of z-index: 1 on video class and z-index: 2 on the context menu class, and that did that trick (in chrome at least, I didn't try any other browsers).
I have a JavaScript enabled scrolling nav bar. It starts below a hero graphic then sticks to the top when it gets to the top. It works perfectly, however, when it reaches the top it causes the div below it to snap to the top instead of smoothly getting there. It's hard to explain so here's the code.
I know what's happening: Once the nav bar reaches the top, it stacks above the div causing the div to "jump." I just can't figure out how to make it smoother.
Here's the code and thanks for your thoughts!
<body>
<div class="home-hero-image">
<h1>Assemble</h1>
</div>
<div class="header">
<div class="header_container">
<div class="header_onecol">
<ol>
<li class="links">Blog</li>
<li class="links">Members</li>
<li class="links">Technology</li>
<li class="links">Contact Us</li>
</ol>
</div>
</div>
</div>
<div class="intro">
<p class="maintext">
We are dedicated to delivering the latest information on current threats, to provide industry best practices, and to enhance every public sector IT professional's understanding of cybersecurity by opening direct conversations between the government and IT community.
</p>
</div>
</body>
body {
font-family: Helvetica, Arial, Sans-serif;
font-style: normal;
font-weight: 200;
color: #888888;
margin: 0;
padding: 0;
font-size: 100%;
display: block;
text-align: center;
}
p {
line-height: 1.5;
}
img {
max-width: 100%;
height: auto;
}
.home-hero-image {
height: 250px;
background: url('../images/hero_image.jpg') no-repeat;
z-index: -1;
}
h1 {
color: white;
float: right;
padding-right: 5%;
font-size: 5em;
}
.header {
height: 77px;
position: relative;
clear: both;
background-color: white;
border-bottom: 1px solid gray;
border-top: 1px solid gray;
}
.fixed {
position:fixed;
top:0px;
right:0px;
left:0px;
padding-bottom: 7px;
z-index:999;
}
.header_container {
width: 75%;
margin: 0 auto;
padding: 0 12px;
}
.header_onecol {
width: 97%;
height: 40px;
margin: 1%;
display: block;
overflow: hidden;
background-image: url('../images/Logo.png');
background-repeat: no-repeat;
padding-top: 24px;
}
<script language="javascript" type="text/javascript">
var win = $(window),
fxel = $(".header"),
eloffset = fxel.offset().top;
win.scroll(function() {
if (eloffset < win.scrollTop()) {
fxel.addClass("fixed");
} else {
fxel.removeClass("fixed");
}
});
</script>
When a div is fixed, it will no longer take up "space", meaning the next div will do exactly as you described -- stack up near the top.
Consider wrapping all of your content after the header using a div:
<div class="header">
...
</div>
<div class="main-body">
<div class="intro">
<p class="maintext">
We are dedicated to delivering the latest information on current threats, to provide industry best practices, and to enhance every public sector IT professional's understanding of cybersecurity by opening direct conversations between the government and IT community.
</p>
</div>
</div>
When we fix the header, we can add top-padding equal to the height of the header to the main-body div to prevent it from jumping.
var win = $(window),
fxel = $(".header"),
eloffset = fxel.offset().top;
win.scroll(function() {
if (eloffset < win.scrollTop()) {
$(".main-body").css("padding-top", fxel.height());
fxel.addClass("fixed");
} else {
$(".main-body").css("padding-top", 0);
fxel.removeClass("fixed");
}
});
JSFiddle here
Hope this helps!
So,i want to make a product viewer kind of a thing having thumbnails which can slide back or front by clicking on the back/front buttons. I dont know why my code isn't working.Heres the code. Please help me out finding issues in it.Thanks!
Html code
<div id="wrapper">
<div id="main-image">
</div>
<div class='main-slider'>
<div class="window">
<div class='slider-large-image'>
<img src='img3.png' height="500" width="960"> </img>
<img src='img2.png' height="500" width="960"> </img>
<img src='img3.png' height="500" width="960"> </img>
<img src='img4.png' height="500" width="960"> </img>
</div>
</div>
<div class='slider-pager'>
‹
›
</div>
</div>
Javascript code
$(document).ready(function() {
var imagewidth = /*$(".window").width()*/960;
var imagesum = /*$(".slider-large-image img").size()*/5;
var imagereelwidth = imagewidth * imagesum;
$(".slider-large-image").css({'width' : imagereelwidth});
rotatef = function() {
$(".slider-large-image").animate({
left : -imagewidth
},500 );
};
rotateb = function() {
$(".slider-large-image").animate({
left : imagewidth
},500 );
};
$(".slider-pager a#b").click(function() {
rotateb(); //Trigger rotation immediately
//return false; //Prevent browser jump to link anchor
});
$(".slider-pager a#f").click(function() {
rotatef(); //Trigger rotation immediately
//return false; //Prevent browser jump to link anchor
});
});
CSS
#wrapper
{
margin:0 auto;
}
.main-slider
{
float:left;
position:relative;
margin-bottom:10px;
/*background-color:#CCC;*/
border: 0px solid #000;
top:25px;
left:0px;
z-index:1004;
-moz-border-radius:5px;
border-radius:5px;
-moz-box-shadow: 0px 0px 30px 1px #999;
-webkit-box-shadow: 0px 0px 30px 1px #999;
box-shadow: 0px 0px 30px 1px #999;
}
.window
{
width: 960px;
height: 500px;
overflow:hidden;
position:relative;
}
.slider-large-image
{
position:absolute;
top:0px;
left:0px;
}
.slider-large-image img {float:left;}
.slider-pager
{
position:absolute;
float:left;
width: 100px;
height: 10px;
background-color:#333;
top:0%;
left:89.5%;
padding-bottom:10px;
padding-right:0;
}
.slider-pager a
{
padding:1px;
text-align:center;
text-decoration:none;
font-size:20px;
font-weight:700;
color:#ccc;
margin-right:5px;
width:1px;
height:1px;
position:relative;
top:-10px;
}
.main-slider
{
padding:0px;
color:#FFF;
text-align: center;
line-height: 40px;
font:"Comic Sans MS", cursive;
font-size:20px;
text-decoration:none;
}
.main-slider .slider-pager a:hover
{
background-color:#999;
-moz-border-radius:10px;
border-radius:10px;
color:black;
}
.main-slider .slider-pager a.active
{
background-color:#999;
-moz-border-radius:10px;
border-radius:10px;
}
.main-slider .info-page
{
background-color:#000;
width:600px;
height:50px;
text-align:center;
text-shadow:#666;
font:"28 Days Later";
color:#FFF;
line-height: 40px;
font-size:40px
}
.main-slider .info-page #d:hover
{
color:#FF0;
}
Lets start off with your formatting (that I fixed, btw):
Your first <div id="wrapper"> doesn't get closed!
IMG-tag is self ending! WRONG: <img src=""></img> CORRECT: <img src="" />
Some of your css3-variables are for future browsers and -moz-, but is missing -webkit-!! Example: -moz-border-radius: 10px; border-radius: 10px;
Also, at one point you're using ='' and another ="". Its basically okay, but gets annoying to maintain later and doesn't look very clean! Example: <img src='img3.png' height="200" width="300" />
I did not find any function for <div id="main-image"></div> in your provided code. Next time remove these type of elements when your putting together a question here, as this element is 100% irrelevant to the problem at hand. (Same goes for
and .main-slider .info-page #d:hover {} in your css)
Didn't see any reason, why .main-slider {} should be declared twice in the css (so I merged them, if you do have special purpose, then put it back like it was)
If you are not building some fallback version for some other browser version (like mobile version for example.) Then there is no need to put width="" and height="" variables to your IMG-tag direct. You already had a correct place in css for that: .slider-large-image img {float: left; width:; height:;}
In your css, you have .slider-pager a and .main-slider .slider-pager a:hover. Why add .main-slider in front of .slider-pager a:hover anyway?
If you have same parameters for same variable in css, then use comma to merge them: .slider-pager a:hover, .slider-pager a:active {background-color: #999; -moz-border-radius: 10px; border-radius: 10px;}
Your using position: absolute; too much. I strongly believe, you were meaning to use position: relative;
There was an extra }); at the end of it all. Was the code originally in some function or a plugin?
No such parameter as font, in css!
NOTES:
You didn't provide the images. Next time please google some images, so it would be quicker to help you.
Use sites like jsfiddle.net, to make good examples of your problem. You might be asking: Why should I waste my time on that? We will ask the same question from you, when we are looking at your examples. This will REALLY make things faster for you are for us, on finding quick and valuable solutions.
Your code was so messy, that I cant figure out where the element <div class="slider-pager"></div> must sit? Its obviously inside the general container (on top of the image,) but at the top, bottom or maybe bottom center? I put it bottom center, as it looked the best there )
Removed $(".slider-large-image").css({'width' : imagereelwidth}); and added .slider-large-image, to make it rotate endless times.
I edited so much, that I forgot to update every single step. Anyways, it works. And also its endless now, meaning that there is no end for the carousel.
I wasted about 2 hours on this answer. So basically I was too lazy to compose it in the form of a plugin. Read this and follow those steps, if you want to put it in a plugin form.
If you want to add a function that automatically switches the slides, then use the jQuery doTimeout: Like setTimeout, but better!
I hope you are not taking my answer in a negative form. The community guidelines actually say, that we have to point the newbies to the correct path etc etch. I actually love you man :)
Live demo
http://jsfiddle.net/hobobne/PmXr2/
Full version code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Having trouble making this product slider. Please help? - Kalle H. Väravas answer</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
html, body {margin: 0px; padding: 0px;}
html, body, div, th, td, p, a {font-family: "Comic Sans MS", cursive; font-size: 12px; color: #000000;}
.cb {clear: both;}
#wrapper {width: 400px; margin: 0px auto;}
.main-slider {float: left; position: relative; margin-bottom: 10px; border: 0px solid #000; top: 25px; left: 0px; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 0px 30px 1px #999; -webkit-box-shadow: 0px 0px 30px 1px #999; box-shadow: 0px 0px 30px 1px #999; padding: 0px; color: #FFF; text-align: center; text-decoration: none; /*background-color: #CCC;*/}
.window {width: 300px; height: 200px; overflow: hidden; position: relative;}
.slider-large-image {position: relative; overflow: hidden; float: left; list-style-type: none; margin: 0px; padding: 0px;}
.slider-large-image li {margin: 0px; padding: 0px; float: left; display: inline-block;}
.slider-large-image li img {float: left; width: 300px; height: 200px;}
.slider-pager {position: relative; z-index: 2; margin: -40px auto 0px;}
.slider-pager a {margin: 0px 2px; padding: 2px; text-align: center; text-decoration: none; font-size: 20px; font-weight: bold; color: #ccc;}
.slider-pager a:hover,
.slider-pager a:active {background-color: #999; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
.slider-pager a:hover {color: black;}
.slider-pager a.active {/* background-color and border-radius used to be here.. */}
</style>
</head>
<body>
<div id="wrapper">
<div class="main-slider">
<div class="window">
<ul class="slider-large-image">
<li><img src="http://images.sneakhype.com/wp-content/uploads/2010/12/Miley-Cyrus-300x200.jpg" /></li>
<li><img src="http://wa2.www.3news.co.nz/Portals/0-Articles/185340/miley-cyrus_reuters_420.jpg?width=300" /></li>
<li><img src="http://cdn.buzznet.com/media/jjr/headlines/2009/03/miley-cyrus-ryan-seacrest.jpg" /></li>
<li><img src="http://images.smh.com.au/2010/12/29/2112265/miley_cyrus_400-300x200.jpg" /></li>
</ul>
</div>
<div class="slider-pager">‹›</div>
</div>
<br class="cb" />
</div>
<script>
var imagewidth = $('.slider-large-image li').outerWidth();
var imagesum = $('.slider-large-image li img').size();
var imagereelwidth = imagewidth * imagesum;
$(".slider-large-image").css({'width' : imagereelwidth});
$('.slider-large-image li:first').before($('.slider-large-image li:last'));
$('.slider-large-image').css({'left' : '-' + imagewidth + 'px'});
rotatef = function (imagewidth) {
var left_indent = parseInt($('.slider-large-image').css('left')) - imagewidth;
$('.slider-large-image:not(:animated)').animate({'left' : left_indent}, 500, function() {
$('.slider-large-image li:last').after($('.slider-large-image li:first'));
$('.slider-large-image').css({'left' : '-' + imagewidth + 'px'});
});
};
rotateb = function (imagewidth) {
var left_indent = parseInt($('.slider-large-image').css('left')) + imagewidth;
$('.slider-large-image:not(:animated)').animate({'left' : left_indent}, 500, function(){
$('.slider-large-image li:first').before($('.slider-large-image li:last'));
$('.slider-large-image').css({'left' : '-' + imagewidth + 'px'});
});
};
$(".slider-pager a#b").click(function () {
rotateb(imagewidth);
return false;
});
$(".slider-pager a#f").click(function () {
rotatef(imagewidth);
return false;
});
</script>
</body>
</html>
Try this:
rotatef = function() {
$(".slider-large-image").animate({
"left" : "-="+imagewidth
},500 );
};
rotateb = function() {
$(".slider-large-image").animate({
"left": "+="+imagewidth
},500 );
};