I'd like to change the content of a div inside a fancybox, I have this in my html page:
inline div for fancybox:
<div id="user_should_subscribe" style="display:none;">
<div id="test">hi</div>
</div>
need to show fancybox automatically when page is loaded:
<script type="text/javascript">
<!--
$("#user_should_subscribe").fancybox({
content: $("#user_should_subscribe").html()
}).trigger("click");
// -->
</script>
so far so good. fancybox is shown but if I try to change the content of div#text the content does not change. Inside the fancybox I have a ajax form, when the request is completed I trigger
$("#test").html('new')
but nothing change, but if I try to check the content in this way
$("#test").html('new')
alert($("#test").html('new'))
I get: new so I think the problem is related to fancybox because the div#test content is not rendered correctly, any hint?
Thank you
You are not opening element having ID "user_should_subscribe", but you are creating and opening its clone (using .html() method), so you are now having two identical elements having the same ID. That`s why your code later would change only first one.
So, you need to open your element as "inline". For example (this would open once) -
<script type="text/javascript">
$(document).ready(function() {
$.fancybox.open({
href : "#user_should_subscribe",
type : 'inline'
});
});
</script>
Related
I have HTML page that has couple of paragraphs and a reference to an IFrame, the IFrame contains a form, with a couple of text boxes, dropdownlist and a button. When a user clicks the button on the IFrame it send's back a thank you message. The only problem is that the two paragraphs on the HTML page are still showing when the thank you message is displaying. How do I hide the two paragraphs when the button on the IFrame is clicked? (I've rapped two paragraphs around a div)
Thanks
Try this code in your iframe script,
$('button').on('click',function(){
$('p').hide();
});
If the paragraph elements are in parent window then use window.parent.document like,
$('button').on('click',function(){
$('p', window.parent.document).hide();
});
Well, without markup or javascript I have to guess, but, assuming both the main document and the document displayed in the iframe are in the same domain, that the div in which your paragraphs are contained has an id of pContainer and your button in the iframe has an id of formButton you can do this (as you say nothing, I assume you're not using jQuery):
In the main document script:
function hideParagraphs() {
document.getElementById('pContainer').style.display = 'none';
}
In your iframe:
window.onload = function() {
document.getElementById('formButton').addEventListener('click', window.top.hideParagraphs, false);
};
Change the ids for those that suit your markup.
I'm using jquery to load my website content once its fully loaded. That works great.
jquery code
function check() {
$("#content").load('items.html');
}
$(document).ready(function() {
check();
});
html
<div id="content">
</div>
Is there a way without refreshing the whole page to dynamically load html element (div) when user clicks on one of the items which were already loaded('items.html')?. On one click I want to remove already loaded 'items.html' inside #content div and load new div from any.html file.
So basically, I need to show more info for that particular item by dynamically replacing already loaded items.html and adding new div instead.
I managed to load new html page by adding anchor tags on every item, but it would be much better if I could load only one part(div) of a html file and not a whole page, that way I can write all items informations in only one html file, and then add those div's dynamically when user clicks on any item.
function check() {
$("#content").load('items.html #loadable'); // #ID to load
}
$('#loadCont').click(check);
main page example
page 2 example
You might also want to put this somewhere
$.ajaxSetup({ cache: false });
https://api.jquery.com/jquery.ajaxsetup/
As seen from the demo, .load() does already content-replacement, so no need to .empty() or .html('') beforehand.
Simple.Try to call the check() function on clicking of the element
$('element').click(function(){
check();
});
I need to turn off some jquery fade in and out on a single page because it causes it not to load properly.
The page is not public to view, but it has tabs created in css when I click the tabs it fades out as if I were changing the page and then nothing loads back up.
Is it possible to change the javascript, or disable it on a single page??
Thnx
Add the following after the default JS code is included, in order to override its behaviour.
<script type="text/javascript">
$(document).ready(function()
{
$("a").unbind("click");
$("a").click(function(event)
{
event.preventDefault();
});
});
</script>
This should remove the biding that the <a> element has with the fade effect.
Docs: http://api.jquery.com/unbind/
I have 2 page:
page 1 like this
In page 2. I want after click button it show in current page like this:
some code of page 2
<script type="text/javascript">
$(document).ready(function(){
$("my_button").click(function(){
//I want show page in page 2 like here images.
})
})
</script>
if the tool is a page rendered server side
(ex /uploadtool.php)
load the content of that page in an iframe inside a dialog
example :http://clarkupdike.blogspot.com/2009/03/basic-example-of-jquerys-uidialog.html
Look into dialogs. jQuery would be your best option here.
<div class="your-upload-div" style="display:none;">
Your upload window page markup?
</div>
<script>
$(document).ready(function() {
$('.my_button').live("click", function () {
$('.your-upload-div').show()
$('.close-btn').hide()
});
});
</script>
Then position it with css.
Pretty sure dialogs would be a good idea here though, I typically use http://fancybox.net/
First, here is my code:
<script type="text/javascript">
$('#Advertisement-1').click(function () {
alert("Ad Clicked!");
});
</script>
<div id="Advertisement-1">
<!-- PBBG Ads Zone Code Begin -->
<center>
<iframe src='http://www.pbbgads.com/ad.php?z=429&bg=000000' width='468' height='67' marginwidth='0' marginheight='0' hspace='0' vspace='0' frameborder='0' scrolling='no'></iframe>
</center>
<!-- PBBG Ads Zone Code End -->
</div>
Now, my issue is when I click the ad, it doesn't send an alert. It just opens the ad in a new window. Any ideas how I can get the click event to work?
click event doesn't works on iframes, because the event does not bubble up through the <iframe> tag's ancestors in the DOM.
Instead you can use the blur event to detect when your parent page is losing focus.
This jQuery plugin is designed to track clicks on iframes : https://github.com/finalclap/iframeTracker-jquery
It's very easy to use, simply select your iframe with a selector, and supply a callback function (will be fired when the iframe is clicked) :
jQuery(document).ready(function($){
$('.iframe_wrap iframe').iframeTracker({
blurCallback: function(){
// Do something when iframe is clicked (like firing an XHR request)
}
});
});
The code to alert is in the parent window and the ad I suppose is inside the iframe so it is not possible unless the parent page and iframe are in same domain.
You can't unless you're detecting the click from http://www.pbbgads.com/