<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".shoutpanel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
<a class="trigger" href="#">Shoutbox</a>
<div class="shoutpanel">
<iframe id="shoutbox" name="shoutbox" width="350" height="480" src="tchat.php">
</iframe>
</div>
This script will toggle a sliding panel with a shoutbox in it.
If i put the shoutbox outside of the sliding panel then it will automatically scroll down as soon as it is loaded (to display the last shout)
But for some unknown reason when i put the shoutbox inside the sliding panel, it won't scroll down unless i manually refresh it.
So i am trying to find a workaround and i thought about setting the trigger script to automatically refresh the shoutbox iframe when it is executed. So when you click the trigger it would refresh the shoutbox after opening the sliding panel
i'm not a jquery pro so i have not been able to do it myself... Basically i just need something like this:
$(document).ready(function(){
$(".trigger").click(function(){
$(".shoutpanel").toggle("fast");
$(this).toggleClass("active");
return false;
document.getElementById(shoutbox).contentDocument.location.reload(true);
});
});
Couple of issues:
You have a return false in your click event (which is not required) and also it is before your reload statement. So it never executes.
document.getElementById(shoutbox) should have the id in quotes.
With this you are always reloading the iframe even during slideUp.
Try this:
$(document).ready(function () {
$(".trigger").click(function () {
$(".shoutpanel").toggle("fast", function () { //Use toggle's complete function
if ($(this).is(':visible')) { // check if this is in visible mode
document.getElementById("shoutbox")
.contentDocument.location.reload(true); //reload the iframe
}
});
$(this).toggleClass("active");
});
});
Fiddle
Related
I'm new to jQuery and been trying to figure this out.
I have a course assignment where I have to make an event handler for a page unload in JQuery that when fired will fadeout(3000) a div and then the text 'Thank you' will fadein(3000). I'm assuming what the instructor means is to have a button or link that leaves the window and goes to another page but first executes the fadeIn/FadeOut.
I'm not having any issues w/ the FadeIn/FadeOut option. I'm having the issue w/ the unload ... how do I get it to go to a new page but first execute a fadeOut(2000)/fadeIn(2000)?
I'm having a problem figuring this out. As far as I understand unload is compatable only w/ $(window), so the only that I can really do is have an alert?
This is what I have so far, but this is not an unload, I'm trying to figure out how to have this effect work once you are unloading. Is that even possible?
JQ
$(function () {
$(".btn1").click(function () {
$("#fadeout").fadeOut(3000);
$("#thankyou").fadeIn(3000);
});
});
CSS
btn1 {
display:none;}
HTML
<button id="btn1" class="btn1">CLICK</button>
Would I add a delay to close the window and link something else at the same time when you hit the button?
$(".btn1").click(function() {
$("#fadeout").fadeOut(3000, function() {
$("#thankyou").fadeIn(3000, function() {
location="url";
});
});
});
#thankyou {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='fadeout'>Hello World!</div>
<div id='thankyou'>Thank you!</div>
<button class='btn1'>Click</button>
This?
If got a busy icon that displays whenever a button is clicked (the page dim's out and the icon displays. But I intended for this to happen whenever the page is busy and not just when a button is clicked. If tried to look at a few things for example the .ready function, but can't seem to get it working correctly... How do I set this in javascript/jquery to display whenever the page is busy and hide when the page is loaded fully? (I'm still a beginner in javascript).. Any help will be greatly appreciated..
This is how is it currently working (but only if I click on a button and not on anything else (like a checklist)
<script type="text/javascript">
function ShowProgress() {
setTimeout(function () {
var loading = $(".loading");
loading.show();
var overlay = $(".overlay");
overlay.show();
}, 200);
}
$('form').live("submit", function () {
ShowProgress();
});
$(window).load(function () {
$('.loading').hide();
$('.overlay').hide();
});
</script>
You can use the ASPX node UpdateProgress, in your MasterPage
<asp:UpdateProgress ID="UP" DisplayAfter="10" runat="server">
<ProgressTemplate>
<!-- Insert your nodes 'loading' and 'overlay' here -->
</ProgressTemplate>
</asp:UpdateProgress>
Then, when a Postback or a Callback is raised, your nodes will appear.
what you need is the request interceptors. you can check $.ajaxSetup
I'm having an issue taking a click event on a button that's in an iframe (same domain as referrer) and making it close (in this case) 2 divs that are in the parent window.
Example html for the main page:
<div class="wrapper">
<iframe src="foo"></iframe>
</div>
<div class="bg"></div>
Example html of the iframe:
<div class="btn_wrapper">
Yes
<a class="no">No</a>
</div>
JS:
// redirect
$('body').on('click', '.btn_wrapper .yes', function() {
window.top.location = 'http://www.foobar.com';
});
// hide iframe popup wrapper and bg
$('body').on('click', '.btn_wrapper .no', function() {
$('.wrapper').fadeOut(250, function() {
$('.bg').fadeOut(150);
});
});
The $('body').on('click'... functions do run successfully, as clicking the yes button does redirect, and in my full code, clicking no is made to set a cookie, which it does.
For some reason though it just doesn't hide the .wrapper which contains the iframe and a background overlay. How can I make this work?
I do not strictly have to use an iframe for what I'm building, however for the sake of consistency and integration with functions already in place i would really like to keep using the iframe.
Try:
$('body').on('click', '.btn_wrapper .no', function() {
$('.wrapper', window.parent.document).fadeOut(250, function() {
$('.bg', window.parent.document).fadeOut(150);
});
});
I am using fancyBox to load Ajax content as:
Example
<script>
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>
The documentation says that you can prevent outside scrolling if you set:
scrollOutside = false
But this does not work when loading ajax content.
How can I prevent that the scrolling outside of the fancyBox does not appear when the fancyBox is visible?
Try this:
$(document).ready(function() {
$('.fancybox').fancybox({
scrollOutside: false
});
});
Ok this is my problem that no one can seem to answer. I have two javascripts in use. Once is for the popup I have and tells it to stay closed for 24hrs when closed. The other is to put a link some where on the page to display this popup until refreshed and kept hidden till the cookie expires. Now the div popup is set to display:none. The cookie tells it to be shown until the close button is pressed. No matter what I seem to rework in my javascript to tempoarly show the popup from a link, it will not show. Some how the cookie javascript is going to have to be modified and thus having to remove css:display:none on the popup div. I have no idea what to do.
This is the current code:
http://jsfiddle.net/Dv7DR/-
http://pastebin.com/fHvv5spn
<script type="text/javascript">
$("#linkshow").click(function {
$("#window").show()
});
</script>
Submit a comment
<div id="window">
...
<div>
<script type="text/javascript">
...cookie popup hide for 24hr on close
</script>
Note: I have already tried:
$(document).ready(function() {
$("#linkshow").click(function(e) {
e.preventDefault();
$("#window").show();
});
});
and...
$(document).ready(function() {
$("#window").hide();
$("#linkshow").live('click', function(e) {
e.preventDefault();
$("#window").show();
});
});
and...
$(function() {
$("#linkshow").click(function() {
$("#window").show()
});
});
and...
<div id="window" style="display:none;">
to
<div id="window">
Then the other 24hr cookie javascript doesn't keep the popup hidden. I am assuming I need to take out the id="window" style="display:none; and some how advanced the javascript cookie at the bottom the code so it will hide when asked to be hidden for 24hr and show when needed to be shown on the current page until refresh but I am at blank on what to do.
Your syntax is wrong, Try
$(document).ready(function() {
$("#linkshow").click(function(e) {
e.preventDefault();
$("#window").show();
});
});
Works for me: See jsFiddle
You need to wrap your code in a DOM ready handler, and you also missed the brackets following the function declaration. Try this:
<script type="text/javascript">
$(function() {
$("#linkshow").click(function() {
$("#window").show()
});
});
</script>