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>
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?
I am programming a survey online and want to delay the next button. I have the following code but I would like to improve it:
<script type="text/javascript">
$(document).ready(function(){
$("div.submit_div").slideUp(00).delay(10000).fadeIn(1000);
});
</script>"
I have two ideas, and will appreciate code for any of them:
-Is there any way to add a text that says "please note the button will appear in 10 seconds" while the button is being delayed?
-Is it possible to disable the button and present it with opacity, until the count down finishes and makes it possible to click it?
Assuming $("div.submit_div") to be the said button.
$(document).ready(function(){
$("div.submit_div").hide();
setTimeout(function() {
$("#init_text").remove();
$("div.submit_div").show();
}, 10000);
});
You can make one more div which shows the text you wanted to show while the button is hidden and manipulate that div similar to submit_div button.
Add <div id="init_text"> Please complete survey</div> before the code for the submit button.
Of course you can do it with success callback in animation.
<script type="text/javascript">
$(document).ready(function() {
$("div.submit_div").slideUp(00, function() {
/*
disable button here using `prop('disable',true)`
and do the rest
*/
}).delay(10000).fadeIn(1000, function() {
/*
enable button here using `prop('disable',false)`
and do the rest
*/
});
});
</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');
The goal is to show one div when I click on another one. The problem with my code below is that it shows content when the page loads(you can click on a div to hide/show another one), but I want it to be hidden when the page loads(hidden by default). This is what I have now:
<div class="r-clickfeature">...click here to show another div</div>
<div class="r-productfeature">something...</div>
<script type="text/javascript">
$('.r-clickfeature').on('click', function(e) {
return $(".r-productfeature").slideToggle();
});
</script>
Adding some css to hide the second div by default is the way to go.
.r-productfeature {
display:none;
}
JSFIDDLE here.
Your code is faulty. Change it to this one
<script type="text/javascript">
$(document).ready(function () { // required for jQuery...
$('.r-clickfeature').click(function(e) { // on click
$('r-productfeature').slideToggle(); // slide the other div
});
});
</script>
I am working in django and have created a class which has a field closed. When the user sets this value for a particular object, then I want to disable all buttons and links on the object_view page.
I am using the following jquery snippet, but it is not working. Can anybody help me find the mistake
<script type="text/javascript">
$("a").css('cursor','arrow').click(function(){
return false;
});
$("input").attr('disabled','disabled');
</script>
Update: Not working means that all the links and input buttons are still working, i.e. being directed to the correct page. I have included this code snippet in my <head> section.
Try:
<script type="text/javascript">
$(document).ready(function(){
$("a").css("cursor","arrow").click(false);
// for jquery older than 1.4.3, use the below line
// $("a").css("cursor","arrow").click(function(){
// return false;
// });
$(":input").prop("disabled",true);
// for jquery older than 1.6, use the below line
// $(":input").attr("disabled","disabled");
});
</script>
You need the $(document).ready(...) so that the code doesn't run until the elements exist on the page.
I guess you could turn off all links (that is anchor tags) with something like this:
$("a").click(function (e) {
e.preventDefault();
});
This should work for buttons and other inputs
$(":input").attr('disabled','disabled');
You need to wrap the whole thing in:
$(function() {
});
OR
$(document).ready(function () {
});
To limit the input to buttons:
$('input[type="button"]').attr("disabled","disabled");
Otherwise you disable all input elements.