Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Display div of linked div at top when link is clicked

    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!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    dammyg (10-30-2012)

  • #3
    New Coder
    Join Date
    Oct 2012
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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 View Post
    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>

  • #4
    New Coder
    Join Date
    Oct 2012
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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 View Post
    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>


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •