how to make this img clickable after hover?
<div class="mix col-lg-6 col-md-6 digital">
<a href="img/Photography/hotel2/LRM_EXPORT_150328983362756_20180927_162750874.jpeg" class="portfolio-item set-bg " data-setbg="img/Photography/hotel2/LRM_EXPORT_150328983362756_20180927_162750874.jpeg">
<div class="pi-inner">
<h2>OPEN GALLERY</h2>
</div>
</a>
</div>
Add a click event to the a tag like,
<a href="img/Photography/hotel2/LRM_EXPORT_150328983362756_20180927_162750874.jpeg" class="portfolio-item set-bg " data-setbg="img/Photography/hotel2/LRM_EXPORT_150328983362756_20180927_162750874.jpeg" onclick="doStuff()">
In the doStuff(), do whatever you need to happen when the image is clicked.
using javascript, you could do it like this:
var clickable = false;
var img = document.getElementById('IdOfyourELement');
img.addEventListener('mouseenter', function(){
clickable = true;
});
img.addEventListener('mouseleave', function(){
clickable = false;
});
img.addEventListener('click', function(){
if(clickable) {
//doWhatEverThing
}
});
You could also try and add the variable clickable to your element to avoid using globals.
Like this:
img.clickable = false;
img.clickable = true;
Related
I'm having trouble adding a link to a button inside a card. the card is wrapped in a div element which when clicked automatically expands and closes.
Is there anyway to remove this functionality just when clicking on the details button? So it acts as a normal link?
Here is the code:
https://codepen.io/candroo/pen/wKEwRL
Card HTML:
<div class="card">
<div class="card__image-holder">
<img
class="card__image"
src="https://source.unsplash.com/300x225/?wave"
alt="wave"
/>
</div>
<div class="card-title">
<a href="#" class="toggle-info btn">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
Card title
<small>Image from unsplash.com</small>
</h2>
</div>
<div class="card-flap flap1">
<div class="card-description">
This grid is an attempt to make something nice that works on touch
devices. Ignoring hover states when they're not available etc.
</div>
<div class="card-flap flap2">
<div class="card-actions">
Read more
</div>
</div>
</div>
</div>
JS:
$(document).ready(function () {
var zindex = 10;
$("div.card").click(function (e) {
e.preventDefault();
var isShowing = false;
if ($(this).hasClass("show")) {
isShowing = true;
}
if ($("div.cards").hasClass("showing")) {
// a card is already in view
$("div.card.show").removeClass("show");
if (isShowing) {
// this card was showing - reset the grid
$("div.cards").removeClass("showing");
} else {
// this card isn't showing - get in with it
$(this).css({ zIndex: zindex }).addClass("show");
}
zindex++;
} else {
// no cards in view
$("div.cards").addClass("showing");
$(this).css({ zIndex: zindex }).addClass("show");
zindex++;
}
});
});
You can check the target of the event and see if it is an <a> using is()
Something like:
$("div.card").click(function (e) {
// only run when not an `<a>`
if(!$(e.target).is('a')){
e.preventDefault();
//the rest of your code
....
}
});
I don't know Jquery but with javascript you can do this inside your code:
const links = document.querySelectorAll('.btn');
links.forEach(link => link.addEventListener('click', (e)=>e.stopPropagation()))
I have two div elements that are clickable. When I click one that contains "1" it will give it class="active", when I click one that contains "2" it will give it class="active" and remove class="active" from the 1st one. Basically it is like switch.
<div class="active">1</div>
<div class="">2</div>
then this block:
<div class="carousel-inner">
<div class="carousel-item " data-id="1" data="carousel-item"></div>
<div class="carousel-item " data-id="2" data="carousel-item"></div>
</div>
and after all this code: which is supposed to detach div that don't have data-id of "active" div. When switched, it's supposed to re-attach detached div and detach the second one.
<script>
$(document).ready(function(){
var a = $("div:contains('1')"),
b;
if (a.hasClass('active')){
b = $("[data-id!='1'][data='carousel-item']").detach();
}
else{
$(".carousel-inner").prepend(b);
}
});
</script>
however, it is not working. when I switch (class active moves from one div to another) nothing happens. only first div is detached but on switch it is not reattaching. Any ideas why ? Thanks for any help !
PS: 1. For certain reasons (FU mobirise) I'm not able to manipulate with those two divs with active class(give them onclick() attribute, new class or id and so on).
2. Sorry for my English.
Here is one possible solution. I changed around how you were doing the swap so it isn't doing a detach. But it should give you an idea of how to potentially do it, if you did want to do the detach anyway.
//emulate the external logic that swaps the active class
$(function(){
var $elements = $('.top');
$elements.on('click', function(){
$elements.not(this).removeClass('active');
$(this).addClass('active');
});
});
$(function(){
var $top = $('.top');
var $carousel = $('.carousel-inner');
var $carouselItems = $carousel.find('.carousel-item');
$top.on('click', function(){
var $this = $(this);
$carousel.prepend($carouselItems.filter(function(){
return $this.data('id') === $(this).data('id');
}));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top active" data-id="1">1</div>
<div class="top" data-id="2">2</div>
<div class="carousel-inner">
<div class="carousel-item " data-id="1" data="carousel-item">Number 1</div>
<div class="carousel-item " data-id="2" data="carousel-item">Number 2</div>
</div>
So i tried to make my gallery more better. I want when user click on element to open image in the middle of the screen. I'm sure that there is efficient way to do this with adding class or something.
What should i do ?
HTML
<ul class="gallery">
<li>
<img src="img/1.png" />
<div class="caption" onclick="view('1.png')">
<div class="blur"></div>
<div class="caption-text">
<h1>+</h1>
</div>
</div>
</li>
<li>
<img src="img/2.png" onClick="view('2.png');">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1>+</h1>
</div>
</div>
</li>
<ul>
Javascript:
<script type="text/javascript">
function view(imgsrc) {
viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');
}
</script>
I think I have exactly what you are looking for.
You can look for some css and an example here
This is where the magic happens:
popup = {
init: function(){
$('li').click(function(){
popup.open($(this));
});
$(document).on('click', '.popup img', function(){
return false;
}).on('click', '.popup', function(){
popup.close();
})
},
open: function($li) {
$('.gallery').addClass('pop');
$popup = $('<div class="popup" />').appendTo($('body'));
$fig = $li.clone().appendTo($('.popup'));
$bg = $('<div class="bg" />').appendTo($('.popup'));
$close = $('<div class="close"><svg><use xlink:href="#close"></use></svg></div>').appendTo($fig);
$shadow = $('<div class="shadow" />').appendTo($fig);
src = $('img', $fig).attr('src');
$shadow.css({backgroundImage: 'url(' + src + ')'});
$bg.css({backgroundImage: 'url(' + src + ')'});
setTimeout(function(){
$('.popup').addClass('pop');
}, 10);
},
close: function(){
$('.gallery, .popup').removeClass('pop');
setTimeout(function(){
$('.popup').remove()
}, 100);
}
}
popup.init()
This should cover the popup logic.
For the centering issue you should check out the link above and look at the css documentation
Fabio Ottaviani's work, nicely done.
Hope it helps :)
You might want to try out imgZoom, a jQuery plugin to easily integrate zooming function to your current images: http://odyniec.net/projects/imgzoom/
I have a button that toggles the playlistHolder div. In addition, when '.albumImage a' is selected, it also unhides the playlist. I am trying to change the text of the button to 'Show Playlist' if the playlist is hidden and 'Hide Playlist' if it is not hidden. I have tried click functions with if(('.playlist').is(:hidden)) but have not had any luck with getting it to work. I am new to Jquery so I understand that my code below can use much improvement, here is my setup now that works when the album image is selected as well as when the toggle button is selected without changing the text:
HTML
<div class="togglePlaylist">
<button id="togglePlaylistBT">Show/Hide Playlist</button>
<!-- POPUP LAUNCHER -->
</div>
<div class="playlistHolder">
<div class="componentPlaylist">
<div class="playlist_inner">
<!-- playlist items are appended here! -->
</div>
</div>
<!-- preloader -->
<div class="preloader"></div>
</div>
<div class="albumWrapper">
<div class="albumCovers">
<div class="albumImage"> <img class="img-responsive" src="media/music/Album_Covers/Swag_Brothers.jpg" alt="thumb" />
<p class="nowPlaying">Now Playing</p>
</div>
</div>
</div>
Javascript/JQuery
$('#togglePlaylistBT, .albumImage a').on('click', function() {
var $this = $('#togglePlaylistBT');
if($('.playlistHolder').is(':visible'))
{
$('.playlistHolder').hide('slow');
$this.text('Hide Playlist');
}
else
{
$('.playlistHolder').show('slow');
$this.text('Show Playlist');
}
});
Try this snippet of code:
$('.togglePlaylist button').on('click', function() {
var $this = $(this);
if($('.playlistHolder').is(':visible'))
{
$('.playlistHolder').hide();
$this.text('Hide Playlist');
}
else
{
$('.playlistHolder').show();
$this.text('Show Playlist');
}
});
Working JSFiddle
When you hide and show the playlist just run document.getElementById("togglePlaylistBT").value="Show Playlist";
For example:
function change()
{
var elem = document.getElementById("playlistButton");
if (elem.value=="Open Playlist") { elem.value = "Close Playlist"; closeBox(); }
else { elem.value = "Open Playlist"; openBox(); }
}
function openBox() {
alert("open");
}
function closeBox() {
alert("closed");
}
<input onclick="change()" type="button" value="Open Playlist" id="playlistButton"></input>
Make sure to change openBox() and closeBox() functions to your box code!
I have problem in hide and show the div element.
In this scenario when user click on the year the respect content is shown.
Problem I want to inactive hyperlinking on respective year when it is opened.
The script and html is below;
for this I have tried .preventDefault(). but not got any success:
<script type="text/javascript" >
$(document).ready(function() {
$("div.new:gt(0)").hide();// to hide all div except for the first one
$("div[name=arrow]:eq(0)").hide();
// $("div.nhide:gt(0)").hide();
// $("a[name=new]").hide();
$("a[name=new]").hide();
$('#content a').click(function(selected) {
var getID = $(this).attr("id");
var value= $(this).html();
if( value == '<< Hide')
{
// $("#" + getID + "arrow").hide();
$("a[name=new]").hide();
$("#" + getID + "_info" ).slideUp('slow');
$("div[name=arrow]").show();
$("div.new").hide();
$(this).hide();
// var getOldId=getID;
// $("#" + getID ).html('<< Hide').hide();
}
if($("a[name=show]"))
{
// $("div.new:eq(0)").slideUp()
$("div.new").hide();
$("div[name=arrow]").show();
$("a[name=new]").hide();
$("#news" + getID + "arrow").hide();
$("#news" + getID + "_info" ).slideDown();
$("#news" + getID ).html('<< Hide').slideDown();
}
});
});
</script>
The html code is below:
<div id="content">
<div class="news_year">
<a href="#" name="show" id="2012">
<div style="float:left;" name="year" id="news2012year">**2012** </div>
<div style="float:left;" name="arrow" id="news2012arrow">>></div>
</a>
</div>
<div class="new" id="news2012_info">
<div class="news">
<div class="news_left">News for 2012</div>
</div>
<div class="nhide" ><< Hide </div>
</div>
<div id="content">
<div class="news_year">
<a href="#" name="show" id="2011">
<div style="float:left;" name="year" id="news2012year">2012 </div>
<div style="float:left;" name="arrow" id="news2012arrow">>></div>
</a>
</div>
<div class="new" id="news2011_info">
<div class="news">
<div class="news_left">News for 2011</div>
</div>
<div class="nhide" ><< Hide </div>
</div>
Fiddle
if i am understanding your problem,
event.preventDefault(); not works with all browser so if you are using other browser like IE
then use event.returnValue = false; instead of that.so you can detect your browser using javascript as
var appname = window.navigator.appName;
This is what I'm currently using in my projects to "disable" an anchor tag
Disabling the anchor:
Remove href attribute
Change the opacity for added effect
<script>
$(document).ready(function(){
$("a").click(function () {
$(this).fadeTo("fast", .5).removeAttr("href");
});
});
</script>
Enabling the anchor:
$(document).ready(function(){
$("a").click(function () {
$(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html");
});
});
Original code can be found here
Add a class called 'shown' to your wrapper element when expanding your element and remove it when hiding it. Use .hasClass('shown') to ensure the inappropriate conditional is never executed.
Surround the code inside of the click function with an if statement checking to see if a variable is true or false. If it is false, it won't run the code, meaning the link is effectively inactive. Try this..
var isActive = true;
if (isActive) {
// Your code here
}
// The place where you want to de-activate the link
isActive = false;
You could also consider changing the link colour to a grey to signify that it is inactive.
Edit
Just realised that you want to have multiple links being disabled.. the code above will disable all of them. Try the code below (put the if around the code in the click function)
if(!$(this).hasClass("disabled")) {
// Your code here
}
// The place where you want to de-activate the link
$("#linkid").addClass("disabled");
// To re-enable a link
$("#linkid").removeClass("disabled");
// You can even toggle the link from disabled and non-disabled!
$("#linkid").toggleClass("disabled");
Then in your CSS you could have a declaration like this:
.disabled:link {
color:#999;
}