how to individual box minimize after append function creation - javascript

I have some chat boxes.after the box creation.how to minimize the individual boxes
$(document).ready(function(){
$("a").click(function(){
var name = $(this).html();
var user ='<div id="mainchat"><button id="min"> min</button><br>'+name+'</div>';
$("#demo1").append(user);
return false;
});
});
// minimize the individual box
$(document).on('click', '#min', function(){
$(this).find("#mainchat").toggle(700);// its not working.
//$("#mainchat").toggle(700) applied this code,first box only was minimized.
});
#mainchat
{
position :relative;
float:left;
top:10px;
left:50px;
margin right:10px;
height:250px;
width:100px;
border:1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
first<br>
second<br>
third
<p id ="demo1"></p>
please help to minimize individual boxes.When click on individual minimize buttons.thanks in advance

Just edit this, because find only works to point to the child element:
see here: https://jsfiddle.net/r84dw7t3/
// minimize the individual box
$(document).on('click', '#min', function(){
$(this).parent("#mainchat").toggle(700);
});

Related

How to set the scrolltop() method to the sliding div?

I have a sliding div, or we can say that its a on click expand and collapse div(toggle).
I want to apply the .scrollTop() to the div. when the button is clicked to expand the div
before expand set to top, and then expand. I tried it more then hundreds times
with different ways but i unable to get the desired result. Any help will be appreciated.
<div id="mainarea">
</div>
<div class="slidingDiv">
</div>
<div class="show_hide">
<p> Click me</p>
</div>
var currentscrollpos;
currentscrollpos = $(window).scrollTop();
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
$('body').animate({scrollTop:100}, 'slow')
return false;
});
});
$(document).click(function()
{
$('body').animate({ scrollTop: currentscrollpos }, 0);
});
//This is my css
#mainarea{width:550px; height:300px;background-color: yellow;}
.slidingDiv {
height:200px;
background-color: white;
margin-top:10px;
width:261px;
background-color: black;
}
.show_hide {
display:none;
}
#notificationFooter {
background:#FFFFFF; margin:0 auto; height:8px; width:96px;
}
This is the fiddle
http://jsfiddle.net/muheetmehfooz/wmwn5424/
What you are doing is not bring you to top, just move you bit up. However, if your question is only about how to make this actions in right order - try this.
jsfiddle
just use callback function
P.S.
to get to the top use
{scrollTop:currentscrollpos}

Depending on hold the box after close it

When I click to the button and close my box with jQuery ( Toggle ) ,If the box closed I want to box will depend on hold after I refresh the page . Or If it's Open ,after I refresh the page It will stay open.
I don't know the code that help me do what I want .
For example I wrote a code when we click on red Square , the blue square will be disappear and when we click on it again the blue square will be appear . but there is a problem that after I refresh the page My data or changes will be forgotten .
DEMO
CSS :
.close-open {
background:red;
width:50px;
height:50px;
float:left;
}
.box {
background:blue;
width:100px;
height:100px;
float:left;
clear:left;
margin:40px 0px 0px 0px;
}
HTML :
<span class="close-open"></span>
<div class="box">Test Box Toggle</div>
jQuery :
$(document).ready(function(){
$(".close-open").click(function(){
$(".box").toggle();
});
});
You can achieve this with some ways. I will show one with Web Storage:
js
$(document).ready(function(){
var isClose = localStorage.getItem("isClose");
if(isClose == "false"){
$(".box").hide();
}
$(".close-open").click(function(){
$(".box").toggle(
function(){
localStorage.setItem("isClose", $(this).is(':visible'));
});
});
});
fiddle
The localStorage object stores the data with no expiration date. The
data will not be deleted when the browser is closed, and will be
available the next day, week, or year.
If you want restrict this functionality to the particular session you can use this...
$(document).ready(function(){
if(sessionStorage.isVisible == "false" ){
$(".box").hide();
sessionStorage.isVisible = "true";
}
else
sessionStorage.isVisible = "false";
$(".close-open").click(function(){
sessionStorage.isVisible = $(".box").toggle().is(':visible');
});
});
fiddle Demo

jQuery multiple class .hover issue

I'm still a bit of a jQuery noob. I'm creating a fitness website where a user can hover over different body parts which then highlight a different colour. I want all divs with class 'arms' to turn red when a user hovers ONE of the arms (ids "leftarm" and "rightarm") but at the moment, nothing happens.
Any help would be appreciated :)
HTML
<div id="muscleStructure">
<div class="arms" id="leftarm">
</div>
<div class="arms" id="rightarm">
</div>
</div>
CSS
#muscleStructure{
position:relative;
width:150px;
}
.arms{
height:150px;
width:25px;
background:#CF6;
position:absolute;
top:15px;
cursor:pointer;
}
#rightarm{
right:0px;
}
#leftarm{
left:0px;
}
Javascript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
$(".arms").hover(function(){
$(".arms").css("background","#F00");
},function(){
$(".arms").css("background","#CF6");
});
</script>
do like this otherwise all the elements with class arms backgroung color will get changed:
$(".arms").hover(function(){
$(this).css("background","#F00");
},function(){
$(this).css("background","#CF6");
});
also wrap it in $(document).ready()
$(document).ready(function(){
//your code here
});
UPDATED:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$(".arms").hover(function(){
$(this).css("background","#F00");
},function(){
$(this).css("background","#CF6");
});
});
</script>
Change the code like this:
WORKING FIDDLE DEMO
Try this:
$(".arms").hover(function(){
$(this).css("background","#F00"); // $(this) instead $('.arms')
},function(){
$(this).css("background","#CF6"); // $(this) instead $('.arms')
});
You're applying css to all elements in the DOM which are having class .arms, Target the current element which is hovered and you will see the desired effect.
Fiddle

how to change focus of (this) from .box > .overlay (child)

<div class="box" id="box1">
<div class="overlay" id="ovlay1">
</div>
</div>
<style>
.box{
height:200px; width:200px;
}
.overlay{
height:50px; width:200px; position:absolite; top:-50px;
}
</style>
<script>
$(".box").mouseover(function(){
// $(".overlay").animate({
// $(this).animate({
top: "+=50px",
});
});
</script>
assuming i have about 5 of the .box divs, each with ascending id from box1 -> box5 etc.
the overlay should slide in on mouseover, but just on the hovered box.. i can't figure out the jquery function for this. runing animate on (".overlay") shows the overlay on every box, using (this) does not work because its obviously referring to (".box")...
how can i focus (this) on the overlay?
You can use the find method of jQuery:
$(".box").mouseover(function(){
$(this).find(".overlay").animate({
top: "+=50px",
});
});
Target the .overlay inside the currently hovered .box
$(".box").on('mouseover', function(){
$(".overlay", this).animate({
top: "+=50px",
});
});
This jQuery will select the overlay that is the child of $(this):
$(this).children('.overlay').animate({
top:"+=50px"
});
So the final piece looks like this:
$(".box").mouseover(function(){
$(this).children('.overlay').animate({
top:"+=50px"
});
});

HTML5 "Lower Lights" dynamic text and incorrect mouse pointer

I'm working on a webpage that has a "Lower Lights" function but the code I have now has a few problems.
The first problem is that for some reason instead of the normal mouse pointer "arrow" it changes to the text select "I" when over the element and its confusing because the user doesn't know its clickable. I've tried changing the tags around it but nothing seems to help.
My second problem is I can't get the text to Dynamically change AND still function. I need it to cycle through "Light: High" > "Light: Medium" > "Light: Low" but with the script I'm using now that seems impossible.
Here is the code that I'm using. Hopefully someone can point out what I'm doing wrong or point me in the right direction.
Notes: The goal of this was to be as simple and light weight HTML5 as possible. If there is an easier, less code, more light weight, option please let me know. Also I'm not opposed to using jQuery if it makes things more simple but I'm completely lost on that front.
If anymore information is needed please let me know.
<html>
<!-- This script handles the "Lower Lights-->
<script>
$(document).ready(function(){
$("#the_lights").fadeTo(1,0);
$("#turnoff").click(function () {
$("#the_lights").css({'display' : 'block'});
$("#the_lights").fadeTo("slow",1);
});
$("#soft").click(function () {
document.getElementById("the_lights").style.display="block";
$("#the_lights").fadeTo("slow",0.8);
});
$("#turnon").click(function () {
document.getElementById("the_lights").style.display="block";
$("#the_lights").fadeTo("slow",0);
});
});
</script>
<style>
#the_lights{
background-color:#000;
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
display:none;
}
#standout{
padding:5px;
background-color:black;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:1000;
}
</style>
<div id ="standout">
<font color="white">
<div id = "turnoff">Lights: Low</div>
<div id = "soft">Lights: Medium</div>
<div id = "turnon">Lights: High</div>
</font>
</div>
<div id="the_lights"></div>
</html>
Is this what you want? Your divs are not links so you need to use the CSS cursor property. cursor:pointer so that it appears clickable. Start out with the first div visible and the other 2 hidden with the hidden CSS class created. I assigned the div id's as numbers. If you actually want divs to use to cycle with, then the code below should work.
example here JSFIDDLE
The jQuery
$(document).ready(function(){
$("#the_lights").fadeTo(1,0);
$(document).on("click","div.lights",function () {
var divId = $(this).attr("id");
$(this).hide();
$("#" + divId).show();
$("#the_lights").css({'display' : 'block'});
if(divId == 1){
$("#2").show();
$("#1").hide();
$("#the_lights").fadeTo("slow",0.8);
}else if(divId == 2){
$("#2").hide();
$("#3").show();
$("#the_lights").fadeTo("slow",1);
}else if(divId == 3){
$("#3").hide();
$("#1").show();
$("#the_lights").fadeTo("slow",0);
}
});
});
The CSS
#the_lights{
background-color:#000;
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
}
#standout{
padding:5px;
background-color:black;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:1000;
}
.lights{
cursor:pointer;
}
.hidden{
display:none;
}
The HTML
<div id ="standout">
<font color="white">
<div class='lights' id = "1">Lights: High</div>
<div class='lights hidden' id = "2">Lights: Medium</div>
<div class='lights hidden' id = "3">Lights: Low</div>
</font>
</div>
<div id="the_lights"></div>
The fiddle
http://jsfiddle.net/gE8VZ/
First for the UI you can change the mouse pointer using CSS cursor property: cursor:pointer; to let the user know it's clickable. Then you can also set an indicator to the current active lights by adding a class to change the styling.
You also don't need to set the display property everytime, "#the_lights" is a <div> element so it has a default block display. And trim down your code to something like this:
$(document).ready(function () {
var lights = $("#the_lights");
lights.fadeTo(1, 0);
$('#standout div').click(function(){
$(this).addClass('active').siblings().removeClass('active');
if($(this).is('#turnoff')){
lights.fadeTo("slow", 1);
}else if($(this).is('#soft')){
lights.fadeTo("slow", 0.8);
}else if($(this).is('#turnon')){
lights.fadeTo("slow", 0);
}
});
});
See this jsfiddle.
I'm not quite sure what you mean by: I need it to cycle through "Light: High" > "Light: Medium" > "Light: Low" but I think a <select> element is a good way to do this. See this jsfiddle.

Categories