I am kind of a newbie to jQuery so sincere apologies if my question seems very superficial. I wanted to know how i can use buttons in one div to place content in another div when any one of the buttons is clicked on using jQuery. Each button of course will be loading its own content in the specific div that i want changed.
Thank you in anticipation
That's pretty simple:
$("#buttonA").on("click", function() {
$("#theDiv").load("http://theUrl");
});
$("#buttonB").on("click", function() {
$("#theDiv").load("http://theOtherUrl");
});
Replace #buttonA, #buttonB, #theDiv with your specific selectors.
A better way would be to use data attributes:
<button class="link-btn" data-url="http://theUrl">load A</button>
<button class="link-btn" data-url="http://theOtherUrl">load B</button>
And...
$(".link-btn").on("click", function() {
$("#theDiv").load($(this).data("url"));
});
Following jquery can help
$('#buttonid').click(function(){
$('#div2id').load('page.html');
}
Here's the code:
$('#yourDivId').load('content.html'); // Your content source
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've been struggling with Javascript, of which I'm very unfamiliar.
I'd like to highlight the div after scrolling. I keep finding references to this highlight example, but anything I try doesn't do anything.
I think the problem is the example is showing how to do it in a simple html file with everything self-contained. I'm working within a PHP ecommerce platform (prestashop) and have to put the JS and CSS in their respective places. I'm not understanding how to call what's in that example correctly. Since I don't get any errors, I don't know how to troubleshoot. No errors, it just doesn't do anything.
In my HTML I have
<div>
<a onclick="test('myID')">test highlight</a>
<div id="myID">Here's the div</div>
</div>
In the JS I have
function test(myId){
$( document ).click(function() {
$( myId ).toggle( "highlight" );
});
}
Well, I fixed your problem buddy ;-)
This is the html
<div>
<a>test highlight</a>
<div id="myID">Here's the div</div>
</div>
the jQuery code
function test(myId) {
$("#" + myId).toggle("highlight");
}
$("a").click(function() {
test("myID");
});
What I did is remove your onclick from the anchor element and binded the click event with jQuery instead. And that did the trick ;-)
Here's a fiddle if you want to see it in action.
EDIT
The reason my highlighting wasn't functioning as you wished for, was because I was using an older version of the UI library. And the update also contains a way to use classes to bind click events. The fiddle above will show you.
Or if you what it more link the Highlight example you linked
you could do it like this:
EDIT
Look at this, it will maybe help you:
Fiddle
This is the HTML:
<div>
<p>Click to toggle</p>
<p>highlight</p>
<p>on these</p>
<p>paragraphs</p>
</div>
This is the Java script:
$('p').toggle(
function () {
$(this).css('background-color', 'yellow');
},
function () {
$(this).css('background-color', 'white')
});
But it is highly dependent on which version of jQuery you end up using.
This example uses 1.8.3
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');
Fiddle - http://jsbin.com/udumibO/1/edit
If these divs are hidden (they're hidden by the .hide() event handler) then I want two other divs to show.
I tried the following on document.ready, but it's not working, and I have no idea why.
Here's the code.
if ($(".select-properties, .div-properties, .image-properties, .table-properties").is(':hidden')) {
$(".starter-properties, .canvas-properties").show();
}
Any help is greatly appreciated.
Use this:
if ($('.select-properties, .div-properties, .image-properties, .table-properties').css('display') == 'none') {
$(".starter-properties, .canvas-properties").show();
}
Try this link
It might be helpfull for you.
http://jsfiddle.net/rahulsahu/eveKU/
HTML :
<div id="first-div">first div</div>
<button id="first">hide above div</button><br/>
<button id="second">show another div when first div is hidden otherwise don't show</button>
<div id="second-div" style="display:none;">Second div</div>
JQuery :
$("button#first").click(function(){
$("#first-div").hide();
});
$("button#second").click(function(){
if($('#first-div').is(':visible')) {
// do nothing
alert("first div is not hidden");
}
else{
$("#second-div").show();
}
});
I managed to accomplish the effect I wanted using the following function.
$(".select-tool, .div-tool, .image-tool, .table-tool, .edit-tool").on("mouseup touchend", function() {
if ($(".select-properties, .div-properties, .image-properties, .table-properties").is(':hidden')) {
$(".starter-properties, .canvas-properties").show();
$(".select-properties, .div-properties, .image-properties, .table-properties").hide();
}
});
Here's the fiddle - http://jsbin.com/udumibO/3/edit
I'm sure there's a neater way to write this, but this is the best I could do to accomplish the effect I wanted.
Ok, it looks like a lot of code here. :P
Great, so I think, you just want to create a tab system and initially you want to hide all the tab content and show something else by default.
Well, Here is something which doing same as your code, and also solving your problem.
$("span", ".nav").click(function(){
var target = $("." + $(this).attr("class").replace(/tool$/g, "properties"));
target.show().siblings().hide();
$(this).addClass("active").siblings().removeClass("active");
});
$(".select-properties, .div-properties, .image-properties, .table-properties").hide();
jsfiddle: http://jsfiddle.net/ashishanexpert/c7eJh/2/
JSFiddle code is well commented.
Let me know, if something you want to add or ask about this. Good luck!
You can use
$(".target").toggle(function () {
// your remaining action. something written here
});
I use this fancy little jQuery toggle on my site, works great. But now I have a little larger text area I want to hide, and therefore I've included it in another php file, but when the site opens\refreshes the content is briefly shown and then hidden? Have I done something wrong or does it simply not work right with includes in it ?
Show me?
<div class="content">
<?php include 'includes/test.php'?>
</div>
<script>
jQuery(document).ready(function() {
var par = jQuery('.content');
jQuery(par).hide();
});
jQuery('#toggleMe').click(function() {
jQuery('.content').slideToggle('fast');
return false;
});
</script>
Use css to hide it
.content{
display:none;
}
Also
var par = jQuery('.content');
is a jQuery object so don't need to wrap it again as
jQuery(par).hide();
Just use par.hide(); but in this case, when you will use css to hide the element, then you don't need this anymore.
That will happen. The document briefly shows all the HTML before executing the code in your ready handler. (It has nothing to do with the PHP include.) If you want an element hidden when the page loads, hide it using CSS.
#myElement {
display: none;
}
The toggle should still work correctly.
You just need to don't use jquery document ready function. just use style attribute.
Show me?
<div class="content" style="display:none">
<?php include 'includes/test.php'?>
</div>
<script>
jQuery(document).ready(function() {
jQuery('#toggleMe').click(function() {
jQuery('.content').slideToggle('fast');
return false;
});
</script>
If this information is sensitive/not supposed to be seen without access granted, hiding it with CSS will not fix your problem. If it's not, you can ignore all of this and just use CSS with a display: none property.
If the information IS supposed to be hidden:
You need to only load the file itself on-demand. You would request the data with AJAX, do a $('.content').html() or .append() and send the result back directly from the server to the browser using something like JSON.
You are using the "ready" function that meant it will hide the element when the document is ready (fully loaded).
You can hide it using css:
.contnet { display: none; }
how you render you site server side does not affect how the site is loaded on the browser, what affects it is how the specific browser chooses to load your javascript and html, what i would recommend is set the element to hidden with css, since that is applied before anything else. And keep you code as is, since the toggle will work anyways
You can also clean up the code a little bit.
<script>
$(document).ready(function(){
$('.content').hide();
$('#toggleMe').click(function(){
$('.content').slideToggle('fast');
});
});
</script>