Develop Reference

Twitter button not showing if initially hidden

I have a Twitter button on the page using the widget. The button renders as it should unless I place it into a hidden container.
I would like to place the share button into a hidden container that only shows when clicked. I have all of the functionality working, however the Twitter button will not show if placed into a hidden container.

You could use the CSS tag display: none then remove the tag when you click the button and add the tag back whenever you are done sharing to Twitter.
Something like this:
HTML
<input type="button" class="clickMe" value="Click Me" />
<img src="img/twitter.png" class="twitterPic hideMe" />
CSS
Assuming you have a separate style sheet.
.hideMe { display: none;}
JavaScript
$(".clickMe").on("click", function () {
$(".twitterPic").removeClass("hideMe");
});
Here are some links to the JQuery pages to add and remove classes:
https://api.jquery.com/removeClass/
https://api.jquery.com/addClass/

You could try the following:
place the container outside the viewport by setting its left or
right property to sth like 5000px .container {left:5000px;}
take off the display:none css
rule that's causing the problem. This way the twitter code should be
able to fire properly when the page loads
then set the container's position by using
the offset() function when the user clicks on the button. This way
the container will show where you want it to

How to simulate click on a display:none on hover image (how to listen for any mouse click in a browser)

On a website (find it by the link) I have links with images in footer (screenshot)
I have found a great glitch effect in a footer icons which I want to use. It chages images randomly if code looks like that:
<footer class="footer text-center">
<a target="_blank" href="http://link1.com"><img src="f2.jpg"></a>
<img src="f3.jpg">
<a target="_blank" href="http://link3.com"><img src="f1.jpg"></a>
<a target="_blank" href="http://link4.com"><img src="f5.jpg"></a>
<a target="_blank" href="http://link5.com"><img src="bc.png"></a>
<img src="mail.jpg">
</footer>
and simple style
.footer img:hover {
display:none;
}
But in that scenario click while hovering on of the image footers gives no result.
I've tried to use javascript:
var a_href
$("footer a").on("mousemove", function() {
a_href = $(this).attr('href');
console.log(a_href);
});
$(document).click(function(){
console.log("!!!!!!!!!!!");
console.log(a_href);
window.open(a_href,'_blank');
});
Idea was to save the last hovered link and then emulate the click on it by clicking any other element. But that method works only if I click anywhere ELSE than a space over the glitchy icons. Same with $('body').click, $('.footer').click.
I've tried to overlay footer with other div on which i'd be putting .click but then display:none on hover doesn't work.
Here is a jsfiddle - http://jsfiddle.net/yssdjr17/1/
What should I do? Thank you.
UPD
If we use something instead of a display:none we loose the cool glitch effect that way. We loved how randomly elements collapsed and that user might click on one of the elements, but never sure on which one. Some sort of a minigame for him.
Is there a way to listen for a mouseclick, in browser, no matter on what element?

Don't use display: none, use visibility: hidden instead. This way the element will still be there, just not visible.
.footer img:hover {
visibility: hidden;
}
JSFiddle demo.

The effect makes it look broken.
You can't fire the click event from anything hidden or not displayed.
Instead try:
<div id="awesomelink" onclick="openawesomewindow('http://link1.com');"></div>
#awesomelink
{
height:60px;
width:60px;
background-image:url('f1.jpg');
}
#awesomelink:hover
{
background-image:url('awesomecrazyanimated.gif');
}
It's how I'd do it and you'll get a more consistant result across different browsers.
Also the menu of icons won't be shortened by one element making savvy surfers afraid to click.

How to cycle a single div in an element with jQuery

I am trying to see if the following is possible:
I want to be able to cycle a single div within an element continuously [so the start of the div is by the end of the same div as it cycles.]
This doesn't have to be an existing plugin. I would prefer to not clone the div if possible. The div's width will be set via javascript prior to cycle but might be adjusted in small amounts.
I would appreciate any ideas!

jsBin demo
jQuery:
$('.scroller').each(function(){
$(this).find('img').clone().appendTo($(this));
});
(function move(){
$('.scroller').scrollLeft(0).stop().animate({scrollLeft:310},800,'linear',move);
})();
HTML:
<div class="scroller">
<img src="" alt="" />
</div>
CSS:
.scroller{
width:310px;
height:80px;
white-space:nowrap;
word-spacing:-1em;
overflow:hidden;
margin:30px;
}
.scroller img{
display:inline;
}
It will make clones only once. Than my jQuery script will create a loop that will just play with the scrollLeft() element property.
N.B: this is just a plain example, you could make 310px be dynamically calculated, but that's another story, let's keep it simple.

What about the marquee plugin?
Demo
Docs
Note that first example in the Demo, that scrolls left, if you set the width of the container to the same size or smaller than your content to scroll it will appear to cycle fluidly.

How to make an underlaying element unclickable/deactive?

I have two elements on top of each other. When I click a button on the first div, the second div opens on top of the first div, and what I want to do is to make the underlaying div non-interactive (That I can't click on anything on the underlaying-div as long as the overlaying-div is open).
Javascript code:
$('#button').live('click', function()
{
$('#underlaying-div).fadeTo("fast", 0.7);
$('#overlaying-div).css('display', 'block');
//Do something here to make the underlaying div unclickable
});
$("#overlaying-div").live("click", function() {
$(this).hide();
$('#underlaying-div).fadeTo("slow", 1.0);
//Do something here to make the underlaying div clickable again
});
CSS-code:
#overlay-div
{
position:absolute;
left:0;
top:0;
display:none;
z-index: 20000;
}
I know I can use event.preventDefault() to make sure nothing happens if you click on an element in the underlaying-div, but I'd rather want that nothing happens at all when you for instance hover over an button (with preventDefault(), hover and other stuff still happens).
Any other ways in CSS or javascript/JQuery that can fix this problem??

Not sure of your final product, but if the underlaying div get overlapped by the overlaying in a way that the underlaying div is not visible anymore you could just display:block; the underlaying div.

This is a very old question, but if someone happens upon it, you might find it useful to toggle the pointer-events CSS property of the object you want to disable. You won't need to manually remove click bindings or add any other wrappers. If an object has pointer-events set to 'none', no events will fire when it is clicked.
In jQuery:
$('#underlaying-div).css('pointerEvents', 'none'); // will disable
$('#underlaying-div).css('pointerEvents', 'auto'); // will reenable

You could use unbind to remove the click event handler like this:
$(this).unbind('click'):
My concern is if this works with a live bind but you should at least try it :)

Why don't you use jQuery .fadeIn() and .fadeOut() functions? You have two divs with id="div1" and id="div2" and you have a button in div1 with id="button1" and a button in div2 with id="button2".
CSS code:
#div1 {
//some CSS code without z-index
}
#div2 {
//some CSS code without z-index
visibility:hidden;
}
jQuery code:
$('#button1').click(function(){$('#div1').fadeOut('slow', function(){$('#div2').fadeIn()})})
$('#button2').click(function(){$('#div2').fadeOut('slow', function(){$('#div1').fadeIn()})})

Hover over image to show buttons and don't trigger when hovering over actual buttons

I'm trying to get buttons to appear when hovering over an image. The following works:
jQuery('.show-image').mouseenter(function() {
jQuery('.the-buttons').animate({
opacity: 1
}, 1500);
}).mouseout(function() {
jQuery('.the-buttons').animate({
opacity: 0
}, 1500);
});
However, when moving from the image to the button (which is over the image), the mouseout/mouseenter is triggered, so the buttons fade out then fade back in (the buttons have the same class as the image, otherwise they just stay faded out). How can I prevent this from triggering? I've also tried the above code using jQuery's hover; same results. Here's a detail of the image showing the button with opacity 1 (because I'm over the image):
http://i.stack.imgur.com/egeVq.png
Thanks in advance for any suggestions.

The simplest solution is to put the two in the same parent div and give the parent div the show-image class.
I like to use .hover() to save a few key strokes. (alll hover does is implement .mouseenter() and .mouseleave(), but you don't have to type them out)
Additionally it's very imporant to fade $(this).find(".the-buttons") so that you only change the button in the hovered over div otherwise you would change all of the .the-buttons on the entire page! .find() just looks for descendants.
Finally, .animate() will work, but why not just use .fadeIn() and .fadeOut()?
JS:
jQuery(function() { // <== Doc ready
jQuery(".the-buttons").hide(); // Initially hide all buttons
jQuery('.show-image').hover(function() {
jQuery(this).find('.the-buttons').fadeIn(1500); // use .find() !
}, function() {
jQuery(this).find('.the-buttons').fadeOut(1500); // use .find() !
});
});
Try it out with this jsFiddle
HTML: - Something like this
<div class="show-image">
<img src="http://i.stack.imgur.com/egeVq.png" />
<input class="the-buttons" type="button" value=" Click " />
</div>​
CSS: - Something like this. Yours will likely be different.
div {
position: relative;
float:left;
margin:5px;}
div input {
position:absolute;
top:0;
left:0; }​

Put the image and the button in the same div, then put the mouseover/mouseout events on the div. Than whether your mouse is over either the button or the image, it will still be over the div.
Also I am not sure if mouseenter(...).mouseout(...) will work. I always use hover(..., ...)