JQuery unable to mouse over and click on floating menu - javascript

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.

Related

How to add a link within a .html()

I am using a .click function to switch out text based on menu clicks. (example:http://jsfiddle.net/3r9hcz3z/) It works great except that I am still pretty new to Jquery & I can't figure out how to add a link inside of on one of the .html() menu items.
Any help would be awesome. I know that there is a way to do it within the Jquery but just can't find the right coding. Thanks!
$('#menuone').click(function(){
$('#title').text("ONE");
$('#text').html("This is text & where I would like to be able to add a link");
});
$('#text').html("<a href='someUrl'>Link</a>");
This should do it.
one clean way to do this is to add a class to your anchor, and then set its href attribute through .attr:
$('.a_class').attr('href','http://example.com');

slideDown() slideUp() reversal

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

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');
});

Preventing a div from becoming a yui-menu , when it is used inside a ul which is a yui-menu

I am dynamically generating a layout thumbnail code for shindig, which will create a preview/thumbnail of the layout and place it inside a drop down menu.
The issue is, that if a div is put inside <ul/> or <li/> element , or for that matter any part of their hierarchy, it is converted to a yui-overlay or yui-menu itself.
Because of this, the layout previews are not appearing , and if by some way I do show them ,then click event for them is not being triggered.
Has anyone faced a similar issue before this? Or does someone has some insight into how can this be done??
Thanks,
Neeraj
Try to use a span with the style display: block instead. With this style, it behaves like a div but the overlay will probably leave it alone.

css3 button, selected problem

Here is the fiddle. Some code I am working on, essentially I want the selected button to turn Orange.
Demo below
Fiddle here > http://jsfiddle.net/ozzy/veqwu/4/
Perhaps also with a notice: You Picked Button 1 in a div element. ( elsewhere on the page )
I have tried all manner of css effects, but reckon the only way is plonking this lot in an array, any suggestions
How about something like this?
http://jsfiddle.net/sje397/dXxmt/
http://jsfiddle.net/SebastianPataneMasuelli/veqwu/5/
using jQuery onDomReady.
nice sje397, beat me to the punch

Categories