why does jQuery's .html("abc") only insert temproarily? - javascript

i have an html button that calls a function, however when the buttons clicked, the inserted div only appears for a second and then disappears, both visually and in the html tree.
function openBox () {
$( '#0' ).click( function () {
var container =
$( "<div>" ).css({
height : "200px",
width : "200px",
position : "absolute",
"background-color" : "black",
});
$( 'button.box' ).html( container );
});
}
if i insert the div created in JS into 'button.box' it displays only temporarily, for a split second. the html looks as such:
<div class="holder">
<button id="0" class="box fa fa-paint-brush"></button>
</div>
but if inserted into 'div.holder' with the same html structure however, the box displays continuously as expected, but the button is gone.
What is the reason for the button disappearing with continuous display of box & the temporary display of box in their respective circumstances, and what can be done about the button disappearing?

When adding the new container to the .holder class, the button disappears because the .html() method is replacing the content in the selected element. In order to add the box and keep the button, .append() is the appropriate jQuery method.
The code below implements what I understand to be the desired outcome; the new div appearing after the button. The new <div> is appended to the existing <div>, after the button by using $("button").parent() to select the existing <div>. Appending the new <div> to the button itself $("button").append() will add the div to the inside of the button.
<div class="holder">
<button id="0" class="box fa fa-paint-brush" type="button"></button>
</div>
<script>
$(document).ready(function(){
$('#0').click( function () {
var container = $( "<div>" ).css({
height : "200px",
width : "200px",
position : "absolute",
"background-color" : "black",
});
$(this).parent().append( container );
});
});
</script>
More information about the jQuery append method, and others, can be found in their documentation: http://api.jquery.com/append/

Related

React scroll to ref with multiple scrollbars

I have a small problem that I can't figure out.
I have an element inside my page with a scrollbar. This means I got the main page scrollbar and a second scrollbar. I have a button inside that element that triggers a new div with some content inside of it. But that div is outside the view of the element so you need to scroll to see it. This is not really user friendly so I am trying to add a function that when you click on that button it scrolls to the new div.
Picture of element: https://imgur.com/8wIOTqo
button is the gold coloured one
The problem is that it is using the main page scrollbar and not the scrollbar of the element. Does anyone know how to fix this? Here is my code
// Function to open the element and scroll to the ref
function enableOtherAddressActive() {
secondDeliveryAddressRef.current.scrollIntoView();
setOtherAddress(true);
}
<div className="deliveryaddress__different">
{otherAddress ? (
<div className="deliveryaddress__different-btn btn btn--primary" onClick={disableOtherAddressActive}>Afwijkend bezorgadres verwijderen</div>
) : (
<div className="deliveryaddress__different-btn btn btn--primary" onClick={enableOtherAddressActive}>Afwijkend bezorgadres toevoegen</div>
)}
</div>
<div className="deliveryaddress__second" ref={secondDeliveryAddressRef}>
{otherAddress ? (
<div className="deliveryaddress__inner">
<h3 className="deliveryaddress__title">
Afwijkend bezorgadres toevoegen
</h3>
</div>
) : undefined}
</div>
</div>
One of the way to scroll to the element is assigning a id to the div and using scrollInto that
I have done in the codesandbox below refer it shows how to scroll into a particular element even if it is nested scrollbar
Code:
const handleScrollTo = () => {
setTimeout(() => {
document.getElementById(`element`) &&
document.getElementById(`element`).scrollIntoView({
behavior: "smooth",
block: "center"
});
}, 1000);
};

Clear part of div

This pop-up-category has height 0. When button is pressed, i am adding height 100%. Inside have pop-up-wrap-category div where my data is stored.
Also have div for user controls ( Close pop-up).
<div class="pop-up-category">
<div class="pop-up-wrap-category">
<p>clear just this content</p>
//this this should be still visible(populated)
<div class="user-controls">
<span class="close-popup btn btn-danger">Close</span>
</div>
</div>
</div>
js :
$(document).on("click", ".close-popup", function () {
// console.log("sdasd");
$('.pop-up-wrap-category').empty();
});
How to clear content from pop-up-wrap-category but users controls still stay visible ?
Find the p and clear p
$(document).on("click", ".close-popup", function () {
// console.log("sdasd");
$('.pop-up-wrap-category > p').empty(); //use .remove() if you want to get the p tag deleted from DOM
});

if same class, fadeIn / fadout

I have a setup here in jsFiddle: http://jsfiddle.net/2PmnQ/
I'm trying to make a function that will check if the modal has the same class as the button so the button will bring up the modal with the same class. I'm obviously trying to do this dynamically all within one function rather than doing a if statement for every class.
var p = $(".popUp");
var position = p.position();
var tagLength = $("p a").width();
$( ".modal" ).css({left: (position.left + tagLength + 10) + "px", top: position.top + "px"});
$( ".popUp").hover(
function() {
$( ".modal" ).stop().fadeIn();
}, function() {
$( ".modal" ).stop().fadeOut();
}
);
I would use a custom data attribute instead of a class to save the target class:
<p class="popUp" data-modal="one"><a>popUp one here</a></p>
<p class="popUp" data-modal="two"><a>popUp two here</a></p>
<div class="modal one">PopUp one should be here</div>
<div class="modal two">PopUp two should be here</div>
That way you don't have to filter the target out of the trigger element classes and only need this in your hover function:
$('.popUp').hover(function(){
$('.modal.'+$(this).data('modal')).fadeIn();
},function(){
$('.modal.'+$(this).data('modal')).fadeOut();
});
http://jsfiddle.net/2PmnQ/1/
V2 using jQuery UI position() plugin:
<!-- i switched the popup classes to the `a` here so it works in the fiddle -->
<p><a class="popUp" data-modal="one">popUp one here</a></p>
<p><a class="popUp" data-modal="two">popUp two here</a></p>
<div class="modal one">PopUp one should be here</div>
<div class="modal two">PopUp two should be here</div>
JS:
$('.popUp').hover(function(){
$('.modal.'+$(this).data('modal'))
// reset positions otherwise it doesn't work correctly after the first time. don't know why :(
// looks like this problem: http://forum.jquery.com/topic/position-keeps-adding-original-left-and-top-to-current-values-in-ie-8
.css({'left':0,'top':0})
// position modal 10px to the right of the popup link
.position({'my':'left+10 center',
'at' : 'right center',
'of' : $(this)
}
).fadeIn();
},function(){
$('.modal.'+$(this).data('modal')).fadeOut();
});
http://jsfiddle.net/2PmnQ/10/
(Be sure to include the jQuery UI with at least the position plugin: http://jqueryui.com/download/#!version=1.11.0&components=0001000000000000000000000000000000000. Yeah maybe it's a bit overkill for this but it's really convenient)

close button for jquery popup box

I am using this code for popup box and it's work well
$(document).ready(function() {
// Here we will write a function when link click under class popup
$('a.popup').click(function() {
// Here we will describe a variable popupid which gets the
// rel attribute from the clicked link
var popupid = $(this).attr('rel');
// Now we need to popup the marked which belongs to the rel attribute
// Suppose the rel attribute of click link is popuprel then here in below code
// #popuprel will fadein
$('#' + popupid).fadeIn();
// append div with id fade into the bottom of body tag
// and we allready styled it in our step 2 : CSS
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
// Now here we need to have our popup box in center of
// webpage when its fadein. so we add 10px to height and width
var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
var popupleftmargin = ($('#' + popupid).width() + 10) / 2;
// Then using .css function style our popup box for center allignment
$('#' + popupid).css({
'margin-top' : -popuptopmargin,
'margin-left' : -popupleftmargin
});
});
// Now define one more function which is used to fadeout the
// fade layer and popup window as soon as we click on fade layer
$('#fade').click(function() {
// Add markup ids of all custom popup box here
$('#fade , #popuprel , #popuprel2 , #popuprel3').fadeOut()
return false;
});
});
and it's my HTML code:
<div class="popupbox" id="popuprel">
<div id="intabdiv">
<h2>Content Demo 1</h2>
<p>Check out WebDesignersDesk for more tutorials</p>
</div>
</div>
<div id="fade"></div>
but my popup box close only when click outside popup box but i want add a close button in my box and when click it close my box. how can do it?
Try this..
HTML:
<div class="popupbox" id="popuprel">
<div id="intabdiv">
<h2>Content Demo 1</h2>
<p>Check out WebDesignersDesk for more tutorials</p>
</div>
<div class="closepopup">Close</div>
</div>
<div id="fade" class="fade"></div>
Javascript:
$('.closepopup').on('click', function(e) {
$('.popupbox').fadeOut();
$('.fade').fadeOut();
});

JQuery: show div below pushed button

How can I show the div-element below the pushed button?
html:
<button id="one" class="btn">One</button>
<button id="two" class="btn">Two</button>
<button id="three" class="btn">Three</button>
<div id="popup">Message!</div>
JS:
$('.btn').click(function(e) {
const targetBtn = e.target;
$("#popup").show("slow").delay(3000).hide("slow"); //HOW TO SHOW IT BELOW TARGET BUTTON
})
Because your div has an id not class so you have to use # notation for ids:
$('.btn').click(function (e) {
$("#popup").css({
'position': 'absolute',
'left': $(this).offset().left,
'top': $(this).offset().top + $(this).height() + 5
}).show("slow").delay(3000).hide("slow");
});
Demo
Not sure if your button is allready visible or not before you want to replace it. But this puts the div after the clicked button:
$("button").click(function(){
$("#popup").insertAfter($(this));
});
http://jsfiddle.net/6FLLt/
If you want to show() it use
$("button").click(function(){
$("#popup").show().insertAfter($(this));
});
http://jsfiddle.net/6FLLt/2/
UPDATE
If you want to place the message below the buttons visually you have to change to html and CSS like so:
HTML
<div class="relative">
<button id="one" class="btn">One</button>
</div>
<div class="relative">
<button id="two" class="btn">Two</button>
</div>
<div class="relative">
<button id="three" class="btn">Three</button>
</div>
<div id="popup">Message!</div>
CSS
#popup{position:absolute; bottom:-20px; display:none;}
.relative{position:relative; float:left;}
http://jsfiddle.net/6FLLt/5/
try something like this
$('.btn').click(function(e) {
$(this).after($('#popup'));
})
Note : User # for id and .(dot) for class
How can I show the div-element below the pushed button?
Set the margin of the div accordingly (to show the div directly below the pushed button):
$('.btn').click(function(e) {
var $elem = $(e.target),
$div = $('#popup');
$div.css('margin-left', $elem.offset().left + 'px');
$("#popup").stop().show("slow").delay(500).hide("slow");
})
Demo: http://jsfiddle.net/abhitalks/5ef5L/
Note: You should .stop() before attempting the animation, because when you click another button, the earlier animation might still be underway, hence giving unexpected results.
Aside: You need to use the $('#...') selector, because popup is an id.

Categories