We Keep Coding

Twitter like feature: click to reveal hidden text

I am trying to create a link that once you click it unlocks text.
I think I am almost there, but i am not sure how to show the hidden text, bellow is what I have so far. If someone could point me in the right direction that would be good.
HTML
<section id="container">
<p>Click to show content. Tweet Me.</p>
<p class="hidden-text">Locked</p>
</section>
JS
(function ($) {
var win = null;
$.fn.tweetAction = function (options, callback) {
options = $.extend({
url: window.location.href
}, options);
return this.click(function (e) {
if (win) {
e.preventDefault();
return;
}
var width = 550,
height = 350,
top = (window.screen.height - height) / 2,
left = (window.screen.width - width) / 2;
var config = [
'scrollbars=yes', 'resizable=yes', 'toolbar=no', 'location=yes',
'width=' + width, 'height=' + height, 'left=' + left, 'top=' + top
].join(',');
win = window.open('http://twitter.com/intent/tweet?'+$.param(options),
'TweetWindow',config);
// Checking whether the window is closed every 100 milliseconds.
(function checkWindow() {
try {
if (!win || win.closed) {
throw "Closed!";
}
else {
setTimeout(checkWindow, 100);
}
}
catch (e) {
win = null;
callback();
}
})();
e.preventDefault();
});
};
})(jQuery);
JS
$(document).ready(function(){
$('#tweetLink').tweetAction({
text: 'First tweet',
url: '#',
via: 'website'
},function(){
$('hidden-text')
{
// action here
}
});
});

JS
// to show an element that's hidden, you can use .show() or just remove the class
// option 1:
$(".hidden-text").show();
// option 2:
$(".hidden-text").removeClass("hidden-text");
CSS
.hidden-text {
display: none;
}

$('#tweetLink').click(function(){ $('.hidden-text').slideToggle(); })
This would show and hide the paragraph alternatively every time the link is clicked
If you just want show use .show(). Or .slideUp( if you want some effect) Instead of .slideToggle
CSS
Make sure your hiddent-text class has a display:none CSS property. And not hidden visability

How do I add a class during a scroll event in iOS?

The following script successfully adds or removes a "fix" class to an element (#sideBarWrapper) in desktop browsers, depending on the distance a user has scrolled.
(function (exocet, $, undefined) {
// Distance of sidebar from document top
function sideBarTop () {
return $eventSideBar.offset().top;
}
// Distance user has scrolled
function scrollDist () {
return $(window).scrollTop();
}
// Toggle sidebar class
function sideBarStick(sbt) {
if (sbt-30 < scrollDist()) {
$sideBarWrapper.addClass('fix');
} else{
$sideBarWrapper.removeClass('fix');
}
}
// Scroll events
function scroll() {
$eventSideBar = $('#eventSideBar');
$sideBarWrapper = $('#sideBarWrapper');
var sbt = sideBarTop();
return $(window).scroll(function () {
sideBarStick(sbt);
});
}
exocet.init = function () {
scroll();
};
}(window.exocet = window.exocet || {}, jQuery));
Invoked like so:
$(function() {
exocet.init();
});
The problem is, in Safari for iPad, the class doesn't seem to get added until the document has come to a halt, often long after the sidebar has scrolled out of view. How can I compensate for this?

Slowly scroll the content of a div on hover and stop on mouseoff

Please take a look at this website
I'm trying to implement two arrows on top and bottom of the gallery so when people mouse over the arrows, the content would scroll top and bottom respectively.
Here is the code I'm currently using that scrolls the content down when you hover over the bottom arrow. But there are two issues with it:
I want the scrolling to stop when the user mouses off
Hopefully do not display the arrow(s) if there is no more content left to scroll
if ( $("body").hasClass('projects') ) {
$("#jig1").height($(document).height() - 187);
$("#scroll-to-bottom").hover(
function () {
$("#jig1").animate({ scrollTop: $(document).height() }, 10000);
},
function () {
}
);
}
Can anyone offer an improved solution?

Answer to the seccond question.
Add the inner wrapper to the divs blocks
Html should look like this
<div id="jig1">
<div id="jig1Inner">
... here put rest of the code
if ($("body").hasClass('projects'))
{
$("#jig1").height($(document).height() - 187);
var watchScrollers = function()
{
var tmp = $("#jig1Inner").height() - $("#jig1").height();
if (tmp == $("#jig1").scrollTop())
{
$("#scroll-to-bottom").css("visibility","hidden");
}
else
{
$("#scroll-to-bottom").css("visibility","visible");
}
if ($("#jig1").scrollTop() == 0)
{
$("#scroll-to-top").css("visibility","hidden");
}
else
{
$("#scroll-to-top").css("visibility","visible");
}
}
$("#scroll-to-bottom").unbind("hover").hover(function() {
$("#jig1").stop().animate({scrollTop: $("#jig1Inner").height() - $("#jig1").height()}, 10000);
}, function() {
$("#jig1").stop(); //stops the animation
watchScrollers();
});
$("#scroll-to-top").unbind("hover").hover(function() {
$("#jig1").stop().animate({scrollTop: 0}, 10000);
}, function() {
$("#jig1").stop(); //stops the animation
watchScrollers();
});
watchScrollers();
}

Try this:
$("#scroll-to-bottom").mouseover( function () {
$("#jig1").animate({ scrollTop: $(document).height() }, 10000);
});
$("#scroll-to-bottom").mouseout( function () {
$("#jig1").stop()
});

jQuery toggleClass with direction and animation

I've followed a tutorial to add to my site a fixed header after scroll and the logo of the site appear on the fixed part.
That works, the code:
var nav_container = $(".nav-container");
var nav = $("nav");
var logo = $("logo");
nav_container.waypoint({
handler: function(event, direction) {
nav.toggleClass('sticky', direction=='down');
logo.toggleClass('logo_sticky', direction=='down');
if (direction == 'down')
nav_container.css({ 'height' : nav.outerHeight() });
else
nav_container.css({ 'height' : 'auto' });
});
});
How can I add a delay with fade-in to the logo, so it doesn't appear suddenly?
Versions I've tried:
logo.toggleClass('logo_sticky', direction=='down').delay(500).fadeIn('slow');
logo.delay(500).toggleClass('logo_sticky', direction=='down').fadeIn('slow');
(before the toggleClass)
logo.delay(500).fadeIn('slow')
logo.toggleClass('logo_sticky', direction=='down');
(after the toggleClass)
logo.toggleClass('logo_sticky', direction=='down');
logo.delay(500).fadeIn('slow')
To be honest I've tried every single combination that came to my mind lol
new version that I'm trying that don't work either:
$(function() {
var nav_container = $(".nav-container");
var nav = $("nav");
var logo = $("logo");
$.waypoints.settings.scrollThrottle = 30;
nav_container.waypoint({
handler: function(event, direction) {
if (direction == 'down'){
nav_container.css({ 'height':nav.outerHeight() });
nav.addClass('sticky', direction=='down').stop();
logo.css({"visibility":"visible"}).fadeIn("slow");
}
else{
nav_container.css({ 'height':'auto' });
nav.removeClass('sticky', direction=='down').stop();
logo.css({"visibility":"hidden"});
}
},
offset: function() {
return (0);
}
});
});
but if I instead of fadeIn put toggle it animes the change but in a bad direction (the img appear and then toggle to disapear)
thanks

http://api.jquery.com/delay/
http://api.jquery.com/fadein/
use $(yourLogoSelector).delay(delayAmount).fadeIn();
here is proof that it works http://jsfiddle.net/6d8cf/

It seems like the fadeIn only works if you don't have the css the property visibility: hidden, but display:none...
you can do a element.hide(); and then element.fadeIn().
since the hide() changes the layout of the page because it eliminates the item from it this is the solution I came across:
$(function() {
// Do our DOM lookups beforehand
var nav_container = $(".nav-container");
var nav = $("nav");
var logo = $("logo");
$.waypoints.settings.scrollThrottle = 30;
nav_container.waypoint({
handler: function(event, direction) {
if (direction == 'down'){
nav_container.css({ 'height':nav.outerHeight() });
nav.addClass('sticky', direction=='down').stop();
logo.css('opacity',0).animate({opacity:1}, 1000);
}
else{
nav_container.css({ 'height':'auto' });
nav.removeClass('sticky', direction=='down').stop();
logo.css('opacity',1).animate({opacity:0}, 1000);
}
},
offset: function() {
return (0);
}
});
});

How to make a jquery function run when a div is displayed on the screen

In Short:
I am working on a project and I want to run a function when a particular div is displayed on the screen.
Detail:
There is a scroll to top button fixed on the bottom right of the screen in my template. I want to hide that button when someone scroll down to the footer.
Means when someone scroll down to the footer and the top border of the footer is displayed on the screen, I want a function to run which would hide the go to top button.
Please help me out of this problem...

$(document).ready(function() {
var footer = $("footer");
var f_top = footer.position().top;
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() >= f_top ) {
footer.hide();
}
else{
footer.show();
}
});
});

Initialize the window to monitoring its scrolling
$(document).ready(function () {
$(window).scroll(function () {
// get the element that you want check scrolling on it
var off = $("your-selector").offset().top;
var top = $(window).scrollTop() + $(window).height();
if (off <= top) {
// do your job
// for example you can call a function like:
my_method_to_invoke();
}
});
});
The function you want to invoke it:
function my_method_to_invoke() {
// TODO
}

I think you'll need to register a scroll listener on the body that checks to see if the footer is in view and perform the hide if so. Something like this...
$(body).scroll(function () {
scrollCheck();
});
var scrollCheck = function () {
var docTop, docBot, elemTop, elemBot;
docTop = $(window).scrollTop;
docBot = docTop + $(window).height();
elemTop = $(<footer element>).offset().top;
elemBot = elemTop + $(<footer element>).height();
if ((elemBottom >= docTop) && (elemTop <= docBot)) {
$(<button element).hide();
}
}