Search the Community
Showing results for tags 'zoom'.
Found 3 results
-
Hi guys. I'm having the strangest problem right now, and I really need you help to figure it out. The footer stays nicely at the bottom of the page, but the content is not maxing out all the way down to the footer. The content of the left floater decides the height. If there is little content, it stays high on the page, and if I fill it up, it causes the whole page to overflow (scroll), not just the left floater. Here's what I wish to achieve: 1. Navbar on top. 2. Content with no margin to the navbar. 3. Footer just below the content, no margin. 4. Show the whole page on the screen without the need to scroll. 5. No change in the navbar-content-footer connection when zooming. 6. Keep the footer to the bottom, and keeping content from bleeding into the footer. Thanks for your time! HTML <!DOCTYPE html><html><head> <title>NAME</title> <link href="css/Style3.css" medio="screen" rel="stylesheet" type="text/css"/> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,300,700&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'> <!-- check if screen is no more than 480: if( screen.width <= 480 ) { location.href = '/mobile.html';}--> </style></head><style> body { background-color: blue; background-repeat: no-repeat; background-attachment: fixed; background-position: left; background-size: cover; } li#nameofmine a p{ border-bottom: 1px solid white; font-weight: 700;} li#nameofmine:hover > a p{ color: black; border-bottom: 1px solid black;}</style><body> <div id="wrap"> <div id="main"> <nav> <ul> <li id="nameofmine"><a href="#"><p>NAME</p></a></li> <li><a href="#"><p>Read</p></a></li> <li><a href="#"><p>Listen</p></a> <ul> <li><a href="#"><p>Videos</p></a></li> <li><a href="#"><p>Recordings</p></a></li> </ul></li> <li><a href="#"><p>Look</p></a></li> <li><a href="#"><p>Contact</p></a></li> </ul> </nav> <div id="flags"> <a href="index2.html"><div id="flag1"><h4 style="margin-top: 10%;">1</h4></div></a> <a href="index.html"><div id="flag2"><h4 style="margin-top: 10%;">2</h4></div></a> </div><div id="leftbar"> <div id="news"><h3>NEWS</h3><p>Website is under construction. More will follow. Soon.</p></div> </div> </div></div> <footer> <p>© Copyright 2014 NAME. All rights reserved.</p> </footer> </body></html> CSS html {height: 100%}body{ font-family: 'open sans', 'courier'; font-size: 16px; color: white; text-align: center; margin: 0; font-weight: 100; height: 100%;}body a{ color: white; text-decoration: none;}h1{ font-size: 5em; line-height: 0.2em; color: white;}h3{ font-size: 18px; font-weight: 100; color: white; text-align: center; text-decoration: underline;}h2{ font-size: 20px; font-weight: 100; color: white;}#wrap{ min-height: 100%;}#main{ overflow: auto; padding-bottom: 3em; }#flags{ height: 2em; width: 6em; position: absolute; right: 0%; top: 0%; font-size: 16px;}#flag1{ height: 2em; width: 49%; float: right; border-left: 1px solid white; background-size: cover; background-position: center; background-color: red;}#flag2{ height: 2em; width: 49%; float: left; background-size: cover; background-position: center; background-color: green;}#flag1:hover{ opacity: 0.5;}#flag2:hover{ opacity: 0.5;}nav ul { position: relative; width: 100%; margin-top: 0; margin-bottom: 0; padding: 0; list-style: none; color: white; font-family: 'Open Sans'; font-size: 16; background-color: rgba(255, 255, 255, 0.3); }nav ul li{ text-align: center; display: inline-block; position: relative;}nav ul a{ display: inline-block; float: none; padding: 1em 3em; letter-spacing: 1px; color: #eaebed;}nav ul li:hover > a{ color: black;}li#nameofmine{ text-align: center; display: inline-block; }li#nameofmine a p{ display: inline-block; float: none; font-weight: 700; color: white;}li#nameofmine:hover > a p{ color: black;}*html nav ul li a:hover/* IE6 */{ color: #000;}nav ul li:hover > ul { display: block;}/* Sub-menu */nav ul ul { list-style: none; margin: 0; padding: 0; display: none; position: absolute; left: 0; top: 100%; width: 100%; z-index: 99;}nav ul ul li { float: none; margin: 0; display: block;}nav ul ul li:last-child { box-shadow: none;}nav ul ul a { padding: 0.2em 1em; height: auto; line-height: 1; display: block; white-space: nowrap; float: none; text-transform: none;}*html nav ul ul a { /* IE6 */ height: 10px; width: 150px;}*:first-child+html nav ul ul a { /* IE7 */ height: 10px; width: 150px;}nav ul ul a:hover { }nav ul ul li:first-child a { }nav ul ul li:first-child a:after{ content: ''; position: absolute; left: 45%; top: -10px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid white;}nav ul ul li:first-child a:hover:after { border-bottom-color: black; }nav ul ul li:last-child a { }/* Clear floated elements */nav ul:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}* html #menu { zoom: 1; } /* IE6 */*:first-child+html #menu { zoom: 1; } /* IE7 */#leftbar{ float: left; left: 0; top: 0; width: 20%; height: 100%;}#news{ height: 100%; width: 98%; margin-left: 2%; border-left: 0px; border-top: 0px; border-right: 1px; border-bottom: 0px; border-color: white; border-style: solid; font-weight: 100; text-align: left; overflow: auto;}footer{ height: 3em; width: 100%; background-color: rgba(255, 255, 255, 0.3); text-align: center; clear: both; position: relative; margin-top: -4em;}
-
I'm looking for functionality likehttp://toronto.flyerland.ca/new/flyers/view/91938/ON/0/0/0/0/highland-farms/1081/8//1361788197Image gallery with zoom in, zoom out, pan view, reset image.this is build in bootstrap.jsI'm looking for jQuery. So i'm combining http://coffeescripter.com/code/ad-gallery/#ad-image-0& jQuery Panzoom.But it won't work perfectly as i needed. I googled so much. But couldn't find right solution. I want jquery image gallery with zoom in out effect
-
Hey, I have some problems with a javascript library (http://janne.aukia.com/zoomooz/) i'm using for my website (http://bram-de-leeuw.nl). The problem i'm having is with the zoom function, i added this function to the articles posted on the site but when i click on them it doesn't zoom and in the google chrome console it returns an error saying Uncaught TypeError: Object #<Object> has no method 'initialize' in the jquery.zoomooz.js:294 . But i just followed the examples i got with the library which work fine.. I don't know what to do or were to start fixing this. Another thing i would like to work is a scale function what will scale articles down, the oldest post are the smallest and the newer posts are normal size so there will be a sort of depth, i added the attachment as an example. The lines connecting the posts are connected to the category's of the posts, i don't know were to start here either so if you got any leeds please share! many thanks in advance!
