Change link behavior in Webview - javascript

I am working in Titanium Mobile. My Question is :
Can I change the behavior of the link present in the webview???
i.e. Suppose I have a text : My Name is Burhan. In this text Burhan is a link. So I need when I click on Burhan It should open a window in which I place my Labels etc. Is it possible ???
PS: I want solution just on click of the link and not on click of the webview..
PS: How I can track that the link in webview is clicked .. ??? (I need only this )
Any help ???
Thanks in advance.

The simplest solution is to use Ti.App EventListeners.
In your WebView you need to provide a tag like
<span onclick="Ti.App.fireEvent('url', {information: 'thatcanbeuseful', like: 'anUrl'});">Your Name</span>
Then you need to provide a global event listener:
Ti.App.addEventListener('url', function(e){
// open a window or someting or open an URL with:
Ti.Platform.openURL(e.anUrl); // from passed object
});

Related

Menu with Anchor to another page and ID does not work

i'm facing this strange problem for the first time.
Probably is something really easy but i can't get out.
If you open the menu in this page:
https://danielepinazzi.com/fabric/
and you try to navigate into that page with anchor link, it works perfectly.
If you open the "contact us" page and then try to click on another link in the menu, like "what we do" it will close the menu and do nothing. But if you try to right click and select "open in a new tab", it work.
Edit because i need to explain better:
I've already added the absolute link in the menu, not only the anchor.
The section #whatwedo is linked with https://danielepinazzi.com/fabric/#whatwedo
I'm using Chrome on a Mac.
Can someone explain this to me?
Thank you and have a nice day you all.
I inspected whats going on there, you have a code block as mentioned below;
When i do what you said on the problem, isSamePage returns true because you are splitting anchor tag on href variable
$this.attr("href").split("#")[0]
and it returns https://danielepinazzi.com/fabric/ which is already in url.
That makes isSamePage true according the code and prevents the action.
$(".mk-fullscreen-nav-close, .mk-fullscreen-nav-wrapper, #fullscreen-navigation a").on("click", function(e) {
$(".mk-fullscreen-nav").removeClass("opened"),
$(".mk-dashboard-trigger").removeClass("fullscreen-active"),
$("body").removeClass("fullscreen-nav-opened");
var anchor = MK.utils.detectAnchor(this)
, $this = $(this)
, href = $this.attr("href").split("#")[0]
, url = window.location.href
, isSamePage = -1 !== url.indexOf(href);
anchor.length ? (isSamePage && e.preventDefault(),
MK.utils.scrollToAnchor(anchor)) : "#" === $this.attr("href") && e.preventDefault()
})
You have probably added anchor links via the menu like #link. Those links only work if you are on the page where these anchors are placed. If you want them to work when you are on another page, you should add them as /fabric/#link since the homepage for your project is /fabric/.
Note: it is easiest if you use absolute URL's in your menu (i.e. https://danielepinazzi.com/fabric/#whatwedo instead of just #whatwedo. Don't forget to update those if you migrate to a production environment.

JavaScript update <a> href and then follow it and keep intended target

I have a problem. I need to update href and then follow it. It may seem that it's quite easy task, because I just could return false, create new link element and then initialise click on it or maybe just change location.href...
So problem is: How to know if user held [CTRL] button or right-clicked and chose one of Open in New Tab, Open in Incognito Tab or Open in New Window... or of course simply clicked with left-button...
This href must be updated on click. Mouse hover may be an option but this will fail in mobile and tablets :)
P.S. if you give a negative evaluation it would be nice to know why :)
Okay, so here's a workaround for you:
HTML
Click
JQuery
$('a').on('mouseenter focus', function() {
// Re-write url
$(this).attr('href', 'redirected_location');
});
$('a').on('click', function(e) {
// Prevent default behaviour (i.e. opening link)
e.preventDefault();
// Re-write url
$(this).attr('href', 'redirected_location');
// Re-direct to link
window.location = $(this).attr('href');
});
The idea here is that we rely on other user interaction, other than clicking, to re-write the HREF.
I have chosen mouseenter and focus to cover both mouse and keyboard events.
This means that the URL they will follow, even if they right-click and chose new window, will be correct.
just send them to a redirect page with the refferal url.
Link
Then on the redirect page you do something like this.
header('Location: '.$_GET['refferal_href']);
And if you don't have php enabled use javascript to grab the redirection url.

How to know StartChild when using roundabout.js

Hi I am implementing roundabout with 5 images using roundabout.js that is shown here
http://fredhq.com/projects/roundabout/demos/standard
So I want to know current front image so that i can implement some trigger whenever user click on it. I don't want to enable trigger when user clicks on the images shown behind the front image.
Trigger is launched only for front images and natural behavior happens for rest of the images at back.
I tried using roundabout_startChildren() function in my Html file but not able to know how to exactly use this function.
NOTE:- i have never used this plugin so please instead of down voting the answer correct me if you think i have misunderstood your problem
here is the DEMO
switch the click off for all movable elements as the page loads and on it when the clicked element hasClass roundabout-in-focus and then animateToNextChild
$('ul').roundabout()
$('ul li').off('click');
$('.roundabout-moveable-item').click(function(e){
if($(this).hasClass('roundabout-in-focus'))
{
$(this).on('click')
$('ul').roundabout("animateToNextChild")
}
})
EDIT as per the requirement mentioned in comment
DEMO
$('ul').roundabout()
$('.roundabout-moveable-item').click(function(e){
if($(this).hasClass('roundabout-in-focus'))
{
window.open('http://www.google.com')
//use --window.location="http://www.google.com"-- to open in same window
}
})

My website alway scroll up when i click link?

I have a link
Text
when i click this link my page alway scroll up to the top. How do i manage it that when i clik this link my page not scroll up to the top.
Javascript? or something
thank you
you can add some javascript to deny the default behavior.
function myClickHandler(e) {
// your code here
// ...
// new code
if(e.preventDefault){ //firefox,chrome
e.preventDefault();
}
else { // ie
return false;
}
}
if you provide some more detail/example code, we can give you a more specific answer.
Not sure what you are trying to do, but maybe you are thinking of:
<a href="JavaScript:void(0);" >Text</a>
that'll do nothing.
You might want to post an example of a link that does this. My guess is that it's because you don't have an href set for the link or you ended the link href with a "#someId"
It's not that it's scrolling to the top of the page, it's refreshing the page.
An example of a top link:
Some Link
Somewhere <!-- will refresh and you end up at the top -->
EDIT
Ah... Now that you've provided the link... it's the Hash # that's the problem.
To avoid that from happening ( I'm guessing you want to do some Javascript on the link and you're trying to get it to do something.. ) then you need return false; in your javascript. This will return false from the link and won't follow it.
It is because you have only the hash # as "URL". It makes the browser jump to the top of the page (normally it would jump to the element with the corresponding ID if you specify any).
But what is the purpose of such a link if you don't use it?
The [relative] URL # is treated by browsers as the top of the page. Either change the link's href attribute to refer to another resource, or add a click event handler that prevents the default action. Better yet, if you intend it to be a button that triggers a click event, replace the <a> tag with a <button> which is more semantically correct anyway.
<body>
<h1 id="top">First Headline</h1>
<!-- your document here-->
go to Top
</body>
With Javascript you could add some smoothness like slowly scroll up. HTML Links

A few jQuery questions

First of all, here is the site I am working on.
I am trying to get a modal window to pop-up when elements in the Flash are clicked on. Which at this point I have about 90% working when you click on the warrior image. Below is a list of issues I am still trying to solve that I hope you can help me with...
The modal background doesn't fill up
the whole page like it should.
I cannot get the close button to work
I need to set the vidname variable in
both the Flash and Java to load in a
dynamic HTML file. Depending on which
image is clicked on. My naming
convention will probably be something
like vid-1.html, vid-2.html, etc.
If you need to look at the .js file you can view it at /cmsjs/jquery.ha.js
Below is the ActionScript I currently have...
var vidname = "modal.html";
peeps.vid1.onRelease = function() {
getURL('javascript:loadVid(\'' + vidname + '\');');
};
Well I have one for you.
Your current close code is
$('#modalBG, #modalClose').click(function(){
closeModal();
});
If you click the background after a video loads you'll see that the modal does close. The reason your close button does not work is because #modalClose does not exist in the DOM when you are binding to the click function.
You need to either rebind the modalClose element when you modify the DOM or use live. If you use live you just need to change your click code to this:
$('#modalBG, #modalClose').live("click", (function(){
closeModal();
});

Categories