I am currently working on a some columns that include images as thumbnails. I can not work out why the columns are not aligning horizontally like I would like them to be.
Here is the piece of html I'm referring to:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Townsville Rentals</title>
<!-- Bootstrap Css -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="Index.css" rel="stylesheet">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="wrapper">
<div class="header">
<img class="logo" src="images/logo.png" alt="logo">
<ul class="nav pull-right">
<li class="nav-text">HOME</li>
<li class="nav-text">ABOUT</li>
<li class="nav-text">PROPERTY OWNERS</li>
<li class="nav-text">TENATS</li>
<li class="nav-text">CONTACT US</li>
<li class="nav-number">1300 702 305</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="top-content">
<img class="arrows" src="images/arrows.png" alt="arrows">
<img class="slider" src="images/slider.png" alt="slider">
</div>
</div>
<div class="wrapper">
<h3 class="thumbnail-title"> OUR GUARANTEE TO YOU </h3>
<div class="row">
<div class=".col-md-2"><img src="images/extra.png" alt="extra"></div>
<div class=".col-md-4"><img src="images/fees.png" alt="fees"></div>
<div class=".col-md-4"><img src="images/four.png" alt="four"></div>
<div class=".col-md-4"><img src="images/realistic.png" alt="real"></div>
<div class=".col-md-4"><img src="images/regular.png" alt="reg"></div>
<div class=".col-md-4"><img src="images/relax.png" alt="relax"></div>
</div>
</div>
<div class="wrapper">
<div class="">
</div>
</div>
</body>
</html>
And here's the associated CSS:
html,body
{
margin-left: auto;
margin-right: auto;
width: 1370px;
}
.wrapper
{
margin-left: auto;
margin-right: auto;
width: 100%;
}
.header
{
margin: auto;
max-width: 1370px;
}
.logo
{
padding-left: 50px;
padding-top: 30px;
}
.nav
{
}
.nav-text
{
display: inline-block;
float: left;
font-family: "GothamSSm Meduim";
font-size: 12px;
font-style: bold;
list-style-type: none;
max-height: 100%;
max-width: 100%;
overflow: hidden;
padding-right: 70px;
top: 45px;
}
.nav-number
{
color: #45aa4a;
display: inline;
float: right;
font-family: "GothamSSm Meduim";
list-style-type: none;
max-height: 100%;
max-width: 100%;
overflow: hidden;
padding-right: 65px;
top: 45px;
}
.arrows
{
padding-left: 575px;
padding-right: 685px;
padding-top: 45px;
}
.slider
{
margin-left: auto;
margin-right: auto;
max-height: 100%;
max-width: 100%;
padding-top: 60px;
}
.thumbnail-title
{
margin-left: auto;
margin-right: auto;
padding-top: 250px;
text-align: center;
}
.thumbnail
{
border: 2px solid red;
display: inline;
}
Actually the whole width of the screen is divided in to 12 sections for all kinds of screen according to bootstrap grid system
So you have to divide according to grig system only
Please dont you .[dot] before class name in the tag like this
<div class=".col-md-2"><img src="images/extra.png" alt="extra"></div>
^
dot should be used in writing styles only!
for yout requirement try like this:
<div class="row">
<div class="col-md-2">
<img src="layouts/08.png" alt="extra"></div>
<div class="col-md-2">
<img src="layouts/11.png" alt="fees"></div>
<div class="col-md-2">
<img src="layouts/11.png" alt="four"></div>
<div class="col-md-2">
<img src="layouts/11.png" alt="real"></div>
<div class="col-md-2">
<img src="layouts/11.png" alt="reg"></div>
<div class="col-md-2">
<img src="layouts/11.png" alt="relax"></div>
</div>
Please refer to [jsfiddle]http://jsfiddle.net/matildayipan/vzg9fhot/3/
You added dot in your class attributes as it is mentioned.
But you also missed the class declaration in your css
<div class="wrapper">
<div class="header">
<img class="logo" src="images/logo.png" alt="logo">
<ul class="nav pull-right">
<li class="nav-text">HOME</li>
<li class="nav-text">ABOUT</li>
<li class="nav-text">PROPERTY OWNERS</li>
<li class="nav-text">TENATS</li>
<li class="nav-text">CONTACT US</li>
<li class="nav-number">1300 702 305</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="top-content">
<img class="arrows" src="images/arrows.png" alt="arrows">
<img class="slider" src="images/slider.png" alt="slider">
</div>
</div>
<div class="wrapper">
<h3 class="thumbnail-title"> OUR GUARANTEE TO YOU </h3>
<div class="row">
<div class="col-md-2"><img src="images/extra.png" alt="extra"></div>
<div class="col-md-4"><img src="images/fees.png" alt="fees"></div>
<div class="col-md-4"><img src="images/four.png" alt="four"></div>
<div class="col-md-4"><img src="images/realistic.png" alt="real"></div>
<div class="col-md-4"><img src="images/regular.png" alt="reg"></div>
<div class="col-md-4"><img src="images/relax.png" alt="relax"></div>
</div>
</div>
<div class="wrapper">
<div class="">
</div>
</div>
Css:
.col-md-2{
//add your css
}
.col-md-4{
//add your css
}
html,body {
margin-right: auto;
margin-left: auto;
width:1370px;
}
.wrapper{
margin-right: auto;
margin-left: auto;
width:100%;
}
/* Start of header*/
.header{
margin:auto;
max-width: 1370px;
}
.logo{
padding-left:50px;
padding-top:30px;
}
.nav-text{
display: inline-block;
list-style-type:none;
top:45px;
float: left;
font-family: "GothamSSm Meduim";
font-size:12px;
font-style:bold;
padding-right: 70px;
max-width:100%;
max-height: 100%;
overflow: hidden;
}
.nav-number{
display: inline;
list-style-type:none;
float:right;
top:45px;
padding-right:65px;
color:#45aa4a;
font-family: "GothamSSm Meduim";
max-width:100%;
max-height: 100%;
overflow:hidden;
}
/* End of header container*/
/* Start of top content*/
.arrows{
padding-right:685px;
padding-left: 575px;
padding-top:45px;
}
.slider{
margin-left: auto;
margin-right: auto;
padding-top:60px;
max-width:100%;
max-height: 100%;
}
/*end */
.thumbnail-title {
padding-top: 250px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.thumbnail{
display:inline;
border: 2px solid red;
}
Related
so basically, I'm trying to make my own portfolio website but one of the things seems not to be working, here's my
https://codepen.io/anon/pen/jobpPd
basically what I want to do there is that I want after clicking "About" to show h1 "ABOUT ME" and disappear "My name"
I wrote some javascript there but it seems not to be working.
HTML
<div id="particles-js">
<main id="main" class="flex-center flex-column">
<h1 id="title">My name</h1>
<ul id="menu" class="list-unstyled list-inline">
<li class="list-inline-item">About</li>
<li class="list-inline-item">GitHub</li>
<li class="list-inline-item">Contact</li>
</ul>
</main>
<section id="about" class="d-none">
<h1>ABOUT ME</h1>
</section>
</div>
CSS
body {
margin: 0;
}
#title {
color: #ffffff;
position: absolute;
text-align: center;
top: 30%;
width: 100%;
font-style: italic;
font-size: 65px;
}
#menu {
color: #ffffff;
position: absolute;
text-align: center;
top: 48%;
font-size: 13px;
width: 98%;
}
#particles-js {
background-color: #0d3677;
height: 100vh;
}
#about {
position: absolute;
width: 100%;
}
section {
max-height: 100vh !important;
overflow: auto;
opacity: 0;
}
JS
function OpenAbout(){$("#main").animate({opacity:0,},160);$("#about").removeClass("d-none").animate({opacity:1,},160);}function OpenMain(){$("#main").animate({opacity:1,},160);$("#about").animate({opacity:0,},160,"swing",function(){$("#about").addClass("d-none");});}
check this i have done this with jquery https://codepen.io/arindamx01/pen/pmjZqJ
$('.openAbout').on('click', function(){
$('#title').after('<h1 id="about" class="commonTitle" style="display:none;">ABOUT ME</h1>')
$('#title').fadeOut();
$('#about').fadeIn();
});
body {
margin: 0;
}
.commonTitle {
color: #ffffff;
position: absolute;
text-align: center;
top: 30%;
width: 100%;
font-style: italic;
font-size: 65px;
}
#menu {
color: #ffffff;
position: absolute;
text-align: center;
top: 48%;
font-size: 13px;
width: 98%;
}
#particles-js {
background-color: #0d3677;
height: 100vh;
}
#about {
position: absolute;
width: 100%;
}
section {
max-height: 100vh !important;
overflow: auto;
opacity: 0;
}
<html>
<head>
<link rel=stylesheet href="https://fonts.googleapis.com/css?family=Fjalla+One|Source+Sans+Pro:300,600">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="particles-js">
<main id="main" class="flex-center flex-column">
<h1 id="title" class="commonTitle">My name</h1>
<ul id="menu" class="list-unstyled list-inline">
<li class="list-inline-item">About</li>
<li class="list-inline-item">GitHub</li>
<li class="list-inline-item">Contact</li>
</ul>
</main>
<section id="about" class="d-none">
<h1>ABOUT ME</h1>
</section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
So i have 4 different divs with buttons in them and I'm trying to set up so whenever one of those buttons are being clicked, it will overlap the other divs on the page.
I know it has something to do with z-index and positioning of the divs but I guess it needs to be added to the Jquery rather than the CSS?
I have checked out a previous code, where the divs overlap eachother vertically. Here's that code:
$('#divleft, #divmid, #divright').toggle(function () {
var cfg = {height:'200', width:'100%'};
$(this).css({'z-index':100});
var pct = $(this).css('left').split('p')[0]/$(document).width();
if(pct <= .33 && pct > 0){
cfg.left = '0';
$(this).data('oldLeft', "33%");
} else if(pct <= .66 && pct > .33) {
cfg.left = '0';
$(this).data('oldLeft', "66%");
}
$(this).animate(cfg)
}, function () {
var cfg= {height:'200', width:'33%', 'z-index':1};
if ($(this).data('oldLeft')) {
console.log($(this).data('oldLeft'));
cfg.left = $(this).data('oldLeft');
}
$(this).animate(cfg)
})
#divleft {
width:33.3%;
height:200px;
background:#ccc;
z-index: 1;
margin-top: 10px;
position: absolute;
left:0;
}
#divmid {
width:33.3%;
height: 200px;
background: #696;
margin-top: 10px;
z-index: 1;
position:absolute;
left:33%;
}
#divright {
width:33.3%;
height:200px;
background:#000;
margin-top: 10px;
z-index: 1;
position:absolute;
left:66%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divleft"><p>Click Me!</p></div>
<div id="divmid"></div>
<div id="divright"></div>
What this code does is that it overlaps the divs using width 100%, vertically. I was just wondering how you would go about if you were to overlap the divs horizontally.
My code so far is this:
html, body {
width: 80%;
margin: 0 auto;
}
head {
text-align:left;
}
head, img {
width: 350px;
height: 100px;
float: left;
margin-bottom: 1%;
}
.container {
width: 100%;
height: 100%;
margin: 0 auto;
}
button {
background-color: #cccccc;
color: #000000;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
padding-left: 15%;
outline: none;
font-size: 17px;
transition: 0.4s;
margin-top: 2%;
}
.icon {
width: 25px;
height: 25px;
padding-right: 15%;
float: right;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
<div class="container">
<div id="first">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
<div id="second">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
<div id="third">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
<div id="fourth">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
<div id="last">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
</div>
Thanks!
I think what you are trying to get it has more to do with relative height and absolute positioning than with the z-index property only.
Once the element div is clicked it has to cover the parent element. To do that you should put the container the position: relative property and the growing element as position: absolute and the height and width to 100% and positioning top and leftcoinciding with the parent (to 0). The button is inside that div (#first, #second, #third, #last) so it has to be also height: 100%
And finally you just set the z-index to ensure that the current button overlaps and cover the other buttons displayed.
$('.container div').click(function(event){
$(this).toggleClass('active');
})
html, body{
width: 80%;
margin: 0 auto;
}
head{
text-align:left;
}
head, img{
width: 350px;
height: 100px;
float: left;
margin-bottom: 1%;
}
.container{
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
}
button{
background-color: #cccccc;
color: #000000;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
padding-left: 15%;
outline: none;
font-size: 17px;
margin-top: 2%;
position: relative;
}
button h3{
display: flex;
justify-content: space-around;
align-items: center;
}
.icon {
height: 2.5em;
width: 1.7em;
float: right;
}
.icon {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be);
}
.container div.active{
height: 100%;
background-color: white;
position:absolute;
top:0;
left:0;
width: 100%;
z-index: 2;
}
.container div.active button{
height: 100%;
}
#first,#second,#third,#fourth,#last{
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="first">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="second">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="third">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="fourth">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="last">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
</div>
great solution and thanks for quick response! Just wondering where I would place my jquery code?
$('.container div').click(function(event){
$(this).toggleClass('active');
})
html, body{
width: 80%;
margin: 0 auto;
}
head{
text-align:left;
}
head, img{
width: 350px;
height: 100px;
float: left;
margin-bottom: 1%;
}
.container{
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
}
button{
background-color: #cccccc;
color: #000000;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
padding-left: 15%;
outline: none;
font-size: 17px;
margin-top: 2%;
position: relative;
}
button h3{
display: flex;
justify-content: space-around;
align-items: center;
}
.icon {
height: 2.5em;
width: 1.7em;
float: right;
}
.icon {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be);
}
.container div.active{
height: 100%;
background-color: white;
position:absolute;
top:0;
left:0;
width: 100%;
z-index: 2;
}
.container div.active button{
height: 100%;
}
#first,#second,#third,#fourth,#last{
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="first">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="second">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="third">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="fourth">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="last">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
</div>
[EDIT]: You include jquery just before closing the body tag of your html document, and you write your javascript just bellow that. Like the following:
<body>
<!-- Here goes your page content -->
<!-- Here you include the jquery and any js you may need -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Here goes custom jquery code -->
<script>
$('.btn').click( function(){
$(this).parent().addClass("active")
})
</script>
</body>
I suggest you check the Stackoverflow rules:
https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work?rq=1
Here is the simplified solution to your problem:
$('.btn').click( function(){
$(this).parent().addClass("active")
})
.elements-container {
position: relative;
}
.element {
float: left;
width: 25%;
background-color: grey;
text-align: center;
padding: 50px 0;
}
.element.active {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: blue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elements-container">
<div class="element">
<button class="btn">Button 1</button>
</div>
<div class="element">
<button class="btn">Button 2</button>
</div>
<div class="element">
<button class="btn">Button 3</button>
</div>
<div class="element">
<button class="btn">Button 4</button>
</div>
</div>
I've just started to get into jQuery, so I apologise for the bad coding in advance. I just recognised that whenever I scroll a bit down so that just a bit of the jQuery image slider is visible on the top of the page, it scrolls me automatically back to top when the jQuery image slider changes the picture. But when I am as far down on the page that the slider isn't visible at all or when I barely scroll down so that the most part of the slider is still on the screen, it doesn't scroll me back to top.
I would appreciate any help since I am not able to find the issue.
Thanks in advance.
$('#back_to_top').click(function()
{
$('html, body').animate({scrollTop: 0});
return false;
});
// Nav bar drop down code
$('#deals_a').hover(function(){
$('#deals_dropdown').stop(true, true).slideDown('medium');
});
if(!$('#deals_dropdown').is(':hover')){
$('#deals').mouseleave(function(){
$('#deals_dropdown').stop(true, true).slideUp('medium');
});
} else {
$('#deals_dropdown').mouseleave(function(){
$('#deals_dropdown').stop(true, true).slideUp('medium');
});
};
$('#services_a').hover(function(){
$('#services_dropdown').stop(true, true).slideDown('medium');
});
if(!$('#services_dropdown').is(':hover')){
$('#services').mouseleave(function(){
$('#services_dropdown').stop(true, true).slideUp('medium');
});
} else {
$('#services_dropdown').mouseleave(function(){
$('#services_dropdown').stop(true, true).slideUp('medium');
});
};
// Slider button code
$('.slider_button').hover(function(){
$('.slider_button').removeClass('active_button');
$(this).addClass('active_button');
$('.slide').hide();
$($('#slider').children()[$(this).index()]).show();
});
// Slider code
$(document).ready(function(){
// Set options
var speed = 500; // Fade speed
var autoswitch_speed = 4000; // Auto slider speed
var myInterval = setInterval(nextSlide, autoswitch_speed);
// Add initial active class
$('.slide').first().addClass('active');
// Hide all slides
$('.slide').hide();
// Show first slide
$('.active').show();
// show the first node
($($('#slider_button_container').children()[0])).addClass('active_button');
var counter = 1;
// Switch to next slide
function nextSlide(){
clearInterval(myInterval);
$('.slider_button').removeClass('active_button');
($($('#slider_button_container').children()[counter - 1])).removeClass('active_button');
($($('#slider_button_container').children()[counter])).addClass('active_button');
$('.active').removeClass('active').addClass('oldActive');
if($('.oldActive').is(':last-child')){
$('.slide').first().addClass('active');
($($('#slider_button_container').children()[3])).removeClass('active_button');
($($('#slider_button_container').children()[0])).addClass('active_button');
counter = 0;
} else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
counter = (counter + 1) % 4;
myInterval = setInterval(nextSlide, autoswitch_speed);
}
});
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
}
header{
width: 100%;
height: 600px;
text-align: center;
}
#nav_menu{
height: 98px;
display: inline-block;
border-bottom: 2px solid #FFF;
padding: 0 20px 0 20px;
position: relative;
z-index: 2;
}
.nav_menu_items{
float: left;
margin: 10px;
padding-bottom: 10px;
width:auto;
line-height: 80px;
}
.nav_menu_items a{
text-decoration: none;
color: #FFF;
font-size: 20px;
font-weight: bold;
position: relative;
font-family: 'Exo 2', sans-serif;
font-style: italic;
}
.nav_menu_sup:hover::after{
content: "\25B2";
position: absolute;
left: 40%;
top: 14px;
}
#back_to_top, #back_to_top img{
position: fixed;
width: 50px;
height: 50px;
right: 50px;
bottom: 50px;
display:block;
}
.dropdown{
display:none;
height: auto;
width: auto;
font-family: 'Exo 2', sans-serif;
font-size: 20px;
font-weight: bold;
font-style: italic;
position: absolute;
background: #FFF;
top:100px;
line-height: 20px;
list-style-type: none;
}
.color_1{
background: #4BB7BE;
}
.color_2{
background: #2A7287;
}
.dropdown li{
padding: 10px;
;
}
.dropdown li:hover{
}
.dropdown li a{
color: #FFF;
}
.dropdown li a:hover{
color: #FFA;
}
#slider{
position: relative;
width: 100%;
height: 100%;
margin-top: -105px;
z-index: 1;
overflow: hidden;
}
.slide img{
height: 600px;
}
.darkening_layer{
width: 100%;
height: 600px;
position: absolute;
background: rgba(0, 0, 0, 0.2);
}
#slider_button_container{
position: relative;
display: inline-block;
top: -50px;
z-index: 2;
}
.slider_button{
height: 18px;
width: 18px;
border-radius: 50%;
border: 3px solid #FFF;
float: left;
z-index: 100;
margin-left: 10px;
cursor: pointer;
position: relative;
display: block;
}
.slider_button:hover{
background: #FFF;
}
.active_button{
background: #FFF;
}
#first_slider_button{
}
#welcome{
background: #007DCC;
width: 100%;
height: 400px;
}
#advertise{
background: #004E7F;
width: 100%;
height: 400px;
}
footer{
width: 100%;
height: 400px;
background-color: #007DCC;
}
.clear{
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sea Kozmetik ve Güzellik</title>
<link rel="stylesheet" style="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Bitter|Exo+2" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="container">
<header>
<div id="nav_menu">
<div id="home" class="nav_menu_items">
<a class="nav_menu_sup" href="#">ANASAYFA</a>
</div>
<div id="about" class="nav_menu_items">
<a class="nav_menu_sup" href="#">HAKKIMIZDA</a>
</div>
<div id="deals" class="nav_menu_items">
<a class="nav_menu_sup" id="deals_a" href="#">KAMPANYALAR</a>
<ul id="deals_dropdown" class="dropdown">
<li class="color_1">Öğrenci Kampanyaları</li>
<li class="color_2">Epilasyon Kampanyaları</li>
<li class="color_1">Cilt Bakımı Kampanyaları</li>
</ul>
</div>
<div id="services" class="nav_menu_items">
<a class="nav_menu_sup" id="services_a" href="#">HİZMETLERİMİZ</a>
<ul id="services_dropdown" class="dropdown">
<li class="color_1">Cilt Bakımı</li>
<li class="color_2">Depilasyon</li>
<li class="color_1">Epilasyon</li>
<li class="color_2">Manikür</li>
<li class="color_1">Pedikür</li>
<li class="color_2">Tırnak Bakımı</li>
<li class="color_1">Kaş Tasarımı</li>
<li class="color_2">Makyaj</li>
</ul>
</div>
<div id="products" class="nav_menu_items">
<a class="nav_menu_sup" href="#">ÜRÜNLERİMİZ</a>
</div>
<div id="gallery" class="nav_menu_items">
<a class="nav_menu_sup" href="#">GALERİ</a>
</div>
<div id="contact" class="nav_menu_items">
<a class="nav_menu_sup" href="#">İLETİŞİM</a>
</div>
</div>
<!-- Picture size must be 1519px x 600px -->
<div id="slider">
<div id="first_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_7.jpg" alt="">
</div>
<div id="second_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_8.jpg" alt="">
</div>
<div id="third_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_9.jpg" alt="">
</div>
<div id="fourth_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_10.jpg" alt="">
</div>
</div>
<div id="slider_button_container">
<div id="first_slider_button" class="slider_button"></div>
<div id="second_slider_button" class="slider_button"></div>
<div id="third_slider_button" class="slider_button"></div>
<div id="fourth_slider_button" class="slider_button"></div>
<div class="clear"></div>
</div>
</header>
<div id="back_to_top">
<img src="images/arrow_up.png" alt="back to top">
</div>
<section id="welcome">
</section>
<section id="advertise">
</section>
<footer>
</footer>
</div>
<script src="js/script.js"></script>
</body>
</html>
I am trying to implement a navigation sidebar on left with list of links(<a>) such that on click of each links, corresponding <div> will be loaded on right side.
When I have a function for onclick property in <a>. It gives me error on browser console.
Uncaught ReferenceError: callFunction is not defined
Here is my implementation:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
function callFunction(){alert("Load divs");}
});
</script>
<style>
div.container {
width: 100%;
border: 1px solid gray;
}
header, footer {
padding: 1em;
color: white;
background-color: powderblue;
clear: left;
text-align: center;
}
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>My Company</h1>
</header>
<nav>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</nav>
<!--<div id="Link1" class="class1">
<h1>Link1</h1>
<p>Link1 detail</p>
</div>
<div id="Link2" class="class1">
<h1>Link2</h1>
<p>Link2 detail</p>
</div>-->
<footer>Copyright © myCompany</footer>
</div>
</body>
</html>
My requirement is to have a list of Links and s, where s should be hidden, and only be appeared when corresponding Links are clicked.
Here is the code that should work for you.
<div>s are not rendered/shown intially.
On click of Links(<a>), corresponding <div>s are shown
Navigation side bar is maintained.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
function loadContent(selector){
$("#loadOnClick").html($(selector).html());
};
$(document).ready(function(){
loadContent("#userGuide");
});
</script>
<style>
div.container11 {
width: 100%;
}
section.container1{
display: -webkit-flex; /* Safari */
display: flex;
}
.displayInline{
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: auto;
}
header, footer {
padding: 1em;
color: white;
background-color: powderblue;
clear: left;
text-align: center;
}
nav {
border-right: 2px solid gray;
}
nav ul {
list-style-type: none;
padding-top: 5px;
}
nav ul a {
text-decoration: none;
line-height: 30px;
}
div#loadOnClick {
float: right;
}
.displayOnClick{
display: none;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>My Company</h1>
</header>
<section id="container1">
<nav class="displayInLine" style="width: 20%; float: left;">
<ul>
<li><a href="#userGuide" class="quickLinks" onclick='loadContent("#userGuide")'>User Guide</a></li>
<li><a href="#SOP" class="quickLinks" onclick='loadContent("#SOP")'>SOP</a></li>
<li><a href="#procedurePages" class="quickLinks" onclick='loadContent("#procedurePages")'>Procedure pages</a></li>
<li><a href="#departmentInformation" class="quickLinks" onclick='loadContent("#departmentInformation")'>Department information</a></li>
<li><a href="#hoursOfOperations" class="quickLinks" onclick='loadContent("#hoursOfOperations")'>Hours of operations</a></li>
</ul>
</nav>
<div class="displayInLine" id="loadOnClick" style="width:75%; float: right;">
</div>
</section>
<div id="userGuide" class="displayOnClick">
<h1>User Guide</h1>
<p>This is the userguide for employees</p>
</div>
<div id="SOP" class="displayOnClick">
<h1>SOP</h1>
<p>This is the Statement of purpose for employees</p>
</div>
<div id="procedurePages" class="displayOnClick">
<h1>Procedure pages</h1>
<p>This is the Procedure pages for employees</p>
</div>
<div id="departmentInformation" class="displayOnClick">
<h1>Department information</h1>
<p>This is the Department information for employees</p>
</div>
<div id="hoursOfOperations" class="displayOnClick">
<h1>Hours of operations</h1>
<p>This is the Hours of operations for employees</p>
</div>
<footer>Copyright © Om Sao</footer>
</div>
</body>
</html>
You dont need to call callFunction() on $(document).ready state because thats called only once the page is loaded and by the time document is ready/loaded, the error is thrown. Hence, put definition outside $(document).ready.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function callFunction(){alert("Load divs");}
</script>
<style>
div.container {
width: 100%;
border: 1px solid gray;
}
header, footer {
padding: 1em;
color: white;
background-color: powderblue;
clear: left;
text-align: center;
}
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>My Company</h1>
</header>
<nav>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</nav>
<!--<div id="Link1" class="class1">
<h1>Link1</h1>
<p>Link1 detail</p>
</div>
<div id="Link2" class="class1">
<h1>Link2</h1>
<p>Link2 detail</p>
</div>-->
<footer>Copyright © myCompany</footer>
</div>
</body>
</html>
Ive tried multiple methods, but nothing seems to be working.
Ive recently stumbled upon this http://codepen.io/VectorQuanity/pen/qEeJoK, but when i try to implement it into my code, the text doesn't pop up on hover.
My code :
$(".pic").hover(function() {
$(".info", this).css("display", "block");
}, function() {
$(".info", this).css("display", "none");
});
$('.hover').mouseover(function() {
$('.text').css("visibility","visible");
});
$('.hover').mouseout(function() {
$('.text').css("visibility","hidden");
});
body {
width: 1500px;
text-align: center;
font-family: arial;
margin: 0 auto;
}
#import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300);
ul {
display: flex;
list-style-type: none;
justify-content: space-around;
align-items: center;
border-bottom: 2px solid black;
font-family: 'Source Code Pro';
}
.logo {
font-family: 'Source Code Pro';
font-size: 40px;
padding: 10px 0;
}
nav {
list-style-type: none;
}
.pic {
position: relative;
display: inline-block;
}
.pic:hover > .overlay {
position: absolute;
top: 0;
width:100%;
height:99.5%;
left: 0;
background-color:#000;
opacity:0.5;
z-index: 100;
display: block;
}
.info {
display: none;
position: absolute;
top: 100px;
left: 0;
text-align: center;
}
footer{
background: black;
color: white;
padding: 40px 0;
bottom: 0;
width: 100%;
z-index: -1;
font-family: 'Source Code Pro';
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gullible</title>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<ul>
<li>Home</li>
<li>Shop</li>
<li class="logo">Gullible</li>
<li>Visit</li>
<li>Contact</li>
</ul>
<div class="pic">
<img src="http://i.stack.imgur.com/cjj0l.jpg" class="hover">
<div class="overlay"></div>
<div class="info">
<img src="http://i.stack.imgur.com/cjj0l.jpg">
<p class="text">Wonder Women</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/fgwPb.jpg" class="hover">
<div class="overlay"></div>
<div class="info">
<img src="http://i.stack.imgur.com/fgwPb.jpg">
<p class="text">Batman</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/b8VTt.jpg" class="hover">
<div class="overlay"></div>
<div class="info">
<img src="http://i.stack.imgur.com/b8VTt.jpg">
<p class="text">Joker</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/rTZPO.jpg" class="hover">
<div class="overlay"></div>
<div class="info">
<img src="http://i.stack.imgur.com/rTZPO.jpg">
<p class="text">Bane</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/7aHn3.jpg" class="hover">
<div class="overlay"></div>
<div class="info">
<img src="http://i.stack.imgur.com/7aHn3.jpg">
<p class="text">Bane</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/JOzEN.jpg" class="hover">
<div class="overlay"></div>
<div class="info">
<img src="http://i.stack.imgur.com/JOzEN.jpg">
<p class="text">Bane</p>
</div>
</div>
<footer>
<h2>Gullible</h2>
<nav>
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Contact</li>
</nav>
</footer>
</body>
</html>
There are quite a few things in your code that could be improved. For example, you don't even need ANY JavaScript at all to achieve what you're looking for.
Check out the improved code below (which fixes your issue)!
#import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300);
body {
width: 1500px;
text-align: center;
font-family: arial;
margin: 0 auto;
}
header ul {
display: flex;
list-style-type: none;
justify-content: space-around;
align-items: center;
border-bottom: 2px solid black;
font-family: 'Source Code Pro';
}
.logo {
font-family: 'Source Code Pro';
font-size: 40px;
padding: 10px 0;
}
nav ul {
list-style-type: none;
}
.pic {
position: relative;
display: inline-block;
}
.info {
display: none;
color: #fff;
left : 0;
top : 45%;
right : 0;
text-align : center;
position: absolute;
}
.pic:hover > .overlay {
position: absolute;
top: 0;
width:100%;
height:99.5%;
left: 0;
background-color:#000;
opacity:0.5;
display: block;
}
.pic:hover .info {
display: block;
}
footer{
background: black;
color: white;
padding: 40px 0;
bottom: 0;
width: 100%;
z-index: -1;
font-family: 'Source Code Pro';
}
<header>
<nav>
<ul>
<li>Home</li>
<li>Shop</li>
<li class="logo">Gullible</li>
<li>Visit</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="pic">
<img src="http://i.stack.imgur.com/cjj0l.jpg">
<div class="overlay"></div>
<div class="info">
<p class="text">Wonder Women</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/fgwPb.jpg">
<div class="overlay"></div>
<div class="info">
<p class="text">Batman</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/b8VTt.jpg">
<div class="overlay"></div>
<div class="info">
<p class="text">Joker</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/rTZPO.jpg">
<div class="overlay"></div>
<div class="info">
<p class="text">Bane</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/7aHn3.jpg">
<div class="overlay"></div>
<div class="info">
<p class="text">Bane</p>
</div>
</div>
<div class="pic">
<img src="http://i.stack.imgur.com/JOzEN.jpg">
<div class="overlay"></div>
<div class="info">
<p class="text">Bane</p>
</div>
</div>
<footer>
<h2>Gullible</h2>
<nav>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Contact</li>
</ul>
</nav>
</footer>