I have a website that is already structured a certain way. It looks like this roughly, but with many more rows. These rows are generated based on how much information is pulled from a database.
The code looks somewhat like this,
<html>
<body>
<div class='master'>
<div class='dates'>
<!-- Left side of first internal div -->
<div class='ResourceHeader'>
<p>Resource</p>
</div>
<!-- Right side of first internal div -->
<div class='DatesHeader'>
<div class='dates'>
<p>Date1</p>
</div>
<!-- Insert more dates -->
</div>
</div>
<div class='secondRow'>
<!-- Left side of second row -->
<div class='Resource1'>
<p>P1</p>
</div>
<!-- Right side of second row -->
<div class='date1'>
<p>D1</p>
<!-- Insert more dates -->
</div>
</div>
<div class='thirdRow'>
<!-- Left side of third row -->
<div class='Resource2'>
<p>P2</p>
</div>
<!-- Right side of third row -->
<div class='date1'>
<p>D1</p>
<!-- Insert more dates -->
</div>
</div>
</div>
</body>
I want the website to be structured like this,
I just want to surround the elements in different divs because the div on the right will scroll to the right if more content(dates) are added while the div on the left stays still.
Is there a way to achieve this using anything? Or would I have to go back and change how my website is being rendered after the info is being pulled from the database.
Or can I just assign the divs with the Date1, Date2, ... and D1, D2, ... with a class and just have those divs with the certain class move?
Related
I have a neat HTML page to output this as a PDF. The HTML page appears in the browser as it should
But when I do window.print() this structure looks broken
My HTML codes are like this
<div class="main"> <!-- PDF Page 1 --> </div>
<div class="pagebreak"></div>
<div class="main"> <!-- PDF Page 2 --> </div>
<div class="pagebreak"></div>
<!-- more ... -->
I spent all day trying to solve this problem. However, I couldn't figure out what was causing it. The red boxes in the corners of the PDF pages have the property position: absolute;. The part that overflows from the page is the rest of these pieces. How can I prevent this?
You did not provide enough information like the CSS on the parent element but I think your problem here is the dimensions. You should try by fixing the parent element to take the whole width and height of the viewport.
Maybe like this :
<div class="main" style="height:100vh;"> <!-- PDF Page 1 --> </div>
<div class="pagebreak"></div>
<div class="main" style="height:100vh;"> <!-- PDF Page 2 --> </div>
<div class="pagebreak"></div>
<!-- more ... -->
How can I drag an object between two bootstrap columns, with Interact.JS?
See http://codepen.io/drumiriades/pen/dGrygg.
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="boardLeft">
<p>Left</p>
<div class="draggable">
<p id="drag-1"> dragg me</p>
</div>
</div>
</div>
<div class="col-md-8">
<div class="boardRight">
<p>Right</p>
</div>
</div>
</div><!--/ row-->
</div> <!--/ container-->
</body>
I have an object with ID=drag-1 that is draggable on the left column (Class= boardLeft) but I can't drag it to the right column (Class= boardRight). How can I drag it to the right column?
z-index of the .draggable object must be 1 or greater to see the .draggable object on top of the right container.
Additionally, your restrict option is set to restrict the .draggable component to its parent container only. Removing this option allows you to drag it into the right container.
On top of these couple things - you're referencing elements in your JavaScript that don't exist in your layout (#grid-snap, .dropzone, and #yes-drop)
I've updated the CodePen with the elements that do exist, and now it shows that the item is dropped into the right container... but it changes the content. Not sure if that's what you wanted, but that's what your JavaScript is doing.
http://codepen.io/anon/pen/yewLdb
I'm using the following code with bootstrap to create a banner directly on top of my page. Problem is, the image is at the the very left corner of my page. As soon as I delete the id='banner' flag, the image starts at the correct point just like the rest of my page. Is it because it's not treated as an bootstrap-span-element anymore? I'm sure there is an easy solution. Thanks for help.
<body>
<div class="container" id="banner">
<div class="row">
<!--span>fdsssssssssssssssssssss</span-->
<img src="images/fcrlogo.png" max-width="100%" max-height="100%" class="span1">
<!-- h1> Your banner </h1 -->
</div>
</div>
I'm currently making a website for a university project where I'm using a piece of Javascript ( http://buildinternet.com/project/supersized/ ) in order to generate a background that is a gallery of several images.
I'm trying to set the site so that it will display a single image as the background in the event of Javascript being turned off, but the navigation elements of this slideshow are generated using HTML code outside of the script tags and inside the body tag.
Is there a way I can set this HTML code so that it will only be included when Javascript is active, leaving the screen clear of the navigation controls when it isn't?
At request the code I'm trying to isolate is the Div tags being called below.
<!--Thumbnail Navigation-->
<div id="prevthumb"></div>
<div id="nextthumb"></div>
<!--Arrow Navigation-->
<!-- <a id="prevslide" class="load-item"></a>
<a id="nextslide" class="load-item"></a>
<div id="thumb-tray" class="load-item">
<div id="thumb-back"></div>
<div id="thumb-forward"></div>
</div>
<!--Time Bar-->
<!--<div id="progress-back" class="load-item">
<div id="progress-bar"></div>
</div>
<!--Control Bar-->
<div id="controls-wrapper" class="load-item">
<div id="controls">
<a id="play-button"><img id="pauseplay" src="img/pause.png"/></a>
<!--Slide counter-->
<div id="slidecounter">
<span class="slidenumber"></span> / <span class="totalslides"></span>
</div>
<!--Slide captions displayed here-->
<div id="slidecaption"></div>
<!--Thumb Tray button-->
<a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png"/></a>
<!--Navigation-->
<ul id="slide-list"></ul>
</div>
</div>
Like #jumpingcode mentioned, you would want to hide the controls in question with CSS, and show them with JavaScript.
Hide the div with CSS:
#controls-wrapper {
display:none;
}
Then show it in your page with jQuery:
$('#controls-wrapper').show();
Or use .css() to have more control over what type of display property to use:
$('#controls-wrapper').css('display', 'block');
I have something like this
I have these in a row-fluid with span6. However, I when I do span5 on both of them, they float off the left side, leaving a lot of white space on right free. Can I center them on page ?
Because .offset classes don't work in Bootstrap v2.0.4, you can use .span1 classes to create empty space on left and on right side around those two elements. Like this:
<div class="row-fluid">
<div class="span1">
<!-- empty -->
</div>
<div class="span5">
<!-- content of left element (tree map) -->
</div>
<div class="span5">
<!-- content of right element (datatables) -->
</div>
<div class="span1">
<!-- empty -->
</div>
</div>