I have a problem with a thead: I need to fix to top the thead when scrolling to top but at the same when I scroll horizontally the thead has to scroll horizontally so I can't use the "position: fixed".
I'm using this cose but it does not work as I want.
Any ideas?
<script type="text/javascript">
$(function() {
moveScroller();
});
function moveScroller() {
var $anchor = $("#scroller-anchor");
var $scroller = $('#scroller');
var move = function() {
var st = $(window).scrollTop();
var ot = $anchor.offset().top;
if(st > ot) {
$scroller.css({
position: "fixed",
top: "0px"
});
} else {
$scroller.css({
position: "relative",
top: ""
});
}
};
$(window).scroll(move);
move();
}
</script>
<div class="col-sm-12" id="scroller-anchor">
<div class="table-responsive" id="cinquepuntodue">
<table class="table table-bordered table-hover table-condensed version" cellspacing="0" id = "cinquepuntodue_sopra">
<thead id="scroller" ></thead>
Related
I'm building a Chrome extension that slides from right side of browser's window after clicking a yellow bar fixed to browser's right side. When I click on yellow bar, green and yellow bars will slide. The yellow one is correctly "on the top" of page- it covers page's content. Unfortunately green one after sliding is under some page's elements. For example on stackoverflow site, a green bar is under search window, ask question button and similar questions section. How can I fix it ?
manifest.json
{
"manifest_version": 2,
"content_scripts": [ {
"js": [ "injection.js", "jquery.js", "jquery-ui.min.js"],
"matches": [ "http://stackoverflow.com/questions/*"
]
} ],
"description": "Inject a complete, premade web page",
"name": "Inject whole web page",
"version": "1",
"web_accessible_resources": ["test.css", "jquery-ui.min.css"]
}
test.css
#intro_button {
background-color: yellow;
height : 100%;
width : 100px;
top: 0;
right: 0;
position : fixed;
cursor: pointer;
}
#extension {
height: 100%;
width: 200px;
position: fixed;
right: -200px;
background-color: green;
}
injection.js
// Injecting button (div)
var divElement = document.createElement("DIV");
divElement.id = "intro_button";
divElement.style.right = "0px";
divElement.onclick = function () {
if (this.style.right === "0px") {
$(this).animate({ "right": "+=200" }, 800);
$("#extension").animate({ "right": "+=200" }, 800);
}
else if (this.style.right === "200px") {
$(this).animate({ "right": "-=200" }, 800);
$("#extension").animate({ "right": "-=200" }, 800);
}
}
var textnode = document.createTextNode("zzz");
divElement.appendChild(textnode);
document.body.appendChild(divElement, document.body.firstChild);
// Injecting extenion (div)
var divExtension = document.createElement("DIV");
divExtension.id = "extension";
var textnode = document.createTextNode("yyy");
divExtension.appendChild(textnode);
document.body.insertBefore(divExtension, document.body.firstChild);
// Injecting CSS files
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = chrome.extension.getURL('test.css');
head.appendChild(link);
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = chrome.extension.getURL('jquery-ui.min.css');
head.appendChild(link);
// Injecting Jqueries
var s = document.createElement('script');
s.src = "jquery.js";
document.getElementsByTagName("head")[0].appendChild(s);
var s = document.createElement('script');
s.src = "jquery-ui.min.js";
document.getElementsByTagName("head")[0].appendChild(s);
Why is this happening?
The element which is incorrectly layered is inserted before the body with .insertBefore:
document.body.insertBefore(divExtension, document.body.firstChild);
This is placing the element outside the <body> (before it) and is causing z-index issues with other position: absolute / fixed elements.
The element which is correctly layered is appended inside the body with .appendChild:
document.body.appendChild(divElement, document.body.firstChild);
This is placing the element inside <body> (where it should be) and after all its other children.
With natural z-layering, absolute / fixed elements will be overlapped by similar elements which follow them:
div {
position: absolute;
width: 100px;
height: 100px;
}
.red {
background: red;
left: 20px;
top: 10px;
}
.green {
background: green;
left: 30px;
top: 20px;
}
.blue {
background: blue;
left: 40px;
top: 30px;
}
.purple {
background: purple;
left: 50px;
top: 40px;
}
<div class="red">Red is underneath all its siblings</div>
<div class="green">Green overlaps red</div>
<div class="blue">Blue overlaps green</div>
<div class="purple">Purple overlaps blue</div>
The problem recreated
Note how the .incorrect div is placed before the body tag. It behaves the same way as the incorrectly inserted element in your example and is overlapped by the content div inside the <body>
// Injecting button (div)
var divElement = document.createElement("DIV");
divElement.id = "intro_button";
var textnode = document.createTextNode("zzz");
divElement.appendChild(textnode);
document.body.appendChild(divElement, document.body.firstChild);
// Injecting extenion (div)
var divExtension = document.createElement("DIV");
divExtension.id = "extension";
var textnode = document.createTextNode("yyy");
divExtension.appendChild(textnode);
document.body.appendChild(divExtension, document.body.firstChild);
// Injecting CSS files
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = chrome.extension.getURL('test.css');
head.appendChild(link);
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = chrome.extension.getURL('jquery-ui.min.css');
head.appendChild(link);
// Injecting Jqueries
var s = document.createElement('script');
s.src = "jquery.js";
document.getElementsByTagName("head")[0].appendChild(s);
var s = document.createElement('script');
s.src = "jquery-ui.min.js";
document.getElementsByTagName("head")[0].appendChild(s);
.content {
height: 500px;
width: 500px;
margin: 100px;
background: #F00;
position: absolute;
}
#intro_button {
background-color: yellow;
height: 100%;
width: 100px;
top: 0;
right: 0;
position: fixed;
cursor: pointer;
}
#extension {
height: 100%;
width: 100px;
position: fixed;
background-color: green;
}
.incorrect {
position: fixed;
height: 200px;
width: 500px;
background: orange;
}
<div class="incorrect"></div>
<body>
<div class="content">Content</div>
</body>
How can we fix this?
You should use a large z-index value on the injected elements to absolutely ensure that they are always on top and...
Make sure both of the elements are inserted inside the body with .appendChild:
// Injecting button (div)
var divElement = document.createElement("DIV");
divElement.id = "intro_button";
divElement.style.right = "0px";
divElement.onclick = function () {
if (this.style.right === "0px") {
$(this).animate({ "right": "+=200" }, 800);
$("#extension").animate({ "right": "+=200" }, 800);
}
else if (this.style.right === "200px") {
$(this).animate({ "right": "-=200" }, 800);
$("#extension").animate({ "right": "-=200" }, 800);
}
}
var textnode = document.createTextNode("zzz");
divElement.appendChild(textnode);
document.body.appendChild(divElement, document.body.firstChild);
// Injecting extenion (div)
var divExtension = document.createElement("DIV");
divExtension.id = "extension";
var textnode = document.createTextNode("yyy");
divExtension.appendChild(textnode);
document.body.appendChild(divExtension, document.body.firstChild);
// ## Changed to appendChild here ##
// Injecting CSS files
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = chrome.extension.getURL('test.css');
head.appendChild(link);
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = chrome.extension.getURL('jquery-ui.min.css');
head.appendChild(link);
// Injecting Jqueries
var s = document.createElement('script');
s.src = "jquery.js";
document.getElementsByTagName("head")[0].appendChild(s);
var s = document.createElement('script');
s.src = "jquery-ui.min.js";
document.getElementsByTagName("head")[0].appendChild(s);
Usually this is fixed by adding z-index: 9999999 CSS property to the positioned element (or a more reasonable number if you can control other element's z-order).
I would like to know how to fix a table header even if we scroll down on a website and out of the table view.
I would like to use css style to do this. Thank you.
I would also like to know how to fix an element on a webpage so it always appears even when we scroll down. The image can be text. Use div and css
You would do something like this by tapping into the scroll event handler on window, and using another table with a fixed position to show the header at the top of the page.
Example:
var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);
$(window).bind("scroll", function() {
var offset = $(this).scrollTop();
if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
$fixedHeader.show();
}
else if (offset < tableOffset) {
$fixedHeader.hide();
}
});
body { height: 1000px; }
#header-fixed {
position: fixed;
top: 0px; display:none;
background-color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-1">
<thead>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
</tr>
</thead>
<tbody>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
</tbody>
</table>
<table id="header-fixed"></table>
Taken from an old post of mine, here's an example of both things that you want done together in one fiddle.
JSFiddle
JQuery:
function moveScroll() {
var scroll = $('#table-container').offset().top;
var anchor_top = $("#maintable").offset().top;
var anchor_bottom = $("#bottom_anchor").offset().top;
if (scroll > anchor_top && scroll < anchor_bottom) {
clone_table = $("#clone");
if (clone_table.length === 0) {
clone_table = $("#maintable").clone();
clone_table.attr({
id: "clone"
}).css({
position: "fixed",
"pointer-events": "none",
left: $("#maintable").offset().left + 'px',
top: 130
}).width($("#maintable").width());
$("#table-container").append(clone_table);
$("#clone").width($("#maintable").width());
$("#clone thead").css({
visibility: "true"
});
$("#clone tbody").css({
visibility: "hidden"
});
var footEl = $("#clone tfoot");
if (footEl.length) {
footEl.css({
visibility: "hidden"
});
}
}
} else {
$("#clone").remove();
}
}
$('#table-container').scroll(moveScroll);
i am working on google map api v3. map is perfectly showing on my page... problem is that when i resize the browser, map fit to its original size when i load the page...
initial state when i load the page
when i resize the browser, map is still sized at initial state size.
[Code]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type='text/javascript'>
var point;
var mrktx;
function mshow()
{
$("#search_content").css("display","");
}
function mhide()
{
$("#search_content").css("display","none");
}
function load() {
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(ShowPosition)
}
else
{
alert("Browser does not support");
setTimeout( function(){ window.location = "../" },500);
}
function ShowPosition(position)
{
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var cwidth = document.getElementsByTagName("body")[0].clientWidth;
var cheight = document.getElementsByTagName("body")[0].clientHeight;
//alert(cwidth + ',' + cheight);
$("#body").css("overflow","hidden");
$("#map_canvas").css("position","absolute");
$("#map_canvas").css("overflow","auto");
$("#map_canvas").css("height",cheight);
$("#map_canvas").css("width",cwidth);
$("#map_canvas").css("z-index","99")
$("#map_canvas").css("top","0");
$("#map_canvas").css("left","0em");
$("#top_nav").css("width",cwidth);
$("#top_nav").css("height","8%");
var latlng = new google.maps.LatLng(lat,lng);
var myOptions = {
zoom: 11,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
$('document').resize(function(){
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
});
var myMrkrTxt = "";
var infowindow = new google.maps.InfoWindow({ content : myMrkrTxt });
var myMrkr = new google.maps.Marker({position:latlng,map:map});
google.maps.event.addListener(myMrkr,'mouseover', function(){ infowindow.open(map,myMrkrTxt); });
google.maps.event.trigger(map, "resize");
}
}
</script>
<style>
#top_nav
{
position: absolute; z-index: 200; top: 0px; background-color: black;
}
#top_nav h2
{
color: white;
}
body, html {
height: 100%;
width: 100%;
}
</style>
</head>
<body onload='load()'>
<div id="map_canvas"></div>
</body>
</html>
i guess you have to resize your map_canvas as well.
so just add this to your resize()
//its maybe better to attach this handler to the window instead of the document
$(window).resize(function(){
$('#map_canvas').css("height",$(window).height());
$('#map_canvas').css("width",$(window).width());
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
});
so you have track of the resizing of your browserwindow :)
Same things can be done using only CSS too. I'll put an example below, use this if you like.
.google-maps {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
<div class="google-maps">
<iframe src="https://www.google.com/maps/yourmapsblah" width="765" height="500" frameborder="3" style="border:0" allowfullscreen></iframe>
</div>
I am trying to display google map as a tooltip using qTip jquery plugin. I have number of elements on the page and need to assign overflow: hidden to all of them. Everything works great, except for the google map tooltip does not seem to work (just shows blank map with Google logo & terms of service). I need to apply the overflow hidden to all the blocks except for the tooltip block. When I take the global overflow out, the map showup without a problem.
Am I using the CSS properties incorrectly? How can I fix this? Code below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
<script type="text/javascript" src='jquery.qtip-1.0.0-rc3.min.js'></script>
<script type="text/javascript" src="http://maps.google.com/maps/apijs?sensor=false"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
geocoder = new google.maps.Geocoder();
jQuery('td.a').each(function(i){
jQuery(this).qtip({
content: {
text: '<div id="map_canvas_'+i+'" latlon="'+jQuery('td.a').attr('tooltip')+'" addr="'+jQuery('td.a').attr('address')+'" style="width: 450px; height: 300px"></div>'
},
show: {
delay: 500,
when: 'click',
solo: true,
effect: { type: 'grow', length: 310 }
},
hide : {
when : {
event : 'unfocus'
}
},
position: { adjust: { screen: true } },
style: {
width: 490,
height: 300,
border: {
width: 5,
radius: 10
},
padding: 10,align: 'center',
tip: true
},
api: {
onShow : function() {
var ll = jQuery('#map_canvas_'+i).attr('latlon');
var latlong = ll.split(',');
var reslonger = new google.maps.LatLng(-34.397, 150.644);
geocoder.geocode({'address':jQuery('#map_canvas_'+i).attr('addr')},function(results,status){
if (status == google.maps.GeocoderStatus.OK) {
reslonger = results[0].geometry.location;
//alert(reslonger);
var reslong = new google.maps.LatLng(latlong[0], latlong[1]);
var myOptions = {
zoom: 15,
center: reslonger,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas_'+i), myOptions);
var marker = new google.maps.Marker({
position: reslonger,
map: map,
title:jQuery('#map_canvas_'+i).attr('addr') });
}else {
alert("Geocode was not successful for the following reason: " + status);}
} );
}
}
});
});
});
</script>
<style>
div
{
overflow: hidden;
}
</style>
</head>
<body>
<table style="height: auto" border="1" cellspacing="0" cellpadding="2" width="400">
<tbody>
<tr>
<td class="a" width="100" address="92123">
92123
</td>
<td class="a" width="100" address="91910">
91910
</td>
<td class="a" width="100" tooltip="38.8921,-77.033689" address="92154">
92154
</td>
<td class="a" width="100" tooltip="38.89051,-77.086294" address="90210">
90210
</td>
</tr>
</tbody>
</table>
</body>
</html>
This must not be all your code, because you don't even have any div items in your html. However, for most modern browsers (CSS3), this css should fix your issue:
div[id^=map_canvas],
div[id^=map_canvas] div {overflow: auto;}
This will target any map_canvas generated by the script and all its child div's and set the overflow back to normal.
I have some JavaScript that toggles the class of the th element clicked to "ascending" or "descending".
Q: In the css, how can I display a jQuery-UI icon associated with .ascending or .descending?
<table>
<thead>
<tr>
<th class="ascending">Cust</th>
<th>Name</th>
</tr>
</thead>
...
</table>
Here's the code, just in case someone spots an inefficiency:
jQuery(function($) {
$('.thSort th').click(function() {
var $th = $(this);
$th.siblings().removeClass('selected ascending descending');
$th.addClass('selected');
var column = $th.index();
var $table = $th.closest('table');
var rows = $table.find('tbody > tr').get();
if ($th.hasClass('ascending')) {
$th.removeClass('ascending');
$th.addClass('descending');
rows.sort(function(rowA,rowB) {
var keyA = $(rowA).children('td').eq(column).text().toUpperCase();
var keyB = $(rowB).children('td').eq(column).text().toUpperCase();
if (keyA < keyB) return 1;
if (keyA > keyB) return -1;
return 0;
});
} else {
$th.removeClass('descending');
$th.addClass('ascending');
rows.sort(function(rowA,rowB) {
var keyA = $(rowA).children('td').eq(column).text().toUpperCase();
var keyB = $(rowB).children('td').eq(column).text().toUpperCase();
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
return 0;
});
}
$.each(rows, function(index,row) {
$table.children('tbody').append(row);
});
return false;
});
});
taking this from the jquery Tablesorter plugin
you can write some css like this:
table thead th{
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
.ascending{
background-image: url(asc.gif);
}
.decending{
background-image: url(desc.gif);
}
<th scope="col"><div class="floatleft">Topic</div>
<div class="floatright ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-circle-triangle-n"></span>
</div>
</th>
In JavaScript, toggle between ui-icon-circle-triangle-n and ui-icon-circle-triangle-s.
If the user clicks on a new th, replace all the html inside the previous th with only the text that is in the first div.