I have multiple expanding / collapsing boxes on a single page being generated by PHP / MySQL.
Problem is, when I click on one link to expand a box, it expands all the boxes.
I thought about appending the post ID at the end of the class (<div class="postreplycontainer-POST_ID">) but I am not sure if that will work since I'd have to figure out a way to change the jQuery.
Here's a working example: http://jsfiddle.net/Draven/kUhkP/35/
Keep in mind, I can't manually code in each box because I am pulling the content from the database.
EDIT: Maybe somebody can help me with an additional problem.
I want to focus the textarea box when I expand the <div>. I tried using the same trick as before (using .closest but that didn't work).
Here's the example: http://jsfiddle.net/Draven/kUhkP/53/
This example will always focus the first <textarea>.
Here's the FIDDLE
$("a.postreply").click(function () {
$(this).closest('.blog-container')
.find('.postreplycontainer').slideToggle("fast");
});
If you call $("div.postreplycontainer") you will access all divs, if the div is always after a table you can use
$("a.postreply").click(function() {
$(this).parents('table').next().slideToggle("fast");
});
to slide that div http://jsfiddle.net/kUhkP/39/
I think this should be ok for your problem.
$("a.postreply").click(function () {
$(this).closest('.blog-table').next().slideToggle("fast");
});
Related
so, I have read just about every question on this subject, but the solutions don't work for my project, it seems that when I change the dropdown, it does the first event, but when I change to a different element it doesn't do anything else, but when I do this with an alert message it changes every time.
here is what I have to demonstrate what I mean
I tried .post it works great until I add php and all the dynamic functions, is it because I used $('#updateDiv').html(url);
I also hide and showed the div based on the change of the dropdown, but all that did was hid and show the div, I want the div to show the content based on a list of categories.
the PHP side will be dynamic, but if I do .html() none of the php renders properly.
http://fiddle.jshell.net/LrxUS/
$.post(url, function(data) {
$("#updateDiv").html(data);
});
As per the fiddle, you have specified
var mydropdown = $('#mydropdown');
but in the change function, you have specified $(mydropdown), either define only id in the variable or the object. Like,
var mydropdown = '#mydropdown';
$(mydropdown).change(function() {}
After that use $.ajax to get the dynamic content.
Ok, lets make it the simplest so that there is no room for mistake in the client side script. Use $.load method defined here.
AS:
$("#updateDiv").load(url);
And don't forget to check what your firebug, chrome inspector or fiddler says about your request in case if you don't get the required result.
I am using this show/hide DIV code in my project: http://papermashup.com/demos/jquery-show-hide-plugin/
Currently, after you click VIEW, the div appears and the words VIEW become CLOSE, which you then hit to close the div. Is there anyway we could move the CLOSE so that it comes up inside the DIV that appears?
I'm new at this and I've been trying all night and I can't get it to work. Any help is appreciated.
With the append() function you can insert code into a certain div.
Try something like
$("#slidingDiv_2").append("<a href='#' class='show_hide' rel='#slidingDiv_2'>Close</a>");
If you want to leave that showHide.js alone, there is a simple solution.
1) Create the "Close" text in the div that appears
2) Give it the property so that when clicked, it executes a .slideUp() function that accomplishes the exact same thing as the other "Close" text in the sample page.
slideUp()
I am trying to use the jquery to Prevent page realoading. I have the whole code php done... and is functional. if you can please go to http://www.jonathansconstruction.com/gallery3.php and click on the different gallery SUbmenus for category View All, Kitchen etc... i'm using get for variables. However, I would like to use a jquery to process the php so i dont have to include it into the gallery.php and also, to prevent page reloading because it brings the page back up and that could be confusing. Any hlep willl be greatly appreciated THanks
UPDATE, Thanks for everyone that helped:
SO far i made an advance on the website, Corrected URL was edited on top of the post
Everything is working smoothly on the effects of quicksand.. HOwever, Lytebox Doesn't Load when a quicksand effect is placed. , at the beginning it loads just fine, but right after pressing one of the menus for the quicksand effect. It stops working. Also, I want to style my menu buttons as is in http://www.jonathansconstruction.com/gallery.php. I see jquery doesnt add and witht the sample I downloaded. and also the that says "gallery Pictures" dissapears ont he quicksand demo.
Any Help is appreciated. Below is the script.js code I have modified so far
$(document).ready(function(){
var items = $('.photo_show figure'),
itemsByTags = {};
// Looping though all the li items:
items.each(function(i){
var elem = $(this),
tags = elem.data('tags').split(',');
// Adding a data-id attribute. Required by the Quicksand plugin:
elem.attr('data-id',i);
$.each(tags,function(key,value){
// Removing extra whitespace:
value = $.trim(value);
if(!(value in itemsByTags)){
// Create an empty array to hold this item:
itemsByTags[value] = [];
}
// Each item is added to one array per tag:
itemsByTags[value].push(elem);
});
});
// Creating the "Everything" option in the menu:
createList('View All',items);
// Looping though the arrays in itemsByTags:
$.each(itemsByTags,function(k,v){
createList(k,v);
});
$('#gallery_menu nav a').live('click',function(e){
var link = $(this);
link.addClass('current').siblings().removeClass('current');
// Using the Quicksand plugin to animate the li items.
// It uses data('list') defined by our createList function:
$('.photo_show').quicksand(link.data('list').find('figure'), {adjustHeight: 'dynamic'} );
e.preventDefault();
});
$('#gallery_menu nav a:first').click();
function createList(text,items){
// This is a helper function that takes the
// text of a menu button and array of li items
// Creating an empty unordered list:
var ul = $('<ul>',{'class':'hidden'});
$.each(items,function(){
// Creating a copy of each li item
// and adding it to the list:
$(this).clone().appendTo(ul);
});
ul.appendTo('.photo_show');
// Creating a menu item. The unordered list is added
// as a data parameter (available via .data('list'):
var a = $('<a>',{
html: text,
href:'#',
data: {list:ul}
}).appendTo('#gallery_menu nav');
}
});
ANOTHER EDIT :
All Looking good So far Fixed Lot of problems, However, for some reason, the span I had on teh static html dissapears from display and even html code when loading jquery quicksand code..?? Here is the code i have on the html part of the website that Does Not appear on the live website for some reason.
<div id="portfolio">
<div class="photo_show"><span>Gallery Pictures</span>
the span part doesnt appear, dont know why
I had the TOp Part Resolvd. just moved the on top of photo_show div and edited positioning... HOPEFULLY Last Edit
the jquery for quicksand made my calendar dissapear, checked and yes it was some jquery conflict but dont know what can be causing it.. also the form validation not working as well ... any help is appreciated!
I visited your webpage link after correcting a typo in the URL for word construction.
I also see the problem that the page reloads when clicking on a sorting filter such as View All, Kitchen, and Miscellaneous which is what you want to prevent.
Unfortunately, those buttons are using URL Links asking to reload the webpage with a filtered option via query string. Nothing can be done for that method of filtering, your just going to reload the webpage since filtering is done on page load.
Perhaps this DEMO shows what you want to accomplish since it does not reload the webpage. That demo has markup that is easy to create and maintain which is build using the Quicksand jQuery Plugin. The tutorial for that demo is accessed using the link at the bottom right, but looking at the source HTML file shows how simple it is.
I made a downloadable demo using both Quicksand and Shadowbox, a lightbox alternative HERE, which might interest you since your webpage is linking the filtered icon results to a lightbox alternative named Lytebox.
Since your edit reflects your interest in Lytebox, the following markup will reinitialize that lightbox alternative after a filtering event has occurred with Quicksand. Update your script.js file accordingly.
$('.photo_show').quicksand(link.data('list').find('figure'), function(){
adjustHeight = 'dynamic';
initLytebox();
});
I also made a correction to your existing adjustHeight since it was using a semicolon instead of an equal sign, but the correct location and use of that is for something unrelated.
The reason that you are not seeing the bullets is because your not using ul/li tags that the demo is using.
I have searched before posting but none of the posts are that relevant (saying that i am new to Jquery).
My problem is when i click the "add friend" button it wont fire upon a single click but it needs a double click.
These are the relevant sections of code:
Setting the div:
$fField = <div style="display:inline; border:#CCC 1px solid; padding:5px; background-color:#E4E4E4; color#999; font-size:11px;">
Add Friend
</div>;
Javascript:
function friendArea(x){
//alert(x);
if($('#'+x).is(":hidden")){
$('#'+x).slideDown(200);
} else {
$('#'+x).hide();
}
$('.friendSlide').hide();
}
the message to display (the one which needs 2 clicks to be displayed)
<div class="friendSlide" id="addFriend">Are you sure?</div>
Any help would be much appreciated! Oh and I'm using the latest version of jQuery.
Hmm, well, it looks like you are showing and hiding your div at the same time:
HTML:
<div class="friendSlide" id="addFriend">Are you sure?</div>
JS:
function friendArea(x){
//alert(x);
if($('#'+x).is(":hidden")){
$('#'+x).slideDown(200);
} else {
$('#'+x).hide();
}
$('.friendSlide').hide();
}
You call friendArea('addFriend'), which is supposed to slideDown your div, but at the end of the function you hide .friendSlide, of which your div is also a class. You basically hide it every time. This can't be what you want.
Comment out that line and it works: http://jsfiddle.net/Ggdhp/
Of course, you might have had a different reason for that, but I think you are getting some divs and classes mixed up.
Note:
I would also suggest that you don't use inline css or javascript. It always makes debug much more difficult, and you miss typos as you end up having to put everything on a single line and escape quotes. For instance, color#999; in your div style is missing a colon.
I'm not entirely sure that's the relevant part of the code, but if you want to learn how to bind functions to click/doubleclick/etc:
http://api.jquery.com/category/events/mouse-events/
I assume you have a button/link somewhere that has something to the extent of:
Add Friend
What you would want to do instead is give that button a class indicating that it's an add friend button, and use jQuery to add the double click function to it.
Add Friend
$('.addFriend-button').click( function(e) {
friendArea( $(this).data('friendName') );
} );
This will cause your function to fire when the button is double clicked, not single clicked. It also allows you to only have to write 1 function, and you can pass the relevant data in using the data-* attributes on the link element.
if you want to run any code on double click over an element use jquery like this,
$('#target').dblclick(function() {
alert('Handler for .click() called.');
});
and one more thing use jquery toggle to display and hide elements like below, On your function
if you are using class name of selector use the selector like below (use .) in case of id use # with id name like above code
$('.target').toggle();
if double clicks works for you to use below code, it converts the single click to double click by jquery. Hopes this will help you
$('#target').click(function() {
$('#target').dblclick();
});
I have a list of links which when clicked opens a link's corresponding DIV. These div's are hidden by default using both jquery .hide() and css display:none.
These divs all contain a php include to a file with a jquery product zoomer in, and because of the way I've made it, only the first one works and the div's below in the source order fail to work (they are included, but the jquery doesnt work) as I'm assuming it conflicts.
I'd love to be able to fix this apparant conflict, but haven't a clue what the issue may be, and as the site is "secret" I can't show the source here without giving away what it is.
So, i was thinking - instead of including these files via php, have them load in when the link is clicked, so only one of these includes is in the page at any one time!
Is this possible using jquery and some php?
--- edit ---
On further investigation - thanks to some of your comments below, it looks like jQuery's .load() looks suitable, but won't work for me. Here is my jQuery:
`
$('.urbaneCarousel li.dowrImg').click(function(){
$('ul.urbaneCarousel').hide();
$('.dowrDiv, .dowrDiv div').show();
$('.dowrDiv .insert').load('path/to/dowr.php');
return false;
});
`
Any advice? I'm 100% certain the path/to/ part is correct.
JQuery .load http://api.jquery.com/load/ | I guess you have to try to play with .load =)
It sounds like you might have some conflicts between those php files. it shouldn't be an issue to include different php's into your hidden divs at all. In any case, couple ways you can do this:
Include all your content via php upfront and simply show the divs on the browser (sounds like what you're doing)
< div id='mydiv1' style='display:none'>
< ?php include('myfile1'); ?>
< /div>
< div id='mydiv2' style='display:none'>
< ?php include('myfile2'); ?>
< /div>
etc.
Then, on some click event, you would do $("#div1").show(), etc.
or
2) simply create your divs empty and bind click events to the .load or .get calls for specific divs
so let's say you have two buttons btn1 and btn2 for those divs.
$('#btn1').bind('click', function() {
$("#div1").get('myfile1');
$("#div1").show();
});
The only problem with the second solution that it will go to the server to fetch data every time button is clicked.
UPDATE
try specifying full path in your .load or .get just to be safe. That might be giving you problems too. Here's a quick example (I am using codeIgniter, thus base_url() reference)
$('#btn_trigger').live('click', function(){
$("#dowrInsert").load("<?php echo base_url();?>auth/index");
});
<input type='button' value='Trigger' id='btn_trigger'/>
<div id="dowrInsert">
My text
</div>
This works fine
Well, I managed to resolve the conflict which was leading to me needing to use the .load() method.
I'm sure there was something within my wordpress theme which was causing this to mess up, so thanks to all those who helped me looking for ways round this, but I managed to accidentally fix my initial conflict in any case, so no longer need the .load() method as a workaround.