I'm new with Jquery and I try to do something too difficult for me.
I try to create a menu with animated links : when you hover a link, a other one'll appear and hide the first link.
I try with a simple menu and 2 links : one with an id="link" and the other with id="hover".
When a mouse is on #link (the first link), the #hover (the second one) will appear, grow up and hide #link.
But, when I put the mouse on #link : nothing !!! I test to change CSS and I use Chrome for searching the matter without success.
$("document").ready(function() {
$("#link").hover(function () {
$(this).next("#hover").stop().animate({
display : block,
margin-top : -31px,
height : 30px
}, 500);
},function () {
$(this).next("#hover").stop().animate({
display : block,
margin-top : -31px,
height : 30px
}, 300);
});
});
#link {
display : block;
position : absolute;
border : 1px solid black;
height : 30px;
width : 100px;
}
#hover{
display : none;
position : absolute ;
background-color : orange;
color : blue;
height : 0px;
width : 100px;
}
nav{
position : relative;
height : 100px;
width :100px;
border : 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div id="link">A</div>
<div id="hover">A</div>
</nav>
thanks for your help.
I'm looking to create a horizontal timeline and avoid one extremely performance price issue.
suppose we have 3 events represented as 3 divs.
<div class="timeline">
<div id="Ev1">
Event 1
</div>
<div id="Ev2">
Event 2
</div>
<div id="Ev3">
Event 3
</div>
now I want them to display each in its required time according to the horizontal axis i have tried to use margin for that but sure did not work because they are not set to float:left;
the issue is i don't want them to float left i want to control which event is displayed where on the horizontal axis either by using margin or left:##px or any other means that can be converted to a time calculation.
so here is the CSS:
body {
background: #AAA;
}
.timeline {}
.timeline div {
height: 30px;
}
#Ev1 {
background: #e10b1f;
width: 600px;
margin-left: 231px
}
#Ev2 {
background: #fb7d29;
width: 230px;
}
#Ev3 {
background: #96cf67;
width: 460px;
}
I know i could use JS to calculate how many events i have in parallel and fix the top property according to the offset and so on but this is exactly what i am trying to avoid because it causes a sever performance hit when we are looking at hundreds of events on the timeline.
I am looking for an elegant way to tell the browser that if there is enough room on a single line display the DIVs one after the other but if not then stack them one on top with there respective offset according to the event time.
CodePen: http://codepen.io/arthurv/pen/WwbmRr
I'm not sure I got what you are trying to do.
Does this work?
.timeline div {
display: inline-block;
}
1. The CSS architecture
Use percentage based widths + floats for your indidivual events :
body {
background : #AAA;
}
.timeline {
width : 100%;
}
.timeline div {
float : left;
height : 30px;
}
#Ev1 {
background : #e10b1f;
width : 41.51%;
}
#Ev2 {
background : #fb7d29;
width : 17.82%;
margin-left : 5%;
}
#Ev3 {
background : #96cf67;
width : 27.66%;
margin-left : 8%;
}
#Ev4 {
background : #ffc901;
width : 17.82%;
}
#Ev5 {
background : #88aaff;
width : 67%;
margin-left : 12%;
}
<div class="timeline">
<div id="Ev1">
Event 1
</div>
<div id="Ev2">
Event 2
</div>
<div id="Ev3">
Event 3
</div>
<div id="Ev4">
Event 4
</div>
<div id="Ev5">
Event 5
</div>
</div>
2. Generating the values for your widths
To dynamically calculate the actual percentages for the widths of #Ev1, #Ev2, #Ev3, you could use eg. PHP, Less or Sass.
For example, if you'd use Sass, you could using this code to generate the CSS shown in #1 :
$events : (
1 : (0, 41.51%, #fb7d29),
2 : (5%, 17.82%, #fb7d29),
3 : (8%, 27.66%, #96cf67),
4 : (0, 17.82%, #ffc901),
5 : (12%, 67%, #88aaff)
);
#mixin generate-events() {
#each $key, $value in $events {
#Ev#{$key} {
background : nth($value, 3);
width : nth($value, 2);
$margin-left : nth($value, 1);
#if $margin-left != 0 {
margin-left : $margin-left;
}
}
}
}
body {
background : #AAA;
}
.timeline {
width : 100%;
}
.timeline div {
float : left;
height : 30px;
}
#include generate-events();
I have 2 divs positioned next to each other, and a background div. We'll call the background div "bg div". Whenever one of the 2 divs get selected, the bg div gets positioned on top of the selected div with a transition. Basically, something like a segmented controller.
The next step I want to do is, I want to make the bg div draggable. If it gets dragged, but not all the way to either side, then it should snap to whichever side the bg div is mostly at.
I'm looking for something like this:
When I set the bg div to be draggable, (using JQuery UI) it wasn't draggable. Only when I removed z-index: -1 did it become draggable. It also didn't snap to either side. It only snapped when the bg div got dragged basically all the way. Also, when I drag it, it has a weird effect to it. It waits a bit then drags. I think that's because the transition.
Problems
How can I make it draggable with of index: -1?
How can I make it snap to whichever side the bg div is mostly at?
How can I make it have a transition without working weird?
Without issues, but not draggable functionality: JSFiddle
With issues: JSFiddle
$('#bckgrnd').draggable({
axis: "x",
containment: "parent",
snap: ".labels"
});
#radios {
position: relative;
width: 370px;
}
input {
display: none;
}
#bckgrnd,
#bckgrndClear,
.labels {
width: 50%;
height: 30px;
text-align: center;
display: inline-block;
float: left;
padding-top: 10px;
cursor: pointer;
}
.labels {
outline: 1px solid green;
}
#bckgrnd {
background-color: orange;
position: absolute;
left: 0;
top: 0;
transition: left linear 0.3s;
}
#rad1:checked ~ #bckgrnd {
left: 0;
}
#rad2:checked ~ #bckgrnd {
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="radios">
<input id="rad1" type="radio" name="radioBtn" checked>
<label class="labels" for="rad1">First Option</label>
<input id="rad2" type="radio" name="radioBtn">
<label class="labels" for="rad2">Second Option</label>
<div id="bckgrnd"></div>
</div>
Working solution: http://jsfiddle.net/6j0538cr/ (I know you wont use it :))
How can I make it draggable with of index: -1?
Add two elements one that hold the label with 'pointer-events:none;' which will ignore all mouse events and 'z-index:3',
And second that will be the 'button' and will have 'z-index:1'.
Like that you will have one label that ignores all mouse events and float above all the elements with z-index:3, and the 'background' will still be draggable
How can I make it snap to whichever side the bg div is mostly at?
You can calculate it very easily using 'offset' and 'width' functions like so
//calculating the middle of the 'background'
var backgroundX = $('#bckgrnd').offset().left;
var backgroundWidth = $('#bckgrnd').outerWidth();
var backgroundMiddle = backgroundX + (backgroundWidth/2);
//calculating the middle of the radios on the page
var radiosX = $('#radios').offset().left;
var radiosWidth = $('#radios').outerWidth();
var radiosMiddle = radiosX + (radiosWidth/2);
//compare the two
if(radiosMiddle > backgroundMiddle){
//closer to the left
}else{
//closer to the right
}
How can I make it have a transition without working weird?
You can set the transition using jQuery 'animate' instad of mixing css and js animation.
draggable with index -1: Have a container div for the whole thing (radios?) trapping mouse events. mousedown you record the mouse x value. mousemove (with button down I suppose) you calculate the "delta" from current mouse x to mousedown x, and add that to the original x value of the thing you are "dragging".
snapping: just using min / max function to limit the delta, but it sounds like some animation is there even for the "snap". So for a mouse up within a certain end zone range, fire that animation to "snap" to one side or the other.
Also, the click inside certain bounds close to the edge fires that same snap.
I've could probably done this using <input> radio elements...
But any way on submit you can send the data-* value.
Here's my take:
$(".io-toggler").each(function(){
var io = $(this).data("io"),
$opts = $(this).find(".io-options"),
$clon = $opts.clone(),
$span = $clon.find("span"),
width = $opts.width()/2;
$(this).append($clon);
function swap(x) {
$clon.stop().animate({left: x}, 150);
$span.stop().animate({left: -x}, 150);
$(this).data("io", x===0 ? 0 : 1);
}
$clon.draggable({
axis:"x",
containment:"parent",
drag:function(evt, ui){
$span.css({left: -ui.position.left});
},
stop:function(evt, ui){
swap( ui.position.left < width/2 ? 0 : width );
}
});
$opts.on("click", function(){
swap( $clon.position().left>0 ? 0 : width );
});
// Read and set initial predefined data-io
if(!!io)$opts.trigger("click");
// on submit read $(".io-toggler").data("io") value
});
.io-toggler{
cursor:pointer;
display:inline-block;
position:relative;
font:20px/1.5 sans-serif;
background:url(http://i.stack.imgur.com/XVCAQ.png);
color:#fff;
border:4px solid transparent;
border-radius: 50px;
user-select:none;
-webkit-user-select:none;
-webkit-touch-callout:none;
}
.io-options{
border-radius:50px;
top:0;
left:0;
overflow:hidden;
}
.io-options span{
position:relative;
text-align:center;
display:inline-block;
padding: 3px 35px;
}
/* the jQ clone */
.io-options + .io-options{
position:absolute;
background:#fff;
width:50%;
height:100%;
white-space:nowrap;
}
.io-options + .io-options span{
color:#006cff;
}
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<span class="io-toggler" data-io="0">
<span class="io-options">
<span>Thing1</span>
<span>Thing2</span>
</span>
</span>
<br><br>
<span class="io-toggler" data-io="1">
<span class="io-options">
<span>Yes</span>
<span>No</span>
</span>
</span>
Often there are times when I need to have totally custom input elements: checkboxes, radio buttons, selects, etc.
Just wanted to ask if such practice is okay and acceptable:
we create some sort of wrapper for our input (radio box in this case)
we hide our real radio boxes(opacity: 0, visibility: hidden, left: -9999px, etc)
On click on a parent wrapper: we get the input name attribute, find all inputs with [type="radio][name="clickedInputName"], set them all to become unchecked and set the one we clicked to set it to checked.
Attaching some not quite beautiful jsfiddle: https://jsfiddle.net/moLvh9dd/
$('.radio-wrapper').on('click', function(e){
e.preventDefault();
var targetInput = $(this).find($('input'));
var clickedInputName = 'input[type="radio"] [name="'+targetInput.attr('name')+'"]';
$(clickedInputName).each(function(){
$(this).prop('checked', false);
$(this).parent().removeClass('input-checked');
})
targetInput.prop('checked', true);
$(this).addClass('input-checked');
});
Checked the browser compatibility, + - works everywhere down to IE8, so despite the fact that it just works I want to know if it's the right way? Is it acceptable?`
Despite the fact that it's javascript/jQuery dependent.
EDIT:
Thanks for some great answers on radio and checkbox inputs but what about custom select element? With various amount of options for every select?
For example like here - some ugly jQuery again: https://jsfiddle.net/4gt7gavq/
You can follow an alternative without using JS with pure CSS or using images.
In here you can find both techniques explained, i would advise the pure CSS way of course but that depends on your cross-browser requirements.
Pure CSS styling
The demonstration below is styled purely using CSS. Unlike the image-based method, the pure CSS method scales with the text size.
The HTML used for each checkbox or radio button is similar to that in the image-based method:
<div>
<input id="option" type="checkbox" name="field" value="option">
<label for="option"><span><span></span></span>Value</label>
</div>
The span elements inside the label are used to create the alternative graphics. While radio buttons require both spans, only one is needed for checkboxes.
We hide the checkboxes and radio buttons in the stylesheet:
input[type=checkbox]:not(old),
input[type=radio ]:not(old){
width : 2em;
margin : 0;
padding : 0;
font-size : 1em;
opacity : 0;
}
The technique is the same as in the image-based method, but because the width is set relative to the font size in line 3 we must restore the font size in line 6, as browsers use a smaller font size for checkboxes and radio buttons by default.
We then position the label:
input[type=checkbox]:not(old) + label,
input[type=radio ]:not(old) + label{
display : inline-block;
margin-left : -2em;
line-height : 1.5em;
}
Again, the technique is the same as in the image-based method, but using relative units. The padding is not required as the scalable graphics, unlike a background image, will push the label text along.
We then style the first span to create the unchecked graphics:
input[type=checkbox]:not(old) + label > span,
input[type=radio ]:not(old) + label > span{
display : inline-block;
width : 0.875em;
height : 0.875em;
margin : 0.25em 0.5em 0.25em 0.25em;
border : 0.0625em solid rgb(192,192,192);
border-radius : 0.25em;
background : rgb(224,224,224);
background-image : -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : linear-gradient(rgb(240,240,240),rgb(224,224,224));
vertical-align : bottom;
}
The techniques used here are described in detail in the page on styling buttons with CSS3. Line 15 ensures the graphics are positioned at the bottom of the label rather than the baseline of the text.
In the example, the background gradient is reversed on selected checkboxes and radio buttons:
input[type=checkbox]:not(old):checked + label > span,
input[type=radio ]:not(old):checked + label > span{
background-image : -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : linear-gradient(rgb(224,224,224),rgb(240,240,240));
}
We then display a tick inside selected checkboxes:
input[type=checkbox]:not(old):checked + label > span:before{
content : '✓';
display : block;
width : 1em;
color : rgb(153,204,102);
font-size : 0.875em;
line-height : 1em;
text-align : center;
text-shadow : 0 0 0.0714em rgb(115,153,77);
font-weight : bold;
}
The selector in line 1 uses the :before pseudo-class so that line 2 can insert a tick symbol inside the span element. Lines 3, 4, 6, 7, and 8 display the tick centrally within the element, while lines 5, 9, and 10 style the text.
Finally, we display a ‘bullet’ inside selected radio buttons, applying the same techniques as for the unchecked graphics to the second span element:
input[type=radio]:not(old):checked + label > span > span{
display : block;
width : 0.5em;
height : 0.5em;
margin : 0.125em;
border : 0.0625em solid rgb(115,153,77);
border-radius : 0.125em;
background : rgb(153,204,102);
background-image : -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : -o-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : linear-gradient(rgb(179,217,140),rgb(153,204,102));
}
http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/#pureCSS
Select element
On the select element you can change colors, borders and the drop-down arrow. Not much more.
To do this create a png with the custom arrow and set it as element brackground:
.styled-select {
width: 240px;
height: 34px;
overflow: hidden;
background: url(new_arrow.png) no-repeat right #ddd;
border: 1px solid #ccc;
}
http://bavotasan.com/2011/style-select-box-using-only-css/
These practices are very much acceptable. For the most part, as long as the form is still accessible and usable with JavaScript and/or CSS disabled, you're OK.
To expand on one of my comments above with some sample code for the example provided in the original question, you can achieve this through CSS alone, without any need for JavaScript.
What you need to do is use labels with pseudo elements and then use the :checked pseudo class with an adjacent selector to change the styles of those pseudo elements.
More information on adjacent selectors
More information on the :checked pseudo class
This has the added benefit of requiring less markup, as well, but that will depend on your overall layout.
Here's the sample code:
*,*:before,*:after{box-sizing:border-box;font-family:sans-serif;}
input.radio{
left:-9999px;
position:absolute;
}
label.radio{
cursor:pointer;
display:block;
line-height:20px;
margin:0 0 10px;
padding:0 0 0 26px;
position:relative;
}
label.radio:before{
border:1px solid #f00;
border-radius:50%;
content:"";
display:block;
height:16px;
left:5px;
position:absolute;
top:2px;
width:16px;
}
label.radio:after{
background:#f00;
border-radius:50%;
content:"";
display:block;
height:8px;
left:9px;
opacity:0;
position:absolute;
top:6px;
transform:scale(0);
transition:transform .25s,opacity .5s;
width:8px;
}
input.radio:checked+label.radio:after{
opacity:1;
transform:scale(1);
}
<input class="radio" name="radio-option" id="option1" type="radio" value="1">
<label class="radio" for="option1">Option 1</label>
<input class="radio" name="radio-option" id="option2" type="radio" value="2">
<label class="radio" for="option2">Option 2</label>
<input class="radio" name="radio-option" id="option3" type="radio" value="3">
<label class="radio" for="option3">Option 3</label>
<input class="radio" name="radio-option" id="option4" type="radio" value="4">
<label class="radio" for="option4">Option 4</label>
As a drawback of replacing the original input element, you will lose the ability to focus and change the value of this element with the keyboard (tabindex).
I really want to know how to make a sliding transition and im not sure if it can be done with pure css or if javascript is needed. I will give an example website. The transition i am talking about is when you select one of the square icons on left side bar and the blue description slides in to the div.
into the arctic
You could use the CSS animate property to animate the object by changing the margin and/or padding to create a sliding effect
It's quite easy to do in CSS, just position the containing div (with a class or id) in the non visible position and add a class when it needs to be visible (for adding that class you need JavaScript).
The class for visibility gets the final positioning.
On the base class you define a CSS transition that animates the properties that change, eg:
div.base {
transition: left 2s;
position:relative;
left:-200px; /* behind something else */
}
div.visible {
left:0px;
}
Edit: if performance is an issue you should use transform instead of left, e.g. transform: translate(-200px,0);. This also makes it possible to position the element how you need it, e.g. floating.
It is possible to do this purely in CSS depending on what you want to use as a trigger for the animation.
For a more persistent state like the linked example, it can be done with the checkbox (or radio) hack.
Note: just because it can be done, doesn't mean it should be done. While there are cases where this might work well for you, in general, you will have more control over the behavior and more flexibility in your markup by using javascript to trigger the animation. Browser support will also be a consideration.
For more information on the checkbox hack:
CSS Tricks: Stuff you can do with the “Checkbox Hack”
The CSS Ninja: Pure CSS collapsible tree menu
A simplistic example:
HTML:
<label for="toggle-1">A</label>
<input class="A" type="checkbox" id="toggle-1">
<label for="toggle-2">B</label>
<input class="B" type="checkbox" id="toggle-2">
<label for="toggle-3">C</label>
<input class="C" type="checkbox" id="toggle-3">
<div class="A">Panel A</div>
<div class="B">Panel B</div>
<div class="C">Panel C</div>
CSS:
/* Positions the checkbox off the screen */
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
/* Initial DIV position off screen - this is the panel */
div {
position: absolute;
width: 400px;
height: 100px;
line-height: 100px;
left: -400px;
-webkit-transition: left .5s ease;
}
/* Toggled State */
input[type=checkbox].A:checked ~ div.A,
input[type=checkbox].B:checked ~ div.B,
input[type=checkbox].C:checked ~ div.C {
left: 0;
}
demo fiddle
How it works: The checkbox is positioned offscreen. When the user clicks on a label, the associated checkbox is toggled. If the checkbox is checked, the matching sibling selector is triggered setting left to 0px - moving the panel to the right. If the checkbox is unchecked, the selector no longer matches causing the left property to revert to its original -400px value, moving the panel to the left.
Problems with this version: because these are checkboxes, they remain checked until some user action is performed. If the user doesn't close one of the panels the next panel to open will slide over or under the already open panel depending on its order in the DOM or z-index.
It is possible to do this with radio buttons as well, but the problem there is that there is no way to unselect a radio button in a pure CSS implementation, so, once selected a panel would always be visible until the next panel is selected.
You could mixin some javascript with the above to get the behavior you like or place more control in javascript.
A simplistic javascript example (I'd suggest finding better code than this!):
HTML
<div class="sel">A</div>
<div class="sel">B</div>
<div class="sel">C</div>
<div class="panel A">Panel A</div>
<div class="panel B">Panel B</div>
<div class="panel C">Panel C</div>
CSS (similar to what you had before but without the checkbox selectors)
/* Default State */
.panel {
position: absolute;
background: green;
width: 400px;
height: 100px;
line-height: 100px;
color: white;
text-align: center;
left: -400px;
-webkit-transition: left .5s ease;
}
/* Toggled State */
.opened {
left: 0;
}
Code:
var selectors = document.querySelectorAll('.sel');
var curSelected;
function select(evt) {
var panels = document.querySelectorAll('.opened');
var target = evt.target.innerText.trim();
var i;
for(i = 0; i < panels.length; ++i) {
panels[i].classList.toggle('opened');
}
if(target !== curSelected) {
document.querySelector('.panel.' + target).classList.toggle('opened');
curSelected = target;
} else {
curSelected = false;
}
}
for(var i = 0; i < selectors.length; ++i) {
selectors[i].addEventListener('click', select);
}
demo fiddle