Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
Check this page www.danielmalek.bugs3.com/oferta.html, on Chrome you can see its a bit too long so the beam on the left side is not reaching end of site.
On firefox and IE it is seems to be right, also at localhost Chrome displays well.
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<title>Strony internetowe - Daniel Małek</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" type="text/css" rel="stylesheet" />
<script language="JavaScript" type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function (){
/*$("body").css("overflow-y", "hidden");*/
/*("#slider").css("overflow", "hidden");*/
function tytul() {
}
$(".galeria").click(
function()
{
$("#ukryte").toggle(200);
});
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<div id="header2"></div>
<div id="pasek"></div>
</div>
<div id="przedluzenie"></div>
<div id="content">
<div id="menu">
<div id="menu2">
<a class="start" href="index.html"></a>
<a class="galeria" href="#"></a>
<div id="ukryte" style="display: none;">
<a class="webdesign" href="webdesign.html"></a>
<a class="grafika" href="grafika.html"></a>
</div>
<div id="oferta_b"></div>
<a class="omnie" href="omnie.html"></a>
<a class="kontakt" href="kontakt.html"></a>
</div>
</div>
<div id="prawa_strona">
<div id="omnietxt" style="margin-bottom:60px;">
<ul style="margin-left:20px;" class="ofertatxt">
<li>Administracja istniejącymi stronami internetowymi</li>
<li>Hosting, domeny i instalacja stron na serwerze</li>
<li>Projektowanie i kodowanie stron www</li>
<li>Identyfikacja wizualna (tworzenie logo)</li>
<li>Dedykowane systemy CMS</li>
<li>Blogi Wordpress</li>
<li>Oprogramowanie sklepów KQSStore</li>
</ul>
</br>
<p class="ofertatxt">
Ponadto, wraz ze znajomymi programistami tworzymy młody, ambitny zespół, który jest w stanie stworzyć w pełni funkcjonalne i rozbudowane serwisy internetowe.</br></br>
Nie wystawiam faktury VAT, preferowany rodzaj współpracy to umowa o zlecenie lub umowa o dzieło.</p>
</div>
<div id="footerx">
<img src="img/foot_linia.png"></img><br>
<p class="stopka">Copyright © 2013 Daniel Małek </p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
var scrollSpeed = 70;
var step = 1;
var current = 0;
var imageWidth = 410;
var headerWidth = 410;
var restartPosition = -(imageWidth - headerWidth);
function scrollBg(){
current -= step;
if (current == restartPosition){
current = 0;
}
$('#header').css("background-position",current+"px 0");
}
var init = setInterval("scrollBg()", scrollSpeed);
</script>
<script type="text/javascript" charset="utf-8">
$(window).load(function(){
var content = $('#content').height();
var winh = $(window).height();
if(content>=winh){$('#menu').height(content);}
else{
winh=winh-200;
$('#menu').height(winh);}
});
</script>
</body>
</html>
And CSS:
* { padding: 0; margin: 0;}
.clear {clear: both;}
html{}
html, body, #container, #content{}
body {background: url('img/tekstura.png');background-repeat:repeat-y repeat-x;background-color:#d5d5d5;}
#container {margin: 0 auto; position:relative;}
#content {margin: 0 auto;position:relative;width:960px;overflow:auto;}
#header {background-color:#2099c8;background: url('img/heder/tekstura.png') repeat-x; height:160px; margin:0 auto; position:relative; width:100%;box-shadow: 0 0 30px 9px white;}
#pasek{height:3px;background: url('img/heder/pasek.png') repeat-x;}
#header2{background: url('img/heder/przod2.png') no-repeat;background-repeat:repeat-y repeat-x;margin: 0 auto;width:960px; height:157px;}
#gradient_poziom{height:37px; background: url('img/gradient_poziom.png') repeat-x;}
#prawa_strona{ float:right;width:720px; margin-right:10px;}
#przedluzenie{width:209px; height:40px;background-color:black;margin:0 auto;position:relative;right:376px;background: url('img/gradient_pion.png') repeat-y;}
#menu {float:left;width:209px;margin-right:5px;background: url('img/gradient_pion.png') repeat-y;}
#menu2{float:right;margin-right:20px;}
#ukryte {position:relative;left:23px;}
#start_b {background: url('img/start_b.png') no-repeat;height:29px;width: 169px;margin-bottom:15px;}
.start {background:url('img/start.png') no-repeat;display:block;height:29px;width:169px;margin-bottom:15px;}
a.start:hover {background-position: 0px -29px;}
#galeria_b {background: url('img/galeria_b.png') no-repeat;height:29px;width: 169px;margin-bottom:15px;}
a.galeria {background: url('img/galeria.png') no-repeat;display:block;height:29px;overflow:hidden;width: 169px;margin-bottom:15px;}
a.galeria:hover {background-position: 0px -29px;}
#webdesign_b {background: url('img/webdesign_b.png') no-repeat;height:20px;width: 142px;margin-bottom:15px;}
a.webdesign {background: url('img/webdesign.png') no-repeat;display:block;height:20px;overflow:hidden;width: 169px;margin-bottom:15px;}
a.webdesign:hover {background-position: 0px -20px;}
#grafika_b {background: url('img/grafika_b.png') no-repeat;height:20px;width: 142px;margin-bottom:15px;}
a.grafika {background: url('img/grafika.png') no-repeat;display:block;height:20px;overflow:hidden;width: 169px;margin-bottom:25px;}
a.grafika:hover {background-position: 0px -20px;}
#oferta{background: url('img/oferta_b.png') no-repeat;height:29px;width: 142px;margin-bottom:15px;}
a.oferta {background: url('img/oferta.png') no-repeat;display:block;height:29px;width: 142px;margin-bottom:15px;}
a.oferta:hover {background-position: 0px -29px;}
#omnie_b{background: url('img/omnie_b.png') no-repeat;height:29px;width: 169px;margin-bottom:15px;}
a.omnie {background: url('img/omnie.png') no-repeat;display:block;height:29px;width: 169px;margin-bottom:15px;}
a.omnie:hover {background-position: 0px -29px;}
#oferta_b{background: url('img/oferta_b.png') no-repeat;height:29px;width: 169px;margin-bottom:15px;}
a.oferta {background: url('img/oferta.png') no-repeat;display:block;height:29px;width: 169px;margin-bottom:15px;}
a.oferta:hover {background-position: 0px -29px;}
#kontakt_b {background: url('img/kontakt_b.png') no-repeat;height:29px;width: 169px;margin-bottom:15px;}
a.kontakt {background: url('img/kontakt.png') no-repeat;display:block;height:29px;width: 169px;margin-bottom:15px;}
a.kontakt:hover {background-position: 0px -29px;}
.minwebd{border: 1px solid #2e2e2e;float:left;position:relative;left:10px;}
.cien{display:block;height:28px;width:216px;float:left;margin-left:22px;}
#cienie{z-index:-1;float:right;position:relative;top:-8px;}
#jrs{margin-top:25px;float:right;margin-left:7px;}
.jrs{background: rgba(255, 255, 255, 0.7);width:218px;float:left;}
.jrs_img{}
.jrs_tekst{margin: 0 10px 15px 10px; text-align:justify;color:#464646;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:12px;}
.znak_plus{position:relative;float:left;width:20px;font-size:20px;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;margin-top:15px;text-align:center;color:#3f3f3f;}
#footerx{float:right;margin:20px 0;width:412px;}
.stopka{float:right;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:0.6em;color:#2e2e2e;position:relative;margin-right:10px;margin-top:5px;}
.obrazek1{
height:159px;
width: 198px;
float:left;
border: 1px solid #417f99;
}
.obrazek2{}
#galgraf{margin-right:30px;float:left;}
#napis{ width:190px;float:right;height:35px;background: white;background: rgba(255, 255, 255, 0.7); display: block; padding: 5px ; margin: 0 0 20px 20px;}
#wstep{float:left; position:relative; width:auto; background: white; background: rgba(255, 255, 255, 0.7);margin: 0 0 30px 66px; padding:10px 15px 10px 15px;color:#464646;}
#gallery{
float:right;
}
#gallery2{
float:left;
width:200px;
}
#webdopisy{
float:left;
}
#webdopis{float:right;width: 430px; background: white;background: rgba(255, 255, 255, 0.7); display: block;margin: 0 0 15px 40px; padding:15px;color:#464646;}
#beczka{margin-bottom:30px;position:relative;float:left;}
.webdopis {}
.opis a {
text-decoration:none;
color:#006c96;
}
.opis a:hover{
text-decoration:underline;
color:#006c96;
}
h1 {
color:black;
font-size:0.9em;
font-family:tahoma,Helvetica,sans-serif;
font-weight:100;
text-align:center;
}
.omnietxt{line-height:20px;color:#464646;font-size:0.9em;float:left;font-family:arial,Helvetica,sans-serif;padding: 0 5px 0 5px;}
.ofertatxt{line-height:20px;color:#464646;font-size:0.9em;font-family:arial,Helvetica,sans-serif;text-align:justify}
#omnietxt{
float:left;
width: 500px;
background: white;
background: rgba(255, 255, 255, 0.7);
display: block;
padding:15px 15px 15px 15px;
margin: 0 0 110px 120px;
}
#wysokosc{
height:420px;
}
/* LAJTBOKS */
.thumb {
float:left;
margin: 0 0 0 20px ;
border: 1px solid #2e2e2e;
}
.clearFloat {
clear:both;
}
/* KONTAKT */
#numery{ padding:20px 20px 20px 20px;float:left;position:relative;left:265px;background: rgba(255, 255, 255, 0.7); margin-top:15px;margin-bottom:150px;}
.gg1 {position:relative;top:2px;left: 13px;}
.gg2 {font-style:italic;font-size:1.2em;position:relative;top:5px;left:15px;}
.adres1 {color:#015d81;font-size:15;font-family:Arial,Helvetica,sans-serif;}
.adres2 {position:relative;top:5px;color:#015d81;font-size:15;font-family:Arial,Helvetica,sans-serif;}
You have two scripts embedded into HTML:
<script type="text/javascript" charset="utf-8">
$(window).load(function(){
var content = $('#content').height();
var winh = $(window).height();
if(content>=winh){$('#menu').height(content);}
else{
winh=winh-200;
$('#menu').height(winh);}
});
</script>
<script type="text/javascript" charset="utf-8">
$(window).load(function(){
var content = $('#content').height();
$('#menu').height(content);
});
</script>
Both fire at the same time: $(window).load, and both do the same thing: $('#menu').height(value);, but the value is different.
Obviously, this is erroneous. Probably in Chrome those snippets finish in different order than in other browsers, thus the difference.
UPD #1
I'm opening your link now with Chrome, and the vertical scrollbar does not appear. I assume my solution worked, please don't forget to accept the question. ;)
But do you know that you don't need Javascript to solve this task?
Here's an example how vertical stretching can be done in pure CSS: CSS 3 col template 100% same height
Also, you should not use non-semantic elements for decoration: #przedluzenie, #pasek etc. That can be also solved in pure CSS without messing your HTML.
Related
I have one table with some data. If I print this page, I want to print the same table two times side by side. Want to make copy.
Exactly like this in this image. But in this image datas are different. Its just for sample to show. But my need is same data table sholud come side by side while printing.
plunkr
/* Larger Side Border */
.tb8 {
width: 230px;
height:24px;
border: 1px solid #3366FF;
border-left: 4px solid #3366FF;
}
.button{
border:4px solid #26759E;-webkit-box-shadow: #878787 0px 2px 2px ;-moz-box-shadow: #878787 0px 2px 2px ; box-shadow: #878787 0px 2px 2px ; -webkit-border-radius: 23px; -moz-border-radius: 23px;border-radius: 23px;font-size:13px;font-family:arial, helvetica, sans-serif; padding: 10px 20px 10px 20px; text-decoration:none; display:inline-block;text-shadow: 2px 2px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
background-color: #3093C7; background-image: -webkit-gradient(linear, left top, left bottom, from(#3093C7), to(#1C5A85));
background-image: -webkit-linear-gradient(top, #3093C7, #1C5A85);
background-image: -moz-linear-gradient(top, #3093C7, #1C5A85);
background-image: -ms-linear-gradient(top, #3093C7, #1C5A85);
background-image: -o-linear-gradient(top, #3093C7, #1C5A85);
background-image: linear-gradient(to bottom, #3093C7, #1C5A85);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#3093C7, endColorstr=#1C5A85);
}
.button:hover{
border:4px solid #26759E;
background-color: #26759E; background-image: -webkit-gradient(linear, left top, left bottom, from(#26759E), to(#133D5B));
background-image: -webkit-linear-gradient(top, #26759E, #133D5B);
background-image: -moz-linear-gradient(top, #26759E, #133D5B);
background-image: -ms-linear-gradient(top, #26759E, #133D5B);
background-image: -o-linear-gradient(top, #26759E, #133D5B);
background-image: linear-gradient(to bottom, #26759E, #133D5B);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#26759E, endColorstr=#133D5B);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Print Directive of html templates </title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/1.4.1/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.printToCart = function(printSectionId) {
var innerContents = document.getElementById(printSectionId).innerHTML;
var popupWinindow = window.open('', '_blank', 'width=600,height=700,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no');
popupWinindow.document.open();
popupWinindow.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + innerContents + '</html>');
popupWinindow.document.close();
}
});
</script>
</head>
<body id="printSectionId" ng-app="myApp">
<div ng-controller="myCtrl">
<h1>AngularJS Print html templates</h1>
<form novalidate>
First Name:
<input type="text" ng-model="firstName" class="tb8">
<br>
<br> Last Name:
<input type="text" ng-model="lastName" class="tb8">
<br>
<br>
<button ng-click="Submit()" class="button">Submit</button>
<button ng-click="printToCart('printSectionId')" class="button">Print</button>
</form>
</div>
<div>
<br/>
<br/>More About AngularJS Print...</div>
</body>
</html>
Can anyone please tell me if you know the answer.
I found a piece of code using script with CSS that allows me to have a menu which sticks to the top of the screen when you scroll down.
At the moment it's aligned left and I want it centered under my title and to stay centered when you scroll down.
I've tried changing a few values and using padding but its creating problems and I figured there must be a easier to do it that I'm probably missing.
HTML
<pre>
<script>
$(function() {
var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
if (scroll_top > sticky_navigation_offset_top) {
$('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
} else {
$('#sticky_navigation').css({ 'position': 'relative' });
}
};
sticky_navigation();
$(window).scroll(function() {
sticky_navigation();
});
});
</script>
<div id="demo_top_wrapper">
<div id="sticky_navigation_wrapper">
<div id="sticky_navigation">
<div class="demo_container">
<ul>
<li>About Me</li>
<li>My Work</li>
<li>Experience</li>
<li>Contact Me</li>
</ul>
</div>
</div>
</div>
</div>
</pre>
CSS
.demo_container { width:980px; margin:0 auto;padding-left:0 auto; }
#demo_top_wrapper { margin:0 0 20px 0; }
#demo_top { height:100px; padding:20px 0 0 0; }
#my_logo { font:70px Georgia, serif; }
#sticky_navigation_wrapper { width:100%; height:50px; }
#sticky_navigation { width:100%; height:50px; background:url(trans-black-60.png); -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999;float:centre }
#sticky_navigation ul { list-style:none; margin:0; padding:5px; }
#sticky_navigation ul li { margin:0; padding:0; display:inline; }
#sticky_navigation ul li a { display:block; float:left; margin:0 0 0 5px; padding:0 20px; height:40px; line-height:40px; font-size:14px; font-family:Arial, serif; font-weight:bold; color:#ddd; background:#333; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }
Actually, your #sticky_navigation div's width is set at 100%, so it's as big as your page. You have to set the width of the div to "auto" or a precise value (like 400px) or remove it, the set its margin to "auto"
Then, remove "left:0px" from the js code, it sets your div 0px far from the left bound of your page.
css:
#sticky_navigation { width:auto; margin:auto; text-align:center; height:50px; background:url(trans-black-60.png); -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999;float:centre }
.demo_container { margin:auto; text-align:center; }
js:
$('#sticky_navigation').css({ 'position': 'fixed', 'top':0 });
There is a project page of two Grids, a grid that showcase images on the left side (width: 65%) and anther grid that show information about the project on the right side (width 35%).
Here is the link to a Live Preview: http://meeped.co.uk:93/portfolio/ambition-world.html
How to change the information grid that is on the right side to be fixed and scroll with the page? and to stop before hitting the footer.
Note: I have tried to change the position to Fixed, it make it scroll but the grid width keep stretching with the page and overflow the width of the page which is 1030px.
I have tried lot of JavaScript snippets to make it scroll and stop at the footer, but none worked. What would you recommend? without using a plugin.
The HTML of the page is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" /
<meta name="viewport" id="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=10.0, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="../assets/css/core.css">
<link rel="stylesheet" type="text/css" href="../assets/css/fixes.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width : 1030px)" href="../assets/css/tablets-landscape.css"/>
<link rel="stylesheet" type="text/css" media="screen and (max-width : 770px)" href="../assets/css/tablets-portrait.css"/>
<link rel="stylesheet" type="text/css" media="screen and (max-width : 500px)" href="../assets/css/phone.css"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
</head>
<body>
<!--Header--><header>
<div id="headerWrapper">
<div id="headerContent">
<div id="headerLogo">
<img src="../assets/elements/logo.png"/>
</div>
<nav><ul id="mainMenu" class="snapjs-expand-left">
<li>Home</li>
<li>Portfolio
<li>About Me</li>
<li>Contact Me</li>
<li>Blog</li>
</ul></nav>
</div>
</div>
</header>
<!--Website Content--><div id="Page">
<div id="secondHeader">
<a class="secondHeader-menuButton" href="#">Menu</a>
<p id="logo-smallScreen">LOAI Design Studio</p>
</div>
<div class="wrapperB">
<div id="portfolio-projectPage" class="content">
<div class="imagesGrid">
</div>
</div>
</div>
</div>
<!--Footer Section--><footer>
<div id="footer-sectionA">
<div class="footerContent">
<h3><strong>Want to get started?</strong></h3>
<p>I offer free, no-obligation consultation, will review your project <br> & discuss ways to achieve your goals within your budget & time frame.</p>
<p><a target="_blank" href="http://www.vcita.com/meeting_scheduler?o=YnV0dG9u&s=http%3A%2F%2Fwww.loaidesign.co.uk%2F&v=1afd868e">Schedule an Appointment Now</a></p>
</div>
</div>
<div id="footer-sectionB">
<div class="footerContent">
<p>Copyright ©2012 LOAI Design Studio. <br> All rights reserved.Terms & Conditions.</p>
</div>
</div>
</footer>
</div><!--The End Of The Page-->
<!--Scripts Links-->
<script type="text/javascript" src="../assets/libraries/jquery.js"></script>
<script type="text/javascript" src="../assets/js/slider.js"></script>
<script type="text/javascript" src="../assets/js/main.js"></script>
<script src="../assets/libraries/modernizr.js"></script>
<!--GoSquared Scripts-->
<script type="text/javascript">
var GoSquared = {acct: "GSN-035800-K"};
(function(w){
function gs(){
w._gstc_lt = +new Date;
var d = document, g = d.createElement("script");
g.type = "text/javascript";
g.src = "http://d1l6p2sc9645hc.cloudfront.net/tracker.js";
var s = d.getElementsByTagName("script")[0];
s.parentNode.insertBefore(g, s);
}
w.addEventListener ? w.addEventListener("load", gs, false) : w.attachEvent("onload", gs);
})(window);
</script>
</body>
</html>
The CSS
/*Portoflio Project Page*/
#portfolio-projectPage{
text-align: left;
position: relative;
}
.imagesGrid, .detailsBox {
display: inline-block;
vertical-align: top;
}
.imagesGrid {
width: 65%;
}
.imagesGrid img{
border: 1px solid #E8E8E8;
margin-bottom: 10px;
}
.imagesGrid p {
border-top: 1px solid #E8E8E8;
padding-top: 8px;
margin: 10px 0;
}
.imagesGrid p:first-of-type {
border-top: none;
padding: 0 0 10px 0;
margin: 0;
}
.detailsBox {
width: 35%;
margin-top: 28px;
padding-left: 45px;
}
.detailsBox p {
border-bottom: 1px solid #E8E8E8;
padding-bottom: 10px;
margin: 10px 0;
}
.detailsBox p, h3 {
vertical-align: bottom;
}
.detailsBox a {
vertical-align: middle;
}
.detailsBox p:last-of-type {
border-bottom: 3px solid #E8E8E8;
margin: 0;
}
.detailsBox div {
background-color: #F5F5F5;
padding: 15px 0;
text-align: center;
border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
}
.detailsBox div a{
background-color: #E8E8E8;
padding: 10px 14px;
cursor: pointer;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.detailsBox div a:hover{
color: #FFFFFF;
background-color: #456087;
}
.detailsBox div br {
display: none;
}
.shareButtons a {
margin-left: 3px;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.shareButtons a span {
display: none;
}
Also Here is a JS I am using:
//Scroll-up button//
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
}
else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600); return false;
});
So, the issue is that, by adding position:fixed; you are positioning the sidebar relative to the viewport (which is the way fixed positioning works). This means that the width of a position:fixed; element will always be relative to the width of the viewport.
The way around this is to introduce a new wrapper element to the sidebar item and position this new element as fixed while the sidebar remains positioned normally.
Here is an example of how to do so... you want to add a wrapper once the user scrolls past (but only if the wrapper doesn't already exist), and remove the wrapper once they scroll back up (but only if it exists).
So, you can include in your JS:
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
if ($('.fixie').length == 0) {
$('.detailsBox').wrap('<div class="fixie" />');
}
}
else {
$('.scrollup').fadeOut();
if ($('.fixie').length != 0) {
$('.detailsBox').unwrap('<div class="fixie" />');
}
}
});
Then, in your CSS, you can do the fixed positioning stuff.
.fixie {
width:1030px;
position:fixed;
top:100px; /* or however much you want */
left:50%;
margin-left:-515px;
/* these two lines center the wrapper */
padding:0 20px; /* to match the replaced wrapper */
}
.detailsBox {
float:right;
}
.imagesGrid {
float:left;
}
This should work :)
If I wanted to make a horizontal line, I would do this:
<style>
#line{
width:100px;
height:1px;
background-color:#000;
}
</style>
<body>
<div id="line"></div>
If I wanted to make a vertical line, I would do this:
#line{
width:1px;
height:100px;
background-color:#000;
}
</style>
<body>
<div id="line"></div>
A curved line is trickier, but possible using border-radius and wrapping the element:
<style>
.curve{
width:100px;
height:500px;
border:1px #000 solid;
border-radius:100%;
}
#wrapper{
overflow:hidden;
width:40px;
height:200px;
}
</style>
<body>
<div id="wrapper">
<div class="curve"></div>
</div>
</body>
But I cannot even fathom how I could generate squiggly lines! Is this even remotely possible using only css (and javascript since it does seem that it will be necessary to be able to more easily generate them).
note:
As expected, given your answers there is no way to do this in sole css...javascript and jquery are 100 percent okay for your answer...NO IMAGES CAN BE USED
This question is fairly old, but I found a way to do with without Javascript, repetitive CSS or images.
With background-size you can repeat a pattern, which can be created with pure CSS using linear-gradient or radial-gradient.
I put a bunch of examples here: http://jsbin.com/hotugu/edit?html,css,output
The basic gist is:
.holder {
/* Clip edges, as some of the lines don't terminate nicely. */
overflow: hidden;
position: relative;
width: 200px;
height: 50px;
}
.ellipse {
position: absolute;
background: radial-gradient(ellipse, transparent, transparent 7px, black 7px, black 10px, transparent 11px);
background-size: 36px 40px;
width: 200px;
height: 20px;
}
.ellipse2 {
top: 20px;
left: 18px;
background-position: 0px -20px;
}
<div class="holder">
<div class="ellipse"></div>
<div class="ellipse ellipse2"></div>
</div>
You can produce some convincing squiggly lines with some modifications:
.holder {
position: relative;
width: 200px;
height: 50px;
top: 25px;
}
.tinyLine {
position: absolute;
/* Cuts off the bottom half of the pattern */
height: 20px;
/* For better cross browser consistency, make it larger with width. */
width: 1000%;
/* And then scale it back down with scale, recentering with translateX. */
transform: translateX(-45%) scale(0.1);
}
.tinyLine1 {
background: linear-gradient(45deg, transparent, transparent 49%, red 49%, transparent 51%);
}
.tinyLine2 {
background: linear-gradient(-45deg, transparent, transparent 49%, red 49%, transparent 51%);
}
.tinyLine {
/* Must be after background definition. */
background-size: 40px 40px;
}
<div class="holder">
<div class="tinyLine tinyLine1"></div>
<div class="tinyLine tinyLine2"></div>
</div>
The browser support is okay (http://caniuse.com/#feat=css-gradients), IE 10 will probably work, however things break down at small scales in different browsers. If you want it to work on really small scales consistently you may want to make the line on a larger scale and then scale it down with transform: scale(x);.
It should also be very fast, linear-gradients are rendered on the GPU in chrome.
EDIT: Given the requirement of no images/data uri.
You can also cram a bunch of border-radius elements together, alternating with top/bottom or left/right edges disabled. I've generalized this into a function that appends them to an element.
Javascript, where squigglecount is the number of "squiggles". You could generalize that to an actual width if you so desired.
http://jsfiddle.net/V7QEJ/1/
function makeLine(id, squiggleCount) {
var curve;
var lineEl = $(id);
for (var i = 0; i < squiggleCount; i++) {
curve = document.createElement('div');
curve.className = 'curve-1';
lineEl.append(curve);
curve = document.createElement('div');
curve.className = 'curve-2';
lineEl.append(curve);
}
}
$(document).ready(function(){
makeLine('#line', 16);
});
.curve-1,
.curve-2 {
display: inline-block;
border: solid 1px #f00;
border-radius: 50px;
height: 20px;
width: 20px;
}
.curve-1 {
border-bottom: none;
border-left: none;
border-right: none;
}
.curve-2 {
border-top: none;
border-left: none;
border-right: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="line">
</div>
Old (with images):
There's already a bunch of answers, but here's an easy way to do a vertical squiggly line, similar to Lawson's answer.
Basically, you use background-image and a data-uri of a squiggly line to do it. I probably wouldn't use this for anything but it's an interesting thought exercise. There are a bunch of data uri generators that you can use online to change your own images.
http://jsfiddle.net/zadP7/
.aux{
display: inline-block;
vertical-align: top;
}
.line{
display: inline-block;
height: 400px;
width: 10px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAoCAYAAADHVmuAAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QYYFSs0NbBHxgAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAGc0lEQVQ4EQFoBpf5AQAAAP8AAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAD/AAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAD/AAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAEAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAEBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAAAAAAAAAAAAAAAAAAAQEAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAEAAAAAAgAAAAAAAAAAAAAAAAAAAP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAD/AAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAEAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAQAAAP8AAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACelxA/rjIgrgAAAABJRU5ErkJggg==);
}
<div class="aux">Stuff</div>
<div class="line"></div>
<div class="aux">More Stuff</div>
Pure CSS solution:
We can use the sin wave character '∿' character and then
Set a negative value for letter-spacing
FIDDLE
Just for fun we can use different characters to get other squiggles:
FIDDLE #2
div {
font-size: 50px;
font-family: verdana;
}
.tilde {
letter-spacing: -19px;
}
.ohm {
letter-spacing: -6px;
}
.ac {
letter-spacing: -25px;
}
.acd {
letter-spacing: -11px;
}
.curlyv {
letter-spacing: -12px;
}
.frown {
letter-spacing: -13px;
}
<div class="acd">∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿</div>
<div class="tilde">˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜</div>
<div class="curlyv">⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎⋎</div>
<div class="frown">⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢⌢</div>
<div class="ac">∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾∾</div>
<div class="ohm">ΩΩΩΩΩΩΩΩΩΩ</div>
If you want the underline of some text to be a squiggly line, you can use the following css:
span {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}
<span>Example text here</span>
Source: https://developer.mozilla.org/en/docs/Web/CSS/text-decoration-line#example
if you are not looking for something really neat, but just for the fun of it, play with multiple box-shadow:
http://codepen.io/gcyrillus/pen/mfGdp or http://codepen.io/gcyrillus/pen/xhqFu
.curve{
margin:3em 0;
width:100px;
height:150px;
border-radius:50%;
box-shadow:
0px 2px 1px -1px,
400px 0px 0px 0px white,
400px 2px 1px -1px ,
300px 0px 0px 0px white,
300px -2px 1px -1px,
600px 0px 0px 0px white,
600px 2px 1px -1px ,
500px 0px 0px 0px white,
500px -2px 1px -1px,
800px 0px 0px 0px white,
800px 2px 1px -1px ,
700px 0px 0px 0px white,
700px -2px 1px -1px,
1000px 0px 0px 0px white,
1000px 2px 1px -1px ,
900px 0px 0px 0px white,
900px -2px 1px -1px,
1200px 0px 0px 0px white,
1200px 2px 1px -1px ,
1100px 0px 0px 0px white,
1100px -2px 1px -1px,
1400px 0px 0px 0px white,
1400px 2px 1px -1px ,
1300px 0px 0px 0px white,
1300px -2px 1px -1px,
1600px 0px 0px 0px white,
1600px 2px 1px -1px ,
1500px 0px 0px 0px white,
1500px -2px 1px -1px;
position:relative;
}
.curve:before,.curve:after {
content:'';
position:absolute;
height:100%;
width:100%;
border-radius:100%;
box-shadow:inherit;
}
.curve:before {
left:100%;
transform:rotate(180deg);
}
.curve:after {
left:200%;
}
﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏﹏
& #65103 ; (wavy low line)
I hope this is not too much off topic - here is how to use those squiggly lines to underline some text (should be a common use case.)
method 1 (snatched from Wulf answering a related question)
<span style="border-bottom: 1px dotted #ff0000;padding:1px">
<span style="border-bottom: 1px dotted #ff0000;">
foobar
</span>
</span>
(not really a squiggly line but a collection of dots, but looks OK and is beautifully simple.)
method 2 (inspired by DanieldD)
using & #65103 ; (wavy low line) unicode character and absolute / relative positioning to put that character underneath some text. Here is a fiddle
here is "the meat" of the code for the positioning
function performUnderWavyLowLineazation(contentElt){
var wavyFontSize = 40;
var width = contentElt.width();
contentElt.addClass("underWavyLowLined");
replaceSpaceByNonBreakingSpace(contentElt);
var sp = "<span/>";
var wrapper = contentElt.wrap(sp).parent();
wrapper.addClass("wavyParent");
var underlining = jQuery(sp, {"class" : "wavyLowLine"}).prependTo(wrapper);
var ghost;
var invisibleGhostThatTakesUpTheSpaceThatUnderWavyLowLinedElementShouldTakeButDoesntDueToBeingAbsolute
= ghost = jQuery(sp, {"class": "invisibleUnderWavyLowLined"}).appendTo(wrapper);
ghost.html(contentElt.html());
ghost.find("*").removeAttr("id");
replaceSpaceByNonBreakingSpace(ghost);
var numWavyChars = Math.floor(0.1 + width/wavyFontSize);
innerUnderLine = jQuery(sp, {"class": "innerWaveLine"}).appendTo(underlining);
innerUnderLine.html("﹏".repeat(numWavyChars));
var lineLength = wavyFontSize * numWavyChars;
var defect = width - lineLength;
innerUnderLine.css("left", defect/2);
var wavyGroup = jQuery(sp, {"class" : "wavyGroup"}).prependTo(wrapper);
underlining.appendTo(wavyGroup);
contentElt.appendTo(wavyGroup);
}
Thank #yeerk for such a wonderful solution!
But I would like to suggest some improvements to his first variants — to those of waves what seem to be more triangular. I would suggest to use :before and :after pseudo-elements instead of hard-coded enclosed divs.
It may look like this (html):
<div class="triangly-line"></div>
— where triangly-line is a target decorated element (not "waved" but "triangled").
Corresponding styles (using LESS notation) will look like this:
#line-width: 300px;
#triangled-size: 6px;
#triangly-color: red;
#double-triangled-size: (#triangled-size * 2 - 1px);
.linear-gradient (#gradient) {
background: -webkit-linear-gradient(#gradient);
background: -o-linear-gradient(#gradient);
background: linear-gradient(#gradient);
}
.triangly-gradient (#sign, #color) {
.linear-gradient(~"#{sign}45deg, transparent, transparent 49%, #{color} 49%, transparent 51%");
}
.triangly-line {
overflow: hidden;
position: relative;
height: #triangled-size;
&:before {
.triangly-gradient("", #triangly-color);
}
&:after {
.triangly-gradient("-", #triangly-color);
}
&:before,
&:after {
content: "";
display: block;
position: absolute;
width: #line-width;
height: #triangled-size;
background-size: #double-triangled-size #double-triangled-size !important;
}
}
Resulted CSS (using specified above parameters):
.triangly-line {
overflow: hidden;
position: relative;
height: 6px;
}
.triangly-line:before {
background: -webkit-linear-gradient(45deg, transparent, transparent 49%, red 49%, transparent 51%);
background: -o-linear-gradient(45deg, transparent, transparent 49%, red 49%, transparent 51%);
background: linear-gradient(45deg, transparent, transparent 49%, red 49%, transparent 51%);
}
.triangly-line:after {
background: -webkit-linear-gradient(-45deg, transparent, transparent 49%, red 49%, transparent 51%);
background: -o-linear-gradient(-45deg, transparent, transparent 49%, red 49%, transparent 51%);
background: linear-gradient(-45deg, transparent, transparent 49%, red 49%, transparent 51%);
}
.triangly-line:before,
.triangly-line:after {
content: "";
display: block;
position: absolute;
width: 300px;
height: 6px;
background-size: 11px 11px !important;
}
Before there was HTML5 and Canvas, there was JavaScript VectorGraphics. You may want to give it a try if you want to draw Circles, Ellipses etc. etc. in pure HTML.
Instead of using the border, use a tiled background image.
I do not think there is a solution that get's away without using a graphics file and that also works in all browsers.
If you are brave you can try this:http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/
It allows to draw on the canvas in HTML5, but it would not work on older browsers.
if you can add a lot of html you can use this:
http://jsfiddle.net/QsM4J/
HTML:
<body>
<p>
before
</p>
<div id="sqig">
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
</div>
<p>
after
</p>
</body>
CSS:
#sqig{
position:relative;
width:400px;
height:6px;
}
#sqig div{
position:relative;
width:6px;
height:6px;
display: inline-block;
margin:0 0 0 -4px;
padding:0;
}
#sqig .topsqig div{
border-radius: 3px;
top:1px;
border-top: 1px solid #000;
}
#sqig .bottomsqig div{
border-radius: 3px;
top:-1px;
border-bottom: 1px solid #000;
}
Here is a SASS wave line generator based on the answer from #yeerk. If you want triangles, use the generator above by #lilliputten.
$waveHeight: 40px;
$waveLength: 70px;
$waveRadius: 13px; // adjust depending on length
$waveThickness: 8px;
#mixin waveSide() {
position: absolute;
background: radial-gradient(ellipse, transparent, transparent $waveRadius, black $waveRadius, black #{$waveRadius + $waveThickness}, transparent #{$waveRadius + $waveThickness});
background-size: #{$waveLength} #{$waveHeight * 2};
height: $waveHeight;
}
.wavy {
width: 400px; // give the wave element a length here
#include waveSide;
&::before {
$waveOffset: $waveLength / 2;
#include waveSide;
content: '';
width: calc(100% - #{$waveOffset});
top: $waveHeight;
left: $waveOffset;
background-position: 0px -#{$waveHeight};
}
}
I found a slighty nicer way to achieve trangle squiggly lines in CSS without halving heights or applying tricks that don't work well across browsers.
I tried #yeerk's solution but it only works well in Chrome. The lines had artifacts on Safari and Firefox.
Firefox
Safari
This solution is a variation of #liliputen's solution, however it improves on ease of flexibility.
You can change the line's size easily from the background-size property.
.squiggly {
position: relative;
height: 10px;
width: 100%;
}
.squiggly::after,
.squiggly::before {
height: inherit;
width: inherit;
background-size: 12px 100%; /* Change this to adjust the size of the squiggly line. */
content: "";
position: absolute;
}
.squiggly::before {
top: -2px;
background-image: linear-gradient(45deg, red 35%, transparent 0),
linear-gradient(-45deg, red 35%, transparent 0);
}
.squiggly::after {
top: 0px;
background-image: linear-gradient(45deg, white 35%, transparent 0),
linear-gradient(-45deg, white 35%, transparent 0);
}
<div class="squiggly"></div>
You can also find it here on JS Fiddle.
If you are using Javascript, this can be easily achieved using a sine wave - this is how programming languages have achieved controllable squiggly lines for decades! You should be able to find plenty of examples out there, but essentially you just do loop with an incrementing x value and apply the sine function sin(). This used to be cool for doing screen-savers in the 90s and animating them, etc.
Suppose I've 10 divs in the form of squares. Lets call it the home page.
Out of these 10,
3 divs have class .event1
5 divs have class .event2
2 divs have class .event3
<div class="boxes event1">
....//3-times
....
</div>
<div class="boxes event2">
....//5-times
....
</div>
<div class="boxes event3">
....//2-times
....
</div>
The boxes are placed next to one another.
When I click event1, all box fadeout except those having the class event1. Similarly, for all classes. On clicking home, all boxes will again fade in.
<div id="navi">
<div id="t0"><span>Home</span></div>
<span>Event1</span>
<span>Event2</span>
<span>Event3</span>
</div>
My JQuery code for fadeOut:
<script type="text/javascript">
$(function () {
$('#t0').click(function() {
$("*").animate({
opacity: 1.0
}, 500 );
});
$("#navi a").click(function() {
c = $(this).text().toLowerCase();
if (c!="home"){
$('.' + c).animate({
opacity: 1.0
}, 500 ).addClass('w1');
$('.boxes').not('.' + c).animate({
opacity: 0.0
}, 500 );
}
});
});
</script>
CSS for the classes:
.boxes, .event1, .event2, .event3 {
background:rgba(0, 0, 0, .30);
float:left;
position:relative;
overflow:hidden;
width:100px;
height:100px;
margin:2px;
box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
}
.w1:hover{
background:rgba(0, 0, 0, .30);
float:left;
width:200px;
height:200px;
position:absolute;
overflow:hidden;
box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
}
Now I want to make only a particular box increase in size (width:200px; height:200px), when the mouse pointer is hovered. I can't find a way to do it.
When I'm adding the class .w1 in javascript code, it is being applied to all the elements having class event1 or event2 or event3 (whichever one was selected). So, when I'm hovering to a particular box of that class (which was selected), all the boxes undergo transition and the boxes shift.
I want only one box to change dimensions while the other boxes are at their original place.
Also, this hovering event has to be activated for a particular event so that one can't hover on elements when home is selected. I even tried doing this by changing z-index but the page got pretty messed up.
I felt free to rebuild your project. Instead of css i use javascript in this example. The main point of this example is, that i do not resize the existing box. I build a new div, copy the content of the old div, position it absolute and set the opacity of the old one to 0. jsfiddle link: http://jsfiddle.net/56yeQ/8/
html:
<div id="navi">
<div id="t0"><span>Home</span></div>
<span>Event1</span>
<span>Event2</span>
<span>Event3</span>
</div>
<div class="boxes event1">
1
</div>
<div class="boxes event1">
2
</div>
<div class="boxes event1">
3
</div>
<div class="boxes event2">
4
</div>
<div class="boxes event2">
5
</div>
<div class="boxes event2">
6
</div>
<div class="boxes event2">
7
</div>
<div class="boxes event2">
8
</div>
<div class="boxes event3">
9
</div>
<div class="boxes event3">
10
</div>
css:
.boxes, .event1, .event2, .event3 {
background:rgba(0, 0, 0, .30);
float:left;
position:relative;
overflow:hidden;
width:100px;
height:100px;
margin:2px;
box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
}
.w1{
background:rgba(0, 0, 0, .30);
float:left;
width:100px;
height:100px;
position:absolute;
overflow:hidden;
margin: 2px;
box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
opacity: 1;
}
javascript:
var isHome = true;
$(function () {
$("#navi a").click(function() {
c = $(this).text().toLowerCase();
isHome = c=="home";
if (isHome){
$("*").animate({
opacity: 1.0
}, 500 );
} else {
$('.boxes').not('.' + c).animate({
opacity: 0.0
}, 500 );
$('.' + c).animate({
opacity: 1.0
}, 500 )
}
});
});
function hoverIn(element){
if(!isHome && $(this).css("opacity")==1){
$(".w1").each(function(i){
var oldDiv= $(this).data("oldDiv");
$(oldDiv).css({opacity:1});
$(this).remove();
});
var posX = $(this).position().left+2;
var posY = $(this).position().top+2;
var newDiv = $("<div>").html($(this).html());
$(newDiv).mouseleave(hoverOut);
$(newDiv).addClass("w1");
$("body").append(newDiv);
$(this).css({opacity: 0});
$(newDiv).offset({top:posY, left: posX});
$(newDiv).data("oldDiv",this);
$(newDiv).animate({height:"200px",width:"200px"},500);
}
}
function hoverOut(element){
var oldDiv= $(this).data("oldDiv");
$(oldDiv).css({opacity:1});
$(this).remove();
}
$(".boxes").mouseenter(hoverIn);
Maybe this is what you are looking for:
.w1:hover{
<!--Removed the position absolute-->
background:rgba(0, 0, 0, .30);
float:left;
width:200px;
height:200px;
overflow:hidden;
box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
margin-bottom: -100px;
}
.w1:hover +div{
margin-left: -100px;
}