i have this kind of structure...
<div class="copy_from">
<img src="images/1.png" />
</div>
<button class="copy_button">Copy</button>
<div class="copy_to">
</div>
i want to add the content of the copy_from div to copy_to div with an additional button "Add to Cart".
i am trying this...but it is not working...
<script type="text/javascript">
$(document).ready(function () {
$('.copy_button').click(function () {
var one1 = $('.copy_from').html();
var two = $(one1).append('<button>Add to Cart</button>');
$('.copy_to').html(one1);
});
});
</script>
Try
$('.copy_button').click(function () {
var one1 = $('.copy_from').html() + '<button>Add to cart</button>';
$('.copy_to').html(one1);
});
Or you could try changing this line
$('.copy_to').html(one1);
to ->
$('.copy_to').prepend(one1);
You've just got the order of things a bit mixed up. You make a copy of the html from .copy_from and then you add the button, afterwards. You can simply add the button to .copy_to afterward instead...
$(document).ready(function () {
$('.copy_button').click(function () {
var one1 = $('.copy_from').html();
$('.copy_to').html(one1).append('<button>Add to Cart</button>');
});
});
Related
I have used hover to display tooltip on hover. However the text keeps getting appended because the function I have written on mouseout is not working.
Below is my code:
var $j = jQuery.noConflict();
$j("#choice30QID404").hover(
function () {
// $j(this).append($("<span> HOVERING!!!!! </span>"));
$j(this).append("<span>HOVERING!!!!!</span>");
});
$j("#choice30QID404").click(function() {
$j(this).mouseout();
});
You can achieve this simply using title attribute. Unless and until you don't want to customize. I am writing without noConflict()
$('#choice30QID404').mouseover(function() {
$(this).attr('title','You are Hovering');
})
$('#choice30QID404').mouseout(function() {
$(this).removeAttr('title');
})
This will help you.
Do you want something like this.
Try this
Script
var $j = jQuery.noConflict();
$j("#choice30QID404").hover(
function () {
// $j(this).append($("<span> HOVERING!!!!! </span>"));
$j(this).append("<span class='span1'>HOVERING!!!!!</span>");
});
$j("#choice30QID404").mouseout(function() {
$j(this).find('.span1').remove();
});
HTML
<div id="choice30QID404">
Hover on this
</div>
Working Demo
Try This -->
You can append a on mouse hover and on mouseout remove that
var $j = jQuery.noConflict();
$j("#choice30QID404").hover(
function() {
// $j(this).append($("<span class='prepended'> HOVERING!!!!! </span>"));
$j(this).append("<span class='hovering'>HOVERING!!!!!</span>");
});
$j("#choice30QID404").mouseout(function() {
// $j(this).mouseout();
$j(".hovering").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:void(0)" id="choice30QID404">Hello<a>
You have appended DOM children to your element with the id of choice30QID404. You can then remove it on a .mouseout() event (reference).
JQuery helps with .children().remove().
var $j = jQuery.noConflict();
var $choice = $j("#choice30QID404");
$choice.hover(function () {
$j(this).append("<span>HOVERING!!!!!</span>");
});
$choice.click(function() {
$j(this).mouseout();
});
$choice.mouseout(function() {
$j(this).children().remove();
});
I hope this helps,
Rhys
I am stumped of how to make a new line appear on top of the div element, i.e. whenever the button is clicked, the new textline is on top and the previous goes below. Right now, the new textline is underneath the first one when I press another button and not above. So my question is: How do you make the new text lines stay on top and not underneath?
JavaScript:
var LineText=""
$(document).ready(function() {
$("#btnSubmit").click(function(){
$('.stashText').html(LineText+="<br><br>Line_No_1");
});
});
$(document).ready(function() {
$("#btn2Submit").click(function(){
$('.stashText').html(LineText+="<br><br>Line_No_2");
});
});
HTML:
<button type=button id="btnSubmit">S
</button>
<button type=button id="btn2Submit">S2
</button>
<br>
<br>
<div class="stashText">
</div>
JSFiddle
You can just use jquerys "prepend" function, look here:
$(document).ready(function() {
$("#btnSubmit").click(function(){
$('.stashText').prepend("<br><br>Line_No_1");
});
});
$(document).ready(function() {
$("#btn2Submit").click(function(){
$('.stashText').prepend("<br><br>Line_No_2");
});
});
https://jsfiddle.net/r09dsp1d/14/
Use prepend instead.
var LineText=""
$(document).ready(function() { $("#btnSubmit").click(function(){
$('.stashText').prepend("<br><br>Line_No_1"); }); });
$(document).ready(function() { $("#btn2Submit").click(function(){
$('.stashText').prepend("<br><br>Line_No_2"); }); });
JSFiddle: https://jsfiddle.net/r09dsp1d/15/
Change LineText+="<br><br>Line_No_1" to "<br><br>Line_No_1" + LineText:
var LineText = "";
$(document).ready(function() {
$("#btnSubmit").click(function() {
LineText = "<br><br>Line_No_1" + LineText;
$('.stashText').html(LineText);
});
$("#btn2Submit").click(function() {
LineText = "<br><br>Line_No_2" + LineText;
$('.stashText').html(LineText);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type=button id="btnSubmit">S</button>
<button type=button id="btn2Submit">S2</button>
<br>
<br>
<div class="stashText"></div>
Also, there's no need to call $(document).ready() twice.
Just use .prepend instead of .html
Here is your updated jsfiddle
https://jsfiddle.net/qcma197k/
$(document).ready(function() {
$("#btnSubmit").click(function() {
$('.stashText').prepend("<br><br>Line_No_1");
});
$("#btn2Submit").click(function() {
$('.stashText').prepend("<br><br>Line_No_2");
});
});
I have the following HTML code, generated by C#:
<div class="more-news-items" id="#id">
<p>Content goes here</p>
<div style="text-align:center">
<button class="newsfeed-hide">TOON MINDER</button>
<button class="newsfeed-more">TOON MEER</button>
</div>
</div>
I want to hide the
<p>Content goes here</p>
using the following Javascript code, but I want to keep the buttons still in the div. How would I achieve this, and if it is not possible, how can I do this?
$(document).ready(function () {
div.find('.newsfeed-hide').click(function () {
$('.more-news-items').html('');
});
});
Try
$(document).ready(function () {
$('.newsfeed-hide').click(function () {
$('div.more-news-items').children('p').hide();
});
});
OR
$(document).ready(function () {
$('.newsfeed-hide').click(function () {
$('div.more-news-items p').hide();
});
});
OR
$(document).ready(function () {
$('.newsfeed-hide').click(function () {
$(this).parent().siblings('p').hide();
});
});
try:
$(document).ready(function () {
$('.newsfeed-hide').click(function () {
$(this).parent().siblings('p').hide();
});
});
This will hide a p's that are siblings of the parent that the button is in.
But other posts are right in as much as if you want to hide all p's in div's with the class .more-news-items you can select this using $('.more-news-items p') instead. Depending on the exact situation you are using this code in (i.e. if you will have more than one area and only want all p's in all areas removed, or only the ones local to the button.
EDIT:
Remove the $('.more-news-items').html(''); also, this will remove all html inside the .more-news-items div, which you do not want to do here.
Here is the live example: http://jsfiddle.net/lee_gladding/dujc66qd/
I have two buttons on my page, I want it so that one starts in the down state display a piece of text in a div, then if the other button is pressed that button stays in the downstate displaying its piece of text in a div and making the first button in the normal state and hiding it's piece of text.
This is the sort of code I have been unsuccessfully working with;
$('#myButton').on('mousedown', function () {
$('#myButton').toggleClass('myButtonActivated',0);
document.getElementById('info1').style.zIndex = 1;
document.getElementById('info2').style.zIndex = 0;
})
Any guidance would be great, thanks.
this code may help you
<style>
.active
{
box-shadow: 3px 2px 0px #888888;
}
</style>
<script>
$(document).ready(function () {
$('.button').click(function () {
$(".button").removeClass("active");
$(this).addClass("active");
});
});</script>
<body>
<input class="button" type="button" value="1st button" />
<input class="button" type="button" value="2nd button" />
</body>
Could you try this:
$('#myButton').on('mousedown', function () {
$('#myButton').toggleClass('myButtonActivated',0);
if($('#myButton').hasClass(myButtonActivated)){
document.getElementById('info1').css('display','block');
document.getElementById('info2').css('display','none');
}else{
document.getElementById('info1').css('display','none');
document.getElementById('info2').css('display','block');
}
})
Since you're using JQuery, you might as well take advantage of more of its abilities.
Here's a working example: http://jsfiddle.net/rrKDd/1/
You can use jquery ui class for disabled style if you have it available:
<script>
var $button1 = $('#myButton'),
$button2 = $('#myButton2'),
$text1 = $('#info1'),
$text2 = $('#info2');
$button1.click(function () {
$button1.prop('disabled', true).addClass("ui-state-disabled");
$text1.show();
$button2.prop('disabled', false).removeClass("ui-state-disabled");
$text2.hide();
});
$button2.click(function () {
$button2.prop('disabled', true).addClass("ui-state-disabled");
$text2.show();
$button1.prop('disabled', false).removeClass("ui-state-disabled");
$text1.hide();
});
</script>
You can obviously choose your own CSS class to add/remove, and if you don't want them to appear disabled you can just do this:
<script>
var $button1 = $('#myButton'),
$button2 = $('#myButton2'),
$text1 = $('#info1'),
$text2 = $('#info2');
$button1.click(function () {
$button1.prop('disabled', true);
$text1.show();
$button2.prop('disabled', false);
$text2.hide();
});
$button2.click(function () {
$button2.prop('disabled', true);
$text2.show();
$button1.prop('disabled', false);
$text1.hide();
});
</script>
I have some code like:
<input type="text" class="searchpersontxtbox" />
<input type="button" value="Find" class="findpersonbtn btn" disabled="disabled" />
There is a button click event:
$(document).ready(function () {
$('.findpersonbtn').click(function () {
var findpersonbutton = $(this);
var searchbox = $(this).closest('.searchpersontxtbox');
alert(show the searchbox text here);
});
});
So when the button is clicked I'm trying to get the text in the searchbox and alert it to the screen.
One point to note is that there could be multiple searchboxes on the page with 'searchpersontxtbox' class.
So I'm wanting to get the text from the textbox that is right above the button.
Can anyone help me here?
I think hes looking for something relative... like this..
$(document).ready(function(){
$('.findpersonbtn ').click(function () {
var findpersonbutton = $(this);
//do relative search here...
var searchbox = findpersonbutton.parent().find('.searchpersontxtbox');
alert(searchbox.val());
});
});
This isn't how closest works. Without seeing the rest of your markup, one way to do this would be:
$(document).ready(function () {
$('.findpersonbtn').click(function () {
var findpersonbutton = $(this)
, searchbox = $(this).prev();
alert(searchbox.val());
});
});
You can use prev to get the element right above the clicked .findpersonbtn.
$(function(){
$('button').click(function() {
var text = $('textarea').val();
alert(button);
}
});
something like that? search for getting textarea value with jQuery, then apply that method in a variable and alert out it's text. should work?
You may want to check out .previousSibling(), which should return the previous input.
http://jsfiddle.net/TbYup/