I am using jQuery ImageAreaSelect for image area selection like this:
$('#image').imgAreaSelect({}); //#image is a img id
Below this image, I have a bunch of image thumbnails, clicking on which will populate that image as #image. This way user can load each image and then select its area.
My problem is that when a new image is loaded, the dotted line which indicates the area selected for previous image still remains and gets shown on the newly loaded image. I do not want this and want this to go away every time a new image is loaded.
I read and tried this answer and this answer but they are not working for me...
My current (non-working) code is:
$('#load').click(function() {
$('#image').imgAreaSelect({hide:true,remove:true}); //try to remove old instance
$('#image').imgAreaSelect({}); //create new instance...
});
Any help is appreciated.
I have never used such pluggin but the documentation explains how to disable/re-enable it.
Save the variable when you initialize the pluggin
var ias = $('#image').imgAreaSelect( // your original initalization
Then call disable on it as the documentation states:
ias.setOptions({hide:true,remove:true})
Try this way
$('#load').click(function() {
$('#image').cancelSelection();
});
I know there are a couple of questions to scrollTop already out there but I haven't really seen anything resembling my problem.
Using jquery 1.7.2 on an IE9 we have a page with three Tabs (JqueryUI).
The Data is connected and that resulted in us only having the current tab on the page. Changing tabs will remove the unseen one and reload the one we jump into.
The Scroll-Positions are stored correctly in variables on the base page but trying to set that position in the document-ready-function does not work.
An alert shows the correct number, so the function is actually called but the scrollbar does not move.
Calling the same function with a button on the page afterwards however works perfectly.
The document-ready-function on the tab's jsp is quite simple:
<script type="text/javascript">
jQuery(document).ready(function(){
setAhaScrollbar();
});
</script>
and the called function is quite simple as well:
function setAhaScrollbar() {
var scrollWert = $('#scrollbarAnhaengeartikel').val();
alert(scrollWert);
$('#anhaengeGridScrollable').scrollTop(scrollWert);
}
Called from document-ready it does nothing. Called from a button later on it works fine.
The div where the scroll position is supposed to be set is defined with overflow: auto and a fixed height
crollTop( value )
Description: Set the current vertical position of the scroll bar for each of the set of matched elements.
.scrollTop( value )
value
Type: Number
An integer indicating the new position to set the scroll bar to.
More Information
As the documentationsaid value should be number.
Try
var scrollWert = Number($('#scrollbarAnhaengeartikel').val());
or
var scrollWert = parseInt($('#scrollbarAnhaengeartikel').val());
Apparently it was primarily a timing problem. Maybe there were still things going on when document ready fired.
Changing that function to
jQuery(document).ready(function(){
setTimeout("setAhaScrollbar()", 500);
});
did the trick so my problem is solved.
I'm using the following snippet if jQuery JavaScript to return a hash value at the end of a URL. It works perfectly in FF but the alert on line 4 returns empty in Chrome.
Seems like the window.location.hash.substring(1) line does not work. I have also tried window.location.hash.replace("#", "");
// Map Clicks
$("#tab2.tab_content #map").delayed('click', 500, function() {
state = window.location.hash.substring(1);
alert(state);
jsonLink = 'http://ml.uscm.org/ministries.json?state=' + state + '&active=true&callback=?';
getMapResults();
return false;
});
What's the trick to retrieving a hash value from the URL in Chrome?
The URL is built like this :
http://www.ourdomain.com/thispage.html#IL
Where IL is a two letter abbreviation for a state. I want to get the "IL".
I have a working demo here:
http://richcoy.com/locator/index2.html
Click on the Search by State tab in Chrome then click on a state and you'll see the issue. The browser shows that the url that it wants to go to is built correctly. –
Thanks.
You may want to try this instead:
$(window).on('hashchange', function() {
console.log(window.location.hash.substring(1));
});
The click event triggers before the hashchange event so you can't rely on your map click implement (even if you delayed it).
Supported browsers list for hashchange: http://caniuse.com/hashchange
In case you don't have to use hash, here is a simpler solution:
$("#tab2.tab_content #map a").click(function() {
console.log($(this).attr('href').substring(1));
});
In summary, you shouldn't use any kind of delayed methods.
Isn't the problem quite apparent, or am I being silly? In the following function, you handle the clicks on the map, you listen to click, delay them by 500ms and then run through your function.
$("#tab2.tab_content #map").delayed('click', 500, function() {
state = window.location.hash.substring(1);
alert(state);
jsonLink = 'http://ml.uscm.org/ministries.json?state=' + state + '&active=true&callback=?';
getMapResults();
return false;
});
But at the point where you alert your state, it's empty because you haven't yet set it. Your return false; will also stop the browser from changing the hash.
Try this function, and I bet you'll get something:
$("#tab2.tab_content #map").delayed('click', 500, function() {
setTimeout(function(){
var state = window.location.hash.substring(1);
alert(state);
jsonLink = 'http://ml.uscm.org/ministries.json?state=' + state + '&active=true&callback=?';
getMapResults();
}, 500);
});
A quick way to get it working would be to do the following:
$("#tab2.tab_content #map a").delayed('click', 500, function(e) {
state = $(this).attr('href').replace('#', '');
alert(state);
});
you could then easily change the hash manually by also adding this into the callback:
window.location.hash = state;
but your real issue is that your a (anchors) aren't changing the hash themselves, which makes it seem like there is somewhere in your code that's stopping it.
In Chrome, only can set hash will anchor, eg:
<a href="#exemplo" />
If you do this by setting a hash of another element, try to exchange it for an anchor.
in this link you see the chrome accepts the hash property:
http://www.w3schools.com/jsref/prop_loc_hash.asp
How about you modify your code a bit,
$("#tab2.tab_content #map a").click(function(){
console.log($(this).attr("href"));//this outputs the value to the console
});
this will output #CA for California
i.e.
$("#tab2.tab_content #map a").delayed('click', 500, function() {
//state = window.location.hash.substring(1);
state = $(this).attr("href").substring(1);
alert(state);
jsonLink = 'http://ml.uscm.org/ministries.json?state=' + state + '&active=true&callback=?';
getMapResults();
return false;
});
In your code if you place a breakpoint (ln36 state = window.location.hash.substring(1);) when the event is fired, the window has not yet changed location so the hash does not exist at that point.
When I check in Chrome's inspector, it appears that your anchors uses href from a different namespace, which isn't declared in your svg tag.
<a xlink:href="#SD">
Firefox seems fine with that, but Chrome doesn't seems to guess how to interpret this correctly.
From this link, I've found:
Bind the required namespaces
SVG is a namespaced XML dialect, and as a consequence all the XML
dialects used in your SVG documents must be bound to their namespace
as specified in the Namespaces in XML recommendation. It is sensible
to bind the SVG and XLink namespaces at a minimum, and possibly also
the XML Events namespace.
So, try to add xmlns:xlink="http://www.w3.org/1999/xlink" to your SVG tag.
Edit
As I can see in the image you posted, you declared xmlns:xlink well in your .svg. But in the rendered page by Chrome, there is no such thing!
Here's what I see (Chrome 30) :
<svg height="100%" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 165 96" preserveAspectRatio="meet" style="overflow: hidden; position: relative;">
From here, it's beyond my knowledge: can some namespace for a tag be stored somewhere else by the browser? I've searched through its DOM properties, can't find it.
Another clue: you declared xmlns:svg too.
Quoted from the former link:
Be careful not to type xmlns:svg instead of just xmlns when you bind
the SVG namespace. This is an easy mistake to make, but one that can
break everything. Instead of making SVG the default namespace, it
binds it to the namespace prefix 'svg', and this is almost certainly
not what you want to do in an SVG file. A standards compliant browser
will then fail to recognise any tags and attributes that don't have an
explicit namespace prefix (probably most if not all of them) and fail
to render your document as SVG.
Additional doc about xlink
I appreciate all the help and suggestions.
The answer to the question ended up that I needed to make the paths for the URLs absolute, not relative.
So as an example, a line in the JavaScript went from:
"AL": {tooltip: 'Alabama', attr: {fill: '#F9B625', href: '#AL'}},
To:
"AL": {tooltip: 'Alabama', attr: {fill: '#F9B625', href: 'http://richcoy.com/locator/index2.html#AL'}},
Once I changed this for all 50 states a click on the map pulled the data from the jasonp feed correctly and displayed it on the page in Chrome, as well as in Firefox.
var myURL = document.URL; //example http://www.ourdomain.com/thispage.html#IL
var getTheMagicWord = myURL.split("#");
console.log(getTheMagicWord[1]); //logs IL
I have onmouseover and onmouseout attributes on pictures on page. When submitting onmouseover and onmouseout cause images to fail (returns image source not found icon)
<input type="image" src="../../Content/Resources/save.png" onmouseover="mouseOverForImage('save', '../../Content/Resources/save_mouse_over.png')"
onmouseout = "mouseOverForImage('save', '../../Content/Resources/save.png')" id="save"
title = "Save" />
And Javascript:
function mouseOverForImage(imgId, imgSrcs) {
document.getElementById(imgId).src = imgSrcs;
}
I've made a page on jsfiddle to test your issue (note that you need to run the page in order to see the images with relative paths, that's a jsfiddle issue happening in all browsers).
Hover the [+] image button (it will turn into [?]) and click it. While the page is being loaded you can mouseover/out/over/out/over... as many times as you want and it will work: the image will change and no 404 will occur.
I am using Chrome 20.
This leads me to the following questions:
What's your Chrome version and can you reproduce the issue in Safari? I recall Webkit had a bug that displayed images quite randomly...
Have you posted the code exactly? Are you 100% sure that there's no missing quote, or "0" instead of "o", or some issue with letter case?
When you submit the form, does your page's (or iframe's) URL change at the same time? If so - your relative paths won't work anymore and you'll get your 404. Can you test it by setting a full path to the image's src? Maybe also log the current url?
Can some other code (onsubmit event?) interfere with your form? Can you post more code or create a jsfiddle that reproduces your issue?
Do we/I understand your problem correctly? :)
Thanks.
You can try something like this
function mouseOverForImage(imgId, imgSrcs) {
var image = new Image();
image.src = imgSrcs;
image.onload = function() {
document.getElementById(imgId).src = imgSrcs;
};
}
In place of using mouseover and mouseout events try using mouseenter and mouseleave. It usually works in these types of problem.
I have the following code I am using for a photo gallery. In Internet Explorer 7 & 8 the gallery stops working. The image fades out after several clicks and the new image does not fade in. After this occurrence happens (about 6 or so clicks) the gallery does not function at all. All other browsers work flawlessly. I have also used this code in several other pages with no problems.
$("#list-image-carousel").find('a').click(function(e) {
e.preventDefault();
var src = $(this).attr("href");
$("#main-img").find('img').fadeOut(400,
function() {
$("<img/>").attr("src", src).load(function() {
$("#main-img").find('img').attr("src", this.src).fadeIn(400);
})
})
});
Any ideas are greatly appreciated. Thanks in advance!
Here's one possibility: it looks like you're establishing the "load" handler on your temporary image element after you're initializing the "src". That's a problem in IE - reverse the order of those things and see if that helps.
$("#main-img").find('img').fadeOut(400,
function() {
$("<img/>").load(function() {
$("#main-img").find('img').attr("src", this.src).fadeIn(400);
}).attr("src", src);
})
If the image is in the cache, then when you assign the "src" attribute IE will immediately ready the element. If there's no "load" handler defined at that point, it won't queue up the event at all.
Also, just as a note, the construct
$('#main-img').find("img")
could be written:
$('#main-img img')
Doing it like that is a little shorter, but in truth it may or may not actually be faster. Probably would be, I think.