logo
Tags down

shadow

pass div class content to another class or id


By : Mehmet Dönmez
Date : May 06 2020, 08:09 AM

For ex : i have <div id="titlebar"></div> inside html, and also i have <div class="name">Content-text</div> inside same html. Now i want pass Content-text of div class name (<div class="name">Content-text</div>) to another my id <div id="titlebar"></div> through css or js. i tried many ways, but not fixed !

And when i scroll up the html the id titlebar will show the text of class name

My html code :

  <html>
    <body>
      <div id="titlebar"></div>
      <div class="name">Content-text</div>
    </body>
</html>

Css:

 #titlebar{
 text-align:center;
 width: 101%;
 position: fixed;
 top:0px;
 margin-left:-10px;
 padding-right:1px;
 font-family: Times New Roman;
 font-size: 16pt;
 font-weight: normal;
 color: white;
 display:none;
 border: none;
}

Javascript:

 window.onscroll = function() {scrollFunction()};

 function scrollFunction() {
if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {

    document.getElementById("titlebar").style.display = "block";
} else {

    document.getElementById("titlebar").style.display = "none";
}

}

Answer :

Working fine : Sample, jsFiddle Please find it here.

<style>
#titlebar{
  border: 1px solid black;
}

.name{
  border: 1px solid red;
}
</style>
<div>
   <div id="titlebar"></div>
   <br/>
  <div class="name">Content-text</div>
  <button id='btn'>
    Click to cpoy and put text inside titlebar
  </button>
</div>

<script>
document.getElementById('btn').addEventListener('click', function() {

// Find your required code hre 


let textInsideDivelementWithclass = document.getElementsByClassName('name')[0].innerText,
    titlebarEle = document.getElementById('titlebar');
  titlebarEle.innerText =  textInsideDivelementWithclass;


});
</script>


Share : facebook icon twitter icon
Related Posts Related Posts :
  • clear array after form submit
  • pass url variable to javascript
  • access data using api
  • div position fixed css
  • add horizontal line between two div
  • disable toggle button css
  • css fixed line height
  • background image not working
  • table cell border
  • text line break css
  • overlay div on div
  • text direction rtl css
  • javascript convert string to an object
  • bind inner div click to outer div
  • jquery ajax oncomplete
  • how to use promise in for loop
  • jquery get element using variable
  • javascript send textbox value
  • css new line after element
  • css calc not working properly
  • link disabled jquery
  • sql join table to subquery
  • MS Access SQL Issue with OR AND Operators
  • set textarea value using php
  • php merge two arrays into one
  • php form with google captcha
  • update current row in php
  • php date format mysql
  • mysql pdo select query
  • php function return an array
  • PHP mysqldump database to sql file
  • display image query
  • php create array using foreach loop
  • associative array php
  • group_concat in mysql laravel
  • php array_push empty
  • mysql on update cascade not working
  • pdo insert prepared statement
  • mysql insert ignore vs on duplicate key
  • mysql insert into existing row
  • mysql multi insert query
  • mysql group by show all rows
  • php change profile image
  • combine multiple arrays into one array php
  • how to sum values in an array
  • how to get sum of the total time
  • How to Create Facebook live stream without notification using API ?
  • on button click make div visible
  • css affect another element on hover
  • insert line after paragraph word
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org