I would like to know how is possible to assign a css rule to an element only if current scroll position is greater than 112px..
I've tried this but it doesn't work:
<script type="text/javascript">
$window.scrollTop(function(){
var a = 112;
var pos = $window.scrollTop();
if(pos > a) {
$("menu").css({
position: 'fixed'
});
}
else {
$("menu").css({
position: 'absolute',
top:'600px'
});
}
});
</script>
Try using below code
<script type="text/javascript">
$(window).scroll(function(){
var a = 112;
var pos = $(window).scrollTop();
if(pos > a) {
$("menu").css({
position: 'fixed'
});
}
else {
$("menu").css({
position: 'absolute',
top:'600px'
});
}
});
</script>
$window.scrollTop changed to $(window).scroll
$window changed to $(window)
Related
I am working on this demo. How can I add smooth pan animation to left of the map by clicking on #pan button?
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
$("#pan").on("click", function(){
//map.pan
});
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="pan">Pan to Left</button>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
From http://www.geocodezip.com/scripts/PanControl.js in my answer to the question: Google maps custom control always appears below the default controls, the code below is what pans the map when the pan control is clicked:
/** #param {PanDirection} direction */
PanControl.prototype.pan = function(direction) {
var panDistance = 50;
if (direction == PanDirection.UP || direction == PanDirection.DOWN) {
panDistance = Math.round(this.map.getDiv().offsetHeight / 2);
this.map.panBy(0, direction == PanDirection.DOWN ? panDistance : -1 * panDistance);
}
else {
panDistance = Math.round(this.map.getDiv().offsetWidth / 2);
this.map.panBy(direction == PanDirection.RIGHT ? panDistance : -1 * panDistance, 0);
}
}
code snippet with "pan left" code in the button click listener function:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
}
$("#pan").on("click", function() {
var panDistance = Math.round(map.getDiv().offsetWidth / 2);
map.panBy(-1 * panDistance, 0);
});
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="pan">Pan to Left</button>
<div id="map"></div>
I'm not sure if "sticky" is the term for this, but is there a way to make the scrollbar from overflow:auto stay visible?
I have a rather large table that I want to be scrollable horizontally; however, the table is fairly tall as well, so when the page loads the horizontal scrollbar is not within the viewport of the browser, so it's rather hard to tell that the table is scrollable at all.
<div style = 'width:900px;overflow:auto'>
<table>
<!-- Very large table here -->
</table>
</div>
The scroll bar appears below the table, but unfortunately the table is so tall you can't see it unless you scroll down.
I'd like to have the horizontal scrollbar stay visible even if the table goes off the screen, maybe fixed to the bottom of the viewport. Ideally I'd like to do it using only CSS or a minimal amount of javascript.
Here is a script for that http://jsfiddle.net/TBnqw/2288/
$(function($){
var scrollbar = $('<div id="fixed-scrollbar"><div></div></div>').appendTo($(document.body));
scrollbar.hide().css({
overflowX:'auto',
position:'fixed',
width:'100%',
bottom:0
});
var fakecontent = scrollbar.find('div');
function top(e) {
return e.offset().top;
}
function bottom(e) {
return e.offset().top + e.height();
}
var active = $([]);
function find_active() {
scrollbar.show();
var active = $([]);
$('.fixed-scrollbar').each(function() {
if (top($(this)) < top(scrollbar) && bottom($(this)) > bottom(scrollbar)) {
fakecontent.width($(this).get(0).scrollWidth);
fakecontent.height(1);
active = $(this);
}
});
fit(active);
return active;
}
function fit(active) {
if (!active.length) return scrollbar.hide();
scrollbar.css({left: active.offset().left, width:active.width()});
fakecontent.width($(this).get(0).scrollWidth);
fakecontent.height(1);
delete lastScroll;
}
function onscroll(){
var oldactive = active;
active = find_active();
if (oldactive.not(active).length) {
oldactive.unbind('scroll', update);
}
if (active.not(oldactive).length) {
active.scroll(update);
}
update();
}
var lastScroll;
function scroll() {
if (!active.length) return;
if (scrollbar.scrollLeft() === lastScroll) return;
lastScroll = scrollbar.scrollLeft();
active.scrollLeft(lastScroll);
}
function update() {
if (!active.length) return;
if (active.scrollLeft() === lastScroll) return;
lastScroll = active.scrollLeft();
scrollbar.scrollLeft(lastScroll);
}
scrollbar.scroll(scroll);
onscroll();
$(window).scroll(onscroll);
$(window).resize(onscroll);
});
It is a quick test rather than a complete generic plugin, but is a good start, I think
Here's my take, #user2451227's is almost perfect, but didn't work with nested overflowed elements and had a number of performance issues, so I rewrote it:
$(function($){
var fixedBarTemplate = '<div class="fixed-scrollbar"><div></div></div>';
var fixedBarCSS = { display: 'none', overflowX: 'scroll', position: 'fixed', width: '100%', bottom: 0 };
$('.fixed-scrollbar-container').each(function() {
var $container = $(this);
var $bar = $(fixedBarTemplate).appendTo($container).css(fixedBarCSS);
$bar.scroll(function() {
$container.scrollLeft($bar.scrollLeft());
});
$bar.data("status", "off");
});
var fixSize = function() {
$('.fixed-scrollbar').each(function() {
var $bar = $(this);
var $container = $bar.parent();
$bar.children('div').height(1).width($container[0].scrollWidth);
$bar.width($container.width()).scrollLeft($container.scrollLeft());
});
$(window).trigger("scroll.fixedbar");
};
$(window).on("load.fixedbar resize.fixedbar", function() {
fixSize();
});
var scrollTimeout = null;
$(window).on("scroll.fixedbar", function() {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(function() {
$('.fixed-scrollbar-container').each(function() {
var $container = $(this);
var $bar = $container.children('.fixed-scrollbar');
if($bar.length && ($container[0].scrollWidth > $container.width())) {
var containerOffset = {top: $container.offset().top, bottom: $container.offset().top + $container.height() };
var windowOffset = {top: $(window).scrollTop(), bottom: $(window).scrollTop() + $(window).height() };
if((containerOffset.top > windowOffset.bottom) || (windowOffset.bottom > containerOffset.bottom)) {
if($bar.data("status") == "on") {
$bar.hide().data("status", "off");
}
} else {
if($bar.data("status") == "off") {
$bar.show().data("status", "on");
$bar.scrollLeft($container.scrollLeft());
}
}
} else {
if($bar.data("status") == "on") {
$bar.hide().data("status", "off");
}
}
});
}, 50);
});
$(window).trigger("scroll.fixedbar");
});
Usage: Add the class fixed-scrollbar-container to your horizontally overflowed element, then include this code. If the container is updated or changes in size, run $(window).trigger("resize.fixedbar"); to update the bar.
Demo: http://jsfiddle.net/8zoks7wz/1/
#Mahn - I made a small update to the following function:
$('.fixed-scrollbar-container').each(function() {
var container = jQuery(this);
if (container[0].offsetWidth < container[0].scrollWidth) {
var bar = jQuery(fixedBarTemplate).appendTo(container).css(fixedBarCSS);
bar.scroll(function() {
container.scrollLeft(bar.scrollLeft());
});
bar.data("status", "off");
}
});
The if statement looks if the container offsetWidth is smaller than the scrollWidth. Else you will also get a fixed scrollbar if the content happens to be smaller than the container. I did not like having a disfunctional scrollbar, hence this edit.
How about restricting the height of the containing div so it stays within the body? You could then have the table scroll within that div.
Working jsfiddle here: http://jsfiddle.net/fybLK/
html, body {height: 100%; margin: 0; padding: 0;}
div {
width:500px;
max-height: 100%;
overflow:auto;
background: steelblue;}
table {
width: 1000px;
height: 1000px;
color: #fff;}
Here, I've set the html and body to 100% height so that the containing div can be sized.
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 need help to create a sidebar. I have it partially working, but there are 2 problems to solve. First, the sidebar only shows the last marker information. I may not have placed some of the sidebar coding in its proper place. Second, (which may be part of the first problem), all the icons appear when using Firefox, but when using IE8 all the icons except the last icon appears. To view the map and code, first go to http://www.askdata.net/propmap/mapdata.php and do the demo (paste addresses into text area), then the map page will be displayed. Thanks again. The code also follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<h1>'Comparables Map'</h1><!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Comparables Map</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
Subject: {
icon: 'http://askdata.net/compmap/mapicons/sub.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp1: {
icon: 'http://askdata.net/compmap/mapicons/c1.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp2: {
icon: 'http://askdata.net/compmap/mapicons/c2.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp3: {
icon: 'http://askdata.net/compmap/mapicons/c3.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp4: {
icon: 'http://askdata.net/compmap/mapicons/c4.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp5: {
icon: 'http://askdata.net/compmap/mapicons/c5.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp6: {
icon: 'http://askdata.net/compmap/mapicons/c6.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(41.95, -87.65),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("genxml2.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + type + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
draggable: true,
icon: icon.icon
//shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
var sidebar = document.getElementById('sidebar');
sidebar.innerHTML = '';
if (markers.length == 0) {
sidebar.innerHTML = 'No results found.';
map.setCenter(new GLatLng(41, -87), 4);
return;
}
var sidebarEntry = createSidebarEntry(marker, type, address);
sidebar.appendChild(sidebarEntry);
}
});
function createSidebarEntry(marker, type, address) {
var div = document.createElement('div');
var html = '<b>' + type + '</b>' + address;
div.innerHTML = html;
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
google.maps.event.addDomListener(div, 'click', function() {
google.maps.event.trigger(marker, 'click');
});
google.maps.event.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee';
});
google.maps.event.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff';
});
return div;
}
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<br/>
<br/>
<div style="width:1200px; font-family:Arial,
sans-serif; font-size:11px; border:1px solid black">
<table>
<tbody>
<tr id="cm_mapTR">
<td width="200" valign="top"> <div id="sidebar" style="overflow: auto; height: 700px; font-size: 11px; color: #000"></div>
</td>
<td> <div id="map" style="overflow: hidden; width: 1000px; height: 700px"></div> </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
IE doesn't like trailing commas at the end of a structure, e.g. the comma after the icon here:
Comp5: {
icon: 'http://askdata.net/compmap/mapicons/c5.png',
}
You're mixing Google Maps API 2 and 3 code. e.g. you declare latlng objects using API 3:
center: new google.maps.LatLng(41.95, -87.65)
but then you use API 2 here:
map.setCenter(new GLatLng(41, -87), 4);
Here is your problem: sidebar.innerHTML = '';
Since it is within the loop, every time it loops, it deletes the prior side bar entry.
Place it fight after function load() { -Outside the loop AND within Load().
Use document.getElementById('sidebar').innerHTML = '';
Also, you have to do something about your customIcons
You can change them to something like this
Subject: { icon: 'http://askdata.net/compmap/mapicons/sub.png' }
And you are done!
EXAMPLE
function load() {
document.getElementById('sidebar').innerHTML = '';
var map = new google.maps.Map(document.getElementById("map"), {
//rest of the code goes here
Also, it might be a good idea to replace this code with CSS:
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
google.maps.event.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee';
});
google.maps.event.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff';
});
CSS option:
#sidebar {
background-color: white;
}
#sidebar div {
cursor: pointer;
margin-bottom: 5px;
}
#sidebar div:hover {
background-color: #eee;
}
I am having a Html hyperlink. I need to link this hyperlink to another page.When I place the mouse over the link. It should show the image.
how to do this
That depends on where you need to display the image. If you are looking for something along the lines of an icon next to or behind the link, you could accomplish this through CSS using a background image on the hover state of the link:
a:link
{
background-image:none;
}
a:hover
{
background-image:url('images/icon.png');
background-repeat:no-repeat;
background-position:right;
padding-right:10px /*adjust based on icon size*/
}
I did this off the top of my head, so you may need to make some minor adjustments.
If you wanted to show an image somewhere else on the page, you could accomplish that using javascript to hide/show the image on the link's mouseover event.
If this doesn't solve your problem, maybe you could supply some additional information to help guide everybody to the right answer.
You can do this easily with jquery:
$("li").hover(
function () {
$(this).append($("<img src="myimage.jpg"/>"));
},
function () {
$(this).find("img:last").remove();
}
);
Some more comprehensive examples which are actually tested:
http://docs.jquery.com/Events/hover
you can do this using javascript..
This will create a square that follows your mouse on div or element hover.
Create a .js file with those contents here:
var WindowVisible = null;
function WindowShow() {
this.bind = function(obj,url,height,width) {
obj.url = url;
obj.mheight = height;
obj.mwidth = width;
obj.onmouseover = function(e) {
if (WindowVisible == null) {
if (!e) e = window.event;
var tmp = document.createElement("div");
tmp.style.position = 'absolute';
tmp.style.top = parseInt(e.clientY + 15) + 'px';
tmp.style.left = parseInt(e.clientX + 15) + 'px';
var iframe = document.createElement('iframe');
iframe.src = this.url;
iframe.style.border = '0px';
iframe.style.height = parseInt(this.mheight)+'px';
iframe.style.width = parseInt(this.mwidth)+'px';
iframe.style.position = 'absolute';
iframe.style.top = '0px';
iframe.style.left = '0px';
tmp.appendChild(iframe);
tmp.style.display = 'none';
WindowVisible = tmp;
document.body.appendChild(tmp);
tmp.style.height = parseInt(this.mheight) + 'px';
tmp.style.width = parseInt(this.mwidth) + 'px';
tmp.style.display = 'block';
}
}
obj.onmouseout = function() {
if (WindowVisible != null) {
document.body.removeChild(WindowVisible);
WindowVisible = null;
}
}
obj.onmousemove = function(e) {
if (!e) e = window.event;
WindowVisible.style.top = parseInt(e.clientY + 15) + 'px';
WindowVisible.style.left = parseInt(e.clientX + 15) + 'px';
}
}
}
Then in your html do the following:
Include the .js file <script type="text/javascript" src="myfile.js"></script>
Put in your web page:
<script type="text/javascript">
var asd = new WindowShow();
asd.bind(document.getElementById('go1'),'IMAGE URL HERE!',400,480);
</script>
Here is a full implementation in a HTML:
<html>
<head>
<title>test page</title>
<style>
div.block { width: 300px; height: 300px; background-color: red; }
iframe { border: 0px; padding: 0px; margin: 0px; }
</style>
<script type="text/javascript" src="window_show.js"></script>
</head>
<body>
<div id="go1" style="background-color: red; width: 200px; height: 200px;"></div>
<script type="text/javascript">
var asd = new WindowShow();
asd.bind(document.getElementById('go1'),'IMAGE URL HERE!',400,480);
</script>
</body>
bye bye!