I am creating a website that has this kind of structure:
Where the red box represents the user's browser window. When the user clicks a button on the home (bottom), it slides up to the new scene (stratosphere for example). Each scene is an entire image. Now the problem is, I need to account for users using different screen sizes and when they resize the window. I've looked up ways to resize backgrounds images using CSS or JavaScript, and that doesn't work well for me. I need to find some way to make them all fit for everyone using different screen sizes. An idea I have - I know this sounds clunky but would it be viable to write a PHP script which resizes an image to the dimension given by the JS? JS finds the browser window's size, hands it to PHP, PHP returns the image JS needs. And have this happen when a user resizes the browser window too...
How can I do this?
Update:
I tried SVG, and it's working beautifully. But now I am wondering how I can get the other elements to be in accordance with the SVG?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<!-- Date: 2012-08-01 -->
<style type="text/css" media="screen">
body { margin: 0px; }
.area { border: 3px solid red; background: green; margin-bottom: 0px; background: url(http://www.alistapart.com/d/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii/beetle.svg) no-repeat; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
function scroll_to(id, speed, margin) {
$('html, body').animate({
scrollTop: $('#' + id).offset().top - margin
}, speed);
}
var slide = 'a3'
$(".area").height($(window).height());
$(window).resize(function() {
$(".area").height($(window).height());
$(".area").width($(window).width());
scroll_to(slide, 1, 0);
});
scroll_to('a2', 'slow', 0);
});
</script>
</head>
<body>
<div class="area" id="a3">
<h1>scene 3</h1>
</div>
<div class="area" id="a2">
<h1>scene 2</h1>
<div style="height: 100px; border: 1px solid black;" id="text">
hi
</div>
</div>
<div class="area" id="a1">
<h1>scene 1</h1>
</div>
</body>
</html>
Why don't you use an SVG as background image? Your scene seems fairly simple.
All browser but IE ≤ 8 understand background: url(some.svg): http://caniuse.com/svg-css
Use one large background-image. Set it up with something like this:
html, body {
margin: 0;
padding: 0;
width: 100%
}
body {
position: absolute;
bottom: 0;
height: 2000px;
background-image: url('background.png')
}
Then use JavaScript to set the bottom property of body to move up, like this:
window.addEventListener('keydown', keypressed, false);
function keypressed(e) {
if(String.fromCharCode(e.charCode) == ' ') {
document.body.style.bottom += parseInt(document.body.style.bottom) + 10 + 'px';
}
}
I'm afraid re-sizing the background image is going to be your best bet. Why don't you post the code you've already tried for such a solution and others can help you along from that angle.
You should definitely split the image into multiple images, one for each tab.
This is how I would do it: http://jsfiddle.net/4CwdX/3/
You don't need to resize the image. The browser can automatically stretch it for you with background-size: 100%.
Related
I am very new to JS and HTML so please bear with me.
I have a static image (in .jpg format) which is a kind of diagram containing 32 different circles. They are each numbered 1 - 32 however I am not able to manipulate the image in the sense that I cannot move the circles or change the numbers inside of them.
For the sake of simplicity, I have included an image below containing circles - this represents the image that I have.
My first objective is to make this image a thumbnail that, when clicked, expands to cover most of the page.
The following JQuery code serves this purpose:
$("#thumbnailImage").click(function() {
$(this).attr('width', '400');
$(this).attr('height', '300');
I have inserted this into my code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
#panel{ position: absolute; bottom: 10px; right: 10px; z-index: 1010101; display: block; width: 400px; height: 400px; overflow-y: auto; background: rgba(255,255,255,0.1); color: white;}
</style>
</head>
<body>
<div id='map'></div>
<div id = 'panel'>
<img id = "thumbnailImage" src="http://iskandarblue.github.io/mapbox/data/circles_page.jpg" width="350" height="250" alt="circles"/>'
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiaXNrYW5kYXJibHVlIiwiYSI6ImNpazE3MTJldjAzYzZ1Nm0wdXZnMGU2MGMifQ.i3E1_b9QXJS8xXuPy3OTcg';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/dark-v8', //stylesheet location
center: [-74.50, 40], // starting position
zoom: 9 // starting zoom
});
$("#thumbnailImage").click(function() {
$(this).attr('width', '400');
$(this).attr('height', '300');
});
</script>
</body>
</html>
In this example, the image expands in the wrong direction (it expands outward rather than inward), and does not collapse again when clicked twice. Is there an easy way to fix this ?
Now, once the image has expanded, I would like the user to be able to hover over a circle and see a popup text much like what the tipsy jQuery plugin does (see here): http://onehackoranother.com/projects/jquery/tipsy/
I am not sure how to proceed or how to conceptualize the problem. What's the easiest way to assign pop-up functions to circles on a static image and how can these popups (or tooltips) be activated only when the image is in expanded mode? Any advice would be appreciated.
Ok the deal is I have a page with a top banner 100% wide and 500px tall and below that a content area, say, 4000px tall. inside that content area there is a box (100 by 100) that I want to have act the way in a certain way. When I scroll down the page to the point were that box touches the top of the screen I want it to be fixed at the top until I scroll up and it becomes unfixed at the top of the parent container (so where it was to start). Anyone have any examples or simple fixes????
Edit:
I found this fix that I think will work but I don't know what I am doing wrong:
<script>
var $window = $(window),
$sticky = $('#contentSideIner'),
elTop = $sticky.offset().top;
$window.scroll(function() {
$sticky.toggleClass('sticky', $window.scrollTop() > elTop);
});
</script>
(code is in the head of the html document)
#contentSide {
background: black;
margin: 10px;
float: right;
width: 300px;
}
#contentSideIner {
width: 280px;
height: 400px;
margin: 0 auto;
background: red;
}
.sticky {
position: fixed;
top: 0;
}
I know this code is meant to add a class to the #contentSideIner div, .sticky {position: fixed; top: 0; }. am I making a kind of brain dead mistake here?
this is the jfiddel that is basicly what i have http://jsfiddle.net/07xe5tLf/
more code i have in use:
<!DOCTYPE HTML>
<html>
<head>
<title>Project Website: full review pages</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var $window = $(window),
$sticky = $('#contentSideIner'),
elTop = $sticky.offset().top;
$window.scroll(function() {
$sticky.toggleClass('sticky', $window.scrollTop() > elTop);
});
</script>
<link rel="stylesheet" href="css/stylesMainReveiw.css" />
<style>
#banner { background-image: url("images/Destiny_Banner.jpg"); }
.playableOn {}
.rateBox { background-image: url("img/rating/rating3-big.png"); background-size: 150px 150px; }
#contentSide { height: 5100px; }
</style>
</head>
<body class="landing">
<!-- Header -->
<header id="header">
<ul>
<li>Home</li>
<li>Monthly Spotlight
<ul>
<li>Destiny</li>
<li>Diablo III</li>
<li>Shadow Of Mordor</li>
<li>The Last Of Us
<li>Bayonetta 2</li>
</ul>
</li>
<li>Older Reviews</li>
</ul>
</header>
<!-- Banner -->
<section id="banner">
<h1>destiny</h1>
<h2>"Same Quote for the game as seen in js-load"</h2>
<div class="playableOn"><p>Playable On:</p></div>
<div class="rateBox"></div>
</section>
<!-- Main -->
<section id="main" class="container">
<div id="contentSide">
<div id="contentSideIner">
</div>
</div>
This is what it seems you want
What you want is a sticky menu which requires javascript to find the current position of the page in the viewport and change the CSS or class to make it fixed. This is a bad example because there is no div that is made visible after you scroll and make the element fixed to prevent the page content below to fill in where the menubar was. This can be done simply by using jQuery to make this hidden div visible. If you need code then just ask.
It is called a sticky menu and I always forget what it is called. :)
How I remember is usually spending some time on Google searching specifically for what I want until I find it. Don't make StackOverflow your default goto for help because that is how you can get banned. You need to be specific and provide code on something like JSFiddle or spend some time making a visual example or find a site that does what you want. Many sites like Facebook use this technique and it is quite common. If this doesn't make sense then you should go to W3Schools and read up on some Javascript and CSS and find some tutorials on jQuery.
For your fiddle, you need to go and include jQuery in your head: http://jsfiddle.net/b2550/07xe5tLf/1/
I JSFiddle it is as simple as making that your framework in the sidebar and in your code you need to include this in your head (as I said above in the comments)
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I'm attempting to use jquery cycle to rotate some images on my page. The images are 1400px wide, which means that for people with smaller screen resolutions, the right hand side of the image ends up dissappearing.
I want to make it so that the images looses an equal amount on either side of the image and thus keep the center of the image in the center of the viewing window.
If you look at http://renegadeox.com/ and resize your browser window you'll see what I mean.
How can I use javascript to move the image left relative to the container and thereby keep the image centred?
Here's the code for completeness:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshowWrap').cycle({
fx: 'fade', // http://malsup.com/jquery/cycle/ Background rotater
});
});
</script>
<div style="margin: 0 auto" class="slideshowWrap">
<div class="homeslideshow">
<img src="background_01.jpg" alt="" />
</div>
<div class="homeslideshow">
<img src="background_02.jpg" alt="" />
</div>
<div class="homeslideshow">
<img src="background_03.jpg" alt="" />
</div>
</div>
</body>
</html>
you can use the custom transitions from the cycle plugin, to define your own method, to compute the correct left value you can use this code
EDIT
I tried this code and it works, however this only works on the load event, it doesn't work on resize, you might get the desired effect if you bind the whole function to the resize event
you also have to add a little css:
<style>
.slideshowWrap{
width:100% !important;
overflow:hidden;
}
</style>
And this is the js that worked for me:
$(document).ready(function() {
var leftVal = 0;
if($(window).width()<1400){
leftVal = ((1400 - $(window).width())/2)*-1;
}
$('.slideshowWrap').cycle({
fx: 'custom',
cssBefore: {
left: leftVal,
top: 0,
opacity: 1,
display: 'block'
},
animOut: {
opacity: 0
},
animIn: {
left: leftVal,
top: 0,
},
cssAfter: {
zIndex: 0
},
cssFirst: {
left: leftVal
},
delay: -3000
});
});
</script>
I believe the above code would give you the desired effect, if not at least an idea of how to accomplish this, hope it helps!!
here is a link to the full docs on cycle custom fx http://jquery.malsup.com/cycle/adv.html
Do you need to have images, can you use background images? Why not just use css?
It will be responsive, but if you want to make the plugin resize itself as the user changes browsers size - it will need to be updated on window resize event.
Otherwise if someone with low res screeen opens the page, the slider will always be 100% of their screen and images will be centered (and "cropped")
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<style type="text/css">
.slideshowWrap {
width: 100%;
height: 500px;
}
.homeslideshow {
height: 100%;
width: 100%;
}
.slide1 {
background: url(background_01.jpg) no-repeat 50% 50%;
}
.slide2 {
background: url(background_02.jpg) no-repeat 50% 50%;
}
.slide3 {
background: url(background_03.jpg) no-repeat 50% 50%;
}
.homeslideshow img { display: none; }
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$('.slideshowWrap').cycle({
fx: 'fade',
slideResize: 0
});
});
</script>
<div style="margin: 0 auto" class="slideshowWrap">
<div class="homeslideshow slide1">
<img src="background_01.jpg" alt="" />
</div>
<div class="homeslideshow slide2">
<img src="background_02.jpg" alt="" />
</div>
<div class="homeslideshow slide3">
<img src="background_03.jpg" alt="" />
</div>
</div>
</body>
</html>
Create a full page background image slideshow like http://beyondfayte.com/ and http://hmxmedia.com/ using Flash?
I'm new to flash and I want to know hoe to create these full screen image slideshows, that start on page load and scale proportionally just like the above two websites, using Flash CS5 AS3.
Something like:
HTML:
<!doctype html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="your_styles.css">
</head>
<body>
<object>
<embed src="your_flash.swf" />
</object>
</body>
</html>
CSS:
html,
body
{
height: 100%;
padding: 0px;
}
body{ overflow: hidden; }
object,
embed
{
width: 100%;
height: 100%;
}
AS3:
package
{
import flash.display.Sprite;
import flash.display.StageScaleMode;
import flash.display.StageAlign;
public class Document extends Sprite
{
/**
* Constructor
*/
public function Document()
{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
}
}
}
You need to the flash width and height to 100% in the HTML tags, and listen to the Event.RESIZE handler to manually scale and move around the content as you want (use stage.stageWidth / stage.stageHeight to get the new size).
You also need to set the scaleMode to something useful, eg: stage.scaleMode = StageScaleMode.NO_SCALE;
How can i load the original image when the tumbnail version of the image has been clicked?
Im using ASP.NET in combinaton with javascript.
The original images are big, so they have been scaled on server side. This makes the site load faster. But somehow, both versions (original and tumbnail) of the images are being downloaded.
I'm trying to download only the tumbnail version of the image. And when the user clicks on the image, i want to show the original image.
How can i get this done?
Html such as below for each thumbnail image should do the trick
<a href="[url to original image]" target="_blank" id="thumbnail_link">
<img src="[url to thumbnail image]" alt="Click to see the full image" />
</a>
Edit: Modified to illustrate use of FancyBox.
Use above markup along with below java-script:
$(document).ready(function() {
$("a#thumbnail_link").fancybox();
})'
Don't forget to include jquery and fancybox js files.
I think you have to show thumbnails first and on click you need to open the original images in a new pop up window. You can do this using code as given below -
<SCRIPT LANGUAGE="JavaScript">
function openImage(imageFile){
windowOpen=window.open("",'Open','toolbar=no,location=no,directories=no,menubar=no,scrollbars=no,resizable=1,width=420,height=420');
windowOpen.document.writeln("<head><title>Image</title></head><body>");
windowOpen.document.writeln('<img src=http://www.mysite.com/' + imageFile + 'border=1>');
windowOpen.document.writeln("</body></html>");
}
</SCRIPT>
Then call this openImage() method during onClick of the thumbnail image.
You can pass imageFile as parameter to the function.
It sounds like you have both images referenced in your HTML, even though one is hidden from view, so the browser requests both. What you'd need to do is use JavaScript to create the full size <img> tag from scratch and then add it to the relevant place in the HTML. The browser will then load the full size image once it's added to the DOM.
For fancy box, all you need to do is
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
Regards,
Andy.
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://identify.site88.net/showimage.js'></script>
<style type='text/css'>
#test{
display:none
}
#blackout {
width:50%;
position:absolute;
background-color: rgba(0, 0, 0, .5);
display: none;
z-index: 20;
}
.modal {
margin: auto;
}
#close {
color: white;
font-weight: bold;
cursor: pointer;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
$('img').click(function () {
var img = $(this).clone().addClass('modal').appendTo($('#blackout'));
$('#blackout > #close').click(function () {
$('#blackout').fadeOut(function () {
img.remove();
});
});
$('#blackout').fadeIn();
});
});
$(window).load(function(){
$('#close2').hide();
$('span').click(function () {
$('#test').show();
$('#close2').show();
$('#txtsp').hide();
$('#blackout2 > #close2').click(function () {
$('#blackout2').fadeOut(function () {
$('#test').hide();
$('#txtsp').show();
$(this).css({
"text-decoration": ''
});
});
});
$('#blackout2').fadeIn();
});
});
</script>
</head>
<body>
<div id="blackout2"><div id="close2" >Close</div></div><img id="test" src="http://data.vietinfo.eu/News//2012/10/16/179281/1350402084.7404.jpg"/> <span id="txtsp">Click here to show image</span>
<br /><br />
<div id="blackout"><div id="close">Close</div></div><div style="width: 50px; height: 50px;"><img width="100%" src="http://dantri.vcmedia.vn/Uploaded/2009/06/02/hh02066.jpg" /></div>
</body>
</html>
You can replace tag span by your image have been scaled on server side.