I'm writing a webpage that uses an image map. The image and map are loaded dynamically. If I click on the area element new content is loaded. Also the url changes its hash (eg. index.php#somepage). I have three layers of pages, the main layer (homepage) has it's own image with a map (index.php), the second layer offers a new image + map (index.php#somepage) and the third layer opens an overlay on the second layer, therefore changing the hash (index.php#somepage_somesubpage).
I now want to be able to send someone a link to index.php#somepage_somesubpage. So I slice the hash and trigger the click-method of the imagemap on the first level to load index.php#somepage when the page is loaded. I added a callback to that, calling the desired click-method of the now updated imagemap. This does not work for some reason I can't figure out. I am able to open index.php#somepage, but when I enter index.php#somepage_somesubpage I end up getting the same result.
Here is the code of $(document).ready:
var cont = $('#content');
$( document ).ready(function() {
cont.load('pages/home.php', function(responseTxt,statusTxt,xhr){
if(statusTxt=='error')
{
cont.load('404.php');
}
lineparser('#content'); //Perform some fancy stuff on the page
var hash = location.hash.replace('#', '');
if (hash != ''){
if(hash.indexOf('_') > 0)
{
//open page with content
$('area[href~="#' + hash.slice(0, hash.indexOf('_')) + '"]').first().trigger("click", function(){
$('area[href~="#' + hash + '"]').first().trigger("click");
});
}
else{
//open menu page
$('area[href~="#' + hash + '"]').first().trigger("click");
}
}
});
});
I solved the problem like this:
$('area[href~="#' + hash.slice(0, hash.indexOf('_')) + '"]').first().trigger("click", [hash]);
Then I added the following:
$(document.body).on('click', "map area", function(e, schachteln){
...
if(schachteln){
$('area[href~="#' + schachteln + '"]').first().trigger("click");
}
}
Related
I have created a google chrome extension to replace certain images from third party websites. I have implement all the programming part but one of my requirements states that
On a slower net connection the original images should not be visible
until it’s replaced by the new images
I am not sure wether it is achievable or not. I want to know what sort of event I should attach here. Can experts give their input on this?
This is the work I have done.
// get current websites base url
var current_website = window.location.href;
//run the code on specific pages
if ($.inArray(current_website, config.target_websites) != -1) {
config.image_config.forEach(function (obj) {
var src = obj.src;
var target = obj.target;
/**find all the occurances in the <img> tag */
var key = 'img[src*="' + src + '"]';
var img = $(key);
/**replace it with the target image*/
img.attr('src', target);
/** check the inline CSS*/
$("[style*=background-image]").css('background-image', function (i, oldimg) {
return oldimg.indexOf(src) == -1 ? oldimg : 'url(' + target + ')';
});
/***check all the external styles for the image*/
$('*').each(function () {
if ($(this).css('background-image').indexOf(src) != -1) {
$(this).css('background-image', 'url(' + target + ')');
}
});
});
}
Since you're already using jQuery, if you're not opposed to a small library (7.25 KB), you can use the jQuery plugin imagesloaded.
Basic usage:
// options
$('#container').imagesLoaded( {
// options...
},
function() {
// your code to run after load
}
);
Then you could do a simple $('img').hide() on load, and $('img').show() after all images have loaded on your particular images.
You can see in the demo that it works for images which have been inserted dynamically into the page as well, which would meet your requirement for that the images of your key be hidden until replaced.
http://imagesloaded.desandro.com/
Using leaflet, I call below function when I add a layer to the map. This function adds popups to each feature.
They work when I click on them but I can't get the bindPopup.openPopup() to work so it opens without being clicked on.
There aren't any errors but the popup doesn't open without being clicked on.
var popupToOpen = null;
var clickedLocationId = 0;
function onEachFeature(feature, layer) {
if (feature.properties && feature.properties.UserName) {
if (feature.properties.MarkerId == clickedLocationId) {
layer.bindPopup("<div id='unlockLocationId'>" + feature.properties.MarkerId + "</div><div>" + feature.properties.UserName + "</div>").openPopup();
} else {
layer.bindPopup("<div id='unlockLocationId'>" + feature.properties.MarkerId + "</div><div>" + feature.properties.UserName + "</div>");
}
}
}
I've tried the way you're trying but the popup doesn't open. Well, you can try opening popup another way.
Create a function where you iterate your geojson layer and open the popup if the id matches. Here is the function
function openMarkerPopup(id){
geojson.eachLayer(function(feature){
if(feature.feature.properties.id==id){
feature.openPopup();
}
});
}
Simply pass the required id to this function, and it'd work.
openMarkerPopup(108);
Here is a working fiddle
I'm making a website to host artwork. The idea is that when the page loads I have JavaScript run a php file that makes a query to the server to get the names and IDs of the image files (artwork.jpg) and display them as thumbnails on a page.
When you scroll over the thumbnail, the artwork is displayed larger on a different part of the screen and the description, specs, etc for the piece of art fades in. My issue is that when I make this second AJAX call it appends the value of the previously moused over image to the screen and does nothing until you've moused over at least two images.
Here's my code for the first ajax call that appends thumbnails to the page and creates a form with the value of the thumnbnail's id:
function getArtDescriptions()
{
$.post('../../path/to/script/get_art.php', function(json)
{
if (json.art.length > 0)
{
$.each(json.art,function()
{
var info =
'<div class = "thumbnail_box">'
+ '<img src = "images/thumbnails/'
+ this['img']
+ '"id = "'
+ this['ID']
+ '"> '
+ '<form id = "art_descriptions'
+ this['ID']
+ '" '
+ 'name = "art_descriptions'
+ this['ID']
+ '">'
+ '<input type = "hidden" id = "descriptions" name = "descriptions" value = "'
+ this['ID']
+ '"></form>'
+ '</div>';
});
}
}, 'json');
}
And this is the code I'm using to make the second AJAX call that is giving me a problem:
setTimeout(function get_id()
{
var tooltipTimeout;
$(".thumbnail_box img").on("mouseenter", function()
{
tooltipTimeout = setTimeout(details(this.id),0);
console.log(this.id);
});
$(".thumbnail_box img").on("mouseleave", function()
{
hideTooltip();
});
function hideTooltip()
{
clearTimeout(tooltipTimeout);
$(".description").fadeOut().remove();
}
}, 800);
//GRAB DESCRIPTIONS FROM DATABASE AND
function details(art)
{
var formname = "#art_descriptions"+art;
var filename = '../../file/path/to/script/get_descriptions.php';
//console.log($(formname).serialize());
$(".thumbnail_box img").on("mouseenter", function()
{
$.post(filename, $(formname).serialize(), function(json)
{
if (json.descriptions.length > 0)
{
//MAKE SURE TO EMPTY OUT DIV CLASSES FOR EACH TAB
$(".description").empty();
$.each(json.descriptions,function()
{
console.log("art method"+this['ID']);
$(".description").append(this['description']+this['ID']).hide().fadeIn("fast");
});
}
}, 'json');
});
};
When I console.log(this['ID']) in the get_id() method the correct value is displayed in the console, but when I console.log("art method"+this['ID'] in the details method I get a value equal to the previously scrolled over thumbnail's ID. I'd really appreciate any insight on this issue.
Is it something to do with the use of setTimeout()? My code would not run without specifying a timeout for the method. For example if I load the page and then scroll over images with ID's 14 and then 13, my console will display:
14
13
art method 14
The issue is that you are appending more of the same events. After the first mouseenter event occurs the details function is called, which then appends another mouseenter event. So subsequent calls will be doing the same thing. You can see an example of this here: http://jsfiddle.net/6qre72fk/.
var counter = 0;
$('#container1').on('mouseenter', function(){
$('#container2').text('First mouseenter');
appendingAnotherMouseEnter();
});
function appendingAnotherMouseEnter(){
$('#container1').on('mouseenter', function(){
$('#container2').text(counter);
counter++;
});
}
You can see how the counter is incremented several times due to all appended the mouseenter events.
var myClass;
jQuery(".option-set a").click(function() {
myClass = jQuery(this).attr("class");
jQuery("a.perma").each(function() {
var _href = jQuery(this).attr("href");
jQuery(this).attr("href", _href + "#filter=." + myClass);
});
});
Im using this code to append the class name of the filters to the end of the permalink for each thumbnail here
The issue Im running into now is that the class keeps getting assigned to the end of the permalink with each click so if I click on print then web then photography the url of the permalink would appear as: /#filter=.print#filter=.web#filter=.photography which still works, however it would be great if for the sake of tidiness it only displayed the last one.
Also once a thumbnail is clicked and the next page is loaded, I need the thumbnails to maintain the current permalink of the filter selected. Any ideas would be appreciated. I just cant seem to figure this out. I truly appreciate the help!!
call it just once not on every click...
jQuery(document).ready(function() {
myClass = jQuery('.option-set a').attr("class");
jQuery("a.perma").each(function() {
var _href = jQuery(this).attr("href");
jQuery(this).attr("href", _href + "#filter=." + myClass);
});
jQuery(".option-set a").click(function() {...});
});
This modification should check if current class filter is not present.
jQuery("a.perma").each(function() {
var _href = jQuery(this).attr("href"),
newHref = _href.indexOf(myClass) === -1 ? _href + "#filter=." + myClass : _href;
jQuery(this).attr("href", newHref);
});
});
And to maintain filtered thumbnail urls on next page load you need to work with server and parse what parameters it passes or use Web storage to save current filtered path and set thumbnail hrefs accordingly on document load.
I'm trying to prevent default links, because I'm dynamically loading pages into divs with jQuery, and the href for each like is just the name before the page (e.g. href=home, and fixing to load to home.php in code below).
//initialize home page as active on load up and deactivate link
var activePage = $('a[href$="home"]');
var activePageHref = activePage.attr('href');
activePage.attr('href', '#');
$('a').click(function(e) {
e.preventDefault();
//set the page clicked on
var page = $(this).attr('href');
//check to see if there are any extras to url for php
var pageCheck = page.split('?');
//sort page type
if (pageType == null) {
//dynamically load the page in div bodycontent
$('#bodycontent').load(page + '.php');
} else {
$('#bodycontent').load(page + '.php?' + pageCheck[1]);
}
//pull up last disabled link for navigation
var setOld = $('a[href$="' + activePageHref + '"]');
setOld.attr('href', '' + activePageHref + '');
//set the new disabled link for navigation
activePage = page;
//make link inactive
$(this).attr('href', '#');
});
It was ok with return false at the end until I added MORE things I needed to happen in the click event function, but to be exact, this part:
//pull up last disabled link for navigation
var setOld = $('a[href$="' + activePageHref + '"]');
setOld.attr('href', '' + activePageHref + '');
//set the new disabled link for navigation
activePage = page;
//make link inactive
$(this).attr('href', '#');
Now the e.preventDefault();, which is from what I understand the correct way of doing what I need to happen, is stopping the entire thing from firing on any links. I'm stuck. I just need to stop default action, and use the function I've built with the extras at the end I've added to make my navigation pretty.
Also to add, I do have a hover function tied to the ul of this navigation, but didn't include it as it shouldn't causing an issue, but I can put it in here if needed. That is the only other thing in this document ready function.
Updated:
Since you change the disabled link's href initially, the attribute-contains selector won't be able to find it again later on to activate it. I would suggest doing this a little bit differently.
You can capture the entire 'disabled link' functionality by using classes. If you add a class to links which should be "disabled" you can prevent the browser from following only links with that specified class.
When you click on an "enabled link", follow it then make it disabled. Then, enable all other links.
$('a').click(function() {
$(this).addClass('disabledLink');
$('a').not(this).removeClass('disabledLink');
}
Then, set up an event listener for the whole document which prevents the default action on links with a certain class.
$(document).on('click', 'a.disabledLink', function(e) {
e.preventDefault();
}
This should achieve what you want as is (i.e. it would replace your entire 'click' handler above). Note with this the href will never be changed to '#'.
Otherwise: just cache the link itself along with its href
//pull up last disabled link for navigation
activePage.attr('href', '' + activePageHref + '');
//set the new disabled link for navigation
activePage = $(this);
activePageHref = $(this).attr('href');
//make link inactive
$(this).attr('href', '#');
You have a syntax error which is causing the JS engine to halt:
//pull up last disabled link for navigation
$('a[href$="' + activePageHref + '"]').attr('href', '' + activePageHref + '');
//set the new disabled link for navigation
activePage = page.attr('href');
/* THIS HERE RETURNS A STRING SO YOU CHANGE activePage to a string. */
// Should probably be:
activePageHref = page.attr('href');
//make link inactive
activePage.attr('href', '#');
Befor you invoke this method you set activePage to be a string, which has no method .attr() so it throws an error and execution of the function stops.