i have an online magazine in pageflip style. Each page should be clickable and show me an image in a high resolution (modal window). I'm using a pageflip.js for this.
But when i load the website i can click only the first 4 pages. Thats because the next pages are loaded dynamicaly and the DOM changes.
How can i observe a live dom changing ?
the site is online: http://textileworld.esy.es/book.php
The function $('.show-modal').on('click', function()) is not working for the live dom changing.
i Open the modal window with this code:
$('.show-modal').on('click', function(e){
e.preventDefault();
var highres = null;
highres = $(this).parent().prev().attr('data-highres');
$('.modal').css('display', 'block');
$('#modal-image').attr('src', highres);
});
the page-images are loaded in php:
'<img id="img" data-highres="'.$imageHighResolution.'" src="'.$image.'" usemap="#image'.$i.'"/>',
'<map name="image'.$i.'">',
'<area class="show-modal" shape="rect" coords="35,1,725,1094" alt="clickable">',
'</map>';
and the html for the modal window:
<!-- Modal -->
<div id="myModal" class="modal">
<!-- Close button -->
<span class="close">×</span>
<!-- Modal content -->
<img class="modal-content" id="modal-image">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
Try to use the 3 parameter version of .on() which creates a delegated event
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.
$(document).on('click', '.show-modal', function())
To improve performance bind the event delegation to the nearest parent, so the event doesn't need to bubble to the document element to be executed.
Related
I am using bootstrap modals in project. In one page i have 2 containers that, one of them is inside the other one. The outer one has a modal trigger on click event and the inner one has a routing to another page. I can get modal popup if i click on outer container. That's okay but the problem is if i click the smaller container, modal triggered also before routing.
<div class="outer" data-toggle="modal" data-target="#exampleModal">
<a href="somewhere">
<div class="inner></div>
</a>
</div>
How can i prevent the pop up if i click the inner container.
I know i can cancel modal if i catch the hover event for inner container but i am looking more bootstrap way.
Changed your html a bit. I have put the link inside the inner div. Then using jquery you can stop propagation.
<div class="outer" data-toggle="modal" data-target="#exampleModal">
sadsdaddsads<br/>
asdsddsa<br/>
<div class="inner">asadds </div>
</div>
<script>
$(document).ready(function() {
$('.outer > .inner').click(function(e) {
//alert("inner div clicked");
e.stopPropagation();
});
});
</script>
Have a problem that can not solve (I'm new in jScript).
I have 3 rows, each contains 4 blocks, row in HTML below (bootstrap):
<div class="row product-element">
<div class="col-lg-3 col-md-3">
<div class="product-element-container">
<img src="img/1_mini.jpg" alt="Texto Alternativo 1" class="img-thumbnail">
<h4>Some text H4</h4>
<p>Some text p</p>
<p>Some text p</p>
</div>
BUY
</div>
...
...
...
</div>
I have also modal window, that opens when user click "buy" button, and I need to copy and elements from "product-element-container" to modal window.
Problem: I don't know how to create proper "select" in jQuery that will chose div with pressed button. What is the best way to do this?
This is a very simple implementation of what you're trying to do:
$('a.launch-modal').click(function() {
var content = $(this).siblings('.product-element-container').html();
$('#modal-register').html(content);
});
First, you add an on click event listener to all <a class="launch-modal"> elements, the callback (i.e. what happens after you click) gets the HTML content of the corresponding <div class="product-element-container"> element and puts it in the <div id="modal-register>
You can use $(this).siblings('.product-element-container') within your button click event callback function.
First give classes to h4 and your p tags inside the container that you want to copy.
Second add an attribute such as data- btnId="button id here" to the button.
Next bootstrap have a event on modal open show.bs.modal and shown.bs.modal which fires on opening and after modal is being rendered on page respectively.
$( '#your modal id" ).on
('show.bs.modal' , function
(event) {
var button =
$(event.relatedTarget) // Button that triggered the modal
var recipient = button.data
('btn id here which is inside container' ) // Extract info from data-* attributes
var modal = $( this)
modal.find( "h4").text( receipt. parent(". containerClassNameHereWhoseContentToBeCopied"). find("h4.classNameOfH4TagHereWhich. IsInsideContainer).text());
// Do same for P tags.
})
Note* your modal should have h4 and p tags. Or you can put values/text to any tag.
i have a div wich content is dinamically loaded into it with jquery .load event.
example:
<div data-role="content">
<!-- dinamic loaded content with .load-->
<input type="button" id="hi" />
<!-- end of loaded content-->
</div>
i Have on header a .js loaded contaning
$(function() {
$("#hi").click(function() {
alert("hi");
});
});
As the div is not there when the js is loaded, the click event is not triggering, the solucion is on jquerymobile click event? what can i do to workaround this ?
Thanks
Use jQuery .on()
$(document).on('click', '#hi', function(){
alert('hi');
})
I choose document but it should be the closest non-dynamic parent.
I have a function in the onresize event of a wrapper div to resize an element. That function isn't called. Is the onresize event not available for divs?
Here is the HTML.
<div id="matting" onresize="resize_page();"> <!-- Begin page matting div -->
<div id="page"> <!-- Begin page div -->
</div> <!-- End page div -->
</div> <!-- End page matting div -->
<script type="text/javascript">
function resize_page() {
alert ('resize_page');
$("#page").css('height','120%');
}
</script>
The onresize event occurs when a window or frame is resized.
So, it seems it isn't supported for div
http://www.w3schools.com/jsref/event_onresize.asp
You can use jquery plugin http://benalman.com/projects/jquery-resize-plugin/ An internal polling loop is started which periodically checks for element size changes and triggers the event when appropriate
How do I make this SimpleModal script to load when the page loaded instead of clicking the button? Thank You =)
< div id='basic-modal' >
<a href='#' class='basic'>Demo</a>
</div>
< div id="basic-modal-content" >
Basic Modal Dialog
For this demo, SimpleModal is using this "hidden" data for its content. You can also populate the modal dialog with standard HTML or with DOM element(s).
Examples:
$('#basicModalContent').modal(); // jQuery object; this demo
$.modal(document.getElementById('basicModalContent')); // DOM
$.modal('<p><b>HTML</b> elements</p>'); // HTML
</div>
<!-- preload the images -->
<div style='display:none'>
<img src='img/basic/x.png' alt='' />
</div>
</div>
jQuery offers the .ready() handler which fires when the browser DOM content was loaded.
$(document).ready(function(){
// code which executes on dom ready
});
short cut for this
$(function(){
});
There are several other ways/handlers. You could also deal with the window onload event, which fires if all content is loaded completly (images, iframes, etc.)
window.onload = function(){
alert('onload! yay!');
};
jQuery'ish
$(window).load(function(){
alert('onload! yay!');
});
Just put your code on load event of the window like this:
$(window).load(function(){
$('#basicModalContent').modal();
});