HELP:Links on one box show content in other box??

Bart of the Clown Lands
Casual Poster ⚓︎

stinker

⛺︎ My Room
SpaceHey: Friend Me!

HELP:Links on one box show content in other box??

« on: September 16, 2023 @471.35 »

Sorry if topic sounds weird, idk how to phrase it correctly...

But yeah I want to make something like text popup depending on image you clicked on the left box... Sort of slideshow? but instead of big picture you get walls of text on the right.

I actually found some tutorial but my smooth lizard brains cannot comprehend how to make it work as i want.

Current code is a mess but i will make it neater later...

Spoiler

Code

<style>
.box1{
background:#000;
color:#fceaff;
border:15px solid;
border-image:url('frame4.png') 100 round;
 border-image-width: 6;
border-image-outset: 2;
margin-left:50px;
margin-top:60px;
padding:20px;
text-align:left;
width:400px;
height:550px;
overflow:auto;
float:left
}
.box2{
background:#000;
color:#fceaff;
border:2px dotted;
margin-right:200px;
margin-top:60px;
padding:20px;
text-align:left;
width:800px;
height:550px;
overflow:auto;
float:right;
}

</style>
</head>
<body id="index">

<div class="box1">
<center>
<p style="font-family:Old English Text MT">~click on image~</p>
<a href="#1"><img src="https://fraguru.com/mdimg/perfume/375x500.1007.jpg"style="width:100px"></a>
<a href="#2"><img src="https://fraguru.com/mdimg/perfume/375x500.66048.jpg"style="width:100px"></a>
<img src="https://fraguru.com/mdimg/perfume/375x500.46885.jpg"style="width:100px">
<img src="https://fraguru.com/mdimg/perfume/375x500.21770.jpg"style="width:100px">
<img src="https://fraguru.com/mdimg/perfume/375x500.14319.jpg"style="width:100px">
<img src="https://fraguru.com/mdimg/perfume/375x500.48681.jpg"style="width:100px">
<img src="https://fraguru.com/mdimg/perfume/375x500.3972.jpg"style="width:100px">
<img src="https://fraguru.com/mdimg/perfume/375x500.18802.jpg"style="width:100px">
<img src="https://fraguru.com/mdimg/perfume/375x500.21770.jpg"style="width:100px">
<img src="https://fraguru.com/mdimg/perfume/375x500.21770.jpg"style="width:100px"><br>
</center>

</div>

<div class="box2">
This is where text will show up. Blah blah blah<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper. Porttitor lacus luctus accumsan tortor posuere ac ut consequat semper. Eu tincidunt tortor aliquam nulla. Adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna neque. Donec pretium vulputate sapien nec sagittis aliquam malesuada. Neque laoreet suspendisse interdum consectetur libero id faucibus. Magna ac placerat vestibulum lectus mauris ultrices eros in cursus. Sit amet consectetur adipiscing elit duis. Id aliquet lectus proin nibh nisl condimentum id. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in.
</div>

[close]


	Logged

TheNothingMonster
Full Member ⚓︎

Hey psst! Wanna see something spooky?

⛺︎ My Room
StatusCafe: thenothingmonster

Re: HELP:Links on one box show content in other box??

« Reply #1 on: September 16, 2023 @492.08 »

There is this super simple code snippet made by sadness that allows you to do just that, without any complexity nor Javascript. In short, whenever you click on a link referencing an id, it will show the div box marked with the id and hide the other ones. The only thing required to make this work is to set the default ids' properties to "display: none;" and "display: block;" when the ids are being targeted, somewhere in your CSS. Hope that made sense.

Not sure how to embed the snippet's link in here without showing codepen's preview, so I'll just copy + paste it.

Code

<!-- INSTRUCTIONS - PLEASE READ FIRST:

This is a pure CSS/HTML blog template designed to make it easier to manage a blog on a static website.

When adding new entries, follow the structure of the 'href' value of the links
and the 'id' value of the entries.

Please note you can link to a blog post directly with the 'href' value of the entry. If your entry is href="#1" then your link to that entry would be:
https://yoursite.neocities.org/blog.html#1
-->


<!-- These are the links to your blog entries -->
<a href="#1">Entry 01</a><br>
<a href="#2">Entry 02</a><br>
<a href="#3">Entry 03</a><br>

<!-- These are your blog entries -->
<div id="1"><p>This is the first entry.</p></div>
<div id="2"><p>This is the second entry.</p></div>
<div id="3"><p>This is the third entry.</p></div>

<!-- This is the CSS -->
<style>
[id] {
	display: none;
}
[id]:target {
  display:block;
}
</style>

Note that sadness has named this "a blogging template", but it can be more than that!

If you come against any trouble, let me know.


	Logged

~~~~~~

Bart of the Clown Lands
Casual Poster ⚓︎

stinker

⛺︎ My Room
SpaceHey: Friend Me!

Re: HELP:Links on one box show content in other box??

« Reply #2 on: September 19, 2023 @472.27 »

Yes yes i thought about this one already! The thing is when i use it, my page just turns blank

Tried it a while ago on my blog thingy, it kept turning blank and crispy as bedsheets, so i had to use this code on separated journal entries page and embed it with <iframe>...idk why is that so for me...
But thank you very much, i will try this method again, though i doubt it will work without separated page :(


	Logged

Melooon
Hero Member ⚓︎

So many stars!

⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: melon
iMood:

Itch.io: My Games

...

Re: HELP:Links on one box show content in other box??

« Reply #3 on: September 19, 2023 @507.36 »

I would personally use JavaScript for this kinda thing; its not ideal to depend on scripting for a page to function; but if its a smaller feature than sure!

Here is a JS example! (Click the names) https://codepen.io/Melonking906/pen/WNLXoyb

You can also totaly do it by making each text a seprate html page and putting them in an iframe; then using target="myframeid" on your links!


	Logged

everything lost will be recovered, when you drift into the arms of the undiscovered

Pages: [1]

« previous next »

Vaguely similar topics! (3)