Jake Ols
Reputation: 2852
Hiding div javascript
I currently have two divs on my page, one called results, one called portfolio on my site. I have some javascript that toggles between the two. Currently, the portfolio div loads, but I would like to switch the order. At first, this appeared to be very simple, I would just switch the
<div style="display:none">
to the results section, however this throws off my page. Here's all the html markup.
<script type="text/javascript">
function swap(one, two) {
document.getElementById(one).style.display = 'block';
document.getElementById(two).style.display = 'none';
}
</script>
<span id="two">
<header class="title one">Portfolio</header>
<div class="spacer"></div>
<div class="title two"><?php echo fuel_var('body', 'This is a default layout. To change this layout go to the fuel/application/views/_layouts/main.php file.'); ?></div>
<section class="featured-slider">
<div id="ca-container" class="ca-container">
<div class="nav-featured">
<div class="prev-featured"></div>
<div class="next-featured"></div>
</div>
<div class="main-carousel hideme dontHide">
<div class="ca-wrapper portfolio_wrapper">
<div class="ca-item ca-item-1">
<div class="f-single">
<a data-gal="prettyPhoto[gallery1]" href="<?php echo base_url()?>assets/images/screenshots/AW_Portfolio_ARDL.png">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/Clevelandmetroparks2.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>ARDL</div>
<div class="clear"></div>
<div>Database Screenshot</div>
</div>
</div>
<div class="f-info">ARDL</div>
</a>
</div>
</div>
<div class="ca-item ca-item-2">
<div class="f-single">
<a data-gal="prettyPhoto[gallery1]" href="<?php echo base_url()?>assets/images/screenshots/AW_Portfolio_Polymerics.png">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/Archive/Polymerics" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>Polymerics</div>
<div class="clear"></div>
<div>Database Screenshot</div>
</div>
</div>
<div class="f-info">Polymerics</div>
</a>
</div>
</div>
<div class="ca-item ca-item-3">
<div class="f-single">
<a data-gal="prettyPhoto[gallery1]" href="<?php echo base_url()?>assets/images/screenshots/AW_Portfolio_Raune.png">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/Archive/Ru.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>Ruane Attorneys</div>
<div class="clear"></div>
<div>Database Screenshot</div>
</div>
</div>
<div class="f-info">Ruane Attorneys</div>
</a>
</div>
</div>
<!--
<div class="ca-item ca-item-4">
<div class="f-single">
<a data-gal="prettyPhoto[gallery1]" href="img/screenshots/AW_results_connecticut.png">
<div class="f-image">
<img src="img/featured/feat-04.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>Connecticut Public Defenders</div>
<div class="clear"></div>
<div>Database Screenshot</div>
</div>
</div>
<div class="f-info">Connecticut Public Defenders</div>
</a>
</div>
</div>
-->
<div class="ca-item ca-item-5">
<div class="f-single">
<a data-gal="prettyPhoto[gallery1]" href="<?php echo base_url()?>images/screenshots/AW_results_ clevMetroparks.png">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/Archive/Clevelandmetroparks.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>Cleveland Metroparks</div>
<div class="clear"></div>
<div>Database Screenshot</div>
</div>
</div>
<div class="f-info">Cleveland Metroparks</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<div>
</div>
</span>
<div style="display:none" id="one">
<header class="title one">Results</header>
<div class="spacer"></div><br><br>
<section class="featured-slider">
<div id="ca-container" class="ca-container">
<div class="main-carousel hideme dontHide">
<div class="ca-wrapper results_wrapper">
<div class="ca-item ca-item-1">
<div class="f-single_two">
<a href="https://vimeo.com/84619379" class="mfp-iframe" title="My YouTube Video">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/reslults_shit/cle2.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>Cleveland Metroparks</div>
<div class="clear"></div>
<div>Database Video</div>
</div>
</div>
<div class="f-info">Cleveland Metroparks</div>
</a>
</div>
</div>
<div class="ca-item ca-item-2">
<div class="f-single_two">
<a href="http://vimeo.com/84619331" class="mfp-iframe" title="My YouTube Video">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/reslults_shit/connecticut2.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>Connecticut Public Defenders</div>
<div class="clear"></div>
<div>Database Video</div>
</div>
</div>
<div class="f-info">Connecticut Public Defenders</div>
</a>
</div>
</div>
<div class="ca-item ca-item-3">
<div class="f-single_two">
<a data-gal="prettyPhoto[gallery1]" href="<?php echo base_url()?>assets/images/Screenshots/AW_Portfolio_ARDL.png">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/reslults_shit/ardl2.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>ARDL</div>
<div class="clear"></div>
<div>Database Screenshot</div>
</div>
</div>
<div class="f-info">ARDL</div>
</a>
</div>
</div>
</article>
Upvotes: 0
Views: 208
Answers (3)
Marlo C
Reputation: 617
if you're familiar with jQuery, there's a much easier way to do it.
$('#divName').hide();
$('#divName').show();
Put those inside your toggle/swap function.
P.S.: You prepend it with a '#' if you are using id (i.e.: div id="divName"), if you are using class you prepend it with a '.' You can also use $('#divName').css('display', 'none') and $('#divName').css('display', 'block').
Upvotes: 3
Jake Ols
Reputation: 2852
I found a solution: I figured something was coming up when it displayed it as a block, so I changed my javascript to this:
<script type="text/javascript">
function swap(one, two) {
document.getElementById(one).style.height = '100%';
document.getElementById(one).style.width = '100%';
document.getElementById(two).style.height = '0';
document.getElementById(two).style.width = '0';
}
</script>
Hope this helps anyone else.
Upvotes: 0
416E64726577
Reputation: 2214
The following JavaScript should work:
<script>
function swap(one, two) {
document.getElementById(one).style.display = 'block';
document.getElementById(two).style.display = 'none';
}
</script>
<div id="first" style="display:none"><p>One</p></div>
<div id="second"><p>Two</p></div>
<button onclick="swap('first','second')">Swap</button>
Upvotes: 1