I am new to JQuery, I was wondering why my script is not working. I have been reading through the API and I did exactly what it says but I am still not getting what I was expecting. Please find the script below:
//To infinitely add images
$('.add_upload_image').on('click', function(){
$('.upload_image').append('<input type="file" name="userfile[]"/><br/>');
});
//To remove the last child of the .upload_image
$('.remove_upload_image').on('click', function(){
$('.upload_image input:last-child').remove();
});
So I am sure you understand what I am trying to achieve. But basically, i have a text that says 'click to add more uploads' which is wrapped around with the .add_upload_image then when the user clicks on it, it adds the input element to the div class .upload_image. Works fine. However, when the user clicks on the 'click to remove' which is wrapped in .remove_upload_image and I am aiming at the last child of the .upload_image that is input and it is not removing.
What am I doing wrong here?
Many thanks in advance.
You have to use :last, not :last-child ( the <br> element is the last child ):
$('.remove_upload_image').on('click', function(){
$('.upload_image input:last').remove();
});
You should probably remove the <br> element as well:
$('.remove_upload_image').on('click', function(){
var el = $('.upload_image input:last');
el.add(el.next('br')).remove();
});
FIDDLE
$('.upload_image').last().remove()
This should work.
Related
Never used JavaScript Before and I'm trying to fix this form in share point.
I want this text box to be small (like 1 row), until the user clicks it and then it should expand into a larger text box with like 10 rows. I apologize if this has been answered before, I don't even know what I should be looking for. Here is code I have that doesn't work, but does pop up an error message(I did not write this code):
alert(DescriptionID);
document.getElementById(DescriptionID).addEventListener("onmouseover", function(){
document.getElementById(DescriptionID).rows= "10";
});
document.getElementById(DescriptionID).addEventListener("onmouseout", function(){
document.getElementById(DescriptionID).rows= "1";
});
EDIT:
Here is what the current code will display:
EDIT2:
Thanks to a ton of help from you guys/gals I am close to finished! I can now understand it significantly better at least! Here is a picture of the code. The object is actually an "ms-formbody" ???
AND ANOTHER EDIT:
So here is the error i'm getting after using Johhny's code:
If you are using jQuery, this might work for you:
HTML:
<textarea id="expandingTextarea" rows="1">Enter Text</textarea>
JavaScript:
$(document).ready(function() {
$('#expandingTextarea').on('mouseover', function() {
$(this).attr('rows', '10');
});
$('#expandingTextarea').on('mouseout', function() {
$(this).attr('rows', '1');
});
});
I created an example here.
Update:
Using a click event to change/toggle to row count:
$(document).ready(function() {
$('#expandingTextarea').on('click', toggleExpand);
function toggleExpand() {
var oldRowCount = $(this).attr('rows');
var newRowCount = parseInt(oldRowCount) === 1 ? 10 : 1;
$(this).attr('rows', newRowCount);
}
});
Demo here.
In fact, you don't need JS to achieve what you want. CSS can do it for you.
<!--html-->
<textarea class="descr">This is description</textarea>
/*css*/
.descr {height: 20px;}
.descr:hover, .descr:focus {height: 120px;}
alter the height instead of the "rows" property.
open up the page in chrome, open the developer tools (View->Developer->Developer Tools) and then use "inspect" to select the text area you want to manipulate.
try playing around with the css of that element. then, write your javascript to change just the property that you want.
https://developer.chrome.com/devtools
The code you showed looks fine but DescriptionID should contain the ID of the description box. You can check what it is by right clicking on the description form and clicking "inspect element". Then assign var DescriptionID = "someID" at the beginning of the code.
Also, you might consider altering the height, not the rows.
If the form doesn't have an ID, look for an option to change the HTML and add one. If you don't have such an option, it's still possible to achieve what you want to do but you have to look beyond getElementById.
So I want some HTML to appear, but only in the element where it was clicked. With more than one instance of this class it will appear in every instance, after the element of class movieend. (Every <div class="moviepanel"> contains a <hr class="movieend">.)
I figure I should be able to use the 'this' word somehow like this:
$(document).ready(function(){
$(".moviepanel").click( function(){
$("<p> Test </p>").insertBefore($("this .movieend"));
});
});
I could do this the long way by giving each moviepanel an id, but I figure there must be a better way of doing it?
Thanks!
Wrong:
$("<p> Test </p>").insertBefore( $("this .movieend") );
Correct:
$("<p> Test </p>").insertBefore( $(this).find(".movieend") );
Alternatively:
$(this).find(".movieend").before("<p> Test </p>");
I'm basing my code off of this solution by Ben Nadel
Here is the code included in the page
<script type="text/javascript">
// When the document is ready, initialize the link so
// that when it is clicked, the printable area of the
// page will print.
$(function() {
// Hook up the print link.
$("a").attr("href", "javascript:void(0)").click(function() {
// Print the DIV.
$( ".printable" ).print();
// Cancel click event.
return(false);
});
});
</script>
Here is a codepen
The Buttons are not working in the pen but do work locally.
What i'm trying to do is have the user print the contents of each list item which as you can tell is a Q&A so essentially have the user be able to print each Q&A pair when they click the button.
I've only included two to provide the minimal example to help me figure out where my error is.
What's happening is that no matter which button I click it will always print the first "li" with the class of "printable" and i'm not sure how to distinguish each section so that the button understands to only print 'this' and not the first li that has that class which is what it's doing.
Obviously this is a problem since each Answer will have a "click to print" button and I don't want them to all print the same Q&A pair.
Does this make sense?
My instinct is to have some kind of loop in play or iterate through an array, but i'm very new to JavaScript so i'm looking for a moderately challenging solution.
Yes, it does make sens. You are selecting elements to print with $('.printable').print([1]); It means, print the first element that match my selection, that is .printable. The first element that has the class printable. What you should do is bind each button with the appropriate section and use IDs instead of classes to select elements. As IDs are unique !
function(){
$('.printBtn').attr('href', 'javascript:void( 0 )').click(function(){
//select the corresponding section, first parent li that have .printable class
var section = $(this).closest("li.printable");
// Print Div
$(section).print([1]);
// Cancel click event
return(false);
});
You can use simple java script to print specific div of a page
var prtContent = document.getElementById("your div id");
var WinPrint = window.open('','','letf=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
I have a contenteditable div. I am trying to hunt for the word "design" and wrap it in a span element.
HTML:
<div id="text"></div>
JavaScript:
$("#text").prop("contenteditable", true);
var string = $("#text")[0].innerHTML;
$("#text").innerHTML = string.replace("design", "<span>design</span>");
This doesn't work. My first guess would be that its because the script runs once, so by the time I type "design" it doesn't catch it. So, I tried putting it in a setInterval, but that didn't work either. JSFiddle
Any help would be much appreciated.
$("#text").prop("contenteditable", true).keypress(function(e){
$(this).html(function(i,html){return html.replace(/<span>design</span>/g,"design").replace(/design/g, "<span>design</span>")});
});
I didn't test, but hopefully it'll work.
You can do it like this
$('#text').prop("contenteditable", true).on('keyup change',function(){
var $el = $(this);
$el.find('span').contents().unwrap(); // remove existing spans around "design"
$el.html(function(i,v){
return v.replace(/\bdesign\b/gi, "<span>design</span>") // wrap design with spans
});
setEndOfContenteditable(this); // reset the cursor to the end
});
FIDDLE
the setEndOfContenteditable function was taken from this SO Answer - it sets the cursor back to the end of the text
https://stackoverflow.com/a/3866442/1385672
What I'm trying to do is append to text from a input field to a div as the user is typing...
So they can see what the text will look like.
What I have is the below.
jQuery('#options_6_text').keyup(function() {
jQuery('.product_zoom').appendTo(jQuery(jQuery(this).val()));
console.log(jQuery(this).val())
});
Now the console.log is working as I would have thought, however the text does not seem to be appending to the .product_zoom div, any ideas what I'm doing wrong??
Thanks!
EDIT
jQuery('#options_6_text').bind('keyup blur', function() {
jQuery('.product_zoom').text(jQuery(this).val());
});
This allowed me to do exactly what I was after.
Thanks
Change to this:
jQuery('.product_zoom').html(this.value);
You're going to want to use .html() for this, this way it replaces the div content each time the user types, the append() was adding to the current content each time.
Demo: http://jsfiddle.net/rRnSB/
Simply doing it like this: SIMPLE FIDDLE
$('#options_6_text').keyup(function() {
$('.product_zoom').text(this.value);
});