I am using the code prepared by #Cybernetic which can be found here (Active Search Bar for images). The code is mainly for searching for images through a search box using jquery. #Cybernetic did an outstanding job with his code and I couldn't post a comment there because I don't have enough points. I wish he can see this posting and answer my question.
What I wanted to ask about is whether we can set the code to hide images when we run it. Because I am using this code with hundreds of relatively large images! So, running it will load all these images at once which is causing the browser to slow down.
So, again, how can we set it to show no images until we start typing in the search box.
Thanks!
Update
<h2>Search for Image</h2>
<style>
.imgContainer{
float:left;
}
img {
width: 1220px !important;
border: 3px;
}
body {
background: white !important;
}
.imgContainer {
position: relative;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.imgContainer:hover .overlay {
width: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 40px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
img{
border: 5px solid #33cc33;
}
</style>
<!-- <button type="mybutton">Click Me!</button> -->
<input type="text" id="myinput" name="search" placeholder="search..." style="width:600px; height: 40px; border-radius: 4px; font-size: 18px;"><br><br>
<center>
<div id="images">
<img src="C:\dir..............\image-1.jpg" width=1130></a>
<img src="C:\dir..............\image-2.jpg" width=1130></a>
<img src="C:\dir..............\image-3.jpg" width=1130></a>
<img src="C:\dir..............\image-4.jpg" width=1130></a>
<img src="C:\dir..............\image-5.jpg" width=1130></a>
</div>
<script>
$("#myinput").keyup(function() {
var val = $.trim(this.value);
if (val === "")
$('img').show();
else {
$('img').hide();
val = val.split(" ").join("\\ ");
$("img[alt*=" + val + " i]").show();
}
});
<!-- $("#mybutton").on('click', function() { -->
<!-- var myinput = $('#mytextbox'); -->
<!-- var val = $.trim(myinput.value); -->
<!-- if (val === "") -->
<!-- $('img').show(); -->
<!-- else { -->
<!-- $('img').hide(); -->
<!-- $("img[alt*=" + val + "]").show(); -->
<!-- } -->
<!-- }); -->
</script>
CHANGES:
added regExp check for special chars.
edited result's style.
set images display to none to display only on search.
added hover action to images.
add span to show no result found if search didn't met any images.
$(document).ready(function() {
$("#mybutton").on('click', function() {
var mysrchbox = $("#myinput").val();
mysrchbox = mysrchbox.replace(/[^a-zA-Z ]/g, "")
var val = $.trim(mysrchbox);
if (val === "") {
$('#none').show();
$('img').hide();
} else {
val = val.split(" ").join("\\ ");
if ( $("img[alt*=" + val + " i]").attr('alt') === undefined ) {
$('#none').show();
$('img').hide();
} else {
$('#none').hide();
$('img').hide();
$("img[alt*=" + val + " i]").show();
$("img[alt*=" + val + " i]").css('display', 'inline-flex');
}
}
});
});
body {
background: white !important;
}
#images {
position: relative;
display: flex;
flex-wrap: wrap;
align-content: center;
align-items: center;
justify-content: center;
flex-basis: 33.3%;
width: 100%;
margin: auto;
text-align: center;
}
#images img {
background: white;
position: relative;
margin: auto;
display: none;
object-fit: contain;
height: max-content;
padding: 0.5rem;
text-align: center;
margin: auto;
}
#images img:hover {
opacity: 0.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Search for Image</h2>
<input type="button" id="mybutton" value="Search!">
<input type="text" id="myinput" name="search" placeholder="search..." style="width:50; height: 20px; border-radius: 4px; font-size: 18px;"><br><br>
<div id="images"><span id="none" hidden="true">no result related for your search.</span>
<img src="https://p.kindpng.com/picc/s/108-1082674_bitcoin-png-bitcoin-clipart-transparent-png.png" alt="eBitcoin" width=130>
<img src="https://png.pngitem.com/pimgs/s/692-6924771_blockchain-cryptocurrency-wallet-ethereum-dogecoin-hd-png-download.png" alt="Ethereum" width=130>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ripple-Logo.png" alt="Ripple" width=130>
<img src="https://i.redd.it/tsmzy49d4adz.jpg" alt="eBitcoin Cash" width=130>
<img src="https://freepikpsd.com/wp-content/uploads/2019/10/cardano-logo-png-5-Transparent-Images.jpg" alt="eCardano" width=130>
<img src="https://pbs.twimg.com/media/DJkf7M4VYAAgt8V.png" alt="NEM" width=130>
<img src="https://bitkee.com/icons/litecoin-logo.png" alt="LiteCoin" width=130>
<img src="http://bittrust.s3.amazonaws.com/1486429998.png" alt="Stellar Lumens" width=130>
</div>
Related
So, really I am a beginner on scripting and I did multiple hours research to find a solution but couldn't figure it out.
I have a "image search jquery script. It runs normal when I have everything embedded in one single html code. Yet, things started to get difficult (slow browser, sluggish browser response, slowing down the computer...) when the number of images links reached around 2000!
The thing that I thought would solve the issue is to split my html code into separate pieces (html, js, css...).
And that is where I got stuck!
Kindly, I need your help on how to save these href urls or links in a separate file then call them individually from the html.
Here is what I did (again, I am not an expert):
index.html
<!DOCTYPE html>
<meta charset="UTF-8">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h2>Search for Image</h2>
<input type="button" id="mybutton" value="Search!">
<input type="text" id="myinput" name="search" placeholder="search..." style="width:50; height: 20px; border-radius: 4px; font-size: 18px;"><br><br>
<script src="javascripts/main.js"></script>
</body>
main.js
$(document).ready(function() {
$("#mybutton").on('click', function() {
var mysrchbox = $("#myinput").val();
mysrchbox = mysrchbox.replace(/[^a-zA-Z ]/g, "")
var val = $.trim(mysrchbox);
if (val === "") {
$('#none').show();
$('img').hide();
} else {
val = val.split(" ").join("\\ ");
if ( $("img[alt*=" + val + " i]").attr('alt') === undefined ) {
$('#none').show();
$('img').hide();
} else {
$('#none').hide();
$('img').hide();
$("img[alt*=" + val + " i]").show();
$("img[alt*=" + val + " i]").css('display', 'inline-flex');
}
}
});
});
styling.css
body {
background: white !important;
}
#images {
position: relative;
display: flex;
flex-wrap: wrap;
align-content: center;
align-items: center;
justify-content: center;
flex-basis: 33.3%;
width: 100%;
margin: auto;
text-align: center;
}
#images img {
background: white;
position: relative;
margin: auto;
display: none;
object-fit: contain;
height: max-content;
padding: 0.5rem;
text-align: center;
margin: auto;
}
#images img:hover {
opacity: 0.5;
}
div_section.html
<div id="images"><span id="none" hidden="true">no result related for your search.</span>
<img src="C:\Users\user\dir-to-image\bitcoin-clipart-transparent-png.png" alt="eBitcoin" width=130>
<img src="C:\Users\user\dir-to-image\cryptocurrency-wallet-ethereum-dogecoin-hd-png-download.png" alt="Ethereum" width=130>
<img src="C:\Users\user\dir-to-image\/Ripple-Logo.png" alt="Ripple" width=130>
<img src="C:\Users\user\dir-to-image\/tsmzy49d4adz.jpg" alt="eBitcoin Cash" width=130>
<img src="C:\Users\user\dir-to-image\cardano-logo-png-5-Transparent-Images.jpg" alt="eCardano" width=130>
<img src="C:\Users\user\dir-to-image\DJkf7M4VYAAgt8V.png" alt="NEM" width=130>
<img src="C:\Users\user\dir-to-image\litecoin-logo.png" alt="LiteCoin" width=130>
<img src="C:\Users\user\dir-to-image\1486429998.png" alt="Stellar Lumens" width=130>
</div>
Add loading="lazy" to all <img> tags
If possible, download the images, compress them with an online tool, save them in your project folder and change the src attribute to target the local images
If possible remove the jQuery and replace your code with the following
const button = document.querySelector('#mybutton')
const imgs = document.querySelectorAll('img')
const none = document.querySelector('#none')
imgs.forEach(img => img.style.display = 'none')
button.addEventListener('click', e => {
const mysrchbox = document.querySelector('#myinput').value
const val = mysrchbox.replace(/[^a-zA-Z ]/g, '').trim().toLowerCase()
imgs.forEach(img => img.setAttribute('hidden', 'true'))
if (val === '') {
imgs.forEach(img => img.style.display = 'none')
none.removeAttribute('hidden')
} else {
let showImgs = []
imgs.forEach(img => {
if (img.getAttribute('alt').toLowerCase().startsWith(val)) showImgs.push(img)
})
if (showImgs.length !== 0) {
none.setAttribute('hidden', 'true')
imgs.forEach(img => img.style.display = 'none')
showImgs.forEach(img => img.style.display = 'inline-flex')
} else {
imgs.forEach(img => img.style.display = 'none')
none.removeAttribute('hidden')
}
}
})
body {
background: white !important;
}
#images {
position: relative;
display: flex;
flex-wrap: wrap;
align-content: center;
align-items: center;
justify-content: center;
flex-basis: 33.3%;
width: 100%;
margin: auto;
text-align: center;
}
#images img {
background: white;
position: relative;
margin: auto;
display: none;
object-fit: contain;
height: max-content;
padding: 0.5rem;
text-align: center;
margin: auto;
}
#images img:hover {
opacity: 0.5
}
<!DOCTYPE html>
<meta charset="UTF-8">
<head>
<script src="javascripts/main.js" defer></script>
</head>
<body>
<h2>Search for Image</h2>
<input type="button" id="mybutton" value="Search!">
<input type="text" id="myinput" name="search" placeholder="search..."
style="width:50; height: 20px; border-radius: 4px; font-size: 18px;"><br><br>
<div id="images"><span id="none" hidden="true">no result related for your search.</span>
<img src="https://p.kindpng.com/picc/s/108-1082674_bitcoin-png-bitcoin-clipart-transparent-png.png" loading="lazy" alt="eBitcoin" width=130>
<img src="https://png.pngitem.com/pimgs/s/692-6924771_blockchain-cryptocurrency-wallet-ethereum-dogecoin-hd-png-download.png" loading="lazy" alt="Ethereum" width=130>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ripple-Logo.png" loading="lazy" alt="Ripple" width=130>
<img src="https://i.redd.it/tsmzy49d4adz.jpg" loading="lazy" alt="eBitcoin Cash" width=130>
<img src="https://freepikpsd.com/wp-content/uploads/2019/10/cardano-logo-png-5-Transparent-Images.jpg" loading="lazy" alt="eCardano" width=130>
<img src="https://pbs.twimg.com/media/DJkf7M4VYAAgt8V.png" loading="lazy" alt="NEM" width=130>
<img src="https://bitkee.com/icons/litecoin-logo.png" loading="lazy" alt="LiteCoin" width=130>
<img src="http://bittrust.s3.amazonaws.com/1486429998.png" loading="lazy" alt="Stellar Lumens" width=130>
</div>
</body>
I have multiple elements with the same class name and want them to perform the same javascript function but output their unique "inner.Text" specific
to the element i clicked. Right Now i know i need an [index] and a loop
but I just don't know how to implement that at the moment since im a novice in javascript.
spent 3 hours trying to figure it out
const myButton = document.querySelectorAll('.clipboard-icon');
const myInp = document.querySelectorAll('.snippetcode');
myButton.forEach(ree =>
ree.addEventListener('click', copyElementText));
function copyElementText(id) {
var text = myInp.innerText;
var elem = document.createElement("textarea");
document.body.appendChild(elem);
elem.value = text;
elem.select();
document.execCommand("copy");
document.body.removeChild(elem);
console.log('clicked');
}
console.log(myButton);
console.log(myInp);
/*everything works fine if the script was changed to affect only ONE class name but I cant figure out how to make them work for more than one
*/
.snippet1 {
border: solid rgb(55, 63, 184) 3px;
}
.snippet_holder {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
padding: 0 3.5rem;
margin: 0 0 1rem 0;
position: relative;
}
.buttons {
width: 170px;
height: 40px;
border: 0;
padding: 0;
font-size: 1rem;
color: #fff;
border-radius: 10px;
}
.snippet_holder:hover .clipboard-icon {
display: block;
position: absolute;
top: 15px;
right: 65px;
background: rgb(51, 153, 136);
margin: 0;
width: 30px;
padding: 0;
height: 30px;
}
.clipboard-icon {
display: none;
}
.clipboard-icon img {
width: inherit;
height: inherit;
position: relative;
}
.clipboard-icon pre {
display: none;
}
.snippetcode1 {
display: none;
}
.button1 {
-webkit-animation: rainbow 6.5s ease infinite;
animation: rainbow 6.5s ease infinite;
background-image: linear-gradient(124deg, #ff470f, #ff3860, #b86bff, #3273dc);
background-size: 800% 800%;
}
#keyframes rainbow {
0% {
background-position: 1% 80%;
}
50% {
background-position: 99% 20%;
}
100% {
background-position: 1% 80%;
}
0% {
background-position: 1% 80%;
}
50% {
background-position: 99% 20%;
}
100% {
background-position: 1% 80%;
}
}
main {
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<html>
<body>
<main>
<div class="snippet_holder snippet_holder1">
<div class="clipboard-icon">
<pre>
<code class= "snippetcode">
1st class text copieddddd
</code>
</pre>
<img src="https://www.shareicon.net/data/128x128/2016/04/27/756265_clipboard_512x512.png">
</div>
<button type="button" class="buttons button1">button</button>
</div>
<div class="snippet_holder snippet_holder1">
<div class="clipboard-icon">
<pre>
<code class= "snippetcode">
22222nddd class text copieddddd
</code>
</pre>
<img src="https://www.shareicon.net/data/128x128/2016/04/27/756265_clipboard_512x512.png">
</div>
<button type="button" class="buttons button1">button</button>
</div>
<div class="snippet_holder snippet_holder1">
<div class="clipboard-icon">
<pre>
<code class= "snippetcode">
3rd class text copieddddd
</code>
</pre>
<img src="https://www.shareicon.net/data/128x128/2016/04/27/756265_clipboard_512x512.png">
</div>
<button type="button" class="buttons button1">button</button>
</div>
<div class="snippet_holder snippet_holder1">
<div class="clipboard-icon">
<pre>
<code class= "snippetcode">
4thhhhhhhhclass text copieddddd
</code>
</pre>
<img src="https://www.shareicon.net/data/128x128/2016/04/27/756265_clipboard_512x512.png">
</div>
<button type="button" class="buttons button1">button</button>
</div>
</main>
</body>
</html>
You've to query the .snippetcode related to the button pressed, so, it makes no sense to query the nodeList myInp, you can access to the right element using the currentTarget provided in the event object...
function copyElementText(event) {
var text = event.currentTarget.querySelector('.snippetcode').innerText;
var elem = document.createElement("textarea");
document.body.appendChild(elem);
elem.value = text;
elem.select();
document.execCommand("copy");
document.body.removeChild(elem);
console.log('clicked');
}
I have three options and if you click on an option a checkmark shows over it, representing the option as selected. I have a limit of 1 set. As of now, the image/current checkmark input needs to be clicked again to remove it, rather than simply being able to click on another option and removing it.
I tried to setup a snippet that replicates what I actually have, but the checkmark isn't showing for some reason. Regardless, I am attempting to incorporate a solution I saw from another post with this: $('').not(this).prop('checked', false);.
I am not sure how to add it to my code to get it to work though. I have tried:
$(this).parents('.product-wrap:first').find('.checkmark-img').fadeBoolToggle(this.checked).not(this).prop('checked', false);
and
$(this).parents('.product-wrap:first').find('.checkmark-img').not(this).prop('checked', false).fadeBoolToggle(this.checked);
Does anyone know how I can get the checkmark inputs to switch when clicking another checkmark input option?
This is the block of code that it is associated with.
$('.calendar-check').on('change', function () {
// $('').not(this).prop('checked', false);
if (!this.checked || $('.calendar-check:checked').length <= limitCal) {
$(this).parents('.product-wrap:first').find('.checkmark-img').fadeBoolToggle(this.checked);
//For checkmark
jQuery.fn.fadeBoolToggle = function (bool) {
return bool ? this.fadeIn(400) : this.fadeOut(400);
}
$('.calendar-check').on('change', function () {
// $('input.example').not(this).prop('checked', false);
if (!this.checked || $('.calendar-check:checked').length <= limitCal) {
$(this).parents('.product-wrap:first').find('.checkmark-img').fadeBoolToggle(this.checked);
}
});
.product-check, .calendar-check {
display: none;
}
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
.product-wrap {
width: 100%;
position: relative;
display: block;
}
.checkmark-img {
display: none;
width: 40%;
height: auto;
z-index: 1;
cursor: pointer;
}
.package-check-toggle {
position: relative;
height: 100%;
width: 100%;
display: block;
}
#calendar-box-wrap, #tp-package-wrap {
margin: 50px 0;
}
.calendar-box, .tp-package {
display: inline-block;
vertical-align: top;
width: 25%;
margin: 0 4%;
position: relative;
}
.option-input {
border: 1px solid #CDCDCD;
padding: 10px;
color: #303030;
font-size: 1.2em;
}
/*- Calendar -*/
.calendar-selection-img {
width: 70%;
height: auto;
cursor: pointer;
margin: 0 auto;
display: block;
}
/*- Calendar Preview Section -*/
#pg-preview-input-section, #pg-preview-img-section {
display: inline-block;
vertical-align: top;
}
#pg-preview-input-section {
width: 45%;
}
#pg-preview-img-section {
width: 55%;
}
#calender-preview-choice {
margin-top: 50px;
font-weight: bold;
}
.pg-preview-img {
width: 35%;
height: auto;
margin-left: 15%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="calendar-box">
<div class="product-wrap">
<label for="cal-2year" class="package-check-toggle">
<h4 class="calendar-box-title">A</h4>
<img src="http://cdnl.accucutcraft.com/media/catalog/product/cache/2/image/9df78eab33525d08d6e5fb8d27136e95/c/v/cv106.jpg"
alt="A" class="calendar-selection-img">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/2783-200.png" class="checkmark-img total-center">
</label>
<input type="checkbox" class="calendar-check">
</div>
</div>
<div class="calendar-box">
<div class="product-wrap">
<label for="cal-whiteboard" class="package-check-toggle">
<h4 class="calendar-box-title">B</h4>
<img src="http://cdnl.accucutcraft.com/media/catalog/product/cache/2/image/9df78eab33525d08d6e5fb8d27136e95/c/v/cv106.jpg"
alt="B" class="calendar-selection-img">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/2783-200.png" class="checkmark-img total-center">
</label>
<input type="checkbox" class="calendar-check">
</div>
</div>
<div class="calendar-box">
<div class="product-wrap">
<label for="cal-glance" class="package-check-toggle">
<h4 class="calendar-box-title">C</h4>
<img src="http://cdnl.accucutcraft.com/media/catalog/product/cache/2/image/9df78eab33525d08d6e5fb8d27136e95/c/v/cv106.jpg"
alt="C" class="calendar-selection-img">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/2783-200.png" class="checkmark-img total-center">
</label>
<input type="checkbox" class="calendar-check">
</div>
</div>
If you are trying to have only one checkbox selected you need to add a name (if you want to use radio this works else you need jQuery for checkbox ) that is the same in each input field:
<div>
<input name="checkMark" type="checkbox" />
</div>
<div>
<input name="checkMark" type="checkbox" />
</div>
<div>
<input name="checkMark" type="checkbox" />
</div>
If you are using this code to have only one checkbox checked, then delete this code:
$('.calendar-check').on('change', function () {
// $('').not(this).prop('checked', false);
if (!this.checked || $('.calendar-check:checked').length <= limitCal) {
$(this).parents('.product-wrap:first').find('.checkmark-img').fadeBoolToggle(this.checked);
}
});
and add this one:
$('input.calendar-check').on('click', function(){
$('input.calendar-check').not(this).attr('checked', false);
})
https://jsfiddle.net/e854ao30/2/
Basically you're saying whichever one you click, the rest of the inputs will be checked false.
I have different elements and want to connect them with lines after clicking on them. The problem is that each element can be connected with several other elements, so there are more than one possibilities to combine each element, which means I have to click all of the elements I want to be connected to show the lines between.
For example: when you click #button1 and #button2 a line appears between them. When you click now #button3 a line between #button2 and #button3 would show up in addition to the first line. (The lines are images which should be shown after clicking the buttons).
I couldn't find any solutions where you can trigger an event after clicking two or more elements. Hope somebody can help me!
#button1 {
border: #000000 solid;
width: 100px;
float: left;
}
#button2 {
border: #000000 solid;
width: 100px;
margin-left: 300px;
}
#button3 {
border: #000000 solid;
width: 100px;
margin-top: 175px;
margin-left: 0px;
float: left;
}
#button4 {
border: #000000 solid;
width: 100px;
margin-top: 175px;
margin-left: 300px;
}
#line12 {
margin-left: 55px;
margin-top: 17.5px;
position: absolute;
visibility: hidden;
}
#line24 {
margin-left: 350px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
#line14 {
margin-left: 50px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
#line13 {
margin-left: 50px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
#line32 {
margin-left: 50px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
<div id="line12">
<img src="img/line12.png">
</div>
<div id="line14">
<img src="img/line14.png">
</div>
<div id="line24">
<img src="img/line24.png">
</div>
<div id="line13">
<img src="img/line13.png">
</div>
<div id="line32">
<img src="img/line32.png">
</div>
<div id="button1">show lines 1</div>
<div id="button2">show lines 2</div>
<div id="button3">show lines 3</div>
<div id="button4">show lines 4</div>
Try something like this. Remember that you should incluse your js
var firstEl = -1;
$("#button1").on("click",function(){
if (firstEl == -1){
firstEl = 1;
} else {
$("line" + firstEl + "1").show();
console.log("show " + "line" + firstEl + "1");
firstEl = -1;
}
});
$("#button2").on("click",function(){
if (firstEl == -1){
firstEl = 2;
} else {
$("line" + firstEl + "2").show();
console.log("show " + "line" + firstEl + "2");
firstEl = -1;
}
});
$("#button3").on("click",function(){
if (firstEl == -1){
firstEl = 3;
} else {
$("line" + firstEl + "3").show();
console.log("show " + "line" + firstEl + "3");
firstEl = -1;
}
});
$("#button4").on("click",function(){
if (firstEl == -1){
firstEl = 4;
} else {
$("line" + firstEl + "4").show();
console.log("show " + "line" + firstEl + "4");
firstEl = -1;
}
});
#button1{
border:#000000 solid;
width:100px;
float:left;
}
#button2{
border:#000000 solid;
width:100px;
margin-left:300px;}
#button3{
border:#000000 solid;
width:100px;
margin-top:175px;
margin-left:0px;
float:left;}
#button4{
border:#000000 solid;
width:100px;
margin-top:175px;
margin-left:300px;
}
#line12 {
margin-left:55px;
margin-top:17.5px;
position:absolute;
visibility:hidden;
}
#line24 {
margin-left: 350px;
margin-top:33px;
position:absolute;
visibility:hidden;
}
#line14 {
margin-left: 50px;
margin-top:33px;
position:absolute;
visibility:hidden;
}
#line13 {
margin-left: 50px;
margin-top:33px;
position:absolute;
visibility:hidden;
}
#line32 {
margin-left: 50px;
margin-top:33px;
position:absolute;
visibility:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="line12"><img src="img/line12.png"></div>
<div id="line14"><img src="img/line14.png"></div>
<div id="line24"><img src="img/line24.png"></div>
<div id="line13"><img src="img/line13.png"></div>
<div id="line32"><img src="img/line32.png"></div>
<div id="button1">show lines 1</div>
<div id="button2">show lines 2</div>
<div id="button3">show lines 3</div>
<div id="button4">show lines 4</div>
Try using following code :
HTML :
<div id="line12" class="line-image-container">
<img src="img/line12.png">
</div>
<div id="line14" class="line-image-container">
<img src="img/line14.png">
</div>
<div id="line24" class="line-image-container">
<img src="img/line24.png">
</div>
<div id="line13" class="line-image-container">
<img src="img/line13.png">
</div>
<div id="line32" class="line-image-container">
<img src="img/line32.png">
</div>
<div id="button1" data-line-no="1">show lines 1</div>
<div id="button2" data-line-no="2">show lines 2</div>
<div id="button3" data-line-no="3">show lines 3</div>
<div id="button4" data-line-no="4">show lines 4</div>
jQuery :
var i=0;
var line_obj = array();
$('button').on('click', function() {
$('.line-image-container').css('visibility', 'hidden');
if(i<=2) {
var line = $(this).attr('data-line-no');
line_obj.push(line);
i++;
}
if(i == 2) {
$('#line'+line_obj[0]+line_obj[1]).css('visibility', 'visible');
i = 0;
}
});
It would be better if you add your code in jsfiddle.
You could try something like this:
$(function() {
var buttonClicks = [];
$(".test").click(function(e) {
var btnId = $(e.target).attr('id');
// make sure the same button wasnt clicked twice
if (buttonClicks[0] === btnId)
return;
buttonClicks.push(btnId);
if (buttonClicks.length === 2) { // 2 buttons clicked
// put your line drawing logic here
console.log("Show line between " + buttonClicks[0] + " and " + buttonClicks[1]);
buttonClicks = []; // reset button clicks
}
});
});
.test {
cursor: pointer;
}
#button1 {
border: #000000 solid;
width: 100px;
float: left;
}
#button2 {
border: #000000 solid;
width: 100px;
margin-left: 300px;
}
#button3 {
border: #000000 solid;
width: 100px;
margin-top: 175px;
margin-left: 0px;
float: left;
}
#button4 {
border: #000000 solid;
width: 100px;
margin-top: 175px;
margin-left: 300px;
}
#line12 {
margin-left: 55px;
margin-top: 17.5px;
position: absolute;
visibility: hidden;
}
#line24 {
margin-left: 350px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
#line14 {
margin-left: 50px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
#line13 {
margin-left: 50px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
#line32 {
margin-left: 50px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="line12">
<img src="img/line12.png">
</div>
<div id="line14">
<img src="img/line14.png">
</div>
<div id="line24">
<img src="img/line24.png">
</div>
<div id="line13">
<img src="img/line13.png">
</div>
<div id="line32">
<img src="img/line32.png">
</div>
<div class="test" id="button1">show lines 1</div>
<div class="test" id="button2">show lines 2</div>
<div class="test" id="button3">show lines 3</div>
<div class="test" id="button4">show lines 4</div>
Here is the JSfiddle http://jsfiddle.net/zfxrxzLg/ Look at this for full code
Why does the last picture collapses underneath, and isn't hidden as it should be? I'm trying to create a slider. I'm thinking that might be the issue why the slider isn't working.
HTML
<div class="gallery-wrap">
<div class="gallery clearfix">
<div class="gallery__item">
<img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
</div>
<div class="gallery__item">
<img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
</div>
<div class="gallery__item">
<img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
</div>
<div class="gallery__item">
<img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
</div>
<div class="gallery__item">
<img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
</div>
CSS
.gallery-wrap {
margin: 0 auto;
overflow: hidden;
width: 432px;
}
.gallery {
position: relative;
left: 0;
top: 0;
}
.gallery__item {
float: left;
list-style: none;
margin-right: 20px;
}
.gallery__img {
display: block;
border: 4px solid #40331b;
height: 80px;
width: 80px; }
.gallery__controls { margin-top: 10px; }
.gallery__controls-prev { cursor: pointer; float: left; }
.gallery__controls-next { cursor: pointer; float: right; }
.clearfix:after{
content: '.';
clear: both;
display:block;
height: 0;
visibility: hidden;
}
JavaScript
$(window).load(function(){
$(".gallery__link").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
var totalWidth = 0;
$(".gallery__item").each(function(){
totalWidth = totalWidth + $(this).outerWidth(true);
});
var maxScrollPosition = totalWidth - $(".gallery-wrap").outerWidth();
function toGalleryItem($targetItem){
if($targetItem.length){
var newPosition = $targetItem.position().left;
if(newPosition <= maxScrollPosition){
$targetItem.addClass("gallery__item--active");
$targetItem.siblings().removeClass("gallery__item--active");
$(".gallery").animate({
left : - newPosition
});
} else {
$(".gallery").animate({
left : - maxScrollPosition
});
};
};
};
$(".gallery").width(totalWidth);
$(".gallery__item:first").addClass("gallery__item--active");
$(".gallery__controls-prev").click(function(){
var $targetItem = $(".gallery__item--active").prev();
toGalleryItem($targetItem);
});
$(".gallery__controls-next").click(function(){
var $targetItem = $(".gallery__item--active").next();
toGalleryItem($targetItem);
});
});
few corrections and additions:
.gallery__item {
display: inline-block;
list-style: outside none none;
margin-right: 20px;
}
.gallery {
left: 0;
overflow: hidden;
position: relative;
top: 0;
white-space: nowrap;
}