jQuery: detach and re-attach element without reloading content - javascript

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>

Related

How to make elements stay in place even if the if directive removes the given element from the middle of consecutive elements

I need to style rows like in picture.
The problem is I want to have fixed elements no matter if previous or next element will disappear. Also the whole table is resizable and buttons should overlap text if text will be too long
<div class="someRow">
<div class="someText"></div>
<div class="buttonsContainer">
<div *ngIf="someExpression1" class="button1"></div>
<div *ngIf="someExpression2" class="button2"></div>
<div *ngIf="someExpression3" class="button3"></div>
<div class="button4"></div>
</div>
</div>

<div class="buttonsContainer">
<div class="row">
<div class="col-4">
<div *ngIf="someExpression1" class="button1"></div>
</div>
<div class="col-4">
<div *ngIf="someExpression2" class="button2"></div>
</div>
<div class="col-4">
<div *ngIf="someExpression3" class="button3"></div>
</div>
</div>

Activate dynamically added semantic-ui dimmer

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?

Make entire card clickable by targeting <a> inside of it

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>

how to get a single item returned when a div is clicked in aurelia

i have a div that when you click it,it opens a modal. as follows
<div if.bind="Members.length" click.delegate="GetProfiles($event.target)">
<div repeat.for="category of Types(Members)">
<div class="row">
<div class="col s3">
<div class="card blue-grey darken-1">
<div class="rotate-text-90-negative truncate">
${category.name}
</div>
</div>
</div>
</div>
</div>
</div>
so when the page loads and i have 3 category names displayed for example
Stationary
Office Equipment
Cleaning supplies
now when i click on Stationary i want it to open the "GetProfiles($event.target)" modal i have which it does as follows
<div md-modal="
in-duration: 1000;
out-duration: 1000;
dismissible:false;
"
md-modal.ref="GetProfile">
<div class="modal-content">
<div>
<div >
<md-input label="First Name" readonly.bind="false"></md-input>
</div>
</div>
</div>
</div>
i have the following on my type script page
async GetCrewProfiles(Members) {
this.GetProfile.open();
console.log(Members);
}
but now when i log the members out it comes back with all the members array as follows:
0:{Name:"Stationary" Id:"12365" active:true stock:"50"}
1:{Name:"Office Equipment" Id:"1278365" active:true stock:"0"}
2:{Name:"Cleaning supplies" Id:"12395" active:true stock:"5"}
how do i create an event that only returns the Member that i clicked on, so if i clicked on Stationary i only want to get the information for that and not return everything
i tried this
GetProfiles($event.target) and GetProfiles(Members)
but i cant figure out how to add a click event for a selected item

Have you tried moving your click.delegate function inside the repeat.for div?
I suggest you to move your click.delegate inside the repeat.for div. Something like this:
<div if.bind="Members.length">
<div repeat.for="category of Types(Members)">
<div class="row">
<div class="col s3">
<div class="card blue-grey darken-1">
<div click.delegate="GetProfiles($event.target)"
class="rotate-text-90-negative truncate"> ${category.name}
</div>
</div>
</div>
</div>
</div>
</div>

Using the same ID value multiple times to anchor to the same location

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">

Categories

Resources