How to remove class name from content copied using the clone()

How to remove class name from content copied using the clone() - javascript

I have a website and we're trying to setup a continues looping similar to this stack answer OR What Lies Below website
In our website we also have some elements that are being parallaxed. The parallaxed elements all have the class name "parallax". When I'm cloning and appending the cloned content, it's using the parallax class name and I need to get rid of it. So I thought I could just
JS
var clone = $("body").contents().clone();
var updatedClone = $(clone).find('.content').removeClass('parallax');
updatedClone.appendTo("body");
updatedClone.prependTo("body");
HTML
<body>
<main class"content">
<div class="" style="margin-top:0%">
<ul id="scene-header">
<li class="layer" id="logo" style="text-align: center;"> <img src="dist/images/logoSVG.svg" alt="" class="parallax logo"> </li>
<li class="layer" id="ice-hole" rotate-speed="4"> <img src="dist/images/snow_layer_03.png" alt="" class="parallax ice-hole"> </li>
</ul>
<div>
<ul class="divider">
<li class="" id="snow-layer"> <img class="snow-layer parallax" src="dist/images/snow_cap.png" style="width: 100%;"> </li>
<li class="" id="ice-layer"> <img class="ice-layer parallax" src="dist/images/ice.png" class="rellax" style="width: 100%;"> </li>
<li class="" id="darkice-layer"> <img class="darkice-layer parallax" src="dist/images/darkice.png" style="width: 100%;"> </li>
<li class="" id="backgroundcolor-layer"></li>
</ul>
</div>
</div>
</main>
</body>
But the appended content on the site is still adding the "parallax" class name. What simple thing am I forgetting?

clone() return jQuery object so you can use it to find and remove class
Try this :
var clone = $('body').find('.content').clone();
clone.find('.parallax').removeClass('parallax'); // Find all content with class parallax and remove class
clone.appendTo('body');
//clone.prependTo('body');
.parallax {
border: 5px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main class="content">
<div class="" style="margin-top:0%">
<ul id="scene-header">
<li class="layer" id="logo" style="text-align: center;"> <img src="dist/images/logoSVG.svg" alt="" class="parallax logo"> </li>
<li class="layer" id="ice-hole" rotate-speed="4"> <img src="dist/images/snow_layer_03.png" alt="" class="parallax ice-hole"> </li>
</ul>
<div>
<ul class="divider">
<li class="" id="snow-layer"> <img class="snow-layer parallax" src="dist/images/snow_cap.png" style="width: 100%;"> </li>
<li class="" id="ice-layer"> <img class="ice-layer parallax" src="dist/images/ice.png" class="rellax" style="width: 100%;"> </li>
<li class="" id="darkice-layer"> <img class="darkice-layer parallax" src="dist/images/darkice.png" style="width: 100%;"> </li>
<li class="" id="backgroundcolor-layer"></li>
</ul>
</div>
</div>
</main>

Don't include the period in the class name on the removeClass function.
var updatedClone = $(clone).find('.content').removeClass('parallax');
https://api.jquery.com/removeclass/

Related

I need value of div custom attribute in Jquery [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
Please check code below ,
<div class="cp_option_color">
<div id="cp-power-manual" class="configure-seats-section">
<!-- power or manual append -->
</div>
<div class="validation-message" style="display:none">Please Select Color</div>
<div class="cp-color-item-content" data-name="199538" style="display: none;">
<h2>Black</h2>
<ul>
<li data-li="Power Recline">
<div class="cp-recline" recline="power">
Power Recline:
<span class="">
<img src="checkmark.png" alt="">Ships in
<lable class="shipmentmsg">6 Days</lable>
</span>
</div>
</li>
</ul>
</div>
<div class="cp-color-item-content" data-name="199539" style="display: inline-block;">
<h2>Brown</h2>
<ul>
<li data-li="Power Recline">
<div class="cp-recline" recline="manual">
Power Recline:
<span class="">
<img src="checkmark.png" alt="">Ships in
<lable class="shipmentmsg">6 Days</lable>
</span>
</div>
</li>
</ul>
</div>
</div>
I need custom attribute value of 'recline' attribute. If you see, there are same class name of its parent div(cp-color-item-content). But one is display none and another is display block. So, i need custom attribute value of 'display:block' div (i need 'manual' value).
Your help would be appreciated.
Thanks

While you should be using data-recline="power" for custom attributes, you can use
.attr("recline")
the selector can include :visible to exclude the hidden one, giving:
$(".cp-recline:visible").attr("recline")
Updated snippet (no change to HTML)
console.log($(".cp-recline:visible").attr("recline"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cp-power-manual" class="configure-seats-section">
<!-- power or manual append -->
</div>
<div class="validation-message" style="display:none">Please Select Color</div>
<div class="cp-color-item-content" data-name="199538" style="display: none;">
<h2>Black</h2>
<ul>
<li data-li="Power Recline">
<div class="cp-recline" recline="power">
Power Recline:
<span class="">
<img src="checkmark.png" alt="">Ships in
<lable class="shipmentmsg">6 Days</lable>
</span>
</div>
</li>
</ul>
</div>
<div class="cp-color-item-content" data-name="199539" style="display: inline-block;">
<h2>Brown</h2>
<ul>
<li data-li="Power Recline">
<div class="cp-recline" recline="manual">
Power Recline:
<span class="">
<img src="checkmark.png" alt="">Ships in
<lable class="shipmentmsg">6 Days</lable>
</span>
</div>
</li>
</ul>
</div>
</div>

For defining your own custom attributes in HTML, you need to use the prefix as data-*
To get the value of that custom attributes you have defined in your HTML through jQuery, you can use the .data() method.
Check the below demo:
let customAttributeValue = $('#this-is-my-id').data('this-is-custom-id');
console.log(customAttributeValue)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="this-is-my-id" data-this-is-custom-id="manual"></div>
Now coming to your code, you can try this:
let reclineValue = $('.cp-recline:visible').data('recline');
console.log("reclineValue is: ", reclineValue)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cp_option_color">
<div id="cp-power-manual" class="configure-seats-section">
<!-- power or manual append -->
</div>
<div class="validation-message" style="display:none">Please Select Color</div>
<div class="cp-color-item-content" data-name="199538" style="display: none;">
<h2>Black</h2>
<ul>
<li data-li="Power Recline">
<div class="cp-recline" data-recline="power">
Power Recline:
<span class="">
<img src="checkmark.png" alt="">Ships in
<lable class="shipmentmsg">6 Days</lable>
</span>
</div>
</li>
</ul>
</div>
<div class="cp-color-item-content" data-name="199539" style="display: inline-block;">
<h2>Brown</h2>
<ul>
<li data-li="Power Recline">
<div class="cp-recline" data-recline="manual">
Power Recline:
<span class="">
<img src="checkmark.png" alt="">Ships in
<lable class="shipmentmsg">6 Days</lable>
</span>
</div>
</li>
</ul>
</div>
</div>

Using Javascript and JQuery to create a filter button

I'm trying to make my button functional on my website but for some reason it isn't working. I have been working on it endlessly and need some outside. If you could help with figuring out what I am doing wrong I would really appreciate it. I am still learning JavaScript and JQuery so all of this is new to me.
HTML Code:
<div id="portfolio">
<div class="container">
<div class="row">
<div class="heading">
<h2>PORTFOLIO</h2>
</div>
<div class="filter">
<ul id="filters">
<li><button class="btn active" data-filter="all">ALL</a></li>
</ul>
</div>
<div class="itemsContainer">
<ul class="items">
<li>
<div class="item" div class="column apps">
<img src="triviastartthumbnail.jpg">
<h4>Movie Trivia App</h4>
<p>This app was created to test users knowledge on how well they know their movies
and actors/actresses</p>
</div>
<ul class="img-list">
<span class="link">
<a href="https://vshorty2003.github.io/movietrivia/"><i class="fa fa-link">
</i></a></span>
<span class="search">
<a href="movietriviaappstart.JPG" figcaption="Movie Trivia App" /><i
class="fa fa-search"></i></a>
</span>
<li class="img-item">
<img class='item-img' src="html5-logo.png" alt="HTML icon" />
</li>
<li class="img-item">
<img class='item-img' src="css-3-logo.png" alt="CSS icon"/>
</li>
<li class="img-item">
<img class='item-img' src="js-icon-26.jpg" alt="JavaScript icon" />
</li>
<li class="img-item">
<img class='item-imgjq' src="jquery-icon-16-revised.png" alt="JQuery icon"/>
</li>
</li>
</ul>
CSS code:
/*for filtered buttons*/
li{
display: inline;
list-style: none;
}
JavaScript code:
$("button").click(function(){
$("button").removeClass("btn active");
$(this).addClass("btn active");
var dataFilter = $(this).data('filter');
if(dataFilter == "all") {
$(".filter ul").show();
}
else
{
$(".filter ul").hide();
$("." + dataFilter).show();
}
});

How to get specific HTML or text in website in C#

So I have this HTML website that has code like this:
<ul class="WCVH WKVH" role="list">
<li class="WIUH" role="listitem">
<div class="WKUH">
<label id="labeledImage.POSTED_DATE--uid6-formLabel" data-automation-id="formLabel"></label>
</div>
<div class="WMUH">
<div class="WDBN WMP WDCN" data-automation-id="responsiveMonikerInput" id="labeledImage.POSTED_DATE--uid6">
<div class="WIBN">
<ul tabindex="-2" class="WCHJ WHBN" role="list" data-automation-id="selectedItemList">
<li class="WGHJ" role="presentation">
<div class="WOGJ WFHJ" tabindex="-2" id="b7e15031a749444a855366b1f1a87a46" data-automation-id="menuItem" aria-label="Posted Today, press delete to clear value." role="listitem" aria-posinset="1" aria-setsize="1">
<div class="WPGJ">
<div class="WACI">
<ul class="WCBI WIBI" role="presentation">
<li class="WPBI"><img class="gwt-Image WHWI WFPJ WKQJ" src="https://vps-wd5.myworkdaycdn.com/assets/ui-html/update/WorkdayApp/8CB9E57BEDDE62E4F67DEB6E19F5308C.cache.png" draggable="false" data-automation-id="POSTED_DATE_charm" alt="" aria-label=""
aria-labelledby="promptOption"></li>
</ul>
<div class="gwt-Label WBCI" data-automation-id="promptOption" id="promptOption" title="Posted Today" aria-label="Posted Today" data-automation-label="Posted Today" aria-labelledby="labeledImage.POSTED_DATE--uid6-formLabel">Posted Today</div>
<ul class="WCBI"></ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="WIUH" role="listitem">
<div class="WKUH">
<label id="labeledImage.JOB_TYPE--uid7-formLabel" data-automation-id="formLabel"></label>
</div>
<div class="WMUH">
<div class="WDBN WMP WDCN" data-automation-id="responsiveMonikerInput" id="labeledImage.JOB_TYPE--uid7">
<div class="WIBN">
<ul tabindex="-2" class="WCHJ WHBN" role="list" data-automation-id="selectedItemList">
<li class="WGHJ" role="presentation">
<div class="WOGJ WFHJ" tabindex="-2" id="5c6eda594d0d46609fa4c8e2ff13e731" data-automation-id="menuItem" aria-label="Full time, press delete to clear value." role="listitem" aria-posinset="1" aria-setsize="1">
<div class="WPGJ">
<div class="WACI">
<ul class="WCBI WIBI" role="presentation">
<li class="WPBI"><img class="gwt-Image WHWI WFPJ WCQJ" src="https://vps-wd5.myworkdaycdn.com/assets/ui-html/update/WorkdayApp/8CB9E57BEDDE62E4F67DEB6E19F5308C.cache.png" draggable="false" data-automation-id="JOB_TYPE_charm" alt="" aria-label="" aria-labelledby="promptOption"></li>
</ul>
<div class="gwt-Label WBCI" data-automation-id="promptOption" id="promptOption" title="Full time" aria-label="Full time" data-automation-label="Full time" aria-labelledby="labeledImage.JOB_TYPE--uid7-formLabel">Full time</div>
<ul class="WCBI"></ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="WIUH" role="listitem">
<div class="WKUH">
<label id="labeledImage.JOB_REQ--uid8-formLabel" data-automation-id="formLabel"></label>
</div>
<div class="WMUH">
<div class="WDBN WMP WDCN" data-automation-id="responsiveMonikerInput" id="labeledImage.JOB_REQ--uid8">
<div class="WIBN">
<ul tabindex="-2" class="WCHJ WHBN" role="list" data-automation-id="selectedItemList">
<li class="WGHJ" role="presentation">
<div class="WOGJ WFHJ" tabindex="-2" id="cc054d6cca664a3282855669711520d5" data-automation-id="menuItem" aria-label="T_R_1616417, press delete to clear value." role="listitem" aria-posinset="1" aria-setsize="1">
<div class="WPGJ">
<div class="WACI">
<ul class="WCBI WIBI" role="presentation">
<li class="WPBI"><img class="gwt-Image WHWI WFPJ WBQJ" src="https://vps-wd5.myworkdaycdn.com/assets/ui-html/update/WorkdayApp/8CB9E57BEDDE62E4F67DEB6E19F5308C.cache.png" draggable="false" data-automation-id="JOB_REQ_charm" alt="" aria-label="" aria-labelledby="promptOption"></li>
</ul>
<div class="gwt-Label WBCI" data-automation-id="promptOption" id="promptOption" title="T_R_1616417" aria-label="T_R_1616417" data-automation-label="T_R_1616417" aria-labelledby="labeledImage.JOB_REQ--uid8-formLabel">T_R_1616417</div>
<ul class="WCBI"></ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
I need to get the specific Requisition ID: T_R_1616417 but I got error that they cannot find the ID in the div element tag.
Error Code
`An unhandled exception of type 'WatiN.Core.Exceptions.ElementNotFoundException' occurred in WatiN.Core.dll
Additional information: Could not find DIV element tag matching criteria: Attribute 'id' equals 'labeledImage.JOB_REQ--uid8' at https://hpe.wd5.myworkdayjobs.com/en-US/Jobsathpe/job/BEP01---Embassy-Prime-BEP01/AMS-Profiling-Data-Specialist_1000713
`
Here's my code in C# in grabbing the specific item:
reqID = browser.Div(Find.ById("labeledImage.JOB_REQ--uid8")).OuterText.ToString();
How can i get the correct value "T_R_1616417" in this line of html code in C# format?

Show div element when all images within it have loaded

I have the following div element and within it I load images. I only want to show the div#main-slider when all the images have loaded within it:
I have tried the following jQuery:
$(window).load(function() {
$('#main-slider').animate({'opacity':1}, 300);
});
But it shows the div even when all the images aren't loaded.
CSS
#main-slider,
#main-slider #bo,
#main-slider #bg,
#main-slider #hugo{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
}
HTML
<div id="main-slider" class="flexslider">
<div id="boss" class="tab-container">
<ul class="slides boss-slides clearfix">
<li id="1">
<img src="mobilelp/img/boss_mobile_1.png" />
</li>
<li id="2">
<img src="mobilelp/img/boss_mobile_2.png" />
</li>
<li id="3">
<img src="mobilelp/img/boss_mobile_3.png" />
</li>
</ul>
</div>
<div id="bo" class="tab-container">
<ul class="slides bo-slides clearfix">
<li id="1">
<img src="mobilelp/img/bo_mobile_1.png" />
</li>
<li id="2">
<img src="mobilelp/img/bo_mobile_2.png" />
</li>
<li id="3">
<img src="mobilelp/img/bo_mobile_3.png" />
</li>
</ul>
</div>
<div id="bg" class="tab-container">
<ul class="slides bg-slides clearfix">
<li id="1">
<img src="mobilelp/img/bg_mobile_1.png" />
</li>
<li id="2">
<img src="mobilelp/img/bg_mobile_2.png" />
</li>
<li id="3">
<img src="mobilelp/img/bg_mobile_3.png" />
</li>
</ul>
</div>
<div id="hugo" class="tab-container">
<ul class="slides hugo-slides clearfix">
<li id="1">
<img src="mobilelp/img/hugo_mobile_1.png" />
</li>
<li id="2">
<img src="mobilelp/img/hugo_mobile_2.png" />
</li>
<li id="3">
<img src="mobilelp/img/hugo_mobile_3.png" />
</li>
</ul>
</div>
<ul class="flex-direction-nav">
<li>Previous
</li>
<li>Next
</li>
</ul>
</div>

I also had this requirement. I found success using the imagesLoaded plugin.
Pseudo code based on what I currently use in my application:
$('#main-slider').imagesLoaded({
progress: function (isBroken, $allImages, $loadedImages, $brokenImages) {
console.log('ok: ' + $loadedImages.length + ', bad: ' + $brokenImages.length);
},
done: function ($images) {
$('#main-slider').animate({'opacity':1}, 300);
}
});

It can get pretty simple (fiddle):
$(function () {
var $img = $(".waitFor img"),
n = $img.length;
$img.on("load error", function () {
!--n && $(".waitFor").fadeIn(300);
});
});
This effectively waits for all images to either load or error out before fading in the entire container.

This is a simple enough problem that I wouldn't want to use a plugin for it. It's actually quite simple, since jQuery provides a convinient .load() function to all image elements:
$(function(){
var loaded = 0;
var total = 0;
$(".waitFor img").each(function(i, e){
total++;
$(e).load(function(){
loaded++;
if(loaded == total)
console.log("Everything loaded");
});
});
});
JsFiddle

how to remove parent div when click on child inner anchor element?

this is my html code for aove fig.....
when i click on delete (id ="outdelete") total div (id="rightoutimage") should be deleted.......................
<div id="rightoutputimgae">
<div id="rightimgId" class="rightimg" rel="tooltip" content="<img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
<div id="outputimageId" class="outputimage"><img src="jqe13/image/1.jpg" alt="Right Bottom Image">
</div>
</div>
<ul>
<li id="outcheckbox"><input name="outCheck" type="checkbox"></li>
<li id="outedit"><img src="jqe13/image/edit_s.PNG" alt="edit" title="Edit"></li>
<li id="outdelete"> <img src="jqe13/image/delet_c.PNG" alt="delete" title="Delete"></li>
<li id="outfullscreen"><img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen" title="Full Screen"></li>
<li id="outshare"><img src="jqe13/image/share_c.PNG" alt="Share" title="Share">
<div id="menu">
<div id="tooltip_menu">
<img src="jqe13/image/email.PNG" alt="Email" title="Email">
<img src="jqe13/image/fb.PNG" alt="Facebook" title="Facebook">
<img src="jqe13/image/twitter.png" alt="Twitter" title="Twitter">
<img src="jqe13/image/save.PNG" alt="Save" title="Save">
</div>
</div>
</li>
<li id="outprint"><img src="jqe13/image/print.PNG" class="printMe" alt="Print" title="Print"></li>
</ul>
</div>
this is my scripting code........
<script>
function deleteImg(id11) {
id11 = document.getElementById("outdelete");
$('#+id11').remove();
}
</script>

$('#outdelete').click(function(){
$("#rightoutputimgae").remove();
});

Here's another option for you, which you can see a working example here:
http://jsfiddle.net/TdLSy/
$(document).ready(function(){
$("li a").click(function(event){
event.preventDefault();
$(this).find('img').remove();
});
});
Along with your original HTML code:
<div id="rightoutputimgae">
<div id="rightimgId" class="rightimg" rel="tooltip" content="<img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
<div id="outputimageId" class="outputimage"><img src="jqe13/image/1.jpg" alt="Right Bottom Image">
</div>
</div>
<ul>
<li id="outcheckbox"><input name="outCheck" type="checkbox"></li>
<li id="outedit"><img src="jqe13/image/edit_s.PNG" alt="edit" title="Edit"></li>
<li id="outdelete"> <img src="jqe13/image/delet_c.PNG" alt="delete" title="Delete" /></li>
<li id="outfullscreen"><img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen" title="Full Screen"></li>
<li id="outshare"><img src="jqe13/image/share_c.PNG" alt="Share" title="Share">
<div id="menu">
<div id="tooltip_menu">
<img src="jqe13/image/email.PNG" alt="Email" title="Email">
<img src="jqe13/image/fb.PNG" alt="Facebook" title="Facebook">
<img src="jqe13/image/twitter.png" alt="Twitter" title="Twitter">
<img src="jqe13/image/save.PNG" alt="Save" title="Save">
</div>
</div>
</li>
<li id="outprint"><img src="jqe13/image/print.PNG" class="printMe" alt="Print" title="Print"></li>
</ul>
</div>

Change:
<li id="outdelete"><a href="#" onClick="deleteImg(outdelete)">
to:
<li id="outdelete"><a href="#" onClick="deleteImg(this)">
and your JS code:
<script>
function deleteImg(self) {
$(self).parents('#rightoutputimgae').get(0).remove();
}
</script>

Try this:
document.getElementById("rightoutimage").addEventListener("click", function(e) {
if(e.target.id === "outdelete") {
var parent = e.target.parentNode;
parent.parentNode.removeChild(parent);
}
});

You can do this:
$('#outdelete > a').click(function(){
$(this).closest('#rightoutputimgae').remove();
});

Develop Reference

JavaScript is the programming language of the Web.

How to remove class name from content copied using the clone() - javascript

Don't include the period in the class name on the removeClass function. var updatedClone = $(clone).find('.content').removeClass('parallax'); https://api.jquery.com/removeclass/

Related

I need value of div custom attribute in Jquery [closed]

Using Javascript and JQuery to create a filter button

How to get specific HTML or text in website in C#

Show div element when all images within it have loaded

how to remove parent div when click on child inner anchor element?

Categories

Resources