We Keep Coding

How can I use jQuery to make an element's content the same as another?

I have a site with a drop-down menu and I want the titles in it to be the same as the content in an h1 tag on another part of my site
This is my jQuery -
const johnName = $("#john").siblings("span");
const johnNameMenu = $(".john").children("h1").val();
johnName.html(johnNameMenu);
This is the code on my site which I want to appear in the menu -
<section class="john">
<div class="team-header" id="john">
<div class="teamlogo">
<img src="images/logos/lazio.png" />
<h1>John's Team</h1>
</div>
</div>
<div class="john-roster team-rosters">
<?php include ('john.php'); ?>
</div>
</section>
This is the code in the dropdown menu -
<a href="#john" id="john-link" class="anchor">
<span></span></a>
I want the "John's Team" to appear in the drop-down menu.
What is wrong with my jQuery code?

For getting the text of an element you use the function text(); val() is for <input> elements.
Note: even though I left the HTML as-is, id should be unique in a page. You should be using class if you want to have multiple of those <a> tags in there.
Your selectors and use of .children were not right. If you still want to use .children the line would be $('.john').children().find('span').
I'd recommend using more specific selectors than using .john (children far down in hierarchy).
const johnName = $(".john span");
const johnNameMenu = $(".john h1").text();
console.log(johnNameMenu)
johnName.each(function(){
$(this).html(johnNameMenu);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This is the code on my site which I want to appear in the menu -
<section class="john">
<div class="team-header" id="john">
<div class="teamlogo">
<img src="images/logos/lazio.png" />
<h1>John's Team</h1>
</div>
</div>
<div class="john-roster team-rosters">
<a href="#john" id="john-link" class="anchor">
<span></span></a>
<a href="#john" id="john-link" class="anchor">
<span></span></a>
</div>
</section>

try this
const johnName = $("#john").closest("selection").find("span");
const johnNameMenu = $(".john").children("h1").val();
johnName.html(johnNameMenu);

Copy HTML from element, replace text with jQuery, then append to element

I am trying to create portlets on my website which are generated when a user inputs a number and clicks a button.
I have the HTML in a script tag (that way it's invisible). I am able to clone the HTML contents of the script tag and append it to the necessary element without issue. My problem is, I cannot seem to modify the text inside the template before appending it.
This is a super simplified version of what I'd like to do. I'm just trying to get parts of it working properly before building it up more.
Here is the script tag with the template:
var p = $("#tpl_dashboard_portlet").html();
var h = document.createElement('div');
$(h).html(p);
$(h).find('div.m-portlet').data('s', s);
$(h).find('[data-key="number"]').val(s);
$(h).find('[data-key="name"]').val("TEST");
console.log(h);
console.log($(h).html());
console.log(s);
$("div.m-content").append($(h).html());
<script id="tpl_dashboard_portlet" type="text/html">
<!--begin::Portlet-->
<div class="m-portlet">
<div class="m-portlet__head">
<div class="m-portlet__head-caption">
<div class="m-portlet__head-title">
<h3 class="m-portlet__head-text">
<span data-key="number"></span> [<span data-key="name"></span>]
</h3>
</div>
</div>
<div class="m-portlet__head-tools">
<ul class="m-portlet_nav">
<li class="m-portlet__nav-item">
<i class="la la-close"></i>
</li>
</ul>
</div>
</div>
<!--begin::Form-->
<div class="m-portlet__body">
Found! <span data-key="number"></span> [<span data-key="name"></span>]
</div>
</div>
<!--end::Portlet-->
</script>
I'm not sure what I'm doing wrong here. I've tried using .each as well with no luck. Both leave the value of the span tags empty.
(I've removed some of the script, but the variable s does have a value on it)

You have two issues here. Firstly, every time you call $(h) you're creating a new jQuery object from the original template HTML. As such any and all previous changes you made are lost. You need to create the jQuery object from the template HTML once, then make all changes to that object.
Secondly, the span elements you select by data-key attribute do not have value properties to change, you instead need to set their text(). Try this:
var s = 'foo';
var p = $("#tpl_dashboard_portlet").html();
var $h = $('<div />');
$h.html(p);
$h.find('div.m-portlet').data('s', s);
$h.find('[data-key="number"]').text(s);
$h.find('[data-key="name"]').text("TEST");
$("div.m-content").append($h.html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id="tpl_dashboard_portlet" type="text/html">
<div class="m-portlet">
<div class="m-portlet__head">
<div class="m-portlet__head-caption">
<div class="m-portlet__head-title">
<h3 class="m-portlet__head-text">
<span data-key="number"></span> [<span data-key="name"></span>]
</h3>
</div>
</div>
<div class="m-portlet__head-tools">
<ul class="m-portlet_nav">
<li class="m-portlet__nav-item">
<i class="la la-close"></i>
</li>
</ul>
</div>
</div>
<div class="m-portlet__body">
Found! <span data-key="number"></span> [<span data-key="name"></span>]
</div>
</div>
</script>
<div class="m-content"></div>

In my case only this is working:
var template = $('template').clone(true, true); // Copies all data and events
var $h = $('<div />');
$h.html(template);
$h.find('.input-name').attr('value', "your value here"); // Note: .val("your value here") is not working
$('.list').prepend($h.html());

AngularJS : Adding animation when div tag is updated

I am stuck in this problem where I have a div tag which updates and shows a list of images. I want to add animation when the value in the div tag is updated in the transition from one set of images to another.
Here as you can see in the bottom there are a set of images for girl's hair. And when the user goes to other tab, a different set of images comes. I want animation in that transition.
The AngularJS part for the transition is as follows :
<div ng-swipe-left="avDesignController.onSwipeLeftAction()" ng-swipe-right="avDesignController.onSwipeRightAction()">
<!-- CUSTOMIZABLE TAB BAR -->
<div class="tab-bar-container" >
<div class="scrollmenutab">
<!-- CUSTOMIZABLE MENU -->
<div ng-repeat="customizable in customizables"
ng-click="avDesignController.onCustomizableClicked($event)"
style="display: inline;">
<a ng-if="customizable.allowed == 1">
<div ng-class="{selected: $index==currentIndex}">
<div ng-if="customizable.name == 'Hair'">
<img class="scrollmenutab-icon"
id="{{customizable.name}}-{{$index}}"
src="/app/app_resources/icons/{{genderImage}}Hair.png">
</div>
<div ng-if="customizable.name != 'Hair'">
<img class="scrollmenutab-icon"
id="{{customizable.name}}-{{$index}}"
src="/app/app_resources/icons/{{customizable.name}}.png">
</div>
</div>
</a>
</div> <!-- MENU : END -->
</div>
</div>
<!-- CUSTOMIZABLES -->
<div class="avdesign-item-container" id="avdesign-item-container">
<div id="four-columns" class="grid-container" >
<!-- LOAD CUSTOMIZABLES IF NOT LAST ITEM IN TAB -->
<ul ng-if="currentIndex < (customizables.length - 1)"
class="rig columns-4">
<li ng-repeat="customizableItem in currentCustomizable.customizable_item">
<img class="tab-icon"
src="/app/app_resources/resources/av/{{avatarInfo.name}}/as/{{customizableItem.as}}"
id="customizable-{{$index}}"
ng-click="avDesignController.onCustomizedItemClicked($event)"
ng-class="{highlight: customizableItem.id==currentID}">
</li>
</ul>
<!-- LOAD OUTFITS (FROM avatarOutfit) IF LAST ITEM IN TAB -->
<ul ng-if="currentIndex == (customizables.length - 1)"
class="rig columns-outfit">
<div ng-repeat="brand in outfitBrand" ng-style="{'margin-bottom':'1vh'}">
<div class="brand-icon" >
<img src="/app/app_resources/icons/{{brand.bg_image}}">
</div>
<li ng-repeat="outfit in brand.outfitList">
<img class="outfit-icon"
src="/app/app_resources/resources/av/{{avatarInfo.name}}/as/{{outfit.as}}"
id="outfit-{{$index}}"
ng-click="avDesignController.onOutfitItemClicked($event,$parent.$index)"
ng-class="{highlightOutfit: $index==avatar.outfit_index && $parent.$index==indexParent}">
</li>
</div>
</ul>
</div>
</div>
</div>
Where the functions being called in the JS part is updating accordingly the images.
So Question being how to add transition animation for the same element when it is updated because we are never leaving or entering that element tag

Your question is answered here
Html
<div ng-controller="c">
<div id={{my_id}} width={{widthOfOutsideWrapper}} height={{heightOfOutsideWrapper}}>
<img ng-src="{{src}}" imageonload />
</div>
</div>
and in controller
var app = angular.module('app', []);
app.directive('imageonload', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('load', function() {
alert('image is loaded');
scope.widthOfOutsideWrapper= this.width;
scope.heightOfOutsideWrapper= this.height;
scope.my_id = "testing";
});
}
};
});
app.controller('c', function($scope) {
$scope.src ="https://www.google.com.ua/images/srpr/logo4w.png";
});
and http://jsfiddle.net/2CsfZ/855/ working example is available here

The above answer is very helpful and might be of a great help for many.
But the answer to my question is you simply can't. ngAnimate's ngEnter and ngLeave will not able to recognize a change unless the element is changed and not what is inside the element.
So either some hack needs to be applied like using ngRepeat with different id's for different updation that happens to the element or something else needs to be done.

How to place div items into jQuery Slider showing a minimum of 5 elements with Left-Right slider to view more elements?

I have div elements on a page with col-sm-3 classes. So far, I have 6 of these elements and so, 4 elements are on 1 row and 2 are on the next row which fill half this row. I am using Bootstrap.
I want to make all these elements be contained on 1 row in a slider using JQuery with a minimum of 5 elements showing and be able to click on left-right arrow buttons to view all elements.
I found this example JQuery called lightSlider: http://sachinchoolur.github.io/lightslider/ There are 2 examples on this website and I would like to make mine similar to the second red example.
I have tried to use the lightSlider class on my elements, but no change is seen.
Here is my HTML:
<div class="row whiteBG" id="lightSlider">
#foreach (var item in Model)
{
<div class="col-sm-3 align-centre">
<img src="#item.OutputImage" alt="#item.Image" />
<a href="#Url.Action("Products", "Home", new { id = item.Id, categoryName = item.Name })">
<div class="blend-box-top category-head" style="background: #0197BA url(#item.OutputImage) no-repeat 50% 0%;">
<div class="item-container">
<div class="desc-plus">
<p>#item.Name</p>
<p>+</p>
</div>
</div>
</div>
</a>
</div>
}
</div>
I have a row which added multiple amounts of col-sm-3 div elements.
I also placed this below my HTML before the ending body tag:
<script type="text/javascript">
$(document).ready(function() {
$("#lightSlider").lightSlider();
});
</script>
I am using Visual Studio and JQuery is loaded in by default at the bottom of the _Layout.cshtml file:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>

<div class="col-sm-2 align-centre">
Change your class from 3 > 2 so that 5 will fit.

It was the first time using JQuery for me and the problem was that I was including all the classes in my HTML that I saw in the Chrome Developer Tool HTML for the second example slider here: http://sachinchoolur.github.io/lightslider/index.html This was not necessary and caused errors since I was only meant to use 1 class which then automatically added new classes to my HTML.
Firstly, I used the lightslider.js, lightslider.css and controls.png files into my project available here: https://github.com/sachinchoolur/lightslider/tree/master/src
I then placed the folling script into my HTML page before the ending body tag:
$(document).ready(function () {
window.prettyPrint && prettyPrint()
$('#content-slider').lightSlider({
keyPress: false,
item: 5,
loop: true,
onSliderLoad: function () {
$('#content-slider').removeClass('cS-hidden');
}
});
});
</script>
This is available on the GitHub repository link above - I changed it a bit to make the item attribute display 5 elements initally.
It is crucial that you place this script after the script that calls the JQuery. It took me a day to find out this was the problem.
In lightslider.css you need to change the filePath to include the image used for the left-right arrows correctly. the class is .lSAction > a. I just placed mine in the Images folder and this is the attribute that I changed: background-image: url('Images/controls.png');
This is my HTML:
What you need to know is that I only include 1 class in my HTML list: ul<id="content-slider"> which will add the other necessary lightSlider to create the second example slider displayed here: http://sachinchoolur.github.io/lightslider/index.html
<div class="row whiteBG">
<ul id="content-slider" >
#foreach (var item in Model)
{
<li class="col-sm-4 align-centre">
<a href="#Url.Action("Products", "Home", new { id = item.Id, categoryName = item.Name })">
<img src="#item.OutputImage" alt="#item.Image" />
<div class="blend-box-top category-head" style="background: #0197BA url(#item.OutputImage) no-repeat 50% 0%;">
<div class="item-container">
<div class="desc-plus">
<p>#item.Name</p>
<p>+</p>
</div>
</div>
</div>
</a>
</li>
}
</ul>
</div>
I hope this can help someone else going through a similar problem. :)

jQuery find closest

I'm trying to get the a href of an list item.
HTML
<div class="popup" style="display: none;">
<div class="product">
<div class="photo">
<a href="" class="sendkleur" id="link69"> <!-- href im trying to reach -->
<img id="product-collection-image-69" src="" alt="Test kleur" class="popup-image69">
</a>
</div>
<a href="" class="sendkleur" id="link69">
<strong>Test kleur</strong>
</a>
<span class="swatchLabel-category">Kleur:</span>
<p class="float-clearer"></p>
<div class="swatch-category-container" style="clear:both;" id="ul-attribute137-69">
<img onclick="listSwitcher();" src="" id="a137-32" class="swatch-category" alt="Beige" width="12px" height="12px" title="Beige">
<img onclick="listSwitcher();" src="" id="a137-36" class="swatch-category" alt="Zwart" width="12px" height="12px" title="Zwart">
</div>
<p class="float-clearer"></p>
</div>
</div>
There are multiple popups on the site and thats what makes it difficult. At first I used this code
var link = jQuery('.photo').find('a')[0].getAttribute("href");
But this ofcourse only returns the href of the first popup. Then I tried this code:
var link = jQuery('.photo').closest('a').attr("href");
But this returned undefined
Then I tried this:
var link = jQuery(this).closest('a').attr("href");
But that also returns undefined
Edit
Here is the whole jQuery code snippet
jQuery(document).ready(function(){
jQuery('.swatch-category-container img').click(function(){
var kleur = jQuery(this).attr('title');
var link = jQuery('.photo').find('a').attr("href");
console.log(link);
link += "?kleur="+kleur;
console.log(link);
jQuery('.photo').find('.sendkleur').attr("href", link);
});
});

Working from the .swatch-category-container img element, you can traverse the DOM to find the required a like this:
$('.swatch-category-container img').click(function() {
var link = $(this).closest('.popup').find('.photo a').prop('href');
// do something with link here...
});

If this is the .swatch-category-container img element then, the anchor is the previous to previous sibling of the ancestor swatch-category-container element
var link = jQuery(this).closest('.swatch-category-container').prev().prev().attr("href");

Since you said multiple popups, the idea would be like this.
1. Get all popups
2. From each popup in all popups
Get the photo href item
$('.popup').each(function() {
var hrefItem = $(this).find('.photo a').attr('href');
//Do your processing with href item
});