can anyone help me how to make a light off effect if i click any of my textboxes?
I found this idea in this site: http://www.emanueleferonato.com/stuff/lightsoff/
I want to do is when i click the textbox that particular textbox will be high-lighten and if i click that textbox again it will remove the light off effect.
Does anyone know how to do that?
html code:
<input type="text" readonly id="myname1" style="width:1000px; height:30px !important " />
<br />
<br />
<input type="text" readonly id="myname2" style="width:1000px; height:30px !important " />
script code:
<script>
$(function(){
$('#myname1').on('click', function(){
alert(1)
})
})
$(function(){
$('#myname2').on('click', function(){
alert(2)
})
})
</script>
Here's how I would do that:
HTML:
<input type="text" readonly id="myname1" style="width:1000px; height:30px !important" />
<br />
<br />
<input type="text" readonly id="myname2" style="width:1000px; height:30px !important" />
<div id="overlay"></div>
CSS:
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background-color: rgba(0,0,0,.5); /* Semi-transparent */
}
.highlight {
position: relative;
z-index: 11;
}
JavaScript:
$(function () {
var lightsOff = false;
$('#myname1,#myname2').on('click', function () {
lightsOff = !lightsOff;
$('#overlay').fadeToggle(1000); /* Choose desired delay */
if (!lightsOff)
setTimeout((function() {
$(this).removeClass('highlight');
}).bind(this), 1000); /* Same delay */
else
$(this).addClass('highlight');
})
})
Demo: http://jsfiddle.net/AP6kr/
Here is a basic version I just made, take a look and mess around with it.
So we create an overlay this will take up the whole screen with a black background. We then want to have another div where the content we want to show will go, on this div we set z-index: 1 so it sits on top of the overlay.
From here its just as simple as using fadeIn and fadeOut to get the effect we want.
Note: This is very basic version, you can do better then this so mess around and see what you can do with it. This should give you a good start.
HTML:
<div class="overlay"></div>
<div class="highlight">Test
<br/><span class="on">On</span> | <span class="off">Off</span>
</div>
CSS:
html, body {
height: 100%;
margin: 0;
}
.overlay {
background: black;
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
top: 0;
display: none;
}
.highlight {
width: 100%;
background: white;
z-index: 1;
}
jQuery:
$(".on").click(function () {
$(".overlay").fadeIn();
});
$(".off").click(function () {
$(".overlay").fadeOut();
});
DEMO HERE
Related
How can I achieve this with pure JS? I am not allowed to use jQuery or a pure CSS solution, so the only way I can think of is pure JavaScript.
I have this demo, for example: http://codepen.io/anon/pen/jBEMRK
HTML:
<body>
<input type="text">
</body>
CSS:
body {
background: red;
}
input {
width: 50%;
}
What I want to achieve is that when I click on the input field, I'd love to have the input field focused and the background (body) having a backdrop / fade / blur (however it is called). Preferably with a certain opacity, of course.
You could do something like below. Basically, you can absolutely position a div and then trigger some dim/blur function for that div when the textbox is in focus.
http://codepen.io/anon/pen/LWEbYG
HTML
<body>
<input id="txtBox" onfocus="onFocus()" onfocusout="onFocusOut()" type="text">
<div id="blur"></div>
</body>
CSS
body {
background: red;
}
input {
width: 50%;
}
.blury {
position: absolute;
height: 100%;
width: 100%;
background-color: black;
top: 0;
left: 0;
opacity: 0.7;
z-index: -1;
}
JS
function onFocus() {
document.getElementById('blur').setAttribute('class', 'blury');
}
function onFocusOut() {
document.getElementById('blur').setAttribute('class', '');
}
You can simply do the following.
HTML part:
<input type="text" onblur="blurIt(false)" onfocus="blurIt(true)">
JS part:
function blurIt(val){
if (val) document.body.style.background = "black";
else document.body.style.background = "red";
}
If you mean blur as in smudge you could use the webkitfilter property.
Example:
HTML:
<input type="text" onfocus="blurBackground(true)" onblur="blurBackground(false)" />
JS:
function blurBackground(doIt) {
if (doIt) document.body.style.webkitFilter = "blur(5px)";
else document.body.style.webkitFilter = "blur(0)";
}
I have got a video that appears in a light box from you tube, a custom one not a plugin.
On mobile when displayed portrait the video spans the full page width which looks nice and leaves some room at the top and bottom to click out.
The issue is when I go landscape the video fills the full screen and you cannot get back onto the page. My initial reaction was to hit the phones back button but I don't know a way of getting this to simply remove my lightbox. Is there a way in JS of getting a onclick off the phones back button?
The reason it goes full screen is because I am keeping the aspect ratio
var width: number = $('.youtube-video-lightbox').outerWidth();
var height: number = (width / 16) * 9;
$('.youtube-video-lightbox').height(height);
You can try using the following code:
You need to listen to navigation event and state.direction.
$(window).on("navigate", function (event, data) {
var direction = data.state.direction;
if (direction == 'back') {
// close the light box here
}
if (direction == 'forward') {
// do something else
}
});
More details in this link
Tested the above code in my mobile and it works fine. You might need to stop the program flow after closing the light box so that default navigation of the back button is stopped.
Weave: http://kodeweave.sourceforge.net/editor/#e110ed7e89c3a38335739656a02f9850
Have you thought of trying a Pure CSS Based Lightbox?
$('[data-target]').on('click', function() {
$('.page').attr('src', $(this).attr('data-target'));
});
$('#call').on('change', function() {
(this.checked) ? "" : $('.page').attr('src', '');
});
input[id=call] {
display: none;
}
a {
margin: 1em;
}
.bg,
.content {
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: all ease-in 150ms;
}
.bg {
background: #515151;
background: rgba(0, 0, 0, 0.58);
}
.content {
margin: 2.6352em;
padding: 1em;
background: #fff;
}
input[id=call]:checked ~ .bg,
input[id=call]:checked ~ .content {
visibility: visible;
opacity: 1;
}
.block {
display: block;
}
.pointer {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="call" type="checkbox" />
<p>
<a href="javascript:void(0)" data-target="http://bing.com/" class="pointer block">
<label for="call" class="pointer">Bing</label>
</a>
<a href="javascript:void(0)" data-target="http://duckduckgo.com/" class="pointer block">
<label for="call" class="pointer">DuckDuckGo</label>
</a>
</p>
<label for="call" class="bg pointer"></label>
<div class="content">
<iframe width="100%" height="100%" frameborder="0" class="page"></iframe>
</div>
My divs are not showing when I click on submit.
I can get them to show if I do a window.onload() but the divs have to have display: none; by default;
How can I make it so these divs show when I hit submit because my form takes about 30 seconds to process, it has a lot of fields.
HTML
<div id="overlay-back"></div>
<div id="overlay">
<div id="dvLoading">
<p>Please wait<br>while we are loading...</p>
<img id="loading-image" src="img/ajax-loader.gif" alt="Loading..." />
</div>
</div>
Submit Button
<div class="form-buttons-wrapper">
<button id="submit" name="submit" type="submit" class="form-submit-button">
Submit
</button>
</div>
CSS
#overlay {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
z-index : 995;
display : none;
}
#overlay-back {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background : #000;
opacity : 0.6;
filter : alpha(opacity=60);
z-index : 990;
display : none;
}
#dvLoading {
padding: 20px;
background-color: #fff;
border-radius: 10px;
height: 150px;
width: 250px;
position: fixed;
z-index: 1000;
left: 50%;
top: 50%;
margin: -125px 0 0 -125px;
text-align: center;
display: none;
}
jQuery
<script>
$(function() {
$('#submit').on('submit', function() {
$('#dvLoading, #overlay, #overlay-back').prop("display", "block").fadeIn(500);
});
});
</script>
The reason I am displaying none by default in css because if someone has javascript disabled I do not want any inteference
Please provide your own custom form validation as I have no context to supplement that. This should be placed in a document ready OR in a setInterval JavaScript function (the latter typically yeilds much better results).
$('button#submit').click(function() {
If (formValid === true && $('#dvLoading, #overlay, #overlay-back').not(':visible');)
{
$('#dvLoading, #overlay, #overlay-back').toggle(500);
$('button#submit').toggle(500); //hide this to prevent multiple clicks and odd behavior
} else {
var doNothing = "";
}
});
Try this:
<script>
$(function() {
$('#submit').on('click', function(evt) {
evt.preventDefault();
$('#dvLoading, #overlay, #overlay-back').fadeIn(500);
});
});
</script>
The fadeIn will make the div visible.
.prop sets the properties of the element, not the style.
Changed to use the click event
i need some help with the following:
i have a an image placed in my body which has a hover function
<div id="wrapper">
<img style="position: absolute;" src="img/image.png" name="man" width="150" id="man_1" />
</div>
$("#man_1").hover(function () {
$('#wrapper').append('<img id="hoverimg" src="bla.png">');
console.log("enter mouser");
},function () {
$('#hoverimg').remove();
console.log("leave mouse");
});
as you can see when im hovering the image, it appends another image which has the same top and left values as #man_1. The problem is, that when im leaving the mouse the remove does not fire because the mouse is actually on the new hoverimg
hope you get my point! Thanks
Working FIDDLE Demo
Maybe with another markup, it be easier to to this:
HTML
<div id="wrapper">
<div class="photo">
<div class="image"><img src="http://placekitten.com/200/220" /></div>
<div class="size"><img src="http://placehold.it/200x40" /></div>
</div>
</div>
CSS
.photo {
position: relative;
height: 220px;
overflow: hidden;
width: 200px;
}
.photo .image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.photo .size {
position: absolute;
height: 40px;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
margin-bottom: -40px;
transition: margin-bottom 0.3s;
}
.photo .size.show {
margin-bottom: 0;
}
JS
$(function () {
$('.photo')
.on('mouseenter', function () {
$(this).find('.size').addClass('show');
})
.on('mouseleave', function () {
$(this).find('.size').removeClass('show');
});
});
You have to use the mouseenter and mouseout events
$("#man_1").mouseenter(
function() {
$('#wrapper').append('<img id="hoverimg" src="bla.png">');
console.log("enter mouser");
});
$('#hoverimg').mouseout(
function() {
$('#hoverimg').remove();
console.log("leave mouse");
}
);
What if you bind the hover event to the #wrapper instead?
That works, in this FIDDLE.
Please have a look at http://jsfiddle.net/2dJAN/43/
<div class="out overout">
<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSuTs4RdrlAhxd-qgbGe9r0MGB9BgwFrHDvfr9vORTBEjIYnSQ8hg" />
</div>
$("div.overout").mouseover(function() {
$(this).append("<img src='http://files.softicons.com/download/system-icons/apple-logo-icons-by-thvg/png/512/Apple%20logo%20icon%20-%20Classic.png' id='hovering'/>")
}).mouseout(function(){
$('#hovering').remove();
});
I used mouseover and mouseout instead of hover.
I understood as you want to show both images on mouseover and remove the added image on mouseout. Is that correct or not?
I want to expand a textarea (increase the height) as long as it has the focus. When expanded, the textarea should not move the content down, instead it should be displayed above the other content.
This is the code I'm using so far (see here for an example):
$(document).ready(function () {
$('#txt1').focus(function () {
$(this).height(90).css('zIndex', 30000);
$('#txt2').val('focus');
});
$('#txt1').blur(function () {
$(this).css('height', 'auto');
});
});
The expanding of the textarea works fine, but I can't get it to display above the other elements on the page (it is displayed behind the elements which follow).
Are there any tricks to show the expanded textarea above/in front of all other elements?
Update: this is the (minmal) HTML code used to reproduce the problem:
<div style="height:20px;">first:<br/>
<textarea id="txt1" rows="1" cols="20"
style="width: 400px; height: 12px; font-size: 10px;">
</textarea>
</div>
<br/>
second:
<br/>
<input type="text" id="txt2"/>
Setting position on the textarea works. You can also get rid of the z-index.
Working demo
Adding a z-index does nothing without the element having a position other than static. Personally, I would add a class with all of the css changes and include an overlay, like this (demo):
CSS
.focused {
position: relative;
height: 90px !important;
z-index: 1000;
}
.overlay {
display: block;
position: absolute;
height: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin: 0;
background: #000;
opacity: .75;
filter: alpha(opacity=75);
z-index: 999;
}
Script
$(document).ready(function () {
$('#txt1').focus(function () {
$('<div class="overlay"/>').appendTo('body');
$(this).addClass('focused');
$('#txt2').val('focus');
});
$('#txt1').blur(function () {
$(this).removeClass('focused');
$('.overlay').remove();
$('#txt2').val('blur');
});
});
Try setting the style 'position:absolute;' on the first textarea (txt1) and that should do the trick.
Try this plug-in. Should be quick and simple: http://unwrongest.com/projects/elastic/
working fiddle with input and textarea, mostly css with a little jquery for positioning
http://jsfiddle.net/Ap5Xc/