I have simple JS code that on "text-title" element click checks if another element exists and if it does it add class to third element. Problem is that function works properly only in user clicks twice on "text-title" element. I also tried to console.log "(.fpd-layouts-panel .fpd-item).length" element and I get correct value only on second click.
What am I doing wrong?
Here is my JS code:
jQuery('.text-title').click( function() {
if (jQuery('.fpd-layouts-panel .fpd-item').length) {
jQuery('.ux-swatch[data-value="caseotic"]').removeClass('hidden');
} else {
jQuery('.ux-swatch[data-value="caseotic"]').addClass('hidden');
};
});
And HTML code:
<div class="fpd-item fpd-tooltip text-title tooltipstered selected" data-title="iPhone 12" data-source="http://localhost:8888/wp-testi/wp-content/uploads/2021/10/iphone-13.jpg">iPhone 12 </div>
<div class="ux-swatch tooltip ux-swatch--image tooltipstered" data-value="caseotic" data-name="CASEOTIC"><img width="100" height="100" src="http://localhost:8888/wp-testi/wp-content/uploads/2022/01/CASEOTIC-IPHONE-13-100x100.jpg" class="ux-swatch__img attachment-woocommerce_gallery_thumbnail size-woocommerce_gallery_thumbnail" alt="CASEOTIC" loading="lazy" srcset="http://localhost:8888/wp-testi/wp-content/uploads/2022/01/CASEOTIC-IPHONE-13-100x100.jpg 100w, http://localhost:8888/wp-testi/wp-content/uploads/2022/01/CASEOTIC-IPHONE-13-510x510.jpg 510w, http://localhost:8888/wp-testi/wp-content/uploads/2022/01/CASEOTIC-IPHONE-13.jpg 650w" sizes="(max-width: 100px) 100vw, 100px"><span class="ux-swatch__text">CASEOTIC</span></div>
<div class="fpd-layouts-panel">
<div class="fpd-scroll-area mCustomScrollbar _mCS_6 mCS-autoHide mCS_no_scrollbar" style="position: relative; overflow: visible;"><div id="mCSB_6" class="mCustomScrollBox mCS-light mCSB_vertical mCSB_outside" tabindex="0" style="max-height: none;"><div id="mCSB_6_container" class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y" style="position:relative; top:0; left:0;" dir="ltr">
<div class="fpd-grid"><div class="fpd-item fpd-tooltip tooltipstered"><picture style="background-image: url(http://localhost:8888/wp-testi/wp-content/uploads/2022/01/CASEOTIC-IPHONE-13.jpg" );"=""></picture></div></div>
</div></div><div id="mCSB_6_scrollbar_vertical" class="mCSB_scrollTools mCSB_6_scrollbar mCS-light mCSB_scrollTools_vertical mCSB_scrollTools_onDrag_expand" style="display: none;"><div class="mCSB_draggerContainer"><div id="mCSB_6_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 30px; height: 0px; top: 0px;"><div class="mCSB_dragger_bar" style="line-height: 30px;"></div><div class="mCSB_draggerRail"></div></div></div></div></div>
</div>
And in advance thank you all for helping.
Related
Im trying to make a product page with gallery (clickable small thumbnails on the side) which opens a large image on the right side.
Jquery zoom only displays the zoom on the first image, when the other images are displayed the zoom is still on the first image.
Here is my code:
HTML
<section class="product-page">
<div class="thumbnails">
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-right-side.png" alt="thumb-air-force-right-side" onclick="right()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-left-side.png" alt="thumb-air-force-left-side" onclick="left()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-bottom-side.png" alt="thumb-air-force-bottom-side" onclick="bottom()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-pair-side.png" alt="thumb-air-force-pair-side" onclick="pairSide()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-pair-top.png" alt="thumb-air-force-pair-top" onclick="pairTop()"></div>
</div>
<div class="img-display">
<span class='zoom' id='shoe1'>
<img id="img-area" src="img/nike/shoes/Air-force1/air-force-right-side.png" alt="air-force-right-side" width="320" height="320">
</span>
<span class='zoom1' id='shoe1'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-left-side.png" alt="air-force-left-side" width="320" height="320">
</span>
<span class='zoom' id='shoe3'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-bottom-side.png" alt="air-force-bottom-side">
</span>
<span class='zoom' id='shoe4'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-pair-side.png" alt="air-force-pair-side">
</span>
<span class='zoom' id='shoe5'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-pair-top.png" alt="air-force-pair-top">
</span>
</div>
</section>
JS for image changing while clicking on the thumbnail images
var img = document.getElementById("img-area");
function right(){
img.src='img/nike/shoes/Air-force1/air-force-right-side.png';
}
function left(){
img.src='img/nike/shoes/Air-force1/air-force-left-side.png';
}
function bottom(){
img.src='img/nike/shoes/Air-force1/air-force-bottom-side.png';
}
function pairSide(){
img.src='img/nike/shoes/Air-force1/air-force-pair-side.png';
}
function pairTop(){
img.src='img/nike/shoes/Air-force1/air-force-pair-top.png';
}
And the Jquery code
$(document).ready(function(){
$('#shoe1').zoom();
$('#shoe2').zoom();
$('#shoe3').zoom();
$('#shoe4').zoom();
$('#shoe5').zoom();
});
How to make the changed image zoom in on hover?
Thanks in advance.
Something as simple as this could be achievable without causing repetitive strain injury.
For obvious reasons I haven't considered image preloading, etc, but this is something I hope you can take inspiration from.
Your img-display should be treated as a canvas. Bind a single event handler to links wrapped around thumbs who's href attribute contains the larger image you want to load in the canvas area. This event handler simply rotates your thumbnails, but uses the larger image and passes that to both the canvas image and the jQuery zoom plugin API whilst toggling active states of thumbs (as an aesthetic suggestion).
Why href? As an example, screen readers still need to be able to follow these links. I'm thinking accessibility ftw.
Images courtesy of JD Sports.
$(function() {
$('.zoom').zoom();
$('.thumb').on('click', 'a', function(e) {
e.preventDefault();
var thumb = $(e.delegateTarget);
if (!thumb.hasClass('active')) {
thumb.addClass('active').siblings().removeClass('active');
$('.zoom')
.zoom({
url: this.href
})
.find('img').attr('src', this.href);
}
});
});
img {
display: block;
height: auto;
max-width: 100%;
}
.product-page {
display: flex;
}
.img-display {
flex-grow: 1;
max-width: 372px;
}
.thumb {
opacity: .7;
margin: 0 .25rem .25rem 0;
width: 120px;
transition: opacity .25s ease-out;
}
.thumb:hover,
.thumb.active {
opacity: 1;
}
.zoom {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>
<section class="product-page">
<div class="thumbnails">
<div class="thumb active">
<a href="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1">
<img src="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1" alt="thumb-air-force-right-side">
</a>
</div>
<div class="thumb">
<a href="https://i8.amplience.net/i/jpl/jd_334285_b?qlt=92&w=950&h=673&v=1">
<img src="https://i8.amplience.net/i/jpl/jd_334285_b?qlt=92&w=950&h=673&v=1" alt="thumb-air-force-left-side">
</a>
</div>
<div class="thumb">
<a href="https://i8.amplience.net/i/jpl/jd_334285_e?qlt=92&w=950&h=673&v=1">
<img src="https://i8.amplience.net/i/jpl/jd_334285_e?qlt=92&w=950&h=673&v=1" alt="thumb-air-force-bottom-side">
</a>
</div>
</div>
<div class="img-display">
<span class="zoom">
<img src="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1" alt="">
</span>
</div>
</section>
#perocvrc
Please try below code it works perfectly as per your requirement.
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
height: auto;
max-width: 100%;
}
.main-view-page {
display: flex;
}
.full-screen-img {
flex-grow: 1;
max-width: 500px;
}
.sideimg {
opacity: .7;
margin: 0 .1rem .1rem 0;
width: 120px;
transition: opacity .25s ease-out;
}
.sideimg:hover,
.sideimg.active {
opacity: 1;
width:135px;
}
.zoom-in {
display: inline-block;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>
<script>
$(function() {
$('.zoom-in').zoom();
$('.sideimg').on('click', 'a', function(e) {
e.preventDefault();
var thumb = $(e.delegateTarget);
if (!thumb.hasClass('active')) {
thumb.addClass('active').siblings().removeClass('active');
$('.zoom-in')
.zoom({
url: this.href
})
.find('img').attr('src', this.href);
}
});
});
</script>
</head>
<body>
<section class="main-view-page">
<div class="thumbnails">
<div class="sideimg">
<a href="https://st2.depositphotos.com/2038977/8502/i/950/depositphotos_85027142-stock-photo-goats-grazing-on-the-alpine.jpg">
<img src="https://st2.depositphotos.com/2038977/8502/i/950/depositphotos_85027142-stock-photo-goats-grazing-on-the-alpine.jpg" alt="thumb-air-force-right-side">
</a>
</div>
<div class="sideimg active">
<a href="https://wallpaperplay.com/walls/full/b/1/c/162815.jpg">
<img src="https://wallpaperplay.com/walls/full/b/1/c/162815.jpg" alt="thumb-air-force-left-side">
</a>
</div>
<div class="sideimg">
<a href="https://jooinn.com/images/cabin-with-beautiful-view.jpg">
<img src="https://jooinn.com/images/cabin-with-beautiful-view.jpg" alt="thumb-air-force-bottom-side">
</a>
</div>
<div class="sideimg">
<a href="https://www.principlesinsight.co.uk/wp-content/uploads/2019/07/clouds-conifer-daylight-371589.jpg">
<img src="https://www.principlesinsight.co.uk/wp-content/uploads/2019/07/clouds-conifer-daylight-371589.jpg" alt="thumb-air-force-bottom-side">
</a>
</div>
</div>
<div class="full-screen-img">
<span class="zoom-in">
<img src="https://wallpaperplay.com/walls/full/b/1/c/162815.jpg" alt="main-view-images">
</span>
</div>
</section>
</body>
</html>
I hope above code will be useful for you.
Thank you.
I tried to create a simple HTML game of Point-and-click and I'd like to move my character on the screen. Now, I can do it with buttons, but I'd like to put images with hrefs that my character moves without the button. For example, when I click on the men, I'd like that Mario Moves to the men. My code is this:
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<center>
<button id="go2"><-</button>
<button id="go">-></button>
</center>
<script>
$( "#go" ).click(function() {
$('#Walk').attr('src','https://orig02.deviantart.net/8996/f/2014/244/d/e/mario_by_nintentofu-d7xicg0.gif')
$( "#Prota" ).animate({
left: "550",
}, 4500 );
});
$( "#go2" ).click(function() {
$('#Walk').attr('src','https://orig02.deviantart.net/8996/f/2014/244/d/e/mario_by_nintentofu-d7xicg0.gif')
$( "#Prota" ).animate({
left: "0",
}, 4500 );
});
</script>
</div>
<div id='Fondo' style="position:absolute;z-index:99999999999999;margin-left: 0px; margin-top: 0px; background-color:#000000; height:600; width:800">
<img src="https://orig00.deviantart.net/6ddc/f/2018/003/4/b/principepio_by_darklordwriter-dbyrqix.png" alt="" />
</div>
<div id='Objetivo' style="position:absolute;z-index:99999999999999;margin-left: 225px; margin-top: 400px; height:100; width:100">
<img src="https://vignette.wikia.nocookie.net/finalfantasy/images/d/d0/FFRK_Thief_FFI.png" alt="">
</div>
<div id='Prota' style="position:absolute;z-index:99999999999999;margin-left: 0px; margin-top: 400px; height:100; width:100">
<img src="https://orig02.deviantart.net/8996/f/2014/244/d/e/mario_by_nintentofu-d7xicg0.gif" alt="" id='Walk'>
</div>
Can anybody help me? Thanks a lot!
Here's a basic example, you add an event listener to the object you want Mario to walk to, and then use the offsetLeft property to find where (relatively speaking) to move him. Here I've subtracted the offsetWidth value so Mario doesn't stand right on top of him. If Mario approaches from the right, you would want to check for that and instead add the offsetWidth value.
$("#Objetivo").click(function () {
$( "#Prota" ).animate({
left: this.offsetLeft - this.offsetWidth
}, 1000 );
});
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div id='Fondo' style="position:absolute;z-index:99999999999999;margin-left: 0px; margin-top: 0px; background-color:#000000; height:600; width:800">
<img src="https://orig00.deviantart.net/6ddc/f/2018/003/4/b/principepio_by_darklordwriter-dbyrqix.png" alt="" />
</div>
<div id='Objetivo' style="position:absolute;z-index:99999999999999;margin-left: 225px; margin-top: 400px; height:100; width:100">
<img src="https://vignette.wikia.nocookie.net/finalfantasy/images/d/d0/FFRK_Thief_FFI.png" alt="">
</div>
<div id='Prota' style="position:absolute;z-index:99999999999999;margin-left: 0px; margin-top: 400px; height:100; width:100">
<img src="https://orig02.deviantart.net/8996/f/2014/244/d/e/mario_by_nintentofu-d7xicg0.gif" alt="" id='Walk'>
</div>
I have a div with a background image. How can i make the div (the background image) clickable? I want to unhide an other div when clicked on the div (image). Onclick code: onclick="javascript:unhide('kazen')"
var clickit = document.getElementsByClassName("fh5co-grid")[0];
var kazen = document.getElementById("kazen");
clickit.addEventListener("click", function(){
if (kazen.style.display === "none") {
kazen.style.display="block";
} else {
kazen.style.display="none";
}
});
kazen.addEventListener("click", function(){
this.style.display="none";
});
#kazen {
background-color: #cc9;
display: none;
width: 100px;
height: 100px;
position: absolute;
top: 15px;
left: 15px;
}
.fh5co-grid {
}
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(images/PREVIEW_Shop_02-29.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
<h3>Kaas</h3>
<h4>in ons aanbod hebben we verse en harde kazen - binnenkort meer hierover</h4>
</div>
</a>
</div>
</div>
<div id="kazen" >
<div class="col-md-12">
<div class="fh5co-grid" style="background-image: url(images/Melkerhei_Dag2-16-4.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
</div>
</a>
</div>
</div>
</div>
You can have a look at the fiddle I created if this is what you want.
$(document).ready(function() {
$("div.fh5co-grid").click(function() {
$("div.next").css("display", "block");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(http://placehold.it/350x150);">
<a class="image-popup text-center">
<div class="prod-title ">
<h3>cheese</h3>
<h4>tekst</h4>
</div>
</a>
</div>
</div>
<div style="background-color: #000; display:none" class="next">Next div</div>
From what you're describing, this seems pretty close. The background image isn't clickable, it's the div itself. And this could be done with jQuery, yes, but it's trivial enough that pure javascript is pretty easy here. Clicking in the red-boxed area will display the div with the id kazen, and clicking in either kazen or the red-boxed area again will hide it.
Note, there was a weird glitch to my solution. I changed the display if/else to check if it's currently displayed and hide it, rather than if it's currently hidden to display it. That was causing a strange effect of re-hiding the kazan div on the first click.
Within stackoverflow, you'll need an absolute url to display an image. If you aren't seeing your image here, that may be why.
var clickit = document.getElementsByClassName("fh5co-grid")[0];
var kazen = document.getElementById("kazen");
clickit.addEventListener("click", function(){
if (kazen.style.display === "block") {
kazen.style.display="none";
} else {
kazen.style.display="block";
}
});
kazen.addEventListener("click", function(){
this.style.display="none";
});
#kazen {
background: url("https://static.pexels.com/photos/6832/waterfall-beauty-lets-explore-lets-get-lost.jpg");
background-size: 100%;
display: none;
width: 100px;
height: 100px;
position: absolute;
top: 15px;
left: 15px;
color: #fff;
}
.fh5co-grid {
border: 1px dotted red;
}
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(images/PREVIEW.jpg);">
<a class="image-popup text-center">
<div class="prod-title ">
<h3>cheese</h3>
<h4>tekst</h4>
</div>
</a>
</div>
</div>
<div id="kazen">
Click me to hide!
</div>
I am firstly trying to fade in a div as soon as the page is loaded, then once its loaded I have 2 other divs on it that are acting like buttons. I would like to be able to click those 2 divs to be able to make other divs appear on top of the first one. Here is the code for the first div that should fade in a soon as the page is finished loading:
<div id="step1" style="visibility: hidden; display:block">
<a id="btn-step2-video" style="position:fixed; top: 45%; left: 25%;"><div class="btn-ad-choice ad-choice">
<br>
<p><b>Create a video ad:</b></p>
<video width="200" height="113" autoplay="autoplay" mute>
<source src="video/exemple.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div></a>
<a id="btn-step2-picture" style="position:fixed; top: 45%; right: 25%;"><div class="btn-ad-choice ad-choice">
<br>
<p><b>Create a picture ad:</b></p>
<img src="images/adexemple.jpg" alt="Exemple of a picutre ad" height="113" width="200">
</div></a>
</div>
and here is the code for the next divs that I would like to fad in if either of the 2 buttons is clicked. So if the button video is clicked the div containing the word video will fade in and the div containing the buttons will fade out, same for the second button with picture:
<div id="step2-video" class="box" style="visibility: hidden; background:#C0C0C0">
video
</div>
<div id="step2-picture" class="box" style="visibility: hidden; background:#C0C0C0">
picture
</div>
Finally here is the Javascript, however it does not work:
<script type="text/javascript">
var step1 = $('#step1'),
step2-video = $('#step2-video'),
step2-picture = $('#step2-picture'),
var boxes = $('.box');
$('#btn-step2-video').click(function(){
fade(step1, step2-video);
});
$('#btn-step2-picture').click(function(){
fade(step1, step2-picutre);
});*/
$(document).ready(function() {
$("#step1").fadeIn("quick");
});
function fade(thisIn, callback){
$(thisIn).fadeOut("slow");
$(callback).fadeIn("slow");
});
</script>
Thank you for your help ;)
Edited your original post, code is below.
Guess this is the functionality you want?
$(function() {
var step1 = $('#step1');
var step2video = $('#step2-video');
var step2picture = $('#step2-picture');
var boxes = $('.box');
step1.fadeIn("slow");
$('#btn-step2-video').click(function() {
fade(step1, step2video);
});
$('#btn-step2-picture').click(function() {
fade(step1, step2picture);
});
var fade = function(thisIn, callback){
$(thisIn).fadeOut("slow");
$(callback).fadeIn("slow");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="step1" style="display:none; background: #ff0000; width: 100px; height: 100px;">
<a href="#" id="btn-step2-video" style="position:fixed; top: 45%; left: 25%;"><div class="btn-ad-choice ad-choice">
<br>
<p><b>Create a video ad:</b></p>
</div></a>
<a href="javascript:void(0);" id="btn-step2-picture" style="position:fixed; top: 45%; right: 25%;"><div class="btn-ad-choice ad-choice">
<br>
<p><b>Create a picture ad:</b></p>
</div></a>
</div>
<div id="step2-video" class="box" style="display: none; background:#C0C0C0; height: 100px; width: 100px;">
video
</div>
<div id="step2-picture" class="box" style="display: none; background:#C0C0C0; height: 100px; width: 100px;">
picture
</div>
I have already seen similar threads on SO.
I have index.php on button click url.php get loaded through ajax in the <div> present in index.php
On url.php there are couple of <div>. I want some of them to be visible only after button click. I got solution for this.
But only 1 div become visible rest hidded Is it due to z-index property?
index.php:
<script>
$("#load_url").click(function(){
$.ajax({
url:"url.php",
success:function(response) {
$("#view_port").html(response);
$("#load_url").hide();
}
});
});
function show2() {
//alert("hi");
document.getElementById("txtHint").style.display = "block";
document.getElementById("rateit99").style.display = "block";
document.getElementById("cb1").style.display = "block";
}
</script>
url.php
<body style="height: 560px">
<div class="rateit bigstars" id="rateit99" style="z-index: 1; display:none;" ><b>Rate Me </b></label>
</div>
<label2 color="red" id="l1" style="z-index: 1; left: 438px; display:none; top: 180px; position:absolute" ><b><u>Add comment</u> </b></label2>
<form action="data.php" method="POST" onsubmit="showUser(this, event)">
<div style="z-index: 1; left: 420px; top: 40px; position: absolute; margin-top: 0px">
<label>Enter URL: <input type="text" id="t1" value="http://www.paulgraham.com/herd.html" name="sent" style="width: 400px; height:40px;" ></label><br/>
</div>
<div style="z-index: 1;" > <button onclick="show2();"> Get Sentiment </button>
</div>
</form>
<div style="z-index: 1; left: 720px; top: 110px; position: absolute; margin-top: 0px">
</div>
<h4>
<div id="txtHint" align="justify" style="z-index: 3; "> </h4>
</div>
<div class="fb-comments" id='cb1'" ></div>
</div>
</body>
when button Get Sentiment clicked. Only id="txtHint" and lable Rate me appears.
cb1, rateit99 remains invisible, what is the bug here?
Link to full code:
index.php
http://codetidy.com/6857/
url.php
http://codetidy.com/6858/
Its not a answer but because I can not comment-
Actually this is happening because of css conflicts. try to give display none every such element through class and then apply direct style as ur doing. you can also use !important to give higher preference.