Check http://discoveryobstacleruns.nl/. I can't highlight any text on the site, but it doesn't seem to be a z-index issue and it doesn't have any other means to block text highlighting. Any idea what's causing it?
Edit: disabling JS seems to do the trick, which leads to believe it's Google Maps causing it. However, all elements above the map are clickable, the content is clearly on top of the map so why wouldn't I be able to highlight text?
So, apparently
document.getElementById('map').bind('click', function(e) {
if(e.stopPropagation) {
e.stopPropagation();
}
});
fixes it but gives an error message in console. Which makes sense because it should be:
document.getElementById('map').addEventListener('click', function(e) {
if(e.stopPropagation) {
e.stopPropagation();
}
});
but that doesn't work at all (doesn't give an error though). What gives??
Related
Here is my problem:
when I click submit button on a poorly completed form, a div appears with errors and I want the additional text to appear.
My question: how to detect the appearance of this div (error) from the click?
(function($) {
$(document).ready(function() {
$("document").on('click', 'button', function() {
if ($("#errors").length) {
$("<h1>Something</h1>").insertAfter(".className");
}
});
});
)}
My code works but only after a second click(and it makes sense) but I want from the first click.
You can do it with pure CSS:
inside the error box, make an absolute positioned div.(and style
it how ever you want)
after that on the CSS syntax Select the div as a
child for the main Error box.
So automatically when error appear it means the error box has a class (and also it means your syntax will work because the dive you've created is a child for the error box.)
I would like to achieve the following effect in my dropdown menu, using only CSS and HTML?
Basically the idea is when move the mouse outside the dropdown menu, it keeps open till you click outside the menu or after X seconds. Is it possible to achieve this without any extra libraries or technologies (besides CSS and HTML)?
UPDATE: Now that the question is clarified, it would seem the behavior that you are seeking is not possible without using JavaScript. I did find an example of a pure CSS clickable dropdown, but it does not meet all of your criteria.
--- Original answer before question was clarified ---
You've actually asked two questions here. You originally did not specify a preferred technology to accomplish this, so I found answers to each using jQuery. (These answers use .show() and .hide() to show/hide the element - but you could also use .css() to directly change the CSS yourself, if you prefer.)
Dropdown keeps open until click outside the menu
You can detect a click on the document and then check for immediate ancestry to see if the desired element was clicked. (Partial credit: https://stackoverflow.com/a/3028037/561309)
$(document).click(function(event) {
if($(event.target).closest('#menucontainer').length) {
if($('#menucontainer').is(":hidden")) {
$('#menucontainer').show();
}
}
if(!$(event.target).closest('#menucontainer').length) {
if(!$('#menucontainer').is(":hidden")) {
$('#menucontainer').hide();
}
}
})
Dropdown keeps open until certain time has passed
You can use the setTimeout function to have the CSS change after a certain period of time - example here is two seconds. The .stop method should keep the timeout from executing once the mouse moves back over the menu, but this should be tested. (Partial Credit: https://stackoverflow.com/a/14247096/5365001)
$(document).ready(function(){
$("#menucontainer").click(function(){
$("#menucontainer").toggle());
});
$("#menucontainer").mouseout(function(){
setTimeout(function(){ $("#menucontainer").hide(); },2000);
});
$("#menucontainer").mouseover(function(){
$("#menucontainer").stop(); });
});
});
And, if you wanted to combine both, this should do the trick:
$(document).ready(function(){
$(document).click(function(event) {
if($(event.target).closest('#menucontainer').length) {
if($('#menucontainer').is(":hidden")) {
$('#menucontainer').show();
}
}
if(!$(event.target).closest('#menucontainer').length) {
if(!$('#menucontainer').is(":hidden")) {
$('#menucontainer').hide();
}
}
})
$("#menucontainer").mouseout(function(){
setTimeout(function(){ $("#menucontainer").hide(); },2000);
});
$("#menucontainer").mouseover(function(){
$("#menucontainer").stop(); });
});
});
Say I have a URL: http://rythmengine.org/doc/expression.md#transformer
Immediately after the page is loaded, the anchor is shown correctly, however I have a script to automatically add some iframes across the page, chrome/opera will later on shift away from the anchor #comment, firefox and IE (10) are all good.
Any idea how to fix it in Chrome/opera?
I do not know if I would implement this or not since the iframes do take a noticeable amount of time to load and the user might already be scrolling around the page and get jolted back to the hash element but here is a solution I came up with using jQuery.
Since the iframes are being replaced in the document after it initially loads you can use the .load() function which normally never fires if you just have it on the document.
Demo on this page and edit the fiddle here.
Just add this jQuery code into your script tag where you replace all of the pre code:
Code:
$('iframe').load(function() {
moveToHash();
});
// Scroll to the url hash element
function moveToHash()
{
var hashElem = $(window.location.hash);
// If the hash elment exists
if(hashElem.length)
{
window.scrollTo(hashElem.position().left, hashElem.position().top);
}
}
Edit: had a few mistakes and unnecessary in the code that are now fixed.
When every iframe ends loading tell the browser to go to that hash
$('iframe').load(function() {
document.location.href = document.location.hash;
});
I have a working click-able, collapsible div script:
$(document).ready(function() {
$(".toggle-content").hide();
$(".byline").click(function() {
$(".toggle-content").hide();
$(this).next(".toggle-content").slideToggle(500);
});
});
It started out just like this:
$(document).ready(function() {
$(".toggle-content").hide();
$(".byline").click(function() {
$(this).next(".toggle-content").slideToggle(500);
});
});
Thsi second example worked nicely, but it made it so the user could open all the divs and this made the page too tall. I added the hide() function, but now it's causing this other issue.
I would like to add functionality that when each div is clicked again, it actually closes it (hides it). Then, all divs would be closed (hidden) at this point. Currently, one div is always open (visible). I want both functions if possible...
I'm using accordion elsewhere (I know this could be used here) but I kind of need to get this going quickly so I'm not trying to implement the simpler script here. If I could just find a fix using the existing script, I'd be stoked.
EDIT
I've edited the fiddle to show the improved fix:
http://jsfiddle.net/nicorellius/gsDVS/
This should work. It will ignore hiding the content related to the clicked element and will slideToggle that div accordingly
$(document).ready(function() {
$(".toggle-content").hide();
$(".byline").click(function() {
var $next= $(this).next(".toggle-content");
$(".toggle-content").not($next).hide();
$next.slideToggle(500);
});
});
I've created an example of the problem here:
http://jsfiddle.net/jXLSW/
Notice that when you hover over the image a div shows up at the top of the image. When you leave the image, it goes away. The problem is when you move your mouse over the div at the top. It goes into this show/hide cycle because the mouse is entering/leaving.
This div that shows up at the top is going to contain icons that act as a toolbar. How can I keep the toolbar visible when I hover over it? More importantly, how can I get the hover event to stop cycling?
UPDATE: The interesting thing is the following code works as desired. The problem is that there seem to be livequery issues in that often times, it doesn't actually kick in. Therefore, no div shows up, which is a major problem as well.
$('.has-menu').livequery(function() {
$(this).hover(function() {$(this).find('div.img-menu').slideToggle();}, function() {$(this).find('div.img-menu').slideToggle();});
});
Well, I changed the code to this:
$('.has-menu').live('hover', function(e) {
if (e.type == 'mouseover') {
$(this).find('div.img-menu').slideToggle();
}else{
$(this).find('div.img-menu').slideToggle();
}
});
and now all is well.