8 Replies - 938 Views - Last Post: 27 March 2014 - 01:43 PM

#1 pager  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 25-March 14

Visible homepage content

Posted 25 March 2014 - 02:20 PM

Good day. I have simple html/css page. I use class .panel for change visibility page content (if link is clicked). Problem: When i click on some link, it show current link content and homepage content. Homepage content is still visible after link is clicked. If i insert homepage content into (for example)
<div id="home">  </div>
it does not show my homepage content automatically when i open web page. I created simple example here.

Html
<!DOCTYPE html>
<head>
        ....head....
</head>
    <body>            
<div class="main"> <!--Main box-->

<div id="link1" class="panel">
  <div class="hcontent">
content of link1  + homepage content / this homepage content i want to remove
</div>
    </div>

<div id="link2" class="panel">
  <div class="hcontent">
content of link2  + homepage content / this homepage content i want to remove
</div>
    </div>

<div id="link3" class="panel">
  <div class="hcontent">
content of link3  + homepage content / this homepage content i want to remove
</div>
    </div>

<div id="link4" class="panel">
  <div class="hcontent">
content of link4  + homepage content / this homepage content i want to remove
</div>
    </div>

<div id="link5" class="panel">
  <div class="hcontent">
content of link5  + homepage content / this homepage content i want to remove
</div>
    </div> 

<div class="content">
        <div class="menu">          
             <ul id="navigation">
                <li class='active'><a id="link-home" href="">Home</a></li>
                <li><a id="link-link1" href="#link1">  link1 </a></li>
                <li><a id="link-link2" href="#link2">  link2  </a> </li>  
                <li><a id="link-link3" href="#link3"> link3 </a></li>
                 <li><a id="link-link4" href="#link4"> link4   </a>   </li>
                <li><a id="link-link5" href="#link5"> link5  </a></li>

                            </ul>
     </div>
           </div>

 <div class="hcontent">  
Homepage content
        </div> 

             </div>
</body>
</html>


Css

html, body {
         ...    }
body {
          ...    }
.main {
    ...
}

.menu {
    ...
}
.content{
    left:0px;
    top: 93px;
    position:relative;
    padding-bottom: 30px;
}
.hcontent
{
    margin-top:230px;
    font-size: 25px;
color:black;    
}
#navigation a{

    color: #fff;
padding-right:25px;
    font-size: 19px;
    position:relative;
    top:15px;
    left:180px; 

}
#navigation a:hover {
    color: #000;
}
ul {
    width: 500px;
    display: table;
    table-layout: fixed;
}
ul li {
    display: table-cell;
}
.panel{
    min-width: 65%;
    overflow-y: hidden;
    overflow-x: hidden;
    position: absolute;
    margin-top:-150%;
    opacity: 0;
    -webkit-transition: opacity .6s ease-in-out;
    -moz-transition: opacity .6s ease-in-out;
    -o-transition: opacity .6s ease-in-out;
    -ms-transition: opacity .6s ease-in-out;
    transition: opacity .6s ease-in-out;
}
.panel:target{
    opacity: 1;
margin-top:0%;

    }


Is This A Good Question/Topic? 0
  • +

Replies To: Visible homepage content

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4128
  • View blog
  • Posts: 13,021
  • Joined: 08-June 10

Re: Visible homepage content

Posted 25 March 2014 - 04:57 PM

that is because your Home (page) content is not affected the least from the CSS. if you want it to play along it needs a panel class, the Home link must use an anchor and you need some JS that re-displays the Home content if there is no hash in the URL.
Was This Post Helpful? 0
  • +
  • -

#3 pager  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 25-March 14

Re: Visible homepage content

Posted 26 March 2014 - 03:37 AM

Do you think something like this?
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4128
  • View blog
  • Posts: 13,021
  • Joined: 08-June 10

Re: Visible homepage content

Posted 26 March 2014 - 04:21 AM

does it work (for your case)?
Was This Post Helpful? 0
  • +
  • -

#5 pager  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 25-March 14

Re: Visible homepage content

Posted 26 March 2014 - 01:01 PM

No i can not reselve this problem.
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4128
  • View blog
  • Posts: 13,021
  • Joined: 08-June 10

Re: Visible homepage content

Posted 26 March 2014 - 01:03 PM

but wouldn’t changing the color (via class) be the same as changing visibility (via class) ?
Was This Post Helpful? 0
  • +
  • -

#7 pager  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 25-March 14

Re: Visible homepage content

Posted 26 March 2014 - 01:58 PM

I tried this. I inserted my homepage content into
<div id="one" class="active1">
Homepage content
		</div> 


I created active1 css class

.active1 {	
margin-top:230px;
font-size: 30px;
color:black; }


and i used jquery script
<script src="jquery.js"></script>
<script>
    
	$("#link-link1").click(function(){
   $(this).removeClass("active1");

});
      </script>


and it do not work. Check it here .
Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is offline

  • lashings of ginger beer
  • member icon

Reputation: 6340
  • View blog
  • Posts: 25,572
  • Joined: 12-December 12

Re: Visible homepage content

Posted 26 March 2014 - 02:09 PM

The browser's console confirms that you haven't uploaded your jquery.js file, or it is in the wrong location.. or has the wrong name.

When you fix this your element with id 'link-link1' doesn't have a class-name of 'active1'.

This post has been edited by andrewsw: 26 March 2014 - 02:09 PM

Was This Post Helpful? 0
  • +
  • -

#9 pager  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 25-March 14

Re: Visible homepage content

Posted 27 March 2014 - 01:43 PM

I resolve it. When someone want to check it: example
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1