Display div of linked div at top when link is clicked

dammyg · 10-30-2012, 03:02 AM

Hi, this is a bit complicated, so I will try and explain it.
Firstly, this is a HTML/CSS code being generated from a JavaScript file. Because my JavaScript is quite limited, and because I have already completed a lot of functions there are probably other better ways of achieving what I want, but considering I don't want to completely change my code, if possible please provide a solution closest to what I am asking for. Thank you.

Problem:

I have multiple div boxes in the exact some position.(As if frames of a TV)
Different div boxes are displayed depending on the z-index value.(If there are any other ways of achieving this please let me know)
In the div boxes are in page links that go to that part of the page.(However, the z-index value still does not change

)
I want the div of the link being clicked to be shown on top when clicked.

If anyone can think of a solution, please let me know.

As a test, I created the following, hopefully it can give you an idea of what I am interested in making. When I tested this, the main issues are that I need to always get the clicked element on top(having zIndex 1000 brings everything to the same zIndex.) I want to achieve this from an anchor tag, but I need to efficiently get the target div.

var testandroid = testandroid + "<div onClick=\"document.getElementById('mobileimage" + i + "').style.zIndex='1000'\">CLICK ME</div>";

Thank you!

Excavator · 10-30-2012, 04:18 AM

Hello dammyg,
I worked this up a couple years ago. It uses anchors to load the different boxes.
Maybe you can use it?

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS only content switcher</title>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style type="text/css">
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
/* HTML5 tags */
		header, section, footer,  aside, nav, article, figure { display: block; }
#container {
	width: 740px;
	margin: 30px auto;
	padding: 0 30px 300px;
	overflow: auto;
	background: #999;
}
#switcher {
	height: 300px;
	width: 650px;
	margin: 30px auto;
	overflow: hidden;
	border: solid 1px #666;
}
#content {
	height: 317px;
	margin: 0;
	padding: 0;
	overflow: scroll;
	overflow-y: hidden;
	list-style: none;
}
#content li {
	line-height: 300px;
	width: 650px;
	background: #ccc;
	color: #666;
	font-size: 20em;
	font-style: italic;
	text-align: center;
}
#nav {
	margin: 20px 45px 0 0;
	float: right;
	list-style: none;
}
#nav li {
	line-height: 30px;
	width: 30px;
	margin: 0 0 0 5px;
	float: left;
	text-align: center;
	border: solid 1px #ccc;
	font-family: Arial, Helvetica, sans-serif;
}
#nav li a, #nav li a:link, 
#nav li a:visited {
	height: 30px;
	display: block;
	text-decoration: none;
	color: #666;
}
#nav li a.selected, #nav li a.selected:link, 
#nav li a.selected:visited, #nav li a:hover, 
#nav li a:focus, #nav li a:active {
	background: #666;
	color: #fff;
}
</style>
</head>
<body>
    <div id="container">	
        <div id="switcher">
            <ul id="content">
                <li id="one">1</li>
                <li id="two">2</li>
                <li id="three">3</li>
                <li id="four">4</li>	
                <li id="five">5</li>
            </ul>
        <!--end switcher--></div>	
        <ul id="nav">
            <li><a href="#one">1</a></li>
            <li><a href="#two">2</a></li>
            <li><a href="#three">3</a></li>
            <li><a href="#four">4</a></li>
            <li><a href="#five">5</a></li>
        </ul>
    <!--end container--></div>
</body>
</html>

dammyg · 10-30-2012, 06:04 AM

Hi, this is great. It is exactly the function I am looking for.
To be honest, I have a lot of trouble understanding CSS so I am always trying to use JavaScript instead. What exactly changes the block to be displayed on top here, as I see no z index in the code?

Quote:

Originally Posted by Excavator

Hello dammyg,
I worked this up a couple years ago. It uses anchors to load the different boxes.
Maybe you can use it?

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS only content switcher</title>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style type="text/css">
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
/* HTML5 tags */
		header, section, footer,  aside, nav, article, figure { display: block; }
#container {
	width: 740px;
	margin: 30px auto;
	padding: 0 30px 300px;
	overflow: auto;
	background: #999;
}
#switcher {
	height: 300px;
	width: 650px;
	margin: 30px auto;
	overflow: hidden;
	border: solid 1px #666;
}
#content {
	height: 317px;
	margin: 0;
	padding: 0;
	overflow: scroll;
	overflow-y: hidden;
	list-style: none;
}
#content li {
	line-height: 300px;
	width: 650px;
	background: #ccc;
	color: #666;
	font-size: 20em;
	font-style: italic;
	text-align: center;
}
#nav {
	margin: 20px 45px 0 0;
	float: right;
	list-style: none;
}
#nav li {
	line-height: 30px;
	width: 30px;
	margin: 0 0 0 5px;
	float: left;
	text-align: center;
	border: solid 1px #ccc;
	font-family: Arial, Helvetica, sans-serif;
}
#nav li a, #nav li a:link, 
#nav li a:visited {
	height: 30px;
	display: block;
	text-decoration: none;
	color: #666;
}
#nav li a.selected, #nav li a.selected:link, 
#nav li a.selected:visited, #nav li a:hover, 
#nav li a:focus, #nav li a:active {
	background: #666;
	color: #fff;
}
</style>
</head>
<body>
    <div id="container">	
        <div id="switcher">
            <ul id="content">
                <li id="one">1</li>
                <li id="two">2</li>
                <li id="three">3</li>
                <li id="four">4</li>	
                <li id="five">5</li>
            </ul>
        <!--end switcher--></div>	
        <ul id="nav">
            <li><a href="#one">1</a></li>
            <li><a href="#two">2</a></li>
            <li><a href="#three">3</a></li>
            <li><a href="#four">4</a></li>
            <li><a href="#five">5</a></li>
        </ul>
    <!--end container--></div>
</body>
</html>

dammyg · 10-30-2012, 06:25 AM

Don't worry about it, I understand it now. I need study CSS more

It's an interesting work around. My system is a little different, but I might be able to use this principle. Thanks a lot.

Quote:

Originally Posted by Excavator

Hello dammyg,
I worked this up a couple years ago. It uses anchors to load the different boxes.
Maybe you can use it?

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS only content switcher</title>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style type="text/css">
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
/* HTML5 tags */
		header, section, footer,  aside, nav, article, figure { display: block; }
#container {
	width: 740px;
	margin: 30px auto;
	padding: 0 30px 300px;
	overflow: auto;
	background: #999;
}
#switcher {
	height: 300px;
	width: 650px;
	margin: 30px auto;
	overflow: hidden;
	border: solid 1px #666;
}
#content {
	height: 317px;
	margin: 0;
	padding: 0;
	overflow: scroll;
	overflow-y: hidden;
	list-style: none;
}
#content li {
	line-height: 300px;
	width: 650px;
	background: #ccc;
	color: #666;
	font-size: 20em;
	font-style: italic;
	text-align: center;
}
#nav {
	margin: 20px 45px 0 0;
	float: right;
	list-style: none;
}
#nav li {
	line-height: 30px;
	width: 30px;
	margin: 0 0 0 5px;
	float: left;
	text-align: center;
	border: solid 1px #ccc;
	font-family: Arial, Helvetica, sans-serif;
}
#nav li a, #nav li a:link, 
#nav li a:visited {
	height: 30px;
	display: block;
	text-decoration: none;
	color: #666;
}
#nav li a.selected, #nav li a.selected:link, 
#nav li a.selected:visited, #nav li a:hover, 
#nav li a:focus, #nav li a:active {
	background: #666;
	color: #fff;
}
</style>
</head>
<body>
    <div id="container">	
        <div id="switcher">
            <ul id="content">
                <li id="one">1</li>
                <li id="two">2</li>
                <li id="three">3</li>
                <li id="four">4</li>	
                <li id="five">5</li>
            </ul>
        <!--end switcher--></div>	
        <ul id="nav">
            <li><a href="#one">1</a></li>
            <li><a href="#two">2</a></li>
            <li><a href="#three">3</a></li>
            <li><a href="#four">4</a></li>
            <li><a href="#five">5</a></li>
        </ul>
    <!--end container--></div>
</body>
</html>