I have a function that is called on the window.onload event to create a group of images and render via the scroll event.
function LoadImages(){
var foldGroup = new YAHOO.util.ImageLoader.group(window, 'scroll');
for(var i=0; i<someCounter; i++){
var locationId = locationsArr[i];
foldGroup.registerSrcImage('Location_' + locationId, GetImageDomain()+'/templates/Includes/imagehandler.ashx?locationId=' + locationid);
}
foldGroup.foldConditional = true;
foldGroup.addTrigger(window, 'resize');
}
The problem I'm having is that when the page loads, the images "above the fold" are not rendered until I scroll. Is there any tips on troubleshooting this? I'm totally not a js/frontend guy :)
Thanks in advance!
Since the ImageLoader utility uses page load to examine image positions, you need to create your group and register images before that point. Either inline, as you've discovered, or at DOM ready time, as Tivac suggests.
There is a change to ImageLoader to address this issue, though it won't be available until the next YUI 2 release. You can follow it here - http://yuilibrary.com/projects/yui2/ticket/2527646
I just tried this inline instead and it worked fine:
<script type="text/javascript">
var foldGroup = new YAHOO.util.ImageLoader.group(window, 'scroll');
for(var i=0; i<someCounter; i++){
var locationId = locationsArr[i];
foldGroup.registerSrcImage('Location_' + locationId, GetImageDomain()+'/templates/Includes/imagehandler.ashx?locationId=' + locationid);
}
foldGroup.foldConditional = true;
foldGroup.addTrigger(window, 'resize');</script>
In case anyone has a better answer, I'd definitely be interested.
Don't use window.onload. If you're already using YUI 2 I suggest including the Event module and setting up your ImageLoader onDOMReady. Without seeing the page in question I can't really say if that was your problem or not but it will definitely save you from headaches in the future.
Try to have a go to this plugin jQuery Asynchronous Image Loader and let me know if it suits you.
Related
I have gotten into a small issue I can't seam to wrap my head around, and I hope for some guidesnes from you folks.
I have a timeline with a bunch of groups and subgroups, and the height of the timeline is now bigger than the height of the monitor showing it.
And that is fine it can be scrolled using the scroll wheel on the mouse, however as it is ment to be just a timeline on a wall mounted screen it would be cool if I could make an autoscroll function, that scroll the timeline up and down in a given timeframe.
Unfortunatly I can't figure out where to implement it to make it work.
I have the following code to make a div scroll ( and have tried diffrent ways to make it do it in the vis.js code, but so far no luck )
if anyone knows of a way to make it scroll up and down in a given timeframe i would really appreciate the help.
<script language="javascript">
ScrollRate = 1;
function scrollDiv_init() {
//this can be a class also.
DivElmnt = document.getElementById('MyDivName');
ReachedMaxScroll = false;
DivElmnt.scrollTop = 0;
PreviousScrollTop = 0;
ScrollInterval = setInterval('scrollDiv()', ScrollRate);
}
function scrollDiv() {
if (!ReachedMaxScroll) {
DivElmnt.scrollTop = PreviousScrollTop;
PreviousScrollTop++;
ReachedMaxScroll = DivElmnt.scrollTop >= (DivElmnt.scrollHeight - DivElmnt.offsetHeight);
}
else {
ReachedMaxScroll = (DivElmnt.scrollTop == 0) ? false : true;
DivElmnt.scrollTop = PreviousScrollTop;
PreviousScrollTop--;
}
}
function pauseDiv() {
clearInterval(ScrollInterval);
}
function resumeDiv() {
PreviousScrollTop = DivElmnt.scrollTop;
ScrollInterval = setInterval('scrollDiv()', ScrollRate);
}
</script>
Well, the only tricky part I can see about scrolling timeline at http://visjs.org/examples/timeline/other/verticalScroll.html is that you have to scroll certain element, not the container of the timeline. If you use inspector to find the element with the scrollbar, you'll probably be surprised to see this:
Indeed, if I apply scrolling to that element
var scrollerElement = document.querySelector('#mytimeline1 div.vis-panel.vis-left.vis-vertical-scroll');
scrollerElement.scrollTop = 100;
the timeline gets scrolled vertically. By the way, the vis-vertical-scroll class suggests that we are on the right way. Actually, you should probably use a shorter selector instead:
var scrollerElement = document.querySelector('#mytimeline1 .vis-vertical-scroll');
You can try this via browser console on that page. I think this should be enough for you to implement the desired autoscrolling.
I would like to two show a Chart and also present an url with a link to a bigger Chart. The small preview-image looks and works fine:
<canvas id="image"></canvas>
var ct1 = document.getElementById("image").getContext("2d");
ct1.canvas.width = document.getElementById("image").offsetWidth;
ct1.canvas.height = document.getElementById("image").offsetHeight;
var Chart1 = new Chart(ct1).Line(lineChartData1,options);
The canvas is wrapped in a div, that's why offsetWidth and offsetHeight (to fill this additional div-element). Cause of the responsive-design there is no fixed image. Anyway, this works perfectly. For the URL to the "bigger" image I want to have the URL. I know the toDataURL() will help.
var url = document.getElementById("image").toDataURL();
document.write(url);
There are two disturbing problems with it:
The URL with this way exisists and, but the image has no content.
I also want to give the canvas-image a new size, like I managed with ct1.canvas.width and ct1.canvas.height, but it seems I cannot add this to the toDataURL.
What's wrong with the code?
Okay, I think I got it. Chart.js is animating the charts, so the toDataURL() I mentioned in my first question rendered only an empty image. We have to initiate the toDataURL, not before the animation is done. We handle that with the options:
var options = {
onAnimationComplete: done
}
and a tiny function:
function done() {
console.log('done');
var url=document.getElementById("canvas").toDataURL();
document.getElementById("canvas_link").href=url;
}
I think that's all.
How can i maintain scroll position on postback after sorting a grid table that uses MvcContrib framework?
The usual way is to use some javascript to set the current scroll position to a hidden field, then restore that position on page load (usually in a jquery ready event).
However, that's really just a side effect. You should be doing some kind of ajax command to update the grid rather than a postback, then no scrolling required.
Use jQuery and client side cookie.
$(function(){
var posName = location.href + "_top";
$(window).unload(function() {
var top = $(document).scrollTop();
$.cookie(posName, top);
});
var goTop = parseInt($.cookie(posName));
if (goTop) {
$(document).scrollTop(goTop);
$.cookie(posName, "");
}
});
Hope this code.
A useful solution is posted here : http://www.experts-exchange.com/Hardware/Servers/Q_28082177.html
$(function(){
var top = parseInt($.cookie("top"));
if(top) $(document).scrollTop(top);
$(document).scroll(function() {
var top = $(document).scrollTop();
$.cookie("top", top);
})
});
This is a very old thread but I have posted this for developer who will be searching for this kind of issue, may help.
For 2 weeks now i have tried to impliment the google conversion code to one of my ajax form landing page.
what i had in the ajax after success is
var google_conversion_id = **MYID**;
var google_conversion_language = "iw";
var google_conversion_format = "2";
var google_conversion_color = "ffffff";
var google_conversion_label = "**MYLABEL**";
var google_conversion_value = 0;
$.getScript( "http://www.googleadservices.com/pagead/conversion.js" );
i just didn't work. in firebug i could have seen the js loads after filling the form but no conversion on the page
now what i have ending up doing is adding iframe - hidden, to the success message after the ajax.
this is working but for me is not the right way i wanted to do it
can anyone confirm my code is ok, or help understanding way it didn't work?
I got it to work using a dirty hack.
document.write = function(text) {
$('#footer').append(text);
};
$.getScript( "http://www.googleadservices.com/pagead/conversion.js" );
This is not ideal but it works for me until they remove the document.write from their script.
The current version of google adwords snippet uses document.write (see line 14 of conversion.js) which does not work after your page is loaded. The way I solved my problem is to use an iframe as what you did.
Here are more discussions.
http://groups.google.com/group/adwords-help-advanced/browse_thread/thread/2ef3ee7dc5863e86?pli=1
I'm using Magento to build a storefront - I'm not used to Prototype, but that's what they use by default, so I'm trying to play nice. I have used the tabs setup provided in the Modern theme (built by the Magento team), and I've integrated it into my theme and it works great.
Where I need help is in directly linking to a specific tab - I've created a tab to house the product reviews, and that works fine, but there are links higher up on the page that link to reviews - however, they are linking to another page, which I would rather not use. I'm not familiar with the prototype being used, and I don't know what the link would look like to link to the tab - I'd like the experience to be something similar to:
1) Click on the link
2) The reviews tab opens and the page moves you down to it - like a run-of-the-mill anchor.
The href value of the tab is simply:
javascript:void(0);
The javascript that runs the operation is this:
Varien.Tabs = Class.create();
Varien.Tabs.prototype = {
initialize: function(selector) {
var self=this;
$$(selector+' a').each(this.initTab.bind(this));
},
initTab: function(el) {
el.href = 'javascript:void(0)';
if ($(el.parentNode).hasClassName('active')) {
this.showContent(el);
}
el.observe('click', this.showContent.bind(this, el));
},
showContent: function(a) {
var li = $(a.parentNode), ul = $(li.parentNode);
ul.select('li', 'ol').each(function(el){
var contents = $(el.id+'_contents');
if (el==li) {
el.addClassName('active');
contents.show();
} else {
el.removeClassName('active');
contents.hide();
}
});
}
}
new Varien.Tabs('.product-tabs');
My guess is that I need to invoke the showContent function and just force it to use the reviews tab, but I'm not quite sure how to do this. If anyone could shed some light on it, I'd appreciate it.
Thanks.
Not entirely the right answer, ie it cheats a bit, but we solved this by using jQuery's 'click()' function to simulate the tab click.
ie
Gave the reviews tab title anchor an id of 'tab-reviews-tab' and in our link at the top of the page added the following JS:
jQuery('#tab-reviews-tab').click();
Obviously it would be silly to include jQuery just for this, but if you're using it for something else already, sticking to what you know can work!
If someone is still interested in a solution, here is a hint to the same question:
souce link http://www.magentocommerce.com/boards/viewthread/59930/#t262411
Hope this can help u.
The answer to your question is on gist and ipaste.
Here's this summary:
You need to save the Varien.Tabs object in a var so replace the new Varien.Tabs('.product-tabs'); with var csTabs = new Varien.Tabs('.product-tabs');
If you are only doing this one time just create link as such:
<a href="#" onclick="javascript:csTabs.showContent($$('#product_tabs_email_or_other_id a')[0]);" >The Link</a>
If you expect to do this often just add a new method to the Varien.Tabs (at line 75)
openTab: function(b) {
var controlledLink = $$("#"+b+" a")[0];
this.showContent(controlledLink);
}
Now your links work like this:
Email
Further Info