I am looking to change a paragraph of text into different text by clicking on a fake 'link' (span) at the bottom of the page.
what I have thus far
<body>
<p> here is a paragraph that i would like to change once the span below me is clicked </p>
<span id="click"> click me for the text above me to change </span>
</center>
</body>
<script>
$( "click" ).click(function() {
$( "p" ).replaceWith( "new paragraph" );
});
</script>
I'm really new to jquery and javascript so any help would be appreciated! thanks.
1st: for id you should use #
2nd: to get the previous element use .prev() .. $(this).prev('p')
<script>
$( "#click" ).click(function() {
$(this).prev( "p" ).replaceWith( "<p>new paragraph</p>" );
});
</script>
Note: id must be unique so don't use same id for more than one element
so try to use class instead <span class="click"> and then use $('.click') instead of $('#click')
3rd: what is </center> in your code should do?
4th: you should check to include jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
5th: put script before closing body tag
full code
<body>
<p> here is a paragraph that i would like to change once the span below me is clicked </p>
<span id="click"> click me for the text above me to change </span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(docuemt).ready(function(){
$( "#click" ).click(function() {
$(this).prev( "p" ).replaceWith( "<p>new paragraph</p>" );
});
});
</script>
</body>
to put img instead of paragraph use
$(this).prev( "p" ).replaceWith('<img src="http://placehold.it/350x150">');
to put img inside paragraph
$(this).prev( "p" ).html( 'new paragraph<img src="http://placehold.it/350x150">' );
$( "click" ) should be $( "#click" )
In reality you don't need replaceWith(). You can just use text() to change the text.
$( "#click" ).click(function() {
$( "p" ).text( "new paragraph");
});
Related
Here is my html code
<div id="dialog" title="Basic dialog" style="display: none">
<p id="para">Copy this key</p>
<p id="key">4567887654345678</p>
</div>
<button>Open dialog</button>
The div appears as a dialog on button click, and I would like to have the "key" text selected when the dialog opens
Here is the javascript for the same, but the < p> doesn't appear to be selected
$(function() {
$( "button" ).click(function() {
$("#dialog" ).dialog();
$( "#dialog" ).show( "slow" );
$("#key").select();
});
});
How can I make the < p> be pre-selected ?
Change the key paragraph to an editable element, such as a textarea:
<textarea id="key">4567887654345678</textarea>
JSFiddle
It appears you need an editable text field to select text in.
I think you should use jQuery dialog open event:
$( "#dialog" ).dialog({
open: function( event, ui ) {
$("#key").select();
}
});
JSFiddle
I have this code but I'm not sure how to make it so that each time one button is clicked, it closes the other div that is already open. New to jquery!
HTML:
<p class="profile-name">Name</p><br>
<p class="profile-title">Documentation Officer</p><br>
<button id="button-g" class="bio-button">Bio</button><br>
<a class="profile-email" href="mailto:email#test.com">email#test.com</a>
<div class="toggler">
<div id="effect-g" class="profile-bio">
<p>Bio information. Bio Information</p>
</div>
</div>
JQUERY:
<script>
$(function() {
$( "#button-a" ).click(function() {
$( "#effect-a" ).slideToggle( "visible");
});
$( "#button-b" ).click(function() {
$( "#effect-b" ).slideToggle( "visible");
});
$( "#button-c" ).click(function() {
$( "#effect-c" ).slideToggle( "visible");
$("#button-b").hide();
});
$( "#button-d" ).click(function() {
$( "#effect-d" ).slideToggle( "visible");
});
$( "#button-e" ).click(function() {
$( "#effect-e" ).slideToggle( "visible");
});
$( "#button-f" ).click(function() {
$( "#effect-f" ).slideToggle( "visible");
});
$( "#button-g" ).click(function() {
$( "#effect-g" ).slideToggle( "visible");
});
});
</script>
It's rarely wise to target a zillion elements by ID (or any other unique attribute) in a uniform, repetitive structure. Give all your buttons and all your collapsible siblings the same classes, respectively, then do this (or something similar--I can't be more specific without seeing your HTML):
$('.my-button-class').click(function() {
$(this).next('.my-collapsible-div-class').slideDown()
.siblings('.my-collapsible-div-class').slideUp();
});
This assumes markup like this:
<button class="my-button-class">Button</button>
<div class="my-collapsible-div-class"> ... </div>
<button class="my-button-class">Button</button>
<div class="my-collapsible-div-class"> ... </div>
<button class="my-button-class">Button</button>
<div class="my-collapsible-div-class"> ... </div>
Update based on your HTML:
$('.bio-button').click(function () {
$(this).nextAll('.toggler:first').slideToggle()
.siblings('.toggler').slideUp();
});
Demo
http://api.jquery.com/nextall
http://api.jquery.com/first-selector
Off-topic suggestion: Use CSS margin or padding rather than line breaks to format your content. Extra markup elements for spacing is ugly and inefficient.
Give the div's a common class, and a custom data attribute with the letter of the next div to open, then combine this into a single function. Sample div:
<div id="effect-a" class="effect"></div>
Sample button
<button id="button-a" class="button" data-letter="a">Click me</button>
Single function
$(".button").click(function() {
//Slide up any open divs
$(".effect").slideUp();
var divLetter = $(this).data("letter") //a
//Concatenate selector
$("#effect-" + divLetter).slideDown();
});
I'm using toggleClass like in the following example on the jQuery documentation page to create a "Read More"/"Read Less" solution:
http://api.jquery.com/toggleClass/
Here is the HTML code I'm using:
<span id="block1-link" class="read-more-text more">Read More</span>
<span id="block1-content" class="sh-content">1st paragraph text<span class="read-more-text"> Hide Text</span></span>
<span id="block2-link" class="read-more-text more">Read More</span>
<span id="block2-content" class="sh-content">2nd paragraph text<span class="read-more-text"> Hide Text</span></span>
And the accompanying jQuery:
(function ($) {
$( ".read-more-text" ).click(function() {
$( ".sh-content" ).toggleClass( "show-text" );
$( ".read-more-text.more" ).toggleClass( "hide-text" );
});
}(jQuery));
Right now, the code shows both blocks of text when I click on the "Read More" link. I'd like the click to only affect the related "block". So, if I click on the span with "block1-link", the span with "block1-content" should toggle.
The reason I'm not adding the ID directly to my jQuery code is because this needs to work for any number of link/content groupings on a page.
I'm sure it's something obvious I'm missing. I hope someone can help me correct what I've written.
Thanks!
You can use current element clicked context this to only target the clicked and next div element:
$( ".read-more-text" ).click(function() {
$(this).next().toggleClass( "show-text" );
$(this).toggleClass( "hide-text" );
});
Try this. You can use .on() of jquery.
$(".read-more-text" ).on( "click", function() {
$(this).next().toggleClass("show-text");
$(this).toggleClass("hide-text");
});
Edit: Developing further on the same topic, i tweaked the html classes so that its cleaner and easier.
<span id="block1-link" class="read-more">Read More</span>
<span id="block1-content" class="sh-content">1st paragraph text<span class="hide-more"> Hide Text</span>
</span>
<span id="block2-link" class="read-more">Read More</span>
<span id="block2-content" class="sh-content">2nd paragraph text<span class="hide-more"> Hide Text</span></span>
$(".read-more" ).on( "click", function() {
$(this).next().toggleClass("show-text");
$(this).toggleClass("hide-text");
});
$(".hide-more" ).on( "click", function() {
$(this).parent().toggleClass("hide-text");
$(this).parent().prev().toggleClass("show-text");
});
I am trying to randomly display a single paragraph from a selection of paragraphs when I click a button on my page. Right now it will display a paragraph if I hard code in a number, but when I try to randomly choose a paragraph (using $( "p:nth-child(set)" )it is breaking.
My Javascript is as follows:
$( "#toggleweight" ).click(function() {
var set =Math.floor((Math.random()* $('p').length )+1);
$.ajax({success:function(result){
$( "p:nth-child(set)" ).fadeIn( 3200 );
}});
});
My HTML:
<div id="button">
<a class="btn" href="#" id="toggleweight">Cool button. </a>
</div>
<div id = "button2">
<% array = ["ASDF", "FDSA"] %>
<% array.each do |display| %>
<p class="btn" style="display: none"><%= display %></p>
<% end %>
</div>
Your issue is that set is a string. you need "p:nth-child(" + set+ ")"
EDIT: In order to get rid of the currently paragraph and show a new one, you will want to add a class when you select it, then fade that class out...
$.ajax({
success:function(result) {
$(".shown").removeClass("shown").fadeOut(3200);
$( "p:nth-child("+set+")" ).fadeIn( 3200 ).addClass("shown");
}
});
set is a variable so try this
$( "p:nth-child("+set+")" ).fadeIn( 3200 );
This:
$( "p:nth-child(set)" ).fadeIn( 3200 );
Should be:
$( "p:nth-child("+set+")" ).fadeIn( 3200 );
I wonder how to insert an HTML element before another with jQuery.
It is also important to be able to get the content of the new element out of an input.
Something like that, but working :
var input = $("#theInput").val();
var content = document.createElement("p");
content.appendChild(document.createTextNode(input));
$("div").insertBefore(content);
Try this:
$("div").prepend(content);
See below example:
HTML Structure:
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
</div>
Jquery:
$( ".inner" ).before( "<p>Test</p>" );
Result (HTML):
<div class="container">
<h2>Greetings</h2>
<p>Test</p>
<div class="inner">Hello</div>
</div>
EDIT:
Please see sample below, it takes value from text box and insert it before
HTML Structure:
<div id="content">
<input type="text" value="textboxvalue" > <br/><br/>
<span>Insert text box value befor this one</span>
</div>
JQUERY:
var inputval = $("#content input").val();
$( "#content span" ).before( "<p>" + inputval + "</p>" );
JSFIDDLE
Option 1 - Just using jQuery:
var input = $("#theInput").val();
$("<p />") // Create a paragraph element.
.text( input ) // Set the text inside the paragraph to your input.
.insertBefore( $( "div" ) ); // Insert the paragraph before the div element(s).
Option 2 - Modifying your code:
var input = $("#theInput").val(),
content = document.createElement("p");
content.appendChild(document.createTextNode(input));
$( content ).insertBefore( $( "div" ) );
Option 2a - Or you can change the last line to:
$( "div" ).before( content );