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?
Related
I have a problem with my updateprogress. Its working, but I want a close button to close it. Its not problem yet, but I want to display this button after display of updateprogress in 30 sec. I tried do it with jquery, but it didnt work.
Can you help me?
Here is a sample. My problem is, that I dont know, what kind of event show the updateprogress.
$('.UpdateProgress').on('display', function () {
$('.btnClose').hide(0).delay(30000).show(0);
});
I tried display, show, focus event, but I dont know how to do this.
Set your button to hidden to start:
<style>
input.btnClose
{
display: none;
}
</style>
<input type="submit" class="btnClose">
Now use setTimeout to show() it after 30000ms (30 seconds):
<script type="text/javascript">
$(document).ready(function(){
$('.UpdateProgress').on('display', function () {
setTimeout("showDelay();", 30000);
});
});
function showDelay() {
$('.btnClose').show();
}
</script>
I have a span that I want to create a jquery dialog on when it is clicked.
I have included this in the header:
<script type="text/javascript">
$(document).ready(function () {
$('#quote_dialog').click(function () {
$('#quote_dialog_open').dialog('open');
return false;
});
});
</script>
The following is the span (havent included content):
<span id="quote_dialog">
content
</span>
And the div is just a box on the screen:
<div id="quote_dialog_open">
content
</div>
I assume I need to hide the div using CSS? Will jQuery make it popup as opposed to just appearing?
Nothing is happening at present when the span is clicked.
Firstly, Make sure you are also including the relevant jquery UI...
Secondly, look at this fiddle, it shows you the solution.
$(document).ready(function () {
// next add the onclick handler
$("#quote_dialog").click(function() {
$("#dialog").dialog();
return false;
});
});
http://jsfiddle.net/k0nzhtLw/
Hope it helps :)
wild guess, your problem is the typo, change
$('#quote_dialog_oepn').dialog('open');
to
$('#quote_dialog_open').dialog('open');
I have been asked to put in place disabling of the right clicks on a website, I've informed them there is so many ways that people can still download the images via Google Images, Cache, Firebug etc etc, but none the less my arguments have gone ignored and they insist this must be done.
Any, I've put in the footer some code that disables right clicking on all elements using <IMG src=""> this fails to work on NivoSlider, I did change the script to use window load on disabling the right click which works but after slide1 it stops working and I assume this is something to do with changes to the DOM.
JavaScript is by far my weakest point and I'm hoping that someone without to much trouble can either give me a full working solution or something to go on. Thanks in Advance.
They are using NivoSlider with the following trigger:
<script type="text/javascript">
(function($) {
$(window).load(function() {
$('#slider').nivoSlider();
});
})(jQuery);
</script>
And this is the code that I've placed in the footer that fails to work on slide2+
<script>
$(window).load(function() {
$('img').bind('contextmenu', function(e) {
return false;
});
});
</script>
You're absolutely right with the DOM changes. You need to delegate the event to a parent element.
Try something like this:
$('#slider').delegate('img', 'contextmenu', function(e) {
return false;
});
Or this if using jQuery > 1.7:
$('#slider').on('contextmenu', 'img', function(e) {
return false;
});
You might be able to do it by preventing the default behaviour of a right click on the image.
See this answer: How to distinguish between left and right mouse click with jQuery
<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
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>