I want to write a very simple script and need some help. Here is what I want the script to do.
There is a div element with no background color by default. When you click on this div it needs to be filled with the red background color. then, when you click on this div again it should have no background again.
CSS code below:
<head>
<style type="text/css">
#red,#green,#blue,#black{
width:200px;
height:100px;
margin-bottom:25px;
border:solid red 1px;
}
</style>
HTML and some JS code:
<body>
<div id='red'></div>
<script type="text/javascript">
<!--
var x = document.getElementById('red');
x.onclick = function(){
x.style.backgroundColor = 'red';
}
//-->
</script>
For the JavaScript, this will work with one click of red and then bring it back to nothing:
var clicked = false,
x = document.getElementById('red');
x.onclick = function(){
x.style.backgroundColor = clicked ? 'transparent' : 'red';
clicked = true;
};
Related
I'm using Mapbox with wordpress.
I see that the popup by default has anchor position which generates css.
I can't manage to center the popup on click : for example, some of the popup are truncated when i open it because the map does'nt center on it.
I tried all the solutions i found here, none of them work. I'm not using Json but wordpress loop to display markers and put content in popups. I find no solutions for anything else than json .
So i just want to know if it's possible to entirely disable the position of the popup so that i can put it always on the map corner, whatever the marker I click..
EDIT
Finally I just changed some css to make the popup stick to the left of the map: I disabled the anchor default position with transform:none, I place it in the corner of the map container with top and left..And then I disabled the arrow around the popup.
.mapboxgl-popup{
transform:none !important;
top: 15%;
left: 10px;
}
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-center .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip{
display:none !important;
}
use this example from officail map box example :
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Display a popup</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-96, 37.8],
zoom: 3
});
var popup = new mapboxgl.Popup({closeOnClick: false})
.setLngLat([-96, 37.8])
.setHTML('<h1>Hello World!</h1>')
.addTo(map);
</script>
</body>
</html>
and you can see the example result on the below link :
https://www.mapbox.com/mapbox-gl-js/example/popup/
From what I can tell, although jQuery-Mobile-powered pages can contain divs with overflow set to scroll or auto, and these divs can be scrolled with the one-screen bar or the mouse wheel, they cannot be scrolled using the arrow keys, page-up/page-down, or home/end.
Instead, the official "page" div (with data-role="page") absorbs all this input. Perhaps other divs can't even acquire focus, I'm not sure.
Is there any way around this?
EDIT: JSfiddle of simple example: https://jsfiddle.net/qogz0shx/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js">
</script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"/>
<style>
#outer {
overflow:scroll;
height: 50vh;
width: 50vw;
}
#inner {
height: 500vh;
width: 500vw;
}
</style>
<div data-role="page">
<div id="outer">
<div id="inner"></div>
</div>
</div>
Same example without the external files: https://jsfiddle.net/xr0hjjjc/
<style>
#outer {
overflow:scroll;
height: 50vh;
width: 50vw;
}
#inner {
height: 500vh;
width: 500vw;
}
</style>
<div data-role="page">
<div id="outer">
<div id="inner"></div>
</div>
</div>
In Chrome, if you click on the div in the second example and press the arrow keys, you should see the scroll bars move. If you do the same with the first one, they won't.
You're right, internal <div>s cannot be scrolled using keyboard. My approach to this limitation is simple:
create new handler for up/down/PageUp/PageDown keys
when those keys are pressed, get element under mouse
if the element contains the keyboardScroll class, scroll it accordingly
So, mouse position sets which element has to be scrolled.
Updated JSFiddle (click to focus the "run" quadrant before scrolling)
JavaScript
var currentMousePos = { x: -1, y: -1 };
$(document).on("pageinit", "#page", function(event)
{
$(document).mousemove(function(event)
{
currentMousePos.x = event.pageX;
currentMousePos.y = event.pageY;
});
// keyboard handler
$(document).on("keydown", function(e)
{
// get element under mouse
var element = document.elementFromPoint(currentMousePos.x, currentMousePos.y);
// search for scrollable element in parents
while (!$(element).hasClass("keyboardScroll") && $(element).parents().length !== 0)
element = element.parentElement;
if (!$(element).hasClass("keyboardScroll"))
return; // no scrollable element found
// set scroll "speed"
var delta = 10;
if (e.keyCode === 38) // up
delta *= -1;
else if (e.keyCode === 40) // down
delta *= 1;
else if (e.keyCode === 33) // pageup
delta *= -10;
else if (e.keyCode === 34) // pagedown
delta *= 10;
else
return;
// scroll element
$(element).scrollTop($(element).scrollTop() + delta);
// stop event from propagating to jQuery Mobile handlers
e.preventDefault();
e.stopPropagation();
});
});
On revisiting this with new searches ("focus" is a better keyword here than "scroll"), I discovered a much simpler solution.
Just give the div in question a tabindex attribute, to make it focus-able. Make the value -1 so it won't interfere with the tabindex of anything else. (This means that if the user keeps pressing tab, the div in question will never be focused. Change the index to a positive number if you want it to be focus-able that way).
<div id="outer" tabindex="-1"> </div>
<!-- Containing element with overflow:scroll or whatever -->
and that's it. Once the div is clicked it should override whatever jQuery Mobile does to prohibit focus. New JSFiddle here.
I have an accordion menu that I have tweaked to suit my needs. My last stumbling block is that I have an image (see attached image) of a FedEx Courier that I need to lay on top of the menu and yet still allow users to click through it to activate (access) the accordion menu. The image is a separate image that is set to the desired alpha as created in Photoshop. The file is merely a snapshot of how it would look if it was the way I wanted it.
If this is even possible, what code would I use and exactly where would I place it? If in the CSS file, where does it go and between which lines?
Original full size Image file
You can apply the css:
pointer-events: none;
to the image above the links.
See fiddle https://jsfiddle.net/4zgcrkyz/
pointer-events: none; is a suitable solution if you do not need to care about IE < 11. More info on compatibility here.
Alternatively you can use elementFromPoint() which has compatibility IE > 5.5
The following trick allow you to select under your cover image without using pointer-events: none;
https://jsbin.com/tuhotagize/edit?html,output
Explanation:
At click on cover image.
Hide cover image temporary.
Get mouse coordinates.
Get HTML element under that mouse coordinates (so you know what under the cover).
Trigger click event on that HTML element.
Show cover image again.
Another alternative solution to your problem, which does not include any JS is:
Trim your image in PhotoShop as should appear inside the menu. Use CSS background-image property on it
Use the courier FedEx image only as CSS background-image the body of your page.
You can achieve the same visual effect using only CSS.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
img {
position: absolute;
top: 0;
left: 0;
opacity: 0.4;
}
a {
display: block;
width: 300px;
height: 20px;
background-color: greenyellow;
}
a:hover {
background-color: #FF0000;
}
</style>
<script>
window.app = {
show: function () {
document.getElementById('cover').style.display = '';
},
hide: function () {
document.getElementById('cover').style.display = 'none';
},
event: null,
start: function () {
document.getElementById('cover').addEventListener('click', function (event) {
this.hide();
this.event = event;
var target = document.elementFromPoint(event.pageX, event.pageY);
this.show();
target.click();
}.bind(this));
var links = document.querySelectorAll('a');
for (var i = 0, len = links.length; i < len; i++) {
links[i].addEventListener('click', function (event) {
alert('click on ' + event.target.id);
}.bind(this));
}
}
};
</script>
</head>
<body onload="window.app.start();">
<img id="cover" src="http://placehold.it/200x200" />
<a id="a1">link</a>
<a id="a2">link</a>
<a id="a3">link</a>
<a id="a4">link</a>
<a id="a4">link</a>
<a id="a6">link</a>
</body>
</html>
I have noticed in some site such as http://mashable.com that when you open page and try to scroll it , it appear to load images when you reach it .. i don't know if it's a just flicker effect or it's really done to make less load of images till scrolling to it ?
Here is a script to get you started. You'll need to do something with the image urls rather than just displaying them, but I'm sure you will figure this out...
<!DOCTYPE html>
<html>
<head>
<style type="text/css" >
div { border: solid 1px black; height:200px; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<script type="text/javascript">
var pixelsBetweenImages = 200;
var imagesArray = {}
var imagesArray = new Array(); // regular array (add an optional integer argument to control array's size)
imagesArray[0] = "";
imagesArray[1] = "";
imagesArray[2] = "";
imagesArray[3] = "/images/ImageThree.gif";
imagesArray[4] = "/images/ImageFour.gif";
imagesArray[5] = "/images/ImageFive.gif";
imagesArray[6] = "/images/ImageSix.gif";
imagesArray[7] = "/images/ImageSeven.gif";
imagesArray[8] = "/images/ImageEight.gif";
$(window).scroll(function() {
var scrollpos = $(window).scrollTop() + $(window).height();
var imageIndex = Math.floor(scrollpos / pixelsBetweenImages);
if (imagesArray[imageIndex] != "") {
var div = $("#" + imageIndex);
div.html(imagesArray[imageIndex]);
imagesArray[imageIndex] = "";
}
});
</script>
<div>Visible on first load</div>
<div>Visible on first load</div>
<div>Visible on first load</div>
<div id="3">3 </div>
<div id="4">4 </div>
<div id="5">5 </div>
<div id="6">6 </div>
<div id="7">7 </div>
<div id="8">8 </div>
</body>
</html>
The way this site does it is to apply an invisible style to all the images at page load and when scrolling it applies display: block with some effect.
you can attach your load/download image function to scroll event.
Some event sample here.
I'm working on adding content to a web-page with javascript. The problem is that the CSS in IE (7) doesn't seem apply to the dynamically added content.
Here's an example document..
<html>
<head>
<style type="text/css">
p.foo { color: #FF4400 ; background-color: #000000 }
p.bar { color: #FF0000 ; background-color: #000000 }
</style>
<script type="text/javascript">
function add() {
var node = document.createElement("p");
node.setAttribute("class", "bar");
node.appendChild(document.createTextNode("New Content"));
document.body.appendChild(node);
};
</script>
</head>
<body onload="add()">
<p class="bar">bar</p>
<p class="foo">foo</p>
</body>
</html>
In FF, the newly added 'New Content' paragraph has the style applied to it, but in IE, it doesn't. This seems like something obvious enough that it ought to be easily searchable-for, but some obvious queries gave me nothing.
So what's the trick?
Why not use a framework, such as jQuery, MooTools, extJs, Dojo, Prototype, etc., that has already solved all of these problems?
But if you insist on doing it yourself, try using:
function add() {
var node = document.createElement("p");
node.className = 'bar'; // <- use in leu of setAttribute()
node.appendChild(document.createTextNode("New Content"));
document.body.appendChild(node);
};