If you look at the farthest div card on the right, you’ll see there is a small pin icon. I’d like to make that function available and have the div card go to where the first div is if I click on the pin icon. Also, I’d like to restore that specific div card’s location if I click the pin icon again so that it’s no longer the first one on the page. I’ve tried searching for this online but I keep getting answers for pincode and password login form designs. I’m using html, css, and javascript for the design and I would like to keep the same language.
Post all the code and what you have tried so far. If you create a Codepen you are more likely to get timely help.
-
How are you creating the cards?
-
Do you know how to do DOM manipulation using JavaScript?
One option that might be simple, but I wouldn’t suggest using, is using the order property of flex items. The reason I wouldn’t use it is that the order will only be visual and not the actual DOM content. You should prefer creating the elements in the order they appear.
Example of using order
<style>
* {
box-sizing: border-box;
}
/* Create four equal columns that floats next to each other */
.columnfbn {
float: left;
width: 25%;
font-family:'Arial', sans-serif;
padding: -10px;
}
/* Clear floats after the columns */
.rowfbn:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.columnfbn {
width: 100%;
}
}
</style>
<style>
.deviceView1 {
display: none;
position: fixed;
z-index: 1;
padding-top: 60px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.deviceView1-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 82%;
}
.return {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.return:hover,
.return:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.watchbtn {
background-color:transparent;
border:none;
color:#555;
text-align:left;
cursor:pointer;
font-weight:500;
}
p {
font-family:'Proxima Nova', sans-serif;
}
</style>
<div class="rowfbn">
<div class="columnfbn" style="background-color:#fff;">
<center>
<div style="width:70%; box-shadow:0 0 5px #bbb; padding:5px 10px 5px 10px">
<p class="myclass" style="font-size:0.7em; margin-left:-2px; margin-top:3px; text-align:left; color:#444; font-weight:500">Benjamin Pelletier <span style="float:right">
<script>
function before(){
document.getElementById('myImage')
.src="https://deviceconsole.desinic8.repl.co/aa-offline.png";
}
function afterr(){
document.getElementById('myImage')
.src="https://deviceconsole.desinic8.repl.co/aa-offline.png";
}
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<input type="image" src="eye.png" title="Not yet released" disabled style="display:none; cursor:not-allowed; float:right; width:16px" onclick="#">
<input type="image" src="unlock.png" title="Release" style="float:right; width:16px; margin-right:3px" onclick="before();">
<input type="image" src="lock.png" title="Lock" style="float:right; width:16px; margin-right:3px" onclick="afterr();">
<input type="image" src="heart.png" title="Report self-harm" style="float:right; width:16px; margin-right:3px" onclick="reportHarm();">
<script>
function reportHarm() {
window.open("https://deviceconsole.desinic8.repl.co/report-self-harm.html", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=0,left=0,width=1000,height=580");
}
</script>
</span></p>
<container class="mySlides AASJ"> <!-- added class as per option name -->
<img src="https://deviceconsole.desinic8.repl.co/aa-offline.png" class="screenimg" preload="none" width="90%" id="myImage">
<container id="divMsg" style="background-color: transparent; color: #ffffff; height: auto; width: auto; text-align: center">
<center>
<div style="display:none; background-color:transparent; padding:5px; margin-bottom:2px">
</div>
</center>
</container>
</container>
</container>
</div>
</center>
</div>
<div id="deviceView1" class="deviceView1">
<div class="deviceView1-content">
<span class="return">×</span>
<p style="color:#444; font-size:0.9em">Benjamin Pelletier</p>
<container class="mySlides AASJ"> <!-- added class as per option name -->
<img src="https://deviceconsole.desinic8.repl.co/aa-offline.png" class="screenimg" loading="lazy" preload="none" width="60%" id="myImagea">
<container id="divMsg" style="background-color: transparent; color: #ffffff; height: auto; width: auto; text-align: center">
<center>
<div style="background-color:#fff; padding:5px; width:60%; border-radius:8px">
</div>
</div>
</div>
<script>
var modal342 = document.getElementById("deviceView1");
var btn342 = document.getElementById("seeDevice");
var span342 = document.getElementsByClassName("return")[0];
btn342.onclick = function() {
modal342.style.display = "block";
}
span342.onclick = function() {
modal342.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal342) {
modal342.style.display = "none";
}
}
</script>
<div class="columnfbn" style="background-color:#fff;">
<center>
<div style="width:70%; box-shadow:0 0 5px #bbb; padding:5px 10px 5px 10px">
<p style="font-size:0.7em; margin-left:-2px; margin-top:3px; text-align:left; color:#444; font-weight:500">Darryn Hanson <span style="float:right">
<script>
function before1(){
document.getElementById('myImage1')
.src="https://deviceconsole.desinic8.repl.co/aa-offline.png";
}
function afterr1(){
document.getElementById('myImage1')
.src="https://deviceconsole.desinic8.repl.co/aa-offline.png";
}
</script>
<script>
function deviceViewAnnette() {
window.open("https://deviceconsole.desinic8.repl.co/deviceview/annette-mathis-pwa-design-and-html-css-and-javascript-period-a.html", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=0,left=0,width=1000,height=500");
}
</script>
<input type="image" src="unlock.png" title="Release" style="float:right; width:16px" onclick="before1();">
<input type="image" src="lock.png" title="Lock" style="float:right; width:16px; margin-right:3px" onclick="afterr1();">
<input type="image" src="heart.png" title="Report self-harm" style="float:right; width:16px; margin-right:3px" onclick="reportHarm();">
<script>
function beforesd(){
document.getElementById('myImage1')
.src="https://deviceconsole.desinic8.repl.co/aa-offline.png";
}
function afterrsd(){
document.getElementById('myImage1')
.src="https://deviceconsole.desinic8.repl.co/aa-offline.png";
}
</script>
</span></p>
<container class="mySlides AASJ"> <!-- added class as per option name -->
<img src="https://deviceconsole.desinic8.repl.co/aa-offline.png" class="screenimg" preload="none" width="90%" id="myImage1">
<container id="divMsg1" style="background-color: transparent; color: #ffffff; height: auto; width: auto; text-align: center; display:none">
<center>
<div style="display:none; background-color:#4d525e; padding:5px; width:70%; border-bottom-left-radius:8px; border-bottom-right-radius:8px">
</div>
</center>
</container>
</container>
</container>
</div>
</center>
</div>
<div class="columnfbn" style="background-color:#fff">
<center>
<div style="width:70%; box-shadow:0 0 5px #bbb; padding:5px 10px 5px 10px">
<p style="font-size:0.7em; margin-left:-2px; margin-top:3px; text-align:left; color:#444; font-weight:500"><script>
function pinUnpin() {
var img1 = "https://deviceconsole.desinic8.repl.co/thumbtack.png",
img2 = "https://deviceconsole.desinic8.repl.co/thumbtack-active.png"; // Assigning directly to attribute.;
var imgElement = document.getElementById('screen');
imgElement.src = (imgElement.src === img1)? img2 : img1;
}
</script>
<img src="thumbtack.png" id="screen" onclick ="pinUnpin();" style="width:16px; cursor:pointer; margin-bottom:-3px" title="Pin/Unpin screen"/>
Nicole Bradley
<span style="float:right">
<script>
function before2(){
document.getElementById('myImage2')
.src="catscreen.gif";
}
function afterr2(){
document.getElementById('myImage2')
.src="https://cdn.glitch.global/c04592ae-2cb6-429b-8fc5-d83575337b4f/screen-lock.gif?v=1677871777266";
}
</script>
<input type="image" src="unlock.png" title="Release" style="float:right; width:16px; margin-right:3px" onclick="before2();">
<input type="image" src="lock.png" title="Lock" style="float:right; width:16px; margin-right:3px" onclick="afterr2();">
<input type="image" src="heart.png" title="Report self-harm" style="float:right; width:16px; margin-right:3px" onclick="reportHarm();">
<script>
function reportHarm() {
window.open("https://deviceconsole.desinic8.repl.co/report-self-harm.html", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=0,left=0,width=1000,height=580");
}
</script>
</span>
</p>
<container class="mySlides AASJ"> <!-- added class as per option name -->
<img src="https://deviceconsole.desinic8.repl.co/profile-student.png" class="screenimg" preload="none" width="90%" id="myImage2">
<container id="divMsg2" style="background-color: transparent; color: #ffffff; height: auto; width: auto; text-align: center; display:none">
<center>
<div style="display:none; background-color:#4d525e; padding:5px; width:70%; border-bottom-left-radius:8px; border-bottom-right-radius:8px">
</div>
</center>
</container>
</container>
</container>
</container>
</div>
</center>
</div>
<div class="columnfbn" style="background-color:#fff; display:none">
<center>
<div style="width:70%; box-shadow:0 0 5px #bbb; padding:5px 10px 5px 10px">
<p style="font-size:0.7em; margin-left:-2px; margin-top:3px; text-align:left; color:#444; font-weight:500">Nicole Bradley
<span style="float:right">
<input type="image" src="unlock.png" title="Release" style="float:right; width:16px" onclick="before3();">
<input type="image" src="lock.png" title="Lock" style="float:right; width:16px; margin-right:3px" onclick="afterr3();">
<input type="image" src="heart.png" title="Report self-harm" style="float:right; width:16px; margin-right:3px" onclick="reportHarm();">
<image src="view (1).png" title="Report self-harm" style="float:right; width:16px; margin-right:3px">
</span>
</p>
<container class="mySlides AASJ" > <!-- added class as per option name -->
<img src="https://deviceconsole.desinic8.repl.co/profile-student.png" class="screenimg" loading="lazy" preload="none" width="90%" id="myImage3">
<container id="divMsg18" style="background-color: transparent; color: #ffffff; height: auto; width: auto; text-align: center; display:none"><center>
<div style="display:none; background-color:#4d525e; padding:5px; width:70%; border-bottom-left-radius:8px; border-bottom-right-radius:8px">
<script>
function before3(){
document.getElementById('myImage3')
.src="ezgif.com-gif-maker (3).gif";
}
function afterr3(){
document.getElementById('myImage3')
.src="https://cdn.glitch.global/c04592ae-2cb6-429b-8fc5-d83575337b4f/screen-lock.gif?v=1677871777266";
}
</script>
<script>
function deviceViewClaire() {
window.open("https://deviceconsole.desinic8.repl.co/deviceview/claire-dennis-pwa-design-and-html-css-and-javascript-period-a.html", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=0,left=0,width=1000,height=500");
}
</script>
<script>
function beforewq(){
document.getElementById('myImage3')
.src="ezgif.com-gif-maker (3).gif";
}
function afterrwq(){
document.getElementById('myImage3')
.src="location-error.png";
}
</script>
</div>
</center>
</container>
</container>
</container>
</div>
</center>
</div>
</div>
<br>
That’s my code for what I want to use.
I’m displaying the cards with the code pasted above and I do not know how to do DOM manipulation using Javascript.
Okay. Thank you for letting me know. I will fix it now.
<style>
* {
box-sizing: border-box;
}
/* Create four equal columns that floats next to each other */
.columnfbn {
float: left;
width: 25%;
font-family:'Arial', sans-serif;
padding: -10px;
}
/* Clear floats after the columns */
.rowfbn:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.columnfbn {
width: 100%;
}
}
.deviceView1 {
display: none;
position: fixed;
z-index: 1;
padding-top: 60px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.deviceView1-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 82%;
}
.return {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.return:hover,
.return:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.watchbtn {
background-color:transparent;
border:none;
color:#555;
text-align:left;
cursor:pointer;
font-weight:500;
}
p {
font-family:'Proxima Nova', sans-serif;
}
</style>
<div class="rowfbn">
<div class="columnfbn" style="background-color:#fff;">
<center>
<div style="width:70%; box-shadow:0 0 5px #bbb; padding:5px 10px 5px 10px">
<p class="myclass" style="font-size:0.7em; margin-left:-2px; margin-top:3px; text-align:left; color:#444; font-weight:500">Benjamin Pelletier <span style="float:right">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<input type="image" src="eye.png" title="Not yet released" disabled style="display:none; cursor:not-allowed; float:right; width:16px" onclick="#">
<input type="image" src="unlock.png" title="Release" style="float:right; width:16px; margin-right:3px" onclick="before();">
<input type="image" src="lock.png" title="Lock" style="float:right; width:16px; margin-right:3px" onclick="afterr();">
<input type="image" src="heart.png" title="Report self-harm" style="float:right; width:16px; margin-right:3px" onclick="reportHarm();">
</span></p>
<container class="mySlides AASJ"> <!-- added class as per option name -->
<img src="https://deviceconsole.desinic8.repl.co/aa-offline.png" class="screenimg" preload="none" width="90%" id="myImage">
<container id="divMsg" style="background-color: transparent; color: #ffffff; height: auto; width: auto; text-align: center">
<center>
<div style="display:none; background-color:transparent; padding:5px; margin-bottom:2px">
</div>
</center>
</container>
</container>
</container>
</div>
</center>
</div>
<div class="columnfbn" style="background-color:#fff;">
<center>
<div style="width:70%; box-shadow:0 0 5px #bbb; padding:5px 10px 5px 10px">
<p style="font-size:0.7em; margin-left:-2px; margin-top:3px; text-align:left; color:#444; font-weight:500">Darryn Hanson <span style="float:right">
<input type="image" src="unlock.png" title="Release" style="float:right; width:16px" onclick="before1();">
<input type="image" src="lock.png" title="Lock" style="float:right; width:16px; margin-right:3px" onclick="afterr1();">
<input type="image" src="heart.png" title="Report self-harm" style="float:right; width:16px; margin-right:3px" onclick="reportHarm();">
</span></p>
<container class="mySlides AASJ"> <!-- added class as per option name -->
<img src="https://deviceconsole.desinic8.repl.co/aa-offline.png" class="screenimg" preload="none" width="90%" id="myImage1">
<container id="divMsg1" style="background-color: transparent; color: #ffffff; height: auto; width: auto; text-align: center; display:none">
<center>
<div style="display:none; background-color:#4d525e; padding:5px; width:70%; border-bottom-left-radius:8px; border-bottom-right-radius:8px">
</div>
</center>
</container>
</container>
</container>
</div>
</center>
</div>
<div class="columnfbn" style="background-color:#fff">
<center>
<div style="width:70%; box-shadow:0 0 5px #bbb; padding:5px 10px 5px 10px">
<p style="font-size:0.7em; margin-left:-2px; margin-top:3px; text-align:left; color:#444; font-weight:500">
<img src="thumbtack.png" id="screen" onclick ="pinUnpin();" style="width:16px; cursor:pointer; margin-bottom:-3px" title="Pin/Unpin screen"/>
Nicole Bradley
<span style="float:right">
<input type="image" src="unlock.png" title="Release" style="float:right; width:16px; margin-right:3px" onclick="before2();">
<input type="image" src="lock.png" title="Lock" style="float:right; width:16px; margin-right:3px" onclick="afterr2();">
<input type="image" src="heart.png" title="Report self-harm" style="float:right; width:16px; margin-right:3px" onclick="reportHarm();">
</span>
</p>
<container class="mySlides AASJ"> <!-- added class as per option name -->
<img src="https://deviceconsole.desinic8.repl.co/profile-student.png" class="screenimg" preload="none" width="90%" id="myImage2">
<container id="divMsg2" style="background-color: transparent; color: #ffffff; height: auto; width: auto; text-align: center; display:none">
<center>
<div style="display:none; background-color:#4d525e; padding:5px; width:70%; border-bottom-left-radius:8px; border-bottom-right-radius:8px">
</div>
</center>
</container>
</container>
</container>
</container>
</div>
</center>
</div>
<div class="columnfbn" style="background-color:#fff; display:none">
<center>
<div style="width:70%; box-shadow:0 0 5px #bbb; padding:5px 10px 5px 10px">
<p style="font-size:0.7em; margin-left:-2px; margin-top:3px; text-align:left; color:#444; font-weight:500">Nicole Bradley
<span style="float:right">
<input type="image" src="unlock.png" title="Release" style="float:right; width:16px" onclick="before3();">
<input type="image" src="lock.png" title="Lock" style="float:right; width:16px; margin-right:3px" onclick="afterr3();">
<input type="image" src="heart.png" title="Report self-harm" style="float:right; width:16px; margin-right:3px" onclick="reportHarm();">
<image src="view (1).png" title="Report self-harm" style="float:right; width:16px; margin-right:3px">
</span>
</p>
<container class="mySlides AASJ" > <!-- added class as per option name -->
<img src="https://deviceconsole.desinic8.repl.co/profile-student.png" class="screenimg" loading="lazy" preload="none" width="90%" id="myImage3">
<container id="divMsg18" style="background-color: transparent; color: #ffffff; height: auto; width: auto; text-align: center; display:none"><center>
<div style="display:none; background-color:#4d525e; padding:5px; width:70%; border-bottom-left-radius:8px; border-bottom-right-radius:8px">
</div>
</center>
</container>
</container>
</container>
</div>
</center>
</div>
</div>
<script>
function before3(){
document.getElementById('myImage3')
.src="ezgif.com-gif-maker (3).gif";
}
function afterr3(){
document.getElementById('myImage3')
.src="https://cdn.glitch.global/c04592ae-2cb6-429b-8fc5-d83575337b4f/screen-lock.gif?v=1677871777266";
}
function deviceViewClaire() {
window.open("https://deviceconsole.desinic8.repl.co/deviceview/claire-dennis-pwa-design-and-html-css-and-javascript-period-a.html", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=0,left=0,width=1000,height=500");
}
function beforewq(){
document.getElementById('myImage3')
.src="ezgif.com-gif-maker (3).gif";
}
function afterrwq(){
document.getElementById('myImage3')
.src="location-error.png";
}
function reportHarm() {
window.open("https://deviceconsole.desinic8.repl.co/report-self-harm.html", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=0,left=0,width=1000,height=580");
}
function before2(){
document.getElementById('myImage2')
.src="catscreen.gif";
}
function afterr2(){
document.getElementById('myImage2')
.src="https://cdn.glitch.global/c04592ae-2cb6-429b-8fc5-d83575337b4f/screen-lock.gif?v=1677871777266";
}
function pinUnpin() {
var img1 = "https://deviceconsole.desinic8.repl.co/thumbtack.png",
img2 = "https://deviceconsole.desinic8.repl.co/thumbtack-active.png"; // Assigning directly to attribute.;
var imgElement = document.getElementById('screen');
imgElement.src = (imgElement.src === img1)? img2 : img1;
}
function beforesd(){
document.getElementById('myImage1')
.src="https://deviceconsole.desinic8.repl.co/aa-offline.png";
}
function afterrsd(){
document.getElementById('myImage1')
.src="https://deviceconsole.desinic8.repl.co/aa-offline.png";
}
function deviceViewAnnette() {
window.open("https://deviceconsole.desinic8.repl.co/deviceview/annette-mathis-pwa-design-and-html-css-and-javascript-period-a.html", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=0,left=0,width=1000,height=500");
}
function before1(){
document.getElementById('myImage1')
.src="https://deviceconsole.desinic8.repl.co/aa-offline.png";
}
function afterr1(){
document.getElementById('myImage1')
.src="https://deviceconsole.desinic8.repl.co/aa-offline.png";
}
function before(){
document.getElementById('myImage')
.src="https://deviceconsole.desinic8.repl.co/aa-offline.png";
}
function afterr(){
document.getElementById('myImage')
.src="https://deviceconsole.desinic8.repl.co/aa-offline.png";
}
</script>
Just let me know if I missed anything. I don’t think I did.
If you want to dynamically update page content you need to know DOM manipulation.
For the CSS solution, you would add the order property on the appropriate flex item.
Here is another simple example just in case it isn’t clear what I mean. Again, it isn’t really the correct solution to pick here.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.