I am trying to make a HTML element (in this case an object) scroll at the same time I scroll another element (div). So far I have tried multiple ways but cannot seem to get the element I want to move automatically to do so.
Here are a couple of ways I am trying to do this;
$(document).ready(function () {
$("canvas").scroll(function () {
$("FrameStyle").scrollTop($("canvas").scrollTop);
});
});
function elementOnScroll() {
var a = document.getElementById('canvas').scrollTop;
document.getElementById('FrameStyle').scrollTop = a;
}
Neither of these have had any affect on the scroll bar that should be moving and i'm not sure why now.
HTML:
<asp:Literal ID="litWebsiteFrame" runat="server"></asp:Literal>
<div id="canvas">
<canvas id="DrawingCanvas">
<p>
Unfortunately, your browser is currently unsupported by our web application. We are sorry for the inconvenience. Please use one of the supported browsers listed below.
</p>
<p>
Supported browsers: Chrome,
Opera, Firefox,
Safari, and Konqueror.
</p>
</canvas>
</div>
The literal is just the following html code:
"<object data='" + qa.GetURL + "' id='FrameStyle'></object>"
You have missed the selector symbol. FrameStyle and canvas is ID. You need to use the script like below.
$("#FrameStyle").scrollTop($("#canvas").scrollTop);
Related
Is there any way to show keyboard with selected edit text. I used focus() which is perfectly work for in browser. I am able to edit text when browser is ready.
Below is my code
$(document).ready(function() {
var allSelects = document.getElementsByTagName("p");
var lastSelect = allSelects[allSelects.length - 1];
lastSelect.focus();
$("#main_container").click(function() {
lastSelect.focus();
});
});
but when I load this site in mobile device then it is not appears mobile keyboard unless touch.
please find out the solution.
Thanks in advance
I tried to create a working snippet with your code. I changed a little the syntax to use .on() and .trigger() methods.
Maybe you can use the .trigger() method with touchstart to achieve what you want:
$(document).ready(function() {
var allSelects = document.getElementsByTagName("p");
var lastSelect = allSelects[allSelects.length - 1];
$("#main_container").on('click', function() {
lastSelect.focus();
$(lastSelect).trigger('touchstart');
});
$("#main_container").trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main_container">
<p contenteditable=true>Some text</p>
<p contenteditable=true>Some text</p>
<p contenteditable=true>Some text</p>
</div>
Hope it helps.
Try using:
$(document).ready(function() {
var allSelects = document.getElementsByTagName("p");
var lastSelect = allSelects[allSelects.length - 1];
lastSelect.focus();
lastSelect.select();
$("#main_container").click(function() {
lastSelect.focus();
});
});
If you're using iOS/Safari as your mobile device, it doesn't allow setting focus unless it's in response to a user input event (i.e. touch).
I think this is a feature of mobile Safari rather than a bug. In our
work on FastClick, my colleagues and I found that iOS will only allow
focus to be triggered on other elements, from within a function, if
the first function in the call stack was triggered by a
non-programmatic event. In your case, the call to setTimeout starts a
new call stack, and the security mechanism kicks in to prevent you
from setting focus on the input.
See this post
Please see the code below (very stripped back and not my full function). I've also got a fiddle that you can test it at: https://jsfiddle.net/glenn2223/uk7e7rwe/1/
var
hov = $("<div class=\"over\">I'm Over You</div>"),
box = $("<div>Result: WAITING</div>")
$("body").append(hov).append(box);
$("#MeHover").on('mouseleave', function(){
var d = new Date();
box.text("Result: " + hov.is(":hover").toString().toUpperCase() );
});
We have a div and div.over overlaps it slightly. When you move from div to div.over I want the function to return true.
In my full function: this stops it from hiding the div.over element.
Opening it in Chrome it works as expected. However, it's not in pretty much everything else (Tested in: Edge, IE11 and Firefox).
Okay so we've found out why it doesn't work the :hover was removed from .is() a while back.
Rather than changing this question to suit my findings I will ask another (saves confusion).
My New Question: Keep jQuery Appended Element Open When Hovering It
I'm experimenting with a Chrome extension that will remove the ads displayed in the right-hand pane in Gmail and instead put the information I want there. (I haven't decided exactly what to put there yet; vacillating between several ideas, including external content and/or attachments.)
The ads are (usually) contained in a <div class="oM"></div> element. But I can't seem to select that either in my extension or in the console.
I've tested my manifest.json settings by writing an extension that added a superfluous div to the top of the page, and that worked fine -- I just created a new element and
document.body.parentElement.insertBefore(new_el, document.body);
However, what I'm trying to do now is just rip out the ads and put in some dummy text, or just put the text above the ads. This is the main function called in my content_script.js file.
function modifyPage(txt) {
var container = document.getElementsByClassName('oM')[0];
container.innerHTML = txt;
}
function modifyPage(txt) {
var insert = document.createElement('div');
insert.innerText = txt;
var container = document.getElementsByClassName('oM')[0];
document.body.parentElement.insertBefore(insert, container);
}
I've even tried to jQuery:
function modifyPage(txt) {
$('.oM').html(txt);
}
Also, trying to retrieve the <div class="oM"> using the Chrome console returns nothing -- even though I can see it right there in the source.
Set a delay on the execution of your jquery selector. The Google Tubes are a bit more complicated than using static div classes on page load.
Rather than remove the ads with JS, just hide them with CSS:
.oM {
display: none;
}
I'm using AdBlock + Chrome add-in(or extension).
It works very well it's a donation-ware, I'm guessing the author use jquery {display:none } to hide or remove the ads with a custom filter lists.
In mobile web minibrowsers, it seems that the window object makes no sense — since there's only one window to show. Therefore, things like window.pageYOffset=320 make no sense (as far as I can tell).
Given a simple example such as a map zoomin/zoomout such as
<html>
<head>
<title>zoom.html</title>
<script language="javascript">
var zoom=15;
var vpos=window.pageYOffset;
var key="whatever-your-Google-Maps-site-key-is";
function setImgSrc(z) {
document.getElementById('img').src=
"http://maps.google.com/maps/api/staticmap?center=Lisbon,Portugal&zoom="
+zoom+"&size=400x400&maptype=roadmap&sensor=false&key="+key;
}
function zoomin()
{ if(zoom<=18) zoom++; vpos=window.pageYOffset; setImgSrc(zoom); }
function zoomout()
{ if(zoom>=1) zoom--; vpos=window.pageYOffset; setImgSrc(zoom); }
</script>
</head>
<body onload="javascript:setImgSrc(15);">
<h1>zoom</h1>
<p><img id="img" alt="Lisbon,Portugal"/></p><p>
<a onclick="javascript:zoomin()">[+]</a>
<a onclick="javascript:zoomout()">[–</a>
</p><hr></body></html>
which seems to work well on desktop browsers; so I ask: how can I indicate that, on updating the page (onclick doesn't seem to work on minibrowsers, but href does) it should offset the page to the previous position?
(For other reasons, simply (re)loading the page to a given named anchor isn't working on the problem I'm dealing with.)
Thanks in advance for your feedback.
Isn't it lovely when you answer your own questions? Hmmm...
Anyway, according to this, some properties/functions for the JavaScript (JScript?) window object have different representations according to the choice of browser (Firefox, IE, etc.). Therefore, a possible page vertical offset function would be
function setPageVPos(w,vpos) {
try { w.scrollTo(0,vpos); } catch(e) {}
try { w.document.body.scrollTop(vpos); } catch(e) {}
}
The first tries with the window.scrollTo implementation in Firefox browsers, and the second tries with the document.body.scrollTop implementation in IE browsers. I've tested in both Firefox (desktop) browser and in a HP iPaq IE-like (mobile) minibrowser and works on both.
Problem:
I am having trouble implementing a recursive image lazy load in all relevant versions of Internet Explorer. I am using jQuery 1.3.2, and the code that follows works wonderfully on Firefox, Safari, and Chrome.
While I would expect that IE6's javascript engine would choke, I am very surprised to find that it does not work at all on IE7, and only occasionally on IE8. That it works sometimes on IE8 is frustrating, because it seems to imply that if I work hard enough and set enough breakpoints in the Microsoft script debugger, I'll perhaps get it to work after some struggle.
I'm aware that I don't have to do this recursively, and I will reimplement it if I don't find a suitable solution, but the recursive approach is particularly suitable in this example because I would like the images to load one at time, prettily in a row. (And I expect a max depth of around 15)
I've come to StackOverflow with this question because I've run up against this a problem like this in the past and would like to know if anyone has any insights into what the problem may be:
recursion in jQuery?
recursion in IE[6-8]'s javascript engine?
faulty jQuery callbacks/methods-chaining in IE[6-8]?
naive implementation?
Code:
Here is the lazy-load function:
jQuery.lazyLoadImages = function(imgSelector, recursive, fadeIn)
{
var image = $(imgSelector);
if (image.size()) {
image.parents(SAH.imageContentSelector).addClass(SAH.loadingClass);
// the img src attribute is stored in the alt attribute
var imgSrc = image.attr('alt');
image.attr('src', imgSrc).attr('alt','').load(function() {
$(this)
.removeClass(SAH.lazyLoadClass)
.parents(SAH.imageContentSelector)
.removeClass(SAH.loadingClass);
if (fadeIn) $(this).fadeIn(SAH.lazyLoadDuration);
if (recursive) {
var nextPos = eval(parseInt(imgSelector.replace(/.*position-(\d+).*/,'$1')) + 1);
var nextImage = imgSelector.replace(/position-(\d+)/,'position-' + nextPos);
$.lazyLoadImages(nextImage, recursive, fadeIn);
}
});
return true;
} else {
return false;
}
}
The SAH.* variables are just variables stored in a global object, SAH. Here is the relevant section that calls $.lazyLoadImages():
// fade the first image in with the navBar
var firstGalleryImageSelector = 'img#img-position-1-' + galleryId + '.' + SAH.lazyLoadClass;
$.lazyLoadImages(firstGalleryImageSelector,false,true);
navBar.show('slide', { direction: 'right' }, function() {
// load the rest after the navBar callback
$.lazyLoadImages(firstGalleryImageSelector.replace(/position-1/,'position-2'), true, true);
});
The first call to $.lazyLoadImages() is non-recursive; the second one is recursive and fires after a navigation bar slides into the window.
Finally, here is the relevant html:
<div id='position-1-i4design' class='content image' style='width:400px'>
<div class='image-gallery'>
<a class='local-x' href='#position-1-i4design'>
<img alt='/images/press/i4design/i4design-1.jpg' id='img-position-1-i4design' class='lazy-load hide'>
</a>
...
</div>
...
</div>
<div id='position-2-i4design' class='content image' style='width:389px'>
<div class='image-gallery'>
<a class='local-x' href='#position-2-i4design'>
<img alt='/images/press/i4design/i4design-2.jpg' id='img-position-2-i4design' class='lazy-load hide'>
</a>
...
</div>
...
</div>
<div id='position-3-i4design' class='content image' style='width:398px'>
<div class='image-gallery'>
<a class='local-x' href='#position-3-i4design'>
<img alt='/images/press/i4design/i4design-3.jpg' id='img-position-3-i4design' class='lazy-load hide'>
</a>
...
</div>
...
</div>
...
The IEs need onload Events defined for images before you attempt to set that Element's src. All other browsers will handle that just fine; the IEs will choke.
It's likely that your load function in the above will never run for that reason.
Give this a try:
image.attr('alt','').load(function() {
$(this)
.removeClass(SAH.lazyLoadClass)
.parents(SAH.imageContentSelector)
.removeClass(SAH.loadingClass);
if (fadeIn) $(this).fadeIn(SAH.lazyLoadDuration);
if (recursive) {
var nextPos = eval(parseInt(imgSelector.replace(/.*position-(\d+).*/,'$1')) + 1);
var nextImage = imgSelector.replace(/position-(\d+)/,'position-' + nextPos);
$.lazyLoadImages(nextImage, recursive, fadeIn);
}
}).attr('src', imgSrc);
I have done something very similar with a recursive JavaScript function to load images, which works fine in IE.
The major differences that I can see are:
I used a normal JavaScript function, not a jQuery function.
I created each image with jQuery and added it to the relevant container.
I'm not sure if either of those points matters, but just looking at your code, I'm guessing that some more expensive functions would be referencing the image's parents twice, and also fading the image in.
Does it successfully run if those are commented out?