Jump to content

starwag

Members
  • Posts

    6
  • Joined

  • Last visited

Everything posted by starwag

  1. 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; }
  2. Thank you so much. I think this clears everything up. Sorry it took me so long to appreciate the response. Thanks again.
  3. I won't be able to smooth scroll this though, will I? I used the example in this as a guide how to js animate but why does my setInterval create tiny increments when this example seems to allow for it to create a smooth scroll to the bottom of the page? I know what setInterval/clearInterval is supposed to do as far as what examples I have seen, but using it to time how long it takes a page to scroll to an anchor seems like something that is "off the label" use. I'm probably wrong again. The long and short of it is: Onmousedown I was trying to scroll to the bottom of the page but to time it for a slow scroll to the bottom. Eventually, I was going to add clearInterval onmouseup to pause the scroll motion. I hadn't gotten to that last bit yet, because I'm still stuck on this part. I just don't understand why my setInterval can't time how long it takes to scroll to the bottom of the page.
  4. Okay, so I've been tinkering with this concept via different methods. This is what I have, but I have problems. function scrollDown() { setInterval(function() { window.scrollTo(0, document.body.scrollHeight); }, 2000); } the page just jumps to the bottom instead of slowly scrolling to the bottom of the page. I have rearranged the functions a few times and got pretty much the same results. Now I'm confused why nothing is working.
  5. Sorry, I wasn't clear. I'll edit the original question. I really appreciate your quick response, though. What I was wanting was to pause the ScrollTo animation onmouseup. Example: when the button is onmousedown start animation towards the anchor at bottom of the div, and onmouseup pause the animation. Basically, I am trying to make a button to replace a scrollbar, so I'm trying to achieve the same behavior, where holding down on the button begins a smooth scroll that pauses when the button is released. The onmouseup should leave the div at the y location it was before it stopped, and the user should be able to start from this position to go the other y direction, if they so choose. I don't think setTimeout/setInterval would help for this, but maybe I'm wrong. I've tried to override the bottom anchor with current y-position coordinates, using Yoffset, but that did not work out so well, which is why I'm wondering if ScrollTo animation can be paused without setting a timer. Like I said, I'm assuming I can't, but I am still learning.
  6. I've been trying to create a two button system to allow viewers to scroll up and down through a list, much like they would be able to with a scrollbar. Onmousedown should implement a scrolling animation using the list's content. I was intending to use JavaScript ScrollTo, with anchors at the top and bottoms of the div, but wondered if there is any way to make this pause onmouseup before it reaches its anchor, and then reverse from its current position, so that I could accomplish this scrollbar effect. Basically, it should act just like a scrollbar, where releasing the down button will stop the animation at its current y-position and allow the user to redirect their scroll if they choose. I suspect this is not possible with ScrollTo, but does anyone know?
×
×
  • Create New...