Insert in the form of text value of property css in div destination

Question

Insert in the form of text value of property css in div destination

Navigation

#1 by (1 votes)

2

Hello I need to get some means to insert the value of the css property "color" as text within the div#consola for each of the 3 div:

#position
#position2
#position3

in the classes p1color , p2color , p3color respectively as the value changes when you advance in the scroll bar.

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    if ( scroll > 0 && scroll < 1000) {
		$('.position').css({
'color':'rgba(0,255,65,1.00))',
'background':'rgba(0,40,90,1.00)'
			})
		$('.position2').css({
'color':'rgba(255,248,0,1.00)',
			})
		$('.position3').css({
'color':'rgba(255,0,215,1.00)',
			})
		}
   if ( scroll > 1000 && scroll < 2000) {
		$('.position').css({
'color':'rgba(255,242,0,1.00)',
'background':'rgba(255,0,144,1.00)'
			})
		$('.position2').css({
'color':'rgba(0,100,206,1.00)',
			})
		$('.position3').css({
'color':'rgba(0,255,7,1.00)',
			})
		}
   if ( scroll > 2000 && scroll < 3000) {
		$('.position').css({
'color':'rgba(0,94,255,1.00)',
'background':'rgba(255,0,226,1.00)'
			})
		$('.position2').css({
'color':'rgba(155,0,255,1.00)',
			})
		$('.position3').css({
'color':'rgba(224,224,224,1.00)',
			})
		}
	
    if ( scroll > 3000 && scroll < 4000) {
		$('.position').css({
'color':'rgba(255,2,6,1.00)',
'background':'rgba(255,2,6,1.00)'
			})
		$('.position2').css({
'color':'rgba(69,66,179,1.00)',
			})
		$('.position3').css({
'color':'rgba(124,141,245,1.0)',
			})
		}
    if ( scroll > 4000 && scroll < 5000) {
		$('.position').css({
'color':'rgba(0,94,255,1.00)',
'background':'rgba(255,0,226,1.00)'
			})
		$('.position2').css({
'color':'rgba(224,224,224,1.00)',
			})
		$('.position3').css({
'color':'rgba(155,0,255,1.00)',
			})
		}
	if ( scroll > 5000 && scroll < 6000) {
		$('.position').css({
'color':'rgba(211,104,0,1.0)',
'background':'rgba(255,238,0,1.00)',
'text-shadow':'none'
			})
		$('.position2').css({
'color':'rgba(176,50,0,1.0)',
			})
		$('.position3').css({
'color':'rgba(100,16,5,1.00)',
			})
		}
	if ( scroll > 5000 && scroll < 6000) {
		$('.position').css({
'color':'rgba(196,173,217,1.00)',
'background':'rgba(243,255,217,1.00)',
			})
		$('.position2').css({
'color':'rgba(136,168,191,1.0)',
			})
		$('.position3').css({
'color':'rgba(68,47,168,1.0)',
			})
		}
		});

body{text-align:center;height:10000px;}
.position{
color:blue;

 display:inline;
  margin-top:5px;
  position:fixed;
}
.position2{
color:grey;

  display:inline;
   margin-top:25px;
  position:fixed;
}
.position3{
color:green;

  display:inline;
   margin-top:45px;
  position:fixed;
}
#consola{
   background:grey;
  display:inline;
   margin-top:65px;
  position:fixed;
  width:300px;
  height:100px;
  margin-left:-150px;
}
.p1color{
 background:red;
}
.p2color{
 background:green;
}
.p3color{
 background:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="position">
  AAAA
  </div>
<div class="position2">
  BBBBB
  </div>
<div class="position3">
  CCCC
  </div>

<div id="consola">
  <div class="p1color">
    B
    </div>
  <div class="p2color">
    C
    </div>
  <div class="p3color">
    D
    </div>
  </div>

javascript jquery html

asked by Ivan Soler 15.04.2016 в 18:18

source

1 answer

Autocomplete with JQuery UI -Function Select Install controlsFX in netbeans

score 1 · Accepted Answer

If I have understood the question correctly, what you want is not only to change the color of the text (which you already have done), but also to show the value of the new color in the lower div (to be done).

If that's what you want, it has no mystery: You should only read the color attribute using the .css(atributo) method and assign it to the corresponding div using .text(valor) . The problem with this solution is that jQuery interprets the value of the property and shows you the equivalent value (in rgb) that is not exactly what you had written in your part of the code (in rgba).

Something like this:

$(".p1color").text($(".position").css("color"));
$(".p2color").text($(".position2").css("color"));
$(".p3color").text($(".position3").css("color"));

You would only have to add that text to the end of your function and it would already be done:

$(window).scroll(function (event) {
  var scroll = $(window).scrollTop();
  if ( scroll > 0 && scroll < 1000) {
    $('.position').css({
      'color':'rgba(0,255,65,1.00))',
      'background':'rgba(0,40,90,1.00)'
    })
    $('.position2').css({
      'color':'rgba(255,248,0,1.00)',
    })
    $('.position3').css({
      'color':'rgba(255,0,215,1.00)',
    })
  }
  if ( scroll > 1000 && scroll < 2000) {
    $('.position').css({
      'color':'rgba(255,242,0,1.00)',
      'background':'rgba(255,0,144,1.00)'
    })
    $('.position2').css({
      'color':'rgba(0,100,206,1.00)',
    })
    $('.position3').css({
      'color':'rgba(0,255,7,1.00)',
    })
  }
  if ( scroll > 2000 && scroll < 3000) {
    $('.position').css({
      'color':'rgba(0,94,255,1.00)',
      'background':'rgba(255,0,226,1.00)'
    })
    $('.position2').css({
      'color':'rgba(155,0,255,1.00)',
    })
    $('.position3').css({
      'color':'rgba(224,224,224,1.00)',
    })
  }

  if ( scroll > 3000 && scroll < 4000) {
    $('.position').css({
      'color':'rgba(255,2,6,1.00)',
      'background':'rgba(255,2,6,1.00)'
    })
    $('.position2').css({
      'color':'rgba(69,66,179,1.00)',
    })
    $('.position3').css({
      'color':'rgba(124,141,245,1.0)',
    })
  }
  if ( scroll > 4000 && scroll < 5000) {
    $('.position').css({
      'color':'rgba(0,94,255,1.00)',
      'background':'rgba(255,0,226,1.00)'
    })
    $('.position2').css({
      'color':'rgba(224,224,224,1.00)',
    })
    $('.position3').css({
      'color':'rgba(155,0,255,1.00)',
    })
  }
  if ( scroll > 5000 && scroll < 6000) {
    $('.position').css({
      'color':'rgba(211,104,0,1.0)',
      'background':'rgba(255,238,0,1.00)',
      'text-shadow':'none'
    })
    $('.position2').css({
      'color':'rgba(176,50,0,1.0)',
    })
    $('.position3').css({
      'color':'rgba(100,16,5,1.00)',
    })
  }
  if ( scroll > 5000 && scroll < 6000) {
    $('.position').css({
      'color':'rgba(196,173,217,1.00)',
      'background':'rgba(243,255,217,1.00)',
    })
    $('.position2').css({
      'color':'rgba(136,168,191,1.0)',
    })
    $('.position3').css({
      'color':'rgba(68,47,168,1.0)',
    })
  }

  $(".p1color").text($(".position").css("color"));
  $(".p2color").text($(".position2").css("color"));
  $(".p3color").text($(".position3").css("color"));
});

body{
  text-align:center;
  height:10000px;
}
.position{
  color:blue;
  display:inline;
  margin-top:5px;
  position:fixed;
}
.position2{
  color:grey;
  display:inline;
  margin-top:25px;
  position:fixed;
}
.position3{
  color:green;
  display:inline;
  margin-top:45px;
  position:fixed;
}
#consola{
  background:grey;
  display:inline;
  margin-top:65px;
  position:fixed;
  width:300px;
  height:100px;
  margin-left:-150px;
}
.p1color{
  background:red;
}
.p2color{
  background:green;
}
.p3color{
  background:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="position">
  AAAA
</div>
<div class="position2">
  BBBBB
</div>
<div class="position3">
  CCCC
</div>

<div id="consola">
  <div class="p1color">
    B
  </div>
  <div class="p2color">
    C
  </div>
  <div class="p3color">
    D
  </div>
</div>