Is there a way to highlight text based upon an incoming link.
Here is what I am trying to achieve. I have a page that has several links to anchors on another page. In addition to going to the named anchor on the child page, can I also make the text of the anchor link on the child page bold.
i.e.
Parent Page
Dog
Car
Tree
Child Page
Dog-Lab
Car-Audi
Tree-Pine
So if you were to click on Car on the parent page, it would take you to the Car info on the child page, and Car would be bold (but Dog and Tree would not).
basically what you want to do is use a jquery or javascript function to get the anchorlink.
var url = window.location.href;
var anchorlink = url.split('#');
this will leave you with an array ["page url", "anchor"]
so you can use anchor[1] to get the string of the anchorlink.
then you can use jquery to find the element with an id that matches anchor[1] and set the font-weight:700
$(document).ready(function(){
$('#'+anchor[1]).css('font-weight','700');
})
or if you have a class for bold styling
$(document).ready(function(){
$('#'+anchor[1]).addClass('bold');
})
Related
I wanted to take an image from one HTML file and when the user clicks a button, that image moves to a standard cell of a different HTML file.
To move an element between pages, if both pages are on the same domain, you can get the HTML of the element, put it in localStorage, then delete the element. On the other page, poll the localStorage for changes, the parse the element and use it in the DOM.
I wrote a set of functions to do that. On the sending page use this code. Call the function moveElement with the element you want to move to the other page.
const page="Your Page Name";
function moveElement(element){
const prefix="_elementmover_"+page+"_";
localStorage.setItem(prefix+"htmlToMove",element.outerHTML);
localStorage.setItem(prefix+"changedHtmlToMove",localStorage.getItem(prefix+"changedHtmlToMove")*1+1);
image.remove()
}
On the receiving page, use this code. The function receivedElement will be called wth the element.
const page="Your Page Name";
function receivedElement(element){
// Do whatever you want with the element here.
}
(()=>{
const prefix="_elementmover_"+page+"_";
let getChangeNum=()=>localStorage.getItem(prefix+"changedHtmlToMove")*1;
let oldChangeNum=getChangeNum();
let checkForChanges=()=>{
let newChangeNum=getChangeNum();
if(oldChangeNum!=newChangeNum){
let element=new DOMParser().parseFromString(localStorage.getItem(prefix+"htmlToMove"),"text/html").querySelector("html>body>*");
receivedElement(element)
}
oldChangeNum=newChangeNum
setTimeout(checkForChanges,100);
}
checkForChanges();
})();
Please note that the page variable should be unique on each set of pages it is on, but both pages must have the same value for it to work properly.
I know how to do using html and JavaScript
<h2 id="C4">Chapter 4</h2>
Jump to Chapter 4
This is what I am trying in SAPUI5. On click to Back to top link it should navigate to helpButton. This is not working for me.
<Button id="helpButton" icon ="sap-icon://sys-help" />
<Link text="Back to top"
press="#helpButton"/>
You can actually do this in UI5. A little differently than how you tried though.
The problem is that the UI5 ID is not the same as the HTML ID (which is what you want to use with the hash-link for the browser to jump there). Also, you cannot specify a URL inside the press "attribute" of the link. The press "attribute" is in fact an event (so you can only specify an event handler name).
So to be able to do what you want, you have to use the href property of the Link and fill it with the HTML ID of the target control. You can do this on the onAfterRendering hook of the view (that's when you are able to find the HTML ID of the target control):
onAfterRendering: function() {
var oRef = this.byId("target").getDomRef();
this.byId("link").setHref("#" + oRef.id);
}
You can find a working fiddle here: https://jsfiddle.net/93mx0yvt/26/.
I'm making a page that has 4 in-page tabs on it. To link to those tabs, the URL is
URL/#tab-1-tab; URL/#tab-2-tab etc
Now, in one of the tabs I want to have buttons that link to specific points on a page inside another tab, but not sure if it's actually possible to link to.
I've made the anchors on that page with
<a name="1"></a>
But I can't figure out how to link to them. I tried
URL/#tab-4-tab/#1 and URL/#tab-4-tab#1
Not sure what else to try. The links do work if I go to the tab with the anchors, then erase the tab url bit and just put in the anchor link, so instead of
URL/#tab-4-tab, I type in URL/#1
Then it jumps to the right point.
But that doesn't work if I'm on any other tab or page.
Is it possible to do this somehow?
If your using tabs to switch div CSS properties like display:none / display:block then you will need some jQuery / JavaScript to switch them based of URL no differently then your jQuery that listens for the tabs "onclick" event then shows that relative div.
First step would be to obtain a JavaScript URL reader that listens for variables or hashtag-bookmarks. Here is an example of a variable reader I have used before.
http://jsfiddle.net/googabeast/hhkuj/
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
//usage
var myVar = getUrlVars()["tab"];
That would make the URL format slightly different then your above posting, something more like "index.php?tab=2" / "index.php?tab=3" etc...
Next phase would be generate a switch based off the incoming URL variables to properly show the requested div.
In a SPA, using a navigation framework such as Sammy.js, how could I use in page named anchors for in-page navigation?
e.g. Say I have a route like localhost/myapp/#/somerecord/1 where the application loads somerecord with id = 1.
However somerecord is really complicated and long. I want to be able to jump to a certain section using a named anchor.
Say an article element is defined like <article id=section-d> ... </article> and I just link to like <a href=#section-d>Section D</a> it technically works, but the URL reads like localhost/myapp/#section-d, this breaks the navigation stack. Hitting the Back button takes me back to localhost/myapp/#/somerecord/1 and without jumping back to the top.
The preferred action would be to either jump back to the top or to the previous page. Any ideas on how to accomplish this?
Effectively, you have to define your URL as a regular expression, and allow an optional bookmark hash at the end of it; something like:
get(/#\/somerecord\/(\d+)(#.+)?/, function() {
var args = this.params['splat'];
var recordId = args[0];
var articleId = args[1];
});
This should match any of the following routes:
#/somerecord/1
#/somerecord/1# (treated as if there is no article id)
#/somerecord/1#section-d (articleId = '#section-d')
You should then be able to use the articleId to find the matching element and manually scroll. e.g. in the last route above, using jQuery you could do something like:
var $article = $(articleId);
$(document.body).animate({ scrollTop: $article.offset().top });
});
I've just written up a more comprehensive article about this (using Durandal), if you're interested: http://quickduck.com/blog/2013/04/23/anchor-navigation-durandal/
Edit
Link is dead. The article available here http://decompile.it/blog/2013/04/23/anchor-navigation-durandal/
I've had the same problem using durandal with sammy.js. Basically, you have to create a (invisible) route for each anchor you want on your page. See a post from me about the solution I found: http://papamufflon.blogspot.de/2013/04/durandal-scrollspy.html
I want to find and replace functionality in contentEditable div. I want to add one toolbar in which one find and replace button placed. when one press this button then one popup window open and ask for keyword to search when keyword is given then it will find only in given div id not whole document and highlight it.
Is this jquery plugin what you are looking for?
You can call it like this:
jQuery(function()
{
var options =
{
exact:"exact",
keys:"lorem ispum"
}
$("#myDiv").SearchHighlight(options);
});