I have a parent page that calls an iframe modal window as follows:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
When the iframe is closed, I want the parent page to refresh.
What code do I need to add to the iframe? Do I need to create a callback function on the parent page first?
I did it via callback:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto(
{
modal: true, /*So it can be closed only with the button*/
callback: function(){
document.location.reload(true);
}
})
});
</script>
if you look closely at the source, prettyphoto wraps the iframe in a div that contains all the buttons. the only part that is iframed is the actual content. The close button is contained in the parent page. You will need to add an event handler to .pp_close click event.
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
$(".pp_close").click(function () {
document.location.reload(true);
});
});
</script>
<script>
$(document).ready(function(){
window.parent.refreshPage();
window.parent.$.prettyPhoto.close();
});
</script>
the on the page you opened the iframe have this there
window.refreshPage = function(){
setTimeout(function() {
window.location.reload();
}, 500);
};
Related
I am using nicescroll library js because i want to make my div scroll nice rather than default scroll.
I want to make scroll to markerlist ul which is generated by javascript.
I have added nicescroll javascript library like this:
<script src="http://areaaperta.com/nicescroll/js/jquery.nicescroll.min.js"></script>
and function like this:
<script type="text/javascript">
$(function() {
$("#markerlist").niceScroll();
});
</script>
Maybe you can set a timeout before applying nicescroll. When All contents are loaded then apply nicescroll. Or if you are using a div which shows after clicking a button you can put the code in your click handler function.
$(window).on('load', function() {
window.setTimeout(function() {
$("#markerlist").niceScroll();
}, 200);
});
I need to have a stylesheet link removed from my HTML head when the user clicks a link. I found the following, but I need a MooTools equivalent.
To remove a stylesheet simply give it an id
<link href="cssFolder/sheet2.css" rel="stylesheet" type="text/css" id="sheet2">
And insert the following script just before tag
<script type="text/javascript">
$(document).ready(function () {
jQuery('#sheet2').remove();
});
</script>
window.addEvent('domready', function() {
$('sheet2').destroy();
});
Information:
domready event
$
Element.destroy()
Try this:
sheet = document.getElementById(sheet2)
sheet.parentNode.removeChild(sheet)
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to make onclick automatically through onload function
So I have the following function which is being called when I click a button.
Here is the code:
<a href="#" role="button" onClick="myFunction('parameter')">
How can I call this function as soon as page is loaded?
I tried onLoad function but doesn't seem to work.
There are multiple options for onload event.
In HTML
<body onload="myFunction('parameter')">
In Javascript
window.onload=function(){
myFunction('parameter');
};
In JQuery
$(document).ready(function(){
myFunction('parameter');
});
Put this anywhere on your page, preferably in the <head>
<script type="text/javascript">
$(function() {
myFunction('parameter');
});
</script>
See https://stackoverflow.com/a/7911809/584192 for more ways of doing it via jQuery.
Have you tried this:
window.onload = function(){
myFunction('parameter');
}
See more at: https://developer.mozilla.org/en-US/docs/DOM/window.onload
You call in myFunction document.ready or just before closing of body tag.
Within document.ready
Live Demo
<script type="text/javascript">
$(document).ready(function(){
myFunction('parameter');
});
</script>
Before closing body tag
<script type="text/javascript">
myFunction('parameter');
</script>
You can use the following code.
<script>
onload = function(){
myFunction('parameter');
}
</script>
I want to have an Adobe Edge animation, which plays after a visitor clicks an ordinary HTML form button. How can this be done?
ball_edge.js
remove:
$(window).load(function() {
$.Edge.play();
});
The HTML file
Add immediately before </HTML>:
<script>
$("#RoundRect1").click(function () {
$.Edge.play();
});
</script>
I have an html image, and I am trying to figure out if it is possible to do a partial page refresh when someone clicks on the image. I was thinking I would use a javascript. I am using aspx, and mvc model
Here is my thought
<img id = "Img1" , alt = "Click me" src = /content/img1.gif/>
my script would look something like
<script type = "text/javascript" src ="../../Scripts/jquery-1.5.1.js" >
$(function()
{
$("#Img1").click(function()
{
$('#updatePartialView'). load('#Url.Action("myAction", "myController")');
});
});
</script>
but it doesn't seem to want to work, I don't even know if it is possible .
--Update per Comment
I have a series of images on the top, and when the user click on the images the bottom half of the page refreshes with information about that picture.
---update so I wanted to try something different but it doesn't work see below
<script type = "text/javascript" src ="../../Scripts/jquery-1.5.1.js" >
$(function()
{
$("#Img1").click(function()
{
alert("I clicked this");
});
});
</script>
Just remove closing ");" in your end of javascript myFunction(). It would be working.
But I would suggest to add the onclick handler as below.
<img id = "Img1" alt = "Click me" src="">
Script:
<script src="#Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<script type = "text/javascript">
$(function(){
$("#Img1").click(function(){
$('#updatePartialView').load('#Url.Action("myAction", "myController")');
});
});
</script>