dpiearcy

Never mind. I didn't have time to wait since this has to be done before Monday. So I just added 300px of padding to the bottom of my body and that seems to be the right amount and was a hack fix. Only thing I could think to do.

Try to keep this short. I have a monitor set up flipped so the resolution is 768px wide by 1360px tall. This is a touch device. Since my client didn't want to pay for me to develop an app for said touch device but wanted his websites just displayed as links (sites are responsive and local) I'm using Google Chrome to display these pages. They are all three HTML 5 and he's running XP so IE (not that I would have used it anyway) is out of the question. My problem is "Y" axis touch scrolling does not work with the drivers included with this touch device. So I've been looking for javascript solutions online. Tried tons of them. The only thing that seems to work is Zynga Easy Scroll. With the exception that it will only scroll to a certain point on the page then stops. It will not allow access to any information further down the page. My assumption is that the DOM I'm targeting has now scrolled too far up the page and I no longer have access to it. Currently though, that DOM is the body tag itself. I have also tried placing the entire page in a <div> with the scrollable applied to it but have the same results so applying it to the body tag isn't the issue. Anyone have experience with this javascript and have a solution for this not to bounce back and leave the bottom third of my page from displaying? I mean anything short of me starting all over using jquery mobile or Sencha Touch 2. Like I said, client doesn't want to pay for the time it would take for me to totally rebuild pages as an app. But those would just create an HTML 5 application anyway so don't see that even that's a solution with no "Y" axis scrolling ability. Thanks, Dave

I use colorbox a LOT and have never had this problem. For some reason, regardless of the gallery I open, even if it only has one image, it counts that first image 7 times. So if I actually do have 7 images, it says I have 14 and will show that first image 7 times. Thought I may have a bad copy. So grabbed a copy from another working site I developed and used it. Same problem. Thought perhaps it was my version of jquery I was calling via google. So grabbed a local copy of jquery that was on the other site with colorbox working correctly. Same problem. Didn't see how it would make a difference but even grabbed that local copy of the CSS for colorbox and used it. Same problem. Since this is an HTML 5 document (since I'm using some CSS 3 effects to animate some clouds moving in the background) I even changed my doc type declaration so it was no longer HTML 5. Same problem. Changed my actual script to the exact same script I am using on the working page which really the only difference there was I wasn't declaring pic size. No effect there either. I'm at wits end. Took the rel off that first image and am just using the <a class> to link the images. No effect. That first image still gets counted 7 times. I renamed all the images for a gallery and put them in a different folder. Same thing. I have no idea what else to do or what to try. Never had this problem with colorbox before can can't imagine what could be going on. Of course I googled and it doesn't seem that anyone else has had this problem that I could find. Read the FAQ on his page and nothing to learn there. Am loading color box.css first, then jquery, then colorobox.js last. Changed my doc type already. I'm at wits end here. Anyone else experienced this before or would know what could be causing this problem? I'd owe you huge if you know the answer and could steer me in the right direction. At this point I'm just going to walk away from it and work on another project until I hear from someone on here because I've already tried everything I could think to try. Weirdest thing. Thanks!

Hmmm... upon further inspection... (I put a min-height on the container and the images) I see the container when I come back at the height it's supposed to be. No image. So this is telling me those images are not being loaded before the slide script fires. Try a .load on that script. See if that works.

Ok. This might get a bit lengthy but hopefully I can describe what's going on. Basically, for my nav I'm swapping content with Javascript. Here is that tid bit: jQuery.noConflict()(function($){ var hash = window.location.hash.substr(1); var href = $('#nav li a').each(function(){ var href = $(this).attr('href'); if(hash==href.substr(0,href.length-5)){ var toLoad = hash+'.html #xhg'; $('#xhg').load(toLoad) } }); $('#nav li a').click(function(){ var toLoad = $(this).attr('href')+' #xhg'; $('#xhg').fadeOut('slow',loadContent); $('#load').remove(); $('#wrapper').append('<span id="load">LOADING...</span>'); $('#load').fadeIn('slow'); window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5); function loadContent() { $('#xhg').load(toLoad,'',showNewContent()) } function showNewContent() { $('#xhg').fadeIn('slow',hideLoader()); } function hideLoader() { $('#load').fadeOut('slow'); } return false; }); }); Works great. Get a nice fade transition I was looking for. My problem lies in the div #home has the first thing flexslider by mootools. Have also tried camera and they both do the same thing. I want this responsive so the height of the div is not set. (tried 100% and no effect). When you navigate BACK to #home after visiting another page, the slider doesn't detect the image size so is only 5px high. If you hit refresh it will load correctly. Here is the code for the slider : jQuery.noConflict()(function($){ $(document).ready(function() { SyntaxHighlighter.all(); }); $(window).load(function(){ $('.flexslider').flexslider({ animation: "slide", start: function(slider){ $('body').removeClass('loading'); } }); }); }); As you can see I'm using the (window).load for my function so the images should already be loaded before the function takes place. These are both in a linked file I named custom.js in the head of the document. Have also tried pulling it out and putting it last but that had no effect. Anyone see what I got going on here? I'd give you a link but it's all still local.

I THINK I've found my answer. I stumbled across this bit of code and I believe it does exactly what I want it to do. Now just to change it to fit my application. (function(){ // querySelector, jQuery style var $ = function (selector) { return document.querySelector(selector); }; // Create function outside loop function dynamicEvent() { this.innerHTML = 'Dynamic event success.'; this.className += ' dynamic-success'; } // Iterate over #links <li> // Use querySelector to target #links and then get tag names <li> var links = $('#links').getElementsByTagName('li'); // For each <li> inside #links for (var i = 0; i < links.length; i++) { var link = links[i]; // <li> onclick, runAlert function link.onclick = dynamicEvent; } // Onsubmit $('.generate').onsubmit = function() { // Grab the input value var dynamicValue = $('.generate-input').value; // If empty value if(!dynamicValue) { alert('Please enter something.'); } else { // Change the submit value $('.generate-submit').value = 'Click your item below!'; // Create the links with the input value as innerHTML var li = document.createElement('li'); li.className = 'dynamic-link'; li.innerHTML = dynamicValue; // Append it and attach the event (via onclick) $('#links').appendChild(li); li.onclick = dynamicEvent; } // Prevent the form submitting return false; } })(); I'm using a bunch of var's with div's etc. in them but the principle is the same. Thanks anyway.

You guys always help. I'm NOT a javascript programmer but am learning slowly. Here's the situation: I'm loading dynamic content I originally created for PHP and MySql for this sites main page. No problems there. I savvy PHP. But now I'm building a phone app using juerymobile (mostly... lot's of custom javascript in there as well). So I'm calling for the dynamic content to be loaded via AJAX and JSONP. No problems there either. (basically getting that info from a PHP file of course that gets the info from the database). Now in PHP once I have that ID for the content I want I can manipulate things to my hearts desire. Since I'm not a javascript programmer it's hard for me to wrap my head around the way to accomplish what I can with PHP. I'm truncating data. I want to slide to a new view when an arrow is clicked. So I don't have to call for the data again, I'm hiding a div that slides into view when clicked. But I need the content of that particular row (in MySql) and only that row to appear in that div. I have that data in a var but since it's in a loop.... I can pass the ID on to javascript if that helps. Some good reading would be nice to increase my learning. Stupid class I took online didn't get into these kinds of details. Thanks!

I considered CSS but I want that div to expand and show more when the more link is clicked then retract when the less link is clicked. Good catch on the 90/100. I originally started with 100 then moved it back to 90 because I had a text wrap issue I didn't like the looks of. I guess it would be possible to still style this in CSS but figured this would be easier. Would still need to use javascript though to change my CSS values. Not sure what text you are wanting. The text is coming from MySQL via PHP delivered thanks to JSON and an AJAX call so it varies. Some post are less than the 90 characters while others are much longer (the row in MySQL is tiny text if I recall so no a varchar which limits me to 144).

Ok. Have it truncating the way I want. Problem is now when I click "More" I get Less Less Less Less Less Less then the final Less is a link. The others are not. This is in the loop I get back from my PHP file using JSONP. I've looked at it 6 ways to Sunday but can't seem to figure out how to make less less's :-) Odd that only the last one is a link the rest are just text. $.each(data, function(index, user){ var minimized_elements = $('p.minimize'); minimized_elements.each(function(){ var t = $(this).text(); if(t.length < 90) return; $(this).html( t.slice(0,90)+'<span>... </span><a href="#" class="more">More</a>'+ '<span style="display:none;">'+ t.slice(100,t.length)+' <a href="#" class="less">Less</a></span>' ); }); $('a.more', minimized_elements).click(function(event){ event.preventDefault(); $(this).hide().prev().hide(); $(this).next().show(); }); $('a.less', minimized_elements).click(function(event){ event.preventDefault(); $(this).parent().hide().prev().show().prev().show(); });

Never mind. (seems I always do this...ask a question then look at my code after posting and figure out what I did wrong). I see I needed to wrap that truncate part in my loop. After doing that it works as it should.

Ok. I have the jsonp working the way it should and I get the info back from a cross domain url. I copied the truncate portion of this code but it doesn't seem to be working for me. What's wrong with this code? I know it will be obvious but I'm new to javascript. :-) <script type="text/javascript"> $(function(){ var minimized_elements = $('p.minimize'); minimized_elements.each(function(){ var t = $(this).text(); if(t.length < 100) return; $(this).html( t.slice(0,100)+'<span>... </span><a href="#" class="more">More</a>'+'<span style="display:none;">'+ t.slice(100,t.length)+' <a href="#" class="less">Less</a></span>' ); }); $('a.more', minimized_elements).click(function(event){ event.preventDefault(); $(this).hide().prev().hide(); $(this).next().show(); }); $('a.less', minimized_elements).click(function(event){ event.preventDefault(); $(this).parent().hide().prev().show().prev().show(); }); $.get("http://www.somedomain.com/app_ajax.php?callback=?", function(data, textStatus){ $.each(data, function(index, user){ var newDiv = '<div class="prayer_received">' var newName = '<div class="name"><h2>' + (user.name) + '</h2></div>'; var newRequest = '<div class="prayer"><p class="minimize">' + (user.request) + '</p></div>'; var newDate = '<div class="date"><p>Posted on' + (user.date) + '</p></div>'; var newTimes = '<div class="times"><p>Prayed for' + (user.times) + ' times</p></div>'; var newRule = '<div class="rule"><hr></div></div>'; $("#request").append(newDiv + newName + newRequest + newDate + newTimes + newRule); }); }, "json" ); }); </script>

Not sure if this should be in other or here since Sencha Touch is basically a javascript program. Can someone tell me why this doesn't animate? And possibly what I need to do in order for this to work? (#events is an image I'm using for nav along with a bunch of other ones). Thanks, var el = panel.element, events = el.down('#events'); events.on('tap', function (e, t) { Ext.Viewport.setActiveItem(Ext.create('OrchardApp.view.Events'));}, panel.animateActiveItem(1, {type:'slide', direction:'left'}));

And for the record... I also tried hiding the div's with CSS then showing them with java. So display: none; for each div, removing that top part of the java and then just showing them when inactive. Same result. Video shows briefly but the second time through it stays on. Thoughts?

Perhaps someone can help me here. I'm not the best at javascript. Basically, I want to hide 2 divs on load then unhide the same 2 divs after inactivity of 5 seconds (for testing.... who wants to wait 1 minute?). This is the code I'm using. The part I have commented out makes it active again. Right now, div's are hidden as they should be. Then after 5 seconds they reveal. But my video just flashes on (in the #video div of course) then goes off. If I then make it active then inactive again, the video plays as it should. Here's the code: $(document).ready(function() { $('#video').hide(); $('#buttons').hide(); }); var activityTimeout = setTimeout(inActive, 5000); function resetActive(){ $('#video').hide(); $('#buttons').hide(); clearTimeout(activityTimeout); activityTimeout = setTimeout(inActive, 5000); } function inActive(){ $('#video').show(); $('#buttons').show(); var myPlayer = _V_("example_video_1"); //this is to play the video in videojs for html5 } //$(document).bind('mousemove', function(){resetActive()}); </script> Thanks in advance.

Yes sir. That's what they are saying anyway. I don't have that computer at my liberty at the moment to download it but I'll do that tomorrow. So for the time being, I'll just code away in HTML5 on my MAC and assume this is correct ;-) Now to give back. Think I'll head over and see if there's any questions I can answer on subjects I know more about. Thanks again sir!