I have some cards with an image, text, and link within them. Wrapping the card with an anchor tag is not possible in my case. Is it possible to target the anchor tag within the card and then make the entire card clickable to go to that link using jquery?
Ideal state: when you click anywhere on the card, the link is triggered and the user is taken to it.
<div class="todays-news">
<div class="container">
<div class="owl-carousel owl-theme">
<div class="item">
<div class="card">
<img src="images/home/home-image.png" />
<div class="card-body">
<strong>This is a title</strong>
<p>This is a paragraph.</p>
Continue Reading
</div>
</div>
</div>
<div class="item">
<div class="card">
<img src="images/home/home-image-2.png" />
<div class="card-body">
<strong>This is a title</strong>
<p>This is a paragraph.</p>
Continue Reading
</div>
</div>
</div>
</div>
</div>
</div>
This can be achieved with css, no javascript required.
.item {
position: relative;
}
.item a::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
The element that you want to make clickable gets a position: relative. That creates a new containment block. We then add a before pseudo-class to the link. Position it absolutely and stretch it over the entire containment block.
https://play.tailwindcss.com/q0Pje5H2Br
Yes, you can do this with JavaScript, though if you could solve the problem with not being able to make the card an anchor, that would be better. There's no reason you can't put a div in an a element, a's content model is transparent.
But if you can't:
$(document).on("click", ".card", function(event) {
const $this = $(this);
// Don't interfere with a click actually on the anchor
// (that way, the user can still right-click it and
// use the browser-supplied menu for oew in new tab,
// shift click, etc.)
if ($this.find($(event.target).closest("a")[0]).length === 0) {
// Not on the anchor, do it
event.preventDefault();
$this.find("a")[0].click();
}
});
Note that you have to call click on the DOM element, not the jQuery object. If you call it on the jQuery object, it won't trigger the default action.
Simply use an onclick handler on the div:
<div class="todays-news">
<div class="container">
<div class="owl-carousel owl-theme">
<div class="item">
<div class="card" onclick="this.querySelector('a').click(); return true;">
<img src="images/home/home-image.png" />
<div class="card-body">
<strong>This is a title</strong>
<p>This is a paragraph.</p>
Continue Reading
</div>
</div>
</div>
<div class="item" onclick="this.querySelector('a').click(); return true;">
<div class="card">
<img src="images/home/home-image-2.png" />
<div class="card-body">
<strong>This is a title</strong>
<p>This is a paragraph.</p>
Continue Reading
</div>
</div>
</div>
</div>
</div>
</div>
Add a click handler for the card, and have it perform a click on the anchor:
$(".card").click(function() {
$(this).find("a")[0].click();
});
You can wrap block elements with <a>. It is valid HTML5 and renders your card clickable. You may need to adjust the css rules for the text inside this block however.
Edit: Since this isn't possible in your case, could you specify why?
<div class="todays-news">
<div class="container">
<div class="owl-carousel owl-theme">
<a class="item" href="https://www.example.com/">
<div class="card">
<img src="images/home/home-image.png" />
<div class="card-body">
<strong>This is a title</strong>
<p>This is a paragraph.</p>
<a>Continue Reading</a> <!-- unsure about the correct tag here -->
</div>
</div>
</a>
<a class="item" href="https://www.example.com/">
<div class="card">
<img src="images/home/home-image-2.png" />
<div class="card-body">
<strong>This is a title</strong>
<p>This is a paragraph.</p>
<a>Continue Reading</a> <!-- unsure about the correct tag here -->
</div>
</div>
</a>
</div>
</div>
</div>
Related
I am adding some semantic-ui cards dynamically to a page. These cards have dimmers.
Example from SUI site.
<div class="ui special cards">
<div class="card">
<div class="blurring dimmable image">
<div class="ui dimmer">
<div class="content">
<div class="center">
<div class="ui inverted button">Add Friend</div>
</div>
</div>
</div>
<img src="/images/avatar/large/elliot.jpg">
</div>
<div class="content">
<a class="header">Team Fu</a>
<div class="meta">
<span class="date">Created in Sep 2014</span>
</div>
</div>
<div class="extra content">
<a>
<i class="users icon"></i>
2 Members
</a>
</div>
</div>
</div>
Now, if I add the above content dynamically (using jQuery) - currently, for testing, I am just using a string of the above HTML markup (cards) and calling $("#myDiv").append(cards).
I then need to activate the dimmers using:
$('.special.cards .image').dimmer({
on: 'hover'
});
If I call this after the append, then the dimmers do not work. As I understand it, this needs to be delegated. So I tried:
$("#myDiv").on('click','.special.cards' , function() {
$('.special.cards .image').dimmer({
on: 'hover'
});
});
This works but requires me to first click on a card before the on: hover is activated.
Is there a way to activate the on: hover without the need for a click?
I'm having some issues trying to make an overflowed container I've created in Divi draggable.
After researching I found a few templates that related to what I was looking for. However, wouldn't work due to the way the container has to be created within the theme.
I've added a link to the website development below so you are able to see the way the container has been set-up. Any advise on how I can achieve my desired outcome would be appreciated.
Example of what I'm trying to achieve
https://codepen.io/toddwebdev/pen/yExKoj
Development website
https://snapstaging.co.uk/thesnapagency/about/
Container layout
<div class="section">
<div class="row">
<div class="column">
<div class="module">
<div class="container">
<div class="items">
<div class="project-item">
<img src="https://snapstaging.co.uk/thesnapagency/wp-content/uploads/2020/07/delphinium-thumbnail.jpg" />
<h1>Project</h1>
</div>
<div class="project-item">
<img src="https://snapstaging.co.uk/thesnapagency/wp-content/uploads/2020/07/delphinium-thumbnail.jpg" />
<h1>Project</h1>
</div>
<div class="project-item">
<img src="https://snapstaging.co.uk/thesnapagency/wp-content/uploads/2020/07/delphinium-thumbnail.jpg" />
<h1>Project</h1>
</div>
<div class="project-item">
<img src="https://snapstaging.co.uk/thesnapagency/wp-content/uploads/2020/07/delphinium-thumbnail.jpg" />
<h1>Project</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Should be fine if you changed the styling a bit.
give the container (div with draggable on your webpage )
overflow-x: auto;
width: 100%;
and set the width of it's child (row)
width: 2500px;
Then whenever you use that codepen you should be good.
<div class="et_pb_row et_pb_row_7 draggable" style="
overflow-x: auto;
width: 100%;
">
<div class="et_pb_column et_pb_column_4_4 et_pb_column_17 et_pb_css_mix_blend_mode_passthrough et-last-child" style="
width: 2500px;
">
Items here
</div>
</div>
Here is my HTML and Javascript code, and basically as you can see currently what it does is show/hide a row of 3 images upon button click.
Thing is, that there are another 2 rows just like this one and I need to know how I can change the javascript code to make the show/hide thing work for all of them.
I know it has something to do with looping through an array of buttons, but I have no idea of Javascript.
Here it is :
<style>
.show-tapas{
display: none;
}
.show-tapas.showing{
display: block;
}
</style>
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
Tapas
</div>
</div>
</div>
<div class="row show-tapas">
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1"><div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="images/menu_tapas_1_0.jpeg">
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1"><div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="images/menu_tapas_2_0.jpeg">
</div>
</div></div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1"><div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="images/menu_tapas_3_0.jpeg">
</div>
</div></div>
</a>
</div>
</div>
<script>
var a = document.querySelector('.load-more-button');
var b = document.querySelector('.show-tapas');
a.addEventListener("click",function(e){
e.preventDefault
b.classList.contains("showing") ? b.classList.remove("showing") : b.classList.add("showing");
})
</script>
Thank you very much!!!
In this code I only see one row with the class .show-tapas.
Anyway, you should use querySelectorAll to take every matched items.
var button = document.querySelector('.load-more-button');
var tapas = document.querySelectorAll('.show-tapas');
button.addEventListener("click",function(e){
tapas.forEach(b => $(b).toggle());
})
Pro-tip: If you have JQuery you might consider using $(b).toggle() instead of b.classList.contains("showing") ? b.classList.remove("showing") : b.classList.add("showing");
I have a horizontal grid consisting of 3 image squares - The action that I am trying to produce is when any grid section is clicked, the user will be anchored down to a slideshow box that is being displayed below the grid. the first bit of HTML that I have pasted below is one grid (there will be 3) - and the section section of HTML is the slideshow section. Since I cant use the same ID tag multiple times in HTML, I believe I will need to use some for of Javascript or jQuery to take the user from the grid on click to the . Could anyone help me figure out how to do that?
<div id="grid-item" class="grid-item grid-item-1">
<div class="grid-project">
<img class="profile-image" src="img/image1.png">
</div>
<div class="grid-overlay">
<div class="project-info">
<a href="#project-link" id="toggle">
<h4 class="project-name">Headline 1</h4>
<p class="project-categories">description 1</p>
</a>
</div>
</div>
</div>
<div id="grid-item" class="grid-item grid-item-2">
<div class="grid-project">
<img class="profile-image" src="img/image.png">
</div>
<div class="grid-overlay">
<div class="project-info">
<a href="#project-link" id="toggle">
<h4 class="project-name">Headline 2</h4>
<p class="project-categories">description 2</p>
</a>
</div>
</div>
</div>
<div id="slideshow" class="slideshow">
<div class="slideshow_inner">
<a name="project-link" class="anchor">
<img src="img/slide_img_1.png">
</div>
</div>
If you're using id="" you can't use same id twice... Each element should have different id name. Change this in the second grid:
<a href="#project-link" id="toggle">
to this:
<a href="#project-link" id="toggle2">
and don't use same id twice...
Also, you have used name="" in the second section of your html, instead of id:
<a name="project-link" class="anchor">
I would like to know if it's possible using jQuery to detach and then re-attach an element (e.g. a div) to the DOM without reloading the content within the element.
Consider this example layout:
<div class="row">
<div class="col-lg-6">
<div class="card">
<img src="something.jpg" />
</div>
<div class="card">
<img src="something.jpg" />
</div>
<div class="card">
<iframe src="example.com" id="widget">
</div>
</div>
<div class="col-lg-6">
<div class="card">
<!-- User hides this card -->
<img src="something.jpg" />
</div>
<div class="card">
<iframe src="example.com" id="widget">
</div>
</div>
</div>
There are 3 cards in the first column and two in the second column. If the user hides one of the cards in the second column, I want to restack the cards by moving one of the cards from the first column to the second column, so that there are now two cards in each column. I can accomplish this using .detach() and .appendTo() easily enough, but when I re-attach the card from the first column to the second, whatever content that card contains is reloaded, be it an image or a widget such as an embedded Tweet.
What I'd like to know is if it's possible to move a card from one column to another without triggering the content within it to be reloaded.
Using .clone() does not appear to request resource again. Note, .detach() is called after .appendTo() .
Note also that id of element with a document should be unique; two elements having id "widget" are within html at Question; try changing to class="widget"
$(".col-lg-6:eq(1) div").click(function(e) {
$(e.target).hide();
var clone = $(".col-lg-6:eq(0) div:eq(0)").clone();
clone.appendTo(".col-lg-6:eq(1)");
$(".col-lg-6:eq(0) div:first").detach();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="row">
<div class="col-lg-6">
<div class="card">
<img src="http://lorempixel.com/50/50/nature" />
</div>
<div class="card">
<img src="http://lorempixel.com/50/50/cats" />
</div>
<div class="card">
<iframe src="example.com" class="widget"></iframe>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<!-- User hides this card -->
<img src="http://lorempixel.com/50/50/sports" />
</div>
<div class="card">
<iframe src="example.com" class="widget"></iframe>
</div>
</div>
</div>