I am working on a puzzle game and everytime I load my webpage it takes a while for everything to load. I tried putting a pause until the ajax is loaded but that doesn't seem to fix it. I just want it to load more smoothly. Here is my jsfiddle :
http://jsfiddle.net/X2EdH/
It's not working properly on there but it demonstrates my problem anyways.
Can anyone fix my code for me?
Here is my webpage with the puzzle:
http://www.acsu.buffalo.edu/~jamesber/GameOne.html#
var plant = "";
$.when($.ajax({"url":"http://beta.botanicalapp.com/api/v1/plants/?photo=true"}))
.done(function(fullData){
(function(){
var rand = Math.floor(Math.random()*fullData.length)
while (rand == 3) {
rand = Math.floor(Math.random()*fullData.length)
}
plant = fullData[rand].plant.image_default.url;
})()
startGame();
});
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'm working with squarespace developer mode, i create some javascript code to get my blog articles or events, the problem i have is that when i use ajax call to get my events to display them in a page i've created, the data is loaded correctly except blocks having audios and videos, i had the same issue with images, but SQS gives a solution for images :
var images = document.querySelectorAll('img[data-src]' );
for (var i = 0; i < images.length; i++) {
ImageLoader.load(images[i], {load: true});
}
But this do not solve the audio and videos blocks, i've tested every single code part existing on SQS forums but none of them work, ive also tested what suggested here but no solution.
Here is my code to get events:
$(document).ready(function(){
var url = '/test-blog?format=json';
$.getJSON(url).done(function(data) {
var items = data.items;
var $_container = $('#events-container-concert');
var result = "";
var appendText = [];
items.forEach(function(elm) {
var body = elm.body;
var $_body = $(body);
appendText.push("<div class='blog-item'><div id='body'>"+body+"</div>");
});
appendText.join(" ");
$_container.html(appendText);
var images = document.querySelectorAll('img[data-src]' );
for (var i = 0; i < images.length; i++) {
ImageLoader.load(images[i], {load: true});
}
});
});
Please is there anyone who had this issue on SQS?
no one answered my question on SQS forums
Thanks
You may use this to automatically load all the blocks (I believe even the image blocks, but if not then pair it with your call to ImageLoader):
window.Squarespace.AFTER_BODY_LOADED = false;
window.Squarespace.afterBodyLoad();
Of course, you'll want to wait until the content is on the page. You can pull up the page you linked-to and then run those two lines via console as a quick test. Worked well for me in that context.
Reference: https://github.com/Squarespace/squarespace-core/blob/master/src/Lifecycle.js
I'm facing shieldUI wicket integration and I'm trying to get base 64 image dfom a shieldUi chart using this tutorial: https://www.shieldui.com/documentation/javascript.chart/exporting
I tried to run the code below:
function render_image_box(chart_id) {
var result = false;
var svg_chart = $("#" + chart_id);
if (svg_chart) {
var chart = svg_chart.swidget();
if (chart != null) {
chart.exportToImage();
result = true;
}
}
// setTimeout(find_image_source, 100) // wait before continuing
return chart;
}
in both the $(document).ready(..) and $(window).load(...) functions and the load event raised from the library (https://www.shieldui.com/documentation/javascript.chart/events/load) as well.
In none of these function chart is rendered yet, so the svg_chart.swidget() returns null.
Is there any other event to use to accomplish my goal or any other way to get the image source?
Thanks in advance,
Laura
You can access the chart instance using .swidget() only after you have initialized it with the .shieldChart() constructor.
To make your code work, you should also turn off animation for the chart, because right after you initialize it, the rendering will not be over and there will be no image contents.
Here is a complete JSBin to get you started...
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 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.