I have set up a search in uiwebview with javascript that works great, but I want to be able to jump to the next found word in the search results. I have succeeded in geting the view to scroll to the first instance by using this code:
if (uiWebview_SearchResultCount == 1)
{
var desiredHeight = span.offsetTop - 140;
window.scrollTo(0,desiredHeight);
}
How can I get this searchresultcount to update to the next found result(say 2, 3, 4, 5, ect...) when user presses button in app?? Thanks in advance.
Do you mean a native button in your app such as a UIButton? In that case, you can use stringByEvaluatingJavaScriptFromString: to execute some JavaScript in your UIWebView. You could do something like this as the handler for your button:
- (void)buttonPressedAction:(id)sender {
NSString * js = #"uiWebview_SearchResultCount++;";
[yourUIWebView stringByEvaluatingJavaScriptFromString: js];
}
I was able to do basically the same thing with this javascript in the webview:
<script type="text/javascript">
var max = 100;
function goToNext() {
var hash = String(document.location.hash);
if (hash && hash.indexOf(/hl/)) {
var newh = Number(hash.replace("#hl",""));
(newh > max-1) ? newh = 0 : void(null);
document.location.hash = "#hl" + String(newh-1);
} else {
document.location.hash = "hl1";
}
}
</script>
Then sending this JavaScript call with my IBAction like this:
- (IBAction)next:(id)sender {
[animalDesciption stringByEvaluatingJavaScriptFromString:#"goToNext()"];
}
call this function with the appropriate row?
function scrollToDesiredHeight(row) {
var desiredHeight = span.offsetTop - 140;
window.scrollTo(0,row * desiredHeight);
}
Does this work for you?
Related
I enter to browser this link
https://google.com.vn;
Google redirect to https://www.google.com.vn;
I want alert full url redirect.
I used this code:
processNewURL: function(aURI) {
var tabIndex = gBrowser.tabContainer.selectedIndex;
var referredFromURI = gBrowser.tabContainer.childNodes[tabIndex].linkedBrowser.webNavigation.referringURI.spec;
alert(referredFromURI);
},
But it always alert https://www.google.com.vn,
and I tested with some short link example bit.ly/R9j52J . It isn't ok.
Please help me.
this works, i also show 2 methods to get to webNavigation. the second method is just longed winded way to teach other stuff, recommended way is method 1.
var processNewURL = function(e) {
console.log('e:', e);
var win = e.originalTarget.defaultView;
//start - method 1 to get to webNav:
var webNav = win.QueryInterface(Ci.nsIInterfaceRequestor)
.getInterface(Ci.nsIWebNavigation);
var referredFromURI = webNav.referringURI;
//end - method 1
//start - method 2 long winded way:
/*
var domWin = win.QueryInterface(Ci.nsIInterfaceRequestor)
.getInterface(Ci.nsIWebNavigation)
.QueryInterface(Ci.nsIDocShellTreeItem)
.rootTreeItem
.QueryInterface(Ci.nsIInterfaceRequestor)
.getInterface(Ci.nsIDOMWindow);
var tab = domWin.gBrowser._getTabForContentWindow(win);
//console.log('tab:', tab);
var referredFromURI = tab.linkedBrowser.webNavigation.referringURI;
*/
//end - method 2
if (referredFromURI != null) {
win.alert('referred from:' + referredFromURI.spec);
} else {
win.alert('not redirected');
}
}
gBrowser.addEventListener('DOMContentLoaded', processNewURL, false);
I'm a quite new in javascript, and I'm trying to do a script to get a soft color change, bbut when a call the objetc to be changed, I got some problems. My code is this:
<script lenguage="javascript">
hexadecimal = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F")
function convierteHexadecimal(num){
var hexaDec = Math.floor(num/16)
var hexaUni = num - (hexaDec * 16)
return hexadecimal[hexaDec] + hexadecimal[hexaUni]
}
function convierteHexadecimal(num){
var hexaDec = Math.floor(num/16)
var hexaUni = num - (hexaDec * 16)
return hexadecimal[hexaDec] + hexadecimal[hexaUni]
}
color_decimal=0
function degradado(){
color_decimal ++
color_hexadecimal = convierteHexadecimal(color_decimal)
document.getElementById("title").style.color = color_hexadecimal + color_hexadecimal + color_hexadecimal
//la llamo con un retardo
if (color_decimal < 255)
setTimeout("degradado()",1)
}
degradado()
this is my code, but when I load it in chrome, an issue appears in:
document.getElementById("title").style.color
My h1 is:
<h1 align="center" id="title">Degradando...</h1>
I notice the id is correctly write, So, what is the problem?
Try to do this:
window.onload = function(){
document.getElementById("title").style.color
}
I think you are accessing the element even before it is created.
Call your function from the onload handler:
window.onload = function() {
degradado();
}
so that it will run after the DOM is loaded.
I know that you don't normally like doing things like this but I'm at University and have to do a project with several different stylesheets for the same page. I have been given JavaScript code to enable me to resize the page when the window is resized.
This code works however I am getting a peculiar effect on one of the stylesheets where the content div takes up most of the page when it shouldn't, this page has measurements in ems whereas my other stylesheets use px but I am supposed to use ems for at least one page. Although I could give my lecturer a reason for it being bigger I would prefer to fix the problem. The JavaScript code I am using is shown below:
function smoothresize() {
blockwidth = 59.4; /*This is in ems as per the lecturers request a well and is the size of the container div I created*/
minmargin = 0;
minsize = 10;
emwidth = (minmargin * 2) + blockwidth;
computeResize(emwidth, minsize, false)
}
function computeResize(wide, minsize, jerk) {
windowpixels = document.documentElement.clientWidth;
pixelsize = windowpixels / wide;
emsize = calculateEmsize(pixelsize, minsize, jerk);
b = document.getElementsByTagName('html')[0];
b.style.fontSize = emsize + "em";
}
function calculateEmsize(psize, minsize, jerk) {
if (psize > minsize) {
raw = psize;
}
else {
raw = minsize;
}
if (jerk) {
result = ((Math.floor(raw)) / 16);
}
else {
result = raw / 16;
}
return result
}
This is where I have Implemented the code in my XHTML:
<body onload="smoothresize()" onresize="smoothresize()">
I wouldn't be able to use jQuery as a solution to the problem either, I would only be able to modify the code given.
Any help in this matter Would be greatly appreciated
Check out jQuery's user interface plugin. It contains a "resizable" option; you ought to be able to add <script type="text/javascript">window.onload=function(){};</script> that loads the desired JQUI function upon page load.
I have a simple image rotator on a website consisting of 4 images that have to appear for a few seconds before showing the next one. It seems to work on its first cycle but then when it gets back to the first image it doesn't show that one but works again from the second image and so on always missing that image on every cycle.
The function is called using onLoad EH in the body. In the body there is an img with my first image inside it. I'm a noob so please be gentle if I've missed anything out.
Here's what I have...
<body onLoad="sunSlideShow()">
<img src="IMAGES/slider1.gif" alt="slide-show" id="mySlider" width="900">
<body>
var quotes = new Array ("slider2.gif", "slider3.gif" ,"slider4.gif", "slider1.gif");
var i = 0
function sunSlideShow()
{
document.getElementById("mySlider").src = ( "IMAGES/" + quotes[i] );
if (i<4)
{
i++;
}
else
i = 1;
setTimeout("sunSlideShow()", 3000);
}
sunSlideShow()
Change it to this:
else
i = 0;
setTimeout("sunSlideShow()", 3000);
Further to my other answer (which was wrong!)... Try this:
http://jsfiddle.net/pq6Gm/13/
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setInterval(sunSlideShow,3000);
});
var quotes = [
"http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2007/07/11/sun128.jpg",
"http://icons.iconarchive.com/icons/robinweatherall/seasonal/128/sun-icon.png",
"http://www.astronomytoday.com/images/sun3.gif",
"http://mariusbancila.ro/blog/wp-content/uploads/2011/08/sun.png"
];
var i = 0;
function sunSlideShow() {
document.getElementById("mySlider").src = quotes[i];
if (i < (quotes.length-1))
{
i++;
}
else
{
i = 0;
}
}
</script>
<body>
<img src="http://mariusbancila.ro/blog/wp-content/uploads/2011/08/sun.png" id="mySlider"/>
</body>
==================================================================
EDIT: This is wrong... please find my other answer on this page.
==================================================================
To start with, I wouldn't use ... you're better off starting the script with jquery once the page is loaded.
Add this to your head section:
<script type="text/javascript">
$(function () {
sunSlideShow();
}
</script>
That will fire the sunSlideShow function once the page is loaded.
Then, you're starting your slideshow with var i = 0... but when you've got to the fourth image, you're setting it to 1?
I would be tempted to use a while loop to achieve what you want.
Something like this:
<script type="text/javascript">
$(function () {
sunSlideShow();
}
var quotes = new Array ("slider2.gif", "slider3.gif" ,"slider4.gif", "slider1.gif");
var i = 0;
function sunSlideShow(){
while (i<4)
{
document.getElementById("mySlider").src = ( "IMAGES/" + quotes[i] );
if (i<4)
{
i++;
}
else
{
i = 0;
}
sleep(3000);
}
}
function sleep(miliseconds){
var currentTime = new Date().getTime();
while (currentTime + miliseconds >= new Date().getTime()){}
}
</script>
This script hasn't been tested... but it should start the sunSlideShow function once the page has loaded and then change the image every 3 seconds.
I too searched the web trying to find a general solution to the problem of rotating an image about its center. I came up with my own solution which works perfectly. The basic concept is simple: rotate the entire context by the desired angle (here called 'tilt'); calculate the image's coordinates in the NEW coordinate system; draw the image; lastly, rotate the context back to its original position. Here's the code:
var xp = rocketX * Math.cos(tilt) - rocketY * Math.sin(tilt);
var yp = rocketX * Math.sin(tilt) + rocketY * Math.cos(tilt);
var a = rocketX - xp;
var c = Math.sqrt(a*a + (rocketY-yp)*(rocketY-yp));
var beta = Math.acos(a/c);
var ap = c * Math.cos(tilt + beta);
var bp = c * Math.sin(tilt + beta);
var newX = rocketX + ap;
var newY = rocketY - bp;
context.rotate(tilt);
context.drawImage(littleRocketImage, newX-9, newY-40);
context.rotate(-tilt);
In the penultimate line, the constants '9' and '40' are half the size of the image; this insures that the rotated image is placed such that its center coincides with the center of the original image.
One warning: I use this only for first quadrant rotations; you'll have to put in the standard tests for the other quadrants that change the signs of the components.
Update: 2021
You can use the light-weight library Ad-rotator.js to setup simple Ad-rotation like this -
<script src="https://cdn.jsdelivr.net/npm/ad-rotator"></script>
<script>
const instance = rotator(
document.getElementById('myelement'), // a DOM element
[ // array of ads
{ url: 'https://site1.com', img: 'https://example/picture1.jpg' },
{ url: 'https://site2.com', img: 'https://example/picture1/picture2.jpg'},
// ...
]
);
</script>
<body onLoad="instance.start()">
<div id="myelement"></div>
<body>
Reference Tutorial
JS beginner here;
Ok, I'm trying to manipulate the functions of Codaslider for a layout. What I need is the ability to use an image for slide dynamic slide navigation.
I've solved the issue for dynamic hashing, however I'm stuck at modifying the HTML. I've tried a few things but I figure this is the easiest way...
This is what I've got so far;
function navigate ()
{
var url = document.getElementById('back');
url.href = page_back();
return url;
}
function page_back(inward)
{
new Object(inward.location.hash);
var rehash = inward.location.hash.match(/[^#]/);
if (rehash == 1) {
rehash = 5;
}
else if(rehash == 2) {
rehash = 1;
}
else if(rehash == 3) {
rehash = 2;
}
else if(rehash == 4) {
rehash = 3;
}
else if(rehash == 5) {
rehash = 4;
}
else if(rehash == null) {
rehash = 5;
}
else{rehash = "Invalid URL or REFERRER"}
inward.location.hash = rehash;
return inward.location.href;
};
Implemented here;
<a href="#5" id="back" class="cross-link"> <input type="image" class="left_arrow" src=
"images/leftarrow.png" onclick="navigate()" /></a>
What I expect this to do is change the href value to "#1" so that Codaslider will do it's thing while I provide a stationary dynamic image for slide browsing.
Anyone have any idea what i'm doing wrong? page_back works fine but navigate seems to be useless.
sup Josh
so to start this line here
new Object(inward.location.hash);
Unless i completely missed some javascript weirdness that line should not do any thing
the function
function page_back(inward)
takes a inward argument but you call it from navigate without an argument
url.href = page_back();
ps. the location object can be found on window.location
happy coding :D