I have an html page (firstpage.html) divided into two parts; one split on the left and one split on the right.
I would like to add the content of a second html page (secondpage.html) on the right split, then through the appropriate div.
For example if I have the div shown below:
<div hr class="horiz">
<div class="split left">
<div class="centered">
<!-- here is the code that "fills" the left split -->
</div>
</div>
<div class="split right">
<div class="centered">
<!--Here I would like to add the entire content of the secondpage.html html page -->
</div>
</div>
Related
I want to build a page where there are two main items on the top of the page, and according to whichever is clicked the content of the page changes to that products content.
For example, I have
<div class='item1'>
<img>
</div>
<div class='item2'>
<img>
</div>
<div class='contentItem1'>
</div>
<div class='contentItem1'>
</div>
<div class='contentItem1'>
</div>
<div class='contentItem2'>
</div>
<div class='contentItem2'>
</div>
<div class='contentItem2'>
</div>
I tried to give each item a key, so that I can target it with the data-id tag, however, that does not seem to work at all, or I am doing something wrong.
Any help would be much appreciated
Edit:
I should have added more info about how the structure looks like exactly:
#foreach($items as $key => $item)
<div data-id="{{$key}}" class="mainItem item{{key}}">
<img>
</div>
#endforeach
Afterwards a several content blocks will be generated for each of the main item:
#foreach($items as $key => $item)
<div class="contentBlock{{key}}" id="contentBlock">
<p>Content</p>
</div>
<div class="contentBlock{{key}}" id="contentBlock">
<p>Content</p>
</div>
<div class="contentBlock{{key}}" id="contentBlock">
<p>Content</p>
</div>
#endforeach
I hope it makes sense. What I would like to do here, once the page is opened, only the content for item 1 is visible, however, once item2 is clicked, its content becomes visible but the item1's hides.
i have a <script> which can generates blog posts, and want to add it on separated <div> with different styles by a shortcode.
example: label,style-2
i managed to make the <script> generate the options as variables from the shortcode and output it into posts and everything.. which you can preview here : JS Fiddle
but i have one big problem, which i don't like to add the <script> on every <div>..
this is the code i want
<div id='main'>
<div class='col'>
<div class="widget HTML" data-version="1" id="HTML14">
<h2 class="title">Example 1</h2>
<div class="widget-content">
label,style-1
</div>
</div>
<div class="widget HTML" data-version="1" id="HTML15">
<h2 class="title">Example 2</h2>
<div class="widget-content">
label,style-2
</div>
</div>
</div>
</div>
<script type='text/javascript'>
//script here
</script>
i tried several times and searched but i couldn't make a code that can output the results in every div i choose based on the <div> shortcodes.
this is the json xml file i get the posts from JSON File
I have a template wit three sections one is the top navigation followed by left navigation and the content section which is the right div or element
<nav>top navs goes here </nav>
<div class="container>
<div class="row">
<div class="col-md-3" id="left-nav">
left navs goes here
</div>
<div class="col-md-9" id="content">
<!--Content goes here-->
<router-outlet></router-outlet>
</div>
</div>
The problem i am having right now is the <router-outlet></router-outlet> which is supposed to replace the HTM inside the div with an id of content doesn't do so. instead it grabs all the HTML of the same template and place it inside <div class="col-md-9" id="content">Content goes here</div>. Why duplicate the same template is this the normal behavior or there is something wrong with my implementation?
If you are changing just one part of your page one router-outlet is enough.
On the place that router-outlet is, component is injected. What component is injected is defined by your routing configuration.
Also change:
<div class="col-md-9"> id="content">
to
<div class="col-md-9" id="content">
I am using div to layout a page. The page has two columns. The first column is a map. The second column contains three rows of graphs. I used the code below. The result gives me just one column (instead of two) with four rows. What am I doing wrong?
<!-- This is where the map will live -->
<div id="map-container" style="width:1000px; height:500px"></div>
<!-- CHARTS!!! -->
<div class="row">
<!-- row chart -->
<div class="col-md-1">
<div id="rowchart2" class="dc-chart"></div>
<center><div class="title">Severity</div></center>
</div>
<!-- Histogram-->
<div class="col-md-2 col-md-offset-1">
<div id="rowchart" class="dc-chart"></div>
<center><div class="title">Histogram(Delta Speed)</div></center>
</div>
<!-- row chart -->
<div class="col-md-4 col-md-offset-0">
<div id="rowchart3" class="dc-chart"></div>
<center><div class="title">Direction</div></center>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
Column 1:
<div id="map-container" class="col-md-12" style="width:100%; height:500px"></div>
</div>
<div class="col-md-6">
OTHER DATA HERE
</div>
</div>
</div>
Assuming you're using Bootstrap here, you need to layout your two columns within a single row so that they will sit side by side. For example, if you want to have two columns that are equal widths, you could use:
<div class="row">
<div class="col-md-6">
<!-- Map Here -->
</div>
<div class=col-md-6">
<div>Chart 1</div>
<div>Chart 2</div>
<div>Chart 3</div>
</div>
</div>
There are always 12 columns in a row, so using "col-md-6" for each column results in two equally sized columns.
Within the second column, you could nest more rows and columns to give you more control:
<div class="row">
<div class="col-md-6">
<!-- Map Here -->
</div>
<div class=col-md-6">
<div class="row">
<div class="col-md-12">Big Chart 1</div>
</div>
<div class="row">
<div class="col-md-6">Small Chart 2</div>
<div class="col-md-6">Small Chart 3</div>
</div>
</div>
</div>
For an example layout, here's a JSFiddle: http://jsfiddle.net/q3vdex96/2/
In your example, you're setting the map to have a width of 1000px. You shouldn't set an explicit width in this way - let Bootstrap handle the sizing using its grid system. Bootstrap's responsive CSS means your charts and map will collapse into a single column on a small screen, and will automatically expand into the correct layout as the screen size increases.
You aren't showing your CSS so part of what I say is just a wild guess.
First, the center element is obsolete. Don't use that.
Second, div elements are block level and will extend the entire width of the page by default. This is why you only get one column but, as I said, without a link or a jsfiddle with the complete markup, it's all a guess.
I have a standard webpage, headers, sub headers and blocks of text, repeated down the page.
Occasionally this page will be printed directly from the browser.
Obviously the web page needs to be split up to fit on however many pages are required.
The issue I'm having is, some of my sub headers are being left at the bottom of one page and the
text is pushed down onto the next page.
Ideally, I would like the sub headers to 'follow' the text.
Anyone have any suggestions?
Is this even an issue that can be addressed?
Using JavaScript or jQuery or some magic CSS3 perhaps?
<div id="mainContent">
<div class="header"></div>
<div class="subHeader"></div>
<div class="text">
//LOTS OF TEXT
</div>
<div class="subHeader"></div>
<div class="text">
//LOTS OF TEXT
</div>
<div class="subHeader"></div>
<div class="text">
//LOTS OF TEXT
</div>
<div class="header"></div>
<div class="subHeader"></div>
<div class="text">
//LOTS OF TEXT
</div>
<div class="header"></div>
<div class="subHeader"></div>
<div class="text">
//LOTS OF TEXT
</div>
<div class="subHeader"></div>
<div class="text">
//LOTS OF TEXT
</div>
<div class="subHeader"></div>
<div class="text">
//LOTS OF TEXT
</div>
<div class="subHeader"></div>
<div class="text">
//LOTS OF TEXT
</div>
<div class="header"></div>
<div class="subHeader"></div>
<div class="text">
//LOTS OF TEXT
</div>
</div>
Cheers!
Ideally you need to use a print stylesheet. This will let you change the CSS specifically for print.
There are various print specific CSS rules but you'd have to try them on a variety of browsers.
For example: page-break-after allows you to insert a page break after the element use use it on
http://www.w3schools.com/cssref/pr_print_pageba.asp