My requirement was to show a toggle button with a message on it's right for mobile website. I have implemented this but I am not sure how good it is & if it will work on most of the mobile browsers. I am very new to the UI development & this is the first time I have implemented a UI component. To give an idea, this final implemented result look somewhat similar to this
I have broken down this requirement into 5 parts -
1. The container - Parent div
2. Checkbox. - Hidden checkbox behind button
3. The button
4. The inner circle of button
5. The message string which will be shown on the right.
Additionally, this button needs to be disabled for first few seconds of page. By disabling, I mean it should be unclickable & it's UX would be little different so that user knows that it's disabled.
HTML -
<div class = "toggleSwitchContainer">
<div class = "my-toggle-button" disabled = "true">
<input type="checkbox" id = "checkBox">
<div class = "toggle-switch-inner-circle" disabled = "true"> </div>
</div>
<div class = "messageString" disabled = "true">
<text>Some message</text>
</div>
</div>
CSS -
.toggleSwitchContainer {
padding : 10px;
}
.my-toggle-button[disabled] {
width : 40px;
height : 20px;
background-color : #dddddd47;
border-radius : 30px;
border-color : #80808017;
}
.my-toggle-button {
width : 44px;
height : 22px;
background-color : #eff0f3;
border-radius : 30px;
position : relative;
transition : all 300ms ease-in-out;
display : inline-block;
border : solid 1px;
border-color : #80808080;
}
.my-toggle-button.active {
background-color : #ff7800;
}
.my-toggle-button > .toggle-switch-inner-circle {
position : absolute;
width : 20px;
height : 20px;
background-color : #eff0f3;
border-radius : 50%;
border : solid 1px;
border-color : #80808080;
transition : all 300ms ease-in-out;
top : 0;
}
.my-toggle-button.active > .toggle-switch-inner-circle {
margin-left : 22px;
background-color : #fff;
}
.messageString[disabled] {
color : #00000024;
}
.messageString {
display : inline-block;
padding : 10px;
}
.my-toggle-button input {
opacity: 0;
width: 0;
height: 0;
}
JS
Function to handle click -
toggleSwitchObject.unbind().click(function() {
toggleSwitchObject[0].classList.toggle('active');//On click inner circle will be moved to right & background color will change.
callRequiredFunctionNow();
});
Disable -
containerDomNode.children().attr('disabled', true);
So, the idea is to append a css property called 'active' on click of the switch so that the inner circle is moved to right & background color is changed. I need to know if there is any risky css property I am using which may not work on many browsers. Specifically, the transition property looks scary to me. Is there any scope of improvement in this implementation?
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 an entire <iframe /> with a div as parent. That iframe came from different domain. How do you resize it bigger (add class in my case) the parent div when the iframe was click? and resize it back when a close button of the iframe is clicked?
I preferred if the button from iframe does the resize but apparently the div cannot be reached INSIDE the iframe, so I have to do it OUTSIDE the iframe.
I had the same problem and wrote a jquery plugin.
https://github.com/BergenSoft/iframeActivationListener
See example:
http://jsfiddle.net/56g7uLub/3/
How to use:
$(document).ready(function ()
{
$('iframe').iframeActivationListener();
$('iframe').on("activate", function(ev) {
$(ev.target).addClass("big");
});
});
This plugin don't use overlaying divs.
It checks if the mouse is on an inactive iframe and starts watching the activeElement of the document.
When it changes to another iframe, the custom event "activate" will be raised.
This is the best solution I found out.
You will have to create some kind of overlay to detect the initial focus event of the iframe. The close button can also be part of your website still if you show it based on class.
http://jsfiddle.net/cxtgn72g/4/
HTML
<div id="iframe">
<div id="overlay"></div>
<div id="close">X</div>
<iframe src="//www.youtube.com/embed/6PRq7CmiWhM?list=PLIOa6mDiSeismsV_7YFti-5XOGRzmofSZ"></iframe>
</div>
JS - Requires jQuery
$("#overlay").click(function() {
$("#iframe").addClass("big");
});
$("#close").click(function() {
$("#iframe").removeClass("big");
});
CSS
#iframe {
width : 500px;
height : 300px;
position : relative;
}
#iframe.big {
width : 600px;
height : 400px;
}
iframe {
width : 100%;
height : 100%;
border : none;
}
#overlay {
position : absolute;
left : 0;
top : 0;
width : 100%;
height : 100%;
}
#close {
display : none;
}
.big #close {
cursor : pointer;
display : block;
position : absolute;
right : 10px;
top : 10px;
content : "X";
background : red;
color : white;
border-radius : 25%;
padding : 8px;
}
.big #overlay {
display : none;
}
Try this:
document.getElementById("myIFrame").onclick = function(){
document.getElementById("myDiv").className = ""; //New Class Name
};
Good Luck!
I am creating a nav bar for my website and I want the slide outs to animate to the width of whatever text is inside it I also want everything on one line. Here is the jsfiddle and my jquery code so far
http://jsfiddle.net/2UEpd/26/
$(document).ready(function () {
$("#test").hide();
$(".title").hide();
$(".home").click(function (){
$("#test").slideToggle("slow");
});
$(".slideWrapper").hover(
function () {
$(this).children(".slideNav:eq(0)").stop().animate({
width: "112px",
height: "30px"
});
$(this).children(".slideBox:eq(0)").stop().animate({
left: "112px",
opacity: "1"
});
$(this).find(".title").show();
}, function () {
var $box = $(this).children(".slideBox:eq(0)");
$(this).children(".slideNav:eq(0)").stop().animate({
width: "0px",
height: "30px"
});
$(this).children(".slideBox:eq(0)").stop().animate({
left: "0px",
opacity: ".7"
});
$(this).find(".title").hide();
});
});
I've been trying for a while now, any help is appreciated.
Display:table propertie or inline-block would help.
An idea would be to play width text-indent and letter-spacing for instance.
Here a sample of the idea via CSS only, using table-layout properties so container fits to width used by its content text. http://codepen.io/gc-nomade/pen/kaEoe
basicly:
.slideNav {
height: 30px;
width: 0px;
padding:0 15px;/* gives it 30px width minimal */
line-height:30px;
display:table;/* shrink /expand to size needed by content */
position: relative;
white-space:nowrap;
text-indent:-3em;
letter-spacing:-1em;
transition:1s; linear ;
opacity: .7;
color: transparent;
}
.slideNav:hover {/* here set back to regular setting to layout text properly */
opacity:1;
text-indent:0em;
letter-spacing:1px;
color: white;
}
the toggle click close/open feature on menu is driven via :focus and pointer-events for demo prpose. javaScript should take care of this for a better/good practice.
I have a div and after I click a button, I would like the div to appear (which I can do), but I would like the whole background to become darker too (this is inline with overlays).
I've tried using opacity - I change the opacity of the whole html with jQuery, i.e. $('html').css('opacity','-0.5'); and change back the opacity of the div to normal, but for some reason, the opacity of the div stays the same (0.5).
I don't quite like the opacity since actually it doesn't make the background darker (rather lighter).
HTML--
<a id="some-button" href="#">click me</a>
<div id="overlay-back"></div>
<div id="overlay"><span>YOUR HTML GOES HERE</span></div>
CSS--
html, body {
width : 100%;
height : 100%;
}
#overlay-back {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background : #000;
opacity : 0.6;
filter : alpha(opacity=60);
z-index : 5;
display : none;
}
#overlay {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
z-index : 10;
display : none;
}
JS--
$('#some-button').on('click', function () {
$('#overlay, #overlay-back').fadeIn(500);
});
Then just add your youtube video embed code to the overlay div and style it appropriately to put it where you want on the page.
Here is a demo: http://jsfiddle.net/EtHbf/1/
This can be now done even easier than before. Just use absoluted box-shadow.
#yourDIV {
box-shadow: 0px 0px 1px 5000px rgba(0,0,0,0.8);
}
First, for opacity, you don't set a negative number. $('html').css('opacity','1'); is solid and completely visible, and $('html').css('opacity','0'); is completely invisible. Anything in between (0.2, 0.5, 0.7) gets more visible the close it is to 1.
Second, to make the background darker you can do this:
Create a div that fills the screen
Set z-index on that div higher than all content
Set background to black and opacity to 0.5
Put youtube video in another div with a higher z-index than the div you just made with the black background
You'd want a 'modal' dialog. It's basically accomplished by using an underlying div and a background set.
jQuery UI supports it here: http://jqueryui.com/demos/dialog/#modal , but you can see how they do it by inspecting.
// video lightbox
$('.video_popup').height($(document).height());
// GET WINDOW SCROLLtop OFFSET
var winScrT;
$(window).scroll(function() {
winScrT = $(window).scrollTop();
});
$.getDocHeight = function() {
var D = document;
return Math.max(Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
};
$('.play').click(function() {
$('.video_popup').height($.getDocHeight);
$('#popup').css({
top: (winScrT + 15) + 'px'
});
$('.video_popup').fadeTo(0, 0).css({
marginLeft: '0px'
}).fadeTo(600, 0.6);
});
$('.popup_close, .video_popup').click(function() {
$('.video_popup').fadeTo(600, 0, function() {
$('.video_popup').hide();
});
});
.video_popup {
position: absolute;
margin-left: -9000px;
top: 0px;
left: 0px;
background: #000;
width: 100%;
z-index: 300;
}
.popup_content {
position: relative;
margin: 50px auto;
width: 560px;
color: #fff;
}
.popup_close {
position: absolute;
right: -55px;
top: -25px;
z-index: 2000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a class="play" href="javascript:void(0);">PLAY</a></p>
<div class="video_popup">
<div class="popup_content">
<a class="popup_close" href="javascript:void(0);"><img src="_/images/close.png"></a>
<object width="560" height="315">
<param name="movie" value="http://www.youtube.com/v/-pJcKCqxtAM?version=3&hl=en_US&atuoplay=1">
<param name="allowFullScreen" value="true">
<param name="allowscriptaccess" value="always">
<embed src="http://www.youtube.com/v/-pJcKCqxtAM?version=3&hl=en_US&atuoplay=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"/>
</object>
</div>
</div>
Here's another example of this behavior, in the demo: click the "watch video" link to fade in the video and screen dimmer divs (escape to fade out)
jsfiddle demo
CSS:
#screenDimmer,#video {display:none;position:absolute;}
#screenDimmer {top:0;left:0;width:100%;height:100%;background:#000;opacity:.5;
/* ie opacity */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter:alpha(opacity=50);}
#video {top:50%;left:50%;margin-left:-240px;margin-top:-193px;}
HTML:
<div id="screenDimmer"></div>
<div id="video"><!-- embedded video here --></div>
hi i changed the code of someone who posted here, even though this may be solved already here is the updated code of jasper
html:
<a id="some-button" href="#">click me</a>
<div id="overlay-back"></div>
<div id="overlay"><iframe src="http://www.youtube.com/embed/08DjMT-qR9g" width="340"
height="250"></iframe><br><br><button id="close"><img
src="http://icongal.com/gallery/image/89825/remove_close_button_x_delete.png"
height="50"
width="50"></button></div>
css:
html, body {
width : 100%;
height : 100%;
}
#overlay button{
opacity:0.5;
}
#overlay button:hover{
opacity:1;
}
#overlay-back {
position : absolute;
text-align :center;
width : 100%;
height : 100%;
background : #000;
opacity : 0.75;
filter : alpha(opacity=60);
z-index : 5;
display : none;
}
#overlay {
position : absolute;
text-align :center;
width : 100%;
height : 100%;
z-index : 10;
display : none;
}
jquery:
$('#some-button').on('click', function () {
$('#overlay, #overlay-back').fadeIn(1000);
});
$('#close').on('click',function(){
$('#overlay,#overlay-back').fadeOut(1000);
});
i hope this might still help you and that this edit may be usefull to some people
added by me (close button,changed very little part of the css and used a youtube vid instead of nothing)
The simplest thing I have seen to achieve it is this:
$("#overlay").css("-webkit-filter","blur(5px)");
$("#overlay").css("-moz-filter","blur(5px)");
$("#overlay").css("-o-filter","blur(5px)");
$("#overlay").css("-ms-filter","blur(5px)");
$("#overlay").css("filter","blur(5px)");
$("#overlay").css("pointer-events", "none");
On clicking a button we have to run above steps. "overlay" is the ID of div which we want to be blur. After successful execution of script, at the end we can do this to re-enable the div:
$("#overlay").removeAttr("style");