The code below works, but there is an issue with it.
That issue is that unless the alert(this.href); - (about line 11) is in the code the following function does not work.
//There are pages which make up 2 chapters in this content
//We shall attempt to grab all the links from these pages
var c;
var chapters = new Array();
chapters[0] = "original/html/0/ID0EFJAE.html";
//Loop through each page of links
$.each(chapters, function(key, value) {
$("#theContent").append("<div class='chapterindex" + key + "'>working</div>");
$(".chapterindex" + key).load(value + " .content");
alert(this.href);
$(".chapterindex" + key + " div.link a").each(function(intIndex) {
alert(".chapterindex" + key);
});
});
If I take the first alert out of line 11 then the last alert doesn't fire. What am I doing wrong?
The delay that the alert is causing is allowing the data in your load call to load. I suspect that when you remove the alert the data does not load in time.
Try using a callback with your load call, something like (code not tested) -
$(".chapterindex" + key).load(value + " .content",function () {
$(".chapterindex" + key + " div.link a").each(function(intIndex) {
alert(".chapterindex" + key);
});
});
The first alert is probably giving the load function enough time to finish so when you take it out the load function is not done when its trying to fire your second alert.
Related
I want to change the url on scroll horizontally.
Used window.location.replace window.location.assignevent.preventDefault();
http://igv.org/web/examples/events/track-url.html#/locus/chr1:155,167,355-155,190,548 on scrolling, url changes to this
http://igv.org/web/examples/events/track-url.html#/locus/chr1:155,168,900-155,192,093
But it reloading or refreshing continuously
Used below steps
var myIgvBrowser = igv.createBrowser(div,options);
myIgvBrowser.on('locuschange', function (referenceFrame, label) {
var change_url = HASH_PREFIX + label + id + id_val;
alert(change_url);
// if (window.location.href !== redirectLocation) {
window.location.replace(change_url);
// return false;
});
&
var myIgvBrowser = igv.createBrowser(div,options);
myIgvBrowser.on('locuschange', function (referenceFrame, label, event) {
var change_url = HASH_PREFIX + label + id + id_val;
window.location.replace(change_url);
event.preventDefault();
});
alert(change_url); - working
on scrolling, alert shows changed positions but window.location.replace not working
How to solve this and if any help thanks guys in advance
Seems like you are doing a window.location.replace every time your page loads up and you don't check if you really need to do window.location.replace or not.
You need to check if location.replace is really required or not at first place, since you are only changing the hash value, replace it with
window.location.hash = label + id + id_val;
I've written a script that searches for a string on a page and scrolls to it. I'd like for it to highlight the instances of the string on the page as well but that part of the script isn't working.
Here's my code:
$("#search").click(function(){
var thing = $("input#searchItem").val();
$(window).scrollTop($(".content:contains('" + thing + "'):first").offset().top -83);
$('.content').each(function(index, element) {
$(this).find(thing).each(function(i) {
this.html('<i class="found">' + thing + '</i>');
});
});
});
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.
I have a div in a page called firstpagemidle.php,
DIV id="news" data-pageNum_rsnews="1" data-totalRows_rsnews="9" class="new">
And I load this page in another page by this code:
$('#bigmidlecontent').load("../"+tab+"/"+stab+"midle.php",'',loadboth);
And now I want to access the variable PageNum from the page that is already loaded. How can I do that?
I use the function loadboth() exactly the same way as friends mentioned, but it didn't work.
After that I change the ID pagenum_rsnews to (pagenum) and now it works.
You'd do that in the callback function you're referencing, as the elements would be loaded then
$('#bigmidlecontent').load("../"+tab+"/"+stab+"midle.php",'',loadboth);
function loadboth() {
var pagenum = $('#news').data('pageNum_rsnews'); // 1
}
jQuery apparently converts data to lower case:
$('#bigmidlecontent').load("../" + tab + "/" + stab + "midle.php", '', loadboth);
function loadboth() {
var pagenum = $('#news').data('pagenum_rsnews'); // 1
}
For extracting all data, use:
$('#bigmidlecontent').load("../" + tab + "/" + stab + "midle.php", '', loadboth);
function loadboth() {
var pagenum = $('#news').data(); // {totalrows_rsnews: 9, pagenum_rsnews: 1}
}
Using swipe.js (www.swipejs.com), I'd like to attach it to generated DIVs.
In a Javscript loop, I am doing the following:
$.each( data, function( i, item) {
resultHtml = '<div id="swipe-div-' + item.i + '" class="swipe">' +
'<ul>' +
'<li>Test 1<li>' +
'<li>Test 2<li>' +
'</ul></div>' +
'prev' +
'next';
$('div#results').append( resultHtml );
new Swipe(document.getElementById('swipe-div-' + item.i));
}
: I am having trouble with my prev and next links. I suspect it may have to do with the following line:
new Swipe(document.getElementById('swipe-div-' + item.i));
which is not initializing the swipe object properly.
When I click on prev or next, I get the following error in the Javascript console:
"Uncaught SyntaxError: Unexpected token ILLEGAL"
How can I fix this?
Okay, since nobody has answered this, I figured out how to solve my own problem:
Rather than generating and appending text strings, I just created the structure using document.createElement and appendChild.
At the end of creating the structure, I added in the following code:
var slider = new Swipe(document.getElementById('result-' + item.i));
clickPrev(slider, prev);
clickNext(slider, next);
and added the following functions:
function clickNext(swipeObj, link) {
link.onclick = function () {
swipeObj.next();
return false;
}
}
function clickPrev(swipeObj, link) {
link.onclick = function () {
swipeObj.prev();
return false;
}
}
It was easier to follow this way and works great now.