Develop Reference

CSS truncate strings past two lines

I have an item "gallery" with the name of the item above the image. I am loading all information from an xml file so I need the strings to be modified dynamically at two lines adding "..." to the end of the strings that are too long. is there a way to do this? I'd prefer an answer in JS but any language will do.
here is the code for the gallery portion of the page.
<?php
$GO = $game->gameobjects;
$sets = $GO->sets;
foreach($sets->set as $set) {
echo" <h3>$set->name</h3>\n";
echo" <div class=\"gallery\">\n";
$objects = $set->objects;
foreach($objects->object as $object) {
$url = genurl("$base->name" . "." . $object->img, "png");
$name = trimtext($object->name, 20);
echo" <div class=\"item\">
<div class=\"item-name\" title=\"$name[title]\">
$name[name]
</div>
<img src=\"$url\" class=\"item-img\"/>
</div>\n";
}
echo" </div>\n";
}
?>
I was hoping by truncating the text at a certain string length would work but 20 characters could still span 3 lines or more and I want two lines max.

.text-limiter {
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
width:400px;
}
<div class="text-limiter">
Lorem ipsum dolor sit amet nunc.<br>Sed nonummy gravida. In eros diam sed urna. Nunc at ipsum. Vestibulum ante ipsum orci, id leo ac risus. Sed sed lacus. Curabitur arcu vitae ante. Lorem ipsum feugiat est, at magna. Vestibulum ante ipsum nibh, volutpat massa dui eget enim. Mauris lobortis eu, rhoncus purus, congue eleifend. Nulla dolor dictum accumsan lorem. Vestibulum convallis cursus a, mattis sem. In cursus dignissim erat a neque mauris, interdum malesuada. Donec sit amet, libero. Donec nec adipiscing elit. Curabitur ultrices velit nulla a mi. Cras nec pede. Pellentesque placerat. Curabitur et turpis. Cras ipsum sed neque. Phasellus hendrerit magna iaculis odio, a mi. Fusce convallis eu, auctor tortor id purus est, at sapien. Etiam varius nec, mattis a, convallis tellus. In hac habitasse platea dictumst. Aenean augue egestas dignissim, libero at turpis. Duis aliquam, purus lacinia neque. Nunc leo. Curabitur scelerisque mauris vitae odio condimentum ac, cursus wisi, posuere cubilia Curae, Donec pulvinar gravida, eros eros sed justo ac nunc iaculis at, molestie aliquam. In nec ligula placerat quam. Phasellus posuere cubilia Curae, Quisque rutrum, urna.
</div>

You can use css
.item-name{
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
...or cut in php (if you know how many symbols must be)
function my_crop($text, $length)
{
if ($length <= 0 || strlen($text) <= $length)
return $text;
$out = mb_substr($text, 0, $length);
$pos = mb_strrpos($out, ' ');
if ($pos)
$out = mb_substr($out, 0, $pos);
return $out.' …';
}
and use my_crop($name[name], 20) within $name[name]
..or look, what you have in array $name, cause string
$name = trimtext($object->name, 20);
looks like already trimming something

Maybe you can try this approach.
Instead of truncating the text, just hidde it. Create a wrapper with a max-height, this measure should be number of desired lines * 1 line height.
Note that this is responsive and cross-browser.

Here's a Javascript example for you. You need to set the max-height and overflow of the div though. In my snippet there are two ways to do it. With id or by class (for multiple elements).
function lastLineEllipsWithId(id) {
var el = document.getElementById(id);
var wordArray = el.innerHTML.split(' ');
while (el.scrollHeight > el.offsetHeight) {
wordArray.pop();
el.innerHTML = wordArray.join(' ') + '...';
}
}
function lastLineEllipsWithClass(elementClass) {
var elements = document.getElementsByClassName(elementClass);
for (var i = 0; i < elements.length; i++) {
var wordArray = elements[i].innerHTML.split(' ');
while (elements[i].scrollHeight > elements[i].offsetHeight) {
wordArray.pop();
elements[i].innerHTML = wordArray.join(' ') + '...';
}
}
}
lastLineEllipsWithId('box');
lastLineEllipsWithClass('box');
#box {
height: 40px;
overflow: hidden;
padding: 5px;
border: 1px solid black;
margin: 10px;
}
.box {
height: 40px;
overflow: hidden;
padding: 5px;
border: 1px solid black;
margin: 10px;
}
.box2 {
height: 70px;
width: 300px;
overflow: hidden;
}
<div id="box">
<b>ID BOX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="box">
<b>CLASS BOX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="box box2">
<b>CLASS BOX</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
This works also with set width etc (as seen in the last example). Overall when the div is overflowing it will ellipsis the last line that is visible.

Can I set a column break in a CSS multicolumn layout?

I have a big paragraph of text flowing into a CSS multicolumn layout stretching, say, two, three, or four columns using CSS hyphening. At some point, one of the column's text needs to be ended earlier in order to allow the rest of the paragraph to start at the top of the second column.
Is there any way we can simply set a <column-break> to start the rest of the text at the top of the next column?
Currently I'm stuffing the column (that needs the column-break) with a lot of <br>s to lengthen the column in HTML in order to achieve the effect.
Furthermore, whenever something is changed in either of the columns, the amount of <br> stuffing falls short and needs to be reassessed.
#multicolumn{
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
<div id="multicolumn">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
<br>
<br>
<br>
<br>
SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>
See my JSFiddle.
Is there any way to "end" the first column elegantly and tell the browser to start the rest of the content in the next columns?

5. Column breaks
When content is laid out in multiple columns, the user agent must
determine where column breaks are placed. The problem of breaking
content into columns is similar to breaking content into pages.
Three new properties are introduced to allow column breaks to be
described in the same properties as page breaks: ‘break-before’,
‘break-after’, and ‘break-inside’. These properties take the
same values as ‘page-break-before’, ‘page-break-after’, and
‘page-break-inside’ [CSS21]. In addition, some new keyword
values are added.
These properties describe page/column break behavior
before/after/inside the generated box. These values are normatively
defined in [CSS21]:
auto: Neither force nor forbid a page/column break before (after, inside) the generated box.
always: Always force a page break before (after) the generated box.
avoid: Avoid a page/column break before (after, inside) the generated box.
left: Force one or two page breaks before (after) the generated box so that the next page is formatted as a left page.
right: Force one or two page breaks before (after) the generated box so that the next page is formatted as a right page.
This specification adds the following new values:
page: Always force a page break before (after) the generated box.
column: Always force a column break before (after) the generated box.
avoid-page: Avoid a page break before (after, inside) the generated box.
avoid-column: Avoid a column break before (after, inside) the generated box.
Therefore, you could use something like
#multicolumn {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
.column {
break-before: column;
break-after: column;
}
<div id="multicolumn">
<div class="column">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="column">SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>
</div>
However, only Internet Explorer 10+ and Opera 11.10-12.1 seem to support those properties.

One way to tackle this would be to actually wrap your text in paragraphs (p tags), as you should do for semantics as well, and not allow your 2nd paragraph to break, given it is never longer then 1 column.
This can be achieved by using the break-inside CSS property.
https://developer.mozilla.org/en/docs/Web/CSS/break-inside
Code example based on your snippet:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 700);
#multicolumn {
-webkit-column-count: 2;
/* Chrome, Safari, Opera */
-moz-column-count: 2;
/* Firefox */
column-count: 2;
}
p {
font-size: 1em;
line-height: 1.4;
margin: 0;
padding: 0 0 1.4em;
}
p:nth-of-type(2) {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
<div id="multicolumn">
<p>FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p>
<p>SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</div>

Use the <p> tags to distinguish between paragraphs.
<div id="multicolumn">
<p>FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam.</p>
<div id="filler"></div>
<p>SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor
cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
placerat facer possim assum.</p>
</div>
And the CSS
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
#multicolumn{
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
#filler {
float: left;
position: relative;
background-color: #f00;
height: 120px;
width: 50%;
http://jsfiddle.net/mnz2h9hr/2/
The <p> tags keeps the paragraphs together, and the 'filler' (marked in red) keeps an area free of text.

For your situation, the best solution is to use a grid system.
Please run the snippet in Full Page view.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6" style="background-color:lavenderblush;">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="col-sm-6" style="background-color:lavender;">
SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>
</div>
</div>
</div>
</body>
</html>

If you are able to wrap each column in a div, then the most elegant solution would be to use a bootstrap style grid.
.row {
margin: 0 -15px;
}
.column {
box-sizing: border-box;
float: left;
padding: 0 15px;
width: 50%;
}
<div id=row">
<div class="column">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="column">SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>
</div>
If you are using a wysiwyg to enter copy, then you must have access to a source button to wrap your columns in divs. Then using the above code, columns become very simple; and easily made responsive.

Elaborating more on #Oriol answer you can set the width so first column will always use left half.
#multicolumn {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
.column:nth-of-type(1) {
width:50%;
}
<div id="multicolumn">
<div class="column">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="column">SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>
</div>

Technically not the CSS multicolumn feature you are targeting to column-break in, but this looks visually similar.
.column {
width : 46%;
margin: 0% 2%;
height: 100%;
float: left;
}
<div class="column">FIRST paragraph orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<div class="column">SECOND paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>
Here's the jsFiddle : http://jsfiddle.net/Vbr9d/242/

FAQ Toggle Arrow Animation

Hello I have below code for FAQ Toggle but the issue is when I click on any question it slides and show the answer perfectly but the all arrows in all question triggers.
<div class="faqbox" id="faq-list">
<div class="qblock">
<span class="arrow"></span>
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</h2>
<div class="answer">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.</p>
</div><!-- answer -->
</div><!-- qblock -->
<div class="qblock">
<span class="arrow"></span>
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</h2>
<div class="answer">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.</p>
</div><!-- answer -->
</div><!-- qblock -->
</div><!-- faqbox -->
This is the JS
function toggleFaqArrow(){
$('.qblock .arrow').toggleClass('rotate');
}
$(document).ready(function() {
$('.qblock h2').click(function(){
$(this).next('.answer').slideToggle(500);
$(this).toggleClass('close');
toggleFaqArrow();
});
});

Your toggleFaqArrow() function targets all arrow class elements inside all qblock class elements. You only want to toggle the rotate class of the sibling with class arrow of the h2 element clicked.
To achieve this, change your JS to:
$(document).ready(function() {
$('.qblock h2').click(function(){
$(this).next('.answer').slideToggle(500);
$(this).toggleClass('close');
$(this).siblings('.arrow').toggleClass('rotate');
});
});

firefox addon sdk: contentScriptFile function not available within panel index.hml

I am trying to develop an add-on with the Firefox add-on sdk. I am trying to get it so that the onclick event on the submit button runs the leavecomment() function, but I can't seem to get it work when its within paneljs.js, but it works when i put it within tags on the index.html page, but this later creates complications in using port.emit, port.on so i need to figure out how to get it running within paneljs.js, or how to get port.emit to work within tags on the panel.
Here is my main.js:
var { ToggleButton } = require('sdk/ui/button/toggle');
var panels = require("sdk/panel");
var self = require("sdk/self");
// needed to log tabs
require("sdk/tabs").on("ready", logURL);
// function for logging pages loaded by a tab
function logURL(tab) {
console.log(tab.url);
current_address = tab.url;
}
var button = ToggleButton({
id: "comment-chain",
label: "comment-chain",
icon: {
"16": "./images/comment-chain_icon_16.jpg",
"32": "./images/comment-chain_icon_32.jpg",
"64": "./images/comment-chain_icon_64.jpg"
},
onClick: handleClick
});
var panel = panels.Panel({
contentURL: self.data.url('index.html'),
contentScriptFile: self.data.url('js/jsonrpc.js'),
contentScriptFile: self.data.url('js/paneljs.js'),
});
function handleClick(state) {
panel.port.on("comment", function(myAddonMessagePayload) {
// Handle the message
});
var Width = require('sdk/window/utils').getMostRecentBrowserWindow().innerWidth;
Width = Width * .9;
var Height = require('sdk/window/utils').getMostRecentBrowserWindow().innerHeight;
Height = Height * .8;
panel.resize(Width, Height);
panel.show({
position: button
});
console.log(Width);
console.log(Height);
}
Here is index.html:
<html>
<head>
<title></title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/boxes.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<div class="box">
<h2>Comment Chain</h2>
<div id="leave_comment" style="padding-left:15px;">
<FORM NAME="leave_comment" ACTION=" METHOD="GET">
<TEXTAREA NAME="comment" COLS="80" ROWS="8" VALUE="Leave a comment.">
</TEXTAREA><P>
</FORM>
<button onclick="leaveComment()">submit comment</button>
</div>
<h3 id="media-list">Comments left regarding this page:</h3>
<div class="existing_comments">
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="./images/generic_commenter.png" height=64px; alt="username">
</a>
<div class="media-body">
<h4 class="media-heading">Someone making a comment on the page</h4>
<p>My Comment on this page.</h4>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam</p>
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="./images/generic_commenter.png" height=64px; alt="username">
</a>
<div class="media-body">
<h4 class="media-heading">Someone replying back</h4>
My Comment on this page.</h4>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="./images/generic_commenter.png" height=64px; alt="username">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
My Comment on this page.</h4>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam
</div>
</div>
</div>
</div>
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="./images/generic_commenter.png" height=64px; alt="username">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
My Comment on this page.</h4>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam
</div>
</div>
</div>
</li>
</ul>
</div>
<div id="footer_1"><center><img src="images/comment-chain.jpg" height="40"></center></div>
<br>
<div class="highlight"><pre><code class="html">
Advertisement goes here.
</code></pre></div>
</div>
</div>
</div>
</body>
</html>
Here is paneljs.js :
function leaveComment(){
if(document.forms["leave_comment"]["comment"].value != ''){
var comment = document.forms["leave_comment"]["comment"].value;
console.log(comment);
}
}

You cannot access content script variables from the html page (or vice versa) for security reasons. The page doesn't know what the function leaveComment is, so you'll need to include the line document.querySelector('button').onclick = leaveComment in paneljs.jswhy not just panel.js?
Also, you'll need to include self.port.emit('comment', … in leaveComment() to send that info to main.js
Finally, you're probably aware, but your jsonrpc.js isn't getting attached because your panel constructor has two contentScritpFile properties.
var panelOptions = {
contentURL: self.data.url('index.html'),
contentScriptFile: self.data.url('js/jsonrpc.js'),
contentScriptFile: self.data.url('js/paneljs.js'),
}
If you called console.log(panelOptions.contentScriptFile), the output would be equivalent to self.data.url('js/paneljs.js').
contentScriptFile accepts arrays as well as strings, so the object should look like this:
var panelOptions = {
contentURL: self.data.url('index.html'),
contentScriptFile: [self.data.url('js/jsonrpc.js'), self.data.url('js/paneljs.js')]
}

How to make slide effect for a single div?

I have main div which has many div like grid inside it. actually now horizontal scroll working but i want to make slide effect like [this][2]
sliding has to be done according to screen size not depending on the div.
I tried like this
<!DOCTYPE html>
<html>
<head>
<!-- META -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, minimum-scale=1, maximum-scale=1">
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<style type="text/css">
.fluidHeight {
position: relative;
width: 800px;
height: 800px;
}
/*
* below 900px, switch to percentage based responsive height.
* padding of 33.333% is calculated by using the
* image ratio 300px/900px = .333 * 100% = 33.333%
*/
#media screen and (max-width: 900px) {
.fluidHeight {
height: 0;
padding: 0 0 33.333% 0;
}
}
.sliderContainer {
position: absolute;
width: 800px;
height: 800px;
}
.iosSlider {
width: 800px;
height: 800px;
background: #aaa;
}
.iosSlider .slider {
width: 100%;
height: 100%;
}
.iosSlider .slider img {
position: relative;
top: 0;
left: 0;
width: 800px;
margin: 0 0 0 0;
}
.div-body_2_col {
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
padding:5px;
height: 800px;
}
</style>
<!-- jQuery library -->
<script type="text/javascript" src = "../../../_lib/jquery-1.4.min.js"></script>
<script type="text/javascript" src = "../../../_lib/jquery.easing-1.3.js"></script>
<!-- iosSlider plugin -->
<script src = "../../../_src/jquery.iosslider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.iosSlider').iosSlider({
snapToChildren: true,
desktopClickDrag: true,
infiniteSlider: true
});
});
</script>
<title>Ex #12: Image Slides</title>
</head>
<body>
<div class = 'fluidHeight'>
<div class = 'sliderContainer'>
<div class = 'iosSlider'>
<div class = 'slider'>
<div class="div-body_2_col">
<div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
111.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Can any one help me
Thank's in advance

If you want to move all divs to the left you can just put them in an outer box and move the whole box to the left.
If you want to move only one div you could use css translation because this doesn't influence your layout (it just overlays/underlays the other divs). If you've floating divs and want to move only one specific div it could be tricky to avoid the others from moving also (working with negative margin on the left and positive on the right might work here).