Jump to content
Sign in to follow this  
starwag

Switching Divs Won't Replace Position

Recommended Posts

I am trying to switch two divs on an onclick command to a search button.  One div should replace the other entirely.  I have tried to do this two ways:

1) make Div 1 width = 0 when Div 2 width = 100%, and vice versa

2) make Div 1 display = none when Div 2  display = block, and vice versa.

My problem is that while both make Div 1 disappear when Div 2 is visible, and Div 2 disappear when Div 1 is visible, in both cases Div 2 remains stacked below the area designated for Div 1, and it should replace its position entirely.  Any suggestions why this might be doing this and/or, is there a better way to accomplish this than just changing the CSS?

I am including the JS, HTML, and CSS attending this problem.  Thanks ahead of time:

JS (from Option 2)

function getSearch() {
    document.getElementById("searchcontainer").style.display = "block";
    document.getElementById("blogcontainer").style.display = "none";
}

HTML 

<div id="rightcontainer">
<div id="searchbox">
<form>
                                <input type="text" placeholder="Search..." required>
                                <input id="cardib" type="button" value="Search" onclick="getSearch()">
</form>
</div>

<button id="down" onclick="scrollDown()" onmouseenter="Highlight1()">&#9660</button>
<button id="up" onclick="scrollUp()" onmouseenter="Highlight2()">&#9650</button>

<div id="blogcontainer" onmouseover="RollOff1()" onmouseout="RollOff2()">


<div class="postcontainer">
<div class="thumb"></div>
<div class="topblock"><div class="titleblock">Valentines and Rats</div>
<div class="moreblock">MORE ></div>
</div>
<div class="block">
<div class="date"><p>February 14, 2016</p></div>
We celebrate Valentine's Day
while I battle rats in the coop.
</div>
</div>
<div class="postcontainer">
<div class="thumb"></div>
<div class="topblock"><div class="titleblock">Valentines and Rats</div>
<div class="moreblock">MORE ></div>
</div>
<div class="block">
<div class="date"><p>February 14, 2016</p></div>
We celebrate Valentine's Day
while I battle rats in the coop.
</div>
</div>



<div class="postcontainer">
<div class="thumb"></div>
<div class="topblock"><div class="titleblock">Valentines and Rats</div>
<div class="moreblock">MORE ></div>
</div>
<div class="block">
<div class="date"><p>February 14, 2016</p></div>
We celebrate Valentine's Day
while I battle rats in the coop.
</div>
</div>



<div class="postcontainer">
<div class="thumb"></div>
<div class="topblock"><div class="titleblock">Valentines and Rats</div>
<div class="moreblock">MORE ></div>
</div>
<div class="block">
<div class="date"><p>February 14, 2016</p></div>
We celebrate Valentine's Day
while I battle rats in the coop.
</div>
</div>










<div id="searchcontainer" onmouseover="RollOff1()" onmouseout="RollOff2()">


<div class="postcontainer">
<div class="thumb"></div>
<div class="topblock"><div class="titleblock">OMG</div>
<div class="moreblock">MORE ></div>
</div>
<div class="block">
<div class="date"><p>February 14, 2016</p></div>
We celebrate Valentine's Day
while I battle rats in the coop.
</div>
</div>
<div class="postcontainer">
<div class="thumb"></div>
<div class="topblock"><div class="titleblock">OMG</div>
<div class="moreblock">MORE ></div>
</div>
<div class="block">
<div class="date"><p>February 14, 2016</p></div>
We celebrate Valentine's Day
while I battle rats in the coop.
</div>
</div>



<div class="postcontainer">
<div class="thumb"></div>
<div class="topblock"><div class="titleblock">OMG</div>
<div class="moreblock">MORE ></div>
</div>
<div class="block">
<div class="date"><p>February 14, 2016</p></div>
We celebrate Valentine's Day
while I battle rats in the coop.
</div>
</div>



<div class="postcontainer">
<div class="thumb"></div>
<div class="topblock"><div class="titleblock">OMG</div>
<div class="moreblock">MORE ></div>
</div>
<div class="block">
<div class="date"><p>February 14, 2016</p></div>
We celebrate Valentine's Day
while I battle rats in the coop.
</div>
</div>



</div>



</div>

CSS

#blogcontainer{
	width: 100%;
	height: 90%;
	float: left;
	overflow-y: hidden;
	padding: 0;
	position: static;
	float: left;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;

}

#searchcontainer{
	width: 100%;
	height: 90%;
	float: left;
	overflow-y: hidden;
	padding: 0;
	position: static;
	float: left;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;

}

#rightcontainer {
	height: 100vh;
	width: calc( 100% - 20vh - (.678*(100%-20vh)));
	position: fixed;
	overflow: hidden;
	background-color: gray;
	margin-left: calc((.678*(100%-20vh)) + 20vh);
	float: left;
	margin-right: 0;


}

 

Share this post


Link to post
Share on other sites

I just fiddled with a couple of things in your code, it works fine, except for that fact that your search container is inside your blog container. It doesn't look like there's that much formatting in your code (unless your editor and the forum doesn't play nice).

Here's a version that may work with some corrected styles too. (I just added display: none to the search container)

CSS:

#blogcontainer {
  width: 100%;
  height: 90%;
  float: left;
  overflow-y: hidden;
  padding: 0;
  position: static;
  float: left;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}

#searchcontainer {
  width: 100%;
  height: 90%;
  float: left;
  overflow-y: hidden;
  padding: 0;
  position: static;
  display: none;
  float: left;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}

#rightcontainer {
  height: 100vh;
  width: calc(100% - 20vh - (0.678 * (100%-20vh)));
  position: fixed;
  overflow: hidden;
  background-color: gray;
  margin-left: calc((0.678 * (100%-20vh)) + 20vh);
  float: left;
  margin-right: 0;
}

HTML:

<div id="rightcontainer">
  <div id="searchbox">
    <form>
      <input type="text" placeholder="Search..." required />
      <input id="cardib" type="button" value="Search" onclick="getSearch()" />
    </form>
  </div>

  <button id="down" onclick="scrollDown()" onmouseenter="Highlight1()">
    &#9660;
  </button>
  <button id="up" onclick="scrollUp()" onmouseenter="Highlight2()">
    &#9650;
  </button>

  <div id="blogcontainer" onmouseover="RollOff1()" onmouseout="RollOff2()">
    <div class="postcontainer">
      <div class="thumb"></div>
      <div class="topblock">
        <div class="titleblock">Valentines and Rats</div>
        <div class="moreblock">MORE ></div>
      </div>
      <div class="block">
        <div class="date"><p>February 14, 2016</p></div>
        We celebrate Valentine's Day while I battle rats in the coop.
      </div>
    </div>
    <div class="postcontainer">
      <div class="thumb"></div>
      <div class="topblock">
        <div class="titleblock">Valentines and Rats</div>
        <div class="moreblock">MORE ></div>
      </div>
      <div class="block">
        <div class="date"><p>February 14, 2016</p></div>
        We celebrate Valentine's Day while I battle rats in the coop.
      </div>
    </div>

    <div class="postcontainer">
      <div class="thumb"></div>
      <div class="topblock">
        <div class="titleblock">Valentines and Rats</div>
        <div class="moreblock">MORE ></div>
      </div>
      <div class="block">
        <div class="date"><p>February 14, 2016</p></div>
        We celebrate Valentine's Day while I battle rats in the coop.
      </div>
    </div>

    <div class="postcontainer">
      <div class="thumb"></div>
      <div class="topblock">
        <div class="titleblock">Valentines and Rats</div>
        <div class="moreblock">MORE ></div>
      </div>
      <div class="block">
        <div class="date"><p>February 14, 2016</p></div>
        We celebrate Valentine's Day while I battle rats in the coop.
      </div>
    </div>
  </div>
  <div id="searchcontainer" onmouseover="RollOff1()" onmouseout="RollOff2()">
    <div class="postcontainer">
      <div class="thumb"></div>
      <div class="topblock">
        <div class="titleblock">OMG</div>
        <div class="moreblock">MORE ></div>
      </div>
      <div class="block">
        <div class="date"><p>February 14, 2016</p></div>
        We celebrate Valentine's Day while I battle rats in the coop.
      </div>
    </div>
    <div class="postcontainer">
      <div class="thumb"></div>
      <div class="topblock">
        <div class="titleblock">OMG</div>
        <div class="moreblock">MORE ></div>
      </div>
      <div class="block">
        <div class="date"><p>February 14, 2016</p></div>
        We celebrate Valentine's Day while I battle rats in the coop.
      </div>
    </div>

    <div class="postcontainer">
      <div class="thumb"></div>
      <div class="topblock">
        <div class="titleblock">OMG</div>
        <div class="moreblock">MORE ></div>
      </div>
      <div class="block">
        <div class="date"><p>February 14, 2016</p></div>
        We celebrate Valentine's Day while I battle rats in the coop.
      </div>
    </div>

    <div class="postcontainer">
      <div class="thumb"></div>
      <div class="topblock">
        <div class="titleblock">OMG</div>
        <div class="moreblock">MORE ></div>
      </div>
      <div class="block">
        <div class="date"><p>February 14, 2016</p></div>
        We celebrate Valentine's Day while I battle rats in the coop.
      </div>
    </div>
  </div>
</div>

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...