Hey guys I'm trying to make a DIV resize to always fit 90% of my page. I have a footer (.kontakt) that I'd like to always have positioned at the bottom of the screen, so I need my DIV to scale (if it's too big the footer won't move when I scroll). I am loading external html files onto my div using jquery, and the div always resizes to fit content. Problem is, I don't want to set max-height, min-height in css but would like for the div to resize every time the browser window resized.
Is there an easy solution to do that that I failed to find, and can I write a function that does that?
What event handler can I use that triggers on browser window resize?
I guess I could just use position:fixed on the footer(haven't actually tried if it works) but I'd prefer to have scrollbars on my div (hence overflow:auto;) than scrolling in the browser window. Thanks for the help
$(document).ready(function() {
$('.content').load('pages/test.html');
console.log("content loaded");
$(".kontakt").hover(
function() {
$(".kontakt").width("20%");
$(".kontakt").css("margin-left", "40%");
$(".kontakt").append("<a class='kontakttext'>mobitel: 031-535-919</a>");
$(".kontakt").append("<br><a class='kontakttext'>stacionarni tel.: 01-3664-515</a><br>");
$(".kontakt").append("<br><a class='kontakttext'>email: </a><a class='kontaktmail' href='mailto:sustersic_miha#hotmail.com'>sustersic_miha#hotmail.com</a><br>");
$(".kontakt").append("<br><a class='kontakttext'>Visoko 19<br>1292 Ig<br>Slovenija</a>");
},
function() {
$(".kontakt").empty();
$(".kontakt").width("10%");
$(".kontakt").css("margin-left", "45%");
$(".kontakt").append("<div class='kontaktlabelbox'><div class='kontaktlabel'>Kontakt</div></div>");
});
$(".menubutton").hover(
function() {
$(this).css("color", "#cccccc");
$(this).prev().css("color", "#cccccc");
$(this).next().css("color", "#cccccc");
},
function() {
$(this).css("color", "#ffffff");
$(this).prev().css("color", "#ffffff");
$(this).next().css("color", "#ffffff");
});
});
body {
margin: 0;
font-family: verdana;
background-image: url("images/background_test.jpg");
background-size: cover;
}
.topmenu {
width: 90%;
margin: auto;
background-color: #000066;
border-radius: 0px 0px 10px 10px;
text-align: center;
opacity: 0.7;
}
.menubutton {
margin-top: 5px;
margin-bottom: 5px;
display: inline-block;
background-color: #000066;
color: #ffffff;
font-weight: bolder;
padding: 2px;
}
.activatedmenubutton {
background-color: #cccccc;
}
.menubreak {
background-color: #000066;
display: inline-block;
color: #ffffff;
padding: 2px;
}
.kontaktlabel {
font-weight: bolder;
}
.kontaktlabelbox {
background-color: #000066;
color: #ffffff;
margin-top: 6px;
margin-bottom: 5px;
}
.kontakttext {
font-size: 0.7em;
background-color: #000066;
color: #ffffff;
}
.kontaktmail {
font-size: 0.7em;
text-decoration: none;
color: #999999;
}
.content {
margin: auto;
width: 80%;
min-height: 200px;
overflow: auto;
border: 1px solid black;
}
.kontakt {
position: absolute;
bottom: 0;
width: 10%;
margin-left: 45%;
background-color: #000066;
color: #cccccc;
border-radius: 10px 10px 0px 0px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Iščem delo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="unicornsandrainbows.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="magic.js"></script>
</head>
<body>
<div class="topmenu">
<a class="menubreak" id="1">|</a
><a class="menubutton" id="iz">Izobrazba</a
><a class="menubreak" id="2">|</a
><a class="menubutton" id="zn">Znanja in Kompetence</a
><a class="menubreak" id="3">|</a
><a class="menubutton" id="izk">Izkušnje</a
><a class="menubreak" id="4">|</a
><a class="menubutton" id="pč">Prosti Čas</a
><a class="menubreak" id="5">|</a
><a class="menubutton" id="fo">Fotografije</a
><a class="menubreak" id="6">|</a>
</div>
<div class="content">
</div>
<div class="kontakt">
<div class="kontaktlabelbox">
<div class="kontaktlabel">Kontakt</div>
</div>
</div>
</body>
</html>
This makes .contact always have height equal to 90% of window height:
$(document).ready(function() {
$('.content').load('pages/test.html');
console.log("content loaded");
$(".kontakt").hover(
function() {
$(".kontakt").width("20%");
$(".kontakt").css("margin-left", "40%");
$(".kontakt").append("<a class='kontakttext'>mobitel: 031-535-919</a>");
$(".kontakt").append("<br><a class='kontakttext'>stacionarni tel.: 01-3664-515</a><br>");
$(".kontakt").append("<br><a class='kontakttext'>email: </a><a class='kontaktmail' href='mailto:sustersic_miha#hotmail.com'>sustersic_miha#hotmail.com</a><br>");
$(".kontakt").append("<br><a class='kontakttext'>Visoko 19<br>1292 Ig<br>Slovenija</a>");
},
function() {
$(".kontakt").empty();
$(".kontakt").width("10%");
$(".kontakt").css("margin-left", "45%");
$(".kontakt").append("<div class='kontaktlabelbox'><div class='kontaktlabel'>Kontakt</div></div>");
});
$(".menubutton").hover(
function() {
$(this).css("color", "#cccccc");
$(this).prev().css("color", "#cccccc");
$(this).next().css("color", "#cccccc");
},
function() {
$(this).css("color", "#ffffff");
$(this).prev().css("color", "#ffffff");
$(this).next().css("color", "#ffffff");
});
});
$(window).load(function() { $(window).trigger('resize') });
$(window).resize(function() {
h = $(window).height() * 0.9;
$('.content').css({'height': h + 'px'});
});
body {
margin: 0;
font-family: verdana;
background-image: url("images/background_test.jpg");
background-size: cover;
}
.topmenu {
width: 90%;
margin: auto;
background-color: #000066;
border-radius: 0px 0px 10px 10px;
text-align: center;
opacity: 0.7;
}
.menubutton {
margin-top: 5px;
margin-bottom: 5px;
display: inline-block;
background-color: #000066;
color: #ffffff;
font-weight: bolder;
padding: 2px;
}
.activatedmenubutton {
background-color: #cccccc;
}
.menubreak {
background-color: #000066;
display: inline-block;
color: #ffffff;
padding: 2px;
}
.kontaktlabel {
font-weight: bolder;
}
.kontaktlabelbox {
background-color: #000066;
color: #ffffff;
margin-top: 6px;
margin-bottom: 5px;
}
.kontakttext {
font-size: 0.7em;
background-color: #000066;
color: #ffffff;
}
.kontaktmail {
font-size: 0.7em;
text-decoration: none;
color: #999999;
}
.content {
margin: auto;
width: 80%;
min-height: 200px;
overflow: auto;
border: 1px solid black;
}
.kontakt {
position: absolute;
bottom: 0;
width: 10%;
margin-left: 45%;
background-color: #000066;
color: #cccccc;
border-radius: 10px 10px 0px 0px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Iščem delo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="unicornsandrainbows.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="magic.js"></script>
</head>
<body>
<div class="topmenu">
<a class="menubreak" id="1">|</a
><a class="menubutton" id="iz">Izobrazba</a
><a class="menubreak" id="2">|</a
><a class="menubutton" id="zn">Znanja in Kompetence</a
><a class="menubreak" id="3">|</a
><a class="menubutton" id="izk">Izkušnje</a
><a class="menubreak" id="4">|</a
><a class="menubutton" id="pč">Prosti Čas</a
><a class="menubreak" id="5">|</a
><a class="menubutton" id="fo">Fotografije</a
><a class="menubreak" id="6">|</a>
</div>
<div class="content">
</div>
<div class="kontakt">
<div class="kontaktlabelbox">
<div class="kontaktlabel">Kontakt</div>
</div>
</div>
</body>
</html>
#John Kapantzakis have already provided a solution but i will try to give you a non js solution here! ~ let me know if you want to understand the trick. P.S this solution do-sent keep layout exactly at 90% but enough that footer have its own negative area. Go on play with it and let me know if it is what you wanted.
body {
margin: 0;
font-family: verdana;
background-image: url("images/background_test.jpg");
background-size: cover;
}
.topmenu {
width: 90%;
margin: auto;
background-color: #000066;
border-radius: 0px 0px 10px 10px;
text-align: center;
opacity: 0.7;
}
.menubutton {
margin-top: 5px;
margin-bottom: 5px;
display: inline-block;
background-color: #000066;
color: #ffffff;
font-weight: bolder;
padding: 2px;
}
.activatedmenubutton {
background-color: #cccccc;
}
.menubreak {
background-color: #000066;
display: inline-block;
color: #ffffff;
padding: 2px;
}
.kontaktlabel {
font-weight: bolder;
}
.kontaktlabelbox {
background-color: #000066;
color: #ffffff;
margin-top: 6px;
margin-bottom: 5px;
}
.kontakttext {
font-size: 0.7em;
background-color: #000066;
color: #ffffff;
}
.kontaktmail {
font-size: 0.7em;
text-decoration: none;
color: #999999;
}
.content {
margin: auto;
width: 80%;
min-height: 200px;
height: 100%;
overflow: auto;
border: 1px solid black;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.kontakt {
background-color: #000066;
border-radius: 10px 10px 0 0;
bottom: 0;
color: #cccccc;
display: inline-block;
margin: 10px auto 0;
padding: 0 7px;
position: static;
text-align: center;
}
body, html{ height: 100%; }
.t-layout{ display: table; width: 100% }
.t-layout--full{ height: 100%; }
.t-row{ display: table-row; }
.t-col{ display: table-cell; }
.t-col--top{ vertical-align: top; }
.t-col--mid{ vertical-align: middle; }
.t-col--bot{ vertical-align: bottom; }
.t-col--compress{ height: 1px; }
.t-a-c{ text-align: center; }
.content-wrap{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow-y: auto;}
.relative{ position: relative; }
<!DOCTYPE html>
<html>
<head>
<title>Iščem delo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="unicornsandrainbows.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="magic.js"></script>
</head>
<body>
<div class="t-layout t-layout--full">
<div class="t-row">
<div class="t-col t-col--compress">
<div class="topmenu">
<a class="menubreak" id="1">|</a
><a class="menubutton" id="iz">Izobrazba</a
><a class="menubreak" id="2">|</a
><a class="menubutton" id="zn">Znanja in Kompetence</a
><a class="menubreak" id="3">|</a
><a class="menubutton" id="izk">Izkušnje</a
><a class="menubreak" id="4">|</a
><a class="menubutton" id="pč">Prosti Čas</a
><a class="menubreak" id="5">|</a
><a class="menubutton" id="fo">Fotografije</a
><a class="menubreak" id="6">|</a>
</div>
</div><!--.t-col -->
</div><!--.t-row -->
<div class="t-row">
<div class="t-col t-col--top relative">
<div class="content-wrap">
<div class="content">
</div>
</div>
</div><!--.t-col -->
</div><!--.t-row -->
<div class="t-row">
<div class="t-col t-a-c t-col--bot t-col--compress">
<div class="kontakt">
<div class="kontaktlabelbox">
<div class="kontaktlabel">Kontakt</div>
</div>
</div>
</div><!--.t-col -->
</div><!--.t-row -->
</div><!--.t-layout -->
</body>
</html>
Related
I'm try to reach a mousemove triggered by a div, I'm thinking the problem it's on this line of code: [_ $('.mousePointer').css({left:e.pageX, top:e.pageY})_]
because the position of the mouse move it's triggered by the size of the entire page, right?
How can I activate the mousemove on different div and change the img in the pointer on different div?
I hope i can explain the problem. I want to use the mouse move as title of each post
body{
margin: 0;
padding: 0;
font-family: "Open Sans", sans-serif;
background-color: #800f62;
}
.headerz{
background-color: grey;
max-height: 120px;
}
.headerz img{
width: 80px;
margin: 10px;
}
.wrapper{
margin-bottom: 100px;
}
.content{
background-color: purple;
min-height: 200px;
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.Post_container{
color: white;
margin: 5%;
background-color: #620c75;
min-width: 80%;
min-height: 400px;
border-radius: 10px 10px 10px 10px;
align-items: center;
justify-content: center;
display: flex;
position: relative;
}
/*try follower mouse*/
.mousePointer{
width: 50px;
height: 30px;
position: absolute;
top: 50%;
left: 50%;
z-index: 9999;
}
/*Fine Mouse Follow*/
footer{
background: #121212;
padding: 5px 0;
position: fixed;
left: 0;
bottom: 0;
text-align: center;
width: 100%;
height: 65px;
box-shadow: 0px 0px 08px black;
}
.footer-container{
max-width: 100%;
margin: auto;
padding: 0 20px;
background: black;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap-reverse;
}
.social-media{
margin: 20px 0;
}
.social-media a{
color: white;
margin: 20px;
font-size: 33px;
text-decoration: none;
transition: .3s linear;
}
.social-media a:hover{
color: purple;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"> </script>
<link rel="stylesheet" href="DigiArch_may20200.css">
<link rel="stylesheet" href="try.js">
<title>Digital Archive Update May 2020</title>
</head>
<body>
<div class="headerz">
<img src="1E_Alpha.png" alt="">
</div>
<div class="wrapper">
<div class="content">
<div class="mousePointer" ><img src="https://i.ibb.co/sQXKSH1/1e-Alpha.png" alt="1e-Alpha" border="0" style="width:100px"></div>
<script type="text/javascript">
$(document).mousemove(function(e){
$('.mousePointer').css({left:e.pageX, top:e.pageY})
})
</script>
<div class="Post_container" style="background-image: url(https://lh3.googleusercontent.com/HA4mqBRa6t03RGDnEYUL3kuqWxsc1yNMJEgo9EetoKEabEqFASgcIPM89Ec8xSG6HosGD4xi03-C1zEnv54gH2VnV_fnr3k6V_LXrUlSImKsW-jWQrTbhBkXtdLTh8Sg70UEiLvGzA=s200-p-k); ">
Post
</div>
</div>
<div class="content" >
<div class="Post_container" style="background-image: url(https://lh3.googleusercontent.com/HA4mqBRa6t03RGDnEYUL3kuqWxsc1yNMJEgo9EetoKEabEqFASgcIPM89Ec8xSG6HosGD4xi03-C1zEnv54gH2VnV_fnr3k6V_LXrUlSImKsW-jWQrTbhBkXtdLTh8Sg70UEiLvGzA=s200-p-k); ">
Post1
</div>
</div>
<footer>
<div class="footer-container">
<div class="social-media">
<i class="fab fa-instagram"></i>
<i class="fab fa-soundcloud"></i>
<i class="fab fa-behance"></i>
<i class="fab fa-twitch"></i>
<i class="fab fa-paypal"></i>
</div>
</div>
</footer>
</body>
</html>
The problem is with the document. It's targeting the whole page whereas what you need is to focus it on .Post_container since its the container of your image. That's pretty much it.
$(".Post_container").mousemove(function(e){ //======> replaced document with container class
$('.mousePointer').css({left:e.pageX, top:e.pageY})
})
Hope it helps :)
I have been trying to get this simple menu example going but I have two problems.
The buttons wiggle when hovered.
The image/text inside of the hover box is not centered.
Any help that you would be willing to provide is really appreciated. I am really trying to learn what I am doing wrong, so any explanation you can provide would be very awesome.
<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<html>
<head>
<title>Cool Button Menu Example</title>
</head>
<style>
#coolButtonTopMenu .divButtons {
float: left;
padding: 3px;
margin: 2px;
border: 3px solid white;
height: 65px;
}
#coolButtonTtopMenu .divButtons img {
margin-top: -15px;
}
#coolButtonTopMenu .btnSmall {
padding: 3px;
float: left;
margin: auto;
margin: 2px;
}
#coolButtonTopMenu .btnSmallText {
font-family: "verdana" sans-serif serif;
font-size: x-small;
padding: 3px;
width: 45px;
text-align: center;
}
#coolButtonTopMenu .divButtons:hover {
/*border: 3px dotted #F59595;*/
padding: 3px;
margin: 2px;
/*background-color: #F59595;*/
height: 65px;
}
#coolButtonTopMenu .divButtons a {
text-decoration: none;
color: black;
display: block;
}
#coolButtonTopMenu .divButtons a:active {
border-top: 0px solid orange;
text-decoration: none;
}
#coolButtonTopMenu .mnuWorkQueueMain {
float: left;
}
#coolButtonTopMenu .mnuWorkQueueMain:hover {
border: 3px dotted #F59595;
}
</style>
<script>
// Functions to do work
function doSomething() {
alert('Button was clicked .....');
}
</script>
<!-- Menu Test -->
<div id='coolButtonTopMenu'>
<!-- Menu Item 1 -->
<div class="mnuWorkQueueMain">
<div id="mnuBtnSave" class="divButtons">
<a href="#" alt="Add" onclick='doSomething()'>
<img src="images/AddIcon.png" class="btnSmall" />
<p class="btnSmallText">New Request</p>
</a>
</div>
</div>
<!-- Menu Item 2 -->
<div class="mnuWorkQueueMain">
<div id="mnuBtnSave" class="divButtons">
<a href="#" alt="Add" onclick='doSomething()'>
<img src="images/AddIcon.png" class="btnSmall" />
<p class="btnSmallText">New Thing</p>
</a>
</div>
</div>
<!-- Menu Item 3 -->
<div class="mnuWorkQueueMain" ">
<div id="mnuBtnSave " class="divButtons ">
<a href="# " alt="Add " onclick='doSomething()'>
<img src="images/AddIcon.png " class="btnSmall " /><p class="btnSmallText ">Request More</p></a>
</div>
</div>
</div>
</html>
The problem that you are facing when hovering over the buttons is that a border takes up space and that border is applied when you hover, creating the "wiggle". To resolve this, you may consider moving away from a border and instead use an outline, which does not increase the size.
As far as centering the content goes, you need to be applying text-align: center; to the parent element for which you would like the child elements centered. In your case, you would apply this rule to #coolButtonTopMenu .divButtons.
// Functions to do work
function doSomething() {
alert('Button was clicked .....');
}
#coolButtonTopMenu .divButtons {
float: left;
padding: 3px;
margin: 2px;
border: 3px solid white;
height: 65px;
text-align: center;
}
#coolButtonTtopMenu .divButtons img {
/*margin-top: -15px;*/
}
#coolButtonTopMenu .btnSmall {
padding: 3px;
/*float: left;*/
margin: auto;
/*margin: 2px;*/
}
#coolButtonTopMenu .btnSmallText {
font-family: "verdana" sans-serif serif;
font-size: x-small;
/*padding: 3px;*/
width: 45px;
text-align: center;
}
#coolButtonTopMenu .divButtons:hover {
/*border: 3px dotted #F59595;*/
padding: 3px;
margin: 2px;
/*background-color: #F59595;*/
height: 65px;
}
#coolButtonTopMenu .divButtons a {
text-decoration: none;
color: black;
display: block;
}
#coolButtonTopMenu .divButtons a:active {
border-top: 0px solid orange;
text-decoration: none;
}
#coolButtonTopMenu .mnuWorkQueueMain {
float: left;
margin: 3px;
}
#coolButtonTopMenu .mnuWorkQueueMain:hover {
outline: 3px dotted #F59595;
}
<!-- Menu Test -->
<div id='coolButtonTopMenu'>
<!-- Menu Item 1 -->
<div class="mnuWorkQueueMain">
<div id="mnuBtnSave" class="divButtons" onclick='doSomething()'>
<img src="images/AddIcon.png" class="btnSmall" />
<p class="btnSmallText">New Request</p>
</div>
</div>
<!-- Menu Item 2 -->
<div class="mnuWorkQueueMain">
<div id="mnuBtnSave" class="divButtons">
<a href="#" alt="Add" onclick='doSomething()'>
<img src="images/AddIcon.png" class="btnSmall" />
</a>
<p class="btnSmallText">New Thing</p>
</div>
</div>
<!-- Menu Item 3 -->
<div class="mnuWorkQueueMain" ">
<div id="mnuBtnSave " class="divButtons ">
<a href="# " alt="Add " onclick='doSomething()'>
<img src="images/AddIcon.png " class="btnSmall " /><p class="btnSmallText ">Request More</p></a>
</div>
</div>
</div>
I didn't find anything on Google about this without using Bootstrap and in my project I didn't want to. (because I'm a beginner and I decided to start with a vanilla project - only css html and js and mostly because when I started building this I didn't even know what bootstrap was).
So how I can make the white (id: top-mare + logo) navbar fixed and shrinking while scrolling?
HTML
<!DOCTYPE html>
<html lang="en-us" class="no-js">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Best DAVNIC73</title>
<link href="css/css.css" rel="stylesheet" />
<link href="css/sshow.css" rel="stylesheet" />
<link href="css/mqueries.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div id="container">
<div class="shadow">
<header id="top">
<nav id="top-mic">
<ul>
<li>Contact</li>
<li>Despre noi</li>
<li>Locatie</li>
</ul>
</nav>
<img src="img/logo.jpg" alt="davnic" id="logo"></img>
<div id="top-mare-wrap">
<nav id="top-mare">
<ul>
<li>Acasa</li>
<li>Buton1</li>
<li>Buton2</li>
<li>Buton3</li>
<li>Buton4</li>
</ul>
</nav>
</div>
</header>
</div>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img/img1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img/img2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img/img3.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<script src="js/sshow.js"></script>
<button onclick="topFunction()" id="myBtn" title="Inapoi la inceputul paginii"><img src="img/arrow-up-01-128.jpg"/></button>
<script src="js/myBtn.js"></script>
<footer class="footer">
<ul>
<li id="nume">SC Best DAVNIC73 SRL</li>
<li><img src="img/location_1.png" class="location"/> Judet Dambovita, Oras Targoviste, Strada, Nr</li>
<li><img src="img/phone.jpg" class="phone"/>074 44 44 444</li>
<li><img src="img/mail.jpg" id="mail"/>bestdavnic73#gmail.com</li>
<li class="copyright">Copyright Ⓒ 2017</li>
</ul>
</footer>
</div>
</div>
</body>
</html>
CSS
html {
box-sizing: border-box;
height: 100%;
font-family: Roboto, Arial;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: Roboto, Arial;
height: auto;
width: 100%;
padding: 0;
padding-bottom: 6vw;
margin: 0;
font-size: 1.1vw;
min-height: 100%;
position: relative;
}
header {
color: #ffffff;
padding: 0;
margin: 0;
border-bottom: 1px solid #ADADAD;
}
#container {
margin: 0 auto;
padding: 0;
color: #ffffff;
}
#top-mic {
background-color: #F28A00;
margin: 0;
padding: 0;
margin-bottom: 0.73vw;
}
#top-mic ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#top-mic li {
float: right;
padding: 0.416vw 1.5625vw;
}
#top-mic li a {
display: block;
text-decoration: none;
color: #ffffff;
text-align: center;
font-size: 0.6vw;
font-weight: bold;
transition: color 0.25s ease;
margin-right: 2.8645vw;
}
#top-mic li a:hover {
color: #ADADAD;
}
#logo {
max-width: 100%;
float: left;
margin-left: 12.5vw;
margin-right: 6.77vw;
width:15vw;
height: auto !important;
}
#top-mare-wrap {
margin: 0 auto;
}
#top-mare {
padding: 0;
margin: 0;
margin-bottom: 3.125vw;
}
#top-mare ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#top-mare li {
display: inline;
}
#top-mare li a {
margin-top: 2.1875vw;
margin-left: 2.083vw;
padding-right: 1.041vw;
display: inline-block;
text-decoration: none;
color: #ADADAD;
text-align: center;
font-size: 2.1vw;
font-weight: bold;
transition: color 0.25s ease;
}
#top-mare li a:hover {
color: #F28A00;
}
#test {
color:black;
}
.footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
background-color: #F28A00;
}
.footer ul {
list-style-type: none;
margin: 0;
padding: 1.041vw;
}
.footer li {
font-size: 0.9vw;
font-weight:bold;
display: inline;
margin-left: 2.604vw;
padding-right: 0.78125vw;
padding-bottom: 0.263vw;
}
.copyright {
float:right;
}
#nume {
font-weight: italic;
}
#myBtn {
display: none;
position: fixed;
bottom: 3.646vw;
left: 3.125vw;
z-index: 99;
border: none;
outline: none;
background-color: #F28A00;
color: white;
cursor: pointer;
padding: 0.78125vw;
border-radius: 10px;
width: 3.33333vw;
height: 3.3333vw;
}
.location {
width: 0.677vw;
height: 0.677vw;
}
.phone {
width: 0.677vw;
height: 0.677vw;
}
#mail {
height: 0.677vw;
width: 0.9375vw;
}
To create shrinking animation I would suggest you to use CSS transition and jQuery addClass.
So, you're going to measure the scroll position from top. When at height wanted, add CSS class holding shrink values to that element.
For example your logo has class 'logo':
<img src="image/logo.jpg" class="logo"/>
Logo CSS:
.logo {
width: 200px;
transition: all .5s ease-in-out;
}
The class you're going to add/remove is called eg. 'shrink'. It holds shrink values (eg you want the shrinking logo to be 125px wide):
.logo.shrink {
width: 125px;
}
Next add shrink class to logo when needed (70px from top in this example).
$(document).on('scroll', function() {
if ($(this).scrollTop > 70) {
$('.logo').addClass('shrink');
} else if ($(this).scrollTop < 70) {
$('.logo').removeClass('shrink');
}
});
I made you an example: https://jsfiddle.net/cr29y1tc/29/
I have a problem with jQuery scrollTo function, yesterday it was working :|. Anyway I want to create smooth scroll to div when I click on a button in my navigation bar and it doesn't work :S. Tell me why, how can I make it work.
$('.wrap').hide();
$('.wrap').fadeIn(700);
$(document).ready(function(){
$('.button2').on('click',function(){
$('#s2').ScrollTo();
});
});
$(document).ready(function(){
$('.button3').on('click',function(){
$('#s3').ScrollTo();
});
});
$(document).ready(function(){
$('.button4').on('click',function(){
$('#s4');
});
});
.wrap, footer, #contact {
background-color: ;
}
body {
font-family: Dosis;
box-sizing: border-box;
}
.fluid-container {
max-width: 1000px;
margin: 0 auto;
}
ul {
display: block;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #000000;
position: fixed;
width: 100%;
}
li {
display: inline-block;
font-size: 15px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #222;
text-decoration: none;
}
#foto1 {
display: block;
width: 100%;
margin: 50px auto;
}
h1{
font-family: Montserrat;
padding: 20px;
font-size: 40px;
text-align: center;
margin-top: 30px;
}
#foto2 {
border: #FBF8BB;
display: block;
max-width: 100%;
margin: 0 auto;
}
#foto3 {
display: block;
margin: 0 auto;
max-width: 100%;
}
.icons {
padding: 30px;
display: block;
}
.portfolio{
text-align: center;
}
#contact {
overflow: hidden;
}
.foto4 {
border-radius:100%;
padding : 20px;
max-width: 100%;
display: block;
margin: auto;
}
footer {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<div class = "wrap">
<center><ul>
<li>Start</li>
<li>O mnie</li>
<li>Portfolio</li>
<li>Kontakt</li>
</ul></center>
<div id="s1" class="fluid-container">
<br>
<img id="foto1" src="https://s6.postimg.org/8vcsstfld/image.png" />
<div style="text-align:center" class="icons">
<a href="https://www.facebook.com/bartek.cechmann" target="_blank">
<img class="icon1" src="https://s6.postimg.org/ap89zgjw1/rsz_1496700658_facebook.png">
</a>
<a href="https://www.linkedin.com/in/bartosz-cechmann-941921124/" target="_blank">
<img class="icon2" src="https://s6.postimg.org/nuns5kdrl/rsz_1496700662_linkedin.png">
</a>
<a href="https://github.com/cechu11" target="_blank">
<img class="icon3" src="http://s6.postimg.org/b0zdn2w1d/1496775488_github_square_social_media.png">
</a>
</div></div>
<div id="s2">
<br>
<br>
<div class="aboutme">
<img id ="foto2" src="https://s6.postimg.org/ch9fdz775/image.png" />
</div></div>
<div id="s3" class="portfolio">
<br>
<h1><u>Portfolio</u></h1>
<img id="foto3"src="https://s6.postimg.org/b15eahcq9/Placeholder.png">
</div></div></section>
<div id="s4">
<footer>
<img class="foto4"src="https://s6.postimg.org/gz6o8ygxd/image.png">
</footer></>
Here is a working fiddle with much shorter code:
EDIT: You can change the scroll speed by changing the animate duration from 2000ms to whatever you like.
$('.wrap').hide();
$('.wrap').fadeIn(700);
$(function(){
$('li').on('click',function(e){
e.preventDefault();
$('html, body').animate({
scrollTop: $($(e.target).attr("href")).offset().top
}, 2000);
});
});
.wrap, footer, #contact {
background-color: ;
}
body {
font-family: Dosis;
box-sizing: border-box;
}
.fluid-container {
max-width: 1000px;
margin: 0 auto;
}
ul {
display: block;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #000000;
position: fixed;
width: 100%;
}
li {
display: inline-block;
font-size: 15px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #222;
text-decoration: none;
}
#foto1 {
display: block;
width: 100%;
margin: 50px auto;
}
h1{
font-family: Montserrat;
padding: 20px;
font-size: 40px;
text-align: center;
margin-top: 30px;
}
#foto2 {
border: #FBF8BB;
display: block;
max-width: 100%;
margin: 0 auto;
}
#foto3 {
display: block;
margin: 0 auto;
max-width: 100%;
}
.icons {
padding: 30px;
display: block;
}
.portfolio{
text-align: center;
}
#contact {
overflow: hidden;
}
.foto4 {
border-radius:100%;
padding : 20px;
max-width: 100%;
display: block;
margin: auto;
}
footer {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<div class = "wrap">
<center><ul>
<li>Start</li>
<li>O mnie</li>
<li>Portfolio</li>
<li>Kontakt</li>
</ul></center>
<div id="s1" class="fluid-container">
<br>
<img id="foto1" src="https://s6.postimg.org/8vcsstfld/image.png" />
<div style="text-align:center" class="icons">
<a href="https://www.facebook.com/bartek.cechmann" target="_blank">
<img class="icon1" src="https://s6.postimg.org/ap89zgjw1/rsz_1496700658_facebook.png">
</a>
<a href="https://www.linkedin.com/in/bartosz-cechmann-941921124/" target="_blank">
<img class="icon2" src="https://s6.postimg.org/nuns5kdrl/rsz_1496700662_linkedin.png">
</a>
<a href="https://github.com/cechu11" target="_blank">
<img class="icon3" src="http://s6.postimg.org/b0zdn2w1d/1496775488_github_square_social_media.png">
</a>
</div></div>
<div id="s2">
<br>
<br>
<div class="aboutme">
<img id ="foto2" src="https://s6.postimg.org/ch9fdz775/image.png" />
</div></div>
<div id="s3" class="portfolio">
<br>
<h1><u>Portfolio</u></h1>
<img id="foto3"src="https://s6.postimg.org/b15eahcq9/Placeholder.png">
</div></div></section>
<div id="s4">
<footer>
<img class="foto4"src="https://s6.postimg.org/gz6o8ygxd/image.png">
</footer></>
You can use animate here to move about the page how you want to. Here's a quick reference. Click the second button to see it in action. From here can update your code to use the code posted here. Also, as # Himanshu Upadhyay pointed out you can put all that code into 1 $(document).ready(function(){}).
E.g.
$('.button2').on('click',function() {
$('html, body').animate({
scrollTop: $("#s2").offset().top
}, 2000);
});
Jsfiddle: https://jsfiddle.net/Lzwt2s2a/3/
I am trying to get the thumbnails on my page to change the image above them when you hover over it with the mouse.
I'm very new to javascript, and can't seem to get my head around what to do here.
I have already used fancybox so that when you click on the larger image it opens a gallery.
I have included the html and css below. If anyone could help me with the javascript I would really appreciate it.
<html lang="en">
<head>
<link rel="shortcut icon" href="favicon.ico">
<meta name="description" content="Collectables and memorabilia from the TV show LOST. Screen used props, action figures, trading cards, costumes and much much more">
<meta name="keywords" content="autographs, props, trading cards, Mcfarlane, Bif Bang Pow, ABC, LOST, RITTENHOUSE, Inkworks, Damon Lindelof, Carlton Cuse, Oceanic 815, Ajira 316, 4815162342
authentic, screen used, dharma initiative, kahana, hawaii, beach, jungle,the others, french science expedition, Jack, Charlie, Kate, Hurley, Jacob, MIB">
<meta charset="UTF-8"></script>
<div class= <title>LOST Collector</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</head>
<body>
<div class="pagecontent">
<header>
<a href="http://www.lostcollector.com">
<img src="images/logo.png" alt="Lost Collector" title="Lost Collector"/>
</a>
<nav>
<ul>
<li>Home</li>
<li>About LOST Collector</li>
<li>Contact</li>
</ul>
</nav>
</header>
<ul id="navigation_layout">
<li>Artwork</li>
<li>Autographs </li>
<li>Badges and Pins</li>
<li>Books/Magazines</li>
<li>Clothing</li>
<li>Dvds and Cds</li>
<li>Film Crew</li>
<li>Original Props</li>
<li>Special Events</li>
<li>Toys and games</li>
<li>Trading cards</li>
<li>Everything else</li>
<div class="noline">
<li>Wish list</li>
</div>
</ul>
<div class="itemdetails">
<div class="itemtext">
<h1>Inkworks: Season One</h1>
<h2>AR-1 unused Redemption Card</h2>
<h3>For Maggie Grace autograph card A-3</h3>
<p>Inkworks included redemption cards for the first 3 autograph cards in the packs because they didn't receive the signed cards back in time to include them in the boxes. So the redemption cards were issued instead. The idea was when you found the card you filled it out and sent it to Inkworks who would then send you back the punched redemption card and the autograph card in question.
</p>
</div>
<div class="itemdetails_aside">
<a class="fancybox" rel="group" href="images/tradingcards/season1inkworks/AR1big.jpg"><img src="images/tradingcards/season1inkworks/AR1.jpg" alt="AR-1 Redemption Card" title="click to enlarge" height="430" width="308"/>
</div>
<div class="thumbnails">
<img src="images/tradingcards/season1inkworks/thumbnails/ar1.jpg" alt="ar1" title="Click thumbnail to enlarge" width="107" height="150" /></a>
<img src="images/tradingcards/season1inkworks/thumbnails/ar1mgb.jpg" alt="mgrdmp" title="Click thumbnail to enlarge" width="107" height="150" /></a>
</div>
</div>
</body>
body {
background-color: #5D6D7E;
display: inline;
}
/*Styles body background colour, text colour and font syle and size*/
div.pagecontent {
margin: 10px;
border: 1px solid #000000;
border-radius: 20px;
width: 1300px;
height: auto;
margin: 0 auto;
background-color: #ffffff;
color: #000000;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 90%;
}
/*Styles the header*/
header {
width: 1300px;
height: 200px;
background: #ffffff;
position: static;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
margin-top: 0;
}
/*finds all img tags as links inside header*/
header a img {
padding-bottom: 10px;
margin: 25px 10px 10px 20px;
display: inline;
height: 150px;
width: 150px;
}
nav {
display: inline;
float: right;
}
nav ul li {
display: inline-block;
text-decoration: none;
font-size: 100%;
font-weight: bold;
color: #000000;
padding: 40px 10px 30px;
margin-top: 25px;
margin-right: 25px;
}
nav li a {
display: inline-block;
padding: 60px 10px 30px 10px;
text-decoration: none;
font-size: 90%;
font-weight: bold;
color: #000000;
}
nav li a:hover {
color: #ffffff;
background-color: #000000;
}
/*selects the navigation_layout id, styles the whole nav layout*/
#navigation_layout {
position: absolute;
width: 1300px;
top: 188px;
float: left;
list-style: none;
background-color: #ffffff;
border-top: #ffffff;
padding: 0;
}
/*makes the nav list items display from the left*/
#navigation_layout li {
float: left;
background-color: #000000;
margin: 1px;
padding-right: 2.65px;
list-style: none;
}
/*styles the list a tags*/
#navigation_layout li a {
display: block;
padding: 4px 9px 4px 8px;
text-decoration: none;
font-size: 90%;
font-weight: bold;
color: #ffffff;
}
/*styles link colour when mouse hovers over it only**/
#navigation_layout li a:hover {
color: #ff0000;
background-color: #ffffff;
}
div.pic img{ padding:2px;
border: 1px solid #000000;
}
div.itemdetails {
display: inline-block;
position: relative;
width:1250px;
height: auto;
margin: 25px;
border: 1px solid #000000;
background-color: #d3d3d3;
}
/**div.itemtext is all of the text on the page, with separate rules**/
div.itemtext {
float: right;
width: 600px;
height: auto;
text-align: center;
padding: 25px 25px 25px 25px;
}
div.itemtext h1 {
float:right;
width:600px;
text-align: center;
margin-bottom: 0;
font-size: 300%;
}
div.itemtext h2 {
float: right;
width: 600px;
text-align: center;
text-decoration: underline;
font-size: 200%;
}
div.itemtext h3{
font-size: 200%;
}
div.itemtext p{
float: right;
width: 600px;
text-align: center;
font-size: 200%;
margin-top: 0;
}
div.itemdetails_aside {
display: block;
float: left;
padding: 25px 25px 25px 25px;
margin: 25px;
}
div.itemdetails_aside img {
border: 1px solid #000000;
padding: 25px 25px 25px 25px;
background-color: #ffffff
}
div.itemdetails_content {
float: right;
width: 550px;
height: auto;
padding: 25px 25px 25px 25px;
margin:25px;
}
div.thumbnails {
display: inline;
float:left;
padding: 25px 25px 25px;
}
div.thumbnails img{
display: inline-block;
border: 1px solid #000000;
background-color: #ffffff;
padding: 20px 20px 20px 20px;
margin: 10px;
}
div.related_items{
display: inline;
padding: 25px 25px 25px 25px;
margin-right: 100px;
margin-left: 100px;
}
div.box {
margin: auto;
width:1150px;
height: 400px;
}
div.gallery {
width: 1100px;
height: 900px;
margin: auto;
}
div.cardcontent {
display: inline;
float: left;
border: 1px solid #000000;
padding: 10px 10px 10px 10px;
margin: 10px 10px 10px 10px;
background-color: #ffffff;
text-align: center;
font-weight: bold;
width: 200px;
height: 150px;
}
div.cardcontent img{
border: 1px solid #000000;
}
You need to add ID and Classes for img elements like this :
<div class="itemdetails_aside">
<a class="fancybox" rel="group" href="images/tradingcards/season1inkworks/AR1big.jpg">
<img id="imgBigThumb" src="1.jpg" alt="AR-1 Redemption Card" title="click to enlarge" height="430" width="308" />
</div>
<div class="thumbnails">
<img class="imgSmallThumb" src="1.jpg" alt="ar1" title="Click thumbnail to enlarge" width="107" height="150" /></a>
<img class="imgSmallThumb" src="2.jpg" alt="mgrdmp" title="Click thumbnail to enlarge" width="107" height="150" /></a>
</div>
Then javascript code is not very difficult :
var BigThumb = document.getElementById("imgBigThumb"),
SmallThumbs = document.getElementsByClassName("imgSmallThumb");
for(var i=0; i<SmallThumbs.length;i++) {
(function(i){
SmallThumbs[i].addEventListener("mouseover",function(){
BigThumb.setAttribute("src",SmallThumbs[i].getAttribute("src"));
});
}(i));
}
Assuming your images follow this pattern of naming..
ar1.jpg (thumbnail)
ar1big.jpg (full size)
Either add a new attribute to the thumbnail tags, say rn="" (rootname) or make sure the alt="" have the root image name (excluding .jpg) then you can just add the word big to the root to link to the large, full size images when moused over.
jquery
$(function() { // document ready
$('.thumbnails img').mouseover(function() { // when thumb hovered do..
var fullImagePath = 'images/tradingcards/season1inkworks/'; // root path to full size image
var imageRootName = $(this).attr('rn'); // get root image name
var bigImageNameAndPath = fullImagePath + imageRootName + 'big' + '.jpg'; // put it all together
$('.fancybox img').attr('src', bigImageNameAndPath); // replace src="" with path to full image corresponding to thumb hovered
});
});
The above is untested, let me know if you have problems with it.
html
<div class="itemdetails_aside">
<a class="fancybox" rel="group" href="images/tradingcards/season1inkworks/ar1big.jpg">
<img src="images/tradingcards/season1inkworks/AR1.jpg" alt="AR-1 Redemption Card" title="click to enlarge" height="430" width="308"/>
</a>
</div>
<div class="thumbnails">
<img src="images/tradingcards/season1inkworks/thumbnails/ar1.jpg" rn="ar1" alt="ar1" title="Click thumbnail to enlarge" width="107" height="150" />
<img src="images/tradingcards/season1inkworks/thumbnails/ar1mgb.jpg" rn="ar1mgb" alt="mgrdmp" title="Click thumbnail to enlarge" width="107" height="150" />
</div>
CSS Image Sprites may be what you are looking for. See Hover Effect at the bottom of the linked page. No Javascript needed.