We Keep Coding

Show div display none to block after pass another div then use onclick to display none again

I'm trying to show a fixed div for some popup ad when scroll and pass another div on the page, and then use onclick button to hide it again, and I want this to load one time per page so the visitor if gone to the top of page and scrolled to the div again it will not appear again .. and all this work on mobile screens only!!
I use #onthediv just as a bridge without content. I tried many codes but no success.I hope it is clear what I really need :)
<div id = "onthediv"></div>
<div id="mydiv" style="position: fixed; z-index:9999; left: 0px; top: 35%;">
<button class="btn" style="position:absolute;left:0px;top:0px;z-index:999;"
onclick="document.getElementById('mydiv').style.display='none'">
<img src="CloseBtn.png" width="40" height="38">
</button>
<!--popup image -->
</div>
css
.mydiv { display: none;
}
$(document).ready(function() {
$("#mydiv").hide(); //hide your div initially
var topOfOthDiv = $("#onthediv").offset().top;
$(window).scroll(function() {
if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
$("#mydiv").show(200); //reached the desired point -- show div
}
});
});
tried also
document.getElementById("target-id").style.display = "block";

Toggle div on div click horizontally

I made a div which has a background image of a face, I have designed div which contains a paragraph, 2 buttons and an input box.
I know this question has been asked quite often however my situation is different, I'd like for my div with the background image of a face to be clickable so that the div containing everything else slides out from the left.
What is the best method to do this?
HTML
<div id="image"></div>
<div id="container">
<p>I like nutella and croissants</p>
<input id="message" placeholder="type...." required="required" autofocus>
<button type="button" id="send">Send</button>
<button type="button" id="close">Close</button>
</div>
CSS
div#image { background: url(http://i.imgur.com/PF2qPYL.png) no-repeat; }
JQUERY
$(document).ready(function(){
$( "#image" ).click(function() {
jQuery(this).find("#container").toggle();
});
});

Using the article link posted by Raimov (which I actually came across in a Google search before realize he posted it as well ;), we can use jQuery to animate the width when the toggling element is clicked. Remember that a background does not add size to an element, so the toggle with the background image must have a height attribute set. Also, if you have long lines of text in the form, you'll have to wrap them yourself or use another method from the article.
http://jsfiddle.net/iansan5653/wp23wrem/ is a demo, and here is the code:
$(document).ready(function () {
$("#image").click(function () {
$("#container").animate({width: 'toggle'});
});
});
and this CSS is necessary:
div#image {
background: url(http://i.imgur.com/PF2qPYL.png) no-repeat;
height: 36px;
/*height needed to actually show the div (default width is 100%)*/
}
#container {
white-space: nowrap;
overflow: hidden;
}

I created a jsFiddle for you, where after clicking on img, the form hides to the left.
$("#image").click(function() {
var $lefty = $(this).children(); //get the #container you want to hide
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth() : 0
});
The resource was taken from:
Tutorial how to slide elements in different directions.

How to add a hidden sidebar that only shows when clicked or hovered?

I'm trying to add a hidden sidebar on my website. This is what exactly what I want to achieve: http://demo.themebeans.com/pinto/ but I wanted it to show in hover instead of click. just instead of a click... just want my visitors to just hover on it.
Here's what I have so far. I want it to be positioned the same with the sample I've given above. :( Can someone help?
#nav{width:200px;height:100%;position:absolute;top:0;left:0;z-index:100;background:#111;color:#fff;overflow:hidden;}
#nav ul{margin:0;padding:0;width:200px;margin:10px;list-style:none;}
#nav a span{margin:0 10px 0 0;}
#nav a{color:#fff;font-size:14px;text-decoration:none;}
jQuery:
$(function(){
$('#nav').hover(function(){
$(this).animate({width:'200px'},500);
},function(){
$(this).animate({width:'35px'},500);
}).trigger('mouseleave');
});
HTML:
<div id="nav">
Contents of the sidebar like the one on my sample.
</div>
http://jsfiddle.net/yztJ8/ here's the fiddle.

You need to set the absolute positioning correctly:
#nav { position: absolute; top: 0px; right: 0px; }
Just change left: 0; to right: 0; - here is the updated fiddle: http://jsfiddle.net/yGBkV/
I strongly recommend you use the hoverIntent plugin - the user experience will improve a lot:
http://cherne.net/brian/resources/jquery.hoverIntent.html

Here is a mix of pure JS and jQuery.
(function() {
var oNav = document.getElementById('nav');
oNav.addEventListener('hover', function() {
$('#nav').fadeIn();
}, false);
})();
This probably should work.

simply try
$('#nav1').bind("mouseenter", function() {
$('#nav').animate({width:'200px'},500);
});
$('#nav1').bind("mouseleave", function() {
$('#nav').animate({width:'0px'},500);
});
jsfiddle: http://jsfiddle.net/yztJ8/5/

Collapse/Expand a content box with a toggle

I go right to the point, I have a few boxes that I want them to be expanded and collapsed with a toggle located in their headers.
This toggle is an anchor tag which has a sprite background, the top part of this sprite image is pointing at top, and bottom section is pointing at down. You can guess what they mean and I want their state to be changed (first one for collapse and second one for expand)
The structure of the boxes are something like this :
<section class="box2">
<header class="box-head">
<div class="box-title fr">
<span class="box-icon"></span>
<h3 class="box-title-text">Title Title</h3>
</div>
<a class="box-toggle fl active" href="#">A</a>
<br class="cfx" />
</header>
<div class="box-content">
<img src="img/chart-1.png" alt="" />
//Content or collapsing data goes here
</div>
</section>
And I used one of the most straight forward ways to achieve this effect. You can see the following CSS and jQuery code below. (I chose active class as default when the icon is pointing at top)
JS :
<script type="text/javascript">
$("a.box-toggle").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
//Slide up and down on click
$("a.box-toggle").click(function(){
$(this).next("div.box-content").slideToggle("slow");
});
});
</script>
CSS :
.widget-toggle {
display: block;
overflow: hidden;
text-indent: -9999px;
width: 18px; height: 9px;
margin-top: 15px;
margin-left: 13px;
background: url(../img/sidebar-arrows.png) no-repeat 0 -18px;
}
.widget-toggle.active {
background: url(../img/sidebar-arrows.png) no-repeat 0 0;
}
Thanks for your huge help :)
Edit No. #1 :
Thanks to #Recode , their tip worked just fine, But according to what I explained and you can see in this picture. I wanna show the state of this with an Icon
Active is pointing at top and Inactive is pointing at bottom, when I want the box to be collapsed I'm showing "Active" and when I want the box to be expanded I'm showing "Inactive" .
With this code I managed to show active at default (I set the class of each box to active manually, if there is a better way to set the default class to active or whatever else please note.)
When I click on it, box collapses and the Icon transitions to Inactive state. And When I click again box expands but the Icon stays in the same state (Inactive and pointing at bottom).
And after clicking :
Here is the Code :
$("a.box-toggle").click(function(){
$(this).addClass("active");
}, function () {
$(this).addClass("inactive");
});
Thanks a lot, Again.

Just use this:
$(document).ready(function() {
//Slide up and down on click
$("a.box-toggle").click(function(){
$(this).toggleClass('inactive');
$(this).parent().next("div.box-content").slideToggle("slow");
});
});
http://jsfiddle.net/Recode/DLxaB/
updated fiddle: http://jsfiddle.net/Recode/DLxaB/1/

Try this: FIddle
jQuery code:
$("a.box-toggle").on('click', function () {
$('div.box-content').slideToggle(200).toggleClass('active');
});
.slideToggle() .toggleClass()

On mouseover, changing an image's opacity and overlaying text

I want to drop the opacity and overlay text on a thumbnail image when I mouse over it. I have several ideas about how to do it, but I'm fairly certain they're inefficient and clumsy.
Make a duplicate image in Photoshop with the text overlay and reduced opacity. Swap the original out for the duplicate on mouseover.
Use CSS to drop the opacity on mouseover. Use Javascript to toggle visibility of a div containing the overlay text.
The problem I see with 1 is it seems like an unnecessary use of space and bandwidth, and will cause slow load times. With 2, it seems like I'd have to hard-code in the location of each div, which would be a pain to maintain and update. I know this is a somewhat general question, but I'm at a loss about how to go about this. How can I do this relatively simple task in a way that will make it easy to add new thumbnails?

Wrap your image in a <div class="thumb">
Add position: relative to .thumb.
Add <div class="text> inside .thumb.
Add display: none; position: absolute; bottom: 0 to .text.
Use .thumb:hover .text { display: block } to make the text visible on hover.
Like this: http://jsfiddle.net/dYxYs/
You could enhance this with some JavaScript/jQuery: http://jsfiddle.net/dYxYs/1/
$('.text').hide().removeClass('text').addClass('text-js');
$('.thumb').hover(function(){
$(this).find('.text-js').fadeToggle();
});
This way, the basic effect still works without JavaScript, and users with JavaScript get the appealing fade effect.

Go with option 2. There are ways to do it to not have to write a jQuery function for each image. As seen in my jsfiddle.
http://jsfiddle.net/daybreaker/dfJHZ/
HTML
<img src="http://placekitten.com/300/300" />
<span class="text" style="display:none">THIS IS A KITTEN</span>
<br><br>
<img src="http://placekitten.com/200/200" />
<span class="text" style="display:none">THIS IS A KITTEN</span>
jQuery
$('img').mouseover(function(){
$(this).css('opacity','.2');
$(this).next('span.text').show();
}).mouseout(function(){
$(this).css('opacity','1');
$(this).next('span.text').hide();
});
You would need to modify the span.text css to overlay it on top of the image, but that shouldnt be too bad.

Wrap it in an element and do something like this:
var t;
$('div.imgwrap img').hover(function(){
t = $('<div />').text($(this).attr('title')).appendTo($(this).parent());
$(this).fadeTo('fast',0.5);
},function(){
$(this).fadeTo('fast',1);
$(t).remove();
});
with a markup similar to:
<div class="imgwrap">
<img src="http://www.gravatar.com/avatar/3d561d41394ff0d5d0715b2695c3dcf0?s=128&d=identicon&r=PG" title="text" />
</div>
example: http://jsfiddle.net/niklasvh/Wtr9W/

Here's an example. You can position the text however you want, but the basic principle below.
http://jsfiddle.net/Xrvha/
#container { position: relative; }
#container img, #container div {
position: absolute;
width: 128px;
height: 128px;
}
#container img { z-index -1; }
#container div {
z-index 1;
line-height: 128px;
opacity: 0;
text-align: center;
}
#container:hover img {
opacity: 0.35;
}
#container:hover div {
opacity: 1;
}

If you don't want to change your HTML wraping things etc, I suggest you this way. Here is the jQuery:
$(function() {
$(".thumb").mouseenter(function() {
var $t = $(this);
var $d = $("<div>");
$d.addClass("desc").text($t.attr("alt")).css({
width: $t.width(),
height: $t.height() - 20,
top: $t.position().top
});
$t.after($d).fadeTo("fast", 0.3);
$d.mouseleave(function() {
$(this).fadeOut("fast", 0, function() {
$(this).remove();
}).siblings("img.thumb").fadeTo("fast", 1.0);
});
});
});

2 is a good solution, have done about the same as this and it isn't as hard as you would've tought;
Drop de opacity with css indeed, than position a div relative to the img, and over it. It can be done with plain css. The z-index is the trick. That div can just be shown with $('#div').slideUp() ie.