I have this little js which adds divs and its content on a click as plain text in the textarea:
var content = " ";
jQuery('body').on('click', '.btn_video', function() {
if(jQuery(this).text()=="ADD") {
jQuery(this).text("REMOVE");
jQuery(this).parents(".thumbnail").parent().addClass('selected');
} else{
jQuery(this).text("ADD");
jQuery(this).parents(".thumbnail").parent().removeClass('selected');
}
jQuery('.selected').each(function(){
content += jQuery(this).prop('outerHTML');
});
jQuery('#usp-custom-5').val(content);
});
This is the html that is added on a click
<div class="col-xs-12 col-md-4">
<div class="thumbnail">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/'+e.id+'?rel=0&modestbranding=1" frameborder="0" allowfullscreen></iframe>
</div>
<div class="caption">
<p>Duration: <span class="video-time">'+YTDurationToSeconds(e.contentDetails.duration)+'</span></p>
<button type="button" class="btn btn-danger btn-block btn_video"><strong>ADD</strong></button>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="thumbnail">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/'+e.id+'?rel=0&modestbranding=1" frameborder="0" allowfullscreen></iframe>
</div>
<div class="caption">
<p>Duration: <span class="video-time">'+YTDurationToSeconds(e.contentDetails.duration)+'</span></p>
<button type="button" class="btn btn-danger btn-block btn_video"><strong>ADD</strong></button>
</div>
</div>
</div>
<textarea id="usp-custom-5"></textarea>
I want to be able to add each html content when I click on the button without having repeated content and also be able to remove the single content when a user clicks on the button.
In the following jsfiddle if I click on the Add button i get repeated content
add var content = ''; at the beginning of your click function.
https://jsfiddle.net/q5070aa4/5/
what was happening before is that you were taking whatever content existed and adding whatever element text that was "selected" - and this would produce your duplicate data. you want to clear out the textarea on click so that only the "selected" elements text shows
try this: you can add remove selected class to div and read all div with selected class to get content and replace it in text area
jQuery(function(){
jQuery(".btn.btn-danger.btn-block").on("click", function(){
var text = $(this).text();
if(text=="ADD") {
jQuery(this).find("strong").text("REMOVE");
jQuery(this).closest(".col-xs-12.col-md-4").addClass("selected");
} else if(text == "REMOVE") {
jQuery(this).find("strong").text("ADD");
jQuery(this).closest(".col-xs-12.col-md-4").removeClass("selected");
}
var content = "";
jQuery(".col-xs-12.col-md-4.selected").each(function(){
content += '<div class="col-xs-12 col-md-4">' + $(this).html() + '</div>';
});
jQuery('#usp-custom-5').val(content);
});
});
JSFiddle Demo
Related
I have a code where the button and title are in same div container like this:
<div class="cmpl-teaserd__content">
<div class="cmpl-teaserd__pretitle">Featured Sample Title</div>
<div class="cmpl-teaserd__title wow animated" style="visibility: visible;">
<h2><b>Borcher</b> <span style="font-weight: normal;">Collection</span></h2>
</div>
<div class="cmpl-teaserd__description">
<p>Sample text Sample text Sample text Sample text</p>
</div>
<div class="cmpl-teaserd__action-container">
<a class="cmpl-teaserd__action-link" href="#.html" target="_self" title="">View Collection</a>
</div>
Am using the Code like this:
$(document).on("click","a.cmpl-teaserd__action-link",function(){
console.log("Title:" + $(this).text() + " Link Clicked");
});
Requirement:
I want to get the Title1(div.cmpl-teaserd__pretitle) & Title2(div.cmpl-teaserd__title wow animated) of the container once the link(a.cmpl-teaserd__action-link) got clicked.
Kindly provide your feedback to get the value
You can loop through all the divs inside the selected div and then maintain a counter to print just the div you want to print. It can be better implemented.
this might help.
$(document).on("click","a.cmpl-teaserd__action-link",function(){
var count = 1;
$('div.cmpl-teaserd__content div').each (function (count) {
count++;
if(count<3){
console.log("Title"+count +" "+ $(this).attr('class'));
}
});
});
I'm having 2 small issues with some JS below involving a modal and cloning/appending an image:
A button click opens the modal, the modal contains a search bar which populates the content with images. When an image is clicked, it's cloned and appended into another div (outside of modal on the main page) and the modal is closed.
After this is done one time, the button click no longer opens the modal again. How can I alter so that the appending of the images closes the modal but it can be re-opened?
Also, once the image is appended to a new div, if I click it it disappears. Is there a way to only append the image source without the class tag so that clicking on it in the new div won't make it disappear?
function appendSomeItems(url, id, name, style) {
return '<div><div class="md-card md-card-hover"> <div class="gallery_grid_item md-card-content getImage"> <img class ="uk-align-center imageClick" src="https://media.testsite' + url + '" alt=""></a> <div class="gallery_grid_image_caption"> <span class="gallery_image_title uk-text-truncate">' + name + '</span> <span>' + style + '</span> </div></div></div></div>';
}
$(document).on('click', '.imageClick', function handleImage() {
console.log('good');
var img = $(this).closest(".getImage").children("img").clone(true);
$("#holdImage").html('');
$("#holdImage").append(img);
$('#image-modal').hide();
});
<!--image placeholder->
<div id="holdImage" style="margin-top: 15px;">
</div>
<!--open modal-->
<div style="text-align: center;">
Choose an existing image
</div>
<!--Modal-->
<div id="image-modal" class="uk-modal">
<div class="uk-modal-dialog" style="width:80%;">
<a class="uk-modal-close uk-close"></a>
{!! Form::open(array('id' => 'search_form')) !!}
<div class="uk-grid">
<div class="uk-width-1-1">
<div class="md-card">
<div class="md-card-content">
<div class="input-group">
<input type="text" class="md-input" placeholder="Search" name="srch-term" id="srch-term">
<p class="text-center">Search for images by Name </p>
</div>
</div>
</div>
</div>
</div>
{!! Form::close() !!}
<br/>
<div id="imageResult" class="gallery_grid uk-grid-width-medium-1-5 uk-grid-width-large-1-6" data-uk-grid="{gutter: 16}">
</div>
<button style="display: none;" id="hidden_button"></button>
</div>
</div>
Main problem seems to be that you are hiding the entire modal using Jquery's hide() message (which will set display:none; on the element) rather than calling the modal's hide() message. This has also been mentioned on the Git repository as can be seen here.
Solution would be to call the proper hide method like so:
var modal = UIkit.modal("#image-modal");
modal.hide();
instead of
$('#image-modal').hide();
Regarding the other question: remove the class that has the click handler attached before adding it to the #holdImage placeholder:
var img = $(this).closest(".getImage").children("img").clone(true);
img.removeClass("FillInClassNameHere");
$("#holdImage").html('');
$("#holdImage").append(img);
As I don't have the class name for it, you will need to change FillInClassNameHere with the proper class name in your code.
I have dynamically generated div's whose content contains an anchor link and path to an image.
I also have a modal box with an image tag in.
What I am trying to do is onclick of the anchor link, set the image tag path which is in the modal box.
Currently what my code does is no matter what anchor link I click, its always setting image path to the first path link.
Here is my JSFiddle link
JSFiddle
My Code:
<div id="coupon-listing-items" class="shopping-listings listings">
<div class="left-split">
<a class="ads-links" title="Test Title One" href="http://www.test.com/"><h2>Test Title One</h2></a><div class="coupon-text">(Get 20% of by staying 2 nights)</div>
<span id="sLink" class="hide">http://via.placeholder.com/350x250</span>
</div>
<div class="left-split">
<a class="ads-links" title="Test Title Two" href="http://www.test.com/"><h2>Test Title Two</h2></a><div class="coupon-text"></div>
<span id="sLink" class="hide">http://via.placeholder.com/400x350</span>
</div>
</div>
<!-- Modal Box -->
<div class="modal CouponModal">
<span class="close-modal">×</span>
<div class="modal-content">
<input type="button" class="btnprint" name="btnprint" value="Print This Coupon" onclick="PrintC('cp-image')"/>
<div id="cp-image">
<img id="coupon-image" />
<div id="caption">
<span class="vist">Visit the website: <a id="c-weblink"></a></span>
</div>
</div>
</div>
</div>
$(".ads-links").each(function(index){
$(".ads-links").on("click", function(e){
e.preventDefault(); var imgsrc = document.getElementById('sLink')
$(".CouponModal").css('display', 'block');
$("#coupon-image").attr('src',imgsrc.innerHTML);
});
$(".close-modal").click(function(e) {
$(".CouponModal").css('display', 'none');
});
});
If you click on Test title one, you will image name 350x250 displayed in the modal box, and if you close the modal box and now click on test title two, instead displaying the image 450x350 just displays the first image.
What am I missing?
Thanks and appreciate it
You are selecting the first sLink no matter which is anchor is clicked.
var imgsrc = document.getElementById('sLink');
Instead you need to base this on the sLink closest to the anchor clicked.
var imgsrc = $(this).parent().find('#sLink')[0];
//This goes up a level and finds the sLink that is in that same parent//
Note
that an ID should be unique and is likely causing part of your confusion, in this case a class might be just as useful.
your outer loop is superfluous and might cause you trouble down the road.
Updated Your Fiddle: https://jsfiddle.net/0dmc9rvt/25/
$(".ads-links").each(function(index) {
$(this).on("click", function(e) {
e.preventDefault();
debugger;
$(".CouponModal").css('display', 'block');
$("#coupon-image").attr('src', $(this).parent().find('.sLink').html());
});
$(".close-modal").click(function(e) {
$(".CouponModal").css('display', 'none');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coupon-listing-items" class="shopping-listings listings">
<div class="left-split">
<a class="ads-links" title="Test Title One" href="http://www.test.com/">
<h2>Test Title One</h2>
</a>
<div class="coupon-text">(Get 20% of by staying 2 nights)</div>
<span class="hide sLink">http://via.placeholder.com/350x250</span>
</div>
<div class="left-split">
<a class="ads-links" title="Test Title Two" href="http://www.test.com/">
<h2>Test Title Two</h2>
</a>
<div class="coupon-text"></div>
<span class="hide sLink">http://via.placeholder.com/400x350</span>
</div>
</div>
<!-- Modal Box -->
<div class="modal CouponModal">
<span class="close-modal">×</span>
<div class="modal-content">
<input type="button" class="btnprint" name="btnprint" value="Print This Coupon" onclick="PrintC('cp-image')"/>
<div id="cp-image">
<img id="coupon-image" />
<div id="caption">
<span class="vist">Visit the website: <a id="c-weblink"></a></span>
</div>
</div>
</div>
</div>
I am trying to display a hosted url application in a particular div though an onclick on the anchor and this should open in same tab.
Code in Context
<div class="container-fluid text-center col-md-12 collapse out" id="orange" style="height: 30px; background-color: orange">
<a type="button" class="btn btn-success" id="btnk" href="http://www.google.com" onclick="return go(this);">Google</a>
</div>
Function used for the above
function go(obj) {
var page = obj.href;
document.getElementById('g2g').innerHTML = '<object data="' + page + '" type="text/html"><embed src="' + page + '" type="text/html" /></object>';
return false;
}
});
function setURL(url) {
document.getElementById('g2g').src = url;
}
This Google link needs to open in the following div
<div class="container-fluid text-center col-md-12" id="g2g">
<div class="row content">
<div id="map" class="fill" style="z-index: 100;">
</div>
</div>
</div>
Currently it opens in same tab but not in that particular div expected. Suggestions will be appreciated.
I am trying to swap image and the videos when user clicks a selected element
I have something like the following:
<div class='container'>
<h1 class='title'>Title</h1>
<div class='row'>
<div class='main'>
<img class='col-md-7 col-sm-8 img-responsive' src='main.png'/>
</div>
</div>
<div class='row'>
<a href='#' class='component'><video class='video col-md-4 col-sm-4' controls><source src='video1.mp4'/></video></a>
<a href='#' class='component'><video class='video col-md-4 col-sm-4' controls><source src='video2.mp4'/></video></a>
<a href='#' class='component'><img class='col-md-4 col-sm-4 img-responsive' src='img1.png'/></a>
</div>
</div>
I want to swap the image or video to the main div whenever the user click the link. My js
$('.component').on('click', function(){
var mainSrc = $(this).closest('.container').find('.main').html();
var newSrc = $(this).html();
$(this).html(mainSrc)
$(this).closest('.container').find('.main').html(newSrc);
})
My problem is that I am using bootstrap and if I copy the entire html under my main div, it carries the col-md-4 col-sm-4 to the main div. It will shrink the main div width. How do I keep the same class under main div and component a tag?
Take those classes out of the elements and create another wrapper div. You can assign it to .main as well, but I'm not too sure what you're doing with .main, so I'll just leave that alone.
<div class='container'>
<h1 class='title'>Title</h1>
<div class='row'>
<div class='main'>
<div class='col-md-7 col-sm-8 img-responsive'>
<img class='img-responsive' src='main.png'/>
</div>
</div>
</div>
<div class='row'>
<a href='#' class='component'>
<div class='col-md-4 col-sm-4'>
<video class='video' controls><source src='video1.mp4'/></video>
</div>
</a>
<a href='#' class='component'>
<div class='col-md-4 col-sm-4'>
<video class='video' controls><source src='video2.mp4'/></video>
</div>
</a>
<a href='#' class='component'>
<div class='col-md-4 col-sm-4'>
<img class='img-responsive' src='img1.png'/>
</div>
</a>
</div>
</div>
and then you can do something like this to select and swap the media.
$('.component').on('click', function(){
var mainSrc = $(this).closest('.container').find('.main:first-child').html();
var newSrc = $(this).children().first().html();
$(this).html(mainSrc)
$(this).closest('.container').find('.main:first-child').html(newSrc);
})
Given your HTML, here is a jsfiddle of a solution.
$('.component').click(function () {
var clickClass = $(this).children(0).attr("class");
var mainClass = $(".main").children(0).attr("class");
var clickHTML = $(this).html();
var mainHTML = $(".main").html();
$(this).html(mainHTML);
$(".main").html(clickHTML);
$(this).children(0).attr("class",clickClass);
$(".main").children(0).attr("class",mainClass);
});
I have added Bootstrap but don't have the image files.