Can you please take a look at this demo and let me know how I can separate the .clickme box from the .slidecontent? I need to change the Height of the .slidecontentfor example toheight:300px;` but this also change the grey shadow to 300px
What I need to have is having the .slidecontent with height of 300 and looks like the third (green arrow)
$(function () {
$("#clickme").toggle(function () {
$(this).parent().animate({left:'0px'}, {queue: false, duration: 500});
}, function () {
$(this).parent().animate({left:'-280px'}, {queue: false, duration: 500});
});
});
#slideout {
background: #666;
position: absolute;
width: 300px;
height: 300px;
top: 45%;
left:-280px;
}
#clickme {
float: right;
height: 20px;
width: 20px;
background: #ff0000;
}
#slidecontent {
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideout">
<div id="slidecontent">
Yar, there be dragonns herre!
</div>
<div id="clickme">
>
</div>
</div>
I am not 100% sure I understand what you are trying to do but your jQuery code refers to the parent of clickme which is slideout, not slidecontent and it is probable that this is causing the undesired effect. Is there a reason you are not referencing slidecontent directly?
Related
I am rendering a map using Mapboxgl, Bootstrap 4 and React.
I need the map to take 100% of the height of the page and to display in the first column of a two column grid.
However, when using React, the width of the map extends over to 100% of the width of the row - overlapping underneath the 2nd column.
The best thing would be to check my examples on jsfidle to understand what I mean.
Map correctly showing (when using pure HTML and no React)
https://jsfiddle.net/apphancer/jhxy5c63/
Map showing width issue (when using React)
https://jsfiddle.net/apphancer/9g71ovn6/
In order to have the 100% height working I am using this CSS:
.map-wrapper {
position: fixed;
width: 100%;
height: 100%;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
I suspect this might have something to do with how the map gets rendered with React as the problem does not happen when using the pure HTML solution.
Is anyone able to point in the right direction?
HTML
<div id="app"></div>
CSS
body, html {
height: 100%;
}
#app, .row, .col-9 {
height: 100%;
}
.col-3 {
background-color: rgba(0, 0, 0, 0.5);
border: 1px solid red;
}
.map-wrapper {
position: fixed;
width: 100%;
height: 100%;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
JS
mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
class Application extends React.Component {
componentDidMount() {
const map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/light-v9', // stylesheet location
center: [13.392, 52.523], // starting position [lng, lat]
zoom: 9 // starting zoom
});
map.addControl(new mapboxgl.NavigationControl());
map.resize(); // tried with this to see if it would help
}
render() {
return (
<div className="row no-gutters">
<div className="col-9">
<div className="map-wrapper">
<div ref={el => this.mapContainer = el} id="map"/>
</div>
</div>
<div className="col-3">
2 of 2
</div>
</div>
)
}
}
ReactDOM.render(<Application/>, document.getElementById('app'));
If you use position fixed with 100% width in wrapper, it will cover all width. But if you set position to relative, it will cover just remaining width.
.map-wrapper {
position: relative;
width: 100%;
height: 100%;
}
This worked in your react-jsfiddle. Please try.
If you are using position fixed in your project you can cover whole area so for that you have 2 solution
1st solution
give 75% width to the #map so it will behave like col-9 and no need to give position: absolute;
#map {
width: 75%;
height: 100%;
}
2nd Solution
give it relative position to the parent of your element so it cant leave it area, for that you can change position: fixed to position: relative
.map-wrapper {
position: relative;
width: 100%;
height: 100%;
}
both solution is good solution but i prefer 2nd solution, from my side.
const [viewport, setViewport] = useState({
width: '100%',
height: 'calc(100vh - 162px)', // 162px is size height of all elements on top of map
latitude: 0,
longitude: 0,
zoom: 12,
bearing: 0,
pitch: 0,
transitionDuration: 2000,
transitionInterpolator: new FlyToInterpolator(),
});
I migrated to React 18, and updated a bunch of dependencies, included the map library.
The only thing that resolved my problem was this. It has a tic, when the map resizes, but it's a start.
useEffect(() => {
map.on("load", () => map.resize());
}, [])
This is my code for creating the pdf. Everything works great except the footer and header doesn't work. They are there (i think) but not visible. I have tried with displayHeaderFooter: true but all that makes is a date stamp in the header and some broken html code in the footer (as last picture).
async function createListenPdf(html, header, footer) {
try {
var jobId = uuidv4();
this.browser = await puppeteer.launch();
const page = await browser.newPage();
var viewport = {
width:1165,
height:1200
}
page.setViewport(viewport);
page.on("console", msg => {
for (let i = 0; i < msg.args.length; ++i) {
console.log(`${jobId} - From page. Arg ${i}: ${msg.args[i]}`);
}
});
await page.goto(`data:text/html,${html}`, { waitUntil: 'networkidle0' });
await page.emulateMedia('screen');
console.log("Header footer");
var buffer = await page.pdf({
printBackground: true,
footerTemplate: "<div style='width: 200px; background-color: #4286f4; position: relative; position: absolute; top:0;'>Hej</div>",
headerTemplate: "<div style='width: 200px; background-color: #4286f4; position: relative; position: absolute; bottom: 0;'>Footer</div>",
//displayHeaderFooter: true,
margin:{
top: "100px",
bottom: "100px"
}
});
console.log(`${jobId} - Done. Will return the stream`);
return buffer;
}
finally {
if (this.browser) {
console.log(`${jobId} - Closing browser`);
this.browser.close();
}
}
}
As you can see i somehow got a footer with some grey area (i don't know why its grey). When i enable displayHeaderFooter: true in the options it looks like this:
Has anyone managed to create a pdf with puppeteer using html with header and footer?
Here in their API description its seems pretty obvious but it really doesn't work.
https://github.com/GoogleChrome/puppeteer/blob/v1.3.0/docs/api.md
Please try the following templates:
headerTemplate: '<span style="font-size: 30px; width: 200px; height: 200px; background-color: black; color: white; margin: 20px;">Header 1</span>',
footerTemplate: '<span style="font-size: 30px; width: 50px; height: 50px; background-color: red; color:black; margin: 20px;">Footer</span>'
Not all styling properties are supported, you should avoid using position, top, bottom.
Also make sure you are on the latest version of puppeteer.
Just bumped into the issue.
My observations about headerTemplate/footerTemplate are the following:
At least the font-size has to be specified (it's set to 1px by default, which is very small):
headerTemplate: '<span style="font-size: 10px"> <span class="pageNumber"></span>/<span class="totalPages"></span></span>',
top/bottom margin must be defined to set space for the header/footer
Some CSS properties indeed don't work. I didn't have any success with background-color, but maybe it's because the background isn't painted for these sections.
No asynchronous code (that would require an HTTP request) is allowed, such as calling a CSS stylesheet, loading an image or a font.
Consequently, CSS have to be inlined. To add an image, it can be base-64 encoded, as shown below. Concerning the fonts, we would need to rely on what is expected to be installed on the Puppeteer server I guess. Maybe there's a way to also embed it in base-64, I didn't try.
const printPDF = async () => {
const footer = `<footer style="margin: auto; width: 40%">
<img style="float: left; marginRight: 8px; marginLeft: 36px; width: 25%" src="data:image/jpeg;base64,/9j/4AAQSkZJRgAB...09Yv//Z" alt="Pivohub" />
<p style="font-family: arial; float: right; width: 55%; color: red; margin-top: 24px; font-size: 10px">
<b>My footer</b>
</p>
</footer>`
const content = `<!DOCTYPE html>
<html>
<head>
<meta charSet="utf-8"/>
<style type="text/css">
body { backgroundColor: "red" }
</style>
</head>
<body>
<h1>Hello</h1>
</body>
</html>`
const browser = await puppeteer.launch({ headless: true })
const page = await browser.newPage()
await page.setContent(content, { waitUntil: "networkidle0" })
const buffer = await page.pdf({
format: "A4",
displayHeaderFooter: true,
headerTemplate: '<span style="font-size: 10px"> <span class="pageNumber"></span> of <span class="totalPages"></span></span>',
footerTemplate: footer,
margin: { top: "100px", bottom: "200px" },
printBackground: true,
})
}
In this sample, the base 64 image was truncated. An image can be converted thanks to an online base-64 converter such as https://www.base64-image.de.
// or a .pdf file
await page.pdf({
printBackground: true,
width: `595px`, // ? 3508 x 2480 (print) || 595 pixels x 842 pixels (screen)
height: `842px`, // ? Here subraction for making alignment looks cool
margin: {
top: '25px',
bottom: '60px',
left: '25px',
right: '25px'
},
path: path.join(ROOT_PATH, 'pdf', 'report.pdf'),
displayHeaderFooter: true,
footerTemplate: `
<p style="margin: auto;font-size: 13px;">
<span class="pageNumber"></span>
/
<span class="totalPages"></span>
</p>
`
});
Hopefully, this one resolved someone's issue with the same problem. The footer was not shown before properly and finally done about a little bit search so comes with the above solution.
NOTE:
Don't forget to mentioned margin-bottom: 60px(atleast).
Same for displayHeaderFooter: true.
Must needs to specify the font-size: 10px(atleast bcze default by font-size: 0).
For more info refer to this issue:
https://github.com/puppeteer/puppeteer/issues/1822
if the above code didn't work for you. please try to use marginTop and marginBottom instead of margin object.
var buffer = await page.pdf({
printBackground: true,
footerTemplate: "<div style='width: 200px; background-color: #4286f4; position: relative; position: absolute; top:0;'>Hej</div>",
headerTemplate: "<div style='width: 200px; background-color: #4286f4; position: relative; position: absolute; bottom: 0;'>Footer</div>",
//displayHeaderFooter: true,
marginTop:"100px",
marginBottom: "100px"
});
notes:
it works for me in nodejs. I use jsreport with recipe "chrome-pdf". The chrome-pdf module using puppeteer.
You need to use:
-webkit-print-color-adjust: exact;
Here is an example of a function that can add a background:
const getHeaderFooter = () => {
return `<html>
<style>html {-webkit-print-color-adjust: exact;} </style>
<span style="margin: -5em 0 0 0; height: 3mm; z-index: 1000;
background: blue; width: 100%;"/>
</html>`
}
And calling the function:
headerTemplate: getHeaderFooter(),
I prepared example of image slider what I need.
I encounter with styling issue when using images with various dimensions. When element leaving the array, its location is set as absolute value, what is necessary for smooth transition, tho, but the image is also moved up.
I would like to have nice vertical align into middle even leave or enter the array, but could not get on any way.
Another issue, what I would like to solve is when left the window and then went back after a while. The animation running all cycles at once to reach current state instead just stop animation and run after. Maybe it is my responsibility, but browsers doesn't offer nice event to catch blur window or am I wrong?
According to this discussion
Thank you for any ideas.
let numbers = [{key:1},{key:2},{key:3},{key:4},{key:5},{key:6},{key:7}]
let images = [
{ key:1,
src:"http://lorempixel.com/50/100/sports/"},
{ key:2,
src:"http://lorempixel.com/50/50/sports/"},
{ key:3,
src:"http://lorempixel.com/100/50/sports/"},
{ key:4,
src:"http://lorempixel.com/20/30/sports/"},
{ key:5,
src:"http://lorempixel.com/80/20/sports/"},
{ key:6,
src:"http://lorempixel.com/20/80/sports/"},
{ key:7,
src:"http://lorempixel.com/100/100/sports/"}
]
new Vue({
el: '#rotator',
data: {
items: images,
lastKey: 7,
direction: false
},
mounted () {
setInterval(() => {
if (this.direction) { this.prevr() } else { this.nextr() }
}, 1000)
},
methods: {
nextr () {
let it = this.items.shift()
it.key = ++this.lastKey
this.items.push(it)
},
prevr () {
let it = this.items.pop()
it.key = ++this.lastKey
this.items.unshift(it)
}
}
})
.litem {
transition: all 1s;
display: inline-block;
margin-right: 10px;
border: 1px solid green;
background-color: lightgreen;
padding: 10px 10px 10px 10px;
height: 100px;
}
.innerDiv {
border: 1px solid red;
}
.container {
overflow: hidden;
white-space: nowrap;
height: 250px;
border: 1px solid blue;
background-color: lightblue;
}
.list-enter {
opacity: 0;
transform: translateX(40px);
}
.list-leave-to {
opacity: 0;
transform: translateX(-40px);
}
.list-leave-active {
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script>
<div id="rotator">
<button #click="direction = !direction">
change direction
</button>
<transition-group
name="list"
tag="div"
class="container">
<div
v-for="item in items"
:key="item.key" class="litem">
<!--
<div
class='innerDiv'>
{{ item.key }}
</div>
-->
<div class='innerDiv'>
<img :src='item.src'>
</div>
</div>
</transition-group>
</div>
It tooks a while but on the end I think that I have got better result for sliding animation with changing direction feature.
One annoying think is when I swithing the sliding direction so animation is for a 'microsecond' changed to next state and than return to correct one, after it the animation continue as expected. It is happening only in one direction and I don't know how to fix it. Also last box behave differently too only once. No clue at all.
So just 98% solution :-)
let images = [
{key:1, domKey:1, src:"http://lorempixel.com/50/100/sports/" },
{key:2, domKey:2, src:"http://lorempixel.com/50/50/sports/" },
{key:3, domKey:3, src:"http://lorempixel.com/100/50/sports/" },
{key:4, domKey:4, src:"http://lorempixel.com/20/30/sports/" },
{key:5, domKey:5, src:"http://lorempixel.com/80/20/sports/" },
{key:6, domKey:6, src:"http://lorempixel.com/20/80/sports/" },
{key:7, domKey:7, src:"http://lorempixel.com/100/100/sports/" }
]
let setPositionRelative = el => el.style.position = "relative"
new Vue({
el: '#rotator',
data: {
items: images,
lastKey: 7,
direction: true,
changeDirectionRequest: false
},
mounted () {
Array.from(this.$el.querySelectorAll("div[data-key]")).map(setPositionRelative)
setInterval(() => {
if(this.changeDirectionRequest) {
this.changeDirectionRequest = false
this.direction = !this.direction
if (this.direction)
Array.from(this.$el.querySelectorAll("div[data-key]")).map(setPositionRelative)
else
Array.from(this.$el.querySelectorAll("div[data-key]")).map(el => el.style.position = "")
}
if (this.direction) this.prevr()
else this.nextr()
}, 1000)
},
methods: {
nextr () {
let it = this.items.shift()
it.key = ++this.lastKey
this.items.push(it)
},
prevr () {
let it = this.items.pop()
it.key = ++this.lastKey
this.items.unshift(it)
setPositionRelative(this.$el.querySelector("div[data-domkey='"+it.domKey+"']"))
}
}
})
.container {
overflow: hidden;
white-space: nowrap;
height: 200px;
border: 1px solid blue;
background-color: lightblue;
display: flex;
align-items: center;
}
.innerDiv {
border: 1px solid red;
width: auto;
height: auto;
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
display:box;
box-pack:center;
box-align:center;
}
.litem {
transition: all 1s;
margin-right: 10px;
border: 1px solid green;
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
.list2-enter, .list-enter {
opacity: 0;
transform: translateX(40px);
}
.list2-leave-to, .list-leave-to {
opacity: 0;
transform: translateX(-40px);
}
.list-leave-active {
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script>
<div id="rotator">
<button #click="changeDirectionRequest = true">change direction</button>
<transition-group name="list" tag="div" class="container">
<div v-for="item in items"
:key="item.key"
:data-domkey="item.domKey"
class="litem">
<div class='innerDiv'>
<img :src='item.src'>
</div>
</div>
</transition-group>
</div>
I am trying to implement correctly scaling and zooming in css way. I created an example with scaled view. When click, the view should be zoomed and then to be able to scroll.
https://jsfiddle.net/opb5tcy8/4/
I have several issues with it:
Can I somehow get rid of the margin-left and margin-top on the .zoomed class? I did not manage to scale it without necessity to shift it with these margins.
When clicked, I can get the click position by clientX. I would like to use it to fluently scroll to the clicked position during zooming. However I can't manage the scroll to be fluent and when removing the margin-left it is kind of jumpy and not nice.
When you zoom in and move the scroll to the center and then zoom out, you can see the zoom is not nice as it first scrolls to the right. Is there a way to prevent it?
When you scroll to corners in Chrome on OSX it tends do navigate back/forward in browser. Is there a way to prevent this behaviour?
UPDATE:
The first part can be solved with transform-origin: 0 0. The other issues stays mostly the same as it is demonstrated.
Hm... I could say it is impossible to satisfy point 2 your condition with current browsers' support. The other are possible, as in this demo:
$(document).ready(function() {
var windowHalfWidth = $("#window").width() / 2;
var scalingFactor = 0.55;
var throtte = false;
$("#slider").click(function(event) {
//Simple event throtte to prevent click spamming breaking stuff up
if (throtte) return false;
throtte = true;
setTimeout(function() {
throtte = false;
}, 1000);
var xSelf = event.pageX - $("#window").offset().left + $("#window").scrollLeft();
if ($(this).hasClass("zoomed")) {
$("#window").animate({
scrollLeft: (xSelf / scalingFactor - windowHalfWidth)
}, 1000, "linear");
} else {
$("#window").animate({
scrollLeft: (xSelf * scalingFactor - windowHalfWidth)
}, 1000, "linear");
}
$("#slider").toggleClass("zoomed");
});
});
body {
background-color: #eee;
margin-top: 10px; /*reduced margin for easier view in SO */
}
#window {
width: 500px;
height: 200px;
margin: 0 auto;
overflow-x: auto;
overflow-y: hidden;
border: 1px solid #999;
position: relative;
background-color: white;
}
#slider {
width: 900px;
height: 600px;
background-color: #fff;
position: absolute;
transition: 1s linear;
top: 0;
left: 0;
transform-origin: 0 0;
}
#slider.zoomed {
transform: scale(0.55);
}
#slider div {
width: 50px;
height: 50px;
line-height: 50px;
position: absolute;
top: 75px;
background-color: #eee;
text-align: center;
}
#obj1 {
left: 10px;
}
#obj2 {
left: 210px;
}
#obj3 {
left: 410px;
}
#obj4 {
left: 610px;
}
#obj5 {
left: 810px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="window">
<div id="slider" class="zoomed">
<div id="obj1">1</div>
<div id="obj2">2</div>
<div id="obj3">3</div>
<div id="obj4">4</div>
<div id="obj5">5</div>
</div>
</div>
As you can see, the zooming & scrolling is quite laggy, especially when the far right size is zoomed in.
The reason is simple, because jQuery and css both have their own animation loop, and they are not in sync. In order to solve this we'll need to somehow manage to do both scrolling & scaling animations with only one system, either jQuery or CSS.
Problem is: jQuery don't have a scaling feature, and css can't scroll elements. Wonderful.
If your scaling can be done with width/height though, it would be possible, using jquery width&height animate(). But if the #slider consists of many components I guess it can't be done.
So um writing an answer just to say it's impossible is kind of a let down, so I think maybe I can suggest an alternative, using dragging to scroll content (similar to the way Google map work):
var windowHalfWidth, startX, startLeft, minLeft, dragging = false,
zooming = false;
var zoomElement = function(event) {
var xSelf = event.pageX - $("#window").offset().left - parseFloat($("#slider").css("left"));
if ($("#slider").hasClass("zoomed")) {
minLeft = windowHalfWidth * 2 - 900;
var newLeft = Math.min(Math.max((-(xSelf / 0.55 - windowHalfWidth)), minLeft), 0);
$("#slider").css("left", newLeft + "px");
} else {
minLeft = windowHalfWidth * 2 - 900 * 0.55;
var newLeft = Math.min(Math.max((-(xSelf * 0.55 - windowHalfWidth)), minLeft), 0);
$("#slider").css("left", newLeft + "px");
}
$("#slider").toggleClass("zoomed");
}
$(document).ready(function() {
windowHalfWidth = $("#window").width() / 2;
minLeft = windowHalfWidth * 2 - 900 * 0.55;
$("#slider").on({
mousedown: function(event) {
dragging = true;
startX = event.pageX;
startLeft = parseFloat($(this).css("left"));
},
mousemove: function(event) {
if (dragging && !zooming) {
var newLeft = Math.min(Math.max((startLeft + event.pageX - startX), minLeft), 0);
$("#slider").css("left", newLeft + "px");
}
},
mouseup: function(event) {
dragging = false;
if (Math.abs(startX - event.pageX) < 30 && !zooming) {
// Simple event throtte to prevent click spamming
zooming = true;
$("#slider").css("transition", "1s");
setTimeout(function() {
zooming = false;
$("#slider").css("transition", "initial");
}, 1000);
zoomElement(event);
}
},
mouseleave: function() {
dragging = false;
}
});
});
body {
background-color: #eee;
margin-top: 10px; /*reduced margin for easier view in SO */
}
#window {
width: 500px;
height: 200px;
margin: 0 auto;
overflow: hidden;
border: 1px solid #999;
position: relative;
background-color: white;
}
#slider {
width: 900px;
height: 600px;
background-color: #fff;
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0;
}
#slider.zoomed {
transform: scale(0.55);
}
#slider div {
width: 50px;
height: 50px;
line-height: 50px;
position: absolute;
top: 75px;
background-color: #eee;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#obj1 {
left: 10px;
}
#obj2 {
left: 210px;
}
#obj3 {
left: 410px;
}
#obj4 {
left: 610px;
}
#obj5 {
left: 810px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="window">
<div id="slider" class="zoomed">
<div id="obj1">1</div>
<div id="obj2">2</div>
<div id="obj3">3</div>
<div id="obj4">4</div>
<div id="obj5">5</div>
</div>
</div>
This variation manages to get CSS to do both animation, by sacrificing the scrollbar (which is pretty ugly imo, who needs it?) and use css left instead.
So I hope if in the end you can't find a good solution, at least you have this to consider as fall back version.
I'll address the points individually and then give an example at the end.
When clicked, I can get the click position by clientX. I would like to
use it to fluently scroll to the clicked position during zooming.
In my opinion scroll animations during transitions can be a bit choppy in webkit browsers. Try balancing the animation time of the jQuery effect with the animation time of the css transition.
When you zoom in and move the scroll to the centre and then zoom out, you can see the zoom is not nice as it first scrolls to the right. Is there a way to prevent it?
Bring the scrollLeft property of the div#window back to 0px. Again, tweaking the animation times will make this less jerky.
When you scroll to corners in Chrome on OSX it tends do navigate back/forward in browser. Is there a way to prevent this behaviour?
You could use the mouseover and mouseout events to toggle a overflow:hidden css on the body.
Here's an example change to your code:
var slider = $("#slider").on('click', function(event) {
if (!slider.hasClass('zoomed')) {
// zoom back to left position
$('#window').animate({scrollLeft:'0px'});
}else{
// zoom to click position within slider
$('#window').animate({scrollLeft:event.clientX + 'px'}, 2000);
}
slider.toggleClass("zoomed");
});
/* stop window scrolling when using slider */
slider
.on('mouseover', function () {
$(document.body).css({overflow:'hidden'});
})
.on('mouseout', function () {
$(document.body).css({overflow:'auto'});
});
And an updated fiddle.
I'm not very experienced in cross-browser issues, but I'm having this issue:
Scenerio : Let say i have div of width:800px, in that div i have 2 buttons ( left-araow--right-arrow ), onclick on any of the button I change image position in the div ( image move right or left,but stays in outer div )
Problem : When I re-size or reduce screen resolution then my CSS gets change; the image goes out of the div, and also the position of my buttons get change as well.
Any idea or solutions? Thanks.
EDIT : It is working fine in Firefox and in Opera, but not working in Google Chrome and IE.
Below is the html:
<div class="hand">
<div id="handinside"></div>
</div>
<div id="left" class="button"> left </div>
<div class="flip"></div>
<div id="right" class="button">right</div>
</div>
below is the CSS
.gameNavigation {
width: 220px;
margin: 0px auto 0px;
}
.button {
margin: 0 0 0 5px;
cursor: pointer;
width: 59px;
height: 29px;
float: left;
text-align: center;
background-color:red;
color: white;
}
.hand {
position:relative;
background-color:transparent;
left:0px;
width:140px;
height:210px;
}
Below is the jquery
$(".button").click(function() {
var $button = $(this);
var oldValue = $("#counter").val();
if ($button.text() == "right" ) {
//move right if the value is no more than 4
if(parseInt(oldValue) < 3){
var newVal = parseInt(oldValue) + 1;
$(".hand").animate({
"left": "+=222px"
}, "slow");
$(".coin").animate({
"left": "+=222px"
}, "slow");
//$(".block").stop();
}
}
else {
// move left and don't allow the value below zero
var test = 'test'
if (oldValue >= 1) {
var newVal = parseInt(oldValue) - 1;
}
if(parseInt(newVal) >= -1){
$(".hand").animate({
"left": "-=222px",
easing :'swing'
}, "slow");
$(".coin").animate({
"left": "-=222px",
easing : 'swing'
}, "slow");
}
}
$("#counter").val(newVal);
});
position your container div with relative positioning and then position your arrows with absolute positioning