I have a problem with popover position.
This is what it looks like:
This is what it is supposed to look like:
With position: relative; on the timetable, the popover works, but the timetable doesn't:
Code:
In my html file I have one div with position: relative;
<div id="bg-timetable" class="bg-timetable"/>
In my JS, I create in it a small div with timetable with that has position: absolute;. For event I have a function:
function createDivEvent(event) {
var start = new Time(event.startTime);
var end = new Time(event.endTime);
var div = document.createElement("div");
div.classList.add("event");
div.id = event.id;
div.style.top = start.getPercent() + "%";
div.style.height = (end.getPercent() - start.getPercent()) + "%";
div.innerHTML = event.subject.name + " (" + event.place.name + ")";
var a = document.createElement('a');
a.setAttribute('tabindex', "0");
a.setAttribute('data-toggle','popover');
a.setAttribute('data-content','Some content inside the popover');
a.setAttribute('title',div.innerHTML);
a.appendChild(div);
var d = new Date(event.date)
document.getElementById(weekday[d.getDay()]).appendChild(a);
}
Can You help me?
Ok I fix it:
function createDivEvent(event) {
var start = new Time(event.startTime);
var end = new Time(event.endTime);
var div = document.createElement("div");
div.id = event.id;
div.innerHTML = event.subject.name + " (" + event.place.name + ")";
var a = document.createElement('a');
a.setAttribute('tabindex', "0");
a.setAttribute('data-toggle','popover');
a.setAttribute('data-content','Some content inside the popover');
a.setAttribute('title',div.innerHTML);
a.setAttribute('data-placement',"top");
a.appendChild(div);
a.style.top = start.getPercent() + "%";
a.style.height = (end.getPercent() - start.getPercent()) + "%";
a.classList.add("event");
var d = new Date(event.date)
document.getElementById(weekday[d.getDay()]).appendChild(a);
}
Css:
a.event {
position: absolute;
width: 95%;
background-color: lightblue;
}
Related
I'm using this script for change img on click function
var fstSrc = 'img/1.jpg';
var sndSrc = 'img/2.jpg';
var trdSrc = 'img/3.jpg';
$(".aktualita1").click(function () {
$('img[src="' + sndSrc + '"]').attr('src', fstSrc);
$('img[src="' + trdSrc + '"]').attr('src', fstSrc);
});
When click, image changes immidiately, of course. How could i set a 0.5s duration for this click, so images will change with nice fade animation? :) Thanks!
You can fadeOut change the src of the image and then fadeIn giving you the desired effect.
var fstSrc = 'img/1.jpg';
var sndSrc = 'img/2.jpg';
var trdSrc = 'img/3.jpg';
$(".aktualita1").click(function () {
$('img[src="' + sndSrc + '"], img[src="' + trdSrc + '"]').fadeOut(250, function(){
$(this).attr('src', fstSrc);
}).fadeIn(250)
});
If you want the image to fade on top of the other one, consider using another image element on top of that one (or viceversa).
For example:
var fstSrc = 'https://i.imgur.com/EUym7Pw.jpg';
var sndSrc = 'https://i.imgur.com/Xt8ICog.jpg';
var trdSrc = 'https://i.imgur.com/Fp2EwFc.jpg';
$(".aktualita1").click(function() {
$('img[src="' + sndSrc + '"], img[src="' + trdSrc + '"]').each(function() {
if ($(this).is(':visible')) {
var pos = $(this).position();
$(this).parent().append($('<img src="' + fstSrc + '">').css({
position: 'absolute',
left: pos.left,
top: pos.top,
display: 'none'
}).fadeIn(500));
$(this).fadeOut(500);
}
})
});
.aktualita1 {
position: relative;
}
.aktualita1 img {
height: 200px;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="aktualita1">
<img src="https://i.imgur.com/Xt8ICog.jpg">
<img src="https://i.imgur.com/Fp2EwFc.jpg">
</div>
I need to animate the points in a bullet list, the bullet list is a div that contains bullet points that are divs.
A bullet point div contains an image and another div which has the bullet point text, the problem is when I try and move a given bullet point div only the image is moved.
I have tried various changes to the .style.position to no avail.
I could not create an account on jsfiddle.net so the following is a working example that moves only the first bullet point:
<html>
<head>
<title>Build Bullets</title>
<body>
<script>
window.setTimeout('initBuildBullets()',100);
function initBuildBullets(){
var bulletPointsDiv = document.createElement('div');
var bName = 'BulletList';
bulletPointsDiv.style.visibility='visible';
bulletPointsDiv.style.position = 'fixed';
bulletPointsDiv.style.display = 'block';
bulletPointsDiv.style.textAlign = 'left';
bulletPointsDiv.id = bName;
document.body.appendChild(bulletPointsDiv);
var bullet_src = 'bullet_level_1.gif';
var bulletText=[];
bulletText[0]='Bullet Point 1';
bulletText[1]='Bullet Point 2';
bulletText[2]='Bullet Point 3';
var x=100;
var y=100;
var h=100;
var w=200;
var lastBot = 0;
var indent = 0;
var imgW = 25;
var hOffset = 5;
for(var i=0;i<bulletText.length;i++){
var bp_id = bName + '_Bullet_Point_' + i;
var bulletPointDiv = document.createElement('div');
bulletPointDiv.id = bp_id;
bulletPointDiv.style.overflow = 'hidden';
bulletPointDiv.style.visibility='visible';
bulletPointDiv.style.position = 'inherit';
bulletPointDiv.style.display = 'inherit';
bulletPointDiv.style.textAlign = 'left';
bulletPointDiv.style.top = (y + lastBot) + 'px';
bulletPointDiv.style.left = (x + indent) + 'px';
var bulletImage = document.createElement('img');
bulletImage.src = bullet_src;
bulletImage.id = bName + '_Bullet_Image_' + i;
var bulletFieldDiv = document.createElement('div');
bulletFieldDiv.id = bName + '_Bullet_Field_' + i;
bulletFieldDiv.style.overflow = 'hidden';
bulletFieldDiv.style.position = 'inherit';
bulletFieldDiv.style.display = 'inherit';
bulletFieldDiv.style.textAlign = 'left';
bulletFieldDiv.style.top = (y + lastBot) + 'px';
bulletFieldDiv.style.left = (x + imgW + indent) + 'px';
bulletFieldDiv.style.width = (w - (imgW + indent)) + 'px';
bulletFieldDiv.innerHTML = bulletText[i];
bulletFieldDiv.style.visibility='visible';
bulletPointDiv.appendChild(bulletImage);
bulletPointDiv.appendChild(bulletFieldDiv);
bulletPointsDiv.appendChild(bulletPointDiv);
lastBot += bulletFieldDiv.offsetHeight + hOffset;
}
window.setTimeout('moveBullets()',100);
}
function moveBullets(){
var bp_id = 'BulletList_Bullet_Point_0';
bulletPointDiv = document.getElementById(bp_id);
bulletPointDiv.style.top = '0px';
bulletPointDiv.style.left = '0px';
}
</script>
</body>
</html>
If I could ask that you copy/paste to test.
The following image is the bullet_level_1.gif
I need to set the style.position to 'relative' and then the top and left needs to account for the image (ONLY), once I do that then all objects within the div will move with the div, e.g.:
...
var bulletImage = document.createElement('img');
bulletImage.src = bullet_src;
var imgW = bulletImage.width + 8;
var bulletFieldDiv = document.createElement('div');
bulletFieldDiv.style.position = 'relative';
bulletFieldDiv.style.top = '-' + (bulletImage.height + 8) + 'px';
bulletFieldDiv.style.left = imgW + 'px';
...
That said, I'm not sure why I need the additional 8px for both the height and width??
Please, no "fixed" solutions... It does not work in IE8 in quirks mode, but this is what I need.
I write this JS:
function isNumber(n)
{
return !isNaN(parseFloat(n)) && isFinite(n);
}
function getHighestZIndexIn(start_elem, include_static_elems)
{
var curr_elem = start_elem ? start_elem : document.body;
var current_highest = curr_elem.style.zIndex;
for (var i = 0; i < curr_elem.children.length; i++)
{
if (!include_static_elems && (!curr_elem.children[i].style.position || curr_elem.children[i].style.position.toLowerCase() == "static"))
continue;
var temp_highest = getHighestZIndexIn(curr_elem.children[i]);
if (!isNumber(temp_highest))
continue;
if (!isNumber(current_highest))
{
current_highest = temp_highest;
continue;
}
if (current_highest < temp_highest)
current_highest = temp_highest;
}
return current_highest;
}
function createPopupPanel(header, with_content, header_color, tbl_bg_color)
{
var hzi = getHighestZIndexIn(null, true);
hzi = hzi ? hzi + 1 : 1;
var div_id = "temp_div_" + new Date().getTime();
var bg_div = document.createElement("div");
bg_div.style.position = "absolute";
bg_div.style.zIndex = hzi;
bg_div.id = div_id;
bg_div.style.width = bg_div.style.height = "100%";
try { bg_div.style.backgroundColor = "rgba(100, 100, 100, 0.5)"; }
catch (exc) { bg_div.style.backgroundColor = "gray"; } //ie6, ie7, ie8 fix
bg_div.style.left = bg_div.style.right = bg_div.style.top = bg_div.style.bottom = "0px";
var main_div = document.createElement("div");
main_div.style.position = "absolute";
main_div.style.width = main_div.style.height = "80%";
main_div.style.left = main_div.style.right = main_div.style.top = main_div.style.bottom = "10%";
var table = "<table cellspacing = '0' cellpadding = '0' style = 'width: 100%; height: 100%'>";
table += "<tr><td style = 'background-color: " + header_color + ";'>" + header + "</td><td style = 'cursor: pointer; background-color: red; width: 1px; height: 1px;' onclick = \"document.body.style.overflow = 'auto'; document.body.removeChild(document.getElementById('" + div_id + "'));\">Close</td></tr>";
table += "<tr><td colspan = '2' style = 'background-color: " + tbl_bg_color + ";'>" + "<div style = 'position: relative; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%;'><div id = '" + div_id + "_content_container' style = 'position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%; overflow: auto;'>" + with_content + "</div></div>" + "</td></tr>";
table += "</table>";
main_div.innerHTML = table;
bg_div.appendChild(main_div);
document.body.style.overflow = "hidden";
document.body.appendChild(bg_div);
return div_id + "_content_container";
}
And this test page:
<html>
<head>
<title>test ppanel</title>
<script type = "text/javascript" src = "libs/ppanel.js"></script>
</head>
<body>
<input type = "button" value = "create div" onclick = "createPopupPanel('asd', 'dsa', 'LightBlue', 'GhostWhite');" />
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<input type = "button" value = "create div" onclick = "createPopupPanel('asd', 'dsa', 'LightBlue', 'GhostWhite');" />
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<input type = "button" value = "create div" onclick = "createPopupPanel('asd', 'dsa', 'LightBlue', 'GhostWhite');" />
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<input type = "button" value = "create div" onclick = "createPopupPanel('asd', 'dsa', 'LightBlue', 'GhostWhite');" />
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<input type = "button" value = "create div" onclick = "createPopupPanel('asd', 'dsa', 'LightBlue', 'GhostWhite');" />
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<input type = "button" value = "create div" onclick = "createPopupPanel('asd', 'dsa', 'LightBlue', 'GhostWhite');" />
<p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
</body>
</html>
Then I press any button and the panel appears at the page top.
Is there any way I can place my div right at viewport and make it dynamically change it's size at window resizes?
If, during the pop up, the background stays static, ergo no elements are appended or changed. You can use this:
//store window scroll values
var storeScroll = [document.body.scrollLeft, document.body.scrollTop]; //x, y
document.body.style.overflow = "hidden";
window.scrollTo(0, 0);
//when the pop is closed revert back to scroll position
window.scrollTo(storeScroll[0], storeScroll[1]);
document.body.style.overflow = "auto";
There is a way. I usually achieve this with jquery using:
$(window).width() //to get window width
$(window).height() // to get window height
$('#id').width(val) // to change the width accordingly
For positioning I use a display:absolute in css changing
$('#id').css('left',$(window).width*percentage); //as an example
usually for the top property you have to consider other elements unless you just want it on top
All of this code must run under a
$(window).resize(function(){
//to get new window dimensions
var windowwidth = $(window).width();
var windowheight = $(window).height();
//resizing code
});
I am having issues with a second CustomMarker. I can see the paths on the map, but the anchor points are not showing up with my custom image. What am I missing?
My code for the second Custom Marker is:
/* ***** Begin CustomMarker Toekomst ***** */
function CustomMarkerToekomst(latlng, map, marker_id, hovercard) {
this.latlng_ = latlng;
this.marker_id = marker_id;
this.hovercard_content = hovercard;
this.setMap(map);
}
CustomMarkerToekomst.prototype = new google.maps.OverlayView();
CustomMarkerToekomst.prototype.draw = function() {
var me = this;
var div = this.div_;
if (!div) {
div = this.div_ = document.createElement('DIV');
div.id=me.marker_id;
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
if (point) {
div.className = 'map-marker-toekomst show-hovercard';
div.style.left = (point.x-6) + 'px';
div.style.top = (point.y-23) + 'px';
$(div).attr('data-hovercard-content', me.hovercard_content);
}
};
CustomMarkerToekomst.prototype.remove = function() {
if (this.div_) {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
};
CustomMarkerToekomst.prototype.getPosition = function() {
return this.latlng_;
};
/* ***** Eind CustomMarker Toekomst ***** */
My css for the div 'map-marker-toekomst' is; I have verified that the background does exist.:
.map-marker-toekomst {
position: absolute;
width: 21px;
height: 25px;
background: url(removed/img/mapmarker_blue.png) no-repeat;
cursor: pointer;
}
My results are populated from a database query from php into the javascript as:
echo " pos = new google.maps.LatLng(" . $row['latitudedecimal'] . "," .
$row['longitudedecimal'] . ");\n";
echo " overlay = new CustomMarkerToekomst(pos, map, \"" . $row['marker']
. "\", '" . $row['luchthavennaam'] . "');\n";
echo " overlay.setMap(map);\n";
echo " bounds.extend(pos);\n";
echo " \n";
I have a similiar CustomMarker just above this script which works fine, it's this second one that is the problem.
I am currently trying to implement a GridView with a frozen header. I've gotten the header frozen using javascript found online. Here is the code:
var GridId = "<%=dgContacts.ClientID %>";
var ScrollHeight = 180;
var ScrollWidth = 700;
window.onload = function () {
enablePostLog();
var grid = document.getElementById(GridId);
var gridWidth = grid.offsetWidth;
var headerCellWidths = new Array();
for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
}
grid.parentNode.appendChild(document.createElement("div"));
var parentDiv = grid.parentNode;
var table = document.createElement("table");
for (i = 0; i < grid.attributes.length; i++) {
if (grid.attributes[i].specified && grid.attributes[i].name != "id") {
table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
}
}
table.style.cssText = grid.style.cssText;
table.style.width = gridWidth + "px";
table.style.tableLayout = "fixed";
table.appendChild(document.createElement("tbody"));
table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
var headerRow = table.getElementsByTagName("TH");
var gridRow = grid.getElementsByTagName("TR")[0];
for (var i = 0; i < headerRow.length; i++) {
var width;
if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {
width = headerCellWidths[i];
}
else {
width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
}
headerRow[i].style.width = parseInt(width - 3) + "px";
gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
}
parentDiv.removeChild(grid);
var dummyHeader = document.createElement("div");
dummyHeader.setAttribute('id', 'divHeader');
dummyHeader.style.cssText = "margin-left: auto; margin-right: auto; overflow: hidden; width: " + ScrollWidth + "px";
dummyHeader.appendChild(table);
parentDiv.appendChild(dummyHeader);
var scrollableDiv = document.createElement("div");
gridWidth = parseInt(gridWidth) + 17;
scrollableDiv.setAttribute('id', 'divBody');
scrollableDiv.style.cssText = "margin-left: auto; margin-right: auto; overflow: auto; height: " + ScrollHeight + "px; width: " + ScrollWidth + "px";
scrollableDiv.appendChild(grid);
scrollableDiv.onscroll = scrollHeader;
parentDiv.appendChild(scrollableDiv);
}
function scrollHeader() {
var header = document.getElementById('divHeader');
var body = document.getElementById('divBody');
header.scrollLeft = body.scrollLeft;
}
The problem I'm having is that the GridView being in a fixed-width div. The width styles added to the columns is being ignored.
The final HTML looks like this:
http://i.stack.imgur.com/xDzez.png
The actual table rendered looks like this (the problem is most noticable in the "View" and "Notify" columns):
http://i.stack.imgur.com/rA35z.png
If I remove the fixed width on the outer div, the column widths correct themselves, but obviously, I lose my scrollability. It appears to be trying to shrink the whitespace in the table cells to try and fit into the div. This isn't necessary because of the overflow: auto on the outer div. Is there a style or something I can add to stop the browser from doing this?
Turns out I needed table-layout: fixed AND width: 100% to both tables. I had tried the table-layout solution, but didn't realize about the width needing to be 100% as well.
Final javascript:
var GridId = "<%=dgContacts.ClientID %>";
var ScrollHeight = 180;
var ScrollWidth = 700;
window.onload = function () {
enablePostLog();
var grid = document.getElementById(GridId);
var gridWidth = grid.offsetWidth;
var headerCellWidths = new Array();
for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
}
grid.parentNode.appendChild(document.createElement("div"));
var parentDiv = grid.parentNode;
var table = document.createElement("table");
for (i = 0; i < grid.attributes.length; i++) {
if (grid.attributes[i].specified && grid.attributes[i].name != "id") {
table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
}
}
table.style.cssText = grid.style.cssText;
table.appendChild(document.createElement("tbody"));
table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
var headerRow = table.getElementsByTagName("TH");
var gridRow = grid.getElementsByTagName("TR")[0];
for (var i = 0; i < headerRow.length; i++) {
var width;
if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {
width = headerCellWidths[i];
}
else {
width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
}
gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
if (i == headerRow.length - 1) {
width = width + getScrollBarWidth();
}
headerRow[i].style.width = parseInt(width - 3) + "px";
}
parentDiv.removeChild(grid);
grid.style.tableLayout = "fixed";
table.style.tableLayout = "fixed";
grid.style.width = "100%";
table.style.width = "100%";
var dummyHeader = document.createElement("div");
dummyHeader.setAttribute('id', 'divHeader');
dummyHeader.style.cssText = "margin-left: auto; margin-right: auto; overflow: hidden; width: " + ScrollWidth + "px";
dummyHeader.appendChild(table);
parentDiv.appendChild(dummyHeader);
var scrollableDiv = document.createElement("div");
scrollableDiv.setAttribute('id', 'divBody');
scrollableDiv.style.cssText = "margin-left: auto; margin-right: auto; overflow: auto; height: " + ScrollHeight + "px; width: " + ScrollWidth + "px";
scrollableDiv.appendChild(grid);
scrollableDiv.onscroll = scrollHeader;
parentDiv.appendChild(scrollableDiv);
}
function scrollHeader() {
var header = document.getElementById('divHeader');
var body = document.getElementById('divBody');
header.scrollLeft = body.scrollLeft;
}
function getScrollBarWidth() {
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild(inner);
document.body.appendChild(outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild(outer);
return (w1 - w2);
}