Randomly show / hide images in html by using javascript - javascript

i have this div containing two images.
<div class="pc" id="pc1">
<img src="available.png" alt="Available">
<img src="unavailable.png" alt="UnAvailable">
</div>
when page will load, one image will show and the other will hide. when click on the image which is shown then the showing image will hide and hidden image will show... same process for the other image click event. images must be overlap just because i dont want any extra space. same space for both images simultaneously....
how to code for this....

Since both your images are children of the same element, you could set an event listener on the parent instead.
const toggleImages = () => {
// get the parent wrapper element
const pc1 = document.getElementById('pc1');
// if #pc1 exists
if (pc1) {
// attach an event click
pc1.addEventListener('click', () => {
pc1.classList.toggle('is-active'); // toggle `is-active` class
});
}
};
toggleImages();
#pc1 {
display: inline-block;
}
/* Hide last image by default */
#pc1:not(.is-active) img:last-child {
display: none;
}
#pc1.is-active img:first-child {
display: none;
}
<div class="pc" id="pc1">
<img src="https://via.placeholder.com/175/000000?text=First+Image" alt="Available">
<img src="https://via.placeholder.com/175/33414D?text=Second+Image" alt="UnAvailable">
</div>

try this:
first of all include jquery in your head tag:
<head> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script></head>
ok now set an class to the first img and a class to the other img and set for the second image the style to display none
<div class="pc" id="pc1">
<img class="img1" src="available.png" alt="Available">
<img class="img2" src="unavailable.png" alt="UnAvailable"
style="display:none">
</div>
now you need to add an script for that:
<script>
$( ".img1" ).click(function() {
$( ".img1" ).hide();
$( ".img2" ).show();
});
$( ".img2" ).click(function() {
$( ".img2" ).hide();
$( ".img1" ).show();
});
</script>

<style>
.pc {
position: relative;
}
.visible, .unvisible {
display: block;
position: absolute;
top: 0;
left: 0;
}
.unvisible {
display: none;
}
</style>
<script>
// add event listener to wait when page is load
document.addEventListener("DOMContentLoaded", () => {
// get instances of both images
const img1 = document.getElementById("img1")
const img2 = document.getElementById("img2")
/**
* this method toggle visibility of image
*/
const toggleImage = (image) => {
image.classList.toggle("unvisible")
}
// hide visible image #1
toggleImage(img1)
// show unvisible image #2
toggleImage(img2)
// Add event listener for user press a mouse key on image #2
img2.addEventListener("mousedown, mouseup", () => {
// hide visible image #1
toggleImage(img1)
// show hidden image #2
toggleImage(img2)
})
});
</script>
<div class="pc" id="pc1">
<img id="img1" src="available.png" alt="Available">
<img id="img2" class="unvisible" src="unavailable.png" alt="UnAvailable">
</div>
so, you can use DOM model to toggle class "unvisible" and hide one image and show other.

Related

How can i replace a section on a page with another section on a anchor click?

I have a tasks listing on right side of a page. On the other side there is a map shown inside a div. I want to click on one of the tasks and get there details to replace map's div. After clicking in link when i refresh i should still get the task details not the map. Here is the code:
$(document).ready(function() {
$("#show_task_detail").click(function() {
$("#details").show();
$("#browse_tasks_map").hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" name="key" value="{{$post->id}}" />Post title
<div id="browse_tasks_map" style="position: relative; overflow: hidden;"></div>
<div class="col-md-12 col-lg-12 col-xs-12 col-sm-12 task-detail-data" style="display: none;" id="details"></div>
You can use the addClass method of jquery
$(document).ready(function () {
var hash = window.location.hash.split("#");
if (hash.indexOf('show-details') > -1 ) {
$("#details").addClass('show');
$("#browse_tasks_map").addClass('hidden');
}
$("#show_task_detail").click(function () {
$("#details").addClass('show');
$("#browse_tasks_map").addClass('hidden');
window.location.hash = "show-details";
});
});
Where the css would be,
.show{
display: block;
}
.hidden{
display: none;
}
When clicking the link set anchor part of the url
When rendering the page, check URL for the anchor tag
function showDetails()
{
$("#details").show();
$("#browse_tasks_map").hide();
}
$(document).ready(function() {
if (document.hash == 'details')
{
showDetails();
}
$("#show_task_detail").click(function () {
showDetails();
document.location.hash = 'details'
});
});

Event inside click function firing outside click

I'm using the hash to detect the current slide in a slideshow but I'd like to only do so when the slideshow is advanced using the previous or next buttons. But the event "cycle-after" which detects a transition in the slideshow, is firing even when the previous or next buttons are not clicked.
How do I make that event only run during the click function?
JSFiddle here: https://jsfiddle.net/yd8L3enj/4/
$(document).ready(function() {
var clicked = false;
$('.controls').on('click', function() {
$('.cycle-slideshow').on('cycle-after', function(event, optionHash) {
var hash = window.location.hash;
$('.clicked').removeClass('clicked')
if (window.location.hash === hash) {
$(hash).addClass('clicked')
} else {
$(hash).removeClass('clicked')
}
});
});
$('nav a').on('click', function() {
clicked = !clicked;
$('.clicked').removeClass('clicked');
$(this).addClass('clicked');
$('.content').addClass('visible');
});
$("nav a").mouseenter(function() {
var href = $(this).attr('href');
window.location.hash = href
$('.content').addClass('visible');
}).mouseleave(function() {
var current = $('.clicked').attr('href');
window.location.hash = current
if ($(".clicked")[0]) {
// Do something if class exists
} else {
$('.content').removeClass('visible');
}
});
$('.close').on('click', function() {
$('.content').removeClass('visible');
window.location.hash = ""
clicked = !clicked;
});
});
body {
font-size: 150%;
}
img {
width: 50vw;
height: auto;
}
.clicked {
color: green;
}
.content {
display: none;
}
.visible {
display: 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.cycle2/2.1.6/jquery.cycle2.min.js"></script>
<nav>
1
2
3
</nav>
<div class="content">
<div class="cycle-slideshow" data-cycle-slides="> div" data-cycle-timeout="0" data-cycle-prev=".prev" data-cycle-next=".next" data-cycle-speed="1" data-cycle-fx="fadeOut">
<div data-cycle-hash="1">
<img src="https://placeimg.com/640/480/animals">
</div>
<div data-cycle-hash="1">
<img src="https://placeimg.com/640/480/animals/2">
</div>
<div data-cycle-hash="2">
<img src="https://placeimg.com/640/480/arch">
</div>
<div data-cycle-hash="2">
<img src="https://placeimg.com/640/480/arch/2">
</div>
<div data-cycle-hash="3">
<img src="https://placeimg.com/640/480/nature">
</div>
<div data-cycle-hash="3">
<img src="https://placeimg.com/640/480/nature/2">
</div>
</div>
<div class="controls">
<div class="prev">Prev</div>
<div class="next">Next</div>
<div class="close">Close</div>
</div>
</div>
the $(selector).on(... syntax binds an event listener. Your code is adding an event listener to the 'cycle-after' event every time the click listener is executed. That means, as soon it was clicked once, all cycle-after events from then on will have that code executed. If you clicked multiple times, you will have bound multiple listeners, and even more of them will be running on every cycle-after event.
What you probably want to do is, for a click, only perform the code after the first next cycle-after event. To achieve this you could bind the listener, and at the end of the callback, unbind it again. Something like this:
$('.controls').on('click', function() {
$('.cycle-slideshow').on('cycle-after', afterCycle);
function afterCycle(){
... your logic here ...
$('.cycle-slideshow').off('cycle-after', afterCycle);
}
});
Keep in mind that this is still pretty fragile. If you click twice before the first cycle-after happens, the library might only fire cycle-after once and you will still have an unwanted listener bound. If this slide-library supports it, it would be best to simply bind once on 'cycle-after', and then add a check that only continues if the cycle was caused by a click.

Toggle images hide/visible in HTML

Here's the thing, I want some of the pictures in my HTML file to be hidden at first leaving a black at its position. And it's shown after clicking on it. I can put js code in my layout file but to keep the code clean and extremely readable, there shouldn't be div span tags or id or class, just add parameters like 'onclick' in img tags.
Current code:
<script type="text/javascript">
function toggle_visibility() {
if ( this.style.visibility == 'hidden' )
this.style.visibility = 'visible';
else
this.style.visibility = 'hidden';
}
</script>
<img onclick="toggle_visibility();" src="IMG.jpg"/>
Add specific class to each element that needs that functionality. In my example this class is 'image'.
Also you need to have draggable set to false for images, else you can still see the image when dragging.
document.addEventListener('click', function(e) {
if (e.target.classList.contains('image')) {
e.target.style.filter = 'brightness(100%)';
}
});
img.image {
height: 100px;
filter: brightness(0%);
}
<img class="image" src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg"/ draggable="false">
<img class="image" src="https://dictionary.cambridge.org/images/thumb/chick_noun_002_06563.jpg?version=4.0.44"/ draggable="false">

Unfold Submenu conditions (jQuery)

I'm stuck with a jQuery issue that I don't manage to solve.
I've created a menu with sub menu elements. I would like to toggle the height of content by clicking in menu items. The thing is when I click on other item, the content collapse. Kind of tricky to explain, I've put two websites doing the job
http://www.polerstuff.com/ -> When you click on 'shop' and then on 'info', the sub menu stays open. The same trick was seen here http://topodesigns.com/
I guess these two websites are using Shopify.
$(document).ready(function() {
$(".button").on("click", function() {
if($(".content").height() == 0) {
$(".content").animate({height: "300px"});
}
else if($(".content").height() == 300) {
$(".content").animate({height: "0px"});
}
});
});
Here is my jsfiddle
-> Thank a lot in advance.
Here's version of your fiddle that uses the data attribute to target divs with desired content, and another data tag containing desired heights to animate (but there are many other ways).
Clicking on the same button toggles it shut, this is achieved by adding an indicative class.
The 'hiding' divs may contain further divs with classes and layout as required.
$(document).ready(function (){
$(".b").on("click", function (){
var $this = $(this),
target = $this.data('target'),
tall = $this.data('tall'),
content = $(".content");
target = $('.'+target).html(); // get the html content of target divs
content.html(target); // insert said content
if (!$this.hasClass('on')) { // if it hasn't been clicked yet..
$(".b").removeClass('on'); // say that none have been clicked
$this.addClass('on'); // say that just this one has been clicked
content.animate({height: tall}, 200); // animate to the height specified in this buttons data attribute
} else {
content.animate({height: "0px"});
$this.removeClass('on');
}
});
});
.content {
background: coral;
width: 100%;
height: 0px;
overflow:hidden;
}
.hiding{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class="b" data-target="alpha" data-tall="4em">Button</button>
<button class="b" data-target="bravo" data-tall="7em">Button</button>
<button class="b" data-target="charlie" data-tall="5em">Button</button>
<div class="content">Le contenu</div>
<div class="hiding alpha"> some stuff </div>
<div class="hiding bravo"> other things </div>
<div class="hiding charlie"> bits and pieces </div>

Swap images on hover with fade

I'm attempting to swap out an image on hover with a fade in / fade out effect. The jQuery below works well because it lazy loads the hover image.
The first example shows a flash of white as the original image is replaced with the new image as it fades in. The second example shows the desired fade in effect by setting the background but somehow loses the fade out effect.
HTML:
<img class="imageHoverLoad lazy"
data-original="http://decoymagazine.ca/wp-content/uploads/2012/06/red-300x300.jpg"
data-hover="http://images.wolfordshop.com/images/colors/thumbs/5635.jpg" />
jQuery:
$('.imageHoverLoad').mouseenter(function() {
var elem = $(this);
elem.attr('src', elem.attr('data-hover')).hide().fadeIn(400);
});
$('.imageHoverLoad').mouseleave(function() {
var elem = $(this);
elem.attr('src', elem.attr('data-original')).hide().fadeIn(400);
});
Codepen:
http://codepen.io/anon/pen/KVQavM
You're replacing the src before your transition, so there's no time to fade out. And you need to specify the fadeOut and wait for the animation promise to resolve before continuing:
$(function() {
$("img.lazy").lazyload();
});
$('.imageHoverLoad').mouseenter(function() {
var elem = $(this);
elem.fadeOut(400).promise().done(function() {
elem.attr('src', elem.attr('data-hover')).fadeIn(400);
});
});
$('.imageHoverLoad').mouseleave(function() {
var elem = $(this);
elem.fadeOut(400).promise().done(function() {
elem.attr('src', elem.attr('data-original')).fadeIn(400);
});
});
.swap-image {
width: 300px;
height: 300px;
margin-bottom: 100px;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>
<div class="swap-image">
<img class="imageHoverLoad lazy" data-original="http://decoymagazine.ca/wp-content/uploads/2012/06/red-300x300.jpg" data-hover="http://images.wolfordshop.com/images/colors/thumbs/5635.jpg" />
</div>
<div class="swap-image" style="background: url(http://decoymagazine.ca/wp-content/uploads/2012/06/red-300x300.jpg) no-repeat;">
<img class="imageHoverLoad lazy" data-original="http://decoymagazine.ca/wp-content/uploads/2012/06/red-300x300.jpg" data-hover="http://images.wolfordshop.com/images/colors/thumbs/5635.jpg" />
</div>

Categories