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>');
});
});
});
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'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");
}
}
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 building Wordpress website where all pages are being loaded using Ajax. I'm using script created by Chris Coyer that can be found here. Code below will add specific tags to all links on the website. Wordpress will try to load content from those links using Ajax. Problem is that those attributes are being applied on links to PDF and ZIP files which are meant to be downloaded, not loaded into page.
How I can exclude specific file formats from getting those attributes? I already tried something like this $internalLinks = $("a[href^='"+siteURL+"']:not([href$=/*.pdf])") but that didn't work for me. Am I doing something wrong?
Below is part of the original code that adds attributes. Full code can be found on this JSFiddle page. Thanks!
var $mainContent = $("#main-content"),
siteURL = "http://" + top.location.host.toString(),
$el = $("a");
function hashizeLinks() {
$("a[href^='" + siteURL + "']").each(function() {
$el = $(this);
// Hack for IE, which seemed to apply the hash tag to the link weird
if ($.browser.msie) {
$el.attr("href", "#/" + this.pathname).attr("rel", "internal");
} else {
$el.attr("href", "#" + this.pathname).attr("rel", "internal");
}
});
};
You can't use * as a wildcard like a filespec. Just use this:
$internalLinks = $("a[href^='"+siteURL+"'):not([href$='.pdf'])");
You can apply a filter on all matched links:
var $mainContent = $("#main-content"),
siteURL = "http://" + top.location.host.toString(),
$el = $("a");
function hashizeLinks() {
$("a[href^='" + siteURL + "']").filter(function(){
return this.href.match(/[^\.pdf]$/i);
}).each(function() {
$el = $(this);
// Hack for IE, which seemed to apply the hash tag to the link weird
if ($.browser.msie) {
$el.attr("href", "#/" + this.pathname).attr("rel", "internal");
} else {
$el.attr("href", "#" + this.pathname).attr("rel", "internal");
}
});
};
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.