I have a checkout page that has three fieldsets:
fieldset id="1", fieldset id="2", fieldset id="3". When the page loads, I need it to hide fieldsets 2 and 3 and only show fieldset 1. This is what my jquery looks like:
$(document).ready(function(){
$("#1").show();
$("#2").hide();
$("#3").hide();
$("#4").hide();
});
When I load the page I can see fieldset 1 and fieldset 2. If I refresh the page, it looks perfect, but upon first load, it's weird. Any suggestions?
First thing you need to do is properly name your ID's. ID's can't start with a number.
If you change the name to set_1 you can do the initial hide with CSS.
#set_2, #set_3, #set_4 { display:none; }
No JS needed.
Notwithstanding other issues, your IDs are invalid, which will always cause unpredictable results. Ids MUST begin with a letter.
Beyond that, it is difficult to answer your question without further insight into the code.
$(document).ready(function(){
$("#el_1").show();
$("#el_2, #el_3, #el_4").hide();
});
Should all be valid jQuery, assuming that there is no ID collision (you can only use an ID once per page).
Related
Ok, I know this can be done, for I've seen it before. Yet I have no idea how to make it work I have searched everywhere for an answer.
What I need is for my form to randomly change positions when the page loads from 3 different spots on the page. So for example....
[Here] [Here] [Here]
Could all be possible spots the form could load in but only in 1 spot for each time it loads. I don't know what information you need to help me. I will just give my form for now.
<form name="inputt" action="" method="post">
<div align="center">
<input type="submit" class="catch" value="Catch Pokemon" name="catch">
</div>
</form>
If you need more just ask.
Just my inital thought, but you could write CSS for the 3 different position class, and call them things like 'position1', 'position2','position3'. Then on page load in javascript (or in PHP) if you want, generate a random number between 1 and 3, add the class "position"+randomNumber to the element, and then it will be in one of those places. This is similar to a technique I used for random background images.
Update
Also, if you want to use more descriptive class names for the locations, you could keep a mapping of a number to a class name (or use something like position in an array), to relate a a random number to the class to apply.
Code
CSS:
<style>
.position1 {
// Whatever style you want for position 1
}
.position2 {
// Whatever style you want for position 2
}
.position3 {
// Whatever style you want for position 3
}
</style>
JS:
$(document).ready( function () {
var randomIndex = Math.floor(Math.random()*3)+1; //3 is the number of options you have; +1 makes the range 1 - 3 instead of 0 - 2
$('#my-form').addClass('position'+randomIndex); //Adds the new class the element with id = 'my-form'
}
If you mean by "load" a page refresh than you will have to persist the previous location of the form either in cookie or some other mechanism. Based on the last location of the form you can decide which location should be next.
If the form is being reloaded based on ajax calls, then I would advise using a var to store the previous location of the form and make the next location not be the same as previous by checking the value of the var. If each time form loads position should be unique than use an array to store previously used display locations.
HTH.
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 have a code that displays event information from the database. the parent container's id is show_id. Inside show_id there is some hiden div event_more_details with contents thats only supposed to show when i hover on the parent div which is show_id (in my case am using mouseenter function). Here is the code:
$('.show_event').mouseenter(function(){
$('.event_more_details').fadeIn(500);
});
Problem is, if the php generates five events, when i hover on one event, the hidden div fades in all the other parent divs, too.
If I correctly understand your HTML structure, you can use this:
$('.show_event').mouseenter(function(){
$(this).siblings('.event_more_details').fadeIn(500);
});
.siblings() applies a selector to sibling elements. (docs)
After going through the jquery functions library i think i found an answer:
$('.show_event').hover(function () {$(this).find('.event_more_details').fadeIn(500);}, function () {$(this).find('.event_more_details').fadeOut(500);});
This works fine for me,by the way, #Ohad thanks alot 444 your help.
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 use this to toggle my div elements, and hide all them when the DOM is ready...
$('div[class*="showhide"]').hide();
$('input:image').click( function() {
var nr = $(this).attr('id').substr(7,2);
$('div.showhide' + nr).toggle(400);
});
I have dynamically created div elements with class showhide0;showhide1;showhide2...etc...
Inside the DIV tags I have search boxes.
First when page is loaded all DIV tags hide.
I toggle one of them to show.
Start a search, so the page is reloaded with the result of the query.
Of course all DIV is hide again, because the page is reloaded. Unfortunately...
Is it possible to not hide again after I searched for something? It would be nice when I open the page, all the divs are hidden, but after then just when I toggle it...
If you need a specific element or elements to stay visible upon a page reload, then you're going to need to do something to maintain state across requests, and then modify your jQuery to utilize that state information when initializing the visible state of the elements.
This can be done in numerous ways which include but are not necessarily limited to
Include it in the query string
Include it in the URL hash
Use a cookie
Well, yeah, you just don't run the initial hide() if there's a search request. I'd just exclude that line from the output if, on the PHP level, you know you're executing a search.
We do something similar to this where I work.
We opted instead of have the class name just be hide for all elements and instead have the ids named.
So, we'd have it something like:
<div id="hide1" class="hide"> </div>
along with this CSS to hide all those divs by default
.hide {
display: none;
}
Finally, we use something like this to show them:
$('input:image').click( function() {
var nr = $(this).attr('id').substr(7,2);
$('#hide' + nr).toggle(400);
});
}
This works because of CSS precedence rules. The toggle()/hide()/show() method overrides the hide class's style.
As for the unhiding part, if you pass the ID to unhide to your script, you can parse it and unhide the appropriate div.
You can read and process the query string from window.location.search. Unfortunately, you then have to manually parse it or use a plugin, such as jQuery Query String Object or jQuery URL Utils.
var id = $.query.get('unhide_id'); // This is using Query String Object
$('#' + id).show(400);