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
Related
In my meteor app when I click my button it makes my div.box modal and full-width, but not full-screen. I want the height also be full-height.
My code looks like this:
'click .expand-link': function (event, template) {
console.log('.expand-link')
event.preventDefault();
var button = $(event.target);
var box = button.closest('div.box'); // var box = $(this).closest('div.box'); // var button = $(this).find('i');
var content = box.find('div.box-content');
button.toggleClass('fa-expand').toggleClass('fa-compress');
box.toggleClass('expanded');
$(document.body).toggleClass('body-expanded');
var timeout = 0;
if ($(document.body).hasClass('body-expanded')) {
timeout = 100;
}
setTimeout(function () {
box.toggleClass('expanded-padding');
}, timeout);
setTimeout(function () {
box.resize();
box.find('[id^=map-]').resize();
}, timeout + 50);
I searched for CSS file but I could not find class 'expanded'. How can I change the height when it has 'expanded' class ?
Just make class for "expanded" in the CSS ??
.expanded {
height: ...;
/* Properties ... */
}
I have been playing around with this for quite some time, and I do not know what is wrong. When I have a few links in a row, and keep fluttering my mouse cursor over them quickly every so often a tooltip will remain visible when it should go away (it is visible even after the cursor is no longer on the link).
I believe my code is logically valid, can someone else see if they know why a tooltip here and there would remain visible?
For a link of this type:
Link
Here is the code:
function tooltip(e) {
var ticketType = j$(e).data("ticket-type");
var ticketID = j$(e).data("ticket-id");
j$.post("/Some/Url/", { "ticketID":ticketID, "ticketType":ticketType },
function(r) {
var title = r["tt"];
var tooltip = j$(e).kendoTooltip( { content: title, position: "top" } ).data("kendoTooltip");
}).always(function() {
if (j$(e).is(":hover")) { j$(e).data("kendoTooltip").show(); }
else { j$(e).data("kendoTooltip").hide(); }
});
j$(e).hover(function() {},
// Handler for when the pointer is leaving an element
function(e) {
if (j$(e.target).data("kendoTooltip") != undefined) {
j$(e.target).data("kendoTooltip").hide();
.log(e.target.innerHTML + ": was hidden.");
}
}
);
}
I think the problem is that sometimes you mouseout before ajax post returns, therefore the tooltip is shown after you leave a link. As well as hiding on mouseout, how about setting a data attribute on the target link so that the AJAX return can check the attribute before showing the tooltip:
function tooltip(e) {
j$(e).data("hover", "true"); //turn on hover data-attribute
var ticketType = j$(e).data("ticket-type");
var ticketID = j$(e).data("ticket-id");
j$.post("/Some/Url/", { "ticketID":ticketID, "ticketType":ticketType },
function(r) {
var title = r["tt"];
var tooltip = j$(e).kendoTooltip( { content: title, position: "top" } ).data("kendoTooltip");
}).always(function() {
if (j$(e).data("hover") == "true") { j$(e).data("kendoTooltip").show(); }
else { j$(e).data("kendoTooltip").hide(); }
});
j$(e).hover(function() {},
// Handler for when the pointer is leaving an element
function(e) {
j$(e).data("hover", "false"); //turn offhover data-attribute
if (j$(e.target).data("kendoTooltip") != undefined) {
j$(e.target).data("kendoTooltip").hide();
.log(e.target.innerHTML + ": was hidden.");
}
}
);
}
DEMO
NOTE: demo uses a setTimeout to fake an ajax call
I want to put a little delay for onmouseout event for a group of sub items in a drop down menu. But I don't want to use css transitions.
I set it with .hover() and setTimeout method but I wanted to put it only for a specific elements in menu - in this case just for sub items so I used if else statement for them. I have no idea why this if else statement does't work.
Here is my javascript code:
var selectors =
{
element: '.main-menu li:has(ul)'
}
var opacityWorkaround = function ($element, value) {
$element.css('opacity', value);
};
var getAnimationValues = function (visible) {
var result = {
visibility: visible
};
result.opacity = visible === 'visible' ? 1 : 0;
};
var mouseActionHandler = function ($element, visible, opacityValue) {
$element
.stop()
.css("visibility", 'visible')
.animate(getAnimationValues(visible),
3000,
function () {
$(this).css("visibility", visible);
opacityWorkaround($(this), opacityValue);
});
};
var onMouseIn = function () {
var $submenu = $(this).children("ul:first");
if ($submenu) {
mouseActionHandler($submenu, 'visible', 1);
}
};
var onMouseOut = function () {
var $submenu = $(this).children("ul:first");
var $global = $('.global').children('ul');
if ($submenu) {
mouseActionHandler($submenu, 'hidden', 0);
} else if ($global) {
setTimeout(function() {
mouseActionHandler($global, 'hidden', 0);
},1500);
}
};
$(selectors.element).hover(onMouseIn, onMouseOut);
I put 1500ms delay and the $global variable is referring to sub items in menu that I want to make disapear with that delay. I wanted to achieve this when user move mouse cursor out of 'some items >' tab.
Here is my fiddle example.
http://jsfiddle.net/PNz9F/1/
Thanks in advance for any help!
In the example you have in your question $submenu always has a value so the else if statement is never run. You can check for a class instead.
var timeout;
var $submenu = $(this).children("ul:first");
var $global = $('.global').children('ul');
if ($(this).hasClass('menu-item')) {
mouseActionHandler($submenu, 'hidden', 0);
mouseActionHandler($global, 'hidden', 0);
clearTimeout(timeout);
} else if ($(this).hasClass('global')) {
timeout = setTimeout(function() {
mouseActionHandler($global, 'hidden', 0);
},1500);
}
you should be able to just use the :hover selector in your code to check whether the user is hovering over the element or not and run code accordingly
I wrote a slideshow plugin, but for some reason maybe because I've been working on it all day, I can't figure out exactly how to get it to go back to state one, once it's reached the very last state when it's on auto mode.
I'm thinking it's an architectual issue at this point, because basically I'm attaching the amount to scroll left to (negatively) for each panel (a panel contains 4 images which is what is currently shown to the user). The first tab should get: 0, the second 680, the third, 1360, etc. This is just done by calculating the width of the 4 images plus the padding.
I have it on a setTimeout(function(){}) currently to automatically move it which works pretty well (unless you also click tabs, but that's another issue). I just want to make it so when it's at the last state (numTabs - 1), to animate and move its state back to the first one.
Code:
(function($) {
var methods = {
init: function(options) {
var settings = $.extend({
'speed': '1000',
'interval': '1000',
'auto': 'on'
}, options);
return this.each(function() {
var $wrapper = $(this);
var $sliderContainer = $wrapper.find('.js-slider-container');
$sliderContainer.hide().fadeIn();
var $tabs = $wrapper.find('.js-slider-tabs li a');
var numTabs = $tabs.size();
var innerWidth = $wrapper.find('.js-slider-container').width();
var $elements = $wrapper.find('.js-slider-container a');
var $firstElement = $elements.first();
var containerHeight = $firstElement.height();
$sliderContainer.height(containerHeight);
// Loop through each list element in `.js-slider-tabs` and add the
// distance to move for each "panel". A panel in this example is 4 images
$tabs.each(function(i) {
// Set amount to scroll for each tab
if (i === 1) {
$(this).attr('data-to-move', innerWidth + 20); // 20 is the padding between elements
} else {
$(this).attr('data-to-move', innerWidth * (i) + (i * 20));
}
});
// If they hovered on the panel, add paused to the data attribute
$('.js-slider-container').hover(function() {
$sliderContainer.attr('data-paused', true);
}, function() {
$sliderContainer.attr('data-paused', false);
});
// Start the auto slide
if (settings.auto === 'on') {
methods.auto($tabs, settings, $sliderContainer);
}
$tabs.click(function() {
var $tab = $(this);
var $panelNum = $(this).attr('data-slider-panel');
var $amountToMove = $(this).attr('data-to-move');
// Remove the active class of the `li` if it contains it
$tabs.each(function() {
var $tab = $(this);
if ($tab.parent().hasClass('active')) {
$tab.parent().removeClass('active');
}
});
// Add active state to current tab
$tab.parent().addClass('active');
// Animate to panel position
methods.animate($amountToMove, settings);
return false;
});
});
},
auto: function($tabs, settings, $sliderContainer) {
$tabs.each(function(i) {
var $amountToMove = $(this).attr('data-to-move');
setTimeout(function() {
methods.animate($amountToMove, settings, i, $sliderContainer);
}, i * settings.interval);
});
},
animate: function($amountToMove, settings, i, $sliderContainer) {
// Animate
$('.js-slider-tabs li').eq(i - 1).removeClass('active');
$('.js-slider-tabs li').eq(i).addClass('active');
$('#js-to-move').animate({
'left': -$amountToMove
}, settings.speed, 'linear', function() {});
}
};
$.fn.slider = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
return false;
}
};
})(jQuery);
$(window).ready(function() {
$('.js-slider').slider({
'speed': '10000',
'interval': '10000',
'auto': 'on'
});
});
The auto and animate methods are where the magic happens. The parameters speed is how fast it's animated and interval is how often, currently set at 10 seconds.
Can anyone help me figure out how to get this to "infinitely loop", if you will?
Here is a JSFiddle
It would probably be better to let go of the .each() and setTimeout() combo and use just setInterval() instead. Using .each() naturally limits your loop to the length of your collection, so it's better to use a looping mechanism that's not, and that you can break at any point you choose.
Besides, you can readily identify the current visible element by just checking for .active, from what I can see.
You'd probably need something like this:
setInterval(function () {
// do this check here.
// it saves you a function call and having to pass in $sliderContainer
if ($sliderContainer.attr('data-paused') === 'true') { return; }
// you really need to just pass in the settings object.
// the current element you can identify (as mentioned),
// and $amountToMove is derivable from that.
methods.animate(settings);
}, i * settings.interval);
// ...
// cache your slider tabs outside of the function
// and just form a closure on that to speed up your manips
var slidertabs = $('.js-slider-tabs');
animate : function (settings) {
// identify the current tab
var current = slidertabs.find('li.active'),
// and then do some magic to determine the next element in the loop
next = current.next().length >= 0 ?
current.next() :
slidertabs.find('li:eq(0)')
;
current.removeClass('active');
next.addClass('active');
// do your stuff
};
The code is not optimized, but I hope you see where I'm getting at here.
I have a lightbox with jwplayer inside of it and i also have links along with it, problem is that when I click one of the links it closes the light box and never goes to the link, almost as if there is a eventprevent function on the light box when there isnt... Any how this is my code I apprecaite any help I can get to to fixing this problem.
Thanks
jQuery.fn.center = function () {
this.css("position","fixed");
this.css("top", ( $(window).height() - this.outerHeight() ) / 2 + "px");
this.css("left", ( $(window).width() - this.outerWidth() ) / 2 + "px");
return this;
}
jQuery.jwbox = {
lightbox : null,
player : null,
toggle : function(context) {
if (!$.jwbox.lightbox) {
$.jwbox.lightbox = $(".jwbox_hidden", context);
$.jwbox.center();
$("#jwbox_background").fadeIn("fast");
$.jwbox.lightbox.css("display","block")
$.jwbox.center();
$("#jwbox_background").fadeTo(0, 0.8);
$("object", context).each(function(){
$.jwbox.player = document.getElementById(this.id);
});
} else if ((context.className == 'jwbox_content')) {
} else {
try {
$.jwbox.player.sendEvent("STOP");
$.jwbox.player = null;
} catch (err) {
}
$.jwbox.lightbox.css("display","none");
$.jwbox.lightbox = null;
$("#jwbox_background").fadeOut("fast");
}
},
center : function() {
if ($.jwbox.lightbox) {
$.jwbox.lightbox.center();
}
}
}
$(document).ready(function () {
$("body").append('<div id="jwbox_background"> </div>');
$(".jwbox").click(function () {$.jwbox.toggle(this); return false;});
$("#jwbox_background").click(function () {$.jwbox.toggle(this); return false;});
$(window).resize(function() {$.jwbox.center();});
});
I ran into a similar issue. I resolved it by switching to jQuery colorbox. See: http://jacklmoore.com/colorbox/#setting-overlayclose
Solution :
Use jquery.lightbox-0.5 file from the download package
Then in this file search for
// Assigning click events in elements to close overlay
$('#jquery-overlay,#jquery-lightbox').click(function() {
_finish();
});
and remove it all.