Using javascript append to move multiple divs - javascript

I have a wordpress plugin that creates a slider in a output order like this:
<ul>
<li>
<img src="">
<div class="wp1s-caption-wrapper">
<div class="wp1s-caption-title">
<div class="wp1s-caption-content">
</li>
<!-- each slide as this same setup within the li, currently I have three slide so therefore 3 sets of the above li-->
</ul>
Now what I need to do is enter a div (hh-caption) into the div class wp1s-caption-wrapper and then insert wp1s-caption-title and wp1s-caption-content inside that. To do this I though to use append like so:
var j = jQuery.noConflict();
j(document).ready(function(){
j(".wp1s-caption-wrapper").append(j(".hh-caption"));
j(".hh-caption").append(j(".wp1s-caption-title"));
j(".hh-caption").append(j(".wp1s-caption-content"));
});
Now this enters the div hh-caption into each of the wp1s-caption-wrapper divs, but it places every wp1s-caption-title and wp1s-caption-content that appears. I have three sliders with title and captions so what happens is each hh-wrapper contains 3 titles and captions. I only want the title and content directly above each hh-caption (append puts hh-caption below title and content) to move into it not all occurences.
I don't want to edit the plugins codedirectly as any updates would most likely require me to redo everything, I though doing it with javascript in my own pages would be easier to alter if updates changed anything.
Does anyone have any suggestions or point me in the right direction?

I have not really understood what you are trying to do but to my understanding I will ask you to try appendTo instead of append
var j = jQuery.noConflict();
j(document).ready(function(){
j(j('.hh-caption').appendTo('.wp1s-caption-wrapper');
j(j('.wp1s-caption-title').appendTo('.hh-caption');
});

If I understand the question correctly, I think your issue is you are selecting all the elements and then appending your new content. You need to specify the exact element you want to append to. Usually I would say use an id but I understand you don't want to change the existing code so instead you can do 2 things:
One Append: Append everything in one go, I prefer this as its less code, but depending on how complex the html is your adding, this may not be suited.
Multiple Append: Append the caption wrapper, then within that the title etc. This assumes you are always adding it to the end and uses jquery .last()
I hope this helps, sorry its a bit lengthy but wanted to demonstrate it well.
$("#addCaption1").click(function() {
captionImage = "https://images.unsplash.com/photo-1473182446278-fa0683411d10?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=";
captionTitle = "This is a new caption";
captionContent = "This caption was added via jquery.";
addCaption1(captionImage, captionTitle, captionContent);
});
$("#addCaption2").click(function() {
captionImage = "https://images.unsplash.com/photo-1462834026679-7c03bf571a67?dpr=1&auto=compress,format&fit=crop&w=1199&h=791&q=80&cs=tinysrgb&crop=";
captionTitle = "This is a new caption";
captionContent = "This caption was added via jquery.";
addCaption2(captionImage, captionTitle, captionContent);
});
function addCaption1(imgUrl, title, content) {
var caption = '<li><img src=' + imgUrl + '><div class="wp1s-caption-wrapper"><div class="wp1s-caption-title"><strong>' + title + '</strong><div class="wp1s-caption-content"><p>' + content + '</p></div></div></div></li>';
$("#sidebar").append(caption);
}
function addCaption2(imgUrl, title, content) {
var captionWrapper = '<li><img src=' + imgUrl + '><div class="wp1s-caption-wrapper"></div></li>';
$("#sidebar").append(captionWrapper);
$(".wp1s-caption-wrapper").last().append('<div class="wp1s-caption-title"><strong>' + title + '</strong></div>');
$(".wp1s-caption-wrapper").last().find(".wp1s-caption-title").append('<div class="wp1s-caption-content"><p>' + content + '</p>');
}
button {
padding: 5px;
}
ul {
list-style: none;
}
li {
margin: 5px;
padding: 5px;
background: #ccc;
color: #333;
width: 180px;
display: inline-block;
}
li img {
width: 180px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button id="addCaption1">One append</button>
<button id="addCaption2">Multiple appends</button>
<ul id="sidebar">
<!-- Item 1 -->
<li>
<img src="https://images.unsplash.com/photo-1473220464492-452fb02e6221?dpr=1&auto=compress,format&fit=crop&w=1199&h=800&q=80&cs=tinysrgb&crop=">
<div class="wp1s-caption-wrapper">
<div class="wp1s-caption-title"><strong>This is a title for Item 1</strong>
<div class="wp1s-caption-content">
<p>This is some content for Item 1</p>
</div>
</div>
</div>
</li>
<!-- Item 2 -->
<li>
<img src="https://images.unsplash.com/photo-1467791702337-32e58d17bb6d?dpr=1&auto=compress,format&fit=crop&w=1199&h=796&q=80&cs=tinysrgb&crop=">
<div class="wp1s-caption-wrapper">
<div class="wp1s-caption-title"><strong>This is a title for Item 2</strong>
<div class="wp1s-caption-content">
<p>This is some content for Item 2</p>
</div>
</div>
</div>
</li>
<!-- Item 3 -->
<li>
<img src="https://images.unsplash.com/photo-1473496169904-658ba7c44d8a?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
<div class="wp1s-caption-wrapper">
<div class="wp1s-caption-title"><strong>This is a title for Item 3</strong>
<div class="wp1s-caption-content">
<p>This is some content for Item 3</p>
</div>
</div>
</div>
</li>
</ul>
I recommend running in full page.

Related

Separating content within div with Jquery

I have the following HTML:
<div class="page">
<div class="somecontent_1">...</div>
<div class="somecontent_2">...</div>
<div class="somecontent_3">...</div>
<div class="somecontent_4">...</div>
</div>
Now I'd like to separate the content with a separate page so it looks something like this:
<div class="page">
<div class="somecontent">...</div>
<div class="somecontent">...</div>
</div>
<div class="newpage">
<div class="somecontent">...</div>
<div class="somecontent">...</div>
</div>
The function checks the height of each class somecontent and if it's larger than a certain amount, I need to move the content to a new page.
My guess is that I would need to create an empty div (newpage) and then fetch the elements after the height is exceeded and move them to the empty newpage and continue iterate like that.
My question would be how I would get all content that are after the last element that reached the height so I can move it to the new empty page that I would create. Other solutions are most welcome if there is a better way of doing it!
The code I came up with looks like this:
var page = $('.page');
var pageHeight = 0;
$.each(page.find('.somecontent'), function() {
if (pageHeight > 1000) {
page.next('<div class="newpage"></div>');
/* Somehow get all elements to add to the newly created page */
page.next('.newpage').append(<NEXT_ELEMENTS>);
pageHeight = 0;
}
pageHeight = pageHeight + $(this).height();
});
When you reach the page which answers the height criterion use the .nextAll function to get all the next siblings of it, then use .wrapAll to wrap them with your newpage div.
Here is the corresponding documentation of nextAll and wrapAll, it has everything you need to cover your scenario.
See comments in line below.
// Instead of the $.each() utiility function
// Just loop over each content area that needs
// examination
$('.somecontent').each(function(index, item) {
// Check if the height of the item is greater than the target (20px for this example)
if (parseInt(getComputedStyle(item).height,10) > 20) {
// Make a new div after the div that the item is currently in
// if one doesn't already exist
if($(".newpage").length === 0){
$(item.closest(".page")).after('<div class="newpage"></div>');
}
// Move the item into the new div
$(item.closest(".page")).next('.newpage').append(item);
}
});
//console.log(document.body.innerHTML); // shows resulting HTML
div.page {border:1px solid red; }
div.newpage {border:1px solid green; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page">
<div class="somecontent">This<br>is<br>some<br>content</div>
<div class="somecontent">This is some content</div>
<div class="somecontent">
<ul>
<li>This</li>
<li>is</li>
<li>some</li>
<li>content</li>
</ul>
</div>
<div class="somecontent">Other</div>
</div>

What is the idea behind setting the attributes twice, once in html and then in jquery?

I am new to javascript and jquery and i was looking at some code and found this to be very prevalent everywhere.
<ul class="items">
<li class="item" aria-controls="item-0" role="tab"> </li>
<li class="item" aria-controls="item-1" role="tab"> </li>
<li class="item" aria-controls="item-2" role="tab"> </li>
</ul>
The attributes to "item" class are set in html but then they are set again in jquery. Why?
$(".items").find(".item").each(function () {
$Item = $(this);
$Item.attr("aria-controls", "item-" + (count));
$Item.attr("role", "tab");
count++;
});
What you are looking at is not actually a duplication of the code or data, what you are seeing in the HTML is the final rendering after the javascript you provided has run.
Essentially the javascript you provided is finding any child of items with the class of item and is iterating through each element. After that it is updating some attributes to change the role and aria-controls. This is an easy way to set the same attributes on multiple items or to (as shown here) append to a single item through each iteration.
var count = 0;
$(".test").find("p").each(function () {
$Item = $(this);
$Item.attr("id", "child" + count);
$Item.attr("class", "extended-child");
count++;
});
.extended-child {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
<p>Hello</p>
<p>World</p>
</div>
In the above example for example, after iterating through and p child elements the class will be updated to make the text red and the ID will be set. You will notice initially there is no class however after there is a class applied. If you were to inspect this in your browser however you would see:
<div class="test">
<p class="extended-child" id="child0">Hello</p>
<p class="extended-child" id="child1">World</p>
</div>
However as you have seen that is not the initial HTML that was added.
EDIT
Below is a carbon copy of the above except I will update the HTML again. After 3 seconds the class will update changing the text color.
var count = 0;
$(".test").find("p").each(function () {
$Item = $(this);
$Item.attr("id", "child" + count);
$Item.attr("class", "extended-child");
count++;
});
setTimeout(function(){
$(".test").find("p").each(function () {
$Item = $(this);
$Item.attr("class", "extended-child-two");
})
}, 3000)
.extended-child {
color: red;
}
.extended-child-two {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
<p>Hello</p>
<p>World</p>
</div>

Javascript - How to target a linked image instead of linked text in this code snippet?

I would like to target a linked image instead of linked text, which is the way it's coded in the following code snippet using the textContent property on this page: www.ninjasdontsweat.com. The way I understand it is the search is activated when the page loads and adds a className 'sqs-search-ui-button sqs-search-ui-button-wrapper' to the element surrounding the search text (in this case the <li> element).
<script>
//SEARCH
document.addEventListener('DOMContentLoaded', function(){
var nav = document.querySelectorAll(".main-nav .external-link");
Array.prototype.forEach.call(nav,function(el,i){
if (el.textContent.match(/Search/)) {
el.className += ' sqs-search-ui-button sqs-search-ui-button-wrapper';
}
});
});
</script>
<li class="external-link sqs-search-ui-button sqs-search-ui-button-wrapper">
Search
</li>
On my page (see below), basically what I think needs to happen is this: when search.jpg is clicked, the javascript will do two things...add the className "sqs-search-ui-button sqs-search-ui-button-wrapper" to the <a> element and deactivate the href "/nandf/" allowing the css to overlay the page as it does in the first code snippet. Hope that makes sense! Let me know if you have any questions.
<div class="wrapper">
<a class="project " href="/nandf/" data-ajaxify="false">
<div>
<div class="project-image"><div class="intrinsic">
<div class="content-fill" style="overflow: hidden;">
<img data-src="http://static.squarespace.com/static/52cd716be4b065c5e52b9967/t/53248d81e4b0d7985481f99d/1394904442216/search.jpg"
data-image="http://static.squarespace.com/static/52cd716be4b065c5e52b9967/t/53248d81e4b0d7985481f99d/1394904442216/search.jpg"
data-image-dimensions="396x396" data-image-focal-point="0.5,0.5"
data-load="false" alt="search"
class="" src="https://static.squarespace.com/static/52cd716be4b065c5e52b9967/t/53248d81e4b0d7985481f99d/1394904442216/search.jpg?format=300w"
data-image-resolution="300w" style="top: 0px; left: 0px; width: 282px; height: 282px; position: relative;"></div></div><div class="project-item-count">1</div></div>
<div class="project-title">search</div>
</div>
</a>
</div>
You need to search for images inside the element as well:
var nav = document.querySelectorAll(".main-nav .external-link");
Array.prototype.forEach.call(nav,function(el,i){
if(matches(el)) {
el.className += ' sqs-search-ui-button sqs-search-ui-button-wrapper';
}
});
function matches(el) {
if (el.textContent.match(/Search/)) {
return true;
}
var images = el.getElementsByTagName("img");
return Array.prototype.some.call(images, function(img) {
return img.src.match(/search/);
});
}
If you have more criteria (e.g. matching the image's title), you just need to add them to the matches function.

HTML/JavaScript - How can I hide the links and cursor?

I am working on a JavaScript/HTML template for my website however I am having trouble trying to figure out how to hide links and cursors when at different ID's.
The URL's end like so http://domain.com/index.html#about etc. The homepage Which is the following code:
<!-- Home Page -->
<section class="content show" id="home">
<h1>THIS IS THE HEADER</h1>
<h5>SUB HEADING</h5>
<p>THIS IS A PARAGRAPH OF TEXT.</p>
</section>
is the content that initially shows, the rest use "content hide". The issue I am having is that when at other ID's eg #services even though the content from other pages is hidden, links and cursors can still display when navigating the page. An example would be my templates page:
<!-- Web Templates -->
<section class="content hide" id="web_templates">
<h2>HTML Stand Alone Website Templates</h2>
<h3>Free Templates</h3>
<!--THE IMAGES ARE PLACED IN AN UNORDERED LIST-->
<ul class="enlarge"> <!--We give the list a class so that we can style it seperately from other unordered lists-->
<!--First Image-->
<li>
<img src="images/free_web_templates/hairstylesalon.jpg" width="150px" height="100px" alt="Hair Style Salon" /> <!--thumbnail image-->
<span> <!--span contains the popup image-->
<img src="images/free_web_templates/hairstylesalon.jpg" alt="Hair Style Salon" /> <!--popup image-->
<br />Hair Style Salon (Free Website Templates) Download <!--caption appears under the popup image-->
</span>
</li>
</ul>
</section>
When not on this page the hand cursor displays on every page even though the content is hidden. Is there anyway I can fix this so that when at different ID's in the URL the content including cursors and links is hidden?
The CSS for content:
.content {
float:left;
margin:40px;
position:absolute;
top:200px;
width:600px;
z-index:9999;
-webkit-font-smoothing:antialiased;
}
The Main JS:
jQuery(document).ready(function() {
/* How to Handle Hashtags */
jQuery(window).hashchange(function(){
var hash = location.hash;
jQuery('a[href='+hash+']').trigger('click');
});
/* Main Navigation Clicks */
jQuery('.main-nav ul li a').click(function() {
var link = jQuery(this).attr('href').substr(1);
if ( !jQuery('section.content.show, section#' + link).is(':animated') ) {
jQuery('.main-nav ul li a').removeClass('active'); //remove active
jQuery('section.content.show').addClass('show').animate({'opacity' : 0}, {queue: false, duration: 1000,
complete: function() {
jQuery('a[href="#'+link+'"]').addClass('active'); // add active
jQuery('section#' + link).addClass('show').animate({'opacity' : 1}, {queue: false, duration: 1000});
}
});
}
});
});
Are you perhaps looking for
{display:none} which makes things invisible and the space the element occupies is collapsed?

Counting element height in Javascript

I have such a Javascript code:
$content.each(function(i) {
var $el = $(this);
// save each content's height (where the menu items are)
// and hide them by setting the height to 0px
$el.data('height', $el.outerHeight(true)).css('height', '0px').show();
});
In such a situation:
<div id="sbi_container" class="sbi_container">
<div class="sbi_panel" data-bg="images/1.jpg">
About
<div class="sbi_content">
<ul>
<li>Subitem</li>
<li>Subitem</li>
<li>Subitem</li>
</ul>
</div>
</div>
<div class="sbi_panel" data-bg="images/2.jpg">
...
</div>
I don't know why, but when only an <ul> (which height we are counting) have a <li> with more than a one word in it, it adds a separate space below <ul>.
When there is only one long word, everything is ok.
Any ideas? :)
Try this
.your_ul { font-size: 0; }
.your_ul li { font-size: 1234px }
it might work.

Categories

Resources