We Keep Coding

Add image, replace, crop, delete section

I have an image gallery containing Add image, Add video, and description fields. After adding the image, I have a button on the top right with these functions: Replace the image, Adjust/crop, Delete, Add Description, and Delete Description that is shown in the attached image. Add Image function is working well, but I don't have an idea about the rest of the sections that replace image, crop, and etc.
Can someone help me to find out the solution or does someone have a reference like this?
<div class="blog-box">
<div class="c-share">
<input class="c-share__input" type="checkbox" id="checkbox5">
<label class="c-share__toggler" for="checkbox5">
<span class="c-share__icon"></span>
</label>
<ul class="c-share_options">
<li><img src="images/icon/replace-icon.png" class="mr-5">Replace Image</li>
<li><img src="images/icon/crop-icon.png" class="mr-5">Adjust / Crop</li>
<li><img src="images/icon/delete-icon.png" class="mr-5">Delete</li>
<li><img src="images/icon/add-description-icon.png" class="mr-5">Add Description</li>
<li><img src="images/icon/add-description-icon.png" class="mr-5">Delete Description</li>
</ul>
</div>
<div class="tile">
<div class="flip-card-3D-wrapper">
<div id="flip-card">
<div class="flip-card-front">
<div class="img-wrap">
<div class="cropme" id="landscape" style="width: 350px; height: 400px;"></div>
</div>
<button id="flip-card-btn-turn-to-back">Add Video</button>
<textarea name="form_message" class="form-control required border-r-none ht-gallery-new" rows="5" placeholder="Add Description" aria-required="true"></textarea>
</div>
<div class="flip-card-back"><div class="inner">
<div class="description">
<p><strong>Note:</strong> Click here to see how to find embedded video url</p>
<input type="text" required="" placeholder="Paste Embedded Video Url Here" name="gmap" class="form-control allow_only_alphabet space video-url-new">
<textarea name="form_message" class="form-control required border-r-none add-des-new" rows="5" placeholder="Add Description" aria-required="true"></textarea>
</div>
</div>
<img src="images/return-btn.png" id="flip-card-btn-turn-to-front" class="return-btn-bg"></div>
</div>
</div>
<div class="clear">
</div>
</div>
</div>

I dont know what js framework you are using, or if any of your backend stuff. but this jquery solution might help you:
Not able to replace the image in the place of old image using javascript
there is a link there to a snippet where he made a image replacer that allows you to crop the image before replacing. its not working perfectly, but maybe you can work with it.
I would change it to take image URLs tho.
because then for delete, it could be done with a button that sets the src of the img-tag to blank.
<div id='imagediv'>
</div>
<button onclick="myFunction()">Delete</button>
var html = "<img src='"+ link +"' >"
var link = "urltoimage.com/picture.jpg"
function myFunction() {
link = "path to blank image"
document.getElementById("imageDiv").innerHTML = html;
}
i havent tested this, and its not the most amazing way of doing things, but i hope its of some help :)

Why do the images not change to previous ones on hover?

The mouse hover is showing the <div>s normally but after the first time I move the mouse it no longer shows the other <div>s. It eventually stays on the last image and doesn’t change to another.
I tried with fadeToggle but I would like it to be fixed to the last image that appeared, but fadeToggle hides the last image when you mouse out.
$('.second').hover(function() {
$('.showsecond').fadeIn();
});
$('.third').hover(function() {
$('.showthird').fadeIn();
});
$('.fourth').hover(function() {
$('.showfourth').fadeIn();
});
$('.fifth').hover(function() {
$('.showfifth').fadeIn();
});
.menuimage {
display: none;
position: absolute;
}
.menuimagefirst {
display: block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-6">
<ul>
<li class="first">first</li>
<li class="second">second</li>
<li class="third">third</li>
<li class="fourth">fourth</li>
<li class="fifth">fifth</li>
</ul>
</div>
<div class="col-6">
<div class="menuimage menuimagefirst showfirst">
<img src="https://i.imgur.com/o87PUwV.jpg" />
</div>
<div class="menuimage showsecond">
<img src="https://i.imgur.com/ICs7TVH.jpg" />
</div>
<div class="menuimage showthird">
<img src="https://i.imgur.com/n9gdy8N.jpg" />
</div>
<div class="menuimage showfourth">
<img src="https://i.imgur.com/o87PUwV.jpg" />
</div>
<div class="menuimage showfifth">
<img src="https://i.imgur.com/ICs7TVH.jpg" />
</div>
</div>
https://jsfiddle.net/castordida/fwou1hvg/17/
I expected it to always show the last image and keep that image until I hover on another link.
UPDATE 29/08/19:
Sorry i did not mention that what i am using is in the wordpress menu, so i made use of classes and not data-toggle unfortunately. I tried to add data-toggle unsuccessfully to wordpress menu.

A bit a dirty work, but should work ;)
P.S : You can ignore .menu-item css as its just for aesthetics. Though rest of the css are important.
$('.menu-item').mouseenter(function()
{
var $this = $(this);
var hover_elem_classes = $this.attr("class");
var class_list;
class_list = hover_elem_classes.split(" ");
var currentImageClass="";
for(var i in class_list)
{
var styleClass = class_list[i];
if(styleClass.startsWith("show"))
{
currentImageClass = styleClass;
break;
}
}
var $activeImg = $(".menuimage."+currentImageClass);
if(!$activeImg.hasClass("active"))
{
$(".menuimage.active").stop().fadeOut().removeClass("active");
$activeImg.addClass("active").fadeIn();
}
});
.menuimage{display:none;position:absolute;}
.menu-item{padding:5px 10px;list-style-type:none;display:inline;text-transform:uppercase;}
.menuimage.active{z-index:10;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-6">
<ul>
<li class="menu-item showfirst adasd adasd">first</li>
<li class="menu-item showsecond zxczxc xczxczc">second</li>
<li class="menu-item showthird fghfgh ghfgh">third</li>
<li class="menu-item showfourth adasdg gfhfgh">fourth</li>
<li class="menu-item showfifth zxczxc czxc">fifth</li>
</ul>
</div>
<div class="col-6">
<div class="menuimage active showfirst" style="display:block;">
<img src="https://i.imgur.com/o87PUwV.jpg" />
</div>
<div class="menuimage showsecond">
<img src="https://i.imgur.com/ICs7TVH.jpg" />
</div>
<div class="menuimage showthird">
<img src="https://i.imgur.com/n9gdy8N.jpg" />
</div>
<div class="menuimage showfourth">
<img src="https://i.imgur.com/o87PUwV.jpg" />
</div>
<div class="menuimage showfifth">
<img src="https://i.imgur.com/ICs7TVH.jpg" />
</div>
</div>

Problem is you do not hide elements after they are shown so when you have an element on top of another element it will not be visible. So you need to hide them.
$("li[data-toggles]").on("mouseenter", function () {
$(".menuimage.active").stop().hide();
$($(this).data('toggles')).stop().fadeIn().addClass('active');
})
.menuimage {
display: none;
position: absolute;
}
.menuimagefirst {
display: block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-6">
<ul>
<li class="first" data-toggles=".showfirst">first</li>
<li class="second" data-toggles=".showsecond">second</li>
<li class="third" data-toggles=".showthird">third</li>
<li class="fourth" data-toggles=".showfourth">fourth</li>
<li class="fifth" data-toggles=".showfifth">fifth</li>
</ul>
</div>
<div class="col-6">
<div class="menuimage menuimagefirst showfirst">
<img src="https://i.imgur.com/o87PUwV.jpg" />
</div>
<div class="menuimage showsecond">
<img src="https://i.imgur.com/ICs7TVH.jpg" />
</div>
<div class="menuimage showthird">
<img src="https://i.imgur.com/n9gdy8N.jpg" />
</div>
<div class="menuimage showfourth">
<img src="https://i.imgur.com/o87PUwV.jpg" />
</div>
<div class="menuimage showfifth">
<img src="https://i.imgur.com/ICs7TVH.jpg" />
</div>
</div>

You've got a lot of unnecessary code here and it's contributing to your issues.
There is no need to create an img element for each picture you wish to show. Since you only want to show one image at a time, one img element is all you need. You'll just programatically change its source as needed. The image paths themselves will be kept in an array and a counter will be used to keep track of which index from the array to use as the source for the image element.
By eliminating the multiple img elements, you can eliminate the CSS that positions them, which is the source of the issue you are currently facing (layering of images).
Also, don't use a elements unless you are navigating somewhere when they are clicked as a elements are exclusively for navigation. Instead, you can set up your event on the li element that the user will be mousing over.
let imgs = [
"https://i.imgur.com/o87PUwV.jpg",
"https://i.imgur.com/ICs7TVH.jpg",
"https://i.imgur.com/n9gdy8N.jpg",
"https://i.imgur.com/o87PUwV.jpg",
"https://i.imgur.com/ICs7TVH.jpg"
];
let idx = 0;
$('.imgNav').on("mouseover", function() {
$(".menuimage").fadeOut(function(){
// As long as the index is less than the highest one in the array...
if(idx < (imgs.length - 1)){
// Set the source of the image element to the next path in the array
$(".menuimage")[0].src = imgs[++idx];
} else {
// Otherwise, reset the index
idx = 0;
}
// Show the image element now that its source has been changed.
$(".menuimage").fadeIn();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-6">
<ul>
<li class="imgNav">first</li>
<li class="imgNav">second</li>
<li class="imgNav">third</li>
<li class="imgNav">fourth</li>
<li class="imgNav">fifth</li>
</ul>
</div>
<div class="col-6">
<img class="menuimage" src="https://i.imgur.com/o87PUwV.jpg">
</div>

Looping through ul li and using insertBefore to move image up two elements

I am learning js and jquery and have been trying to solve this litle issue I am having when trying to loop through a ul on the page and move a dom element specifically an image up two levels in my html. Here is what the html looks like:
<ul class="feedEkList">
<li class="slick-slide">
<div class="featured-title">
<div class="post-title">
some text
</div>
<div class="post-excerpt">
<img src="imageurl.jpg" class="wp-post-image">
<p>Post Description.</p>
</div>
</div>
</li>
</ul>
There are 10 li items in my ul but for readability purpose I only included one so you can see my html structure.
My javascript seems to be adding all the images before every featured-title div giving me piles of pictures instead of the one that is associated with that li.
$(function() {
$('.wp-post-image').insertBefore($('.featured-title'));
});
So then I tried this using each but it does not seem to do anything.
$(function() {
$('.feedEkList > li > .featured-title > .post-excerpt > .wp-post-image').each(function() {
$('.wp-post-image').insertBefore($('.featured-title'));
});
});
I was thinking maybe i need to use "this" in the code somewhere but I am new to javascript and not sure how to properly use "this" with the insert before, or if "this" is even the best option.
$('this.wp-post-image').insertBefore($('this.featured-title'));
Can anyone help me figure out what I am doing wrong? It is driving me nuts!

You need to iterate each image
For each image, get his parent .slick-slide.
Prepend the image to the .slick-slide using .prepend
Optional: If you need to insertBefore .featured-title see the comment.
$('.wp-post-image').each(function() {
var $this = $(this),
parentLi = $this.parents('.slick-slide').first();
$this.prependTo(parentLi);
//$this.insertBefore(parentLi.find('.featured-title'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="feedEkList">
<li class="slick-slide">
<div class="featured-title">
<div class="post-title">
some text
</div>
<div class="post-excerpt">
<img src="http://i.stack.imgur.com/FgiPG.jpg" class="wp-post-image" />
<p>Post Description.</p>
</div>
</div>
</li>
<li class="slick-slide">
<div class="featured-title">
<div class="post-title">
some text
</div>
<div class="post-excerpt">
<img src="http://i.stack.imgur.com/FgiPG.jpg" class="wp-post-image" />
<p>Post Description.</p>
</div>
</div>
</li>
<li class="slick-slide">
<div class="featured-title">
<div class="post-title">
removed the "wp-post-image" class to show how it was look before
</div>
<div class="post-excerpt">
<img src="http://i.stack.imgur.com/FgiPG.jpg" />
<p>Post Description.</p>
</div>
</div>
</li>
</ul>

Get data from element without id or class

I am building a Chrome extension (and therefore can only use JavaScript) and I need to get the link that resides in the h2 with the heading2 class.
However, there are multiple h2 items with that class (not shown here), and I will not know what the link will point to, as it changes monthly.
In this example, the content of the header is "Think before you tweet". It will always be under another header that contains the words "Featured Topic."
What I am looking to get is the /think_before_you_tweet from the href= of that h2 item. It shows that I have already completed the topic underneath the h2, but that will not always be the case.
Here is the code for the website:
<div class="chosen_for_you_section">
<div class="internal_container">
<h2 class="section_header"><img src="/public/s360/img/360-spinner.png" class="s360LogoHeader">Featured Topic <i class="fa fa-info-circle"></i> <span class="infoTxt">Read about what to do</span></h2>
<article class="article_block masonry_item " data-article_id="431">
<div class="article_image">
<img src="/thumb/public/media/nh/images/twitter_tweet_think_before_send.png?q=&h=278" />
<i class="fa fa-check-square-o article_complete article_type_icon" title="Article"></i>
<div class="action_icons">
<span class="like "><a title="Favorite"><i class="fa fa-heart"></i></a></span>
</div>
</div>
<header>
<h2 class="heading2">Think Before You Tweet!</h2>
<div class="article_required_complete">Congratulations, you've completed this required topic.</div>
<div class="category_blocks">
<p>
Social Media
</p>
</div>
</header>
</article>
<div class="focus_items">
<div class="home_side">
<p>
<img alt="" src="" style="width: 430px; height: 422px;" /><!-- I hid the img src here because it reveals some personal information and is not important -->
</p>
<p></p>
</div>
</div>
</div>
</div>
I can use jQuery in my extension, but I do not have any back-end capabilities.

Use jQuery :contains selector:
$('h2.section_header:contains("Featured Topic") + article a')[0].href

Looks like you've gotta loop through the h2.section_header headers, see if the text matches whatever you want, and then grabs the link from the header following itself.
$('h2.section_header').each(function(index, element) {
var $element = $(element);
if ($element.text().match(/Featured Topic/i)) {
$('#result').html($element.next('article').find('h2.heading2 a').attr('href'));
}
});
#result {
border: 3px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>
<div class="chosen_for_you_section">
<div class="internal_container">
<h2 class="section_header"><img src="/public/s360/img/360-spinner.png" class="s360LogoHeader">Featured Topic <i class="fa fa-info-circle"></i> <span class="infoTxt">Read about what to do</span></h2>
<article class="article_block masonry_item " data-article_id="431">
<div class="article_image">
<img src="/thumb/public/media/nh/images/twitter_tweet_think_before_send.png?q=&h=278" />
<i class="fa fa-check-square-o article_complete article_type_icon" title="Article"></i>
<div class="action_icons">
<span class="like "><a title="Favorite"><i class="fa fa-heart"></i></a></span>
</div>
</div>
<header>
<h2 class="heading2">Think Before You Tweet!</h2>
<div class="article_required_complete">Congratulations, you've completed this required topic.</div>
<div class="category_blocks">
<p>
Social Media
</p>
</div>
</header>
</article>
<div class="focus_items">
<div class="home_side">
<p>
<img alt="" src="" style="width: 430px; height: 422px;" /><!-- I hid the img src here because it reveals some personal information and is not important -->
</p>
<p></p>
</div>
</div>
</div>
</div>

with jQuery's :contains selector use this:
jQuery('h2:contains("Featured Topic") ~ article h2.heading2 a').attr('href')
try at http://jsfiddle.net/ug01a0d2/
without jQuery try to bind to class "section_header" or use a cycle with the textContent check to iterate all "h2.section_header"

If there are multiple H2 class heading2 :
$('h2[class*="heading2"] a').each(function(){
var href = $(this).attr('href');
// Do what you want with this href
});

Use XPath! The syntax is pretty, uh, unfortunate, but it's very powerful:
var result = document.evaluate('//h2[#class="section_header"]/following-sibling::article//h2[#class="heading2"]/a', document, null, XPathResult.ANY_TYPE, null );
That should select that anchor node. I'm not sure if it's available to extensions, but Chrome defines a handy helper method called $x that eliminates all that boilerplate around the query.
More information: https://developer.mozilla.org/en-US/docs/Introduction_to_using_XPath_in_JavaScript

Onmouseover on HTLML li tag

I'm new to asp.net (and to stack overflow :) ) and I want a hint element to be shown on onmouseover event of li tags. I don't know how to set the position of the hint element. My code is something like this:
<script language="javascript" type="text/javascript">
function onmouseoveragent(e) {
document.getElementById("agentVisit").style.display = "block";
document.getElementById("agentVisit").offsetLeft = e.offsetLeft; /*e.????*/
document.getElementById("agentVisit").offsetTop = e.offsetTop; /*e.????*/
};
</script>
<div class="node">
<div class="taxonomy"></div>
<div class="content">
<div id="contact-map">
<ul>
<li id="city1" onmouseover= "onmouseoveragent(this)">
<a "blabla">
<span class="hideme">city name</span>
</a>
<p class="hideme"> city name <strong class="tel">123456789</strong></p>
</li>
/*other list items*/
</ul>
</div>
<div class="hr">
</div>

Unless you need a very good looking design to show your hint, you can use
<li title="city name">
update:
Check if it helps:
http://jsfiddle.net/ysuw5/91/