W3Schools has an example I am using to make an image tab gallery.
Their example in using plain JS and I'm trying to use jQuery. I am new to using jQuery but I have a function that appears to grab the image in the console but the image selected will not appear in the img element with the id of #expandedImg.
I can't seem to figure out what is wrong or why it won't render the image I click on. I would appreciate any guidance. Thanks.
$(document).ready(function() {
$(".column img").click(function() {
var newclass = $(this).attr("src");
console.log(newclass);
var oldclass = $("#expandedImg").attr("id");
console.log(oldclass);
$("#expandedImg").fadeOut(function() {
$("#expandedImg").removeClass(oldclass).addClass(newclass).fadeIn("slow");
console.log(newclass);
});
});
});
/* The grid: Four equal columns that floats next to each other */
.column {
float: left;
width: 20%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container {
position: relative;
display: none;
width: 50%;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link href="../jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="../jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<!-- The four columns -->
<div class="row">
<div class="column">
<img src="../images/trees_mountains.jpg" alt="Nature" style="width:100%">
</div>
<div class="column">
<img src="../images/snow_mountains.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="../images/mountain_landscape.jpg" alt="Mountains" style="width:100%">
</div>
<div class="column">
<img src="../images/skylights.jpg" alt="Lights" style="width:100%">
</div>
</div>
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%" />
</div>
</body>
</html>
Your whole container with image inside is hidden with display: none in CSS:
.container {
position: relative;
display: none;
width: 50%;
}
You need to show it first:
$(".container").show()
Also you are using removeClass and addClass to add new image source.
removeClass and addClass are ONLY for adding and removing CSS classes, nothing else.
Data you have stored in newclass and oldclass are not CSS classes, those are variables with values and value is source of image in case of newclass, you just called variable newclass by name.
You need to add source same way you get them and fill it with value from variable:
$("#expandedImg").attr('src', newclass)
$(document).ready(function() {
$(".column img").click(function() {
console.clear();
var newclass = $(this).attr("src");
console.log(newclass);
var oldclass = $("#expandedImg").attr("id");
console.log(oldclass);
$(".container").show();
// show .container
$("#expandedImg").attr('src', newclass).hide().fadeIn("slow");
//set new source and hide element in order to be able to fade it in again
// fade in works only on hidden elements
});
});
/* The grid: Four equal columns that floats next to each other */
.column {
float: left;
width: 20%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container {
position: relative;
display: none;
width: 50%;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link href="../jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<!-- The four columns -->
<div class="row">
<div class="column">
<img src="https://pmcvariety.files.wordpress.com/2019/12/baby-yoda-plush-toy-mattel-the-mandalorian.png?w=1000&h=563&crop=1" alt="Nature" style="width:100%">
</div>
<div class="column">
<img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/oicrsr3wwqi6u3buvvxx.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="https://images2.minutemediacdn.com/image/upload/c_crop,h_1224,w_2177,x_80,y_0/f_auto,q_auto,w_1100/v1574876645/shape/mentalfloss/609512-disney_0.jpg" alt="Mountains" style="width:100%">
</div>
<div class="column">
<img src="https://static1.srcdn.com/wordpress/wp-content/uploads/2019/12/Baby-Yoda-in-The-Mandalorian-Chapter-4.jpg" alt="Lights" style="width:100%">
</div>
</div>
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%" />
</div>
</body>
</html>
Related
I'm trying to make a simple gallery with a modal viewer. Almost there but 2 simple problems confuse my little brain and can't figure them out.
problem 1- why does it work for the first image only?
problem 2- how to un append the image from the viewer so it will show again where it was? I know it will work if I create the image as a new item and then append it, but I can't figure this out.
let img = document.querySelector("img");
let viewer = document.getElementById("viewer");
img.addEventListener("click" , viewImg);
function viewImg() {
if (viewer.style.visibility = "hidden") {
viewer.appendChild(img);
img.style.width = "60%";
viewer.style.visibility = "visible";
}
}
function closeViewer() {
if (viewer.style.visibility = "visible") {
viewer.style.visibility = "hidden";
viewer.removeChild(img);
}
}
.container {
line-height: 0;
column-count: 3;
column-gap: 0;
column-fill: balance;
}
.container img {
width: 100%;
}
.container img:hover {
scale: 1.1;
transition: 0.5s;
left: 120%;
cursor: pointer;
}
.viewer {
visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: rgb(255, 0, 0, 0.5);
/* transition: 1s; */
}
.closeViewer {
color: #000;
background: rgb(255, 255, 255, 0.5);
position: absolute;
top: 100px;
right: 100px;
font-family: Arial, Helvetica, sans-serif;
font-size: 3rem;
padding: 0 10px;
cursor: pointer;
}
<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.0">
<title>simple gallery</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="container" id="container">
<!-- onclick="viewImg()" -->
<img class="img"src="https://images.freeimages.com/images/large-previews/a31/colorful-umbrella-1176220.jpg">
<img class="img"src="https://images.freeimages.com/images/large-previews/9e6/abstract-polygonal-low-poly-photos-texture-3-636190.jpg">
<img class="img"src="https://images.freeimages.com/images/large-previews/aa8/evening-01-1055813.jpg">
<img class="img"src="https://live.staticflickr.com/3437/3403778548_15f48ab99e_b.jpg">
<img class="img"src="https://cdn.pixabay.com/photo/2017/07/25/01/22/cat-2536662_960_720.jpg">
<img class="img"src="https://cdn.pixabay.com/photo/2018/08/01/19/35/wolf-3577956_960_720.jpg">
<img class="img"src="https://live.staticflickr.com/3437/3403778548_15f48ab99e_b.jpg">
<img class="img"src="https://cdn.pixabay.com/photo/2017/07/25/01/22/cat-2536662_960_720.jpg">
<img class="img"src="https://cdn.pixabay.com/photo/2018/08/01/19/35/wolf-3577956_960_720.jpg">
<img class="img"src="https://images.freeimages.com/images/large-previews/a31/colorful-umbrella-1176220.jpg">
<img class="img"src="https://images.freeimages.com/images/large-previews/9e6/abstract-polygonal-low-poly-photos-texture-3-636190.jpg">
<img class="img"src="https://images.freeimages.com/images/large-previews/aa8/evening-01-1055813.jpg">
</div>
<div class="viewer" id="viewer">
<button class="closeViewer" id="closeViewer" onclick="closeViewer()">X</button>
</div>
<script src="./test.js"></script>
</body>
</html>
The reason why only the first <img> worked and none of the other ones did is because .querySelector() selects the first <img class='img'> it finds and then stops. Then when the modal is closed the appended image is permanently removed from the whole page so nothing works after that.
You need to bind the event handler to an parent tag of all of those <img> and then single out the <img> you clicked by using e.target. In the example <dialog> element is used instead of a plain <div>.
Details are commented in example
// Reference <dialog>, <figure>, <section>, and <button>
const viewer = document.querySelector(".viewer");
const frame = document.querySelector('.frame');
const gallery = document.querySelector('.gallery');
const close = document.querySelector('.close');
// Bind the click event to the parent tag of all of the <img>
gallery.addEventListener("click", viewImg);
// Bind the click event to the <button>
close.onclick = closeViewer;
// Event handler passes Event Object by default
function viewImg(e) {
// Reference the tag user clicked
const clk = e.target;
/*
If the user clicked an <img class='img'>...
...open <dialog>...
...make a clone of the clicked <img>
...then add the clone to <figure>
*/
if (clk.matches('.img')) {
viewer.showModal();
let copy = clk.cloneNode(true);
frame.append(copy);
}
}
// Close <dialog> and remove the clone from <figure>
function closeViewer(e) {
viewer.close();
frame.replaceChildren();
}
.gallery {
line-height: 0;
column-count: 3;
column-gap: 0;
column-fill: balance;
}
img {
width: 100%;
cursor: pointer;
}
.viewer {
position: relative;
width: 75%;
overflow: hidden;
}
.close {
color: #000;
background: rgb(255, 255, 255, 0.5);
position: absolute;
top: 4px;
right: 4px;
font-size: 3rem;
padding: 0 10px;
cursor: pointer;
}
<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.0">
<title>simple gallery</title>
</head>
<body>
<section class="gallery">
<img class="img" src="https://images.freeimages.com/images/large-previews/a31/colorful-umbrella-1176220.jpg">
<img class="img" src="https://images.freeimages.com/images/large-previews/9e6/abstract-polygonal-low-poly-photos-texture-3-636190.jpg">
<img class="img" src="https://images.freeimages.com/images/large-previews/aa8/evening-01-1055813.jpg">
<img class="img" src="https://live.staticflickr.com/3437/3403778548_15f48ab99e_b.jpg">
<img class="img" src="https://cdn.pixabay.com/photo/2017/07/25/01/22/cat-2536662_960_720.jpg">
<img class="img" src="https://cdn.pixabay.com/photo/2018/08/01/19/35/wolf-3577956_960_720.jpg">
<img class="img" src="https://live.staticflickr.com/3437/3403778548_15f48ab99e_b.jpg">
<img class="img" src="https://cdn.pixabay.com/photo/2017/07/25/01/22/cat-2536662_960_720.jpg">
<img class="img" src="https://cdn.pixabay.com/photo/2018/08/01/19/35/wolf-3577956_960_720.jpg">
<img class="img" src="https://images.freeimages.com/images/large-previews/a31/colorful-umbrella-1176220.jpg">
<img class="img" src="https://images.freeimages.com/images/large-previews/9e6/abstract-polygonal-low-poly-photos-texture-3-636190.jpg">
<img class="img" src="https://images.freeimages.com/images/large-previews/aa8/evening-01-1055813.jpg">
</section>
<dialog class="viewer">
<button class="close">X</button>
<figure class='frame'></figure>
</dialog>
</body>
</html>
I'm working on palette board project and struggling when changing to different theme.
Initial page will have Warm color palette, but I want to change this after clicking All theme.
Users will have options to choose different theme if you tap the dropdown menu just like the image I posted.
Below you will find images that I imagine.
* {
box-sizing:border-box;
}
body {
margin:0;
color: #FFF;
}
.board {
letter-spacing: 1px;
}
.board-nav-indicator {
position:absolute;
top:0;
left:0;
width:75px;
height:75px;
/*background-color:red;*/
background-image: -webkit-linear-gradient(left top, #FF512F, #DD2476);
background-image: -moz-linear-gradient(left top, #FF512F, #DD2476);
background-image: -ms-linear-gradient(bottom right, #FF512F, #DD2476);
background-image: -o-linear-gradient(bottom right, #FF512F, #DD2476);
background-image: linear-gradient(bottom right, #FF512F, #DD2476);
transition:all 0.3s;
transform:translateX(0);
z-index:1;
}
[data-page='0'] .board-nav-indicator {
transform:translateX(0);
}
[data-page='1'] .board-nav-indicator {
transform:translateX(100%);
}
[data-page='2'] .board-nav-indicator {
transform:translateX(200%);
}
.board-nav-buttons {
display: flex;
align-items: center;
position:relative;
z-index:2;
}
.board-pages {
position:absolute;
top:75px;
left:0;
width:100%;
height:calc(100% - 75px);
overflow:hidden;
}
.board-page {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
transition:all 0.4s;
transform:translateX(0);
overflow:auto;
background-color: #262931;
}
.grid-row-theme .grid-item-theme {
max-width: 130px;
}
#align-left {
float: left;
color: #747474;
}
#align-right {
float: right;
color: #9CC8E3;
}
.grid-item {
flex:0 1 25%;
padding:6px;
}
.grid-item-theme {
flex:0 1 25%;
padding:6px;
}
.grid-row {
overflow-x:auto;
white-space:nowrap;
}
.grid-row .grid-item {
display:inline-block;
max-width:110px;
}
.grid-item-content {
text-align:left;
font-family: "mr-eaves-modern";
font-size:0.3rem;
text-transform:uppercase;
}
.pick-palette img{
border: 3px solid #FFF;
}
#dropdown-menu {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: 2% 0 6% 0;
font-size: 0.9rem;
letter-spacing: 1px;
}
/* The Modal (background) */
.modal-inside {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content-theme {
background-color: #fff;
margin: 10% auto; /* 15% from the top and centered */
padding: 20px;
border-radius:4px 4px 4px 4px;
width: 70%;
height: 430px;
}
/* The Close Button */
.close-theme {
color: #000000;
background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
font-size: 28px;
font-weight: bold;
}
.close-theme:hover,
.close-theme:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.theme-list-dropdown {
color: #BDBEC1;
text-transform: uppercase;
font-family: "mr-eaves-modern";
font-size: 0.9rem;
text-align: center;
}
.theme-list-name {
padding: 20.5px;
}
#all-theme-list-name {
margin-top: -5px;
}
#warm-theme-list-name {
color: #262931;
/* background-color: #EEEEEF;*/
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>Omnibag Project</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="board-pages">
<div class="board-page">
<div class="grid-item-theme" id="dropdown-menu"><div id="themeBtn" class="theme-warm">Warm</div><i class="material-icons">keyboard_arrow_down</i></div>
<!-- The Modal -->
<div id="myModal" class="modal-inside">
<span class="close-theme">×</span>
<div class="modal-content-theme">
<div class="theme-list-dropdown">
<div class="theme-list-name" id="all-theme-list-name">All</div>
<div class="theme-list-name" id="">Bright</div>
<div class="theme-list-name">Dark</div>
<div class="theme-list-name" id="warm-theme-list-name">Warm</div>
<div class="theme-list-name">Cool</div>
<div class="theme-list-name">Pastel</div>
<div class="theme-list-name">Neon</div>
</div>
</div>
</div>
<!-- End: The Modal -->
<div class="trending-above-palette">
<div class="grid-item-theme" id="align-left">Trending</div>
<div class="grid-item-theme" id="align-right">See all</div>
<div style="clear: both;"></div>
</div>
<div class="grid-row">
<div class="grid-item grid-beige">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Beige
<!-- <i class="material-icons more-icon">more_horiz</i> -->
</div>
</div>
<div class="grid-item grid-camel">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Camel
</div>
</div>
<div class="grid-item grid-salmon">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Salmon Pink
</div>
</div>
<div class="grid-item grid-navajo">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Navajo White
</div>
</div>
<div class="grid-item grid-niagara">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Niagara
</div>
</div>
<div class="grid-item grid-primrose">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Primrose
</div>
</div>
<div class="grid-item grid-lapis">
<img src="http://placehold.it/100x100" alt="" class="grid-item-img" />
<div class="grid-item-content">
Lapis Blue
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://use.typekit.net/hoc0zbs.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<script>
$(".board-pages .grid-item").on("click",function(){
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
$(this).addClass( "pick-palette" );
});
$(".board-pages .grid-item-pattern-board").on("click",function(){
$(this).parents('.board-page').find('.pick-palette').removeClass("pick-palette");
$(this).addClass( "pick-palette" );
});
</script>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
// var btn = document.getElementById("themeBtn");
var btn = document.getElementById("themeBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close-theme")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
it can be implemented by using Jquery click and addClass.
https://api.jquery.com/click/
https://api.jquery.com/addclass/
http://api.jquery.com/toggleclass/
after clicking modal item, the written jquery should add or change top div's class.
like
<div class'board-pages [theme]'>
... content
</div>
[theme] and its children's css should be defined as well.
or this solution could be another option
Replacing css file on the fly (and apply the new style to the page)
I'm working with Framework7.
Is it possible to combine the material tab's with the swiper slider?
I want to make tabs accessible over tabbing the tab-bar. And also want to swipe to the next “tab” by swiping left/right. Is that possible? I tried this, but it doesn't work for me:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Soziale Medien durchsuchen</title>
<link rel="stylesheet" href="css/framework7.material.css">
<link rel="stylesheet" href="css/search.css">
</head>
<body>
<div class=“views”>
<div class=“view view-main”>
<div class=“pages”>
<div data-page=“home” class=“page toolbar-fixed navbar-fixed”>
<!— navi —>
<div class=“navbar”>
<div class=“navbar-inner”>
<div class=“center”>
<div class=“list-block”>
<div class=“item-inner”>
<div class=“item-input”>
<input type=“text” placeholder=“ Suchbegriff” style=“width: 100%; border-radius:5px; font-size: 13px;”>
</div>
</div>
</div>
</div>
</div><!— navbar inner —>
</div><!— navbar —>
<div class=“toolbar tabbar tabbar-scrollable”>
<div class=“toolbar-inner”>
<a href=“#tab-1” class=“tab-link active” style=“color: black;”>Link 1</a>
<a href=“#tab-2” class=“tab-link” style=“color: black;”>Link 2</a>
<a href=“#tab-3” class=“tab-link” style=“color: black;”>Link 3</a>
</div>
</div>
<div class=“page-content”>
<div class=“swiper-container”>
<div class=“swiper-wrapper”>
<!— Tabs —>
<div class=“tabs”>
<div id=“tab-1” class=“tab active swiper-slide”>
<div class=“content-block”>
content1
</div>
</div>
<div id=“tab-2” class=“tab swiper-slide”>
<div class=“content-block”>
content2
</div>
</div>
<div id=“tab-3” class=“tab swiper-slide”>
<div class=“content-block”>
content3
</div>
</div>
</div><!— Tabs ende —>
</div>
</div><!— swipe —>
</div><!— page content —>
</div><!— div class home —>
</div>
</div>
</div>
<script type=“text/javascript” src=“js/framework7.js”></script>
<script>
var myApp = new Framework7({
material: true,
statusbarOverlay: false
});
var mySwiper = new Framework7();
var mySwiper = mySwiper.swiper('.swiper-container', {
pagination:'.swiper-pagination'
});
</script>
<script type=“text/javascript” src=“cordova.js”></script>
</body>
Here is my custom CSS:
/* framework7.material.css custom */
.navbar, .toolbar {
background-color: #fff;
color: #000;
}
.tab-link {
color: #000;
font-size: 8px;
}
.tabbar a.tab-link,
.tabbar a.link {
font-size: 12px;
}
.item-input {
color: #000;
}
.center {
width: 100%;
}
/* eigene stylesheets */
.contactscontainer {
width: 100%;
}
.contactstext {
float: left;
width: 70%;
font-size: 13px;
vertical-align: top;
}
.contactsbutton {
float:right;
width: 15%;
vertical-align: top;
margin-top: -15px;
}
.mynetcontainer {
width: 100%;
vertical-align: top;
}
.myneticon {
width: 10%;
float: left;
vertical-align: top;}
.mynettext {
width: 90%;
float: right;
vertical-align: top;
}
.mediathekcontainer {
width: 100%;
}
.mediathekpic {
float: left;
width: 35%;
margin-top: 3px;
}
.mediathektext {
float: left;
width: 65%;
}
/* Swiper */
.swiper-container {
height: 100%;
}
.swiper-slide {
background:#fff;
}
.swiper-slide span {
text-align:center;
display:block;
margin:20px;
font-size:21px;
}
I'm simply trying to display a grid of boxes with each box having information about a dog breed. My problem is this: There appears to be a difference in behavior when I declare a style in-line vs the same style in a class. I'm confused why there is a difference, when there shouldn't be any as far as I know.
Here is the code behaving properly: http://imgur.com/a/z2b5c
This occurs with the code below. The code to note are the dogDisplay class declared in style, and the div of class dogDisplay in the body. The div has an in-line style="position:absolute".
<!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">
<link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.dogDisplay {
display: inline-block;
width: 300px;
height: 300px;
margin: 10px;
background-color: grey;
}
.dogName {
font-size: 20px;
text-align: center;
}
.img {
width: 200px;
height: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}
.content {
background-color: red;
}
</style>
</head>
<script>
//This just loads the dog information from a JSON file
var dogInfo = [];
function displayInfo(dogBreeds) {
$("#container").append("<div class='dogDisplay'></div>");
}
window.onload = function() {
$.getJSON("breeds.json", function(json) {
var i;
console.log(typeof(json.dogBreeds));
dogInfo = json.dogBreeds;
displayInfo(json.dogBreeds);
})
}
</script>
<body>
<div class="well" style="height:300px"></div>
<div id="container" class="container" style="width:100%;background-color:lightblue;border:black 2px solid;">
<div class="dogDisplay" style="position:absolute">
<div class="content">
<p class="dogName">Dog Name</p>
<img class="img" src="images/place-holder.jpg" alt="Place-holder">
</div>
</div>
</div>
</body>
HOWEVER. When moving style="position:absolute" into the dogDisplay class, this is the new behavior: http://imgur.com/a/sv3Oh
<!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">
<link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.dogDisplay {
display: inline-block;
width: 300px;
height: 300px;
margin: 10px;
background-color: grey;
position: absolute;
}
.dogName {
font-size: 20px;
text-align: center;
}
.img {
width: 200px;
height: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}
.content {
background-color: red;
}
</style>
</head>
<script>
var dogInfo = [];
function displayInfo(dogBreeds) {
$("#container").append("<div class='dogDisplay'></div>");
}
window.onload = function() {
$.getJSON("breeds.json", function(json) {
var i;
console.log(typeof(json.dogBreeds));
dogInfo = json.dogBreeds;
displayInfo(json.dogBreeds);
})
}
</script>
<body>
<div class="well" style="height:300px"></div>
<div id="container" class="container" style="width:100%;background-color:lightblue;border:black 2px solid;">
<div class="dogDisplay">
<div class="content">
<p class="dogName">Dog Name</p>
<img class="img" src="images/place-holder.jpg" alt="Place-holder">
</div>
</div>
</div>
</body>
Why is there a difference? Thank you!
In your first example, this line:
$("#container").append("<div class='dogDisplay'></div>");
Conflicts with the starting layout:
<div class="dogDisplay" style="position:absolute">
Meaning only the initial .dogDisplay will have the absolute positioning. In the second example, all of them will have the absolute positioning.
I am a beginer trying to make a gallery for my site, but I am failing somewhere. What I am trying to do is create a page with menu on the top and then under it boxes of small pictures. When you click on one of them, the picture should be loaded under those boxes. So far I have my menu done, and I have the boxes with the pictures, but the problem is that when you first load the page all of the pictures in the small boxes are loaded under and when you click on any boxes - they disapear and only the selected picture is loaded, as it should be. So my problem is that I can't make the page not load all those pictures when loaded for a first time. I don't mind if it just loads one of them, but not all. I've been trying to fix it for 3 days now, but no luck, so I have no choice, but to ask you for help.
Here's the HTML:
<!DOCTYPE HTML>
<HEAD>
<LINK href="Menu/Menu.css" rel="stylesheet" type="text/css" />
<LINK href="Pictures/Background.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="Style/style.css"/>
<script type="text/javascript" src="JavaScript/Script.js"></script>
</HEAD>
<BODY>
<nav class="nav">
<ul>
<li class="current"><b>MENU</b></li>
<li>BLOG</li>
<li>MUSIC</li>
<li>PHOTOGRAPHY</li>
<li>QUOTES & THOUGHTS</li>
<li>ABOUT ME</li>
</ul>
</nav>
<div id="gallery">
<div id="thumbs">
<img src="Pictures/Photography/image1.jpg" alt="" />
<img src="Pictures/Photography/image2.jpg" alt="" />
<img src="Pictures/Photography/image3.jpg" alt="" />
<img src="Pictures/Photography/image4.jpg" alt="" />
<img src="Pictures/Photography/image5.jpg" alt="" />
</div>
<CENTER>
<div id="bigimages">
<div id="normal1">
<img src="Pictures/Photography/bigimage1.jpg" alt=""/>
</div>
<div id="normal2">
<img src="Pictures/Photography/bigimage2.jpg" alt=""/>
</div>
<div id="normal3">
<img src="Pictures/Photography/bigimage3.jpg" alt=""/>
</div>
<div id="normal4">
<img src="Pictures/Photography/bigimage4.jpg" alt=""/>
</div>
<div id="normal5">
<img src="Pictures/Photography/bigimage5.jpg" alt=""/>
</div>
</div>
</div>
</BODY>
</HTML>
Here's the CSS:
html{
background:url(BACKGROUND.jpg) no-repeat center center;
min-height:100%;
background-size:cover;
}
img {
border: none;
}
#gallery {
margin: 0 auto;
width: 100%;
}
#thumbs {
margin: 10px auto 10px auto;
width: 100%;
}
#bigimages {
width: 100%;
float: left;
}
#thumbs img {
width: 50px;
height: 50px;
}
#bigimages img {
border: 4px solid #555;
margin-top: 5px;
height: 500px;
}
#thumbs a:link, #thumbs a:visited {
width: 50px;
height: 50px;
border: 6px solid #555;
margin: 6px;
float: left;
}
#thumbs a:hover {
border: 6px solid #888;
}
And finally here's my simple JavaScript:
function changeImage(current) {
var imagesNumber = 5;
for (i=1; i<=imagesNumber; i++) {
if (i == current) {
document.getElementById("normal" + current).style.display = "block";
} else {
document.getElementById("normal" + i).style.display = "none";
}
}
}
You could simply hide them via CSS.
#bigimages > div:not(:first-child) { display: none; }
This should display only the first big image.
Could be easier yet if you added a class to the image wrappers. Assuming the class could be big-image-wrap, the css would be:
#bigimages > div.big-image-wrap { display: none; }
#bigimages > div.big-image-wrap:first-child { display: block; }
You can hide those images on load event. Like this:
window.onload = function(){
var thumbs = document.getElementById('thumbs');
var images = thumbs.getElementsByTagName('img');
for (i = 0; i < images.length;i++ ) {
images[i].style.display = "none";
}
}