close div when clicking button inside div - javascript

I have a div that loads information from another page when someone clicks on a thumbnail image on the same page.
Currently, when a person clicks on a thumbnail image, the div #dynamic at the top of the page will load and display information from another page. I want to be able to allow users to click on a close button which i have given a class button_close for them to close the div instead of clicking anywhere within it. The button is being displayed within the #dynamic div as well.
$(document).ready(function(){
$('nav.main > a').click(function(e){
e.preventDefault();
$("#dynamic").load($(this).attr('href') + " .product_content", ()=>{ window.scrollTo(0, 0) }).fadeIn('slow');
});
$(".button_close").click(function(){
$(".product_container").html ('');
});
});

Since your close_button is being generated dynamically, you can use the following
$('body').on('click', '.button_close', function(){
$('#dynamic').html('');
});
A simple example
<!DOCTYPE html>
<html>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function loadDiv() {
$('#dynamic').html('<p>Some content loaded from another page</p><div class="button_close">Close Me</div>');
}
$('body').on('click', '.button_close', function(){
$('#dynamic').html('');
});
</script>
<div id="dynamic"></div><br><br>
<button onclick="loadDiv()">Load Div</button>
</body>
</html>

Related

Onclick open page and scroll down

When particular page is opened by clicking on button which id is "button1", I want that page to be scrolled down.
Could that code be in JavaScript?
This is the command you can use to scroll down:
window.scrollTo(0,document.body.scrollHeight);
Now if you want to go directly to the bottom you can put this do that while the page are loaded:
<body onload="window.scrollTo(0,document.body.scrollHeight);">
Here is an example of what you are asking about:
<html>
<head>
<script>
clicked(){
var element = document.getElementById("scrollto");
element.scrollIntoView();
}
</script>
</head>
<body>
<button onclick="clicked()">Click Me</button>
Your content...
<div id="scrollto"></div>
</body>
</html>
When you click the button, it should scroll down to the div.
If you are asking about navigating to a new page and automatically having it scroll to the right section, you can do something like:
and the link will automatically open to that section of the page.

how to close popup by clicking on iframe?

For any iframe I have, how do I get it to click anywhere in the iframe to close any popups that open from that iframe?
Something like:
<iframe id="iframe_id" src="https://somesite.com.br">
</iframe>
<script type="text/javascript">
$('#iframe_id').on('click', function(event) {
close popups that have opened ...
});
</script>
NOTE
I can't use sandbox = "allow-scripts" or other sandbox methods
your code:
<script type="text/javascript">
$('#iframe_id').on('click', function(event) {
//code
});
</script>
if those popups are in div then use this
<script type="text/javascript">
$('#iframe_id').on('click', function(event) {
$('#iframe_id').find('div').remove();
});
</script>
though it will remove all div contents if you don't want to include some div contents.
you can just change the div to any form of element if that popup have something in common.

How to open a link in loaded page

I have 2 pages. I loaded my second page inside my first page.
In the second page i have a link.
The problem is, when I click on the link in the second page, it opens in new tab.
How do I open this link in same page, like an iframe?
Here is my snippet:
$( document ).ready(function() {
$('#second').load('second.html');
});
#second{width:100%; height:300px; border:1px solid blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
<title>First page</title>
</head>
<body>
<div id="second"></div>
<!--
THis is my second page code ////////
<html>
<head>second page</head>
<body>
click here !
</body>
</html>
-->
</body>
</html>
Name your iframe <iframe name="namedIf"></iframe>
and then in your anchor tag use target attribute <a href="link" target="namedIf"/>
But as the comments says, google doesn't allow you to iframe their content in your site.
UPDATE
As you're not using iframes, the only thing i can think of is to "intercept" any clicks to the anchor tags present on your loaded document and use the same function again to load it.
$(function() {
$('#second').load('second.html', function(){
$("#second a").click(function (e) {
e.preventDefault();
$("#second").load($(this).attr("href"));
});
});
});
So the code gets executed when your code has completed loading second.html into your document.

Need to determine button clicked in a JQuery mobile popup and perform actions based thereon

I am having a problem with a JQM popup. The popup has 3 buttons, and the action taken in the main program depends on which button is clicked. The code in the main program is run more than once and I am not sure why.
The simple example below uses an alert to display which button on the popup was clicked. When the popup is called the first time, it works as hoped, the 2nd time, the alert is displayed twice, the 3rd time, the alert is displayed 3 times, etc.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<script type="text/javascript" charset="utf-8" src="cordova-2.6.0.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"/></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js"></script>
<script>
function doCustomDialog(text1,button1,button2,button3,callback)
{
$("#customDialog .customDialogDesc").text(text1);
$("#customDialog .customDialogOption1").text(button1).on("click.customDialog", function(){
callback("option1");
});
$("#customDialog .customDialogOption2").text(button2).on("click.customDialog", function(){
callback("option2");
});
$("#customDialog .customDialogOption3").text(button3).on("click.customDialog", function(){
callback("option3");
});
$("#customDialog").popup("open");
}
</script>
</head>
<body>
<div data-role="page" id="mainPage">
<div data-role="content">
<INPUT type="button" id="confirm" value="Save data" />
<div data-role="popup" id="customDialog" data-title="Are you sure?" class="ui-content">
<p class ="customDialogDesc">???</p>
Yes
No
Cancel
</div>
</div>
</div>
<script>
$("#mainPage").on("pageshow", function(e) {
$("#confirm").click(function() {
doCustomDialog("A similar record already exists. Do you want to Update the existing record or Add a new record?", "Update", "Add", "Cancel",
function( returned )
{
//Do things depending on the button clicked, for now just display which button was clicked
alert(returned);
});
});
});
</script>
</body>
</html>
Use popupafterclose to unbind any attached click event. Also, note the direct parent of data-role=popup should be data-role=page.
$(document).on("popupafterclose", "#customDialog", function () {
$('#customDialog a').off('click');
});
Demo
Note: To change button's text, use .ui-btn-inner selector i.e. $("#customDialog .customDialogOption1 .ui-btn-inner").text(button1) in order not to lose button style.
Update: If you wish to go with the above note, you then need to unbind click .ui-btn-inner i.e. $('#customDialog a .ui-btn-inner').off('click');
The issue is because you are attaching another event to each button for every successive time the popup is opened. You can prevent this by using one() to attach the events:
$("#customDialog .customDialogOption1").text(button1).one("click.customDialog", function(){
callback("option1");
});
$("#customDialog .customDialogOption2").text(button2).one("click.customDialog", function(){
callback("option2");
});
$("#customDialog .customDialogOption3").text(button3).one("click.customDialog", function(){
callback("option3");
});
Alternatively, you could remove all the events attached to the buttons first by adding the following line at the start of your doCustomDialog function:
$("#customDialog a").off();
Then you can re-attach then using on as you currently do.

Using jquery click event inside an editable div

I use JQuery to register events for different tags. Here is the code so far:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.7.js"></script>
</head>
<body>
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Yet one more Paragraph</p>
<div><p>another one</p></div>
<p><strong>big one</strong></p>
<div contentEditable="true"><p>hello <b>there</b></p></div>
<script>
$("p").click(function () {
alert('p tag');
});
$("div").click(function () {
alert('div tag');
});
$("b").click(function () {
alert('strong tag');
});
</script>
</body>
</html>
I want to develop a simple text editor and want to capture click events so that I can update the state of my buttons (bold, italics, ...). I want the click events to work inside an editable div as well but they only fire once when the div tag is selected and afterwards when the editing begins, clicking anywhere inside that div doesn't fire, even though I have p and b tags inside the div. Is is possible to achieve this using an editable div? Basically I want to be able to know if the cursor is inside a b tag or an i tag so that I can update the state of my buttons.
you can use .one
$("editableDIV").one("click",function(){...});

Categories

Resources