How do I let a user resize images? I'm currently working on a project (https://lake-equinox.glitch.me/) where it lets users click on an image from a menu, which makes it appear on top of another image (the background). I would like it so the user could make the images bigger and smaller on top of the background. Here is my code:
$(function() {
$(".draggable").draggable();
});
var selectedLayer;
var highestIndex = 0;
function updateHighestIndex() {
$(".draggable").each(function() {
if (parseInt($(this).css("z-index")) > highestIndex) {
highestIndex = parseInt($(this).css("z-index"))
}
})
}
$("#images").on("mousedown", ".draggable", function() {
$(selectedLayer).css("background", "");
selectedLayer = this;
$("#index").html(parseInt($(selectedLayer).css("z-index")))
$(selectedLayer).css({"background": "rgba(255,255,255,0.5)", "padding": "10px"})
})
$(".icon").click(function() {
updateHighestIndex()
$('#images').append($('<img>', {class: 'draggable', src: this.src}).css("z-index", highestIndex + 1));
$(".draggable").draggable();
})
$("#background").click(function() {
$(selectedLayer).css("background", "")
selectedLayer = undefined;
$("#index").html("")
})
function myFunction() {
$("#demo").html(document.lastModified)
}
function inventory(category) {
var state = $("#" + category).css("display")
$(".tabcontent").css("display", "none");
$(".tablinks").removeClass("active");
if (state !== "block") {
$("#" + category).css("display", "block")
$(event.currentTarget).addClass("active");
}
}
$("#up").click(function() {
updateHighestIndex()
if (parseInt($(selectedLayer).css("z-index")) < highestIndex) {
var x = parseInt($(selectedLayer).css("z-index")) + 1;
$(".draggable").each(function() {
if ($(this).css("z-index") == x) {
$(this).css("z-index", x - 1)
}
});
$(selectedLayer).css('z-index', x);
$("#index").html(x)
}
})
$("#down").click(function() {
var x = parseInt($(selectedLayer).css("z-index"));
if (x > 1) {
x = parseInt($(selectedLayer).css("z-index")) - 1;
$(".draggable").each(function() {
if ($(this).css("z-index") == x) {
$(this).css("z-index", x + 1)
}
});
$(selectedLayer).css('z-index', x);
$("#index").html(x);
}
})
$("#flip").click(function() {
if ($(selectedLayer).css("transform") == "matrix(1, 0, 0, 1, 0, 0)") {
$(selectedLayer).css("transform", "scaleX(-1)");
} else {
$(selectedLayer).css("transform", "scaleX(1)");
}
})
$("#del").click(function() {
$(".draggable").each(function() {
if ($(this).css("z-index") > $(selectedLayer).css("z-index")) {
$(this).css("z-index", $(this).css("z-index") - 1)
}
});
$(selectedLayer).remove()
$("#index").html("")
})
$("#clear").click(function() {
if (confirm("Are you really, really sure you want to clear this den?")) {
$(".draggable").remove()
selectedLayer = undefined;
highestIndex = 0;
$("#index").html("")
}
})
$(document).keydown(function(e){
if(e.which === 123){
return false;
}
});
$(document).bind("contextmenu",function(e) {
e.preventDefault();
});
var currentHtmlContent;
var element = new Image();
var elementWithHiddenContent = document.querySelector("#element-to-hide");
var innerHtml = elementWithHiddenContent.innerHTML;
element.__defineGetter__("id", function() {
currentHtmlContent= "";
});
setInterval(function() {
currentHtmlContent= innerHtml;
console.log(element);
console.clear();
elementWithHiddenContent.innerHTML = currentHtmlContent;
}, 1000);
/* CSS files add styling rules to your content */
body {
font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
margin: 2em;
background: url(https://s7.postimg.cc/5hqui80mj/Layer_0.png);
background-size: cover;
background-position: center;
color: white;
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
border: 1px solid #ccc;
border-top: none;
background: rgba(0,0,0,0.3);
max-height: 400px;
overflow: auto;
}
#images {
overflow: auto;
margin-top: 10px;
height: 664px;
position: relative;
user-select: none;
}
#background {
position: absolute;
z-index: 0;
}
.button {
background: red;
padding: 10px;
cursor: pointer;
display: inline-block;
border: none;
}
.button:hover {
color: white;
}
#buttons {
position: sticky;
top: 10px;
z-index: 999999999999999999999;
margin-top: 10px;
}
.draggable {
position: absolute;
z-index: 1;
cursor: pointer;
transform: scaleX(1);
}
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
.icon {
cursor: pointer;
max-width: 100px;
}
.text {
background: rgba(0,0,0,0.3);
padding: 1em;
margin-bottom: 10px;
}
h1 {
font-size: 3vw;
}
.bar {
padding: 1em;
background: rgba(255,255,255,0.3)
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>AJ Den Designer</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's javascript file -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/script.js" defer></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></script>
</head>
<body>
<div class="text">
<p>
If you would like PNGs of certain den items to be added, DM us (Equinium#1235 or ¿_?#5927) on Discord.
</p>
<p>Created by Equinium#1235 & ¿_?#5927 on Discord. Special thanks to Aqrillex for helping out with bits of code. Many thanks to LWS and "The Jammer Vault" assets server on Discord for providing with a few assets. ¿_? has helped IMMENSELY, without whom I wouldn't have been able to come so far.</p>
<div id="instructions">
<h1>How to use:</h1>
<ul>
<li>Click a tab and click on an item to spawn it into the den. Drag the graphic around as you please.</li>
<li>Click the "Up" and "Down" buttons to move the graphic up and down a layer, to behind or infront of another png.</li>
<li>Click the "Flip" button to flip the png left and right</li>
<li>Click the "Del" button to delete the selected PNG</li>
<li>Click the "Clear" Button to clear the den and start fresh</li>
<li>For maximum comfortability zoom out</li>
</ul>
</div>
</div>
<div class="tab">
<button class="tablinks" onclick="inventory('Pets')">Pets</button>
<button class="tablinks" onclick="inventory('Nature')">Nature</button>
<button class="tablinks" onclick="inventory('Housing')">Housing</button>
<button class="tablinks" onclick="inventory('Flowers')">Flowers</button>
<button class="tablinks" onclick="inventory('Misc')">Misc</button>
</div>
<div id="Pets" class="tabcontent">
<img class="icon" src="http://i65.tinypic.com/2a5x8pt.png">
<img class="icon" src="http://i65.tinypic.com/no6bkx.png">
</div>
<div id="Nature" class="tabcontent">
<div class="bar">B</div>
<img class="icon" src="https://s9.postimg.cc/lv0v0g6mn/1_1.png">
<img class="icon" src="https://s9.postimg.cc/v2t3h55z3/image.png">
<img class="icon" src="https://s9.postimg.cc/fu363cwv3/1_1_1.png">
<div class="bar">R</div>
<img class="icon" src="http://i67.tinypic.com/jafg4h.png">
<img class="icon" src="http://i65.tinypic.com/11w82et.png">
<img class="icon" src="http://i67.tinypic.com/msjh46.png">
<img class="icon" src="http://i67.tinypic.com/1l0kj.png">
<img class="icon" src="http://i66.tinypic.com/211toxv.png">
<img class="icon" src="http://i66.tinypic.com/2uptfrp.png">
<div class="bar">H</div>
<img class="icon" src="http://i66.tinypic.com/8xlz04.png">
<div class="bar">P</div>
<img class="icon" src="https://s7.postimg.cc/56qulyihn/2_2.png">
<img class="icon" src="https://s7.postimg.cc/7cl5g6jaj/3_2.png">
<img class="icon" src="https://s7.postimg.cc/6aayxn86z/4_2.png">
<img class="icon" src="https://s7.postimg.cc/eft0vt45n/5_2.png">
<img class="icon" src="https://s7.postimg.cc/hmnkffwbf/6_1.png">
<img class="icon" src="https://s7.postimg.cc/yzxuuazcb/7_1.png">
<img class="icon" src="https://s7.postimg.cc/yn6go4osb/8_1.png">
<img class="icon" src="https://s7.postimg.cc/k3zbmq3d7/9_1.png">
<img class="icon" src="https://s7.postimg.cc/glnbqj53v/image.png">
<div class="bar">J</div>
<img class="icon" src="https://s7.postimg.cc/tkdnd1lhn/image.png">
<img class="icon" src="https://s7.postimg.cc/afae3aejf/image.png">
<img class="icon" src="https://s7.postimg.cc/dm4xmx6p7/image.png">
<img class="icon" src="https://s7.postimg.cc/t7m96vqd7/image.png">
<div class="bar">T</div>
<img class="icon" src="http://i63.tinypic.com/ygppz.png">
<img class="icon" src="http://i68.tinypic.com/14b15l.png">
<img class="icon" src="http://i67.tinypic.com/2e4ae50.jpg">
<img class="icon" src="http://i68.tinypic.com/24xkgmv.jpg">
<img class="icon" src="http://i63.tinypic.com/spuoop.png">
<img class="icon" src="http://i63.tinypic.com/2iu2vt1.png">
<img class="icon" src="https://s9.postimg.cc/5g3t7lqan/image.png">
<img class="icon" src="https://s7.postimg.cc/jsvnfcr4b/1_1.png">
<img class="icon" src="https://s7.postimg.cc/ma7emmiqj/1_2.png">
<img class="icon" src="https://s7.postimg.cc/rlmb7cciz/1_3.png">
<img class="icon" src="https://s7.postimg.cc/m2g3esnvv/image.png">
<img class="icon" src="https://s7.postimg.cc/r8ux169or/1_5.png">
<img class="icon" src="https://s9.postimg.cc/rseubr873/image.png">
<img class="icon" src="https://s9.postimg.cc/eygsibfb3/image.png">
<img class="icon" src="https://s9.postimg.cc/ujy429yz3/image.png">
<img class="icon" src="https://s9.postimg.cc/fb86oisfz/image.png">
<img class="icon" src="https://s7.postimg.cc/7523xud9n/1_1.png">
<img class="icon" src="http://i64.tinypic.com/se6gia.jpg">
<img class="icon" src="http://i65.tinypic.com/205p9v6.jpg">
<img class="icon" src="http://i67.tinypic.com/21mvzue.jpg">
<img class="icon" src="https://s9.postimg.cc/93motxhf3/image.png">
<img class="icon" src="http://i64.tinypic.com/jac9sj.jpg">
<img class="icon" src="https://s7.postimg.cc/z3b4xeca3/1_1.png">
<img class="icon" src="https://s7.postimg.cc/xbi62i0mz/1_2.png">
<img class="icon" src="http://i68.tinypic.com/ml36zs.jpg">
<img class="icon" src="http://i67.tinypic.com/25uhanm.png">
<img class="icon" src="http://i65.tinypic.com/2a95z6r.png">
<img class="icon" src="https://s7.postimg.cc/xzbealp4r/1_4.png">
<img class="icon" src="http://i64.tinypic.com/2ut6tl5.png">
<img class="icon" src="http://i66.tinypic.com/ilddag.png">
<img class="icon" src="http://i65.tinypic.com/33cnsd3.png">
<img class="icon" src="http://i67.tinypic.com/301kr9y.png">
<img class="icon" src="http://i65.tinypic.com/jl7590.png">
<img class="icon" src="http://i68.tinypic.com/2m7jbl1.png">
<div class="bar">S</div>
<img class="icon" src="https://s9.postimg.cc/uk8rqy23z/1_6.png">
<img class="icon" src="https://s9.postimg.cc/3meup8cbz/image.png">
<img class="icon" src="https://s9.postimg.cc/a03xsgu2n/2_1.png">
<img class="icon" src="https://s9.postimg.cc/63qlwhgsv/2_2.png">
<img class="icon" src="https://s9.postimg.cc/c4oatkb4v/2_3.png">
<img class="icon" src="http://i65.tinypic.com/i57qxs.png">
</div>
<div id="Housing" class="tabcontent">
<img class="icon" src="https://s9.postimg.cc/lv1bjq83z/image.png">
<img class="icon" src="https://s9.postimg.cc/4j0yygme7/Green_Tea_Set.png">
<img class="icon" src="https://s9.postimg.cc/9ufvj6g6n/Layer_0.png">
<img class="icon" src="https://s7.postimg.cc/ln4tm4wx7/2_1.png">
<img class="icon" src="https://s7.postimg.cc/4zdbjn9vf/image.png">
<img class="icon" src="https://s7.postimg.cc/jvbur8szv/image.png">
<img class="icon" src="https://s7.postimg.cc/3x35146hn/image.png">
<img class="icon" src="https://s7.postimg.cc/he03jzoiz/image.png">
<img class="icon" src="https://s7.postimg.cc/yradyurjv/image.png">
<img class="icon" src="https://s7.postimg.cc/mpf04pxqz/image.png">
<img class="icon" src="https://s7.postimg.cc/gbpx1h0kr/image.png">
<img class="icon" src="https://s7.postimg.cc/dhmro164b/image.png">
</div>
<div id="Flowers" class="tabcontent">
<div class="bar">C</div>
<img class="icon" src="http://i67.tinypic.com/11rd380.png">
<img class="icon" src="http://i64.tinypic.com/2u5yu03.png">
<img class="icon" src="http://i64.tinypic.com/2ex4fit.png">
<img class="icon" src="http://i66.tinypic.com/68vwnc.png">
<div class="bar">T</div>
<img class="icon" src="https://s9.postimg.cc/e2anrr9un/image.png">
<img class="icon" src="https://s9.postimg.cc/tnrzbq8y7/image.png">
<img class="icon" src="https://s9.postimg.cc/q461lxdy7/image.png">
<img class="icon" src="https://s9.postimg.cc/tb0l5kdtr/image.png">
<img class="icon" src="https://s9.postimg.cc/yz6vwgagf/image.png">
<img class="icon" src="https://s9.postimg.cc/nzloktwvz/image.png">
<img class="icon" src="https://s9.postimg.cc/4hr14x2j3/image.png">
</div>
<div id="Misc" class="tabcontent">
<img class="icon" src="https://s9.postimg.cc/dyd9bwesv/1_1.png">
<img class="icon" src="https://s9.postimg.cc/77ws2hesf/1_3.png">
<img class="icon" src="https://s9.postimg.cc/4128iv227/1_4.png">
<img class="icon" src="https://s9.postimg.cc/b4a3yhf7j/1_5.png">
<img class="icon" src="https://s9.postimg.cc/id5198ypr/1_2.png">
</div>
<div id="buttons">
<button class="button" id="up">up</button>
<button class="button" id="down">down</button>
<button class="button" id="flip">flip</button>
<button class="button" id="del">del</button>
<button class="button" id="clear">clear</button>
<div><span>Layer: </span><span id="index"></span></div>
</div>
<div id="images">
<img src="https://s7.postimg.cc/ie46kj2kr/Layer_1.png" id="background" draggable="false">
</div>
<p>version: CLOSED BETA</p>
<button onclick="myFunction()" class="button">Click to check when the site was last updated</button>
<p id="demo"></p>
<div class="text">
<h1>Patchnotes & Updates:</h1>
<h2>5/19/18</h2>
<p>
<ul>
<li>Added 1 new item</li>
<li>Added new category "Misc"</li>
</ul>
</p>
</div>
</body>
</html>
By using the drag events, you can figure out how much the user has resized the image, and change the width / height properties accordingly:
let startX, startY;
handleDragStart = function(event) {
startX = event.x;
startY = event.y;
}
handleDrag = function(event) {
if (event.clientX > 0 && event.clientY > 0) {
event.srcElement.style.width = event.srcElement.clientWidth + (event.clientX - startX) + "px";
startX = event.clientX;
event.srcElement.style.height = event.srcElement.clientHeight + (event.clientY - startY) + "px";
startY = event.clientY;
}
}
#container {
display: inline-block;
cursor: nwse-resize;
}
<div id="container" draggable="true" ondragstart="handleDragStart(event)" ondrag="handleDrag(event)">
<img src="https://www.tobook.com/photos/7057_108284_just-a-test_Graz.jpg" />
</div>
Related
I want to make a made this thumbnail scroll bar for woocommerce But it is not working correct and I can't get it to work. This is for woocommerce product gallery so I can't really make changes to the html thats why there are ol
Is it also possible to have te scrollbar scroll to the item that is clicked?
$(document).ready(function() {
var scrollTo = 0;
$('.flex-control-nav').on('click', "img", function() {
var activeItem = $('li.active');
var selectedItem = $(this).parent()
var activeIndex = $('li').index(activeItem);
var selectedIndex = $('li').index(selectedItem);
scrollTo = $('.flex-control-nav li').scrollLeft() -selectedItem.position().left + ($('.flex-control-nav').width() / 2) - (selectedItem.width() / 2);
$('.flex-control-nav').css('transform', 'translateX(' + scrollTo + 'px)');
activeItem.removeClass('active');
selectedItem.addClass('active');
});
});
.flex-control-thumbs li {
display: flex;
overflow-x: visible;
flex: 1 0 40%;
}
ol>li {
padding: 2px;
}
li {
width: 50px;
margin: 0;
cursor: pointer;
height: 100px;
}
img{
background: blue;
}
ol{
list-style: none;
}
.flex-control-thumbs {
display: flex;
flex-wrap: nowrap;
overflow-x: scroll;
margin: 0 50px;
}
ul {
margin: 25px -2px 0;
max-width: 68%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<ol class="flex-control-nav flex-control-thumbs">
<li>
<img src="" alt="img" class="" draggable="false">
</li>
<li>
<img src="" alt="img" class="" draggable="false">
</li>
<li>
<img src="" alt="img" class="" draggable="false">
</li>
<li>
<img src="" alt="img" class="" draggable="false">
</li>
<li>
<img src="" alt="img" class="" draggable="false">
</li>
<li>
<img src="" alt="img" class="" draggable="false">
</li>
</ol>
I am using this tutorial. So I have a navigation bar with image links that hides when the user scrolls down.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_hide_scroll
So this works, though.
However, when I scroll down, the images in the body show above the navigation bar. The text in the body is unaffected, however. So my question is how to stop this from happening. Another thing is how do I make the headline which is the orange "Sample Queen" to show up below the navigation bar, because it is now hidden underneath it. I want the content to start below the navigation bar
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="main.css">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-190px";
}
prevScrollpos = currentScrollPos;
}
</script>
<body style="font-family:Century Gothic;">
<div id="navbar" style="background-color:#f1f1f1;padding:15px;text-align: center;">
<img src="/Index Files/insta.png" id="border" alt="sample Queen" style="width:100px;height:100px;">
<img src="/Index Files/sample.png" id="border" alt="sample Queen" style="width:100px;height:100px;">
<img src="/Index Files/asample.png" id="border" alt="sample Queen" style="width:100px;height:100px;">
<img src="/Index Files/amazon.jpg" id="border" alt="sample Queen" style="width:100px;height:100px;">
<img src="/Index Files/sample.jpg" id="border" alt="sample Queen" style="width:100px;height:100px;">
<img src="/Index Files/sampleos.jpg" id="border" alt="sample Queen" style="width:100px;height:100px;">
</div>
<h1><font color="orange">sample Queen</font>
</h1>
<h2>sample Queen is a small soap businets </h2>
</head>
<p>________</p>
<div class="slideshow-container">
<div class="mySlides1" >
<img src="/sample Queen/fm1.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample Queen/fm2.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample Queen/fm3.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample Queen/fm4.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample Queen/fm5.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample Queen/fm6.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample Queen/fm7.jpg" id="border" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
<p>________</p>
<div class="slideshow-container">
<div class="mySlides2">
<img src="/sample Queen/nd1.jpg" id="border" style="width:100%">
</div>
<div class="mySlides2">
<img src="/sample Queen/nd2.jpg" id="border" style="width:100%">
</div>
<div class="mySlides2">
<img src="/sample Queen/nd3.jpg" id="border" style="width:100%">
</div>
<div class="mySlides2">
<img src="/sample Queen/nd4.jpg" id="border" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>
<p>________</p>
<div class="slideshow-container">
<div class="mySlides3">
<img src="/sample Queen/gel1.png" id="border" style="width:100%">
</div>
<div class="mySlides3">
<img src="/sample Queen/herbal1.png" id="border" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 2)">❮</a>
<a class="next" onclick="plusSlides(1, 2)">❯</a>
</div>
<div class="slideshow-container">
<p>________</p>
<div class="mySlides5">
<img src="/sample Queen/hs.jpg" id="border" style="width:100%">
</div>
</div>
<p>________</p>
<div class="slideshow-container">
<div class="mySlides4">
<img src="/sample Queen/hairmask1.png" id="border" style="width:100%">
</div>
<div class="mySlides4">
<img src="/sample Queen/lip.png" id="border" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 3)">❮</a>
<a class="next" onclick="plusSlides(1, 3)">❯</a>
</div>
<p></p>
<div id="imgGrey" style="background-color:#f1f1f1;padding:15px;text-align: center;">
</div>
</div>
<script>
var slideIndex = [1,1,1,1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides4", "mySlides5"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);
showSlides(1, 3);
showSlides(1, 4);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 2) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
</script>
</body>
</html>
h1 {
text-align: center;
font-family: "Century Gothic";
font-size:50px;
font-weight: bold;
}
p {
color: lightgrey;
text-align: center;
font-family: "Century Gothic";
font-size:40px;
}
h2 {
color: black;
text-align: center;
font-family: "Century Gothic";
font-size:20px;
padding-right: 15px;
padding-left: 15px;
}
/* Now disable grayscale on hover */
#border:hover {
filter: none;
-webkit-filter: grayscale(0);
}
#border {
border-radius: 10px;
text-align: center;
vertical-align: middle;
filter: gray; /* For IE6-9 */
filter: grayscale(1); /* For Microsoft Edge and Firefox 35+ */
-webkit-filter: grayscale(1); /* For Google Chrome, Safari 6+ & Opera 15+ */
}
/* Slideshow container */
.slideshow-container {
max-width: 500px;
position: relative;
margin: auto;
padding-right: 15px;
padding-left: 15px;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 20px;
color: lightgrey;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 10px 10px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 0px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: lightgrey;
border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: orange;
}
#navbar {
background-color: #333; /* Black background color */
position: fixed; /* Make it stick/fixed */
top: 0; /* Stay on top */
width: 100%; /* Full width */
transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
/* Style the navbar links */
#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
Please add the below lines to your CSS.
#navbar{
z-index: 1000;
}
body{
padding-top: 200px;
}
You may control the padding-top value according to the height of your navbar.
I have hundreds of html-based journal articles that contain html snippets like the example below to reference images:
<div class="fig panel" style="display: float; clear: both">
<a id="de8adf66-3683-c412-3cd6-45bc686a4ebe"><!-- named anchor --></a>
<h5 class="label">Innovation attributes</h5>
<div class="caption">
<p class="first" id="e5a7d435-9a86-3b8e-8a85-5835cdfa4a67">
<i>Adams, 2003.</i>
</p>
</div>
<a id="ID0EHD" href="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe-300x235.png">
<div class="long-desc" />
<a target="xrefwindow" href="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png" id="ID0ELD">https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png</a>
<div class="permissions">
<p class="copyright" />
<p class="copyright">
<span class="generated">Copyright</span>
</p>
<div class="license">
<p class="first" id="ID0ESD" />
</div>
</div>
</a>
</div>
On document ready, using JavaScript and CSS3 how can I show the thumbnail image contained in the first 'a' tag, along with the contents of the 'long-desc' and 'permissions' divs beneath... and then when the thumbnail is clicked, open the image in the second (daughter) 'a' tag in a modal that fills the screen (and has a close button)?
Check this out. You can edit styles as you need for your purpose. It is just a sketch.
document.addEventListener('DOMContentLoaded', function() {
let thumbnail = document.querySelector('.thumbnail');
let close = document.querySelector('.modal-close');
let overlay = document.querySelector('.overlay');
thumbnail.addEventListener('click', function(e) {
e.preventDefault();
overlay.classList.add('visible')
});
close.addEventListener('click', function(e) {
e.preventDefault();
overlay.classList.remove('visible')
});
});
.thumbnail-image {
border: 3px solid #BBB;
border-radius: 4px;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.overlay.visible{
display:block;
}
.modal-wrapper {
position: relative;
height: 100%;
width: 100%;
}
.modal-image {
height: calc(100vh / 1.28);
width: 100vh;
margin: auto;
}
.modal-image>img {
max-width: 100%;
}
.modal-close {
position: absolute;
top: 10px;
right: 10px;
padding: 5px;
border: 2px solid #444;
background: #bbb;
cursor: pointer;
}
<div class="fig panel" style="display: float; clear: both">
<a id="de8adf66-3683-c412-3cd6-45bc686a4ebe">
<!-- named anchor -->
</a>
<h5 class="label">Innovation attributes</h5>
<div class="caption">
<p class="first" id="e5a7d435-9a86-3b8e-8a85-5835cdfa4a67">
<i>Adams, 2003.</i>
</p>
</div>
<a id="ID0EHD" href="#" class="thumbnail">
<img class="thumbnail-image" src="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe-300x235.png" alt="show full image" title="show full image" />
</a>
<div class="long-desc">
<div class="permissions">
<p class="copyright">
<span class="generated">Copyright</span>
</p>
<div class="license">
<p class="first" id="ID0ESD" />
</div>
</div>
</div>
<div class="overlay">
<div class="modal-wrapper">
<div class="modal-image">
<img src="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png" alt="full image" title="full image" />
</div>
<div class="modal-close">X</div>
</div>
</div>
</div>
I am trying to create a website with a dynamic menu which changes the active menu element depending on the scrolling. I was looking at other questions similar to this one, and trying different code, but I can not resolve the problem and can not see why it is not working in my site.
I have my code like that right now: https://jsfiddle.net/49rcfg0t/
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('.topmenu a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('.topmenu a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
<link rel="stylesheet" type="text/css" href="portfolio2.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--Menu superior-->
<nav class="header">
<div>
<a href="#anchor1" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-1-icon.png">
<span id="profile">Menu 1</span>
</a>
<a href="#anchor2" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-2-icon.png">
<span id="exp">Menu 2</span>
</a>
<a href="#anchor3" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-3-icon.png">
<span id="hab">Menu 3</span>
</a>
<a href="#anchor4" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-4-icon.png">
<span id="pro">Menu 4</span>
</a>
<a href="#anchor5" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-5-icon.png">
<span id="contact">Menu 5</span>
</a>
</div>
</nav>
<div class="cuerpo">
<span class="anchor" id="anchor1"></span>
<div style="background-color:blue">Area 1</div>
<span class="anchor" id="anchor2"></span>
<div style="background-color:red">Area 2</div>
<span class="anchor" id="anchor3"></span>
<div style="background-color:yellow">Area 3</div>
<span class="anchor" id="anchor4"></span>
<div style="background-color:brown">Area 4</div>
<span class="anchor" id="anchor5"></span>
<div style="background-color:green">Area 5</div>
</div>
I have the following problems:
When I scroll manually the elements are not activated.
When I use the links the elements are activated but they do not
answer to the anchor petition.
I also I would like, when I activate one of the elements of the
menu, to change the image with another one. For example, change the
first icon with this one:
Thank you in advance, this problem is driving me crazy!
You may simplify your code:
use mousemove/mouseenter instead of scroll event.
The snippet:
$(document).ready(function () {
$('a[href^="#"].topmenu').on('click', function (e) {
$('a.topmenu').removeClass('active');
$(this).addClass('active');
});
});
$(document).on('mousemove mouseenter', 'div.cuerpo div', function(event) {
$('a.topmenu').removeClass('active');
$('a[href="#' + this.previousElementSibling.id + '"].topmenu').addClass('active');
});
$(document).on('keyup', function (e) {
var charCode = (e.which) ? e.which : e.keyCode;
if ((charCode >= 49 && charCode <= 53) || (charCode >= 97 && charCode <= 101)) {
$('a[href="#anchor' + String.fromCharCode(charCode) + '"].topmenu').trigger('click');
$(document).scrollTop( $('#anchor' + String.fromCharCode(charCode)).offset().top);
}
});
body{
margin:0;
font-family:'Open Sans', sans-serif;
}
div{
overflow: auto;
}
/*Menu de cabecera*/
.header{
margin:auto;
background-color: white;
text-align: center;
position: fixed;
width:100%;
padding-top:7px;
padding-bottom: 7px;
z-index:5;
border-bottom:solid 2px #5882FA;
}
.header a{
text-decoration:none;
}
.topmenu img{
width:50px;
height:50px;
border-radius:90px;
padding: 2px 2px 2px 2px;
margin:2px 5px 17px 5px;
}
.topmenu img:active{
transform: translateY(4px);
}
.topmenu img:hover{
box-shadow:0px 2px 1px #5882FA;
}
/*Tooltips*/
.topmenu span{
visibility:hidden;
width: 120px;
color: white;
background-color: black;
text-align: center;
border-radius: 6px;
padding: 2px 0;
margin:1px;
font-variant: small-caps;
text-decoration:none;
/* Position the tooltip */
position: absolute;
top: 70%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition-property: opacity;
transition-duration: 2s;
}
.topmenu:hover span{
visibility:visible;
opacity: 1;
}
.active{
background-color:black;
}
.cuerpo{
position: absolute;
width: 100%;
margin-top:90px;
}
.cuerpo div{
height: 590px;
margin: 5px 15%;
}
.anchor{
display: block;
height: 90px;
margin-top: -90px;
visibility: hidden;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<nav class="header">
<div>
<a href="#anchor1" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-1-icon.png">
<span id="profile">Menu 1</span>
</a>
<a href="#anchor2" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-2-icon.png">
<span id="exp">Menu 2</span>
</a>
<a href="#anchor3" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-3-icon.png">
<span id="hab">Menu 3</span>
</a>
<a href="#anchor4" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-4-icon.png">
<span id="pro">Menu 4</span>
</a>
<a href="#anchor5" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-5-icon.png">
<span id="contact">Menu 5</span>
</a>
</div>
</nav>
<div class="cuerpo">
<span class="anchor" id="anchor1"></span>
<div style="background-color:blue">Area 1</div>
<span class="anchor" id="anchor2"></span>
<div style="background-color:red">Area 2</div>
<span class="anchor" id="anchor3"></span>
<div style="background-color:yellow">Area 3</div>
<span class="anchor" id="anchor4"></span>
<div style="background-color:brown">Area 4</div>
<span class="anchor" id="anchor5"></span>
<div style="background-color:green">Area 5</div>
</div>
I want to resize the image to bigger than the original size when the I click on the images. link http://plnkr.co/edit/JBTE1RAEZburUTRkVrLE?p=preview. This sample when click on image, it is pop up but the same the original size. How can I set it bigger.
Below the Code:
// Code goes here
function view(src)
{
var viewer = document.getElementById("viewer");
viewer.innerHTML ='<img src="' + src + '" id="img"/>';
var img = document.getElementById("img");
var iw=0, ih=0;
var dw=0, dh=0;
img.onload=function(){
document.getElementById("ov").style.display="block";
viewer.style.display="block";
document.getElementById("nav").style.display="block";
iw = viewer.offsetWidth;
ih = viewer.offsetHeight;
dw = window.innerWidth;
dh = window.innerHeight;
viewer.style.top = parseInt(dh/2-ih/2) + "px";
viewer.style.left = parseInt(dw/2-iw/2) + "px";
};
}
function hide2()
{
document.getElementById("viewer").style.display="none";
document.getElementById("ov").style.display="none";
document.getElementById("nav").style.display="none";
}
/* Styles go here */
ul.image-list{
padding:0;
margin: 0;
list-style: none;
}
ul.image-list li{
display: inline-block;
}
ul.image-list li img{
width: 190px;
min-width: 70px;
transition: all ease 0.4s;
}
ul.image-list li img:hover{
cursor: pointer;
opacity: 0.5;
border: 1px solid #000;
}
.pup
{
width: 100%; height: 100%;
background: #666;
opacity: 0.7;
position: fixed;
top: 0px; left: 0px;
z-index: 111;
display: none;
}
.viewer{
background: #666; padding: 12px;
position: fixed; z-index: 222;
text-align: center;
display: none;
}
#nav{
display: none;
z-index: 333;
color: #FFF;
position: relative;
cursor: pointer; text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid gallery">
<div class="row-fluid">
<div class="col-sm-12">
<h3 class="text-info">Photo Gallery</h3>
</div>
</div>
<div class="row-fluid">
<div class="col-sm-12">
<ul class="image-list">
<li><img src="http://lorempixel.com/400/200/animals/6" alt="Photo number 1" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
<li><img src="http://lorempixel.com/400/200/animals/2" alt="Photo number 2" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
<li><img src="http://lorempixel.com/400/200/animals/3" alt="Photo number 3" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
<li><img src="http://lorempixel.com/400/200/animals/4" alt="Photo number 4" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
</ul>
<div class="slider-controls" id="nav">
<span class="previous glyphicon glyphicon-arrow-left" id="prev" onclick="prev()"></span>
<span class="next glyphicon glyphicon-arrow-right" id="next" onclick="next()"></span>
</div>
</div>
</div>
</div>
<div class="pup" id="ov" onclick="hide2()">
</div>
<div class="viewer"id="viewer">
</div>
</body>
</html>
By assigning the desired size of images to the div .viewer like below .viewer img{width:600px} you are forcing images to resize to the to fit the size wanted. below the working snippet.
// Code goes here
function view(src)
{
var viewer = document.getElementById("viewer");
viewer.innerHTML ='<img src="' + src + '" id="img"/>';
var img = document.getElementById("img");
var iw=0, ih=0;
var dw=0, dh=0;
img.onload=function(){
document.getElementById("ov").style.display="block";
viewer.style.display="block";
document.getElementById("nav").style.display="block";
iw = viewer.offsetWidth;
ih = viewer.offsetHeight;
dw = window.innerWidth;
dh = window.innerHeight;
viewer.style.top = parseInt(dh/2-ih/2) + "px";
viewer.style.left = parseInt(dw/2-iw/2) + "px";
};
}
function hide2()
{
document.getElementById("viewer").style.display="none";
document.getElementById("ov").style.display="none";
document.getElementById("nav").style.display="none";
}
/* Styles go here */
ul.image-list{
padding:0;
margin: 0;
list-style: none;
}
ul.image-list li{
display: inline-block;
}
ul.image-list li img{
width: 190px;
min-width: 70px;
transition: all ease 0.4s;
}
ul.image-list li img:hover{
cursor: pointer;
opacity: 0.5;
border: 1px solid #000;
}
.pup
{
width: 100%; height: 100%;
background: #666;
opacity: 0.7;
position: fixed;
top: 0px; left: 0px;
z-index: 111;
display: none;
}
.viewer{
background: #666; padding: 12px;
position: fixed; z-index: 222;
text-align: center;
display: none;
}
#nav{
display: none;
z-index: 333;
color: #FFF;
position: relative;
cursor: pointer; text-align: center;
}
.viewer img{
width:600px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid gallery">
<div class="row-fluid">
<div class="col-sm-12">
<h3 class="text-info">Photo Gallery</h3>
</div>
</div>
<div class="row-fluid">
<div class="col-sm-12">
<ul class="image-list">
<li><img src="http://lorempixel.com/400/200/animals/6" alt="Photo number 1" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
<li><img src="http://lorempixel.com/400/200/animals/2" alt="Photo number 2" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
<li><img src="http://lorempixel.com/400/200/animals/3" alt="Photo number 3" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
<li><img src="http://lorempixel.com/400/200/animals/4" alt="Photo number 4" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
</ul>
<div class="slider-controls" id="nav">
<span class="previous glyphicon glyphicon-arrow-left" id="prev" onclick="prev()"></span>
<span class="next glyphicon glyphicon-arrow-right" id="next" onclick="next()"></span>
</div>
</div>
</div>
</div>
<div class="pup" id="ov" onclick="hide2()">
</div>
<div class="viewer"id="viewer">
</div>
</body>
</html>
I also suggest adding the following code so you can have it responsive on mobile for better surfing:
#media screen and (max-width: 600px) {
.viewer{
width:100%;
}
.viewer img{
width:100%;
}
}