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
Related
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.
I was wondering how to go about making a button that looks like a normal button, but the right side does X and the right side does Y.
For example, when I click the left side of this button it runs one form. I click the right side and it runs another form.
The button needs to look like a normal button, so the user would only see one button.
This sounds like horrible UI. The user should be able to see the difference between the buttons. You should create two buttons in a 'pill' formation as such:
By applying a negative margin to the second button:
#second-button {
margin-left: -4px;
}
JSFiddle
If you still want to, you can remove the borders to make them merge in to one:
JSFiddle
Something like this would work:
<button>
<span class="left-part">Button</span>
<span class="right-part">value</span>
</button>
Then you can bind different event listeners to the left and right spans.
Demo: http://jsfiddle.net/2L8uN/ (and version with styled span padding's)
Using jquery, you should do something like :
$('#splitbutton').click(function(e) {
if (e.clientX < $(this).offset().left + $(this).outerWidth() / 2)
console.log('left');
else
console.log('right');
});
but i agree, quite unusual UI :)
I had a great idea like this once for the President. One side of the button showered the room with M+Ms, the other started an all-out nuclear war. He said, and I quote, "Great UI man. Always keep 'em guessing!".
(Boom)
A great premade version of what I think you're looking for is the Twitter Bootstrap implementation of "button toolbars". You can check it out here.
http://jsbin.com/xuyocica/1 pure css and html javascript free
I'm very hard wondering why this code doens't work:
$(document).ready(function(){
$("#text-heading").slideDown("slow");
});
I want this to work as following: when I enter the page, the selected div should drop downwards, but for some dark reason this doensn't happen. jQuery is called right, I did a namecheck and all that I'm feeling really stupid.
$("#text-heading") needs to be hidden first before slideDown() will do anything.
Try this:
$("#text-heading").hide().slideDown('slow');
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
I'm looking for a simple javascript to create side panel with hiding after some action(ex. after clicking on some area). Something like this example but appearing from left side not from up to down as the example works.
Will be appreciated for any help :)
You have 2 options. You can either use JQuery or scriptaculous to do this. There are plenty of examples and tutorials on the internet or you can simply use java script to this.
First download émile It's a very simple javascript animation framework.
Since you didn't provide any HTML markup, I'm assuming you have something like this.
<div id="side-panel">panel content..</div>
<div id="content">main content..</div>
and let's say your side-panel element has a CSS style of width:200px. Ok, now place a button somewhere and assign it a click event. Such as onclick="togglePanel()"
Here is the content of the togglePanel function:
function togglePanel(){
var panel = document.getElementById('side-panel');
if(!panel.__closed){
emile(panel, 'width:0px');
panel.__closed = true;
}else{
emile(panel, 'width:200px');
panel.__closed = false;
}
}
If you check the documentation of the emile framework you can do lot's of other cool things.
as you haven't provided us your code (which you have build) that's why I'm just giving a code to help you (And I don't know that this is a right answer or not). This code needs jQuery Ver.1.4 at least I think so, but I'm not clear. Anyways let's get started. Here is a link to live demo.
Hope this helps!