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');
Related
Im new to JS, so Im sorry for such easy question. I have slide up/down menu, I want it to be closed by default when the page loads and open when clicking. How can I do this? Thanks very much for the responses. Here is the code:
$('.button-show').click(function() {
if ($(this).hasClass('hidden-menu')) {
$(this).next().slideDown(300);
$(this).removeClass('hidden-menu');
} else {
$(this).next().slideUp(300);
$(this).addClass('hidden-menu');
}
return false;
You need to have the .hidden-menu class on the menu when the page loads. You can add it directly to the html so that it is hidden without any javascript having to run:
<div class="menu hidden-menu">
Or you can use some javascript after the DOM has loaded, which is similar to what you have now just somewhere outside of the click handler:
$(".menu").addClass("hidden-menu")
Add to your .ready() function to set the hidden-menu class by default:
// when your page finished loading
$(document).ready(function () {
// check if there is no .hidden-menu class
if (!$(".MENUCLASS").hasClass("hidden-menu")
{
// then add it
$(".MENUCLASS").addClass("hidden-menu");
}
});
or just simply put it in your HTML element, no hassle:
<div class="MENUCLASS hidden-menu">
// stuff
</div>
hope that helps
on page load you just add inline css display:none;
you problem will be solved.
First of all you have to hide your div by default using CSS and apply jQuery see below code
$('.button-show').click(function() {
jQuery('.menu').slideToggle();
jQuery(this).toogleClass();
});
I want to make a login slider with jQuery. You will have a div at the top of your page with a plus image. I want the plus image to be changed into a minus image and the div will slide down. Here is my code but there is a problem.
<script src="_js/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$("form").hide();
$(".open").click(function() {
$("form").slideDown("slow");
$(".open").addClass("close");
$(".close").removeClass("open");
$(".close").click(function() {
$("form").slideUp("slow");
$(".close").addClass("open");
$(".open").removeClass("close");
});
});
});
</script>
It works once but if you want to slide it down for the second theme it doesn't work anymore.. Can somebody help my please?
tnx!
Working JSFiddle
Try something different like the following:
$('.open').click(function () {
$('form').slideToggle('slow', function () {
$('.open').toggleClass('form-is-open');
});
});
jQuery offers some toggle functions which supply the desired behaviour. This way you don't need two click handlers or keep track of classes yourself. The above code simply adds a class ('form-is-open') to the button, when the form is shown and removes it, when it is hidden.
I have a content structure like this:
Click me.
<p class="hidden_content">This content is toggleable.</p>
Click me.
<p class="hidden_content">This is a different section.</p>
Click me.
<p class="hidden_content">This section is also different.</p>
I have already discovered how to make this work with one section, but how can I make it so that when I click on a toggle_button it opens only the nearest hidden_content class.
$('a.toggle_button').click(function() {
$(this).next('p.hidden_content').toggle();
}
http://api.jquery.com/next/
Simply try
$("a").click( function(){
$(this).next('p').toggle();
});
Working Demo
It's easy with JavaScript but you could also stay with plain CSS with the :target selector --
Click me.
<p id="hiddenContent1" class="hidden_content">This content is toggleable.</p>
<style>
.hidden_content{
display:none;
}
.hidden_content:target{
display:block;
}
</style>
Here's a Fiddle
This will toggle the following div, and stop the page returning to the top:
$('a.toggle_button').click(function(e) {
e.preventDefault();
$(this).next('p.hidden_content').toggle();
}
Use the jQuery .next() selector
$(".toggle_button").on("click", function () {
$(this).next(".hidden_content").toggle();
});
Here is my script :
<body>
<div id ="mainCategory" class='fade'>
Category</div>
<div id="divSubCategory">
Category1
<br />
Category2
</div>
<script type="text/javascript">
$("div").hover(
function () {
$(this).append($("#divSubCategory").html());
},
function () {
$("#divSubCategory").remove();
}
);
$("#divSubCategory.fade").hover(function () { $(this).fadeOut(100); $(this).fadeIn(500); });
</script>
</body>
I want to show and hide divSubCategory on mainCategory hover. But it doesn't work. What should I add?
$(document).ready(function(){
$('#mainCategory').bind('mouseenter', function() {
$('#divSubCategory').fadeIn();
});
$('#mainCategory').bind('mouseleave', function() {
$('#divSubCategory').fadeOut();
});
});
Ok dude the problem is that you're using .html(). This copies the inner html (not the outer <div id="divSubCategory"></div> bit too... just the bit in the middle.
Because of this, when you do $('#divSubCategory').remove() its removing the actual div in the HTML, not the HTML you've moved into the div above.
Assuming you have display: none on #divSubCategory you will see the text from that div get appended to the first div, then when you mouse-out it will not go away (although the second (hidden) div will get deleted).
Anyway the way around this is to use clone(). I'll do a fiddle for you:
http://jsfiddle.net/fZZu5/1/
I also fixed your fades for you.
EDIT: This moves the div#divSubCategory into the div#mainCategory before showing it and then removes it completely from there when you mouse-out - this is what I assumed you wanted to do from your code. Nicks just shows and hides it where it is. Depending on what you want, both these answers are correct. :)
This is the 100% working with your requirement:
Check this: http://jsfiddle.net/ZWqnk/8/
Wrap your code inside the document.ready() function
$(document).ready(function(){
// Your code here
});
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>