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
Related
I have three pages on my website. index.html, services.html and company.html. What I need is when a user clicks on services link, then the page will load from the left or right side instead of the load as normal. I don't know perfectly but it may be possible with some Jquery elements like data-transition="left", data-transition="base", data-name="services". Is there any plugin to load pages from left or right. I need this, Please help me.
There is no way to "load" the page from left to right, but what you can do is:
On your services page
create a "wrapper div" around your page content, and
off-set the content inside the wrapper div to beyond the far right of the page, then
use jQuery/javascript on page load (i.e. inside the $(document).ready() function to animate the content back to normal position.
So, something like this (untested):
<body>
<div id="wrapper">
<div id="inner-wrap">
//page content goes here
//Actually, I might create an inner div here and off-set/animate that one...
</div>
</div>
</body>
CSS:
#inner-wrap{position:relative;margin-left:100vw;}
jQuery:
$(document).ready(function(
//use jQuery .animate() method to slide the marginLeft param back to 0.
){});
Note that jQuery's animate method does not use margin-left - rather, it uses marginLeft. Like that.
Example:
Animating marginLeft with jQuery
Update:
You can use the same idea that was suggested above, but you only need a single file (e.g. index.html) for the entire website, and the "pages" are all just DIVs, and you can use jQuery/javascript to "change pages".
For example:
<body>
<div id="wrapper">
<div id="page1" class="pagex">
//page ONE content goes here
</div><!-- .pagex -->
<div id="page2" class="pagex">
//page TWO content goes here
</div><!-- .pagex -->
<div id="page3" class="pagex">
//page THREE content goes here
</div><!-- .pagex -->
</div>
</body>
CSS:
#wrapper{position:relative;}
.pagex{position:absolute;top:0;left:100vw;}
Concepts you need to understand:
a) z-index -- allows you to position one div on top of another
b) position:absolute -- removes the div from the HTML flow and allows you to position it anywhere on the screen, even over-top of other divs
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.
I have an HTML document with multiple pages using jQuery Mobile's data-role="page". I am trying to call a panel on the second page but am receiving the error
cannot read property 'nodeType' of undefined
The error occurs when I try to transition to the second page. My basic page structure is as follows:
<body>
<div data-role="page" id="page1">
Enter Page 2
</div>
<div data-role="page" id="page2">
<h3> tthis is page 2 </h3>
<input type="button" id="myButton"> My Button </input>
<div data-role="panel" id="myPanel">
<p> Panel content </p>
</div>
</div>
</body>
The panel is being called through a function, but I still receive the same error when I comment out the function.
$(document).ready(function() {
$('#myButton').on('click', function() {
$('#myPanel').panel('open')
})
})
The panel works if it is on the first page and if I define it on the first page and open it on the second, it still opens on the first. It is there when I hit the back button. I am using jQuery Mobile too is that has an effect on anything.
Why am I receiving this error? Is there a simple solution or do I need hack my way around this by creating the panel dynamically? Thanks.
First off, never use .ready() in jQuery Mobile.
Important: Use $(document).bind('pageinit'), not $(document).ready()
The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.
Source: http://jquerymobile.com/demos/1.2.0/docs/api/events.html
Secondly, each page should have its' own panel with a different id, and the div containing the panel should be a direct child of data-role=page.
Panel markup/structure:
<div data-role="panel" id="id" data-position="left" data-display="push" data-theme="b">
<!-- Contents -->
</div>
Opening a panel:
Statically by using anchor/button:
Open
Dynamically:
$.mobile.activePage.find('[data-role=panel]').panel('open');
// Or
$('#panel_id').panel('open');
Closing a panel:
(in case data-dismissible is set to false)
Statically by using anchor/button (Note: It should be placed inside Panel div):
Close
Dynamically:
$.mobile.activePage.find('[data-role=panel]').panel('close');
// Or
$('#panel_id').panel('close');
Demo
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.
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();
});