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
Related
I'm studying webdevelopment and I'm doing a single page application right now. We are using JavaScript, and I can`t use jquery, bootstrap, etc. I have googled, seen the videos from the lectures, but I am still blank as a canvas.
The problem is I need to make a contactregistre. You should be able to click on the contacts, a different section of the page should be made active where you will be able to edit the contacts and see where they live. The map is OK, but I don`t know how I can make this happen, I find no examples about this which does not suggest using jquery.
We have guessed something like this, but it is probably wrong:
document.querySelector("tr").addEventListener('click' , e => {
document.querySelector('editContact')
function editContact(contact) {
let editContact = document.querySelector("#searchcontact tr");
editContact.innerHTML = "TR";
let form = document.editContact()
}
})
Thanks so much in advance!
There are numerous ways to do this. This is not a complete solution, but should get you started:
Typically you'd have a text input already in your table <input name="username_1" class="hidden" type="text">, which is hidden, along side the content, like <span id="username_1">MAREN</span>
Then you'd have some CSS to hid things:
.hidden {
display:none;
}
So on the click even you'd add the hidden classname to the SPAN and remove it from the INPUT. This visually swaps the static value for the label.
There's more to it after that, but give it a try.
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 am new to javascript. I want to make a button in html using javascript. When user try to press the button
the specific <#id> is going to be "Bold" and press again to "Unbold".
How can I do this ? please refer any helping material.
Thanks !
Since the learning experience is vital, especially for Javascript, I'll guide you in the right direction.
First, you should look into event binding and mouse event handling with jQuery. You can do some powerful stuff with this knowledge, including what you would like to do.
Second, look into basic jQuery selectors. It's not hard to learn the simple CSS-based selectors that you can use to select your desired id.
Third, look at the css() function of jQuery, which falls under jQuery's CSS category. You can use this to set different properties of elements, including font weight.
I am guessing, you are trying to build something like RTE, So, applying class to give bold effect would be better and efficient solution to this.
It can be done as simple as this
$(".boldtrigger").click(function() { //boldTrigger being the element initiating the trigger
$(".text").toggleClass("bold"); //text being the element to where applied to it.
});
CSS
.bold { font-weight: bold; }
Demo
JQuery's toggle() method should take care of this.
$('#foo').toggle(function() {
$('#bar').css('font-weight', 'bold');
}, function() {
$('#bar').css('font-weight', 'auto');
});
When you click #foo, it will do the next function in sequence, so this is exactly what you want.
here's another question that uses the .toggleClass for a vice versa effect. you need to create a class for that certain element since it adds and switches classes back and forth.
Using JQuery to toggle between styles
for a one way change:
$('button_selector').on('click',function(){
$('item_to_bold_selector').css('font-weight','bold');
});
references for this:
selectors
.on for event handling
.css for adding styles on the go
here is the code to bold & unbold text
<div id="contentDiv">
content of the page.
</div>
<input type="button" value="Bold" id="font-button"></input>
jQuery("#font-button").on("click",function(){
var button = $(this);
var contentDiv= $("#contentDiv");
if(button.val() == "Bold"){
contentDiv.css("font-weight","bold");
button.val("UnBold");
}else{
contentDiv.css("font-weight","normal");
button.val("Bold");
}
});
DEMO
$('button_selector').on('click',function(){
var itemToBold = $('item_to_bold_selector');
if (itemToBold.css('font-weight') == 'bold') {
$('item_to_bold_selector').css('font-weight','normal');
} else {
$('item_to_bold_selector').css('font-weight','bold');
}
});
Based off of Joseph's answer, but with the unclick criteria.
Since you tagged this post with jQuery I assume you are looking for a jQuery approach.
If you want to use a CSS class to add the bold style, I recommend you look at using toggleClass: http://api.jquery.com/toggleClass/
Lots of samples on that page...
I like using toggleClass() (API reference)
$("#button").click(function(){
$("#element").toggleClass("bold");
});
If it has ".bold" when clicked it will unbold and vice versa.
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!
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