I was hoping if someone could do this for me, basically I'd like to have a parentcategory. For example this one:''Remixes''
And when you click on it a couple subcategories slide down from under it. Like this
[Code]...
My goal right now is to make a two-part navigation bar where you don't have to reload the whole site, when you click on a link. The navigation bar consists of two <ul> lists with <li> float:left and <a> display:block, so I basically have two lines. It's probably easier to understand if you see it for yourself: jsfiddle (had to change the css style, because I use .less but it works)
When you load the page it's just like that, you have your main category (A,B,C,D,...) and the sub-category (A1,A2,A3,...). What I want: If you click on B, the sub category changes to B1,B2,.... If you click on a sub category the site loads the requested page (with ajax = best solution?!)
My thoughts
At first I thought about just changing the name and href attribute of the second list, but the main categories have different amounts of sub categories, so I would need to add or remove <li>'s. Then I thought about using .load() but I somehow screwed up (of course) and the loaded <ul> doesn't have any css style (wrong order?) and I can't see anything. (with a loaded test.html site containing only the word "test" it worked) Is ajax "overkill" as a solution?
CodeIgniter and the URL
I use CodeIgniter (a PHP framework) for the website and URLs like this: www.example.com/maincategory/subcategory (e.g. example.com/A/A3) That's no problem at all, if I don't use any javascript and reload the whole site every time. But is it possible to change the URL with jQuery when the user clicks through the navigation bar? You click on B, the URL changes to example.com/B all the subcategories change to B1,B2,...When you click on B2 the URL changes to example.com/B/B2 and the site loads the requested page (I guess with ajax, so the navigation stays the same?!)
Minor problem: when you load the site, click on B, then B3 for example, you would get the url example.com/B/B3. If you now save this link, close the site and reopen it with the link, CodeIgniter would load the right site and everything, but the navigation would show A1,A2,.. in the sub category.
Hover vs click
Almost every page where I saw this kind of menu they used hover to change the sub category. But I thought click would be better, so you don't have to avoid touching B,C,D,.. if you want to go from A to A9 for example. Only downside is that you have to click before you see the sub categories.
Summary
A two part navigation menu you can use without reloading, changing URLs (when possible) and probably ajax to load the actual content.
i want to list car category name and car details in a single page but the result is car details are same for every category.
[Code]...
If slideToggle()'s parameters were expanded to include a separate callback for sliding up and sliding down. Or for backwards compatibility, perhaps include an optional boolean parameter in the callback to more easily discern between a slideUp and slideDown operation.
View 1 Replies View Relatedi'm trying to create a tree menu, each time i click into a category it shows me the subcategories.My code works fine but i have some spaces between a category and his subcategories, it's not a css problem
[Code]...
I'm trying to set an option of a drop-down as active, regarding the category. I added the category name for this to the body class="category-XXXX-XXXX". What I need is something like an array to say:
if == category-AAAA-AAAA then option value=1 is selected
if == category-BBBB-BBBB then option value=2 is selected
if == category-CCCC-CCCC then option value=3 is selected
and so on. Unfortunately, I'm getting totally confused where to actually start and how to do that. I know, it is for sure out a line to ask for a finished script, but I'm sure someone can give me a hint, on how to do that.
I worked with now in jQuery. Property however at present the following problem: [i]I provide a AJAX Request. the side is loaded, the parameters all conveyed and back receives I a complete HTML side. Now I would like to have only certain elements however from this side, like DIV, SPAN etc. How can I make with the AJAX Request return in such a way best, which I can select these elements thereby? Simply it would be unfortunately not functioned over the function $ (element), it even if I indicate the HTML Request as secondly parameter.[/i] Excused, for my bad English. ;-) Translatertool. There is unfortunately too many words, in order to describe my problem. ^^
View 2 Replies View RelatedI have been working on this navigation for something to do, and I cannot for the life of me figure out how to get the parent category. Here is an example of my navigation:
[Code]....
So it will produce a sub-menu with other jQuery that I worked out. So, what I am trying to figure out is when you click on "Project 003" I want JavaScript (or jQuery) to find what menu-item it belongs to, so in this case "#mi". I know I have to go 2 parents up (li, li), but I can't figure out how to get back down into the anchor to use the .attrib('href') function.
how one could create a category picker just like gumtree (preferably in jquery):Specifically the points How clicking on a category opens another to the right How clicking on a category appends a variable like "#cat-10201" into the url (and vice versa) How css lists are used instead of form select menus (making it easily styled) How clicking on a deep subcategory automatically preselects all parent categoriesI'm not looking for anyone to actually code it for me (that would be outrageous :p) but tips on how it's actually structured and steps on how it can be coded I can do PHP and I know CSS also
View 1 Replies View RelatedI have a multidimensional associative array in JS which contains category information for a navigation. It's actually set up through PHP, which pulls the info from a database then translates it into JS. I know it's set up correctly since I can see it in the source once the page is rendered. However, accessing this array causes external JS code (from my Slimbox files) to be displayed in the nav. It's as if the array is set up right, but accessing the elements brings in Slimbox code as the elements. It's very strange. You can see the effect here.
It's the secondary nav under Home, Featured Items, etc. Each token that is clickable is separated by an asterisk: [URL]. Notice the other page's navs work great! Try the jewelry nav on the Home page and the categories are set up fine. This is because other pages do not link to Slimbox. (And no, the site aint pretty because I wanted to get the hard stuff working before I work on the look). I've heard of jQuery interfering with Slimbox and Lightbox, but my nav is not using jQuery!
I'm looking for a script or applet that will allow users to search by zipcode or selected category for results. I would like something already built so I can just customize it to our needs. I'm sure it will need to have a database setup for it to work which I am fine with doing. I can modify scripts and files but I have no idea where to start with this from scratch.
We also use the same data for our "Layar" app for the iphone and driod phones. Has anyone messed with layar scripting and databases? We are using hoopala now which makes data entry simple but we cannot modify their database to add category options. It would be nice to find an alternative to hoopala so we could use one database for both the layar app and the zipcode/category search on our site.
I have a php page which returns a table representing a query sent to a MySQL database. So far it has worked in every case except now that I'm trying to use it to call a stored procedure, in which case the readystate is staying at 1 and never completing.
I have logged the results of the php file both in an error log and looked at the response from the request using firebug, both of which show a correct result.
Why isn't this returning properly?
Here are the relevant javascript functions:
Code:
function customizeType()
{
$("custom-header").innerHTML = "";
$("custom-top").innerHTML = "";
[Code]....
After the page loads, the error log shows correct results for all queries.
When updating our agency's webpage daily, [URL] I am looking for a shortcut to save time.. When I update air quality numbers. I have to put the conditions. Ex.. 50 = good 100= moderate etc etc. As you see here(bold and underlined)
[Code]...
Well instead of having to type good or moderate every-time to correlate with the numbers, I want to find a way the category can automatically default correctly when I put in just the number. Ex, if I put in the number 100, it automatically knows to issue/ put Moderate with out me having to type it. I semi wrote a code .. Yet can't seem to know how to execute. Seeing if Maybe I can get some assistance.
[Code]...
I have use the following Jquery plugin selectToUISlider on my web site which has worked fine in IE8,FF, Chrome however when viwing the same site in IE9 the slider doesn't slide when using the mouse to drag the slider. I can still click on each value and the slider will move/jump to the required value. I've debugged the javascript in both FF and IE9 and I can see that in IE9 the slide event doesn't get fired, where in FF it does.
unfortunatly I don't have external web access on a machine with IE9 to try the slider demo pages out to ensure that the demos work in IE9.
I'm looking for a good super-fast sliding plugin for an entire row of images.
Basically I want to replicate what I have here:
[URL]
Using prototype (and a painfully slow load) in jquery.
But I also want to add the ability to click on the images to move back and forth and I want to get rid of the load delay.
I'm trying to use slideUp and slideDown, they seem to be working in terms of being Up and Down but there is no sliding between these states,My CSS:
HTML Code:
#sub-nav{width:240px; min-height:240px; padding:0; background:url(../images/80-opacity-bg-fill-purple.png) repeat; overflow:hidden; position:relative; z-index:4; display: none;}
[code]....
I'll slideUp a div, load some ajax, then slideDown the result.In the result, there are two more divs (navigation and 'subcontent' containers)I have links in the navigation div that should fadeIn new content (via ajax) into the subcontent container.Now, the fadeIn fadeOut functions operate correctly _until_ I use a slide on the larger div. If I slide at all, everything turns into a slide, even within the subcontainers. I'm not sure what's going on.ere's an example structure for the divs:
<div id="globalnav">Anchors/Links for the maincontent div</div>
<div id="maincontent">"maincontent" should slide open and closed.
<div id="nav">Anchors/Links in here</div>
[code]....
I look for something in jquery ( a sliding panel div that can also be collapsed and shows the correct image, hard to explain please see below link, its used on this [code]Anything such exist for jquery with the same features?
View 1 Replies View Relatedim trying to make a sliding tab menu, The menu is already made with animations and such, however now im trying to integrate the menu with the Divs i have for each menu item. I really just need something to start me off.. Basically on click i want the current selected item and div to fadeOut to the left and the newly selected to fadein from the right..
JQUERY
$
'span'
.click
[Code].....
I have a container div with two inner divs. I have one inner div visible taking up 100% of the visible area and another hidden div. I
want the visible div to slide to the left while simultaneously sliding the other div in from the right. This works fine except that while the right div is sliding in, it appears below the left div. How can this be done?
Here is the code:
<script type="text/javascript" src="js/jQuery/jquery.js"></script>
<script type="text/javascript" src="js/jQuery/effects.core.js"></
script>
[code]....
I've got a bunch of <div> blocks, with a fixed width and height, that are all left floated.I would like a user to be able to click a "remove" link and have it delete a box, and all the boxes to the right "slide in" to fill the void created.I have it working well enough with a "snap" transition. I made that term up because I'm not sure how else to describe it--by "snap" transition I mean that the boxes to the right "snap" into position--there's no "sliding" or easing as they move, it's just moment their in their old positions, and the next moment, everything has been rearranged and they're in their new positions. how to adequately describe it in text, so here's a video showing what I mean: [URL]
View 2 Replies View RelatedWhen you click on it it hides the panel. All good so far. It works exactly how I want it to in FF, but in IE7, IE8 and Chrome it jumps to the top of the screen when animated.I'm positioning it at the bottom with CSS. Do I need to add another CSS positioning for when it is animated, or is there something up with the javascript?
View 1 Replies View RelatedI want to make a webpage with 6 div's:
One on the left and contains the buttons to control the others and occupies half the page -left half- 2nd that upon a button press from the 2nd slides down in the middle the others occupy the right half of the page and are behind each others and are viewed up button click on the 1st, on 1st click the 2nd comes down in the middle and the 1st one of the right divs slides out of sight and makes the one behind it visible, on second button the one behind it slides out of sight and makes the one behind THAT one visible my problem is only ONE part of the sliding div's is sliding and then they just disappear, and i want to be able 2 force a delay between actions, and the 2nd div that is supposed 2 slide down is actually sliding UP :
1st things first does anyone know how do i hide a div on button click and show the one behind it?
Update 2 question: how do i make #box8 slide to the right out of side.
i am using a sliding image gallery and want to indicate the selected thumbnail by showing a dot below the thumbnail. i am new to scripting and have been trying tweak the code i found (which had the thumbnails at 50% opacity when unselected and 100% opacity when selected), using that code, i'm hoping i can instead make an image of a dot show at 100% opacity when the thumbnail above is selected and 0% opacity when the thumbnail is not selected. here is the script where i think i can achieve this:
[Code]...
I am trying to use a jquery sliding top menu which i found here: [URL] and I have got this to work in the past on a website I built from scratch, but I am trying to build my website with wordpress, and I am having trouble getting it to work this time, it is going behind divs, and flying out too far.
View problem here: (the 'Log-in' tab at the top) [URL]
Is it possible to show the details of each record from the recordset in a show hide way?Each record would have a title - I need the sliding div to show the relevant info when the title is clicked on.Don't know if i've made this very clear so have posted the currect code below. At the moment clicking on any record drops down only the very first record.
<?php do { ?>
<a href="#" onClick="showSlidingDiv(); return false;">
<?php echo $row_candidate_details['Title']; ?> | <?php echo $row_candidate_details['Location']; ?></a> <br />
[code]....