I have a list loading with AngualarJS ng repeat. List contains images and title, like that. This is the code for the list.
<div class="row">
<div ng-repeat="data in allStars">
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a style="color: black" class="thumbnail" href="#/star/{{data.psid}}">
<img class="img-responsive" src="lib/{{data.imagepath}}"
alt="">
<div class="row thumbEffect">
<div class="col-lg-12">
{{data.psname}}
</div>
<div class="col-lg-12">
Views : {{data.views}}
</div>
<div class="col-lg-12">
Scenes : {{data.scenes}}
</div>
</div>
</a>
</div>
</div>
</div>
This is loading nicely in desktop versions. But in mobile versions, when the title is too long, it comes to two lines and so the image below that getting a big space. But I want to make it look as following image. When title getting long, other side images also getting same height. (There are two images in my site too in mobile view).
How can I do this ? With CSS and Javascript ?
Inside row two individual div how can one right hand side dive fixed when scrolling page then fixed and when come footer area then up this fixed div.
This is my code example below:
I want col-md-4 class fixed when come footer content then up.
<div class="container">
<div class="row">
<div class="col-md-8">
</div>
<div class="col-md-4">
</div>
</div>
</div>
Demo- http://jsfiddle.net/3RkM3/41/
Layout-
<div class="row">
<div class="col-xs-8 content">Content</div>
<div class="col-xs-3 col-xs-offset-1">
<div class="fixed col-xs-4">
Something
</div>
</div>
</div>
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'm using a one page scrolling plugin (http://www.thepetedesign.com/demos/onepage_scroll_demo.html) to be more precise.
I've noticed that many one page scrolling tutorials & plugins use sections. I'm having some issues targeting the sections. What I'm trying to do is add simple navigation to the plugin so that users know what page they are on.
I thought the code would be rather simple just using
if ($(".page1").hasClass("active")) {
console.log("page one active");
}
But this doesn't seem to work. Is there something I'm missing regarding targeting sections with jQuery? All I need to figure out is how to correctly target the section then I can add classes to my navigation tab.
EDIT
<div class="main">
<section class="page1" id="pageone">
<div class="content col-xs-offset-2 col-xs-10 col-sm-offset-2 col-sm-10 col-lg-offset-2 col-lg-10">
<div class="content-inner">
<h1>FIRST<br>PAGE<br></h1>
</div>
</div>
</section>
<section class="page2">
<div class="content col-xs-offset-2 col-xs-10 col-sm-offset-2 col-sm-10 col-lg-offset-2 col-lg-10">
<div class="content-inner">
<h1>SECOND <br> PAGE <br> YO!</h1>
</div>
</div>
</section>
</div>
I am creating a menu for mobile devices and am trying to use Bootstrap 3's collapse feature.
I already have a collapse working on a different page, so I copied over the structure, gave the panel group a different id, and changed the 'data-parent's and 'panel-collapse' ids appropriately. However, this new accordion just does not work. The 'in' class does not get applied to the target .panel-collapse div, and the hrefs (ex: #navCollapse(x) ) are appearing in the address bar, instead of the normal functionality.
Here is the problematic code. (trimmed to 2 panels for brevity. Still not working as is)
<div class='panel-group' id='accordionNav' >
<div class='panel'>
<div class='panel-heading'>
<a data-parent='#accordionNav' data-toggle='collapse' href="#navCollapse1"> <h3>About</h3></a>
</div>
<div class='panel-collapse collapse in' id='navCollapse1'>
<div class='panel-body'>
<p>Test test ets ejkfbduskfgsalf jydasl</p>
</div>
</div>
</div>
<div class='panel'>
<div class='panel-heading'>
<a data-parent='#accordionNav' data-toggle='collapse' href="#navCollapse2"><h3>Donors</h3></a>
</div>
<div class='panel-collapse collapse' id='navCollapse2'>
<div class='panel-body'>
<p>Test test ets ejkfbduskfgsalf jydasl</p>
</div>
</div>
</div>
</div>