Disable page content - javascript

My search textbox is positioned in header. On typing in textbox, I want to disable rest of the page(except header). The page should be greyed out.Two separate div are there: header and main. Main div contains several sub div to structure the content.
How can I achieve this?

#Thinker solution is good (although I'm not sure if using "text-indent": "-9999px" is a good practice). Another option is to add another div upon your main div and play with the opacity setting to achieve a suitable result. Have in mind that a container div is needed though as main div's parent, look at the demo:
$("#text1").keydown(function() {
$(".main").append('<div class="overlay"></div>');
});
.header {
width: 100%;
height: 50px;
background-color: blue;
}
.main {
width: 100%;
height: 450px;
background-color: red;
}
.container{
position:relative;
}
.overlay{
width:100%;
height:100%;
background-color:grey;
position:absolute;
top:0px;
left:0px;
opacity:0.8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<input type="text" id="text1">
</div>
<div class="container">
<div class="main">Content that is going to hide when textbox is changed</div>
</div>

Yes, you can do it using css properties.
$("#text1").keydown(function() {
$(".main").css({
"text-indent": "-9999px",
"background-color": "gray"
})
});
$("#text1").focusout(function() {
$(".main").css({
"text-indent": "0px",
"background-color": "red"
})
});
.header {
width: 100%;
height: 50px;
background-color: blue;
}
.main {
width: 100%;
height: 450px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<input type="text" id="text1">
</div>
<div class="main">Content that is going to hide when textbox is changed</div>
Hope it helps :)

Related

How to restrict draggable element into particular element

In JQuery UI, I am trying to restrict draggable element into particular elements which are present inside the container (.container).
Even I have tried with containment as array of values it is working but in my case I will be unaware of the .container height and width. Please suggest me which will the right approach to do this one.
<div class="container">
<div class="restricted-field-1">should be restricted here</div>
<div class="dragme">DRAG ME</div>
<div class="restricted-field-2">should be restricted here</div>
</div>
$(".dragme").draggable({
containment: ".container"
});
JSFIDDLE
You can move the .container div to wrap .dragme, remove position: relative of .container and set following style changes.
body {
position:relative;
}
Modify as follows.
.container {
position: absolute;
height: 362px;
}
.restricted-field-2 {
top: 400px;
}
Here is the jsfiddle link.
Edited:
There are options in jquery draggable to set x-axis and y-axis positions for the containment and we need to calculate based on our requirement.
Here is the updated js fiddle link.
$(".dragme").draggable({
containment: ".mini"
});
.container{
position:relative;
width: 500px;
height: 400px;
background: #FFF;
}
.dragme{
width: 100px;
cursor: move;
background: black;
color:white;
text-align:center;
}
.restricted-field-1{
width:480px;
background: silver;
padding:10px;
user-select:none;
height: 20px;
}
.restricted-field-2{
position:absolute;
width:480px;
bottom:0;
padding:10px;
background: silver;
user-select:none;
height:20px;
}
.mini{
position: absolute;
top: 40px;
left: 0px;
bottom: 40px;
width: 100%;
}
<div class="container">
<div class="restricted-field-1">should be restricted here</div>
<div class="mini">
<div class="dragme">DRAG ME</div>
</div>
<div class="restricted-field-2">should be restricted here</div>
</div>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

Is it possible to click div1 and div2 simultaneously, while div2 is overlaying?

I'd like to know if it's possible to have both divs be clicked at the same time, even though one is behind the other..
If I click the red div, then the green is activated too. I made an example here: https://jsfiddle.net/ow67aaz1/1/
<div class="full">
<div class="box">
<div class="one"></div>
<div class="two"></div>
</div>
</div>
$(".one").click(function() {
alert('green Clicked');
});
<style>
.full { background: #ddd; width:300px; height: 300px; margin: 0 auto;}
.box {position: relative;}
.one {background: green; width: 50px; height: 50px; position: absolute;}
.two {background: red; width: 30px; height: 30px; position: absolute;}
<style>
I tried the following but but can't figure out how to make it trigger..
$('.two').click(function()
{
$('.one').trigger('click');
});
you just need to trigger the click event of second div
$(".one").click(function() {
alert('green Clicked');
$(".two").trigger("click");
});
$(".two").click(function() {
alert('red Clicked');
});
.full { background: #ddd; width:300px; height: 300px; margin: 0 auto;}
.box {position: relative;}
.one {background: green; width: 50px; height: 50px; position: absolute;z-index:1}
.two {background: red; width: 50px; height: 50px; position: absolute; z-index:0}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full">
<div class="box">
<div class="one"></div>
<div class="two"></div>
</div>
</div>
Update
Run the snippet again, the red div is no visible but its been clicking.
Thanks
I would use the same click handler for both element and if needed test the target or currentTarget depending on the requirements:
$(".one, .two").click(function(e) {
if ($(e.target).is('.one')) {
// do stuff related to one
console.log('click on one');
} else if ($(e.target).is('.two')) {
// do stuff related to two
console.log('click on two');
}
// do stuff related to both
console.log('common code');
});
.full { background: #ddd; width:300px; height: 300px; margin: 0 auto;}
.box {position: relative;}
.one {background: green; width: 50px; height: 50px; position: absolute;}
.two {background: red; width: 30px; height: 30px; position: absolute;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="full">
<div class="box">
<div class="one"></div>
<div class="two"></div>
</div>
</div>
Try this
$(".one").click(function() {
alert('green Clicked');
});
$(".two").click(function() {
alert('red Clicked');
$(".one").trigger("click");
});
You can simply trigger the click event of the div which is below, when the click event of the div which is above is fired. For instance, lets say div with class "one" is above.
$(".one").click(function() {
console.log('Green div is clicked');
$(".two").trigger("click");
});
$(".two").click(function() {
console.log('Red div is clicked');
});
You can use jquery's $(this) to achieve same. Code can be further reduce to.. $(".one,.two").click(function() {
var x = $(this).prop('class');
alert('class '+x+ ' div is clicked' );
});

Change CSS of a div when hovering another (JQuery)

I want to change the CSS of a div when hovering its parent div.
This is my HTML:
<div id="box1" class="hover-on-div-1">
<img src="images/1.png" alt="" />
<div id="line1"></div>
<div class="text_align"><span>Text here</span>
</div>
</div>
Here is the CSS:
#box1 {
height: 295px;
width: 220px;
background-color: #86d1f4;
float: left;
margin-left: 30px;
margin-right: 120px;
margin-top: 55px;
color: #0081C5;
}
#box1:hover {
background-color: #494c5b;
color: #BFB6AF;
}
#line1 {
height:1px;
background:#0081C5;
width:126px;
margin-top:67px;
margin-left:40px;
position:absolute;
}
Note: .hover-on-div-1 is the class I use for a JQuery function that changes the image, the <span> is used only for a text-transform and the text-align class is pretty self explanatory.
How do I change the .line1 div when hovering over #box1?
I managed to change everything inside the #box1 div when I hover but not the .line1. Did some search on SO but since I'm a total noob when it comes to JQuery/JavaScript it didn't helped too much.
https://jsfiddle.net/nLg8Lr7x/
You don't need JS for this - your #line1 div is child of #box1 div.
Just add some css like this:
#box1:hover #line1 {
/* Changes for #line1 when #box1 hovered */
}
Here is examle on jsbin.
If you want to do it with jQuery you can make use of mouseover and mouseleave functions to change css like below.
Notes: I suggest you to make use of addClass and removeClass functions instead of setting hard codded css in functions.
$('#box1').mouseover(function() {
$('#line1').css("background", "red"); // change css
});
$('#box1').mouseleave(function() {
$('#line1').css("background", "#0081C5"); // change back css as it was
});
$('#box1').mouseover(function() {
$('#line1').css("background", "red");
});
$('#box1').mouseleave(function() {
$('#line1').css("background", "#0081C5");
});
#box1 {
height: 295px;
width: 220px;
background-color: #86d1f4;
float: left;
margin-left: 30px;
margin-right: 120px;
margin-top: 55px;
color: #0081C5;
}
#box1:hover {
background-color: #494c5b;
color: #BFB6AF;
}
#line1 {
height: 1px;
background: #0081C5;
width: 126px;
margin-top: 67px;
margin-left: 40px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" class="hover-on-div-1">
<img src="images/1.png" alt="" />
<div id="line1"></div>
<div class="text_align"><span>Text here</span>
</div>
</div>

DIV centered when other div removed

I have two div's next to each other - left one and right one.
There is possibility, that the right one will be gone, then i want the left one to be centered.
HTML
<div class="contener">
<div class="left"></div>
<div class="right></div>
</div>
CSS:
.left {
width: 75%;
height: 240px;
float: left;
}
.right {
width: 25%;
height: 250px;
float: right;
}
.contender{
text-align:center;
}
.left {
width: 75%;
height: 240px;
text-align:left;
display:inline-block;
zoom:1;
*display:inline;
}
.right {
width: 25%;
height: 250px;
text-align:left;
display:inline-block;
zoom:1;
*display:inline;
}
the asterisk(*) is used to fix ie7 so it's a bit of a hack.
You can set the display property of .left and .right to inline-block and set the text-align:center for the parent element as jayaguilar pointed out. However, not that this won't work with the exact html and css you've.
You need to either remove the line break between inline elements in your html markup as follows:
<div class="container">
<div class="left"></div><div class="right"></div>
</div>
or comment it out
<div class="container">
<div class="left"></div><!--
--><div class="right">
</div>
or reduce their width to something less than 100% in order to accommodate the whitespace after inline-block elements.
Demo (click the remove button)
<div class="contener">
<div class="left"></div>
<div class="right"></div>
</div>
And now some easy jQuery:
$(".right").click(function() {
$(this).hide();
$(".left").css({ 'text-align': 'center'});
});
So with that we make "desapear" the right one, and then you do what you want with the left one! :)

Show hidden content at bottom of page using tabs on click

So I have a set of 4 divs at the bottom of my page. I intend for the top of these divs to look like tabs, and when the div (tab) is clicked on, that div's height will increase and thus appear like a hidden page is rising from the bottom of the window.
Here is my code so far:
---Css---
tab1 {
float: left;
width: 400px;
height: 100px;
background: red;
position: absolute;
left: 300px;
bottom: 0px;
clear:both;
}
tab2 {
width: 400px;
height: 100px;
border-radius: 10px 10px 0px 0px;
background: green;
position: absolute;
left: 400px;
bottom: 0px;
}
tab3 {
width: 400px;
height: 100px;
border-radius: 10px 10px 0px 0px;
background: red;
position: absolute;
left: 500px;
bottom: 0px;
}
tab4 {
width: 400px;
height: 100px;
border-radius: 10px 10px 0px 0px;
background: green;
position: absolute;
left: 600px;
bottom: 0px;
}
---HTML---
<tab1></tab1>
<tab2></tab2>
<tab3></tab3>
<tab4></tab4>
---JavaScript---
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"type="text/javascript"></script>
<script>
$('tab1').toggle(function(){
$(this).animate({'height': '500px'},{speed:10,});
}, function(){
$(this).animate({'height': '100px'},{speed:10, });
});
$('tab2').toggle(function(){
$(this).animate({'height': '500px'},{speed:10});
}, function(){
$(this).animate({'height': '100px'}, {speed:10});
});
$('tab3').toggle(function(){
$(this).animate({'height': '500px'},{speed:10,});
}, function(){
$(this).animate({'height': '100px'},{speed:10, });
});
$('tab4').toggle(function(){
$(this).animate({'height': '500px'},{speed:10});
}, function(){
$(this).animate({'height': '100px'}, {speed:10});
});
Here is a jsfiddle to demonstrate what I have http://jsfiddle.net/tkTJr/
I want to allow each div to be 100% of the window width but still enable the others to be clicked. At the moment if I did that I can only click on the one with the lowest z-index because they are overlapping. I was thinking of making the top of each div stick out like a tab to differentiate one from another. Any help in doing so?
Many thanks, I hope some one will know the solution to this problem.
I tried to achieve this using two approaches:
Approach #1: Javascript/jQuery
I went ahead and added functionality that closes the 'active' tab as I call it if the user clicks off of the tab's content or tab. Essentially this just toggles the bottom position of the tab and shows/hides (by way of sliding up/down) each time a user clicks a tab. Here is a live demo of that. If you're not looking to have the added functionality, this fiddle will do just fine for you
Here is the relevant code for the version with increased functionality:
<script> // The most important section for you
$('.tab').click(function (e) {
e.stopPropagation(); // allows the :not to function in the next .click function
var toggleBot = $(this).css('bottom') == "400px" ? "0px" : "400px";
// ^^ Clever way of toggling between two values
$(this).animate({
'bottom': toggleBot // Toggle the value
});
var number = $(this).attr('class').split(' ')[1]; // Get the number to relate to the content
if ($('.active')[0] && number != $('.active').attr('class').split(' ')[1]) {
// This part makes only one content stay open at a time
var number2 = $('.active').attr('class').split(' ')[1];
var toggleBot2 = $('.tab.' + number2).css('bottom') == "0px" ? "400px" : "0px";
$('.tab.' + number2).animate({
'bottom': toggleBot2
});
$('.content.' + number2).slideToggle().toggleClass('active');
}
$('.content.' + number).slideToggle().toggleClass('active');
});
$('.content').click(function(e) { // Again, allows the :not to function correctly below
e.stopPropagation();
});
$('body:not(.tab, .content)').click(function() {
// Allows the 'active' tab to be closed when the anything but a tab/content is clicked
var number2 = $('.active').attr('class').split(' ')[1];
$('.tab.' + number2).animate({
'bottom': '0'
});
$('.content.' + number2).slideToggle().toggleClass('active');
});
</script>
<style>
div {
text-align:center;
}
.tab {
width: 100px;
height: 50px;
border-radius: 10px 10px 0px 0px;
position: absolute; /* !!Important for functionality of tab!! */
bottom: 0px; /* !!Important for functionality of tab!! */
z-index:2;
}
.tab.one {
background: red;
left:10%;
}
.tab.two {
background: blue;
left:30%;
}
.tab.three {
background: yellow;
left:50%;
}
.tab.four {
background:green;
left:70%;
}
.content {
border-radius: 10px 10px 0px 0px;
position:absolute; /* !!Important for functionality of content!! */
display:none; /* !!Important for functionality of content!! */
bottom:0; /* !!Important for functionality of content!! */
left:0px;
background:black;
color:white;
height:400px;
width:100%;
z-index:1;
}
/* Just to add some content */
#mainContent {
position:relative;
width:25%;
height:75%;
clear:both;
}
</style>
<html> <!-- Note: they are all on the same level -->
<body>
<div id='#mainContent' style='position:relative; width:75%; height:75%; left:12.5%;'>Zombie ipsum content</div>
<div class='tab one'>Tab 1</div>
<div class='content one'>Content 1!</div>
<div class='tab two'>Tab 2</div>
<div class='content two'>Content 2!</div>
<div class='tab three'>Tab 3</div>
<div class='content three'>Content 3!</div>
<div class='tab four'>Tab 4</div>
<div class='content four'>Content 4!</div>
</body>
</html>
Approach #2: CSS
Before I had toggled width/height with CSS based on <input>s and <label>s. This time I decided to try to make the same tabs using only CSS, so here is my attempt. Essentially it puts a link around the tab and animates it up when clicked and also animates the content's height when clicked. It took a lot less fiddling to complete and I always love complete CSS projects <3 However this approach does not quite achieve the same functionality as the jQuery approach, which is what I was afraid of and made me sad :( The problem is described below in 'Functionality note'
Here is the relevant code for a CSS only approach:
//No javascript, Yay!
<style>
div {
text-align:center;
}
.tab {
width: 100px;
height: 50px;
text-align:center;
border-radius: 10px 10px 0px 0px;
color:black;
position: absolute;
bottom: 0px;
z-index:2;
}
.tab.one {
background: red;
left:10%;
}
.tab.two {
background: blue;
left:30%;
}
.tab.three {
background: yellow;
left:50%;
}
.tab.four {
background:green;
left:70%;
}
#mainContent {
position:relative;
width:25%;
height:75%;
clear:both;
}
#wrapper { /* Allows the tabs to be at the bottom */
position:absolute;
bottom:0;
width:100%;
text-decoration: none;
}
.content {
border-radius: 10px 10px 0px 0px;
position:absolute;
bottom:0;
left:0px;
background:black;
color:white;
height:0px;
width:100%;
z-index:1;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-ms-transition:all 1s ease;
}
.hideUp {
display:block;
position:relative;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-ms-transition:all 1s ease;
}
.hideUp:focus {
bottom: 400px;
}
.hideUp:focus + .content {
height:400px;
}
</style>
<html>
<body>
<div id='#mainContent' style='position:relative; width:75%; height:75%; left:12.5%;'>Zombie ipsum content.</div>
<div id='wrapper'>
<a href="#" tabindex="-1" class="hideUp"> <!-- Allows the CSS to know whether the tab has focus or not -->
<div class="tab one">Tab 1</div>
</a>
<div class="content">Content 1</div>
<a href="#" tabindex="-1" class="hideUp">
<div class="tab two">Tab 2</div>
</a>
<div class="content">Content 2</div>
<a href="#" tabindex="-1" class="hideUp">
<div class="tab three">Tab 3</div>
</a>
<div class="content">Content 3</div>
<a href="#" tabindex="-1" class="hideUp">
<div class="tab four">Tab 4</div>
</a>
<div class="content">Content 4</div>
</div>
</body>
</head>
Usage note: The jQuery approach requires devices be able to run jQuery (of course) and the CSS approach requires that users be on "modern" browsers that allow CSS3 transitions. I didn't include all of the browser tags in my CSS, just the ones for webkit, mozilla, and IE.
Functionality note: The CSS approach I used does not allow user to click the tab to 'close' the content, they must click anywhere else. It also allows the tab to close when the content is clicked, so unless someone finds a work around for it it's only functional for displaying static content like images, text, etc.
One could change the CSS demo to only open/close when the tab itself is clicked by using the checkbox-hack, allowing the content to be selected and such
If you'd like any part of it explained further let me know. I hope I helped!

Categories