Develop Reference

How to create popup on a specific line in article website?

Can anyone help me ?
I need to create pop-up to specific in line.
if the user was reading the article and have already reached the mid articles then a pop up will appear, and if returning to the top of the popup will be hide.
This is my source code pop up
$(".news").css("width","100%");
$(document).ready(function(){
if($("#blanket").length==1){
if($("#popUpDiv2").length==1){
popup('popUpDiv2');
}
else{
popup('popUpDiv');
}
}
checkCookie('popUpDiv');
$('#popUpDiv').removeAttr('style');
$('#popUpDiv').css({left: 20, bottom: 25});
});
#blanket {width: 10px;background-color:#fff;opacity:0;position:fixed;z-index:9001;top:0px;left:0px;/*width:100%;*/}
#popUpDiv {position:fixed;background:url('../image/Pop-Up-Banner-NOS-6000-Vermillion.png') no-repeat;width:275px;height:275px;z-index:9002;background-size: 275px auto;}
.trbox{width:270px;height:270px;bottom: 0px;left: 0px;}
#popUpDiv a,#popUpDiv2 a {width:45px;height:10px;padding: 2px 35px;position:relative;bottom: 29px;left:103px;}/*fix jangan diutak atik*/
.closepopup2{position: absolute;cursor: pointer;font-weight: bold;color: #fff;width:20px;height:2px;padding: 5px 10px;float:right;bottom: 232px;right:1px;} /*fix jangan diutak atik*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
div id="popup"></div>
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;"><div class="trbox"> </div>
<a target="_blank" href=""></a>
<div onclick="popup('popUpDiv')" class="closepopup2"></div>
<!-- <div class="popUpbottom">
<div class="comboAlert"><input type="checkbox" name="checkboxAlert" id="checkboxAlert"> Don't show again Today</div>
</div> -->
</div>

For the line which you want to use as trigger for the popup, you have to do the following.
Suppose it is a div. Calculate the scollTop of the div on scoll event. and when the scollbar position becomes equal to the scrollTop of the div, then show the popup.
See below links,
How to get scrollbar position with Javascript?
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_prop_element_offsettop

unwanted border on image css styling

<script id="canteen_card_row_template" type="text/html">
<div class="normal-box">
<div class="subtitle-box">
<div class="mensa-img">
<img src="{{type.[0].image}}" id="mensa-image">
</div><span class="options-title" id="mensa-text">{{title.de_DE}}</span>
</div>
<div class="side-text-box">
<span class="side-text">{{price.student}}€</span>
</div>
<div class="small-text">
<span class="normal-text" id="mensa-text">{{content}}</span>
</div>
</div>
</script>
CSS
#mensa-image{
height: 13px;
width:13px;
border: none !important;}
I have the problem where img src="blabla" is... Using handlebars and a webservice that template is loaded 4 times.. The fourth "normal-box" does not have content therefore no image(thats ok).. the problem is, since it has no image the div where the image is placed should be blank, but there an unwanted border instead... Here is an image of how it looks like pic

Use 0 instead of none
border: 0;
not
border: none;
Also, if you are generating multiple "mensa-image" images then you should be using class instead of ID.

Try this CSS rule instead and remove the ID from the image:
.mensa-image img {
border: none;
}
and HTML (partly):
<div class="subtitle-box">
<div class="mensa-img">
<img src="{{type.[0].image}}">
</div>
<span class="options-title">{{title.de_DE}}</span>
</div>
As #Lowcase wrote, you should not use an ID several times (same for the text span, BTW). If you simply remove the ID, the above rule should work.

That's the work of the browser when no image is found. The easiest fix is just to add a transparent .png.

How to set a 'div' height same with his neighbor?

I am using bootstrap as my CSS framework. Now I have some dynamic content in the left side div, and some static content in the right div. I want to the height of right side div auto change base on the height of left side div. Is that possible?
<div class="container-fluid">
<div class="row-fluid">
<div class="span5 offset1">
<div class="well">
Dynamic Content
</div>
</div>
<div class="span5">
<div class="well" style="height: 330px; overflow-x: hidden; overflow-y: scroll;">
Static Content
</div>
</div>
</div>

You could do this
<div class="wrapper">
<div class="dynamic">
Dynamic Line <br />
Dynamic Line <br />
Dynamic Line <br />
Dynamic Line <br />
Dynamic Line <br />
Dynamic Line <br />
Dynamic Line <br />
Dynamic Line <br />
</div>
<div class="static">
Static<br />
Static<br />
</div>
</div>
CSS
.wrapper {
position: relative;
width: 400px;
overflow: auto;
}
.dynamic {
position: relative;
background-color: yellow;
width: 200px;
}
.static {
position: absolute;
background-color: orange;
width: 200px;
float: left;
left: 200px;
top: 0px;
bottom: 0px;
right: 0px;
}

I think jQuery is the best solution to achieve this. Check out my fiddle:
http://jsfiddle.net/PHjtJ/
$(document).ready(function() {
var dynamic = $('.dynamic');
var static = $('.static');
static.height(dynamic.height());
});

the solution depends on the behavior you want in the case where the static column is larger than the dynamic one. [I actually think you want the second scenario.]
Notice: both case are pure CSS, and without specifying any height whatsoever.
also, not specifying a margin of any sort, so you can change the width of the column at your will, without the need to calculate the margin/position again and again..
if you want the dynamic column to enlarge, and to be as the static height:
so you actually want the columns to always be a the same height.
and that can be easily achieved with CSS table layout styling.
in that case: See this Fiddle (the script is only for adding dynamic content, this is a pure CSS SOLUTION)
if you want the dynamic column to stretch only to its content height, and the static one to have the same height + a scroller.
in that case: see this Fiddle (again: the script is only for adding dynamic content, this is a pure CSS SOLUTION)
in both cases, the static column grows if the dynamic one become longer.

Use Javascript/jQuery to find which box has the biggest height. Then set the same height to all the divs.
<script type="text/javascript">
jQuery(document).ready(function($) {
var description = jQuery("div.description");
var big =0;
description.each(function(index, el) {
if(jQuery(el).height() > big)
big =jQuery(el).height(); //find the largest height
});
description.each(function(index, el) {
jQuery(el).css("min-height", big+"px"); //assign largest height to all the divs
});
});
</script>

alternative of scrollLeft()

G'day!
I have a page which has Horizontally Scroll feature going on there.
I have a side bar and a content box
In side bar I have 5 links, say LINK1 - LINK5
In the content box, I have 3500px of width which contains 5 sections of divs of 700px each.
So the page initially loads in the first 700px div. So if I click on Link 3, it will smoothly scrolling to 3rd div section.
However, I would like to load the page in the 2nd div.
I was able to do this using scrollLeft()
<script>$("div.content1").scrollLeft(700);</script>
But the horizontal scrolling will be messed up. The second div will act as first div, which means when I click LINK1, it won't be scrolled back.
Help?
*I think this code is needed
<script>
function goto(id, t){
//animate to the div id
$(".contentbox-wrapper").stop().animate({"left": -($(id).position().left)}, 1200);
}
</script>
This is sample of HTML code
<div id="sidebar1">
<span class="upper">Foods</span><br />
<span class="lower">Rice, Noodles & Pasta</span><br />
<span class="lower">Snacks & Tidbits</span><br />
<span class="lower">Canned & Ready to Eat</span><br />
<span class="lower">Breakfast Cereal</span><br />
<br />
This is sample of my content box
<div class="content1">
<div class="contentbox-wrapper">
<div id="rice" class="contentbox" align="center">
<h2>
Rice, Noodles & Pasta
</h2>
<section id="product">
<ul class="clear">
<li data-id="1">
<div href="#">
<img src="images/products/f1/_DSC4640.jpg" width="200" height="200" />
<h3>Maggi Curry Flavour</h3>
<p>(5 + 1) x 79 G</p>
<h2>Price:$2.40</h2>
</div>
</li>

I've created an example based a little on your markup. I hope, that it is, what you're looking for. I also made some minor changes on your JavaScript. See the explanation below.
HTML
<nav>
<a>Item 1</a>
<a>Item 2</a>
</nav>
<div class="contentbox-wrapper">
<div>
<h2>Item 1</h2>
</div>
<div>
<h2>Item 2</h2>
</div>
</div>
If you can apply a markup like this, where the index of each link corresponds with the index of each content container, then you can get rid of all the ids that you need in the JavaScript part.
CSS
div.contentbox-wrapper {
position: relative;
width: 400px;
height: 200px;
overflow: hidden;
overflow-x: scroll;
font-size: 0;
line-height: 0;
white-space: nowrap;
}
div.contentbox-wrapper > div {
display: inline-block;
width: 400px;
height: 200px;
text-align: center;
}
div.contentbox-wrapper > div:last-child {
margin-right: 0;
}
JavaScript
var container = $('div.contentbox-wrapper');
var boxes = container.children();
$('nav > a').click(function() {
container.stop().animate({
scrollLeft: boxes.eq($(this).index()).get(0).offsetLeft
}, 350);
});
Try to store selectors that you use multiple times in variables. The advantage is, that you don't need to re-query them again. This JavaScript does nothing else, then getting the offset of the box that corresponds with the clicked link, using .index() and .eq(). This value is then used in the .animate()-function to scroll to this position.
Demo
Try before buy
A few notes
If you have an ampersand within normal content like "Rice, Noodles & Pasta" you must escape it like: &.
Don't use align="center". It is deprecated since HTML4. Use CSS for this purpose.

Bootstrap row over leaflet

I'm trying to put over a leaflet map a bootstrap row, my html is:
<div class="row-fluid some" id="map">
<div class="span1"></div>
<div class="span2"></div>
</div>
span1 and span2 are columns with some information with rgba background. the leftover columns are a visible map area.
The problem is the map is showing over the columns and they are visible only when map is loading or zooming out.
span1 and span2 have z-index: 2000
How to I can put columns visible over the map?

You can put them in a common container, and absolutely position the row you want to overlay the map.
demo (with Leaflet)
<div class="container-fluid">
<div class="mapbox">
<div class="row-fluid some" id="map">
<img src="//placehold.it/600x400">
</div>
<div class="row-fluid overlay">
<div class="span1">
<button class="btn btn-primary">Button</button>
</div>
<div class="span2">
<button class="btn">Button</button>
</div>
</div>
</div>
</div>
.mapbox {
position: relative;
}
.mapbox .overlay {
position: absolute;
top: 0;
left: 0;
z-index: 314159;
pointer-events: none;
}
.mapbox .overlay .btn {
pointer-events: initial;
}
Clicking through an element is possible by specifying pointer-events: none. Note that this by default removes the ability to click children of said element (because the default pointer-events value is inherit), so declare pointer-events: initial on those elements you want to be able to interact with.
note: the reason the buttons are stacking on the fiddle is Bootstrap's media queries, are seeing the small preview as a mobile-phone size.