slideDown() slideUp() reversal - javascript

What I am after is a comand for doing the same as slideDown() slideUp(), but to work from the opposite direction.
So basicaly, slideUp() opens and slideDown() closes the div.
If it was only two div's , this would not be needed, but it will be with five or more in the same space.
If not possible, the only other option is if it is possible to "move" the div in the stack.
So on close, the div moves location in the html to above the one that has just opened. That way the illusion is still there.
EDIT:
From looking, though as sagested, the "Accordion" jQuery function was not what I was after, but a sub-class looks promissing.
If anyone into jQuery can help, would it be possible to use the "Sortable" option, but to sort on click.
As example, on click, move to top and then open.... ??

You mean you want the accordion effect?
Like this http://jqueryui.com/accordion/ ?

Ok it has been a while, but I wanted to update fore everyone's benefit.
So for my solution, was simple in the end. Just finding it was the task :-)
First is my JS code using jquery.
function contentToggle(v,w,x,y,z) {
$('#'+v).slideDown(300);
$('#'+w).slideUp(20);
$('#'+x).slideUp(20);
$('#'+y).slideUp(20);
$('#'+z).slideUp(20);
}
I did split the code in two myself, but this works.
Then on my page I make a link like this
Your link text for divID_1
Then repeat.....
But remember what is opening must be first in function line.
Function can be reused, so it is ok to have extra "slide up's" in it for what ever your need is.
Only the ones sent to function will run

Related

JQuery unable to mouse over and click on floating menu

https://www.verizonwireless.com/homepage/ please make sure to have / at end of homepage/ so ".com/homepage/"
I try to move the mouse over [Phones, Plans etc.] Menu and click on sub-menu items. I tried all my best it is not working. Please help.
$('.links-menu').find('a:visible:contains("Phones")').mouseover()
or click does not work.
Thanks a ton.
Wrong Class Name try this one:
With Contains Phones
$('.o-tier-two a:contains("Phones")').mouseover();
By nth-child
$('.o-tier-two li:first').mouseover();
If you need click, just find the selector and click. Mouseover doesn't need in this case.
$('.o-tier-three a:contains("Smartphones")').closest('td').click();
If you are trying this for automation then better to use XPath instead of Executing JQuery
//div[contains(#class, 'o-tier-two')]//span[contains(text(), 'Phone')]//parent::a
Something Like This.

Animate (or fadeIn) a .text change

I am close to finishing a project but there is only one thing that I can't get to work, and that is how to animate this function:
$('.box').click(function(){
var description = $(this).find('.hide').text();
$('.description').text(description);
});
So what you see here is that I get a text from an element and place it into another element. But it is really rough it's just 'pop' and there it's. I tried serval things like putting .fadeIn() into the chain. Also I was thinking about doing it inside .animate() but I couldn't find a way to put it in. So my question is: Is there a way to animate this? or is it just simply not possible?
Thanks in advance :D

Lost user click while updating a div using jquery

I've got a somewhat "big" div (containing almost my whole page) and every second I do a
mydiv.empty() and then I rebuild it entirely.
I know it's not efficient at all but for now this will have to do for my code :/ The issue is that some inner div of "mydiv" have click event attached to them. And sometime, when the use click, the input is lost and never taken ito consideration by the inner div.
I tried to catch all click on my page with a document.click(). It did catch some lost click but many of them are still lost.
It seems those clicks occurs somewhere between the mydiv.empty() and the big mydiv.append() that re-creates all its content. I can't find a solution to grab these lost clicks. Any idea?
PS : I know I could probably get away by restructuring my whole page and updating more specific part of my div instead of recreating it but for now i'd like to find a faster/cheaper solution before redoing all this :)
Cheers !
EDit : as requested :
when (timer > 1 sec)
{
mydivContent = "lots of things here, including a small inner div"
mydiv.empty()
mydiv.append(mydivContent)
innerdiv.click(function..)
}
The lower the timer is, the more clicks are not registered by the innerdiv.click() event

Trigger multiple jQuery scripts on current active element

I'm a bit new to jQuery and I have difficulties in achieving a function so I really hope somebody could guide me a bit. What I basically want to do is to highlight 2 elements simultaneously (via toggleClass).
Basically I have a repeating div (#post) which contains a title, thumb and description div. What I would like to do is once I hover on the title or the thumb div the elements to get a new additional class (xxxHover). So basically once the user hovers the mouse on the title/thumb div the title/thumb div (both of them) get a new class called (xxxHover where xxx stands for the div name - in this case titleHover/thumbHover).
I might not be the best in explaining so I've prepared a jsFiddle as well:
http://jsfiddle.net/yLqnd/12/
As you can see my problem is to restrict the scripts for the current element only (#post in our case). If it helps or matter I have to say that this will be integrated into a WordPress website (so the HTML structure is basically in the loop.php), that's why I would like to restrict the 2x highlight effect only per item (#post).
Thanks a mill in advance for any idea!
http://jsfiddle.net/oscarj24/yLqnd/13/
Here's an updated jsFiddle:
Instead of being so specific, any div's inside will now toggle the class
jsFiddle Link
Basically I pushed it all together:
$(".post div").mouseover(function(){
$(this).closest('.post').find('div').toggleClass('thumbHover');
}).mouseout(function(){
$(this).closest('.post').find('div').toggleClass('thumbHover');
});
I think you can get the effect you're looking for by using .siblings() in jQuery.
$(".title").mouseover(function(){
$(this).toggleClass("titleHover");
$(this).siblings(".thumb").toggleClass("thumbHover");
});
This will limit the toggleClass to only the .thumb that resides in the same .post.
http://api.jquery.com/siblings/
simples, just do it on the parent of both elements:
$(".post").mouseover(function(){
$(this).find('div').toggleClass('thumbHover');
}).mouseout(function(){
$(this).find('div').toggleClass('thumbHover');
});

JQuery: Why is hoverIntent not a function here?

I'm modifying some code from a question asked a few months ago, and I keep getting stymied. The bottom line is, I hover over Anchors, which is meant to fade in corresponding divs and also apply a "highlight" class to the Anchor. I can use base JQuery and get "OK" results, but mouse events are making the user experience less than smooth.
I load JQuery 1.3 via Google APIs.
And it seems to work. I can use the built in hover() or mouseover(), and fadeIn() is intact... no JavaScript errors, etc. So, JQuery itself is clearly "loaded". But I was facing a problem that it seemed everyone was recommending hoverIntent to solve.
After loading JQuery, I load the hoverIntent JavaScript. I've triple-checked the path, and even dummy-proofed the path. I just don't see any reasonable way it can be a question of path.
Once the external javascripts are (allegedly) loaded in, I continue with my page's script:
var $old=null;
$(function () {
$("#rollover a").hoverIntent(doSwitch,doNothing)
});
function doNothing() {};
function doSwitch() {
var $this = $(this);
var $index = $this.attr("id").replace(/switch/, ""); //extract the index number of the ID by subtracting the text "switch" from its name
if($old!=null) $old.removeClass("highlight"); //remove the highlight class from the old (previous) switch before adding that class to the next
$this.addClass("highlight"); //adds the class "highlight" to the current switch div
$("#panels div").hide(); //hide the divs inside panels
$("#panel" + $index).fadeIn(300); //show the panel div "panel + number" -- so if switch2 is used, panel2 will be shown
$old = $this; //declare that the current switch div is now "old". When the function is called again, the old highlight can be removed.
};
I get the error:
Error: $("#rollover a").hoverIntent is not a function
If I change to a known-working function like hover (just change ".hoverIntent" to ".hover") it "works" again. I'm sure this is a basic question but I'm a total hack when it comes to this (as you can see by my code).
Now, for all appearances, it SEEMS like either the path is wrong (I've zillion-checked and even put it on an external site with an HTTP link that I double-checked; it's not wrong), or the .js doesn't declare the function. If it's the latter, I must be missing a few lines of code to make the function available, but I couldn't find anything on the author's site. In his source code he uses a $(document).ready, which I also tried to emulate, but maybe I did that wrong, too.
Again, the weird bit is that .hover works fine, .hoverIntent doesn't. I can't figure out why it's not considered a function.
Trying to avoid missing anything... let's see... there are no other JavaScripts being called. This post contains all the Javascript the page uses... I tried doing it as per the author's var config example (hoverIntent is still not a function).
I get the itching feeling I'm just missing one line to declare the function, but I can't for the life of me figure out what it is, or why it's not already declared in the external .js file. Thanks for any insight!
Greg
Update:
The weirdest thing, since I'm on it... and actually, if this gets solved, I might not need hoverIntent solved:
I add an alert to the "doNothing" function and revert back to plain old .hover, just to see what's going on. For 2 of my 5 Anchors, as soon as I hover, doNothing() gets called and I see the alert. For the other 3, doNothing() correctly does NOT get called until mouseout. As you can see, the same function should apply for any Anchor inside of "rollover" div. I don't know why it's being particular.
But:
If I change fadeIn to another effect like slideDown, doNothing() correctly does NOT get called until mouseout.
when using fadeIn, doNothing() doesn't get called in Opera, but seems to get called in pretty much all other browsers.
Is it possible that fadeIn itself is buggy, or is it just that I need to pass it an appropriate callback? I don't know what that callback would be, if so.
Cheers for your long attention spans...
Greg
Hope I didn't waste too many people's time...
As it turns out, the second problem was 2 feet from the screen, too. I suspected it would have to do with the HTML/CSS because it was odd that only 2 out of 5 elements exhibited strange behaviour.
So, checked my code, dug out our friend FireBug, and discovered that I was hovering over another div that overlapped my rollover div. Reason being? In the CSS I had called it .panels instead of .panel, and the classname is .panel. So, it used defaults for the div... ie. 100% width...
Question is answered... "Be more careful"
Matt and Mak forced me to umpteen-check my code and sure enough I reloaded JQuery after loading another plugin and inserting my own code. Since hoverIntent modifies JQuery's hover() in order to work, re-loading JQuery mucked it up.
That solved, logic dictated I re-examine my HTML/CSS in order to investigate my fadeIn() weirdness... and sure enough, I had a typo in a class which caused some havoc.
Dumb dumb dumb... But now I can sleep.

Categories